body,
html {
-moz-osx-font-smoothing: grayscale;
}
header,
nav {
background-color: #0f1923 !important;
padding: 0.5rem 0;
width: 100%;
color: #fff;
box-sizing: border-box;
}
/* Slight shadow overhang under main navbar */
header {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
*,
body {
padding: 0;
}
.play-now-button,
.timer {
font-weight: 600;
right: 0.75rem;
}
.nav-tabs li.active a,
.nav-tabs li.active.live-indicator {
border-bottom: 0.125rem solid var(--primary-cta);
}
.nav-tabs,
ol,
ul {
list-style: none;
}
*,
::after,
::before {
box-sizing: border-box;
}
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
max-width: 100vw;
width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
.section-title h2,
body {
color: var(--text-color);
margin: 0;
}
canvas,
img,
picture,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
button,
input,
select,
textarea {
font: inherit;
border: none;
outline: 0;
background: 0 0;
}
.nav-tabs li,
body {
font-family: var(--font-family);
}
.section-title h2.expired-indicator::before,
.section-title h2.live-indicator::before {
content: "";
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
margin-right: 0.3125rem;
animation: 1.5s infinite pulse;
}
button {
cursor: pointer;
touch-action: manipulation; /* Prevent accidental zoom/delay on touch */
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
overflow-wrap: break-word;
}
#__next,
#root {
isolation: isolate;
}
@media (prefers-reduced-motion: reduce) {
*,
::after,
::before {
animation-duration: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0s !important;
scroll-behavior: auto !important;
}
}
:root {
--background-color: linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%);
--text-color: #20242e;
--primary-cta: #00cc5a;
--border-color: #4a4c4e;
--subtle-gray: #4a5568;
--glow-color: #00cc5a;
--content-side-padding: 1rem; /* betting.bets style - used for horizontal-track margins/padding */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--font-family: "Montserrat", sans-serif;
--font-size-base: 1rem;
--font-size-sm: 0.875rem;
--font-size-md: 1rem;
--font-size-lg: 1.125rem;
--z-sticky: 100;
--breakpoint-sm: 480px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1440px;
--box-width: 18.75rem;
--box-height: 25rem;
--box-image-height: 11.25rem;
--box-top-height: 2.5rem;
--box-padding: 0.9375rem;
--box-border-radius: 0.75rem;
--timer-font-size: var(--fs-base);
--timer-min-width: 7.5rem;
--logo-max-width: 3.75rem;
--button-font-size: 1rem;
--button-padding: 0.75rem 1.25rem;
--blurb-font-size: 1rem;
--blurb-min-height: 2.5rem;
--blurb-line-height: 1.25rem;
--checked-font-size: 0.75rem;
--horizontal-gap: 1.25rem;
/* Typography scale – single source of truth (desktop): 22px h2, 20px h3, 16px body */
--fs-hero-xl: 4rem;
--fs-hero-lg: 2rem;
--fs-hero-sub: 1.25rem; /* 22px – hero subtitle matches h2 */
--fs-h2: 1.25rem; /* 20px – section headers (desktop) */
--fs-h3: 1.25rem; /* 20px – sub-headers */
--fs-base: 1rem; /* 16px – body, offer text, timer */
--fs-sm: 0.875rem; /* 14px – secondary */
--fs-offer-header: 1.125rem;
/* Individual competition page offers-box – single source of truth */
--offer-box-header: 1.125rem;
--offer-box-main: 1.875rem;
--offer-box-secondary: 1.25rem;
--fs-xs: 0.75rem;
/* Key terms inside offer boxes only (casino/sports/no-wagering/no-deposit/blog offer cards): 10px desktop */
--fs-key-terms-offer-box: 10px;
/* Metrics bar and key-terms-blurb – single source so they always match */
--metrics-bar-bg: #f0f1f3;
/* Mobile metrics bar: label and value both 12px for readability */
--metric-mobile-fs: 12px;
/* Non-homepage page hero (all other pages): change here only */
--fs-page-hero-title: 2rem; /* 32px – hero h1 desktop */
--fs-page-hero-sub: 1rem; /* 16px – hero subtitle desktop */
/* Homepage desktop only: Betquest map shift (negative = left, 0 = no shift; min gap keeps it off hero text) */
--homepage-hero-map-translate-x: -10px;
--homepage-hero-map-min-gap-desktop: 1.5rem;
/* Homepage mobile only (until 768): Betquest map height – change this to control mobile map size */
--homepage-hero-map-height-mobile: 260px;
/* Spacing system – single source of truth for consistent gaps */
--space-xs: 0.5rem;
--space-s: 1rem;
--space-m: 1.5rem;
--space-l: 2rem;
--space-xl: 3rem;
/* Functional names (Oddschecker-style): control site "breath" in one place */
--space-block: 1rem; /* Header ↔ content; content ↔ See all */
--space-inline: 0.75rem; /* Between list items (e.g. offers) */
--space-section: 2rem; /* Between end of section (See all) and next header */
/* Filter box (sports + casino): same setup on all dimensions */
--filter-box-title: 16px; /* FIND SPECIFIC OFFERS: mobile */
--filter-box-value: 14px; /* Filter option text + column headers: mobile */
}
@media (min-width: 768px) and (max-width: 1023px) {
:root {
/* Individual offers-box – 768–1023: same as 1024 */
--offer-box-header: 1.125rem;
--offer-box-main: 1.875rem;
--offer-box-secondary: 1.25rem;
}
}
@media (min-width: 768px) {
:root {
--filter-box-title: 20px; /* 767+ */
--filter-box-value: 16px;
}
}
@media (max-width: 767px) {
:root {
--fs-hero-xl: 3rem;
--fs-hero-lg: 1.5rem;
--fs-hero-sub: 1.125rem; /* 18px – hero subtitle matches h2 */
--fs-h2: 1.125rem; /* 18px – section headers */
--fs-h3: 1.0625rem; /* 17px – sub-headers */
--fs-base: 1rem;
--fs-sm: 0.875rem;
--fs-offer-header: 0.875rem;
--fs-xs: 0.75rem;
--fs-page-hero-title: 1.25rem; /* 20px – hero h1 mobile */
--fs-page-hero-sub: 0.875rem; /* 14px – hero subtitle mobile */
--fs-key-terms-offer-box: 7px; /* Key terms in offer boxes: 7px mobile */
/* Individual offers-box – mobile */
--offer-box-header: 1.125rem;
--offer-box-main: 1.75rem;
--offer-box-secondary: 1.25rem;
}
}
.nav-overlay,
body {
background: linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%);
}
@font-face {
font-family: Montserrat;
src: url("/css-new/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
font-weight: 100 1000;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: Montserrat;
src: url("/css-new/fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
font-weight: 100 1000;
font-style: italic;
font-display: optional;
}
/* Page Header Styles */
.page-header h1 {
font-size: 1.75rem !important; /* Match global h1 mobile (~28px) */
font-weight: 700;
color: #022e4a;
margin: 1rem 0;
text-align: center;
padding: 0 1rem;
white-space: normal;
line-height: 1.2;
}
@media (min-width: 768px) {
.page-header h1 {
font-size: 1.953rem !important; /* Match global h1 desktop (~31px) */
padding: 0 3rem;
}
.section-title h2 {
font-size: 1.563rem !important; /* Match global h2 desktop (~25px) */
}
}
/* Ensure section-title h2 matches global scale on all desktop sizes */
@media (min-width: 768px) {
.section-title h2 {
font-size: 1.563rem !important; /* Match global h2 desktop (~25px) */
}
}
/* Competition blurb, play-now-button, and timer font sizes (betting-sites timer is 16px everywhere – see .betting-sites-page .horizontal-timer below) */
@media (min-width: 768px) {
.competition-blurb,
.play-now-button,
.timer {
font-size: 16px !important;
}
}
@media (min-width: 1024px) {
.competition-blurb,
.play-now-button,
.timer {
font-size: 18px !important;
}
}
body {
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
max-width: 100vw;
width: 100%;
box-sizing: border-box;
background: linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%);
}
.page-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
max-width: 100vw;
width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
}
/* Only hide content during actual navigation, not on initial page load */
/* LEGALBET.UK APPROACH: Content stays visible - never hide it */
/* Only hide content on offers pages during navigation, not on individual pages */
/* CRITICAL FIX: Don't hide main-content - it causes layout shifts, navbar jumping, and hero flashing */
/* Instead, hide only specific dynamic content elements (images, cards, etc.) */
/* Hero sections are static HTML and must always remain visible (like jackpot-competitions.php) */
/* REMOVED: body.page-transitioning .main-content { opacity: 0; } - This was causing all the problems */
/* Betting sites page - ALWAYS show hero section, keep main-content visible so skeletons show */
body.page-transitioning:not(.loaded).betting-sites-page .main-content {
opacity: 1 !important;
visibility: visible !important;
}
/* CRITICAL: Hero section must ALWAYS be visible and stable (like template.php) */
body.page-transitioning:not(.loaded).betting-sites-page .hero-section {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
transform: none !important;
transition: none !important;
}
/* Ensure hero section doesn't move on betting-sites page */
.betting-sites-page .hero-section {
position: relative;
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-top: 0;
margin-bottom: 0;
padding-top: 1rem;
padding-bottom: 0;
will-change: auto;
transform: translateZ(0); /* Force hardware acceleration for stability */
}
/* Hide SEO content and FAQs until content is loaded on betting-sites page */
body.page-transitioning:not(.loaded).betting-sites-page .content-section,
body.page-transitioning:not(.loaded).betting-sites-page .faq-section {
display: none !important;
visibility: hidden !important;
}
/* Show SEO content and FAQs when loaded */
body.betting-sites-page.loaded .content-section,
body.betting-sites-page.loaded .faq-section {
display: block !important;
visibility: visible !important;
}
/* CRITICAL: Skeletons must be visible - use visibility (not opacity) to override parent */
body.page-transitioning:not(.loaded):not(.individual-competition-page) .main-content .competition-box.skeleton-shimmer,
body.page-transitioning:not(.loaded):not(.individual-competition-page) .main-content .competition-grid .competition-box.skeleton-shimmer,
body.page-transitioning:not(.loaded):not(.individual-competition-page) .main-content #free-daily-games-grid .competition-box.skeleton-shimmer,
/* Jackpot/daily: never show offer-related skeletons – only competition skeleton (comp-box) shows */
body.jackpot-competitions-page .offer-card.skeleton-shimmer,
body.daily-free-games-page .offer-card.skeleton-shimmer,
body.jackpot-competitions-page .offers-skeleton,
body.daily-free-games-page .offers-skeleton,
body.jackpot-competitions-page .individual-offer-skeleton,
body.daily-free-games-page .individual-offer-skeleton,
body.jackpot-competitions-page .right-side-offers-module,
body.daily-free-games-page .right-side-offers-module {
display: none !important;
visibility: hidden !important;
}
/* CRITICAL: Ensure betting-sites skeletons are ALWAYS visible - they use data-skeleton="true" */
/* Ensure container is visible */
#bookmakers-list {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Target ALL possible selectors to ensure skeletons show - ONLY when data-skeleton="true" */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"],
body .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"],
body.page-transitioning .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"],
body.page-transitioning:not(.loaded) .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"],
body.betting-sites-page .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"],
body.betting-sites-page:not(.loaded) .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"],
.betting-sites-page .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"],
.betting-sites-page #bookmakers-list .bookmaker-section-test[data-skeleton="true"] {
/* Use position: relative and z-index to bring skeletons above parent opacity */
position: relative !important;
z-index: 1 !important; /* Lower z-index - only high enough to escape parent opacity */
/* Force visibility - this works even when parent has opacity 0 */
visibility: visible !important;
display: block !important;
/* Create new stacking context to escape parent opacity */
opacity: 1 !important;
/* Use transform to create new stacking context */
transform: translateZ(0) !important;
/* Ensure it's not hidden */
height: auto !important;
min-height: 200px !important;
margin-bottom: 2rem !important;
/* CRITICAL: Allow pointer events on skeletons (they're just visual) */
pointer-events: auto !important;
}
/* CRITICAL: Ensure actual content (without data-skeleton) is clickable and has normal z-index */
#bookmakers-list .bookmaker-section-test:not([data-skeleton="true"]),
body .main-content #bookmakers-list .bookmaker-section-test:not([data-skeleton="true"]),
.betting-sites-page .main-content #bookmakers-list .bookmaker-section-test:not([data-skeleton="true"]) {
position: relative !important;
z-index: auto !important; /* Normal stacking */
pointer-events: auto !important; /* Ensure clicks work */
}
/* Ensure all skeleton elements inside are visible - AGGRESSIVE SELECTORS */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .skeleton-shimmer,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .bookmaker-logo-large,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .bookmaker-name,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .review-link,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .top-bar-item,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .top-bar-label,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .top-bar-value,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .game-item,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .game-image,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .offer-box,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .mobile-see-more-icon,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .competitions-header,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .offer-box-title,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .game-top-border,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .betquest-carousel-footer,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .game-bottom-border,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .mobile-offer-header,
body .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"] .skeleton-shimmer,
body .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"] .bookmaker-logo-large,
body .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"] .bookmaker-name,
body .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"] .review-link,
body .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"] .top-bar-item,
body .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"] .game-item,
body .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"] .game-image,
body .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"] .offer-box {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
/* Add shimmer animation - ensure it works */
background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 2s ease-in-out infinite !important;
border-radius: 4px !important;
min-height: 20px !important;
}
/* Specific heights for skeleton elements */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .bookmaker-logo-large {
width: 120px !important;
height: 60px !important;
}
/* Bookmaker name skeleton - match bet365 length (shorter) */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .bookmaker-name {
height: 28px !important;
width: 80px !important; /* Match bet365 length */
}
/* Top bar items skeleton - match actual structure with label and value */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .top-bar-item {
min-height: 50px !important;
width: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .top-bar-label {
height: 12px !important;
width: 100px !important;
}
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .top-bar-value {
height: 16px !important;
width: 80px !important;
}
/* Hide mobile skeleton elements on desktop - match actual content behavior */
@media (min-width: 768px) {
/* CRITICAL: Hide ALL mobile skeleton elements on desktop - AGGRESSIVE SELECTORS */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .mobile-casino-offer-collapsed,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .mobile-see-more-icon,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .mobile-only-skeleton,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] button.mobile-see-more-icon,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .bookmaker-top-bar .mobile-see-more-icon,
body .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"] .mobile-see-more-icon,
body .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"] .mobile-only-skeleton {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .desktop-content {
display: block !important;
}
/* Show desktop top-bar-items on desktop */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .desktop-only-skeleton {
display: flex !important;
}
}
/* Show mobile elements on mobile, hide desktop on mobile - match actual content */
@media (max-width: 767px) {
/* CRITICAL: Show ONLY mobile skeleton elements: logo, name, review, expand icon, offer headers, offer boxes */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .mobile-casino-offer-collapsed,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .mobile-see-more-icon,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .mobile-only-skeleton {
display: block !important;
}
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .desktop-content {
display: none !important;
}
/* CRITICAL: Hide ALL desktop top-bar-items on mobile - AGGRESSIVE SELECTORS */
/* Mobile skeleton only shows: logo, name, review, expand icon, offers */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .desktop-only-skeleton,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .top-bar-item,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .top-bar-item.desktop-only-skeleton,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .bookmaker-top-bar .top-bar-item,
body .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"] .top-bar-item,
body .main-content #bookmakers-list .bookmaker-section-test[data-skeleton="true"] .desktop-only-skeleton {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
}
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .game-item {
min-height: 200px !important;
width: 100% !important;
}
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .game-image {
height: 150px !important;
width: 100% !important;
}
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .offer-box {
min-height: 150px !important;
width: 100% !important;
}
/* Mobile offer boxes skeleton - match bet365 dimensions */
@media (max-width: 767px) {
/* CRITICAL: Hide everything except required mobile skeleton elements */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .desktop-content,
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .desktop-only-skeleton {
display: none !important;
}
/* Mobile offer items */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .mobile-collapsed-offer-item {
width: 100% !important;
margin-bottom: 1rem !important;
}
/* Header skeleton - no text, just skeleton loader */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .mobile-offer-header {
height: 20px !important;
width: 150px !important;
margin-bottom: 0.75rem !important;
/* Remove any text content */
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
}
/* Offer boxes - match bet365 size */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .mobile-casino-offer-collapsed .offer-box {
min-height: 140px !important;
width: 100% !important;
}
/* Ensure only required elements show: logo, name, review, expand button, header skeletons, offer boxes */
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .bookmaker-top-bar {
display: flex !important;
}
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .top-bar-logo-name {
display: flex !important;
}
#bookmakers-list .bookmaker-section-test[data-skeleton="true"] .bookmaker-name-section {
display: flex !important;
flex-direction: column !important;
}
}
/* CRITICAL: Hide dynamic content during transitions, but NOT hero sections or hero images */
/* Hero sections are handled separately above and must always be visible */
body.page-transitioning:not(.loaded):not(.individual-competition-page) .main-content img:not(.hero-section img):not(.game-hero-section img),
body.page-transitioning:not(.loaded):not(.individual-competition-page) .main-content .competition-box:not(.skeleton-shimmer),
body.page-transitioning:not(.loaded):not(.individual-competition-page) .main-content .game-item,
body.page-transitioning:not(.loaded):not(.individual-competition-page) .main-content .offer-card:not(.skeleton-shimmer) {
opacity: 0 !important;
visibility: hidden !important;
}
/* CRITICAL: Hero sections must ALWAYS be visible and stable (like jackpot-competitions.php) */
/* Hero sections are static HTML and should never be hidden - even after page-transitioning is removed */
/* This ensures hero sections stay visible during the brief moment when page-transitioning is removed */
/* CRITICAL: Hero sections always visible - but game-hero-section has NO blue background */
.hero-section,
.main-content .hero-section {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* Game-hero-section: Visibility only, NO background (different styling) */
.game-hero-section,
.main-content .game-hero-section {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
/* NO background - preserve original styling */
}
/* CRITICAL: .main-content must ALWAYS be visible on ALL pages (like home.php, jackpot-competitions.php, daily-free-games.php) */
/* This prevents the white flash that happens when CSS applies before JS runs */
/* Working pages (home, jackpot, daily) never hide .main-content - flashing pages should match */
.main-content,
body.page-transitioning .main-content,
body.page-transitioning:not(.loaded) .main-content,
body:not(.loaded) .main-content,
.signup-offers-page .main-content,
.no-wagering-page .main-content,
.casino-bonus-page .main-content,
.no-deposit-free-spins-page .main-content,
.sports-offers-page .main-content,
.blog-page .main-content,
.betting-sites-page .main-content {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* No-deposit free spins + sports signup: bonus-grid-heading static on desktop, no loading logic */
@media (min-width: 1024px) {
.no-deposit-free-spins-page .main-container .bonus-grid-heading,
.sports-offers-page .main-container .bonus-grid-heading,
body.page-transitioning .no-deposit-free-spins-page .main-container .bonus-grid-heading,
body.page-transitioning .sports-offers-page .main-container .bonus-grid-heading,
body:not(.loaded) .no-deposit-free-spins-page .main-container .bonus-grid-heading,
body:not(.loaded) .sports-offers-page .main-container .bonus-grid-heading {
visibility: visible !important;
opacity: 1 !important;
transition: none !important;
display: grid !important;
}
}
.no-deposit-free-spins-page .main-container,
.sports-offers-page .main-container {
visibility: visible !important;
opacity: 1 !important;
}
/* CRITICAL: Hero sections inside .main-content must ALWAYS be visible (double protection) */
body.page-transitioning .main-content .hero-section,
body.page-transitioning:not(.loaded) .main-content .hero-section,
body:not(.loaded) .main-content .hero-section,
.signup-offers-page .main-content .hero-section,
.no-wagering-page .main-content .hero-section,
.casino-bonus-page .main-content .hero-section,
.blog-page .main-content .hero-section,
.betting-sites-page .main-content .hero-section {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* Hide all logo sections during page transitions - EXCEPT skeleton elements */
/* REMOVED: Logo hiding rules - logos should always be visible to prevent flashing */
/* CRITICAL: Keep skeleton elements visible inside skeleton cards - MUST override body.page-transitioning rules */
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .logo-section,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .casino-logo,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .rank-number,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .offer-content-wrapper,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .offer-top-row,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .offer-details,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .offer-blurb-text,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .main-text,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .secondary-text,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .offer-actions,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .claim-btn,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .metrics-row,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .metric-item,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .metric-label,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .metric-value,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .mobile-claim-btn,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .key-terms-section,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .key-terms-blurb,
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .terms-text,
.offer-card.skeleton-shimmer .logo-section,
.offer-card.skeleton-shimmer .casino-logo,
.offer-card.skeleton-shimmer .rank-number,
.offer-card.skeleton-shimmer .offer-content-wrapper,
.offer-card.skeleton-shimmer .offer-top-row,
.offer-card.skeleton-shimmer .offer-details,
.offer-card.skeleton-shimmer .offer-blurb-text,
.offer-card.skeleton-shimmer .main-text,
.offer-card.skeleton-shimmer .secondary-text,
.offer-card.skeleton-shimmer .offer-actions,
.offer-card.skeleton-shimmer .claim-btn,
.offer-card.skeleton-shimmer .metric-label,
.offer-card.skeleton-shimmer .metric-value,
.offer-card.skeleton-shimmer .key-terms-section,
.offer-card.skeleton-shimmer .key-terms-blurb,
.offer-card.skeleton-shimmer .terms-text {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .metrics-row,
.offer-card.skeleton-shimmer .metrics-row {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
body.page-transitioning:not(.loaded) .offer-card.skeleton-shimmer .metric-item,
.offer-card.skeleton-shimmer .metric-item {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Skeleton metric/key-terms placeholders: same shimmer as main-text (exact structure = same dimensions) */
.offer-card.ranked-offer.skeleton-shimmer .metric-item .metric-label.skeleton-shimmer,
.offer-card.ranked-offer.skeleton-shimmer .metric-item .metric-value.skeleton-shimmer,
.offer-card.ranked-offer.skeleton-shimmer .key-terms-text.skeleton-shimmer,
.offer-card.ranked-offer.skeleton-shimmer .terms-text.skeleton-shimmer {
background: #e0e0e0 !important;
background-image: linear-gradient(90deg, rgba(240,240,240,0.3) 25%, rgba(224,224,224,0.5) 50%, rgba(240,240,240,0.3) 75%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
}
/* Hide entire offers-list during transitions on offers pages */
/* CRITICAL: BUT never hide if skeletons are present - skeletons must be visible during loading */
/* We hide loaded content but keep skeletons visible (same logic as casino-signup-offers for all offer pages) */
body.page-transitioning:not(.loaded) .signup-offers-page #offers-list .offer-card:not(.skeleton-shimmer),
body.page-transitioning:not(.loaded) .no-wagering-page #offers-list .offer-card:not(.skeleton-shimmer),
body.page-transitioning:not(.loaded) .casino-bonus-page #offers-list .offer-card:not(.skeleton-shimmer),
body.page-transitioning:not(.loaded) .no-deposit-free-spins-page #offers-list .offer-card:not(.skeleton-shimmer),
body.page-transitioning:not(.loaded) .no-wagering-free-spins-page #offers-list .offer-card:not(.skeleton-shimmer),
body.page-transitioning:not(.loaded).blog-page #casino-offers-list .offer-card:not(.skeleton-shimmer),
body.page-transitioning:not(.loaded).blog-page #sports-offers-list .offer-card:not(.skeleton-shimmer) {
opacity: 0 !important;
visibility: hidden !important;
}
/* CRITICAL: Keep offers-list container visible - only hide loaded content, not skeletons */
body.page-transitioning:not(.loaded) .signup-offers-page #offers-list,
body.page-transitioning:not(.loaded) .no-wagering-page #offers-list,
body.page-transitioning:not(.loaded) .casino-bonus-page #offers-list,
body.page-transitioning:not(.loaded) .no-deposit-free-spins-page #offers-list,
body.page-transitioning:not(.loaded) .no-wagering-free-spins-page #offers-list,
body.page-transitioning:not(.loaded).blog-page #casino-offers-list,
body.page-transitioning:not(.loaded).blog-page #sports-offers-list {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* ===== RANKED OFFER SKELETON STYLES ===== */
/* Skeleton cards must be visible during page transitions - FORCE visibility */
.offer-card.ranked-offer.skeleton-shimmer,
body .offer-card.ranked-offer.skeleton-shimmer,
body.page-transitioning .offer-card.ranked-offer.skeleton-shimmer,
body.page-transitioning:not(.loaded) .offer-card.ranked-offer.skeleton-shimmer,
.casino-bonus-page .offer-card.ranked-offer.skeleton-shimmer,
.no-wagering-page .offer-card.ranked-offer.skeleton-shimmer,
.signup-offers-page .offer-card.ranked-offer.skeleton-shimmer,
#offers-list .offer-card.ranked-offer.skeleton-shimmer,
.casino-signup-offers-page .offer-card.ranked-offer.skeleton-shimmer,
.no-deposit-free-spins-page .offer-card.ranked-offer.skeleton-shimmer,
.casino-bonus-page .offer-card.ranked-offer.skeleton-shimmer {
opacity: 1 !important;
visibility: visible !important;
display: flex !important;
background: #ffffff !important;
overflow: hidden !important;
margin-bottom: 0 !important;
min-height: 150px !important;
}
/* Mobile casino/signup: show full skeleton – no clipping of right half (claim, logo, metrics box) */
@media (max-width: 1023px) {
.signup-offers-page .offer-card.ranked-offer.skeleton-shimmer,
.casino-signup-offers-page .offer-card.ranked-offer.skeleton-shimmer,
.casino-bonus-page .offer-card.ranked-offer.skeleton-shimmer,
.no-wagering-page .offer-card.ranked-offer.skeleton-shimmer,
.no-deposit-free-spins-page .offer-card.ranked-offer.skeleton-shimmer,
#offers-list .offer-card.ranked-offer.skeleton-shimmer {
overflow: visible !important;
}
.signup-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.casino-signup-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.casino-bonus-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.no-wagering-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.no-deposit-free-spins-page .offer-card.skeleton-shimmer .offer-content-wrapper {
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.signup-offers-page .offer-card.skeleton-shimmer .offer-top-row,
.casino-signup-offers-page .offer-card.skeleton-shimmer .offer-top-row,
.casino-bonus-page .offer-card.skeleton-shimmer .offer-top-row,
.no-wagering-page .offer-card.skeleton-shimmer .offer-top-row,
.no-deposit-free-spins-page .offer-card.skeleton-shimmer .offer-top-row {
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
}
/* CRITICAL: Rank-number skeleton – glossy shine (not dull grey) */
.offer-card.ranked-offer.skeleton-shimmer .rank-number.skeleton-shimmer,
.no-wagering-page .offer-card.skeleton-shimmer .rank-number,
.casino-bonus-page .offer-card.skeleton-shimmer .rank-number,
.signup-offers-page .offer-card.skeleton-shimmer .rank-number {
background: linear-gradient(90deg, #e5e5e5 0%, #f0f0f0 25%, #fafafa 50%, #fff 55%, #f0f0f0 75%, #e5e5e5 100%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
color: transparent !important;
}
/* Skeleton rank number – same dimensions as loaded; border-radius set per breakpoint (desktop: top-only, no bottom rounding) */
.offer-card.ranked-offer.skeleton-shimmer .rank-number.skeleton-shimmer,
.offer-card.skeleton-shimmer .rank-number {
min-width: 60px !important;
padding: 1rem 0.75rem !important;
background: linear-gradient(90deg, #e5e5e5 0%, #f0f0f0 25%, #fafafa 50%, #fff 55%, #f0f0f0 75%, #e5e5e5 100%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
border-radius: 0 !important; /* Overridden at 1024px: first/last get top-only or bottom-only */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Mobile/tablet: rank on top – match loaded height (0.75rem 1rem), one compact strip, no rounded corners */
@media (max-width: 1023px) {
.offer-card.ranked-offer.skeleton-shimmer .rank-number.skeleton-shimmer,
.offer-card.skeleton-shimmer .rank-number {
min-width: auto !important;
width: 100% !important;
padding: 0.75rem 1rem !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
border-radius: 0 !important;
}
}
@media (min-width: 1024px) {
.offer-card.ranked-offer.skeleton-shimmer .rank-number.skeleton-shimmer,
.offer-card.skeleton-shimmer .rank-number {
min-width: 80px !important;
}
}
/* Skeleton content wrapper – EXACT same padding and min-height as loaded so logo/claim/metrics stay in same spot */
.offer-card.ranked-offer.skeleton-shimmer .offer-content-wrapper,
.offer-card.skeleton-shimmer .offer-content-wrapper {
flex: 1 !important;
padding: 1rem 1.25rem !important; /* Match loaded .signup-offers-page .ranked-offer .offer-content-wrapper */
display: flex !important;
flex-direction: column !important;
gap: 0 !important; /* Match loaded – no extra gap */
visibility: visible !important;
opacity: 1 !important;
}
@media (min-width: 1024px) {
.offer-card.ranked-offer.skeleton-shimmer .offer-content-wrapper,
.offer-card.skeleton-shimmer .offer-content-wrapper {
padding: 1rem !important; /* Match loaded at desktop */
}
.signup-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.casino-signup-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.casino-bonus-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.no-wagering-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.no-deposit-free-spins-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.sports-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.blog-page .offer-card.skeleton-shimmer .offer-content-wrapper {
min-height: 220px !important; /* Same as loaded – box same size, zero CLS */
}
.sports-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.blog-page #sports-offers-list .offer-card.skeleton-shimmer .offer-content-wrapper {
min-height: 245px !important; /* Same as loaded sports */
}
}
@media (max-width: 1023px) {
.signup-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.casino-signup-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.casino-bonus-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.no-wagering-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.no-deposit-free-spins-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.sports-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.blog-page .offer-card.skeleton-shimmer .offer-content-wrapper {
min-height: 280px !important; /* Same as loaded */
}
.sports-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.blog-page #sports-offers-list .offer-card.skeleton-shimmer .offer-content-wrapper {
min-height: 305px !important; /* Same as loaded sports */
}
}
/* Skeleton rank-number: hide pseudo content (OFFER RANK: / SCORE: /10) so only box shows – structure mirror, same dimensions */
.offer-card.skeleton-shimmer .rank-number::before,
.offer-card.skeleton-shimmer .rank-number > div::before,
.offer-card.skeleton-shimmer .rank-number > div::after {
content: none !important;
}
/* Skeleton offer-details / blurb (structure mirror – same classes as loaded, dimensions from CSS only) */
.offer-card.skeleton-shimmer .offer-details {
display: flex !important;
flex: 1 !important;
min-width: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
.offer-card.skeleton-shimmer .offer-blurb-text .main-text.skeleton-shimmer,
.offer-card.skeleton-shimmer .offer-blurb-text .secondary-text.skeleton-shimmer {
display: block !important;
min-height: 1.2em !important;
width: 85% !important;
background: linear-gradient(90deg, #e5e5e5 0%, #f0f0f0 25%, #fafafa 50%, #fff 55%, #f0f0f0 75%, #e5e5e5 100%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
border-radius: 4px !important;
visibility: visible !important;
opacity: 1 !important;
}
.offer-card.skeleton-shimmer .offer-blurb-text .secondary-text.skeleton-shimmer {
min-height: 1em !important;
width: 65% !important;
margin-top: 0.25rem !important;
}
/* Skeleton top row */
.offer-card.ranked-offer.skeleton-shimmer .offer-top-row,
.offer-card.skeleton-shimmer .offer-top-row {
display: flex !important;
align-items: center !important;
gap: 1rem !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Zero bounce: skeleton pinned to top – same for ALL offer pages (casino signup, casino bonus, no wagering, no deposit, sports, blog) */
.signup-offers-page .offer-card.skeleton-shimmer .offer-top-row,
.casino-signup-offers-page .offer-card.skeleton-shimmer .offer-top-row,
.casino-bonus-page .offer-card.skeleton-shimmer .offer-top-row,
.no-wagering-page .offer-card.skeleton-shimmer .offer-top-row,
.no-deposit-free-spins-page .offer-card.skeleton-shimmer .offer-top-row,
.sports-offers-page .offer-card.skeleton-shimmer .offer-top-row,
.blog-page .offer-card.skeleton-shimmer .offer-top-row {
align-items: flex-start !important;
}
.signup-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.casino-signup-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.casino-bonus-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.no-wagering-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.no-deposit-free-spins-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.sports-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.blog-page .offer-card.skeleton-shimmer .offer-content-wrapper {
justify-content: flex-start !important;
}
/* Mobile: same padding as loaded – no extra margins so logo/claim/metrics in exact same spot */
@media (max-width: 767px) {
.signup-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.casino-signup-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.casino-bonus-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.no-deposit-free-spins-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.no-wagering-page .offer-card.skeleton-shimmer .offer-content-wrapper,
.sports-offers-page .offer-card.skeleton-shimmer .offer-content-wrapper {
padding: 1rem 1.25rem !important; /* Same as loaded */
}
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer {
min-height: auto !important;
width: 100% !important;
max-width: 100% !important;
}
.offer-card.skeleton-shimmer .offer-top-row {
align-items: flex-start !important; /* Same as loaded mobile */
}
}
/* Skeleton logo section – same dimensions as loaded; clip any stray outline (no black ring) */
.offer-card.skeleton-shimmer .logo-section {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
overflow: hidden !important; /* Clip any img border/outline that leaks */
}
/* Skeleton logo – glossy shine; width/height from same CSS as loaded; ZERO border/outline/ring (no black outline) */
.offer-card.ranked-offer.skeleton-shimmer .casino-logo.skeleton-shimmer,
.offer-card.skeleton-shimmer .casino-logo,
.offer-card.skeleton-shimmer .logo-section img.casino-logo {
background: linear-gradient(90deg, #e5e5e5 0%, #f0f0f0 25%, #fafafa 50%, #fff 55%, #f0f0f0 75%, #e5e5e5 100%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
border-radius: 4px !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
border: 0 solid transparent !important;
border-width: 0 !important;
border-style: none !important;
border-color: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
outline: 0 solid transparent !important;
outline-width: 0 !important;
outline-offset: 0 !important;
outline-style: none !important;
outline-color: transparent !important;
-webkit-appearance: none !important;
appearance: none !important;
box-sizing: border-box !important;
}
.offer-card.skeleton-shimmer .logo-section,
.offer-card.skeleton-shimmer .logo-section img,
.offer-card.skeleton-shimmer .logo-section * {
border: 0 solid transparent !important;
border-width: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
outline: 0 solid transparent !important;
outline-width: 0 !important;
outline-offset: 0 !important;
}
/* Kill any black outline/ring on skeleton logo img – browser default or inherited (all offer pages) */
.offer-card.skeleton-shimmer .logo-section img,
.offer-card.skeleton-shimmer .logo-section img.casino-logo {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent !important;
}
.offer-card.skeleton-shimmer .logo-section img:focus,
.offer-card.skeleton-shimmer .logo-section img:focus-visible {
outline: 0 !important;
box-shadow: none !important;
}
/* Skeleton offer actions – visible; size from same CSS as loaded */
.offer-card.skeleton-shimmer .offer-actions {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-self: center !important; /* Same as loaded – claim button in exact same vertical spot */
}
/* Skeleton claim button – glossy shine + transparent text; padding/size from same CSS as loaded */
.offer-card.ranked-offer.skeleton-shimmer .claim-btn.skeleton-shimmer,
.offer-card.skeleton-shimmer .claim-btn {
background: linear-gradient(90deg, #e5e5e5 0%, #f0f0f0 25%, #fafafa 50%, #fff 55%, #f0f0f0 75%, #e5e5e5 100%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
border-radius: 6px !important;
color: transparent !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Skeleton metrics row – default (overridden below when inside .metrics-and-key-terms-block) */
.offer-card.ranked-offer.skeleton-shimmer .metrics-row,
.offer-card.skeleton-shimmer .metrics-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.5rem !important;
padding: 12px 15px !important;
margin: 10px 0 0 0 !important;
margin-bottom: 0 !important;
background: var(--metrics-bar-bg, #f0f1f3) !important;
border-radius: 0.75rem 0.75rem 0 0 !important;
border-bottom: none !important;
width: 100% !important;
box-sizing: border-box !important;
min-height: 2.5rem !important;
visibility: visible !important;
opacity: 1 !important;
}
/* CRITICAL: When inside .metrics-and-key-terms-block.skeleton-shimmer, ONLY the block has the shine – inner metrics-row/key-terms-blurb are transparent (one unified block) */
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer .metrics-row,
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer .key-terms-blurb {
background: transparent !important;
border-radius: 0 !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
}
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer .metrics-row {
padding: 12px 15px !important;
min-height: 2.5rem !important;
}
@media (max-width: 767px) {
.offer-card.ranked-offer.skeleton-shimmer .metrics-row,
.offer-card.skeleton-shimmer .metrics-row {
padding-top: 12px !important;
padding-bottom: 5px !important;
}
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer .metrics-row {
padding-top: 12px !important;
padding-bottom: 5px !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
}
@media (min-width: 500px) and (max-width: 767px) {
.offer-card.ranked-offer.skeleton-shimmer .metrics-row,
.offer-card.skeleton-shimmer .metrics-row {
padding: 15px !important;
}
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer .metrics-row {
padding: 15px !important;
}
}
@media (min-width: 768px) {
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer .metrics-row {
padding: 12px 15px !important;
}
}
.offer-card.ranked-offer.skeleton-shimmer .metric-item,
.offer-card.skeleton-shimmer .metric-item {
flex: 1 !important;
min-width: 80px !important;
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
visibility: visible !important;
opacity: 1 !important;
}
.offer-card.ranked-offer.skeleton-shimmer .metric-label.skeleton-shimmer,
.offer-card.ranked-offer.skeleton-shimmer .metric-value.skeleton-shimmer,
.offer-card.skeleton-shimmer .metric-label,
.offer-card.skeleton-shimmer .metric-value {
height: 14px !important;
background: #e0e0e0 !important;
background-image: linear-gradient(90deg, rgba(240, 240, 240, 0.3) 25%, rgba(224, 224, 224, 0.5) 50%, rgba(240, 240, 240, 0.3) 75%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
border-radius: 3px !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
.offer-card.ranked-offer.skeleton-shimmer .metric-label.skeleton-shimmer,
.offer-card.skeleton-shimmer .metric-label {
width: 50% !important;
min-width: 30px !important;
}
.offer-card.ranked-offer.skeleton-shimmer .metric-value.skeleton-shimmer,
.offer-card.skeleton-shimmer .metric-value {
width: 70% !important;
min-width: 40px !important;
}
/* Skeleton mobile claim button (hidden on desktop) */
.offer-card.ranked-offer.skeleton-shimmer .mobile-claim-btn,
.offer-card.skeleton-shimmer .mobile-claim-btn {
display: none !important;
}
/* No key-terms skeleton – hidden so logo/claim/metrics align exactly with loaded; key terms appear when content loads */
.offer-card.skeleton-shimmer .key-terms-section,
.offer-card.skeleton-shimmer .key-terms-section-spacer,
.offer-card.skeleton-shimmer .key-terms-skeleton-hidden {
display: none !important;
}
.offer-card.skeleton-shimmer .key-terms-section .terms-text.skeleton-shimmer,
.offer-card.skeleton-shimmer .terms-text.skeleton-shimmer {
display: none !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Skeleton metrics-and-key-terms block: one seamless box, same width as loaded (no CLS) */
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer .metrics-row,
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer .key-terms-blurb {
margin-top: 0 !important;
min-height: 2.5rem !important;
width: 100% !important;
box-sizing: border-box !important;
}
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer .key-terms-blurb {
margin-top: -1px !important;
}
/* Base: skeleton metrics+key-terms block – natural height from metrics row + key-terms blurb (no fixed tall min-height) */
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer {
min-height: auto !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background: linear-gradient(90deg, #e5e5e5 0%, #f0f0f0 25%, #fafafa 50%, #fff 55%, #f5f5f5 75%, #e8e8e8 100%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
border-radius: 0.75rem !important;
}
/* Skeleton key-terms-blurb – when inside block, transparent (block has the shine); when standalone, bottom rounding */
.offer-card.ranked-offer.skeleton-shimmer .key-terms-blurb,
.offer-card.skeleton-shimmer .key-terms-blurb {
margin-top: -1px !important;
border: none !important;
border-radius: 0 0 0.75rem 0.75rem !important;
padding: 8px 15px 6px 15px !important;
min-height: 2.5rem !important;
box-sizing: border-box !important;
}
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer .key-terms-blurb {
border-radius: 0 !important;
}
@media (min-width: 768px) and (max-width: 1199px) {
.offer-card.ranked-offer.skeleton-shimmer .key-terms-blurb,
.offer-card.skeleton-shimmer .key-terms-blurb {
padding: 10px 15px 8px 15px !important;
}
}
@media (min-width: 1200px) {
.offer-card.ranked-offer.skeleton-shimmer .key-terms-blurb,
.offer-card.skeleton-shimmer .key-terms-blurb {
padding: 12px 15px 10px 15px !important;
}
}
/* Skeleton terms: not used – no key-terms skeleton; key terms appear when content loads */
.offer-card.skeleton-shimmer .terms-text.skeleton-shimmer {
display: none !important;
}
/* Mobile skeleton: same as loaded – offer-actions hidden, mobile-claim-btn shown (sports + ranked) */
@media (max-width: 767px) {
.offer-card.ranked-offer.skeleton-shimmer .offer-actions,
.offer-card.skeleton-shimmer .offer-actions {
display: none !important;
}
.offer-card.ranked-offer.skeleton-shimmer .mobile-claim-btn,
.offer-card.skeleton-shimmer .mobile-claim-btn {
display: block !important;
width: 100%;
}
.offer-card.ranked-offer.skeleton-shimmer .mobile-claim-btn .claim-btn.skeleton-shimmer,
.offer-card.skeleton-shimmer .mobile-claim-btn .claim-btn.skeleton-shimmer {
width: 100%;
}
/* Logo skeleton: align to top so it matches loaded logo position (no CLS) */
.offer-card.skeleton-shimmer .offer-top-row {
align-items: flex-start !important;
}
.offer-card.skeleton-shimmer .logo-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
/* Metrics + key-terms block: exact width of loaded content (100% of wrapper, same box model) */
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Inactive Competition Overlay - for competitions not currently active */
.competition-inactive-overlay {
position: relative;
}
.competition-inactive-overlay .game-image,
.competition-inactive-overlay .competition-image,
.competition-inactive-overlay .competition-image-grid,
.competition-inactive-overlay .main-competition-image,
.competition-inactive-overlay .horizontal-game-image,
.competition-inactive-overlay .comp-box-image {
position: relative;
}
.competition-inactive-overlay .game-image::after,
.competition-inactive-overlay .competition-image::after,
.competition-inactive-overlay .competition-image-grid::after,
.competition-inactive-overlay .main-competition-image::after,
.competition-inactive-overlay .horizontal-game-image::after,
.competition-inactive-overlay .comp-box-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
border-radius: inherit;
}
.competition-inactive-overlay .game-image::before,
.competition-inactive-overlay .competition-image::before,
.competition-inactive-overlay .competition-image-grid::before,
.competition-inactive-overlay .main-competition-image::before,
.competition-inactive-overlay .horizontal-game-image::before,
.competition-inactive-overlay .comp-box-image::before {
content: 'NOT\A CURRENTLY\A ACTIVE';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 0.5rem;
font-weight: 700;
text-align: center;
z-index: 3;
padding: 0.15rem 0.25rem;
white-space: pre-line;
background: rgba(0, 0, 0, 0.7);
border-radius: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.3px;
line-height: 1.1;
width: auto;
min-width: fit-content;
max-width: 90%;
}
.competition-inactive-overlay .game-image img,
.competition-inactive-overlay .competition-image img,
.competition-inactive-overlay .competition-image-grid img,
.competition-inactive-overlay .main-competition-image img,
.competition-inactive-overlay .horizontal-game-image img,
.competition-inactive-overlay .comp-box-image img {
filter: grayscale(60%) brightness(0.7);
opacity: 0.8;
}
/* Hide "Competitions" on mobile */
@media (max-width: 767px) {
.hide-on-mobile {
display: none;
}
}
/* Mobile responsive text */
@media (max-width: 767px) {
.competition-inactive-overlay .game-image::before,
.competition-inactive-overlay .competition-image::before,
.competition-inactive-overlay .competition-image-grid::before,
.competition-inactive-overlay .main-competition-image::before,
.competition-inactive-overlay .comp-box-image::before {
font-size: 0.65rem;
padding: 0.2rem 0.4rem;
white-space: nowrap;
max-width: 95%;
line-height: 1.2;
}
.competition-inactive-overlay .horizontal-game-image::before {
font-size: 0.45rem;
padding: 0.1rem 0.2rem;
white-space: pre-line;
max-width: 90%;
line-height: 1.1;
}
}
/* HIDE content containers until fully loaded - skeletons stay visible */
/* CRITICAL: Override ALL old CSS for individual page offers - inline styles win completely */
/* These rules ensure NO old CSS interferes - inline styles in HTML ALWAYS win */
body.individual-competition-page .offers-box .offer-header {
/* Color set by inline style from JS - don't override here */
font-size: 1rem !important; /* Fixed: 1rem at all breakpoints */
font-weight: 400 !important;
font-style: italic !important;
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.individual-competition-page .offers-box .offer-blurb-text {
/* Inline styles ALWAYS win - override any old CSS that might apply */
text-align: center !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 0.3rem !important;
box-sizing: border-box !important;
}
body.individual-competition-page .offers-box .enhanced-claim-button {
/* Inline styles ALWAYS win - override any old CSS that might apply */
background: linear-gradient(135deg, #00cc5a, #00b852) !important;
color: white !important;
border: none !important;
border-radius: 0.5rem !important;
padding: 1rem 3rem !important;
font-size: 1rem !important;
font-weight: 700 !important;
min-width: 220px !important;
touch-action: manipulation !important; /* Prevent accidental zoom/delay on touch */
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
display: inline-block !important;
box-sizing: border-box !important;
cursor: pointer !important;
margin: 0 !important;
}
/* Make entire offers box clickable with hover effect */
body.individual-competition-page .offers-box {
cursor: pointer !important;
transition: transform 0.2s, box-shadow 0.2s !important;
}
@media (hover: hover) {
body.individual-competition-page .offers-box:hover {
transform: translateY(-2px) !important;
box-shadow: 0 2px 8px rgba(2, 46, 74, 0.05), 0 1px 4px rgba(2, 46, 74, 0.03) !important; /* Slightly more shadow */
}
body.individual-competition-page .offers-box .enhanced-claim-button:hover {
background: linear-gradient(135deg, #00dd6a, #00c862) !important;
}
}
/* CLS Fix: Professional offer box layout - header close to blurb, blurb centered, button up */
body.individual-competition-page .offers-box {
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* Center content vertically */
align-items: center !important; /* Center content horizontally */
min-height: 180px !important; /* Ensure enough space for centering */
overflow: visible !important; /* Remove any overflow blocking */
max-height: none !important; /* Remove height restrictions */
height: auto !important; /* Allow natural height */
padding: 1.5rem 1rem !important; /* MORE top/bottom padding to push content inward */
margin: 0 !important; /* Remove margin */
border: none !important; /* Remove border wrapper */
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.06), 0 2px 6px rgba(2, 46, 74, 0.04) !important;
background: #f8f9fa; /* Light gray skeleton background - JS will override with brand color */
gap: 0.5rem !important; /* Reduced gap to bring elements closer together */
border-radius: 0.75rem !important;
}
body.individual-competition-page .offers-box .offer-header {
margin-bottom: 0.25rem !important; /* Close to main blurb */
margin-top: 0 !important;
text-align: center !important;
}
body.individual-competition-page .offers-box .offer-blurb-text {
margin-bottom: 0.5rem !important; /* Reduced space above button */
margin-top: 0 !important;
min-height: auto !important; /* Let content determine height - ensure both lines visible */
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* Start from top - don't center vertically */
align-items: center !important; /* Center blurb horizontally */
text-align: center !important;
gap: 0 !important; /* No gap - secondary text should be right below main */
}
/* Main offer box: fixed font sizes at all breakpoints (header: 1rem, main: 2rem, secondary: 1.5rem) */
@media (max-width: 767px) {
body.individual-competition-page .offers-box {
padding: 1rem !important;
min-height: 200px !important;
max-width: 100% !important;
}
body.individual-competition-page .offers-box .offer-header {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
body.individual-competition-page .offers-box .offer-blurb-text {
padding: 0 0.5rem !important;
min-height: auto !important; /* Let content determine height */
justify-content: flex-start !important; /* Start from top on mobile too */
}
}
body.individual-competition-page .offers-box .offer-blurb-text .main-text {
color: inherit !important;
font-size: 2rem !important; /* Fixed: 2rem at all breakpoints */
font-weight: 700 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.3 !important;
text-shadow: none !important;
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.individual-competition-page .offers-box .offer-blurb-text .secondary-text {
color: inherit !important;
font-size: 1.5rem !important; /* Fixed: 1.5rem at all breakpoints */
font-weight: 600 !important;
margin: 0.25rem 0 0 0 !important;
padding: 0 !important;
line-height: 1.3 !important;
text-shadow: none !important;
display: block !important;
visibility: visible !important; /* Ensure secondary text is always visible */
opacity: 1 !important; /* Ensure secondary text is always visible */
width: 100% !important;
box-sizing: border-box !important;
}
/* 1024px+: vars already set in :root – 1.875rem main, 1.25rem secondary */
/* Hide right-side module completely until ready */
body.individual-competition-page.page-transitioning:not(.loaded) .right-side-offers-module {
opacity: 0 !important;
visibility: hidden !important;
display: none !important;
}
/* NO SKELETONS on individual pages - content loads directly */
/* CRITICAL: Hide loading overlay on individual pages - skeletons show instead */
/* Skeletons provide loading feedback, overlay blocks them */
body.individual-competition-page .loading-overlay {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* DON'T hide main-content - skeletons need to be visible */
/* Skeletons show while content loads, then fade out smoothly */
/* CRITICAL: Show skeleton loaders by default - hide content until ready */
/* Individual pages now use .competition-box (same as jackpot-competitions page) */
/* DESKTOP ONLY: Box shadow only on desktop (768px+) - mobile has no box styling */
@media (min-width: 768px) {
.individual-competition-page .competition-box {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.06), 0 2px 6px rgba(2, 46, 74, 0.04) !important;
}
}
.individual-competition-page .offers-box {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.06), 0 2px 6px rgba(2, 46, 74, 0.04) !important;
}
/* MOBILE: Competition box has NO box styling - full width edge to edge */
@media (max-width: 767px) {
.individual-competition-page .competition-box {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
box-shadow: none !important;
border-radius: 0 !important;
border: none !important;
background: transparent !important;
}
}
/* Competition content - no longer needed, using atomic innerHTML replacement */
/* Offer content: renders BEHIND skeleton, JS manages visibility */
/* NO !important here - let JS control via inline styles */
.individual-competition-page .offer-content {
overflow: visible;
max-height: none;
height: auto !important; /* Allow natural height */
}
/* Show offer content when page is loaded */
body.individual-competition-page.loaded .offer-content {
display: flex !important;
flex-direction: column !important;
opacity: 1 !important;
visibility: visible !important;
transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
/* Individual page offer skeleton loader with shimmer effect */
.individual-offer-skeleton {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex !important;
flex-direction: column;
background: #f8f9fa; /* Standard light gray skeleton background */
border-radius: 0.75rem;
z-index: 100 !important; /* Above everything except overlay */
opacity: 1 !important;
visibility: visible !important;
transition: opacity 0.2s ease, visibility 0.2s ease;
pointer-events: none;
}
/* Ensure offer skeleton is visible even when page-transitioning */
body.individual-competition-page.page-transitioning:not(.loaded) .individual-offer-skeleton,
body.individual-competition-page:not(.loaded) .individual-offer-skeleton {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
.individual-offer-skeleton {
padding: 1.5rem 1.25rem;
gap: 1.25rem;
align-items: center;
justify-content: center;
}
/* INDIVIDUAL PAGE SKELETON: Uses SAME classes as jackpot-competitions page */
/* Classes: .competition-image, .competition-top-border, .competition-bottom-border, .bookmaker-logo, .timer, .play-now-button */
/* Only adds .skeleton-shimmer for animation - dimensions automatically match actual content */
/* Skeleton shimmer on individual pages - targets direct children of #competition-wrapper */
.individual-competition-page #competition-wrapper .competition-image.skeleton-shimmer {
background: #f0f0f0 !important;
}
.individual-competition-page #competition-wrapper .competition-top-border.skeleton-shimmer {
background: #ffffff !important;
}
.individual-competition-page #competition-wrapper .competition-bottom-border.skeleton-shimmer {
background: #ffffff !important;
}
.individual-competition-page #competition-wrapper .play-now-button.skeleton-shimmer {
background: #e0e0e0 !important;
color: transparent !important;
}
.individual-competition-page #competition-wrapper .competition-blurb.skeleton-shimmer {
background: #e0e0e0 !important;
color: transparent !important;
}
/* Offer skeleton lines (keep for offers box) */
.individual-offer-skeleton .skeleton-line {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
width: 100%;
height: 14px;
}
.individual-offer-skeleton .skeleton-line.short {
width: 70%;
}
.individual-offer-skeleton .skeleton-button {
width: 120px;
height: 36px;
background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
}
.individual-offer-skeleton .skeleton-loading-text {
position: absolute;
bottom: 0.5rem !important; /* Moved to very bottom of box */
left: 50%;
transform: translateX(-50%);
color: #666;
font-size: 0.875rem;
font-weight: 600;
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
z-index: 11;
pointer-events: none;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
/* Hide offer skeleton when loaded - JavaScript controls visibility, this is just a backup */
body.individual-competition-page.loaded .individual-offer-skeleton {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
/* Right-side module - hide until loaded */
.individual-competition-page .right-side-offers-module {
display: none !important;
}
body.individual-competition-page.loaded .right-side-offers-module {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
/* Show boxes when page is loaded */
body.individual-competition-page.loaded .competition-box,
body.individual-competition-page.loaded .offers-box {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
body.individual-competition-page.loaded .right-side-offers-module {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* CRITICAL: Hide ENTIRE homepage until fully loaded */
/* REMOVED: This was hiding homepage content incorrectly */
/* body.homepage.page-transitioning:not(.loaded) .main-content {
opacity: 0 !important;
visibility: hidden !important;
} */
/* Show when loaded – no transition on individual to prevent content-section bounce when .loaded is added */
body.individual-competition-page.loaded .main-content {
opacity: 1 !important;
visibility: visible !important;
transition: none !important;
}
body.homepage.loaded .main-content {
opacity: 1 !important;
visibility: visible !important;
transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
/* Already handled above - this is redundant */
/* Content is visible when loaded - overlay is removed */
/* NO SKELETONS on individual pages - content loads directly */
/* Show right-side module when loaded */
body.individual-competition-page.loaded .right-side-offers-module {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* NO SKELETONS on individual pages - content loads directly with correct styles from the start */
.skeleton-loading-text {
position: absolute !important;
bottom: 1rem !important;
left: 50% !important;
transform: translateX(-50%) !important;
color: #666 !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
z-index: 11 !important;
pointer-events: none !important;
}
/* NO SKELETONS on individual pages - content loads directly with correct styles from the start */
/* Hide banner container during page transitions */
body.page-transitioning #pqBannerContainer {
opacity: 0 !important;
visibility: hidden !important;
}
.nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
opacity: 0;
pointer-events: none;
transition: opacity 0.1s;
will-change: opacity;
}
.nav-overlay.active {
opacity: 1;
pointer-events: all;
}
.loading-overlay:not(.hidden) + .nav-overlay,
.loading-overlay:not(.hidden) ~ .nav-overlay {
opacity: 0 !important;
pointer-events: none !important;
}
header {
position: relative;
z-index: 10001;
}
/* Sitewide: page background is light gradient. Blue only on hero, nav, footer. */
/* Avoids blue flash on load and blue left/right borders outside white content. */
html:has(body.homepage),
body.homepage {
background: linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%) !important;
}
nav {
position: sticky;
top: 0;
z-index: 999998;
overflow: visible;
width: 100%;
box-sizing: border-box;
background-color: #0f1923 !important;
}
nav .container {
width: 100%;
padding: 0 var(--spacing-md);
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
nav .container::-webkit-scrollbar {
display: none;
}
@media (max-width: 767px) {
nav {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
nav .container {
padding: 0;
width: 100%;
}
}
footer {
flex-shrink: 0;
background-color: #0f1923;
border-top: 1px solid var(--border-color);
padding: 30px 0;
margin-top: 40px;
color: #fff;
}
.container {
width: 100%;
padding: 0 var(--spacing-md);
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
@media (max-width: 767px) {
.container {
padding: 0 0rem;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
}
header {
position: sticky;
top: 0;
z-index: 999999;
overflow: visible;
width: 100%;
box-sizing: border-box;
background-color: #0f1923 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.header-content {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
}
.logo {
display: flex;
align-items: center;
}
.nav-tabs {
display: flex;
-webkit-overflow-scrolling: touch;
width: 100%;
align-items: center;
position: relative;
overflow: visible !important;
}
.nav-tabs::-webkit-scrollbar {
display: none;
}
.section-title {
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: 0 1rem;
}
.section-title h2 {
font-size: 1.563rem !important; /* Match global h2 desktop (~25px) */
font-weight: 700;
display: flex;
align-items: center;
line-height: 1;
margin-bottom: var(--spacing-xs);
color: #022e4a;
}
/* Mobile: Override section-title h2 to match global h2 mobile size */
@media (max-width: 767px) {
.section-title h2 {
font-size: 1.375rem !important; /* Match global h2 mobile (~22px) */
}
}
.section-title h2.live-indicator::before {
background-color: var(--primary-cta);
}
.section-title h2.expired-indicator::before {
background-color: red;
}
.section-title .section-controls {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: var(--spacing-sm);
padding: 0;
box-sizing: border-box;
position: relative;
}
/* Constrain section-controls width on mobile to match header */
@media (max-width: 500px) {
.section-title .section-controls.section-controls--index {
width: calc(100% - 2rem) !important; /* Match mobile header width */
max-width: 1400px !important; /* Match header max-width */
margin-left: auto !important;
margin-right: auto !important;
}
}
.section-controls .control-module {
display: flex !important;
align-items: center !important;
gap: var(--spacing-xs) !important;
padding: 4px 6px !important;
background: rgba(255, 255, 255, 0.1) !important;
border: none !important;
border-radius: 6px !important;
box-shadow: 0 2px 8px rgba(2, 46, 74, 0.05), 0 1px 4px rgba(2, 46, 74, 0.03) !important; /* Slightly more shadow */
position: static !important;
transform: none !important;
width: auto !important;
max-width: none !important;
transition: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.section-controls .control-module .expired-button,
.section-controls .control-module .sort-options #sort-select {
border: none !important;
font-size: 11px !important;
height: auto !important;
line-height: normal !important;
background-color: rgba(255, 255, 255, 0.1) !important;
width: auto !important;
box-sizing: border-box !important;
cursor: pointer !important;
}
.section-controls .control-module .expired-button {
background-color: #00cc5a !important; /* Green background */
color: #20242e !important; /* Dark blue text */
border-radius: 3px !important;
padding: 3px 6px !important;
font-weight: 500 !important;
text-decoration: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-transform: none !important;
letter-spacing: normal !important;
white-space: nowrap !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02) !important; /* Super faint shadow */
transition: all 0.2s ease !important;
}
@media (hover: hover) {
.section-controls .control-module .expired-button:hover {
background-color: #00cc57 !important; /* Slightly darker green on hover */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03) !important; /* Super faint shadow on hover */
}
}
transform: translateY(-1px) !important; /* Slight lift effect */
}
.section-controls .control-module .sort-options {
display: flex;
align-items: center;
font-size: 11px;
white-space: nowrap;
color: var(--text-color);
}
.section-controls .control-module .sort-options span {
font-size: 11px;
color: var(--subtle-gray);
margin-right: 4px;
font-weight: 500;
text-transform: none;
letter-spacing: normal;
}
.section-controls .control-module .sort-options #sort-select {
margin-left: 4px;
padding: 2px 18px 2px 4px;
border-radius: 3px;
font-family: Montserrat, sans-serif;
color: var(--text-color);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 4px center;
background-size: 10px;
outline: 0;
transition: background-color 0.3s;
}
.section-controls .control-module .sort-options #sort-select option {
background-color: rgba(255, 255, 255, 0.1);
color: var(--text-color);
}
.section-controls .control-module .sort-options #sort-select:-moz-autofill,
.section-controls .control-module .sort-options #sort-select:-webkit-autofill,
.section-controls .control-module .sort-options #sort-select:focus,
.section-controls .control-module .sort-options #sort-select:hover {
color: var(--text-color) !important;
-webkit-text-fill-color: var(--text-color) !important;
background-color: rgba(255, 255, 255, 0.1) !important;
}
.section-controls .control-module .sort-options #sort-select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.1) inset !important;
}
/* Redesigned control buttons - mobile only (up to 767px) */
@media (max-width: 767px) {
.section-controls.section-controls--index {
display: flex !important;
flex-direction: row !important;
gap: 0.5rem !important; /* Increased gap for better spacing on larger mobile */
align-items: stretch !important;
/* Match header width exactly - never exceed it (same as bonus-grid-heading on mobile) */
width: calc(100% - 2rem) !important; /* Match mobile header width with padding */
max-width: 1400px !important; /* Match header max-width */
margin: 0.75rem auto 0 auto !important; /* Center like header */
box-sizing: border-box !important;
}
/* See Expired Rounds Button - styled like bonus-grid-heading */
.section-controls .expired-button {
background: linear-gradient(135deg, #022e4a 0%, #004d7a 100%) !important;
color: #ffffff !important;
border: none !important;
border-radius: 0.5rem !important;
padding: 0.5rem 0.75rem !important;
font-size: 0.75rem !important; /* 12px - smaller */
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: normal !important;
text-align: center !important;
cursor: pointer !important;
flex: 0 0 65% !important; /* 65% width - bigger than sort by */
box-sizing: border-box !important;
transition: all 0.2s ease !important;
line-height: 1.1 !important;
text-decoration: none !important;
display: block !important;
white-space: nowrap !important;
}
@media (hover: hover) {
.section-controls .expired-button:hover {
background: linear-gradient(135deg, #011f33 0%, #003d5f 100%) !important;
transform: translateY(-1px) !important;
}
}
.section-controls .expired-button {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
/* Sort Button Wrapper */
.section-controls .sort-button-wrapper {
position: relative !important;
flex: 0 0 35% !important; /* 35% width - smaller than expired button */
display: flex !important;
}
/* Sort By Button */
.section-controls .sort-button {
background: #ffffff !important;
color: #20242e !important;
border: 2px solid #0fbf6b !important;
border-radius: 0.5rem !important;
padding: 0.5rem 1rem !important; /* Increased horizontal padding */
font-size: 0.75rem !important; /* 12px - smaller */
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: normal !important;
text-align: center !important;
cursor: pointer !important;
flex: 1 1 100% !important; /* Fill wrapper completely */
box-sizing: border-box !important;
transition: all 0.2s ease !important;
line-height: 1.1 !important;
font-family: Montserrat, sans-serif !important;
white-space: nowrap !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.375rem !important;
}
/* Sort Icon */
.section-controls .sort-button .sort-icon {
width: 14px !important;
height: 14px !important;
flex-shrink: 0 !important;
display: inline-block !important;
}
@media (hover: hover) {
.section-controls .sort-button:hover {
background: #f8f9fa !important;
border-color: #0b8b4f !important;
}
}
/* Sort Dropdown */
.section-controls .sort-dropdown {
display: none !important;
position: absolute !important;
top: calc(100% + 0.5rem) !important;
right: 0 !important; /* Align to right edge of sort button */
left: auto !important;
min-width: 200px !important; /* Minimum width for dropdown */
background: #ffffff !important;
border: 2px solid #0fbf6b !important;
border-radius: 0.5rem !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
z-index: 10000 !important; /* Higher z-index to ensure visibility */
overflow: hidden !important;
}
.section-controls .sort-dropdown.active {
display: block !important;
}
/* Ensure dropdown is visible on mobile */
@media (max-width: 500px) {
.section-controls .sort-dropdown {
min-width: 180px !important;
right: 0 !important;
}
}
/* Sort Options */
.section-controls .sort-option {
display: block !important;
width: 100% !important;
padding: 0.75rem 1rem !important;
background: #ffffff !important;
color: #20242e !important;
border: none !important;
border-bottom: 1px solid #e9ecef !important;
text-align: left !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: background-color 0.2s ease !important;
font-family: Montserrat, sans-serif !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.section-controls .sort-option:last-child {
border-bottom: none !important;
}
.section-controls .sort-option:hover {
background: #f8f9fa !important;
}
}
/* Hide these controls above 500px */
@media (min-width: 501px) {
.section-controls.section-controls--index {
display: none !important;
}
}
.section-title .prize-calculator-wrapper {
order: 1;
width: 100%;
padding: var(--spacing-sm) 0;
display: flex;
justify-content: flex-end;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
#prize-calculator {
font-size: var(--font-size-md);
color: var(--text-color);
margin: 0;
text-align: right;
width: auto;
}
.grid-row-wrapper {
max-width: calc(3 * 300px + 2 * 0.75rem);
margin: 0 auto;
width: 100%;
}
.competition-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 per row on mobile */
gap: 0.75rem;
padding: 1rem;
max-width: 1400px;
margin: 0 auto 2rem auto;
box-sizing: border-box;
}
.competition-box {
background: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s, box-shadow 0.2s;
display: flex;
flex-direction: column;
width: 100%;
height: auto;
min-height: 320px;
box-sizing: border-box;
touch-action: manipulation; /* Prevent accidental zoom/delay on touch */
}
/* MOBILE: Remove box styling from competition-box on individual pages */
@media (max-width: 767px) {
body.individual-competition-page .competition-box {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
max-width: 100% !important;
aspect-ratio: auto !important;
min-height: auto !important;
margin: 0 !important;
}
}
/* Mobile: Maintain 5:3 aspect ratio - no cropping */
@media (max-width: 499px) {
.competition-image {
aspect-ratio: 5 / 3; /* Maintain image aspect ratio */
}
.competition-image img {
object-fit: cover; /* Fill container - no cropping since ratios match */
object-position: center center;
}
}
/* TABLET: 450px - 599px */
@media (min-width: 450px) and (max-width: 599px) {
.competition-grid {
gap: 1rem;
padding: 1.25rem;
}
.competition-box {
min-height: 340px;
}
.competition-image {
aspect-ratio: 5 / 3; /* Maintain 5:3 ratio - no cropping */
}
.competition-image img {
object-fit: cover; /* Fill container - ratios match so no crop */
object-position: center center;
}
.competition-top-border {
padding: 0.65rem 0.9rem;
min-height: 44px;
}
.bookmaker-logo img {
max-width: 68px;
max-height: 36px;
border-radius: 4px; /* Light rounded corners */
}
.timer {
font-size: 0.85rem; /* Scaled up more */
font-weight: 700; /* Bold */
}
.competition-bottom-border {
padding: 0.9rem;
min-height: 115px;
}
.competition-blurb {
font-size: 0.85rem; /* Scaled up more */
line-height: 1.5;
font-weight: 700; /* Bold */
}
.play-now-button {
font-size: 0.85rem; /* Scaled up more */
padding: 0.6rem 1.15rem;
font-weight: 700; /* Bold */
}
}
/* LARGE TABLET: 600px - 767px */
@media (min-width: 600px) and (max-width: 767px) {
.competition-grid {
gap: 1.5rem;
padding: 1.75rem;
}
.competition-box {
min-height: 380px;
}
.competition-image {
aspect-ratio: 5 / 3; /* Maintain 5:3 ratio - no cropping */
}
.competition-image img {
object-fit: cover; /* Fill container - ratios match so no crop */
object-position: center center;
}
.competition-top-border {
padding: 0.8rem 1.1rem; /* Scaled up more */
min-height: 48px; /* Scaled up more */
}
.bookmaker-logo img {
max-width: 75px; /* Scaled up more */
max-height: 40px; /* Scaled up more */
border-radius: 4px; /* Light rounded corners */
}
.timer {
font-size: 0.95rem; /* Scaled up significantly */
font-weight: 700; /* Bold */
}
.competition-bottom-border {
padding: 1.1rem; /* Scaled up more */
min-height: 130px; /* Scaled up more */
}
.competition-blurb {
font-size: 0.95rem; /* Scaled up significantly - was too small */
line-height: 1.5;
font-weight: 700; /* Bold */
}
.play-now-button {
font-size: 0.95rem; /* Scaled up significantly - was too small */
padding: 0.7rem 1.4rem; /* Scaled up more */
font-weight: 700; /* Bold */
}
}
/* DESKTOP: 768px+ */
@media (min-width: 768px) {
.competition-grid {
grid-template-columns: repeat(3, 1fr); /* 3 per row */
gap: 1.25rem;
padding: 2rem 3.5rem; /* Increased side padding like test version */
}
.competition-box {
min-height: 360px;
}
.competition-image {
aspect-ratio: 5 / 3; /* Maintain 5:3 ratio - no cropping */
}
.competition-image img {
object-fit: cover; /* Fill container - ratios match so no crop */
object-position: center center;
}
.competition-top-border {
padding: 0.75rem 1rem;
min-height: 50px;
}
.bookmaker-logo img {
max-width: 70px;
max-height: 38px;
border-radius: 4px; /* Light rounded corners */
}
.timer {
font-size: 1rem; /* Bigger - fully scaled */
font-weight: 700; /* Bold */
}
.competition-bottom-border {
padding: 1rem;
min-height: 120px;
}
.competition-blurb {
font-size: 1rem; /* Bigger - fully scaled */
line-height: 1.5;
font-weight: 700; /* Bold */
}
.play-now-button {
font-size: 1rem; /* Bigger - fully scaled */
padding: 0.65rem 1.35rem;
font-weight: 700; /* Bold */
}
}
/* LARGE DESKTOP: 1024px+ */
@media (min-width: 1024px) {
.competition-grid {
grid-template-columns: repeat(3, 300px); /* Fixed width at desktop */
justify-content: center;
gap: 1.5rem;
padding: 2rem 4rem;
}
.competition-box {
min-height: 380px;
max-width: 300px;
}
.competition-image {
aspect-ratio: 5 / 3; /* Maintain 5:3 ratio - no cropping */
}
.competition-top-border {
padding: 0.75rem 1rem;
min-height: 50px;
}
.bookmaker-logo img {
max-width: 70px;
max-height: 38px;
border-radius: 4px; /* Light rounded corners */
}
.timer {
font-size: 1rem; /* Bigger - fully scaled */
font-weight: 700; /* Bold */
}
.competition-bottom-border {
padding: 1rem;
min-height: 130px;
}
.competition-blurb {
font-size: 1rem; /* Bigger - fully scaled */
font-weight: 700; /* Bold */
}
.play-now-button {
font-size: 1rem; /* Bigger - fully scaled */
padding: 0.65rem 1.5rem;
font-weight: 700; /* Bold */
}
}
/* Individual page mobile styles - these apply to individual competition pages only */
.individual-competition-page .competition-box {
min-height: auto; /* Let mobile styles control height */
aspect-ratio: auto; /* Let mobile styles control aspect ratio */
}
.individual-competition-page .competition-image {
height: 180px; /* Keep container height for individual pages */
min-height: 180px;
max-height: 180px;
}
.individual-competition-page .competition-image img {
width: 100%;
height: 100%;
object-fit: contain; /* Show full image on mobile - zoomed out */
object-position: center;
}
/* Make bookmaker logo smaller on mobile like it was before - individual pages only */
.individual-competition-page .competition-top-border .bookmaker-logo img {
max-width: 40px !important; /* Smaller than desktop */
max-height: 22px !important; /* Smaller than desktop */
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
/* Ensure bookmaker logo is vertically centered and positioned left on mobile - individual pages only */
.individual-competition-page .competition-top-border .bookmaker-logo {
display: flex !important;
align-items: center !important; /* Vertically center */
justify-content: flex-start !important; /* Position further left */
margin-left: 0 !important;
position: relative !important; /* Override absolute positioning */
transform: none !important;
top: auto !important;
left: auto !important;
}
}
@media (hover: hover) {
.competition-box:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.06), 0 2px 6px rgba(2, 46, 74, 0.04) !important; /* Doubled shadow for better contrast */
}
/* Override for jackpot and daily games pages - use lighter hover effect */
.jackpot-competitions-page .competition-box:hover,
.daily-free-games-page .competition-box:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(2, 46, 74, 0.18), 0 3px 8px rgba(2, 46, 74, 0.12) !important;
}
}
.competition-image {
width: 100%;
/* Maintain 5:3 aspect ratio (matches image dimensions 300×180px) */
aspect-ratio: 5 / 3;
background: #2a2a2a;
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
line-height: 0;
font-size: 0;
flex-shrink: 0;
display: block;
border-bottom: none; /* Ensure no border - seamless connection with top border below */
border-top: none;
}
.competition-image img,
.horizontal-game-image img {
/* Fill container completely - container now matches image aspect ratio */
width: 100%;
height: 100%;
object-fit: cover; /* Fill container, no cropping since aspect ratios match */
object-position: center center;
display: block;
margin: 0;
padding: 0;
border: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.competition-top-border {
background: #ffffff;
border-bottom: 1px solid #f0f0f0;
border-top: none; /* Ensure no border-top - seamless connection with image above */
padding: 0.5rem 0.75rem;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 40px;
flex-shrink: 0;
}
.bookmaker-logo {
display: flex;
align-items: center;
text-decoration: none;
transition: opacity 0.2s;
cursor: pointer;
}
.bookmaker-logo:hover {
opacity: 0.8;
}
.bookmaker-logo img {
max-width: 60px;
max-height: 32px;
width: auto;
height: auto;
object-fit: contain;
display: block;
border-radius: 4px; /* Light rounded corners like live version */
}
.bookmaker-logo .logo-wrapper {
display: contents;
}
.timer {
color: #00cc5a;
font-size: 0.75rem;
font-weight: 700; /* Bold */
white-space: nowrap;
}
.competition-bottom-border {
background: #ffffff;
padding: 0.75rem;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
min-height: 100px;
}
.competition-blurb {
text-align: center;
font-size: 0.75rem;
line-height: 1.4;
color: #20242e;
margin-bottom: 0.75rem;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700; /* Bold */
position: relative; /* Changed from absolute */
width: auto;
padding: 0;
margin: 0;
transform: none;
top: auto;
left: auto;
z-index: 1;
}
.play-now-button {
background: #00cc5a;
color: #000;
text-decoration: none;
text-align: center;
padding: 0.5rem 1rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700; /* Bold */
display: block;
transition: background 0.2s;
flex-shrink: 0;
position: relative; /* Changed from absolute */
bottom: auto;
left: auto;
margin: 0;
min-height: auto;
touch-action: manipulation; /* Prevent accidental zoom/delay on touch */
letter-spacing: 0.05em;
justify-content: center;
align-items: center;
cursor: pointer;
border: none;
}
@media (hover: hover) {
.play-now-button:hover,
.horizontal-play-button:hover {
background: #00b850;
transform: translateY(-1px);
}
}
.nav-tabs li {
align-items: center;
display: flex;
cursor: pointer;
}
.expired-competition {
position: relative;
background: #ffffff;
}
.expired-competition .timer {
display: block;
color: rgb(204, 8, 0);
}
/* Expired text: no CSS font-size change – JS sets "Expired" vs "Round Expired" below 400px only */
/* ============================================
FOOLPROOF OVERRIDES FOR JACKPOT & DAILY FREE GAMES PAGES
High specificity selectors to ensure test CSS logic applies
============================================ */
/* Base Grid - Override everything */
.jackpot-competitions-page .competition-grid,
.daily-free-games-page .competition-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* 2 per row on mobile */
gap: 0.75rem !important;
padding: 1rem !important;
max-width: 1400px !important;
margin: 0 auto 2rem auto !important;
box-sizing: border-box !important;
}
/* Base Box - Override everything */
.jackpot-competitions-page .competition-box,
.daily-free-games-page .competition-box,
.jackpot-competitions-page .comp-box,
.daily-free-games-page .comp-box {
background: #ffffff !important;
border-radius: 8px !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: auto !important;
min-height: 320px !important;
max-width: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
aspect-ratio: auto !important;
position: relative !important;
transition: box-shadow 0.2s, transform 0.2s !important; /* Same as additional-offer */
cursor: pointer !important;
}
/* Hover effect - same as additional-offer sidebar boxes - HIGHER SPECIFICITY */
@media (hover: hover) {
.jackpot-competitions-page .competition-box:hover,
.daily-free-games-page .competition-box:hover,
.jackpot-competitions-page .comp-box:hover,
.daily-free-games-page .comp-box:hover {
box-shadow: 0 6px 16px rgba(2, 46, 74, 0.18), 0 3px 8px rgba(2, 46, 74, 0.12) !important;
transform: translateY(-2px) !important;
}
}
/* Base Image - Override everything */
.jackpot-competitions-page .competition-image,
.daily-free-games-page .competition-image {
width: 100% !important;
aspect-ratio: 5 / 3 !important; /* Maintain 5:3 ratio - no cropping */
background: #2a2a2a !important;
position: relative !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
flex-shrink: 0 !important;
display: block !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
border-bottom: none !important;
border-top: none !important; /* Ensure no border-top */
}
.jackpot-competitions-page .competition-image img,
.daily-free-games-page .competition-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* Fill container, no cropping since aspect ratios match */
object-position: center center !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
}
/* Top Border - Override everything */
.jackpot-competitions-page .competition-top-border,
.daily-free-games-page .competition-top-border {
background: #ffffff !important;
border-bottom: 1px solid #f0f0f0 !important;
border-top: none !important; /* Remove any border-top - seamless connection with image above */
padding: 0.5rem 0.75rem !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
min-height: 40px !important;
flex-shrink: 0 !important;
position: relative !important;
}
/* Bookmaker Logo - Override everything */
.jackpot-competitions-page .bookmaker-logo,
.daily-free-games-page .bookmaker-logo {
display: flex !important;
align-items: center !important;
text-decoration: none !important;
transition: opacity 0.2s !important;
cursor: pointer !important;
position: relative !important;
transform: none !important;
top: auto !important;
left: auto !important;
background: transparent !important;
min-width: auto !important;
width: auto !important;
box-sizing: border-box !important;
justify-content: flex-start !important;
border-radius: 4px !important;
border: none !important;
min-height: auto !important;
}
.jackpot-competitions-page .bookmaker-logo:hover,
.daily-free-games-page .bookmaker-logo:hover {
opacity: 0.8 !important;
}
.jackpot-competitions-page .bookmaker-logo img,
.daily-free-games-page .bookmaker-logo img {
max-width: 60px !important;
max-height: 32px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
border-radius: 4px !important; /* Light rounded corners */
}
/* Timer - Override everything */
.jackpot-competitions-page .competition-top-border .timer,
.daily-free-games-page .competition-top-border .timer {
color: #00cc5a !important;
font-size: 0.75rem !important;
font-weight: 700 !important; /* Bold */
white-space: nowrap !important;
position: relative !important;
transform: none !important;
top: auto !important;
left: auto !important;
background: transparent !important;
min-width: auto !important;
width: auto !important;
box-sizing: border-box !important;
text-align: right !important;
border: none !important;
border-radius: 4px !important;
}
/* Bottom Border - Override everything */
.jackpot-competitions-page .competition-bottom-border,
.daily-free-games-page .competition-bottom-border {
background: #ffffff !important;
padding: 0.75rem !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
flex-grow: 1 !important;
min-height: 100px !important;
position: relative !important;
}
/* Blurb - Override everything */
.jackpot-competitions-page .competition-blurb,
.daily-free-games-page .competition-blurb {
text-align: center !important;
font-size: 0.75rem !important;
line-height: 1.4 !important;
color: #20242e !important;
margin-bottom: 0.75rem !important;
flex-grow: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 700 !important; /* Bold */
position: relative !important;
width: auto !important;
padding: 0 !important;
margin: 0 0 0.75rem 0 !important;
transform: none !important;
top: auto !important;
left: auto !important;
z-index: 1 !important;
min-height: auto !important;
overflow: visible !important;
}
/* Play Button - Override everything */
.jackpot-competitions-page .play-now-button,
.daily-free-games-page .play-now-button {
background: #00cc5a !important;
color: #000 !important;
text-decoration: none !important;
text-align: center !important;
padding: 0.5rem 1rem !important;
border-radius: 4px !important;
font-size: 0.75rem !important;
font-weight: 700 !important; /* Bold */
display: block !important;
transition: background 0.2s !important;
flex-shrink: 0 !important;
position: relative !important;
bottom: auto !important;
left: auto !important;
margin: 0 !important;
min-height: auto !important;
letter-spacing: 0.05em !important;
justify-content: center !important;
align-items: center !important;
cursor: pointer !important;
border: none !important;
}
@media (hover: hover) {
.jackpot-competitions-page .play-now-button:hover,
.daily-free-games-page .play-now-button:hover {
background: #00b850 !important;
}
}
transform: translateY(-1px) !important;
}
/* Mobile: Maintain 5:3 aspect ratio - no cropping */
@media (max-width: 499px) {
.jackpot-competitions-page .competition-image,
.daily-free-games-page .competition-image {
aspect-ratio: 5 / 3 !important; /* Maintain image aspect ratio */
}
.jackpot-competitions-page .competition-image img,
.daily-free-games-page .competition-image img {
object-fit: cover !important; /* Fill container - no cropping since ratios match */
object-position: center center !important;
}
}
/* TABLET: 450px - 599px */
@media (min-width: 450px) and (max-width: 599px) {
.jackpot-competitions-page .competition-grid,
.daily-free-games-page .competition-grid {
gap: 0.75rem !important;
padding: 0.5rem !important;
}
.jackpot-competitions-page .competition-box,
.daily-free-games-page .competition-box {
min-height: 340px !important;
}
.jackpot-competitions-page .competition-image,
.daily-free-games-page .competition-image {
aspect-ratio: 5 / 3 !important; /* Maintain 5:3 ratio - no cropping */
}
.jackpot-competitions-page .competition-top-border,
.daily-free-games-page .competition-top-border {
padding: 0.65rem 0.9rem !important;
min-height: 44px !important;
}
.jackpot-competitions-page .bookmaker-logo img,
.daily-free-games-page .bookmaker-logo img {
max-width: 68px !important;
max-height: 36px !important;
border-radius: 4px !important;
}
.jackpot-competitions-page .competition-top-border .timer,
.daily-free-games-page .competition-top-border .timer {
font-size: 0.85rem !important; /* Scaled up more */
font-weight: 700 !important; /* Bold */
}
.jackpot-competitions-page .competition-bottom-border,
.daily-free-games-page .competition-bottom-border {
padding: 0.9rem !important;
min-height: 115px !important;
}
.jackpot-competitions-page .competition-blurb,
.daily-free-games-page .competition-blurb {
font-size: 0.85rem !important; /* Scaled up more */
line-height: 1.5 !important;
font-weight: 700 !important; /* Bold */
}
.jackpot-competitions-page .play-now-button,
.daily-free-games-page .play-now-button {
font-size: 0.85rem !important; /* Scaled up more */
padding: 0.6rem 1.15rem !important;
font-weight: 700 !important; /* Bold */
}
}
/* LARGE TABLET: 600px - 767px */
@media (min-width: 600px) and (max-width: 767px) {
.jackpot-competitions-page .competition-grid,
.daily-free-games-page .competition-grid {
gap: 1.5rem !important;
padding: 1.75rem !important;
}
.jackpot-competitions-page .competition-box,
.daily-free-games-page .competition-box {
min-height: 380px !important;
}
.jackpot-competitions-page .competition-image,
.daily-free-games-page .competition-image {
aspect-ratio: 5 / 3 !important; /* Maintain 5:3 ratio - no cropping */
}
.jackpot-competitions-page .competition-top-border,
.daily-free-games-page .competition-top-border {
padding: 0.8rem 1.1rem !important; /* Scaled up more */
min-height: 48px !important; /* Scaled up more */
}
.jackpot-competitions-page .bookmaker-logo img,
.daily-free-games-page .bookmaker-logo img {
max-width: 75px !important; /* Scaled up more */
max-height: 40px !important; /* Scaled up more */
border-radius: 4px !important;
}
.jackpot-competitions-page .competition-top-border .timer,
.daily-free-games-page .competition-top-border .timer {
font-size: 0.95rem !important; /* Scaled up significantly */
font-weight: 700 !important; /* Bold */
}
.jackpot-competitions-page .competition-bottom-border,
.daily-free-games-page .competition-bottom-border {
padding: 1.1rem !important; /* Scaled up more */
min-height: 130px !important; /* Scaled up more */
}
.jackpot-competitions-page .competition-blurb,
.daily-free-games-page .competition-blurb {
font-size: 0.95rem !important; /* Scaled up significantly - was too small */
line-height: 1.5 !important;
font-weight: 700 !important; /* Bold */
}
.jackpot-competitions-page .play-now-button,
.daily-free-games-page .play-now-button {
font-size: 0.95rem !important; /* Scaled up significantly - was too small */
padding: 0.7rem 1.4rem !important; /* Scaled up more */
font-weight: 700 !important; /* Bold */
}
}
/* DESKTOP: 768px+ */
@media (min-width: 768px) {
.jackpot-competitions-page .competition-grid,
.daily-free-games-page .competition-grid {
grid-template-columns: repeat(3, 1fr) !important; /* 3 per row */
gap: 1.25rem !important;
padding: 2rem 3.5rem !important; /* Increased side padding */
}
.jackpot-competitions-page .competition-box,
.daily-free-games-page .competition-box {
min-height: 360px !important;
}
.jackpot-competitions-page .competition-image,
.daily-free-games-page .competition-image {
aspect-ratio: 5 / 3 !important; /* Maintain 5:3 ratio - no cropping */
}
.jackpot-competitions-page .competition-top-border,
.daily-free-games-page .competition-top-border {
padding: 0.75rem 1rem !important;
min-height: 50px !important;
}
.jackpot-competitions-page .bookmaker-logo img,
.daily-free-games-page .bookmaker-logo img {
max-width: 70px !important;
max-height: 38px !important;
border-radius: 4px !important;
}
.jackpot-competitions-page .competition-top-border .timer,
.daily-free-games-page .competition-top-border .timer {
font-size: 1rem !important; /* Bigger - fully scaled */
font-weight: 700 !important; /* Bold */
}
.jackpot-competitions-page .competition-bottom-border,
.daily-free-games-page .competition-bottom-border {
padding: 1rem !important;
min-height: 120px !important;
}
.jackpot-competitions-page .competition-blurb,
.daily-free-games-page .competition-blurb {
font-size: 1rem !important; /* Bigger - fully scaled */
line-height: 1.5 !important;
font-weight: 700 !important; /* Bold */
}
.jackpot-competitions-page .play-now-button,
.daily-free-games-page .play-now-button {
font-size: 1rem !important; /* Bigger - fully scaled */
padding: 0.65rem 1.35rem !important;
font-weight: 700 !important; /* Bold */
}
}
/* LARGE DESKTOP: 1024px+ */
@media (min-width: 1024px) {
.jackpot-competitions-page .competition-grid,
.daily-free-games-page .competition-grid {
grid-template-columns: repeat(3, 300px) !important; /* Fixed width at desktop */
justify-content: center !important;
gap: 1.5rem !important;
padding: 2rem 4rem !important;
}
.jackpot-competitions-page .competition-box,
.daily-free-games-page .competition-box {
min-height: 380px !important;
max-width: 300px !important;
}
.jackpot-competitions-page .competition-image,
.daily-free-games-page .competition-image {
aspect-ratio: 5 / 3 !important; /* Maintain 5:3 ratio - no cropping */
}
.jackpot-competitions-page .competition-top-border,
.daily-free-games-page .competition-top-border {
padding: 0.75rem 1rem !important;
min-height: 50px !important;
}
.jackpot-competitions-page .bookmaker-logo img,
.daily-free-games-page .bookmaker-logo img {
max-width: 70px !important;
max-height: 38px !important;
border-radius: 4px !important;
}
.jackpot-competitions-page .competition-top-border .timer,
.daily-free-games-page .competition-top-border .timer {
font-size: 1rem !important; /* Bigger - fully scaled */
font-weight: 700 !important; /* Bold */
}
.jackpot-competitions-page .competition-bottom-border,
.daily-free-games-page .competition-bottom-border {
padding: 1rem !important;
min-height: 130px !important;
}
.jackpot-competitions-page .competition-blurb,
.daily-free-games-page .competition-blurb {
font-size: 1rem !important; /* Bigger - fully scaled */
font-weight: 700 !important; /* Bold */
}
.jackpot-competitions-page .play-now-button,
.daily-free-games-page .play-now-button {
font-size: 1rem !important; /* Bigger - fully scaled */
padding: 0.65rem 1.5rem !important;
font-weight: 700 !important; /* Bold */
}
}
@media (min-width: 480px) {
.section-title {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
margin-bottom: var(--spacing-sm);
}
.section-title h2 {
margin-bottom: 0;
flex-shrink: 0;
}
.section-title h2.expired-indicator::before,
.section-title h2.live-indicator::before {
width: 0.625rem;
height: 0.625rem;
margin-right: 0.3125rem;
}
.section-title .section-controls {
margin-top: 0;
justify-content: flex-end;
flex-shrink: 0;
}
}
/* Tablet: Limit height at 500px to prevent boxes getting too massive */
@media (min-width: 500px) and (max-width: 767px) {
.competition-box {
max-height: 380px !important; /* Aggressively limit height at this breakpoint */
aspect-ratio: 0.55; /* Slightly less tall to prevent massive boxes */
}
.competition-image {
height: 130px; /* Proportionally smaller */
}
.competition-bottom-border {
padding: 0.5rem !important;
min-height: 60px !important; /* Even more reduced at this breakpoint */
max-height: 65px !important; /* Strict limit */
}
.competition-blurb {
min-height: 28px !important; /* Reduced */
}
}
/* Mobile/Tablet: Simplified 2-column layout (like 7 Days Performance) */
@media (min-width: 450px) and (max-width: 767px) {
.competition-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0;
padding: 0 5px;
justify-items: stretch;
}
.competition-box {
max-width: 100%;
margin: 0 5px 37px 5px;
aspect-ratio: 0.5; /* Maintain tall/thin aspect */
min-height: 300px; /* Ensure minimum height */
max-height: 400px; /* Prevent boxes from getting too massive */
}
/* Scale internal elements proportionally at this breakpoint */
.competition-image {
height: 140px; /* Slightly smaller image to keep proportions */
}
.competition-top-border {
min-height: 32px;
padding: 0.35rem 0.65rem;
}
.timer {
font-size: 11px;
min-width: 65px;
padding: 0.4rem 0.85rem;
}
.bookmaker-logo img {
max-width: 50px;
max-height: 27px;
}
.competition-bottom-border {
padding: 0.5rem;
min-height: 65px; /* Reduced from 90px - was too long */
max-height: 70px; /* Limit maximum height */
}
.play-now-button {
font-size: 11px;
padding: 0.35rem 0.65rem;
min-height: 28px;
}
.competition-blurb {
font-size: 11px;
top: calc(50% - 1.4rem);
min-height: 30px; /* Reduced */
line-height: 1.3;
}
}
.section-title {
padding: 0 5px;
width: 100%;
position: relative;
margin-bottom: 0.1rem;
}
.section-title .section-controls {
display: none;
}
}
/* DESKTOP: Keep existing desktop styles unchanged */
@media (min-width: 768px) {
.competition-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem 0.625rem;
padding: 0 3.5rem; /* Increased padding for more border space, making boxes thinner */
}
.competition-box {
max-width: 100%;
margin: 0;
aspect-ratio: 0.7; /* Maintain tall/thin aspect on desktop */
min-height: 335px; /* Ensure minimum height */
}
.section-title {
padding: 0 3.5rem; /* Match grid padding */
width: 100%;
position: relative;
margin-bottom: 0.1rem;
}
.section-title .section-controls {
display: none;
}
}
@media (min-width: 1024px) {
.competition-grid {
grid-template-columns: repeat(3, 300px);
gap: 1.25rem 0.75rem;
padding: 0 4rem;
max-width: 1200px;
justify-content: center;
}
.section-title {
padding: 0 4rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
position: relative;
margin-bottom: 0.1rem;
display: flex;
justify-content: flex-start;
}
.section-title .section-controls {
display: none;
}
.competition-box {
max-width: 300px;
}
.competition-image {
height: 180px;
}
.competition-top-border {
min-height: 50px;
padding: 0.5rem 1rem;
}
.timer {
font-size: 1rem;
min-width: 85px;
padding: 0.5rem 1rem;
}
.bookmaker-logo img {
max-width: 63px;
max-height: 34px;
}
.competition-bottom-border {
padding: 1rem;
min-height: 120px;
}
.play-now-button {
font-size: 1rem;
padding: 0.375rem 0.75rem;
min-height: 32px;
}
.competition-blurb {
font-size: 1rem;
top: calc(50% - 1.75rem);
min-height: 40px;
line-height: 1.4;
}
.section-title h2 {
font-size: 24px;
margin-left: calc((100% - (300px * 3 + 0.75rem * 2)) / 2);
}
.section-title h2.expired-indicator::before,
.section-title h2.live-indicator::before {
width: 0.75rem;
height: 0.75rem;
margin-right: 0.5rem;
}
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 90%;
margin: 0 auto;
padding: 0 20px;
position: relative;
}
.footer-social-media {
position: absolute;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
order: 999;
}
.footer-social-header {
font-size: 14px;
font-weight: 600;
color: #fff;
margin: 0;
text-align: center !important;
width: 100%;
}
/* Keep centred on individual pages (override .individual-competition-page h3 left-align) */
.individual-competition-page .footer-social-header,
footer .footer-social-header {
text-align: center !important;
}
.footer-social-icons {
display: flex;
gap: 16px;
align-items: center;
justify-content: center;
}
.footer-social-media .social-icon {
width: 32px;
height: 32px;
transition: opacity 0.3s, transform 0.2s;
display: block;
}
.footer-social-media a {
display: inline-block;
line-height: 0;
}
.footer-social-media a:hover .social-icon {
opacity: 0.7;
transform: scale(1.1);
}
.footer-copyright {
margin-top: 15px;
font-size: 12px;
color: #fff;
opacity: 0.8;
}
/* Footer social: centered below Terms until 1023px, then bottom-right at 1024px+ */
@media (max-width: 1023px) {
.footer-social-media {
position: static !important;
bottom: auto !important;
right: auto !important;
width: 100%;
margin: 25px 0 10px 0;
order: 998;
text-align: center;
}
.footer-social-header {
text-align: center !important;
}
.footer-social-icons {
justify-content: center !important;
}
.footer-legal {
order: 999;
}
.footer-copyright {
margin-top: 10px;
}
}
@media (min-width: 1024px) {
.footer-social-media {
position: absolute !important;
bottom: 20px !important;
right: 20px !important;
top: auto !important;
left: auto !important;
margin-bottom: 0 !important;
order: 999 !important;
width: auto !important;
}
.footer-social-header {
text-align: left !important;
}
.footer-social-icons {
justify-content: flex-end !important;
}
}
.footer-links {
display: flex;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
justify-content: center;
}
.footer-links a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
.footer-legal {
font-size: 12px;
color: #fff;
max-width: 800px;
margin: 0 auto;
}
.gamble-aware {
margin: 15px 0;
}
.safer-gambling-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-bottom: 15px;
}
.footer-logo {
width: 35px;
height: auto;
transition: opacity 0.3s;
}
.footer-logo:hover {
opacity: 0.7;
}
.competition-box-grid.fade-out,
.loading-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.begambleaware-logo {
width: 350px;
}
.gambling-support-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin: 15px 0;
flex-wrap: wrap;
}
.gambling-support-logos .footer-logo {
width: 100px;
height: 45px;
object-fit: contain;
transition: opacity 0.3s;
}
.gambling-support-logos .footer-logo:hover {
opacity: 0.8;
}
.gambling-support-logos .gpwa-logo {
width: 100px;
height: 45px;
object-fit: contain;
transition: opacity 0.3s;
}
.gambling-support-logos .gpwa-logo:hover {
opacity: 0.8;
}
.logo-image {
width: 7.5rem;
height: auto;
object-fit: contain;
max-height: 2.5rem;
flex-shrink: 0;
opacity: 1 !important; /* Always visible - never hide header logo */
visibility: visible !important; /* Always visible - never hide header logo */
}
header .logo-image,
header img.logo-image {
opacity: 1 !important;
visibility: visible !important;
}
.nav-tabs {
display: flex;
padding: 0;
margin: 0;
list-style: none;
width: 100%;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar {
display: none;
}
@media (max-width: 767px) {
.nav-tabs {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0 1rem;
width: 100%;
display: flex;
flex-wrap: nowrap;
}
.nav-tabs::-webkit-scrollbar {
display: none;
}
}
.nav-tabs li {
padding: 0 var(--spacing-sm);
white-space: nowrap;
color: #ffffff;
font-size: var(--font-size-sm);
transition: color 0.3s;
flex-shrink: 0;
}
@media (max-width: 767px) {
.nav-tabs li {
flex-shrink: 0;
}
}
.nav-tabs li a {
color: #fff;
text-decoration: none;
display: block;
}
.nav-tabs li.active a {
font-weight: 700;
color: #fff;
}
.nav-tabs li.live-indicator {
position: relative;
display: flex;
align-items: center;
}
.nav-tabs li.live-indicator a {
padding-right: 0;
}
.nav-tabs li.live-indicator .live-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.5rem;
height: 0.5rem;
background-color: var(--primary-cta);
border-radius: 50%;
margin-left: 0.25rem;
animation: 1.5s infinite pulse;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
}
.bookmaker-logo {
z-index: 2;
}
.nav-tabs li.active.live-indicator a {
border-bottom: none;
}
.nav-tabs li.active.live-indicator .live-dot {
position: relative;
z-index: 2;
}
/* Navigation Dropdown Styles */
.nav-tabs li.has-dropdown {
position: relative !important;
}
.nav-tabs li.has-dropdown > a {
position: relative !important;
z-index: 1 !important;
}
/* Hide dropdown on mobile - just make it a regular link */
@media (max-width: 767px) {
.nav-tabs li.has-dropdown .nav-dropdown {
display: none !important;
}
}
.nav-dropdown {
position: absolute !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin-left: 0.5rem !important;
margin-top: 0.25rem !important;
background: #ffffff !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(2, 46, 74, 0.05), 0 1px 4px rgba(2, 46, 74, 0.03) !important; /* Slightly more shadow */
min-width: 240px !important;
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.15s ease, visibility 0.15s ease !important;
z-index: 999999 !important;
border: 1px solid rgba(2, 46, 74, 0.1) !important;
pointer-events: none !important;
display: block !important;
padding: 0.25rem 0 !important;
}
.nav-dropdown * {
color: #022e4a !important;
visibility: visible !important;
}
/* Show dropdown immediately when hovering parent */
.nav-tabs li.has-dropdown:hover .nav-dropdown {
opacity: 1 !important;
visibility: visible !important;
pointer-events: all !important;
transition: opacity 0.15s ease, visibility 0.15s ease !important;
}
/* Keep dropdown visible when hovering the dropdown itself */
.nav-tabs li.has-dropdown .nav-dropdown:hover {
opacity: 1 !important;
visibility: visible !important;
pointer-events: all !important;
}
/* Add small gap bridge to prevent hover break */
.nav-tabs li.has-dropdown::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 0.5rem;
background: transparent;
pointer-events: all;
z-index: 999998;
}
.nav-tabs li.has-dropdown:hover::after {
pointer-events: all;
}
.nav-dropdown a {
display: block !important;
padding: 0.875rem 1.25rem !important;
color: #022e4a !important;
text-decoration: none !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
transition: all 0.2s ease !important;
border-bottom: 1px solid rgba(2, 46, 74, 0.05) !important;
white-space: nowrap !important;
}
.nav-dropdown a:last-child {
border-bottom: none;
}
.nav-dropdown a:hover {
background-color: #f0f9f4;
color: #00cc5a;
padding-left: 1.5rem;
}
.nav-dropdown a:first-child {
border-radius: 8px 8px 0 0;
}
.nav-dropdown a:last-child {
border-radius: 0 0 8px 8px;
}
/* Disable dropdown on pages where secondary nav is visible */
.nav-tabs li.has-dropdown.dropdown-disabled .nav-dropdown {
display: none !important;
}
.nav-tabs li.has-dropdown.dropdown-disabled:hover .nav-dropdown {
display: none !important;
}
/* Secondary Navigation */
.secondary-nav {
display: none;
background-color: #00cc5a !important;
position: relative;
top: 0;
z-index: 999997;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
@media (max-width: 767px) {
.secondary-nav {
position: relative;
top: 0;
background-color: #00cc5a !important;
z-index: 999997;
width: 100vw;
margin-left: calc(-50vw + 50%);
border: none !important;
box-shadow: 0 1px 3px rgba(32, 36, 46, 0.03), 0 1px 2px rgba(32, 36, 46, 0.02) !important; /* Super faint shadow */
padding: var(--spacing-sm) 0 !important; /* no left/right padding so scroll reaches edges */
margin-top: 0 !important;
margin-bottom: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important; /* left align like header */
min-height: 3rem !important;
}
.secondary-nav .container {
overflow-x: auto !important;
overflow-y: visible !important; /* prevent text cutoff */
padding: 0 !important; /* remove wrapper padding to match main nav behavior */
-webkit-overflow-scrolling: touch;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important; /* start at left edge */
}
/* Make tabs start at left, allow partial next item to be visible */
.secondary-nav-tabs {
justify-content: flex-start !important;
width: max-content !important;
gap: 1rem !important;
padding: 0 !important;
margin: 0 !important;
}
/* Remove mobile tap highlight/flash and any focus outlines */
.secondary-nav-tabs li a {
-webkit-tap-highlight-color: transparent !important;
outline: none !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
}
.secondary-nav.mobile-only {
display: block;
position: relative;
top: 0;
z-index: 999997;
}
/* Show secondary nav on desktop for casino offers pages */
.secondary-nav.always-visible {
display: block;
position: relative;
top: 0;
z-index: 999997;
}
/* Ensure header doesn't leave a blue gap under it */
header, nav { border-bottom: 0 !important; margin-bottom: 0 !important; }
.secondary-nav { margin-top: 0 !important; }
@media (min-width: 768px) {
.secondary-nav.mobile-only {
display: none;
}
.secondary-nav.always-visible {
display: block !important;
}
}
.secondary-nav-tabs {
display: flex;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
align-items: center;
justify-content: center;
padding: 0;
gap: 1rem;
box-sizing: border-box;
height: 100%; /* fill parent to ensure vertical centering */
}
.secondary-nav .container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
overflow: visible; /* prevent text cutoff */
box-sizing: border-box;
}
.secondary-nav-tabs::-webkit-scrollbar {
display: none;
}
.secondary-nav-tabs li {
flex-shrink: 0;
padding: 0;
display: flex;
align-items: center;
height: 100%; /* ensure vertical centering */
}
.secondary-nav-tabs li a {
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
color: #022e4a;
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
white-space: nowrap;
border-radius: 0;
transition: all 0.2s ease;
background: transparent;
border: none;
box-shadow: none;
}
@media (max-width: 767px) {
.secondary-nav-tabs {
gap: 0rem !important;
padding-left: 1rem !important; /* align with main nav tabs padding */
padding-right: 0 !important;
}
.secondary-nav-tabs li a {
color: #022e4a !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 0.75rem !important;
font-size: 0.95rem !important;
display: flex !important;
align-items: center !important;
height: 100% !important;
}
.secondary-nav-tabs li.active a {
color: #022e4a !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
font-weight: 700 !important;
}
}
@media (min-width: 768px) {
.secondary-nav.always-visible {
background-color: #00cc5a !important;
border: none !important;
box-shadow: 0 1px 3px rgba(32, 36, 46, 0.03), 0 1px 2px rgba(32, 36, 46, 0.02) !important;
padding: var(--spacing-sm) var(--spacing-sm) !important;
margin: 0 auto !important;
width: 100%;
text-align: center !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 3rem !important;
}
.secondary-nav.always-visible .container {
padding: 0 var(--spacing-md);
height: 100%;
overflow: visible;
}
.secondary-nav.always-visible .secondary-nav-tabs {
justify-content: center;
gap: 1rem;
padding: 0;
height: 100%;
}
.secondary-nav.always-visible .secondary-nav-tabs::-webkit-scrollbar {
display: none;
}
.secondary-nav.always-visible .secondary-nav-tabs li {
padding: 0;
white-space: nowrap;
flex-shrink: 0;
height: 100%;
display: flex;
align-items: center;
}
.secondary-nav.always-visible .secondary-nav-tabs li a {
padding: 0 1rem !important;
font-size: 0.95rem;
color: #022e4a;
background: transparent !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
height: 100% !important;
}
.secondary-nav.always-visible .secondary-nav-tabs li a:hover {
color: #022e4a;
background: transparent !important;
border: none !important;
transform: none !important;
}
/* Remove any gap between secondary nav and following hero */
.secondary-nav { margin-bottom: 0 !important; }
.secondary-nav + .hero-section { margin-top: 0 !important; }
.secondary-nav.always-visible + .hero-section { margin-top: 0 !important; }
.secondary-nav.always-visible .secondary-nav-tabs li.active a {
background: transparent !important;
color: #022e4a;
border: none !important; /* remove underline */
font-weight: 700;
box-shadow: none !important;
}
}
.secondary-nav-tabs li a:hover {
background: #f0f9f4;
color: #00cc5a;
border-color: rgba(0, 204, 90, 0.4);
box-shadow: 0 2px 6px rgba(0, 204, 90, 0.15);
transform: translateY(-1px);
}
.secondary-nav-tabs li.active a {
background: transparent;
color: #022e4a;
border: none;
font-weight: 700;
box-shadow: none;
}
.pq-modal-overlay {
display: flex;
align-items: center;
justify-content: center;
animation: 0.3s ease-out fadeIn;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
0% {
transform: scale(0.85);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.pq-modal-content {
text-align: center;
}
.pq-modal h2 {
font-size: 1.5rem;
margin: 0 0 0.7rem;
font-weight: 700;
color: #022e4a;
}
.pq-modal p {
font-size: 1rem;
margin: 0 0 1.2rem;
color: #20242e;
line-height: 1.4;
}
.pq-dismiss {
color: #022e4a;
line-height: 1;
padding: 0.2rem 0.5rem;
border-radius: 50%;
transition: background 0.18s;
}
.pq-dismiss:focus,
.pq-dismiss:hover {
background: rgba(2, 46, 74, 0.1);
color: #022e4a;
outline: 0;
}
.pq-bottom-email-form,
.pq-email-form {
display: flex;
flex-direction: column;
gap: 0.7rem;
align-items: stretch;
}
.pq-email-form input {
outline: 2px solid #20242e;
outline-offset: 2px;
border: none;
transition: border 0.2s;
width: 100%;
box-sizing: border-box;
color: #022e4a;
caret-color: #022e4a;
}
.pq-bottom-email-form input:focus,
.pq-email-form input:focus {
border-color: #fff;
}
.pq-email-form button {
font-weight: 600;
transition: background 0.18s;
}
@media (hover: hover) {
.pq-bottom-email-form button:hover,
.pq-email-form button:hover {
background: #00cc5a;
}
}
}
.pq-bottom-error,
.pq-error {
color: #d32f2f;
font-size: 0.9rem;
margin-bottom: 0.2rem;
min-height: 1.2em;
text-align: left;
}
.pq-success {
color: #00cc5a;
font-size: 1.1rem;
margin: 1.2rem 0 0.5rem;
text-align: center;
font-weight: 600;
}
.pq-bottom-email-section {
background: #ffffff;
padding: 1.5rem 0;
margin-top: 3rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
}
.pq-bottom-email-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.pq-bottom-email-content {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.pq-bottom-email-content h2 {
font-size: 20px;
margin: 0 0 0.5rem;
font-weight: 700;
color: #022e4a;
text-align: center !important;
}
/* Keep "Stay Updated with Betquest!" centred on individual pages */
.individual-competition-page .pq-bottom-email-content h2 {
text-align: center !important;
}
.pq-bottom-email-content p {
font-size: 12px;
margin: 0 0 1.5rem;
color: #20242e;
line-height: 1.4;
}
.pq-bottom-email-form input {
padding: 0.75rem;
font-size: 12px;
border: none;
border-radius: 0.5rem;
outline: 2px solid #20242e;
outline-offset: 2px;
transition: border 0.2s;
width: 100%;
box-sizing: border-box;
color: #022e4a;
caret-color: #022e4a;
}
.pq-bottom-email-form button {
background: #00cc5a;
color: #20242e;
border: none;
padding: 0.75rem;
font-size: 1rem;
cursor: pointer;
border-radius: 0.5rem;
font-weight: 600;
transition: background 0.18s;
}
.pq-bottom-success {
color: #00cc5a;
font-size: 1rem;
margin: 1rem 0 0.5rem;
text-align: center;
font-weight: 600;
}
@media (min-width: 600px) {
.pq-modal {
padding: 2.5rem;
}
.pq-modal h2 {
font-size: 1.7rem;
}
.pq-bottom-email-section {
padding: 3rem 0;
}
.pq-bottom-email-content h2 {
font-size: 20px;
}
.pq-bottom-email-content p {
font-size: 12px;
}
.pq-bottom-email-form input {
font-size: 12px;
}
}
@media (min-width: 768px) {
.pq-bottom-email-content h2 {
font-size: 28px;
}
.pq-bottom-email-content p {
font-size: 16px;
}
.pq-bottom-email-form input {
font-size: 16px;
}
}
@media (min-width: 900px) {
.pq-modal {
max-width: 450px;
}
.pq-bottom-email-content {
max-width: 700px;
}
}
.pq-cookie-popup-rect {
position: fixed;
left: 50%;
bottom: 32px;
transform: translateX(-50%);
z-index: 9999999 !important; /* Above everything including UKGC popups */
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
padding: 24px 32px;
min-width: 320px;
max-width: 90vw;
display: flex;
flex-direction: column;
align-items: center;
font-family: inherit;
color: #222;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
isolation: isolate;
}
.pq-cookie-popup-inner {
width: 100%;
}
.pq-cookie-popup-text {
margin-bottom: 0px;
text-align: center;
font-size: 12px;
}
.pq-cookie-popup-text small,
.pq-cookie-popup-text strong {
color: #222;
font-size: 12px;
}
.pq-cookie-popup-actions {
display: flex;
gap: 16px;
justify-content: center;
}
.pq-banner-mobile,
.pq-banner-tablet-sm {
position: fixed;
z-index: 1000;
display: flex;
flex-direction: column;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
#pqCookieAccept {
background: #00cc5a;
color: #20242e;
border: none;
border-radius: 6px;
padding: 8px 20px;
font-size: 1rem;
cursor: pointer;
font-weight: 700;
min-height: 44px;
min-width: 44px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
user-select: none;
pointer-events: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
outline: none;
position: relative;
z-index: 10000;
transition: opacity 0.1s ease;
isolation: isolate;
}
#pqCookieAccept:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
#pqCookieReject {
background: #f8f9fa;
color: #6c757d;
border: 1px solid #dee2e6;
border-radius: 6px;
padding: 8px 20px;
font-size: 1rem;
cursor: pointer;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
min-height: 44px;
min-width: 44px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
user-select: none;
pointer-events: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
outline: none;
position: relative;
z-index: 10000;
isolation: isolate;
}
#pqCookieReject:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
#pqCookieReject:hover {
background: #e9ecef;
color: #495057;
border-color: #adb5bd;
}
.pq-banner-mobile {
width: 320px;
min-height: 50px;
align-items: center;
overflow: hidden;
}
.pq-banner-tablet-sm {
width: 468px;
min-height: 60px;
align-items: center;
overflow: hidden;
}
.pq-banner-desktop,
.pq-banner-tablet-lg {
position: fixed;
z-index: 1000;
flex-direction: column;
display: flex;
overflow: hidden;
}
.pq-banner-tablet-lg {
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 728px;
min-height: 90px;
align-items: center;
}
.pq-banner-desktop {
top: 200px;
/* left is dynamically set by JavaScript based on content position */
width: 160px;
min-height: 600px;
max-height: calc(100vh - 600px);
align-items: flex-start;
transition: top 0.2s ease-out, z-index 0.1s ease-out, left 0.2s ease-out;
}
.pq-banner-static {
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.pq-banner-notice {
margin-top: 8px;
color: #b00;
font-size: 0.95rem;
text-align: center;
}
@media (max-width: 479px) {
.pq-banner-desktop,
.pq-banner-tablet-lg,
.pq-banner-tablet-sm {
display: none !important;
}
.pq-banner-mobile {
display: flex !important;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.pq-banner-desktop,
.pq-banner-mobile,
.pq-banner-tablet-lg {
display: none !important;
}
.pq-banner-tablet-sm {
display: flex !important;
}
}
@media (min-width: 768px) and (max-width: 1399px) {
.pq-banner-desktop,
.pq-banner-mobile,
.pq-banner-tablet-sm {
display: none !important;
}
.pq-banner-tablet-lg {
display: flex !important;
}
}
@media (min-width: 1400px) {
.pq-banner-mobile,
.pq-banner-tablet-lg,
.pq-banner-tablet-sm {
display: none !important;
}
.pq-banner-desktop {
display: flex !important;
}
}
@media (min-width: 1450px) and (max-width: 1639px) {
.additional-offer p,
.right-side-offers-module h3 {
font-size: 16px; /* Slightly increased from 14px - ONLY blurb text */
color: #20242e;
display: flex;
gap: 8px;
text-align: center;
}
.right-side-offers-module {
position: absolute;
left: calc(100% + 20px);
top: 0;
width: 240px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 12px;
padding: 12px;
z-index: 10;
backdrop-filter: blur(10px);
text-align: center;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
}
.right-side-offers-module h3 {
font-weight: 700;
margin: 0 0 12px;
align-items: center;
justify-content: center;
}
.right-side-offers-module h3 img {
display: none !important; /* Remove logo from h3 - it's now in the additional-offer p */
}
.additional-offer {
margin-bottom: 12px;
padding: 12px;
background: #ffffff;
border-radius: 8px;
border: none;
text-align: center;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
transition: box-shadow 0.2s, transform 0.2s;
contain: layout style !important;
will-change: transform;
cursor: pointer;
}
.additional-offer:hover {
box-shadow: 0 6px 16px rgba(2, 46, 74, 0.18), 0 3px 8px rgba(2, 46, 74, 0.12);
transform: translateY(-2px);
}
.additional-offer p {
margin: 0 0 8px !important;
padding: 0 0 8px 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important; /* No gap - just centered logo */
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-weight: bold;
min-height: 36px !important;
contain: layout style !important;
}
.additional-offer p img {
width: 71px !important;
height: 36px !important;
min-width: 71px !important;
min-height: 36px !important;
max-width: 71px !important;
max-height: 36px !important;
flex-shrink: 0 !important;
display: block !important;
object-fit: contain !important;
aspect-ratio: 2/1 !important;
border-radius: 3px;
margin: 0 !important;
padding: 0 !important;
contain: layout style size !important;
}
/* REDUCE key terms text size in additional offer box on individual pages ONLY (template.php). Body scope = zero impact on jackpot/daily. */
body.individual-competition-page .additional-offer small {
font-size: 10px !important; /* REDUCED from 9px for individual pages */
color: var(--subtle-gray);
display: block;
margin-top: 4px !important; /* Reduced margin */
margin-bottom: 4px !important; /* Reduced margin */
text-align: center;
line-height: 1.2;
}
/* FINAL: Jackpot & daily never get individual styling – explicit override so key terms stay 9px / 6px margins */
body.jackpot-competitions-page .additional-offer small,
body.daily-free-games-page .additional-offer small {
font-size: 9px !important;
margin-top: 6px !important;
margin-bottom: 6px !important;
}
/* Default for other pages */
.additional-offer small {
font-size: 9px !important;
color: var(--subtle-gray);
display: block;
margin-top: 6px;
margin-bottom: 6px;
text-align: center;
line-height: 1.2;
}
.offer-button-small {
display: inline-block;
background: var(--primary-cta);
color: #20242e;
padding: 10px 16px !important; /* INCREASED height from 6px to 10px */
border-radius: 6px;
text-decoration: none;
font-size: 14px !important; /* INCREASED from 12px */
font-weight: 600;
transition: transform 0.2s;
text-align: center;
width: 100%;
box-sizing: border-box;
margin-top: 0 !important;
min-height: 36px !important; /* Ensure minimum button height */
}
.offer-button-small:hover {
transform: translateY(-1px);
text-decoration: none;
}
}
@media (min-width: 1640px) {
.additional-offer p,
.right-side-offers-module h3 {
color: #20242e;
display: flex;
text-align: center;
}
.right-side-offers-module {
position: absolute;
left: calc(100% + 20px);
top: 0;
width: 320px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 12px;
padding: 15px;
z-index: 10;
backdrop-filter: blur(10px);
text-align: center;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
}
.right-side-offers-module h3 {
font-size: 16px;
font-weight: 700;
margin: 0 0 15px;
align-items: center;
justify-content: center;
gap: 10px;
}
.right-side-offers-module h3 img {
display: none !important; /* Remove logo from h3 - it's now in the additional-offer p */
}
.additional-offer {
margin-bottom: 15px;
padding: 12px;
background: #ffffff;
border-radius: 8px;
border: none;
text-align: center;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
transition: box-shadow 0.2s, transform 0.2s;
cursor: pointer;
}
.additional-offer:hover {
box-shadow: 0 6px 16px rgba(2, 46, 74, 0.18), 0 3px 8px rgba(2, 46, 74, 0.12);
transform: translateY(-2px);
}
.additional-offer p {
font-size: 14px;
margin: 0 0 8px !important;
padding: 0 0 8px 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important; /* No gap - just centered logo */
min-height: 36px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
contain: layout style !important;
}
.additional-offer p img {
width: 71px !important;
height: 36px !important;
min-width: 71px !important;
min-height: 36px !important;
max-width: 71px !important;
max-height: 36px !important;
flex-shrink: 0 !important;
display: block !important;
object-fit: contain !important;
aspect-ratio: 2/1 !important;
border-radius: 3px;
margin: 0 !important;
padding: 0 !important;
contain: layout style size !important;
}
/* REDUCE key terms text size in additional offer box on individual pages ONLY (template.php). Body scope = zero impact on jackpot/daily. */
body.individual-competition-page .additional-offer small {
font-size: 10px !important; /* REDUCED from 9px for individual pages */
color: var(--subtle-gray);
display: block;
margin-top: 4px !important; /* Reduced margin */
margin-bottom: 4px !important; /* Reduced margin */
text-align: center;
line-height: 1.2;
}
/* FINAL: Jackpot & daily never get individual styling – explicit override so key terms stay 9px / 6px margins */
body.jackpot-competitions-page .additional-offer small,
body.daily-free-games-page .additional-offer small {
font-size: 9px !important;
margin-top: 6px !important;
margin-bottom: 6px !important;
}
/* Default for other pages */
.additional-offer small {
font-size: 9px !important;
color: var(--subtle-gray);
display: block;
margin-top: 6px;
margin-bottom: 6px;
text-align: center;
line-height: 1.2;
}
.offer-button-small {
display: inline-block;
background: var(--primary-cta);
color: #20242e;
padding: 10px 16px !important; /* INCREASED height from 6px to 10px */
border-radius: 6px;
text-decoration: none;
font-size: 14px !important; /* INCREASED from 12px */
font-weight: 600;
transition: transform 0.2s;
text-align: center;
width: 100%;
box-sizing: border-box;
margin-top: 0 !important;
min-height: 36px !important; /* Ensure minimum button height */
}
.offer-button-small:hover {
transform: translateY(-1px);
text-decoration: none;
}
}
@media (min-width: 1645px) {
.right-side-offers-module {
left: calc(100% + 20px);
right: auto;
width: 320px;
padding: 15px;
}
}
@media (max-width: 1644px) and (min-width: 1450px) {
.right-side-offers-module {
left: calc(100% + 20px);
right: auto;
width: 240px;
padding: 12px;
}
}
.offers-box .claim-button {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: var(--primary-cta);
color: #000;
padding: 6px 12px;
border-radius: 6px;
touch-action: manipulation; /* Prevent accidental zoom/delay on touch */
text-decoration: none;
font-size: 12px;
font-weight: 700;
transition: transform 0.2s;
display: inline-block;
white-space: nowrap;
margin: 0;
z-index: 10;
}
@media (hover: hover) {
.offers-box .claim-button:hover {
transform: translateY(-50%) scale(1.05);
text-decoration: none;
}
}
.offers-box {
background: var(--primary-bg);
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 140px; /* Prevent layout shift */
}
/* Skeleton loader for offers box on individual pages */
.offers-skeleton {
display: flex;
flex-direction: column;
gap: 0.75rem;
opacity: 0; /* Hidden by default */
visibility: hidden; /* Hidden by default */
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.offers-skeleton.loaded {
display: none;
}
/* Show skeleton only when page is actively transitioning/loading */
body.individual-competition-page.page-transitioning:not(.loaded) .offers-skeleton {
opacity: 1;
visibility: visible;
}
.offers-skeleton .skeleton-line {
width: 100%;
height: 14px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
}
.offers-skeleton .skeleton-line.short {
width: 70%;
}
.offers-skeleton .skeleton-button {
width: 100px;
height: 32px;
background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
margin-top: 0.5rem;
}
/* Override for individual pages - let inline styles control color */
body.individual-competition-page .offers-box h3.offer-header {
/* Color controlled by inline style from JS - no override here */
text-align: center !important;
font-weight: 500 !important; /* Medium weight */
margin-top: 1rem !important; /* Push header DOWN from top */
}
/* DESKTOP: Push See Terms button UP from bottom */
@media (min-width: 768px) {
body.individual-competition-page .offers-box .enhanced-claim-button {
margin-bottom: 1rem !important; /* Push button UP from bottom */
}
}
.offers-box h3:not(.offer-header) {
color: var(--primary-cta);
text-align: left;
}
.offers-box .offer-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 100px;
padding-top: 5px;
}
.offers-box .offer-content p {
font-size: 16px;
font-weight: 600;
color: #20242e;
margin: 0 0 15px;
text-align: left;
line-height: 1.3;
}
.offers-box .offer-content small {
font-size: 7px;
color: #20242e;
line-height: 1;
margin: 0;
text-align: left;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 5px;
display: block;
}
@media (min-width: 768px) {
.offers-box {
padding: 20px;
min-height: 140px;
}
.offers-box .offer-content p,
.offers-box h3 {
font-size: 16px;
margin-bottom: 15px;
}
.offers-box .offer-content {
padding-right: 100px;
}
.offers-box .offer-content small {
font-size: 8px;
}
.offers-box .claim-button {
right: 12px;
padding: 8px 12px;
font-size: 12px;
}
}
@media (max-width: 767px) {
.offers-box {
padding: 15px;
min-height: 120px;
}
.offers-box .offer-content p,
.offers-box h3 {
font-size: 14px;
margin-bottom: 10px;
}
.offers-box .offer-content {
padding-right: 80px;
padding-top: 4px;
}
.offers-box .offer-content small {
font-size: 6px;
}
.offers-box .claim-button {
right: 8px;
padding: 6px 10px;
font-size: 11px;
}
}
@media (max-width: 479px) {
.offers-box {
padding: 12px;
min-height: 100px;
}
.offers-box h3 {
font-size: 11px;
margin-bottom: 8px;
}
.offers-box .offer-content {
padding-right: 70px;
padding-top: 3px;
}
.offers-box .offer-content p {
font-size: 12px;
margin-bottom: 8px;
}
.offers-box .offer-content small {
font-size: 5px;
}
.offers-box .claim-button {
right: 8px;
padding: 6px 10px;
font-size: 11px;
}
}
@media (max-width: 380px) {
.offers-box {
padding: 10px;
min-height: 90px;
}
.offers-box h3 {
font-size: 10px;
margin-bottom: 6px;
}
.offers-box .offer-content {
padding-right: 65px;
padding-top: 2px;
}
.offers-box .offer-content p {
font-size: 11px;
margin-bottom: 6px;
}
.offers-box .offer-content small {
font-size: 4px;
}
.offers-box .claim-button {
right: 6px;
padding: 5px 8px;
font-size: 10px;
}
}
.mobile-banner {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.daily-free-games-right-module,
.jackpot-games-right-module {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.mobile-banner .banner-content {
position: relative;
max-width: 100%;
max-height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.mobile-banner .banner-content img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
}
.mobile-banner .banner-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: #cc0800;
color: #fff;
border: none;
border-radius: 50%;
font-size: 18px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.mobile-banner .banner-close:hover {
background: #e62e5c;
}
.betting-sites-page .horizontal-game-box {
position: relative !important;
display: flex !important;
flex-direction: column !important;
background: rgba(255, 255, 255, 0.1) !important;
border: none !important;
border-radius: var(--box-border-radius) !important;
padding: 0.75rem !important;
margin-bottom: 0.75rem !important;
width: 100% !important;
min-height: auto !important;
gap: 0.5rem !important;
transition: transform 0.2s !important;
box-sizing: border-box !important;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12) !important;
}
.betting-sites-page .horizontal-game-box:hover {
transform: translateY(-2px) !important;
}
.betting-sites-page .horizontal-game-box .main-row {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
width: 100% !important;
}
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-image,
.betting-sites-page .horizontal-game-image {
width: 3rem !important;
height: 3rem !important;
flex-shrink: 0 !important;
border-radius: 0.25rem !important;
overflow: hidden !important;
background: 0 0 !important;
border: none !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-image img,
.betting-sites-page .horizontal-game-image img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
}
.betting-sites-page .horizontal-game-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
min-width: 0 !important;
position: relative !important;
padding: 0 !important;
min-height: auto !important;
height: 100% !important;
}
.betting-sites-page .horizontal-game-blurb,
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-blurb {
font-size: 0.75rem !important;
font-weight: 600 !important;
color: #20242e !important;
line-height: 1.3 !important;
margin: 0 !important;
text-align: center !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
max-width: 100% !important;
white-space: normal !important;
display: block !important;
overflow: visible !important;
text-overflow: unset !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
}
.betting-sites-page .horizontal-game-box .claim-button {
background: var(--primary-cta) !important;
color: #000 !important;
font-weight: 700 !important;
padding: 0.375rem 0.75rem !important;
border-radius: 0.375rem !important;
text-decoration: none !important;
display: inline-block !important;
transition: transform 0.2s !important;
font-size: 0.75rem !important;
text-align: center !important;
box-sizing: border-box !important;
line-height: 1.2 !important;
min-width: 4rem !important;
margin: 0 auto !important;
}
.betting-sites-page .horizontal-game-box.offers-box .claim-button {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
}
.betting-sites-page .horizontal-game-box .horizontal-divider,
.betting-sites-page .horizontal-game-box .horizontal-game-actions,
.betting-sites-page .horizontal-game-box .horizontal-play-button {
display: none !important;
}
@media (min-width: 768px) {
.betting-sites-page .horizontal-game-box {
padding: 1rem !important;
margin-bottom: 1rem !important;
gap: 0.5rem !important;
}
.betting-sites-page .horizontal-game-box .main-row {
gap: 1rem !important;
}
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-image,
.betting-sites-page .horizontal-game-image {
width: 4rem !important;
height: 4rem !important;
}
.betting-sites-page .horizontal-game-blurb,
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-blurb {
font-size: 0.875rem !important;
line-height: 1.4 !important;
}
.betting-sites-page .horizontal-game-box .claim-button,
.betting-sites-page .horizontal-game-box .dropdown-toggle {
padding: 0.5rem 1rem !important;
border-radius: 0.5rem !important;
font-size: 0.875rem !important;
min-width: 5rem !important;
}
.betting-sites-page .horizontal-game-box .dropdown-content {
gap: 0.5rem !important;
padding-top: 0.75rem !important;
}
.betting-sites-page .horizontal-game-terms {
font-size: 0.5625rem !important;
padding: 0.625rem !important;
}
}
@media (min-width: 1024px) {
.logo-image {
width: 10rem;
height: auto;
max-height: 3rem;
}
.nav-tabs li {
font-size: 1rem;
padding: 0 1rem;
}
.nav-tabs li.live-indicator .live-dot {
width: 0.625rem;
height: 0.625rem;
margin-left: 0.375rem;
}
.betting-sites-page .horizontal-game-box {
padding: 1rem !important;
margin-bottom: 1rem !important;
gap: 0.5rem !important;
}
.betting-sites-page .horizontal-game-box .main-row {
gap: 1.25rem !important;
}
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-image,
.betting-sites-page .horizontal-game-image {
width: 5rem !important;
height: 5rem !important;
}
.betting-sites-page .horizontal-game-blurb,
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-blurb {
font-size: 1rem !important;
line-height: 1.4 !important;
}
.betting-sites-page .horizontal-game-box .claim-button,
.betting-sites-page .horizontal-game-box .dropdown-toggle {
padding: 0.625rem 1.25rem !important;
border-radius: 0.625rem !important;
font-size: 1rem !important;
min-width: 6rem !important;
}
.betting-sites-page .horizontal-game-box .dropdown-content {
gap: 1rem !important;
padding-top: 1rem !important;
}
.betting-sites-page .horizontal-game-terms {
font-size: 0.625rem !important;
padding: 0.75rem !important;
}
}
@media (min-width: 1280px) {
.competition-grid {
grid-template-columns: repeat(3, 300px);
gap: 1.25rem 0.75rem;
padding: 0 5rem;
max-width: 1400px;
justify-content: center;
}
.section-title {
padding: 0 5rem;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
position: relative;
margin-bottom: 0.1rem;
}
.section-title .section-controls {
display: none;
}
.competition-box {
max-width: 300px;
}
.competition-image {
height: 180px;
}
.competition-top-border {
min-height: 50px;
padding: 0.625rem 1.25rem;
}
.timer {
font-size: 1.125rem;
min-width: 95px;
padding: 0.625rem 1.25rem;
}
.bookmaker-logo img {
max-width: 71px;
max-height: 38px;
}
.competition-bottom-border {
padding: 1.25rem;
min-height: 140px;
}
.play-now-button {
font-size: 1.125rem;
padding: 0.5rem 1rem;
min-height: 38px;
}
.competition-blurb {
font-size: 1.125rem;
top: calc(50% - 2rem);
min-height: 48px;
line-height: 1.5;
}
.section-title h2 {
font-size: 24px;
margin-left: calc((100% - (300px * 3 + 0.75rem * 2)) / 2);
}
.section-title h2.expired-indicator::before,
.section-title h2.live-indicator::before {
width: 0.8125rem;
height: 0.8125rem;
margin-right: 0.625rem;
}
.betting-sites-page .horizontal-game-box {
padding: 1.25rem !important;
margin-bottom: 1.25rem !important;
gap: 1rem !important;
}
.betting-sites-page .horizontal-game-box .main-row {
gap: 1.5rem !important;
}
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-image,
.betting-sites-page .horizontal-game-image {
width: 6rem !important;
height: 6rem !important;
}
.betting-sites-page .horizontal-game-blurb,
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-blurb {
font-size: 1.125rem !important;
line-height: 1.4 !important;
}
.betting-sites-page .horizontal-game-box .claim-button,
.betting-sites-page .horizontal-game-box .dropdown-toggle {
padding: 0.5rem 1rem !important;
border-radius: 0.75rem !important;
font-size: 1.125rem !important;
min-width: 8.5rem !important;
}
.betting-sites-page .horizontal-game-box .dropdown-content {
gap: 1.25rem !important;
padding-top: 1.25rem !important;
}
.betting-sites-page .horizontal-game-terms {
font-size: 0.6875rem !important;
padding: 0.875rem !important;
}
}
@media (min-width: 1536px) {
.betting-sites-page .horizontal-game-box {
padding: 1.5rem !important;
margin-bottom: 1.5rem !important;
gap: 1.25rem !important;
}
.betting-sites-page .horizontal-game-box .main-row {
gap: 1.75rem !important;
}
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-image,
.betting-sites-page .horizontal-game-image {
width: 7rem !important;
height: 7rem !important;
}
.betting-sites-page .horizontal-game-blurb,
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-blurb {
font-size: 1.25rem !important;
line-height: 1.4 !important;
}
.betting-sites-page .horizontal-game-box .claim-button,
.betting-sites-page .horizontal-game-box .dropdown-toggle {
padding: 0.625rem 1.25rem !important;
border-radius: 0.875rem !important;
font-size: 1.25rem !important;
min-width: 9.5rem !important;
}
.betting-sites-page .horizontal-game-box .dropdown-content {
gap: 1.5rem !important;
padding-top: 1.5rem !important;
}
.betting-sites-page .horizontal-game-terms {
font-size: 0.75rem !important;
padding: 1rem !important;
}
}
.betting-sites-page .horizontal-game-box.expired-competition {
opacity: 1 !important;
}
.betting-sites-page .horizontal-game-box.expired-competition .horizontal-timer {
color: rgb(204, 8, 0) !important;
}
.betting-sites-page .horizontal-game-actions.jackpot-actions {
justify-content: center !important;
height: 100% !important;
}
.betting-sites-page .horizontal-game-actions:not(.jackpot-actions) {
justify-content: center !important;
align-items: center !important;
}
.betting-sites-page .horizontal-game-actions:not(.jackpot-actions) .horizontal-play-button {
margin: auto 0 !important;
}
.jackpot-games-right-module {
position: absolute;
top: 350px; /* Aligned with bonus-grid-heading (hero ~350px + 2rem margin = ~382px) */
left: calc(50% + 400px + 120px);
width: 320px;
background: #f8f9fa;
border: none;
border-radius: 12px;
padding: 15px;
z-index: 1;
text-align: center;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
}
.daily-free-games-right-module h3,
.jackpot-games-right-module h3 {
font-size: 16px;
font-weight: 700;
margin: 0 0 15px;
color: var(--text-color);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.daily-free-games-right-module h3 img,
.jackpot-games-right-module h3 img {
max-width: 35px;
height: auto;
border-radius: 3px;
}
.daily-free-games-right-module .additional-offer,
.jackpot-games-right-module .additional-offer {
margin-bottom: 12px;
padding: 12px;
background: #ffffff;
border-radius: 8px;
border: none;
text-align: center;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
font-weight: bold;
cursor: pointer;
transition: box-shadow 0.2s, transform 0.2s;
}
.daily-free-games-right-module .additional-offer:hover,
.jackpot-games-right-module .additional-offer:hover {
box-shadow: 0 6px 16px rgba(2, 46, 74, 0.18), 0 3px 8px rgba(2, 46, 74, 0.12);
transform: translateY(-2px);
}
.daily-free-games-right-module .additional-offer p,
.jackpot-games-right-module .additional-offer p {
font-size: 14px;
margin: 0 0 8px !important;
padding: 0 0 8px 0 !important;
color: var(--text-color);
text-align: center;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important; /* No gap - just centered logo */
min-height: 36px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
contain: layout style !important;
}
.daily-free-games-right-module .additional-offer p img,
.jackpot-games-right-module .additional-offer p img {
width: 71px !important;
height: 36px !important;
min-width: 71px !important;
min-height: 36px !important;
max-width: 71px !important;
max-height: 36px !important;
flex-shrink: 0 !important;
display: block !important;
object-fit: contain !important;
aspect-ratio: 2/1 !important;
border-radius: 3px;
margin: 0 !important;
padding: 0 !important;
contain: layout style size !important;
}
.daily-free-games-right-module .additional-offer small,
.jackpot-games-right-module .additional-offer small {
font-size: 9px !important;
color: var(--subtle-gray);
display: block;
margin-top: 6px;
margin-bottom: 6px;
text-align: center;
line-height: 1.2;
}
.daily-free-games-right-module .offer-button-small,
.jackpot-games-right-module .offer-button-small {
display: inline-block;
background: var(--primary-cta);
color: #20242e;
padding: 6px 12px;
border-radius: 6px;
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition: transform 0.2s;
text-align: center;
width: 100%;
box-sizing: border-box;
margin-top: 0 !important;
}
.daily-free-games-right-module .offer-button-small:hover,
.jackpot-games-right-module .offer-button-small:hover {
transform: translateY(-1px);
text-decoration: none;
}
.daily-free-games-right-module .additional-offer p,
.jackpot-games-right-module .additional-offer p {
margin-bottom: 0 !important;
}
@media (min-width: 1630px) {
.right-side-offers-module {
position: absolute;
left: calc(100% + 70px);
top: 0;
width: 320px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 12px;
padding: 15px;
z-index: 10;
backdrop-filter: blur(10px);
text-align: center;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
}
.right-side-offers-module h3 {
font-size: 16px;
font-weight: 700;
margin: 0 0 15px;
color: #20242e;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.right-side-offers-module h3 img {
display: none !important; /* Remove logo from h3 - it's now in the additional-offer p */
}
}
@media (min-width: 1590px) and (max-width: 1629px) {
.right-side-offers-module {
left: calc(100% + 70px);
}
}
@media (min-width: 1580px) and (max-width: 1589px) {
.right-side-offers-module {
left: calc(100% + 60px);
}
}
@media (min-width: 1570px) and (max-width: 1579px) {
.right-side-offers-module {
left: calc(100% + 50px);
}
}
@media (min-width: 1560px) and (max-width: 1569px) {
.right-side-offers-module {
left: calc(100% + 40px);
}
}
@media (min-width: 1550px) and (max-width: 1559px) {
.right-side-offers-module {
left: calc(100% + 30px);
}
}
@media (min-width: 1540px) and (max-width: 1549px) {
.right-side-offers-module {
left: calc(100% + 20px);
}
}
@media (min-width: 1530px) and (max-width: 1539px) {
.right-side-offers-module {
left: calc(100% + 10px);
}
}
@media (min-width: 1490px) and (max-width: 1529px) {
.right-side-offers-module {
left: calc(100% + 2px);
}
}
/* Individual pages only: hide additional offer below 1525px; 1526–1690 use narrower (240px). Jackpot/daily unchanged. */
@media (max-width: 1524px) {
body.individual-competition-page.loaded .right-side-offers-module,
.right-side-offers-module {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
position: absolute !important;
left: -9999px !important;
}
}
@media (min-width: 1526px) and (max-width: 1690px) {
body.individual-competition-page .right-side-offers-module {
width: 240px !important;
padding: 12px !important;
}
body.individual-competition-page .right-side-offers-module h3 {
font-size: 14px !important;
}
body.individual-competition-page .right-side-offers-module h3 img {
display: none !important;
}
body.individual-competition-page .right-side-offers-module .additional-offer {
margin-bottom: 12px !important;
}
}
@media (min-width: 1590px) {
.right-side-offers-module {
left: calc(100% + 20px);
right: auto;
width: 320px;
padding: 15px;
}
}
@media (min-width: 1530px) and (max-width: 1589px) {
.right-side-offers-module {
left: calc(100% + 10px);
right: auto;
width: 320px;
padding: 15px;
}
}
@media (min-width: 1750px) and (max-width: 1829px) {
.right-side-offers-module {
left: calc(100% + 5px);
right: auto;
width: 240px;
padding: 12px;
}
}
@media (min-width: 1450px) and (max-width: 1639px) {
.jackpot-games-right-module {
width: 240px;
padding: 12px;
}
.jackpot-games-right-module h3 {
font-size: 14px;
margin: 0 0 12px;
}
.jackpot-games-right-module h3 img {
display: none !important; /* Remove logo from h3 - it's now in the additional-offer p */
}
.jackpot-games-right-module .additional-offer {
margin-bottom: 12px;
}
}
/* right-side-offers-module: only visible 1750px+ (individual competition pages) */
@media (min-width: 1750px) and (max-width: 1869px) {
.right-side-offers-module {
width: 240px;
padding: 12px;
}
.right-side-offers-module h3 {
font-size: 14px;
margin: 0 0 12px;
}
.right-side-offers-module h3 img {
display: none !important;
}
.right-side-offers-module .additional-offer {
margin-bottom: 12px;
}
}
/* Jackpot/daily pages only: left positioning. Individual (template) pages never use these. */
@media (min-width: 1600px) {
body:not(.individual-competition-page) .jackpot-games-right-module,
body:not(.individual-competition-page) .right-side-offers-module {
left: calc(50% + 400px + 110px);
}
}
@media (max-width: 1599px) {
body:not(.individual-competition-page) .jackpot-games-right-module,
body:not(.individual-competition-page) .right-side-offers-module {
left: calc(50% + 400px + 100px);
}
}
@media (max-width: 1589px) {
body:not(.individual-competition-page) .jackpot-games-right-module,
body:not(.individual-competition-page) .right-side-offers-module {
left: calc(50% + 400px + 90px);
}
}
@media (max-width: 1579px) {
body:not(.individual-competition-page) .jackpot-games-right-module,
body:not(.individual-competition-page) .right-side-offers-module {
left: calc(50% + 400px + 80px);
}
}
@media (max-width: 1399px) {
.jackpot-games-right-module,
.right-side-offers-module {
display: none;
}
}
.daily-free-games-right-module {
position: absolute;
top: 303px; /* No prize calculator, so start lower than jackpot competitions */
left: calc(50% + 400px + 120px);
width: 320px;
background: #f8f9fa;
border: none;
border-radius: 12px;
padding: 15px;
z-index: 1;
text-align: center;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
}
@media (min-width: 1640px) and (max-width: 9999px) {
.daily-free-games-right-module,
.jackpot-games-right-module {
left: calc(50% + 400px + 110px);
width: 320px;
padding: 15px;
display: block;
}
}
@media (min-width: 1450px) and (max-width: 1639px) {
.daily-free-games-right-module,
.jackpot-games-right-module {
left: calc(50% + 400px + 80px);
width: 240px;
padding: 12px;
display: block;
}
.daily-free-games-right-module h3,
.jackpot-games-right-module h3 {
font-size: 14px;
margin: 0 0 12px;
}
.daily-free-games-right-module h3 img,
.jackpot-games-right-module h3 img {
max-width: 30px;
}
.daily-free-games-right-module .additional-offer,
.jackpot-games-right-module .additional-offer {
margin-bottom: 12px;
}
}
@media (max-width: 1449px) {
.daily-free-games-right-module,
.jackpot-games-right-module,
.right-side-offers-module {
display: none;
}
}
.pq-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.65);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.pq-modal {
animation: 0.35s cubic-bezier(0.4, 1.6, 0.6, 1) slideIn;
background: #ffffff;
padding: 2rem;
border-radius: 0.5rem;
max-width: 90%;
width: 400px;
position: relative;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
}
.pq-dismiss {
position: absolute;
top: 0.5rem;
right: 0.75rem;
background: 0 0;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
.pq-email-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.pq-email-form input {
padding: 0.75rem;
font-size: 1rem;
border: none;
border-radius: 4px;
}
.pq-email-form button {
background: #00cc5a;
color: #20242e;
border: none;
padding: 0.75rem;
font-size: 1rem;
cursor: pointer;
border-radius: 4px;
}
.bookmaker-section {
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md);
background: rgba(255, 255, 255, 0.05);
border-radius: var(--box-border-radius);
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
border: none;
}
.bookmaker-section .bookmaker-header {
display: flex !important;
align-items: center !important;
gap: 15px !important;
margin-bottom: 20px !important;
flex-direction: row !important;
min-height: 40px !important;
}
.bookmaker-section .livescore-header,
.bookmaker-section .super6-header {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 30px !important;
margin-bottom: 20px !important;
flex-direction: row !important;
}
.bookmaker-section .bookmaker-logo {
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 2.5rem !important;
height: 2.5rem !important;
flex-shrink: 0 !important;
order: 1 !important;
padding: 0 !important;
border: none !important;
background: 0 0 !important;
min-width: auto !important;
min-height: auto !important;
box-sizing: border-box !important;
}
.bookmaker-section .bookmaker-logo img {
object-fit: contain !important;
object-fit: contain !important;
max-width: none !important;
max-height: none !important;
}
.bookmaker-section .bookmaker-title {
font-family: var(--font-family) !important;
font-size: var(--font-size-lg) !important;
font-weight: 700 !important;
color: var(--text-color) !important;
margin: 0 !important;
order: 2 !important;
}
.horizontal-game-box {
display: flex;
align-items: center;
border: none;
border-radius: var(--box-border-radius);
padding: var(--spacing-xs);
margin-bottom: var(--spacing-sm);
gap: var(--spacing-sm);
transition: transform 0.2s;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
}
.horizontal-game-box:hover {
transform: translateY(-5px);
}
.horizontal-game-box:last-child,
.seo-content p:last-child {
margin-bottom: 0;
}
.horizontal-game-image {
width: 5.5rem;
height: 100%;
flex-shrink: 0;
border-radius: 0.25rem 0 0 0.25rem;
overflow: hidden;
background: #1a1f3f;
border: 1px solid var(--border-color);
margin: calc(-1 * var(--spacing-xs)) 0 calc(-1 * var(--spacing-xs)) calc(-1 * var(--spacing-xs));
}
.horizontal-game-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 0;
position: relative;
}
.horizontal-game-blurb {
font-size: var(--font-size-sm);
color: var(--text-color);
line-height: 1.3;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-align: left;
width: 100%;
}
.horizontal-timer,
.offers-box h3 {
color: var(--primary-cta);
}
.horizontal-game-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
min-width: 6rem;
justify-content: center;
position: relative;
min-height: 4.5rem;
}
.horizontal-game-actions:not(.jackpot-actions) {
justify-content: center;
align-items: center;
}
.horizontal-game-actions:not(.jackpot-actions) .horizontal-play-button {
margin: auto 0;
}
.horizontal-game-actions.jackpot-actions {
justify-content: center;
height: 100%;
padding: var(--spacing-xs) 0;
}
.horizontal-game-top-border {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 0.25rem;
}
.info-modal,
.seo-content::after {
display: none;
}
.info-modal.show,
.modal-close {
align-items: center;
display: flex;
}
.horizontal-timer.urgent {
color: var(--urgent-color);
}
.horizontal-play-button {
background-color: var(--primary-cta);
color: #000;
border: none;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
text-decoration: none;
text-align: center;
white-space: nowrap;
transition: 0.2s;
margin-top: 0.25rem;
}
.offers-box,
.seo-content {
padding: var(--spacing-sm);
}
.offers-box,
.offers-box h3 {
font-size: var(--font-size-sm);
}
.offers-box {
border: none;
border-radius: var(--box-border-radius);
margin-bottom: var(--spacing-sm);
color: var(--text-color);
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
}
.offers-box p,
.seo-content {
color: #20242e;
}
.seo-content {
margin-top: var(--spacing-lg);
background: rgba(255, 255, 255, 0.02);
border-radius: var(--box-border-radius);
border: none;
font-size: 1.25rem;
line-height: 1.4;
max-height: 10rem;
overflow-y: auto;
position: relative;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
padding: calc(var(--spacing-lg) * 1.2);
}
.seo-content p {
margin: 0 0 var(--spacing-xs) 0;
font-size: 0.75rem;
}
.info-modal {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
}
.info-modal.show {
justify-content: center;
}
.info-modal-content {
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: var(--box-border-radius);
padding: var(--spacing-lg);
max-width: 90vw;
max-height: 80vh;
overflow-y: auto;
position: relative;
box-shadow: 0 0 30px rgba(0, 255, 111, 0.2);
}
.modal-close {
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
background: 0 0;
border: none;
color: var(--text-color);
font-size: 1.5rem;
cursor: pointer;
padding: 0;
width: 2rem;
height: 2rem;
justify-content: center;
border-radius: 50%;
transition: background-color 0.3s;
}
.modal-close:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.info-modal-content h2 {
margin: 0 0 var(--spacing-md) 0;
color: var(--primary-cta);
font-size: var(--font-size-lg);
}
.info-modal-content p {
margin: 0 0 var(--spacing-sm) 0;
line-height: 1.6;
color: var(--text-color);
}
.bookmaker-section .bookmaker-logo-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
@media (min-width: 768px) {
.horizontal-game-blurb,
.offers-box h3 {
font-size: var(--font-size-base);
}
.bookmaker-section {
padding: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.bookmaker-section .bookmaker-header {
justify-content: flex-start !important;
margin-bottom: var(--spacing-lg) !important;
}
.bookmaker-section .bookmaker-logo {
width: 4rem !important;
height: 4rem !important;
background: 0 0 !important;
border: none !important;
}
.bookmaker-section .bookmaker-logo img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
background: 0 0 !important;
}
.bookmaker-section .bookmaker-title {
font-size: var(--font-size-xl) !important;
background: 0 0 !important;
}
.horizontal-game-box {
min-height: 4rem;
padding: var(--spacing-md);
}
.horizontal-game-image {
width: 3rem;
height: 3rem;
border-radius: 0.25rem;
margin: 0;
}
.horizontal-game-blurb {
-webkit-line-clamp: 2;
text-align: left;
}
.horizontal-game-content {
align-items: flex-start;
text-align: left;
}
.horizontal-game-actions .bookmaker-logo {
width: 2.5rem;
height: 2.5rem;
}
.horizontal-game-actions .bookmaker-logo .bookmaker-img {
width: 2rem;
height: 2rem;
}
.horizontal-timer {
font-size: 0.875rem;
}
.horizontal-play-button {
font-size: 0.875rem;
padding: 0.375rem 0.75rem;
}
.offers-box,
.seo-content {
padding: var(--spacing-md);
}
.offers-box p,
.seo-content,
.seo-content p {
font-size: var(--font-size-sm);
}
.seo-content {
line-height: 1.6;
max-height: none;
overflow: visible;
}
.seo-content p {
margin: 0 0 var(--spacing-sm) 0;
}
}
@media (min-width: 1024px) {
.bookmaker-section {
padding: var(--spacing-xl);
}
.horizontal-game-box,
.offers-box,
.seo-content {
padding: var(--spacing-lg);
}
.bookmaker-logo {
width: 5rem;
height: 5rem;
background: 0 0 !important;
border: none !important;
}
.bookmaker-logo img {
width: 4.5rem;
height: 4.5rem;
background: 0 0 !important;
}
.bookmaker-title {
font-size: var(--font-size-2xl);
background: 0 0 !important;
}
.horizontal-game-box {
min-height: 5rem;
}
.horizontal-game-image {
width: 4rem;
height: 4rem;
}
.horizontal-game-blurb,
.offers-box h3 {
font-size: var(--font-size-lg);
}
.offers-box p,
.seo-content,
.seo-content p {
font-size: var(--font-size-base);
}
.horizontal-game-actions .bookmaker-logo {
width: 3rem;
height: 3rem;
}
.horizontal-game-actions .bookmaker-logo .bookmaker-img {
width: 2.5rem;
height: 2.5rem;
}
.horizontal-play-button,
.horizontal-timer {
font-size: 0.9rem !important;
}
.horizontal-game-actions {
margin-right: 1.25rem;
}
.horizontal-play-button {
padding: 0.4rem 0.8rem !important;
}
.horizontal-game-blurb {
font-size: 1.15rem !important;
line-height: 1.5 !important;
padding: 0.25rem 0 !important;
}
.horizontal-game-content {
font-size: 1.1rem !important;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.bookmaker-section .bookmaker-title,
.seo-content {
font-size: 1.15rem !important;
}
.bookmaker-section .bookmaker-logo,
.bookmaker-section .bookmaker-logo-wrapper {
width: 3rem !important;
height: 3rem !important;
}
.seo-content {
line-height: 1.7 !important;
}
}
@media (min-width: 1280px) {
.bookmaker-section {
padding: var(--spacing-2xl);
margin-bottom: var(--spacing-2xl);
}
.bookmaker-logo {
width: 6rem;
height: 6rem;
background: 0 0 !important;
border: none !important;
}
.bookmaker-logo img {
width: 5.5rem;
height: 5.5rem;
background: 0 0 !important;
}
.bookmaker-title {
font-size: var(--font-size-3xl);
background: 0 0 !important;
}
.horizontal-game-box {
min-height: 6rem;
padding: var(--spacing-xl);
}
.horizontal-game-image {
width: 5rem;
height: 5rem;
}
.horizontal-game-blurb,
.offers-box h3 {
font-size: var(--font-size-xl);
}
.horizontal-play-button,
.horizontal-timer,
.offers-box p,
.seo-content,
.seo-content p {
font-size: var(--font-size-lg);
}
.horizontal-game-actions .bookmaker-logo {
width: 3.5rem;
height: 3.5rem;
}
.horizontal-game-actions .bookmaker-logo .bookmaker-img {
width: 3rem;
height: 3rem;
}
.horizontal-play-button {
padding: 0.625rem 1.25rem;
}
.offers-box,
.seo-content {
padding: var(--spacing-xl);
}
}
@media (max-width: 480px) {
.betting-sites-page .horizontal-game-box {
padding: 0.5rem !important;
margin-bottom: 0.5rem !important;
gap: 0.375rem !important;
}
.betting-sites-page .horizontal-game-box .main-row {
gap: 0.5rem !important;
}
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-image,
.betting-sites-page .horizontal-game-image {
width: 2.5rem !important;
height: 2.5rem !important;
}
.betting-sites-page .horizontal-game-blurb,
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-blurb {
font-size: 0.6875rem !important;
line-height: 1.2 !important;
}
.betting-sites-page .horizontal-game-box .claim-button,
.betting-sites-page .horizontal-game-box .dropdown-toggle {
padding: 0.375rem 0.75rem !important;
border-radius: 0.25rem !important;
font-size: 0.6875rem !important;
min-width: 4.5rem !important;
}
.betting-sites-page .horizontal-game-box .dropdown-content {
gap: 0.375rem !important;
padding-top: 0.375rem !important;
}
.betting-sites-page .horizontal-game-terms {
font-size: 0.4375rem !important;
padding: 0.375rem !important;
}
.bookmaker-section {
padding: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.bookmaker-section .bookmaker-header,
.bookmaker-section .livescore-header,
.bookmaker-section .super6-header {
gap: 8px !important;
}
.bookmaker-section .bookmaker-title {
white-space: nowrap !important;
font-size: 1rem !important;
overflow: hidden;
text-overflow: ellipsis;
max-width: 70vw;
}
.bookmaker-section .bookmaker-logo-wrapper {
border-radius: 8px;
}
.bookmaker-section .bookmaker-logo img {
border-radius: 0 !important;
}
.bookmaker-title {
background: 0 0 !important;
}
.horizontal-game-box {
min-height: 4rem;
padding: var(--spacing-xs);
gap: var(--spacing-xs);
}
.horizontal-game-image {
width: 4.5rem;
height: 100%;
margin: calc(-1 * var(--spacing-xs)) 0 calc(-1 * var(--spacing-xs)) calc(-1 * var(--spacing-xs));
}
.horizontal-game-blurb {
font-size: 0.75rem;
-webkit-line-clamp: 3;
}
.horizontal-game-actions .bookmaker-logo {
width: 1.5rem;
height: 1.5rem;
}
.horizontal-game-actions .bookmaker-logo .bookmaker-img {
width: 1rem;
height: 1rem;
}
.horizontal-timer,
.offers-box p {
font-size: 0.625rem;
}
.horizontal-play-button {
font-size: 0.625rem;
padding: 0.125rem 0.375rem;
}
.offers-box,
.seo-content {
padding: var(--spacing-xs);
}
.offers-box h3 {
font-size: 0.75rem;
}
.seo-content {
font-size: 0.625rem;
line-height: 1.3;
max-height: 6rem;
}
.seo-content p {
font-size: 0.625rem;
margin: 0 0 var(--spacing-xs) 0;
}
}
.bookmaker-section .bookmaker-logo,
.bookmaker-section .bookmaker-logo-wrapper {
border-radius: 12px !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.bookmaker-section .bookmaker-logo img,
.bookmaker-section .bookmaker-logo-wrapper img {
border-radius: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
display: block !important;
}
@media (min-width: 481px) {
.seo-content,
.seo-content p {
font-size: 0.75rem !important;
}
.seo-content {
line-height: 1.4 !important;
}
.horizontal-game-blurb {
-webkit-line-clamp: unset !important;
display: block;
overflow: visible !important;
text-overflow: unset !important;
white-space: normal !important;
}
}
@media (min-width: 768px) {
.horizontal-game-image {
width: 6rem !important;
height: 100% !important;
}
.bookmaker-section {
padding: var(--spacing-lg) !important;
margin-bottom: var(--spacing-xl) !important;
}
.horizontal-game-box {
margin-bottom: var(--spacing-md) !important;
}
}
@media (min-width: 1024px) {
.bookmaker-section {
padding: var(--spacing-md) !important;
margin-bottom: var(--spacing-lg) !important;
}
.horizontal-game-box {
margin-bottom: var(--spacing-sm) !important;
}
.horizontal-game-image {
width: 7rem !important;
margin-left: 0;
}
.bookmaker-content {
padding-left: var(--horizontal-gap);
padding-right: var(--horizontal-gap);
}
.horizontal-game-content {
padding-left: 0;
padding-right: 0;
}
.horizontal-game-actions {
margin-right: 0;
margin-left: auto;
}
}
.bookmaker-content {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
padding-left: var(--horizontal-gap);
padding-right: var(--horizontal-gap);
}
.horizontal-game-box {
width: 100%;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
border-radius: var(--box-border-radius);
padding: var(--spacing-xs);
margin-bottom: var(--spacing-sm);
min-height: 4.5rem;
gap: var(--spacing-sm);
position: relative;
}
.horizontal-game-actions,
.horizontal-game-content {
padding-right: 0;
padding-left: 0;
}
.horizontal-game-image {
margin-left: 0;
}
.prize-calculator-wrapper {
width: 100%;
background-color: #00cc5a;
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
padding: var(--spacing-sm) var(--spacing-sm);
margin: 0 auto;
text-align: center;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 3rem;
}
/* Prize calculator bar above hero (secondary-nav style) - full bleed */
.prize-calculator-wrapper.prize-calculator-bar {
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
box-sizing: border-box !important;
}
.main-competition-image,
.main-competition-top-border {
border-bottom: 1px solid #f0f0f0;
box-sizing: border-box;
}
#prize-calculator {
font-weight: 700;
color: #20242e;
font-size: clamp(0.6rem, 3.5vw, 1rem);
line-height: 1.5;
padding: 0;
display: inline-block;
width: auto;
overflow: visible;
text-overflow: unset;
white-space: nowrap;
word-wrap: normal;
overflow-wrap: normal;
hyphens: auto;
}
.coming-soon-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
padding: var(--spacing-md);
margin-bottom: 40vh;
}
.competition-layout,
.game-hero-section {
flex-direction: column;
gap: 1rem;
position: relative;
display: flex;
/* Pre-size to prevent layout shift - minimum height based on main competition box */
min-height: 400px; /* Prevents flash during loading */
}
.competition-layout {
/* Pre-size to prevent layout shift */
min-height: 400px; /* Ensures consistent height prevents CLS */
}
.coming-soon-box {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
border-radius: var(--box-border-radius);
padding: var(--spacing-lg);
text-align: center;
max-width: 30rem;
width: 100%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
margin: 0 auto;
}
.coming-soon-box h3 {
font-size: clamp(1.5rem, 5vw, 2.5rem);
font-weight: 700;
color: var(--primary-cta);
margin: 0 0 var(--spacing-md) 0;
line-height: 1.2;
}
.coming-soon-box p {
font-size: clamp(1rem, 3vw, 1.25rem);
color: var(--text-color);
margin: 0 0 var(--spacing-sm) 0;
line-height: 1.5;
opacity: 0.9;
}
.coming-soon-box p:last-child {
margin-bottom: 0;
font-size: clamp(0.875rem, 2.5vw, 1rem);
opacity: 0.7;
}
body:has(.coming-soon-container) footer {
margin-top: auto;
}
.footer-placeholder {
height: 40vh;
min-height: 300px;
}
.page-title {
font-size: 1.25rem;
font-weight: 700;
color: #022e4a;
margin: 1rem 0;
text-align: left;
padding: 0 1rem;
}
.game-hero-section {
margin: 0 auto 0;
padding: 0 1rem;
max-width: 1100px;
box-sizing: border-box;
/* Pre-size to prevent layout shift - minimum height based on main competition box */
min-height: 400px; /* Prevents flash during loading */
}
.competition-layout {
align-items: center;
/* Pre-size to prevent layout shift */
min-height: 400px; /* Ensures consistent height prevents CLS */
}
/* Skeleton state: same min-height as loaded so no bottom flash when .loading is removed (no aspect-ratio) */
.main-competition-box.loading {
width: 100% !important;
min-height: 320px !important; /* Match loaded state – no pulsating/jump */
height: auto !important;
}
.main-competition-box {
background: #ffffff !important; /* Ensure background is set from start */
transition: background 0.3s ease, box-shadow 0.3s !important; /* No opacity – avoids flash when .loading removed */
border: none !important;
border-radius: 0.75rem !important;
overflow: hidden !important;
width: 100% !important;
max-width: 18.75rem !important;
height: auto !important; /* Flex content determines height – no fixed 25rem */
display: flex !important;
flex-direction: column !important;
transition: transform 0.3s, box-shadow 0.3s !important;
box-sizing: border-box !important;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.06), 0 2px 6px rgba(2, 46, 74, 0.04) !important;
position: relative !important;
min-height: 320px !important; /* Prevent layout shift – breakpoints override per viewport */
visibility: visible !important;
opacity: 1 !important;
}
/* Skeleton styles for main-competition-box elements - uses same structure as loaded content */
.main-competition-image.skeleton-shimmer {
background: #e8e8e8 !important; /* Match later rule; no grey corners */
background-image: linear-gradient(90deg, rgba(240, 240, 240, 0.3) 25%, rgba(224, 224, 224, 0.5) 50%, rgba(240, 240, 240, 0.3) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
min-height: 11.25rem !important;
border-radius: 0 !important; /* Card clips; no rounded corners on wrapper – match jackpot */
}
.main-competition-blurb.skeleton-shimmer {
background: #e0e0e0 !important;
background-image: linear-gradient(90deg, rgba(240, 240, 240, 0.3) 25%, rgba(224, 224, 224, 0.5) 50%, rgba(240, 240, 240, 0.3) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
color: transparent !important;
min-height: 60px !important;
border-radius: 4px !important;
}
.main-play-now-button.skeleton-shimmer {
background: #d0d0d0 !important;
background-image: linear-gradient(90deg, rgba(220, 220, 220, 0.3) 25%, rgba(200, 200, 200, 0.5) 50%, rgba(220, 220, 220, 0.3) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
color: transparent !important;
min-height: 38px !important;
min-width: 120px !important;
border-radius: 4px !important;
}
/* Skeleton loader for competition box */
.competition-skeleton {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 0.75rem;
z-index: 1;
opacity: 0; /* Hidden by default */
visibility: hidden; /* Hidden by default */
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.competition-skeleton.loaded {
display: none;
}
/* Show skeleton only if content hasn't loaded yet (after a delay) */
body.page-transitioning:not(.loaded) .competition-skeleton,
body:not(.loaded) .competition-skeleton {
opacity: 1;
visibility: visible;
}
.competition-skeleton .skeleton-image {
width: 100%;
height: 11.25rem;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
}
.competition-skeleton .skeleton-top-border {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
background: #ffffff;
min-height: 50px;
}
.competition-skeleton .skeleton-logo {
width: 70px;
height: 30px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
}
.competition-skeleton .skeleton-timer {
width: 80px;
height: 20px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
}
.competition-skeleton .skeleton-bottom {
flex: 1;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
background: #ffffff;
}
.competition-skeleton .skeleton-line {
width: 100%;
height: 12px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
}
.competition-skeleton .skeleton-line.short {
width: 70%;
}
.competition-skeleton .skeleton-button {
width: 120px;
height: 36px;
background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
margin-top: auto;
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Banner skeleton animation - reuse existing skeleton-loading */
.pq-banner-skeleton {
animation: skeleton-loading 1.5s ease-in-out infinite;
}
.main-competition-box:hover {
transform: translateY(-0.3125rem);
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.12), 0 3px 10px rgba(2, 46, 74, 0.08) !important; /* Doubled shadow for better contrast */
}
/* Match jackpot .comp-box-image: no border-radius on wrapper, no grey – card overflow clips image to rounded top only */
.main-competition-image {
position: relative;
width: 100%;
aspect-ratio: 5 / 3;
min-height: 11.25rem;
padding: 0;
margin: 0;
line-height: 0;
font-size: 0;
flex-shrink: 0;
display: block;
overflow: hidden;
border: none;
border-radius: 0 !important;
background: transparent !important;
}
.main-competition-image.skeleton-shimmer {
background: #e8e8e8 !important; /* Skeleton only */
border-radius: 0 !important;
}
.main-competition-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
margin: 0;
padding: 0;
border: none;
border-radius: 0 !important;
}
.main-competition-top-border {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.625rem 0.9375rem;
height: 2.5rem;
flex-shrink: 0;
}
.bookmaker-logo-grid,
.main-bookmaker-logo {
height: auto;
width: auto;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--text-color);
z-index: 1;
min-width: 3.75rem; /* Reserve space for logo to prevent CLS */
min-height: 2rem; /* Reserve space for logo to prevent CLS */
}
.main-bookmaker-logo .logo-wrapper {
display: inline-block;
overflow: hidden;
border-radius: 0.3125rem;
min-width: 3.75rem; /* Reserve space for logo to prevent CLS */
min-height: 2rem; /* Reserve space for logo to prevent CLS */
width: 3.75rem; /* Fixed width to prevent CLS */
height: 2rem; /* Fixed height to prevent CLS */
}
.main-bookmaker-logo img {
max-width: 3.75rem;
width: 3.75rem; /* Fixed width to prevent CLS */
height: auto;
min-height: 2rem; /* Reserve space to prevent CLS */
aspect-ratio: 2/1; /* Maintain aspect ratio */
object-fit: contain;
display: block;
border-radius: 0;
}
.main-timer {
min-width: 7.5rem;
text-align: right;
font-weight: 700;
font-size: var(--fs-base);
color: #00cc5a;
}
.competition-box-grid .timer.urgent,
.horizontal-timer.urgent,
.main-timer.urgent {
color: rgb(204, 8, 0);
}
/* Fixed dimensions to match jackpot-competitions .comp-box – prevents bottom flash/CLS */
.main-competition-bottom-border {
padding: 0.9375rem;
display: flex;
flex-direction: column;
gap: 0.3125rem;
flex-grow: 1;
justify-content: space-between;
box-sizing: border-box;
min-height: 100px; /* Same as .comp-box-bottom default */
}
.individual-competition-page .main-competition-box {
min-height: 320px; /* Same as .comp-box default */
}
.main-play-now-button {
background-color: var(--primary-cta);
color: #000 !important;
border: none;
border-radius: 0.25rem;
padding: 0.75rem 1.25rem;
cursor: pointer;
font-weight: 700;
text-align: center;
text-decoration: none;
display: block;
width: calc(100% - 1.875rem);
margin: 0.3125rem 0.9375rem 0;
box-sizing: border-box;
transition: background-color 0.3s;
font-family: var(--font-family);
}
/* Match jackpot-competitions / daily comp-box: button at bottom of box */
.individual-competition-page .main-competition-box .main-play-now-button {
margin-top: auto !important;
}
/* Tablet 450–599: match .comp-box */
@media (min-width: 450px) and (max-width: 599px) {
.individual-competition-page .main-competition-box { min-height: 340px !important; }
.individual-competition-page .main-competition-bottom-border { min-height: 115px !important; padding: 0.9rem !important; }
.individual-competition-page .main-competition-top-border { min-height: 44px !important; }
}
/* Tablet 600–767: match .comp-box */
@media (min-width: 600px) and (max-width: 767px) {
.individual-competition-page .main-competition-box { min-height: 380px !important; }
.individual-competition-page .main-competition-bottom-border { min-height: 130px !important; padding: 1.1rem !important; }
.individual-competition-page .main-competition-top-border { min-height: 48px !important; }
}
/* Desktop 768–1023: match .comp-box */
@media (min-width: 768px) and (max-width: 1023px) {
.individual-competition-page .main-competition-box { min-height: 360px !important; }
.individual-competition-page .main-competition-bottom-border { min-height: 150px !important; }
.individual-competition-page .main-competition-top-border { min-height: 50px !important; }
}
/* Desktop (1024px+): match jackpot comp-box dimensions so See Game Page button sits at bottom of box */
@media (min-width: 1024px) {
.individual-competition-page .main-competition-box {
min-height: 380px !important; /* Same as .comp-box at 1024px */
height: auto !important; /* Allow flex children to determine height */
}
.individual-competition-page .main-competition-bottom-border {
padding: 1.25rem !important; /* Same as .comp-box-bottom at 1024px */
min-height: 160px !important; /* Same as .comp-box-bottom */
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
.individual-competition-page .main-competition-top-border {
min-height: 50px !important; /* Same as .comp-box-top at 1024px */
flex-shrink: 0 !important;
}
}
.main-play-now-button:hover,
.play-now-button-grid:hover {
background-color: #00cc57;
}
.main-competition-blurb {
margin: 0;
text-align: center;
font-size: 1rem;
color: #20242e;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.25rem 0.9375rem 0.9375rem;
min-height: 2.5rem;
line-height: 1.25rem;
overflow: hidden;
box-sizing: border-box;
font-weight: 700;
}
.key-terms-sidebar,
.navigation-box,
.offers-box {
padding: 0.5rem;
display: flex;
box-sizing: border-box;
}
/* CLS Fix: Dynamic sizing that snaps to page dimension - REVERTED to original behavior */
@media (min-width: 768px) {
.key-terms-sidebar,
.navigation-box {
min-height: 200px; /* Reserve space to prevent CLS */
height: auto; /* Allow dynamic growth */
}
.key-terms-sidebar ul,
.navigation-box ul {
min-height: 150px; /* Reserve space for list content */
height: auto; /* Allow dynamic growth */
}
}
/* Mobile: Smaller fixed height */
@media (max-width: 767px) {
.key-terms-sidebar,
.navigation-box {
min-height: 120px; /* Smaller on mobile */
height: auto; /* Allow growth on mobile */
}
.key-terms-sidebar ul,
.navigation-box ul {
min-height: 80px; /* Smaller list on mobile */
}
}
.right-column {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 100%;
}
.nav-key-row {
display: flex;
flex-direction: row;
gap: 1rem;
justify-content: center;
align-items: stretch;
width: 100%;
max-width: 100%;
}
.key-terms-sidebar,
.navigation-box {
background: #ffffff;
border: none;
border-radius: 0.75rem;
flex: 1;
min-width: 0;
flex-direction: column;
justify-content: flex-start; /* Changed from space-between to flex-start */
align-items: flex-start;
overflow: visible !important; /* Changed from hidden - allow content to show */
max-height: none !important; /* Remove max-height restriction */
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
}
.key-terms-sidebar h3,
.navigation-box h3 {
font-size: 12px;
margin: 0 0 0.3rem;
color: #022e4a;
width: 100%;
overflow-wrap: break-word;
font-weight: 700;
flex-shrink: 0;
line-height: 1.1;
}
/* Individual competition pages: Jump to Section & Key Terms headers = 16px */
.individual-competition-page .navigation-box h3,
.individual-competition-page .key-terms-sidebar h3 {
font-size: 16px !important;
}
.key-terms-sidebar ul,
.navigation-box ul {
width: 100%;
padding: 0;
margin: 0;
list-style: none;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.2rem;
overflow: visible;
min-height: 0;
}
.key-terms-sidebar li {
font-size: 12px;
margin-bottom: 0;
overflow-wrap: break-word;
word-break: break-word;
line-height: 1.2;
color: #20242e;
flex-shrink: 0;
width: 100%;
}
.navigation-box li {
font-size: 12px;
margin-bottom: 0;
overflow-wrap: break-word;
word-break: break-word;
line-height: 1.2;
color: #20242e;
flex-shrink: 0;
width: 100%;
font-weight: bold;
}
.navigation-box a {
color: var(--primary-cta);
text-decoration: none;
font-size: inherit;
line-height: 1.2;
width: 100%;
overflow-wrap: break-word;
}
.key-terms-sidebar a:hover,
.more-from-bookmaker h2 a:hover,
.navigation-box a:hover {
color: #00cc57;
}
.key-terms-sidebar li:before {
content: none;
}
.key-terms-sidebar p {
font-size: 12px;
color: var(--subtle-gray);
margin: 0.2rem 0;
line-height: 1.2;
width: 100%;
}
.key-terms-sidebar a {
color: #00cc5a;
text-decoration: none;
}
.offers-box {
width: 100%;
max-width: 100%;
background: #ffffff;
transition: background 0.3s ease, opacity 0.4s ease;
border: 1px solid var(--primary-cta);
border-radius: 0.75rem;
text-align: center;
color: var(--text-color);
overflow: visible;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 1.5rem;
max-height: 1.5rem;
gap: 0.05rem;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
opacity: 1;
transition: opacity 0.3s ease-in-out;
position: relative; /* Needed for absolute positioned skeleton */
}
.competition-image-grid,
.competition-top-border-grid {
position: relative;
border-bottom: 1px solid #f0f0f0;
}
.offers-box h3 {
margin: 0 0 0.3rem;
color: var(--primary-cta);
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.offers-box p {
margin: 0;
color: var(--subtle-gray);
font-size: 12px;
line-height: 1.2;
flex-shrink: 0;
font-weight: bold;
}
.content-section li,
.content-section p {
line-height: 1.6 !important;
color: #20242e !important;
}
.internal-linking-section {
gap: 0.5rem;
margin-top: 4rem !important; /* Increased from 3rem for more space above */
margin-bottom: 3rem !important; /* Increased from 2rem for more space below */
display: flex;
flex-direction: column;
/* Match homepage .games-section padding */
padding-left: var(--content-side-padding, 1rem) !important;
padding-right: var(--content-side-padding, 1rem) !important;
box-sizing: border-box !important;
}
.carousel-wrapper {
width: 100%;
position: relative;
opacity: 1;
transition: opacity 0.3s ease-in-out;
border: none !important;
border-bottom: none !important;
box-sizing: border-box !important;
}
.carousel-wrapper.loaded {
opacity: 1;
}
.carousel-wrapper h2 {
font-size: 1.563rem !important; /* Match global h2 desktop (~25px) */
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--text-color);
width: 100%;
padding-right: 0 !important;
box-sizing: border-box;
}
/* Mobile: Match global h2 mobile size and align with carousel boxes */
@media (max-width: 767px) {
.carousel-wrapper h2 {
font-size: 1.375rem !important; /* Match global h2 mobile (~22px) */
padding-left: 1rem !important; /* Match carousel boxes - 1.5rem gap from page border */
}
}
.carousel-wrapper h2 a {
display: inline-block;
margin-left: 0.5rem;
font-size: 0.75rem;
font-weight: 400;
color: var(--primary-cta);
text-decoration: none;
}
.final-cta a,
.more-from-bookmaker h2 a {
text-decoration: none !important;
}
.grid-wrapper {
display: grid;
grid-template-columns: repeat(3, 140px) !important;
gap: 1rem !important;
margin: 0 auto !important;
justify-content: center !important;
}
.competition-blurb-grid,
.competition-bottom-border-grid,
.competition-box-grid,
.competition-image-grid,
.competition-top-border-grid {
display: flex;
box-sizing: border-box;
}
.competition-box-grid {
background: transparent !important; /* No background - only image and top border visible */
border: none !important;
border-radius: 0.375rem;
overflow: hidden;
width: 140px !important;
height: 105px !important; /* Height for image + top border only */
flex-direction: column;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
transition: opacity 0.5s ease-in-out;
opacity: 1;
padding: 0 !important; /* No padding - clean edges */
}
/* Swiper.js Carousel Styles - Optimized for Smoothness */
.swiper {
width: 100%;
padding: 4px 8px !important;
box-sizing: border-box;
overflow: hidden; /* Hidden for scrolling, but shadows bleed into padding */
/* GPU acceleration for smooth scrolling */
will-change: transform;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* Mobile: Keep padding but allow shadows to bleed into it - free-standing boxes */
@media (max-width: 767px) {
.swiper-jackpot,
.swiper-daily {
padding-left: 12px !important; /* Keep left padding for content spacing - shadows bleed into it */
padding-right: 12px !important; /* Keep right padding for content spacing - shadows bleed into it */
padding-top: 12px !important; /* Top padding - shadows bleed into it */
padding-bottom: 12px !important; /* Bottom padding - shadows bleed into it */
overflow: visible !important; /* Allow shadows to bleed into padding area */
}
.swiper-jackpot .swiper-wrapper,
.swiper-daily .swiper-wrapper {
overflow: visible !important; /* Ensure wrapper doesn't clip shadows */
}
}
.swiper-wrapper {
display: flex;
align-items: stretch;
/* GPU acceleration */
will-change: transform;
transform: translateZ(0);
-webkit-transform: translateZ(0);
/* Smooth scrolling on iOS */
-webkit-overflow-scrolling: touch;
overflow: visible !important; /* Allow shadows to bleed - mobile override below */
}
/* Mobile: Ensure wrapper allows shadows to bleed */
@media (max-width: 767px) {
.swiper-jackpot .swiper-wrapper,
.swiper-daily .swiper-wrapper {
overflow: visible !important; /* Shadows bleed into padding area */
}
}
.swiper-slide {
flex-shrink: 0;
height: auto;
/* Don't override margin-right - let Swiper spaceBetween handle spacing */
/* Prevent layout shifts */
will-change: transform;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* Game items inside swiper */
.swiper-slide .game-item {
width: 100%;
box-sizing: border-box;
/* Prevent any transitions that could cause jitter */
transition: none;
/* GPU acceleration */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* Homepage Swiper Styles - Mobile Only */
@media (max-width: 767px) {
.swiper-jackpot .swiper-slide,
.swiper-daily .swiper-slide {
width: auto !important;
flex: 0 0 calc(66.67vw - 0.5rem) !important;
max-width: 280px !important;
min-width: 260px !important;
/* Don't override margin-right - let Swiper spaceBetween handle spacing */
}
}
/* Individual Page Swiper Styles - Mobile Only */
@media (max-width: 767px) {
.swiper-individual-jackpot .swiper-slide,
.swiper-individual-daily .swiper-slide {
width: auto !important;
flex: 0 0 calc(66.67vw - 0.5rem) !important;
max-width: 280px !important;
min-width: 260px !important;
/* Don't override margin-right - let Swiper spaceBetween handle spacing (7px) */
}
}
/* Desktop Styles - Static Grid (No Swiper) */
@media (min-width: 920px) {
/* Disable Swiper on desktop - use static grid instead */
.swiper-jackpot,
.swiper-daily,
.swiper-individual-jackpot,
.swiper-individual-daily {
overflow: visible !important;
touch-action: none !important;
user-select: none !important;
}
/* Hide scrollbars/carousels on desktop until content is loaded - prevent flash */
body.page-transitioning:not(.loaded) .swiper-jackpot,
body.page-transitioning:not(.loaded) .swiper-daily,
body.page-transitioning:not(.loaded) .swiper-individual-jackpot,
body.page-transitioning:not(.loaded) .swiper-individual-daily,
body:not(.loaded) #loading-overlay:not(.hidden) ~ .main-content .swiper-jackpot,
body:not(.loaded) #loading-overlay:not(.hidden) ~ .main-content .swiper-daily {
opacity: 0 !important;
visibility: hidden !important;
}
/* Do NOT hide .games-section (homepage reusable carousel) – keep visible from first paint to prevent CLS jump */
/* Show when loaded */
body.loaded .swiper-jackpot,
body.loaded .swiper-daily,
body.loaded .swiper-individual-jackpot,
body.loaded .swiper-individual-daily,
body.loaded .games-section,
#loading-overlay.hidden ~ .main-content .swiper-jackpot,
#loading-overlay.hidden ~ .main-content .swiper-daily,
#loading-overlay.hidden ~ .main-content .games-section {
opacity: 1 !important;
visibility: visible !important;
transition: opacity 0.2s ease-in, visibility 0.2s ease-in !important;
}
.swiper-jackpot .swiper-wrapper,
.swiper-daily .swiper-wrapper,
.swiper-individual-jackpot .swiper-wrapper,
.swiper-individual-daily .swiper-wrapper {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 7px !important;
transform: none !important;
width: 100% !important;
padding: 4px 8px !important;
box-sizing: border-box !important;
}
.swiper-jackpot .swiper-slide,
.swiper-daily .swiper-slide,
.swiper-individual-jackpot .swiper-slide,
.swiper-individual-daily .swiper-slide {
width: 100% !important;
flex: none !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
}
/* Ensure game-item styling works on desktop */
.swiper-jackpot .game-item,
.swiper-daily .game-item,
.swiper-individual-jackpot .game-item,
.swiper-individual-daily .game-item {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
}
/* Individual page carousels use EXACT same structure as homepage */
/* Add left/right padding to match homepage horizontal-track */
/* Uses negative margin to break out of container, then padding to offset content */
.internal-linking-section .horizontal-track {
margin-left: calc(var(--content-side-padding, 1rem) * -1) !important;
margin-right: calc(var(--content-side-padding, 1rem) * -1) !important;
padding-left: var(--content-side-padding, 1rem) !important;
padding-right: var(--content-side-padding, 1rem) !important;
}
.internal-linking-section .horizontal-scroll-container {
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
overscroll-behavior-x: contain !important; /* Prevent scrolling past content */
width: 100% !important;
box-sizing: border-box !important;
padding: 0 !important;
margin: 0 !important;
}
.internal-linking-section .horizontal-scroll-container::-webkit-scrollbar {
display: none !important;
}
.internal-linking-section .games-scroll {
display: flex !important;
gap: 0.5rem !important;
cursor: grab !important;
width: max-content !important;
padding: 4px 8px !important;
box-sizing: border-box !important;
}
.internal-linking-section .games-scroll.active {
cursor: grabbing !important;
}
/* Individual page game-item uses EXACT same styling as homepage */
.internal-linking-section .game-item {
flex: 0 0 calc(66.67vw - 0.5rem) !important;
max-width: 280px !important;
min-width: 260px !important;
cursor: pointer !important;
box-shadow: 0 2px 8px rgba(2, 46, 74, 0.08), 0 1px 4px rgba(2, 46, 74, 0.05) !important; /* Slightly more visible shadow */
overflow: hidden !important;
border-radius: 8px !important;
border: none !important;
margin-bottom: 0 !important;
}
/* Ensure game-image and game-top-border match homepage exactly */
/* CRITICAL: Ensure blog page skeletons use grey background (not dark blue) - override any dark colors */
.blog-page .game-item.skeleton-shimmer .game-image,
.blog-page .game-item.skeleton-shimmer .game-top-border,
.blog-page .skeleton-shimmer.game-image,
.blog-page .skeleton-shimmer.game-top-border,
.internal-linking-section .game-item.skeleton-shimmer .game-image,
.internal-linking-section .skeleton-shimmer.game-image {
background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 2s ease-in-out infinite !important;
}
.internal-linking-section .game-item .game-image {
position: relative !important;
width: 100% !important;
height: 160px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
background: #1a1f3f !important;
border: none !important;
}
.internal-linking-section .game-item .game-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.internal-linking-section .game-item .game-top-border {
border: none !important;
border-bottom: none !important;
background: #ffffff !important;
display: flex !important;
justify-content: space-between !important; /* Logo left, timer right */
align-items: center !important;
flex-direction: row !important; /* Ensure horizontal layout */
padding: 0.5rem 0.75rem !important; /* Match homepage padding */
}
/* Green hover effect - EXACT same as homepage */
@media (hover: hover) {
.internal-linking-section .game-item:hover .game-top-border {
background: rgba(0, 204, 90, 0.08) !important;
box-shadow: 0 1px 3px rgba(0, 204, 90, 0.05) !important; /* Super faint shadow */
}
}
/* Remove transitions from swiper game-items for maximum smoothness */
.swiper .game-item,
.swiper-slide .game-item,
.internal-linking-section .swiper .game-item {
transition: none !important;
transform: translate3d(0, 0, 0) !important;
-webkit-transform: translate3d(0, 0, 0) !important;
}
.internal-linking-section .game-image {
position: relative !important;
width: 100% !important;
height: 160px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
background: #1a1f3f !important;
}
.internal-linking-section .game-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.internal-linking-section .game-top-border {
padding: 0.5rem 0.75rem !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
min-height: 35px !important;
background: transparent !important;
border-radius: 0 0 8px 8px !important;
border: none !important;
border-bottom: none !important;
}
.internal-linking-section .game-bookmaker-logo {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.internal-linking-section .game-bookmaker-logo img {
width: 70px !important;
height: auto !important;
max-height: 35px !important;
object-fit: contain !important;
}
.internal-linking-section .game-timer-text {
color: #00cc5a !important;
font-size: 14px !important;
font-weight: 700 !important;
text-align: right !important;
}
/* Desktop (920px+) - EXACT homepage logic */
@media (min-width: 920px) {
.internal-linking-section {
display: flex !important;
flex-direction: column !important; /* Stack carousels vertically */
gap: 2rem !important;
max-width: 1100px !important;
margin: 3rem auto 2rem !important;
padding: 0 1rem !important;
}
.internal-linking-section .carousel-wrapper {
width: 100% !important;
}
/* Center header over the middle of the 4 boxes */
.internal-linking-section .carousel-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
}
.internal-linking-section .carousel-wrapper h2 {
padding-right: 1rem !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* EXACT homepage desktop carousel logic */
.internal-linking-section .horizontal-scroll-container {
overflow: hidden !important;
width: 100% !important;
display: block !important;
}
.internal-linking-section .games-scroll {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important; /* 4 columns like homepage desktop */
gap: 7px !important;
width: 100% !important;
padding: 4px 8px !important;
box-sizing: border-box !important;
}
/* EXACT homepage game-item styling - using responsive clamps like homepage */
.internal-linking-section .game-item {
width: 100% !important;
cursor: pointer !important;
transition: transform 0.2s !important;
box-shadow: none !important;
border-radius: 8px !important;
overflow: hidden !important;
display: block !important;
}
/* Responsive image height matching homepage (140px-160px) */
.internal-linking-section .game-image {
height: clamp(140px, calc(140px + (160 - 140) * ((100vw - 920px) / (1150 - 920))), 160px) !important;
}
/* Responsive top border padding matching homepage */
.internal-linking-section .game-top-border {
padding: clamp(0.4rem, calc(0.4rem + (0.5 - 0.4) * ((100vw - 920px) / (1150 - 920))), 0.5rem) clamp(0.6rem, calc(0.6rem + (0.75 - 0.6) * ((100vw - 920px) / (1150 - 920))), 0.75rem) !important;
min-height: clamp(30px, calc(30px + (35 - 30) * ((100vw - 920px) / (1150 - 920))), 35px) !important;
background: transparent !important;
border-radius: 0 0 8px 8px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
/* Responsive logo sizing matching homepage (60px-70px width, 30px-35px height) */
.internal-linking-section .game-bookmaker-logo img {
width: clamp(60px, calc(60px + (70 - 60) * ((100vw - 920px) / (1150 - 920))), 70px) !important;
max-height: clamp(30px, calc(30px + (35 - 30) * ((100vw - 920px) / (1150 - 920))), 35px) !important;
}
.internal-linking-section .game-timer-text {
font-size: 14px !important;
color: #00cc5a !important;
font-weight: 700 !important;
}
}
.competition-image-grid,
.competition-image-grid img {
width: 100%;
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
.competition-box-grid:hover {
transform: translateY(-0.1875rem);
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
}
.competition-image-grid {
height: 84px !important;
background-color: #1a1f3f;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 0.375rem 0.375rem 0 0; /* Rounded top corners only */
}
.competition-image-grid img {
height: 100%;
object-fit: fill;
display: block;
}
.competition-top-border-grid {
justify-content: space-between;
align-items: center;
padding: 6px 9px !important;
height: 21px !important;
flex-shrink: 0;
border-bottom: none !important; /* No bottom border - matches homepage style */
border-radius: 0 !important; /* Rectangle - no corner rounding */
background: #fff; /* White background for top border section */
}
.bookmaker-logo-grid .logo-wrapper {
display: inline-block;
overflow: hidden;
border-radius: 0.15625rem;
}
.bookmaker-logo-grid img {
max-width: 30px !important;
height: auto;
object-fit: contain;
display: block;
border-radius: 0;
}
/* Bottom border completely removed on desktop - matches homepage style */
.competition-bottom-border-grid {
display: none !important; /* Completely removed */
}
.play-now-button-grid {
padding: 6px 9px !important;
font-size: 8px !important;
font-weight: 700;
width: calc(100% - 18px) !important;
border-radius: 0.25rem;
box-sizing: border-box;
text-align: center;
background-color: var(--primary-cta) !important;
color: #000 !important;
text-decoration: none;
border: none;
cursor: pointer;
transition: background-color 0.2s;
margin: 2px 9px 0 !important;
visibility: visible !important;
opacity: 1 !important;
display: inline-block !important;
}
.competition-blurb-grid {
margin: 0;
text-align: center;
font-size: 8px !important;
color: #20242e;
flex-grow: 1;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 9px !important;
min-height: 18px !important;
line-height: 10px !important;
overflow: hidden;
font-weight: bold;
}
.competition-box-grid .timer {
font-size: 6px !important;
color: #00cc5a;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.content-section {
margin: 0.25rem 0 !important;
max-width: 100vw !important;
padding: 0 1rem !important;
box-sizing: border-box !important;
overflow-wrap: break-word !important;
scroll-margin-top: 110px; /* For jump-to-section smooth scroll - clears sticky header */
}
.content-section + .content-section {
margin-top: 0 !important;
}
/* content-section h2: use canonical var(--fs-h2) on all offer/content pages */
.content-section h2 {
font-size: var(--fs-h2) !important;
font-weight: 700 !important;
margin-bottom: 1.1rem !important;
color: #022e4a !important;
border: none !important;
}
@media (max-width: 767px) {
.content-section h2 {
border: none !important;
border-bottom: none !important;
border-top: none !important;
padding-bottom: 0 !important;
margin-bottom: 1.1rem !important;
}
}
.content-section p > strong:first-child {
display: block !important;
font-size: 1rem !important; /* Keep same size as body - use weight for emphasis, not size */
font-weight: 700 !important; /* Emphasis through weight, not size - prevents line-height jumping */
color: 00cc5a !important;
margin-top: 1.25rem !important;
margin-bottom: 0.5rem !important;
letter-spacing: 0.01em;
}
.more-from-bookmaker h2 a,
.more-from-bookmaker h2 a[style*="color"] {
color: var(--primary-cta) !important;
}
.content-section h2 + p > strong:first-child {
margin-top: 0.25rem !important;
}
.content-section p {
font-size: var(--fs-base) !important; /* 16px – body text */
font-weight: 400 !important; /* no bold; strong stays strong */
margin-bottom: 1rem !important;
overflow-wrap: break-word !important;
}
.content-section ul {
list-style: none !important;
padding: 0 !important;
margin: 0 0 1.5rem !important;
}
.content-section li {
font-size: var(--fs-base) !important; /* 16px */
font-weight: 400 !important; /* no bold; strong inside stays strong */
margin-bottom: 1rem !important;
position: relative !important;
padding-left: 2.5rem !important;
word-break: break-word !important;
}
.content-section li:before,
.content-section ul ul li:before {
color: #00cc5a !important;
left: 0 !important;
top: 0.1rem !important;
line-height: 1 !important;
position: absolute !important;
}
.content-section li:before {
content: "\2022" !important;
font-size: 2.25rem !important;
}
.content-section ul ul {
margin: 0.5rem 0 0.5rem 1.5rem !important;
}
.content-section ul ul li {
font-size: var(--fs-base) !important; /* 16px – match body text */
margin-bottom: 0.5rem !important;
padding-left: 2rem !important;
}
.content-section ul ul li:before {
content: "\25E6" !important;
font-size: 1.5rem !important;
}
.more-from-bookmaker {
margin: 1.875rem 0;
max-width: 100%;
padding: 0 1rem;
box-sizing: border-box;
}
.more-from-bookmaker h2 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.9375rem;
}
.more-from-bookmaker h2,
.more-from-bookmaker h2:not(:has(a)) {
color: #022e4a !important;
}
.final-cta {
text-align: center !important;
padding: 0 1rem !important;
box-sizing: border-box !important;
}
.final-cta a {
display: inline-block !important;
width: 100% !important;
max-width: 22rem !important;
background-color: #00cc5a !important;
color: #000 !important;
border-radius: 0.25rem !important;
padding: 1rem 0 !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
transition: background 0.2s !important;
margin: 0 auto !important;
}
.final-cta a:hover {
background: #00cc57 !important;
}
.horizontal-timer {
font-size: 0.875rem;
font-weight: 700;
color: #00cc5a;
text-align: center;
line-height: 1;
margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
.coming-soon-box {
padding: var(--spacing-lg) calc(var(--spacing-lg) * 2);
}
.coming-soon-container {
margin-bottom: 50vh;
}
.footer-placeholder {
height: 50vh;
}
.individual-competition-page .competition-layout {
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 1rem;
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
/* Individual page competition box uses SAME dimensions as jackpot-competitions */
.individual-competition-page .competition-box {
width: 280px;
max-width: 280px;
height: auto;
min-height: 335px;
aspect-ratio: 0.7;
margin: 0;
flex-shrink: 0;
}
.individual-competition-page .right-column {
display: flex;
flex-direction: column;
height: 400px;
gap: 1rem;
width: auto;
max-width: none;
flex: 1;
min-width: 0;
}
.individual-competition-page .nav-key-row {
flex-direction: row;
gap: 0.75rem;
width: 100%;
height: 180px;
}
.individual-competition-page .key-terms-sidebar,
.individual-competition-page .navigation-box {
width: calc(50% - 0.375rem);
height: auto !important; /* Auto height - ensure everything is visible */
min-height: 180px; /* Minimum height for consistency */
padding: 1rem;
flex: none;
max-height: none !important;
overflow: visible !important; /* Ensure all content is visible */
}
.individual-competition-page .offers-box {
width: 100%;
height: 220px;
padding: 1rem;
max-height: none;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.grid-wrapper {
grid-template-columns: repeat(3, clamp(100px, 20vw, 140px));
gap: clamp(0.5rem, 2vw, 1rem);
margin: 0 auto 10px;
display: grid;
width: 100%;
max-width: 100%;
padding: 0 clamp(10px, 3vw, 20px);
box-sizing: border-box;
position: relative;
left: clamp(-10px, -2vw, -5px);
}
.competition-box-grid {
width: clamp(100px, 20vw, 140px);
height: clamp(130px, 26vw, 182px);
}
.competition-image-grid {
height: clamp(60px, 12vw, 84px);
}
.competition-top-border-grid {
padding: clamp(3px, 1vw, 6px) clamp(4px, 1.5vw, 8px);
height: clamp(14px, 3.5vw, 20px);
}
.bookmaker-logo-grid img {
max-width: clamp(20px, 5vw, 30px);
}
/* Bottom border completely removed - matches homepage */
.competition-bottom-border-grid {
display: none !important;
}
.play-now-button-grid {
padding: clamp(3px, 1vw, 6px) clamp(4px, 1.5vw, 8px);
font-size: clamp(4px, 1.2vw, 8px);
width: calc(100% - clamp(8px, 2vw, 16px));
margin: clamp(1px, 0.5vw, 3px) clamp(4px, 1.5vw, 8px) 0;
}
.competition-blurb-grid {
min-height: clamp(12px, 3vw, 20px);
line-height: clamp(6px, 1.5vw, 10px);
padding: 0 clamp(4px, 1.5vw, 8px);
}
.competition-box-grid .timer {
font-size: clamp(3px, 1vw, 6px);
}
}
@media (max-width: 767px) {
.mobile-banner {
display: flex;
}
.individual-competition-page .nav-key-row {
display: flex;
flex-direction: row;
gap: 0.5rem;
width: 100%;
box-sizing: border-box;
}
.individual-competition-page .key-terms-sidebar,
.individual-competition-page .navigation-box {
flex: 1 1 0;
min-width: 0;
margin: 0;
padding: 0.5rem;
box-sizing: border-box;
min-height: 150px; /* Fixed min-height on mobile to prevent layout shift */
}
/* Ensure boxes are fully visible - remove height restrictions */
.individual-competition-page .key-terms-sidebar,
.individual-competition-page .navigation-box {
max-height: none !important;
height: auto !important;
overflow: visible !important;
padding: 0.75rem !important;
}
/* Skeleton now uses shared classes - dimensions automatically match actual content */
/* Jump to section / key terms: 14px on mobile (not 11px) */
.individual-competition-page .navigation-box h3,
.individual-competition-page .key-terms-sidebar h3 {
font-size: 16px !important;
}
.individual-competition-page .navigation-box li,
.individual-competition-page .navigation-box a,
.individual-competition-page .key-terms-sidebar li {
font-size: 14px !important;
}
.individual-competition-page .key-terms-sidebar h3,
.individual-competition-page .navigation-box h3 {
margin: 0 0 0.4rem;
}
.individual-competition-page .key-terms-sidebar li,
.individual-competition-page .navigation-box li {
margin-bottom: 0.2rem;
}
.individual-competition-page .offers-box {
width: 100%;
margin-top: 0;
padding: 0 0.5rem;
box-sizing: border-box;
}
/* Mobile restructure: Main competition box - full width image attached to hero. Set from start to avoid CLS. */
.individual-competition-page .hero-section {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.individual-competition-page .game-hero-section {
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
margin-top: 0 !important; /* Attach directly to hero subtitle */
}
/* Reserve position from first paint to prevent main-competition-box jumping up (CLS) */
.individual-competition-page .main-competition-box {
margin-top: 0 !important;
}
/* Mobile: competition box fills page - no padding left, right or top (body scope = zero impact on jackpot/daily) */
body.individual-competition-page .main-content {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
}
.individual-competition-page .competition-layout {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* Mobile: Main competition box - full bleed, NO left/right margin or padding; force override any parent inset */
/* Keep stable min-height (match .loading) so removing .loading doesn't cause bottom flash/CLS */
.individual-competition-page .main-competition-box {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 320px !important;
aspect-ratio: auto !important;
margin: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column !important;
order: 1 !important; /* Competition box first on mobile */
background: transparent !important;
transform: none !important; /* Disable hover transform on mobile */
}
.individual-competition-page .main-competition-box:hover {
transform: none !important; /* No hover effect on mobile */
box-shadow: none !important;
}
.individual-competition-page .main-competition-image {
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 200px !important;
aspect-ratio: 5/3 !important;
border-radius: 0 !important;
overflow: hidden !important;
background: transparent !important;
line-height: 0 !important;
font-size: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.individual-competition-page .main-competition-image img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
}
.individual-competition-page .main-competition-top-border {
width: 100% !important;
border-radius: 0 !important;
padding: 0.375rem 0.75rem !important;
height: auto !important;
min-height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: #ffffff !important;
}
/* Individual page main bookmaker logo on mobile */
.individual-competition-page .main-bookmaker-logo {
min-width: 100px !important;
min-height: 35px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin-left: 0 !important;
}
.individual-competition-page .main-bookmaker-logo .logo-wrapper {
min-width: 65px !important;
min-height: 35px !important;
width: 65px !important;
height: 35px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.individual-competition-page .main-bookmaker-logo img {
max-width: 100px !important;
max-height: 35px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
/* Individual page hero: timer 18px on mobile (past mobile keep desktop size) */
.individual-competition-page .main-timer {
font-size: 1.125rem !important; /* 18px */
font-weight: 700 !important;
min-width: auto !important;
}
/* Main competition bottom border on mobile */
.individual-competition-page .main-competition-bottom-border {
width: 100% !important;
border-radius: 0 !important;
padding: 0.75rem !important;
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
background: #ffffff !important;
}
.individual-competition-page .main-competition-blurb {
font-size: 1.125rem !important; /* 18px */
line-height: 1.4 !important;
font-weight: 700 !important;
}
.individual-competition-page .main-play-now-button,
.individual-competition-page #competition-play-button {
font-size: 1.25rem !important; /* 20px */
padding: 0.875rem 1.5rem !important;
}
.individual-competition-page .bookmaker-logo img {
max-width: 65px !important;
max-height: 35px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important; /* No margin */
}
/* Timer 18px on mobile (past mobile keep desktop size) */
.individual-competition-page .timer {
font-size: 1.125rem !important; /* 18px */
font-weight: 700 !important;
min-width: auto !important;
}
/* Competition blurb in competition box: 18px on mobile */
.individual-competition-page .competition-blurb {
font-size: 1.125rem !important; /* 18px */
line-height: 1.4 !important;
font-weight: 700 !important;
}
/* Play button for individual pages */
.individual-competition-page .play-now-button {
font-size: 1rem !important;
padding: 0.875rem 1.5rem !important;
}
.individual-competition-page .competition-bottom-border {
width: 100% !important;
order: 3 !important; /* Bottom border third */
border-radius: 0 !important;
}
.individual-competition-page .right-column {
width: 100% !important;
max-width: 100% !important;
margin-top: 1rem !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
order: 2 !important; /* Right column comes after competition-box */
}
:root {
--box-width: 26vw;
--box-height: 17vw; /* Reduced from 34vw since no bottom border (image ~13vw + top border ~4vw) */
--box-gap: 6vw;
--box-radius: 2vw;
--box-padding: 2vw;
}
.grid-wrapper {
display: grid;
grid-template-columns: repeat(3, var(--box-width));
gap: var(--box-gap);
justify-content: center;
width: calc(3 * var(--box-width) + 2 * var(--box-gap));
margin: 0 auto;
box-sizing: border-box;
padding: 0;
}
.competition-box-grid {
width: var(--box-width);
height: var(--box-height);
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: var(--box-radius);
overflow: hidden;
box-sizing: border-box;
}
.competition-image-grid {
width: 100%;
height: 13vw;
background: #1a1f3f;
display: flex;
align-items: center;
justify-content: center;
border-bottom: none !important; /* No border between image and top border */
border-top-left-radius: var(--box-radius);
border-top-right-radius: var(--box-radius);
overflow: hidden;
flex-shrink: 0;
}
.competition-image-grid img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
.competition-top-border-grid {
padding: var(--box-padding);
height: 4vw;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: none !important; /* No bottom border - matches homepage */
border-radius: 0 !important; /* Rectangle - no corner rounding */
background: #fff; /* White background */
flex-shrink: 0;
}
.bookmaker-logo-grid img {
max-width: 6vw;
height: auto;
}
/* Bottom border completely removed on mobile */
.competition-bottom-border-grid {
display: none !important; /* Completely removed */
}
.competition-blurb-grid {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 1vw;
margin-bottom: 1vw;
overflow: hidden;
font-size: clamp(0.8vw, 2vw, 1.4vw);
line-height: 1.2;
word-wrap: break-word;
word-break: break-word;
min-height: 0;
}
.competition-box-grid .timer,
.play-now-button-grid {
font-size: clamp(1.5vw, 2.5vw, 2vw);
font-weight: 700;
}
.play-now-button-grid {
flex-shrink: 0;
padding: 1.2vw 0;
width: 100%;
border-radius: 1vw;
box-sizing: border-box;
text-align: center;
background-color: var(--primary-cta);
color: #000;
text-decoration: none;
border: none;
cursor: pointer;
transition: background-color 0.2s;
margin: 0;
}
.competition-box-grid .timer {
color: var(--primary-cta);
}
}
/* Tablet (768-919px) - Keep mobile scroll behavior */
@media (min-width: 768px) and (max-width: 919px) {
.internal-linking-section {
display: flex !important;
flex-direction: column !important; /* Stack carousels vertically */
gap: 2rem !important;
margin: 3rem auto 2rem !important;
padding: 0 1rem !important;
}
.internal-linking-section .carousel-wrapper {
width: 100% !important;
}
/* Keep horizontal scroll for tablet */
.internal-linking-section .horizontal-scroll-container {
overflow-x: auto !important;
overflow-y: hidden !important;
}
.internal-linking-section .games-scroll {
display: flex !important; /* Flex for scrolling */
gap: 0.5rem !important;
}
}
@media (min-width: 1024px) {
.coming-soon-box {
padding: calc(var(--spacing-lg) * 1.5) calc(var(--spacing-lg) * 2.5);
}
.coming-soon-container {
margin-bottom: 60vh;
}
.footer-placeholder {
height: 60vh;
}
.page-title {
font-size: 1.5rem;
margin: 1.5rem 0;
padding: 0 3rem;
text-align: center;
}
.game-hero-section {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2rem !important;
padding: 0 3rem !important;
max-width: 1100px !important;
box-sizing: border-box !important;
}
.individual-competition-page .competition-layout {
max-width: 1200px !important;
}
.individual-competition-page .right-column {
width: 600px !important;
max-width: none !important;
flex: none !important;
}
.individual-competition-page .nav-key-row {
gap: 1rem !important;
}
.individual-competition-page .key-terms-sidebar,
.individual-competition-page .navigation-box {
width: calc(50% - 0.5rem) !important;
max-height: none !important;
}
.individual-competition-page .offers-box {
width: 100% !important;
height: 200px !important;
padding: 1.25rem !important;
max-height: none !important;
}
/* Individual page competition box - matches jackpot-competitions dimensions */
.individual-competition-page .competition-box {
width: 280px !important;
max-width: 280px !important;
height: auto !important;
min-height: 335px !important;
aspect-ratio: 0.7 !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
/* Internal linking section already handled at 920px+ - no conflicting rules here */
.competition-blurb-grid {
font-size: 8px !important;
min-height: 18px !important;
line-height: 10px !important;
padding: 0 9px !important;
}
.content-section,
.final-cta,
.more-from-bookmaker {
padding: 0 3rem !important;
max-width: 999px !important;
}
.competition-box-grid .timer {
font-size: 6px !important;
}
.content-section,
.more-from-bookmaker {
margin: 0.5rem auto !important;
}
.content-section + .content-section {
margin-top: 0 !important;
}
.final-cta {
margin: 1rem auto 0.5rem!important;
}
.final-cta a {
font-size: 1.25rem !important;
max-width: 28rem !important;
}
}
@media (max-width: 479px) {
.grid-wrapper {
grid-template-columns: repeat(3, clamp(100px, 22vw, 140px)) !important;
gap: clamp(0.5rem, 1.8vw, 1rem) !important;
margin: 0 auto 10px !important;
display: grid !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 clamp(8px, 2vw, 10px) !important;
box-sizing: border-box !important;
position: relative !important;
left: clamp(-8px, -1vw, -2px) !important;
}
.competition-box-grid {
width: clamp(100px, 22vw, 140px) !important;
height: clamp(130px, 28.6vw, 182px) !important;
}
.competition-image-grid {
height: clamp(50px, 11vw, 70px) !important;
}
.competition-top-border-grid {
padding: clamp(2px, 1vw, 4px) clamp(3px, 1.5vw, 6px) !important;
height: clamp(10px, 2.5vw, 16px) !important;
}
.bookmaker-logo-grid img {
max-width: clamp(16px, 4vw, 24px) !important;
}
/* Bottom border completely removed - matches homepage */
.competition-bottom-border-grid {
display: none !important;
}
.play-now-button-grid {
padding: clamp(2px, 1vw, 4px) clamp(3px, 1.5vw, 6px) !important;
font-size: clamp(3px, 1.2vw, 6px) !important;
width: calc(100% - clamp(6px, 2vw, 12px)) !important;
margin: clamp(1px, 0.5vw, 2px) clamp(3px, 1.5vw, 6px) 0 !important;
}
.competition-blurb-grid {
min-height: clamp(8px, 2.5vw, 12px) !important;
padding: 0 clamp(2px, 1vw, 4px) !important;
}
.competition-box-grid .timer {
font-size: clamp(2px, 1vw, 4px) !important;
}
}
.loading-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%) !important;
z-index: 99999 !important; /* Highest z-index to cover everything */
display: flex !important;
justify-content: center !important;
align-items: center !important;
transition: opacity 0.3s ease, visibility 0.3s ease !important;
pointer-events: all !important;
opacity: 1 !important;
visibility: visible !important;
}
.loading-overlay.hidden {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: -1 !important; /* Behind everything when hidden */
}
/* Homepage: Overlay hidden after 300ms, carousels show when body.loaded */
body.homepage.loaded .swiper-jackpot,
body.homepage.loaded .swiper-daily,
body.homepage.loaded .games-section,
body.homepage #loading-overlay.hidden ~ .main-content .swiper-jackpot,
body.homepage #loading-overlay.hidden ~ .main-content .swiper-daily,
body.homepage #loading-overlay.hidden ~ .main-content .games-section {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* Mobile: Ensure games-section allows shadows to bleed into padding */
@media (max-width: 767px) {
body.homepage.loaded .swiper-jackpot,
body.homepage.loaded .swiper-daily,
body.homepage.loaded .games-section,
body.homepage #loading-overlay.hidden ~ .main-content .swiper-jackpot,
body.homepage #loading-overlay.hidden ~ .main-content .swiper-daily,
body.homepage #loading-overlay.hidden ~ .main-content .games-section {
overflow: visible !important; /* Shadows bleed into padding area */
}
}
/* CRITICAL: Ensure main-content is visible on homepage */
body.homepage .main-content {
opacity: 1 !important;
visibility: visible !important;
}
/* Betting-sites page: overlay should be visible initially, then hidden by JS */
body.betting-sites-page .loading-overlay.hidden {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Ensure offers-list is hidden behind loading overlay during transitions */
body.page-transitioning #offers-list {
z-index: -1 !important; /* Behind loading overlay */
position: relative;
}
.spinner {
width: 50px;
height: 50px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid #00cc5a;
border-radius: 50%;
animation: 1s linear infinite spin;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.mobile-only {
display: block;
}
@media (min-width: 768px) {
.mobile-only {
display: none !important;
}
}
body:has(#other-competitions-grid) .competition-top-border .timer {
position: absolute !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) translateY(-50%) !important;
text-align: center !important;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.pq-bottom-email-section,
.pq-cookie-popup-rect,
.pq-modal-overlay {
min-height: 100px;
}
#live-games,
#expired-games-grid,
.bookmaker-section {
min-height: 200px;
}
.competition-box,
.horizontal-game-box {
min-height: 300px;
}
footer {
min-height: 300px;
}
@media (min-width: 768px) {
.competition-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem 0.625rem;
padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.competition-grid {
grid-template-columns: repeat(3, 300px);
gap: 1.25rem 0.75rem;
padding: 0 4rem;
max-width: 1200px;
justify-items: center;
}
}
@media (min-width: 1280px) {
.competition-grid {
grid-template-columns: repeat(3, 300px);
gap: 1.25rem 0.75rem;
padding: 0 5rem;
max-width: 1400px;
justify-items: center;
}
}
/* Remove dropdowns and add hover terms for betting sites page only */
.betting-sites-page .horizontal-game-box .dropdown-toggle {
display: none !important;
}
.betting-sites-page .horizontal-game-box .dropdown-content {
display: none !important;
}
/* Remove hover terms functionality */
.betting-sites-page .horizontal-game-box .claim-button .hover-terms {
display: none !important;
}
/* New expandable terms system for offers only */
.betting-sites-page .horizontal-game-box.offers-box .claim-button {
position: relative !important;
transition: all 0.3s ease !important;
}
/* Clean terms modal styling */
.terms-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.65);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.terms-modal-overlay.show {
opacity: 1;
visibility: visible;
}
.terms-modal {
background: #ffffff;
padding: 2rem;
border-radius: 0.5rem;
max-width: 90% !important; /* Ensure consistent size */
width: 500px !important; /* Ensure consistent size across all pages */
position: relative;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
}
/* Key terms modal – universal: match home.php / betting-sites logic (h2, body text, button from tokens) */
.terms-modal h2 {
font-size: var(--fs-h2) !important;
margin: 0 0 1.5rem !important;
font-weight: 700 !important;
color: #022e4a !important;
text-align: center !important;
}
/* Ensure modal h2 stays centred on individual-competition-page (page h2 is left-aligned) */
.individual-competition-page .terms-modal h2 {
text-align: center !important;
}
@media (max-width: 767px) {
.terms-modal {
width: 90% !important;
max-width: 500px !important;
padding: 1.5rem !important;
}
.terms-modal h2 {
text-align: center !important;
}
}
.terms-modal .terms-text {
font-size: var(--fs-base) !important;
color: #20242e;
line-height: 1.6;
margin: 1.5rem 0;
text-align: center;
}
.terms-modal .claim-offer-btn {
background: #00cc5a;
color: #20242e;
border: none;
padding: 1rem 2rem;
font-size: var(--fs-base) !important;
cursor: pointer;
border-radius: 0.5rem;
font-weight: 700;
width: 100%;
text-align: center;
display: block;
margin-top: 1.5rem;
}
.terms-modal .close-btn {
position: absolute;
top: 0.5rem;
right: 0.75rem;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #022e4a;
padding: 0.25rem;
transition: color 0.18s;
}
.terms-modal .close-btn:hover {
color: #00cc5a;
}
/* UKGC badge and popup */
.ukgc-badge {
display: inline-flex;
align-items: center;
padding: 0; /* no pill */
font-size: 0.85rem;
font-weight: 400; /* non-bold */
color: #fff !important; /* white text */
background: transparent; /* no background */
border-radius: 0;
cursor: pointer;
position: relative;
}
.ukgc-badge::after {
content: 'i';
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em; /* Match text height */
height: 1em; /* Match text height */
font-size: 0.85em; /* Slightly smaller than text */
font-weight: 700;
border-radius: 50%;
background: #fff;
text-align: center;
line-height: 1; /* Perfect centering */
color: #022e4a;
margin-left: 4px;
flex-shrink: 0;
}
.ukgc-popup-wrapper {
position: relative;
display: inline-block;
/* No padding-bottom - was causing alignment issues */
}
.individual-competition-page .ukgc-popup-wrapper {
position: relative;
display: inline-block;
}
/* Individual competition hero: Same as casino signup – content-based height, rooted in place, no fixed overrides */
.individual-competition-page .hero-section {
box-sizing: border-box !important;
}
.individual-competition-page .hero-author-info .ukgc-popup-wrapper {
display: inline-flex; /* Use flex to align properly with flex parent */
align-items: center; /* Align items to center */
vertical-align: middle; /* Fallback vertical alignment */
line-height: normal;
}
.individual-competition-page .hero-author-info .ukgc-badge {
color: rgba(255, 255, 255, 0.7) !important; /* Same grey as last-updated */
vertical-align: baseline; /* Align with baseline */
display: inline-flex; /* Keep inline-flex but align baseline */
align-items: center; /* Center align items */
line-height: inherit; /* Use parent line-height */
}
/* Individual pages: Same as casino signup – Written by | License | Last Updated; License hidden on mobile (handled in hero-section.css) */
.individual-competition-page .hero-author-info .ukgc-badge::after {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 1em !important; /* Match text height */
height: 1em !important; /* Match text height */
font-size: 0.85em !important; /* Slightly smaller than text */
line-height: 1 !important; /* Perfect centering */
vertical-align: middle; /* Icon aligned to middle */
background: transparent !important; /* Transparent background */
color: rgba(255, 255, 255, 0.7) !important; /* Same grey as badge text */
border: 1px solid rgba(255, 255, 255, 0.7); /* Grey border circle */
font-weight: 600; /* Slightly lighter weight for the i */
flex-shrink: 0 !important;
}
.ukgc-popup {
position: absolute;
top: 100%; /* Position directly below badge (padding-bottom on wrapper creates bridge) */
left: 50%;
transform: translateX(-50%) translateY(6px);
min-width: 260px !important; /* Ensure consistent size across all pages */
max-width: 320px !important; /* Ensure consistent size across all pages */
background: #fff;
border: 1px solid rgba(2,46,74,0.15);
border-radius: 8px;
box-shadow: 0 12px 24px rgba(2,46,74,0.18);
opacity: 0;
transition: opacity .15s ease, transform .15s ease;
z-index: 50;
pointer-events: none;
font-weight: normal !important; /* Override hero-author-info bold inheritance */
}
.ukgc-popup.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: all;
}
/* Offers pages: Popup below logo (left-aligned) */
/* Ensure offer-card doesn't clip the popup */
.signup-offers-page .offer-card,
.no-wagering-page .offer-card {
overflow: visible !important; /* Allow popup to extend beyond card */
}
/* Casino signup: one joined block – no separate boxes; row separator is in OFFER ROW SEPARATOR block (min 1023px) */
.signup-offers-page .ranked-offer.offer-card,
.signup-offers-page .offer-card.ranked-offer {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
border-bottom: none !important;
}
.signup-offers-page .ranked-offer .offer-content-wrapper {
background: #fff;
padding: 0.5rem 1.25rem !important;
contain: layout style;
}
/* Zero CLS: set min-height so box never shrinks on load – same box logic for ALL offer pages */
@media (min-width: 1024px) {
.signup-offers-page .ranked-offer .offer-content-wrapper,
.casino-signup-offers-page .ranked-offer .offer-content-wrapper,
.casino-bonus-page .ranked-offer .offer-content-wrapper,
.no-wagering-page .ranked-offer .offer-content-wrapper,
.no-deposit-free-spins-page .ranked-offer .offer-content-wrapper,
.sports-offers-page .ranked-offer .offer-content-wrapper,
.blog-page .ranked-offer .offer-content-wrapper {
padding: 1rem !important;
min-height: 220px !important; /* Top row + metrics block + key terms blurb + ~2 lines key terms – box won't reduce when content loads */
}
}
@media (max-width: 1023px) {
.signup-offers-page .ranked-offer .offer-content-wrapper,
.casino-signup-offers-page .ranked-offer .offer-content-wrapper,
.casino-bonus-page .ranked-offer .offer-content-wrapper,
.no-wagering-page .ranked-offer .offer-content-wrapper,
.no-deposit-free-spins-page .ranked-offer .offer-content-wrapper,
.sports-offers-page .ranked-offer .offer-content-wrapper,
.blog-page .ranked-offer .offer-content-wrapper {
}
/* Sports only (and blog sports): slightly taller box, more pleasing */
.sports-offers-page .ranked-offer .offer-content-wrapper,
.blog-page #sports-offers-list .ranked-offer .offer-content-wrapper {
min-height: 305px !important;
}
}
@media (min-width: 1024px) {
/* Sports only (and blog sports): slightly taller box, blurb in line with logo and claim */
.sports-offers-page .ranked-offer .offer-content-wrapper,
.blog-page #sports-offers-list .ranked-offer .offer-content-wrapper {
min-height: 245px !important;
}
}
.signup-offers-page .ranked-offer .metrics-row {
background: var(--metrics-bar-bg);
}
/* Faint line between metrics box and key-terms blurb – loaded content only (not skeleton); same class/setup, visual separation */
.signup-offers-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb,
.casino-signup-offers-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb,
.casino-bonus-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb,
.no-wagering-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb,
.no-deposit-free-spins-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb,
.sports-offers-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb,
.blog-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb {
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* No hover on casino signup offer box */
.signup-offers-page .ranked-offer:hover,
.signup-offers-page .offer-card.ranked-offer:hover {
transform: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* 1024px+ only: rank strip on left – rounded corners; up to 1023px: rank on top, straight corners */
@media (min-width: 1024px) {
.signup-offers-page .ranked-offer:first-child .rank-number,
.casino-signup-offers-page .ranked-offer:first-child .rank-number,
.casino-bonus-page .ranked-offer:first-child .rank-number,
.no-deposit-free-spins-page .ranked-offer:first-child .rank-number,
.no-wagering-page .ranked-offer:first-child .rank-number,
.blog-page .ranked-offer:first-child .rank-number,
.blog-page #casino-offers-list .ranked-offer:first-child .rank-number,
.blog-page #sports-offers-list .ranked-offer:first-child .rank-number {
border-radius: 0.75rem 0 0 0 !important;
}
.signup-offers-page .ranked-offer:last-child .rank-number,
.casino-signup-offers-page .ranked-offer:last-child .rank-number,
.casino-bonus-page .ranked-offer:last-child .rank-number,
.no-deposit-free-spins-page .ranked-offer:last-child .rank-number,
.no-wagering-page .ranked-offer:last-child .rank-number,
.blog-page .ranked-offer:last-child .rank-number,
.blog-page #casino-offers-list .ranked-offer:last-child .rank-number,
.blog-page #sports-offers-list .ranked-offer:last-child .rank-number {
border-radius: 0 0 0 0.75rem !important; /* Bottom-left only; right corner straight */
}
.signup-offers-page .ranked-offer:not(:first-child):not(:last-child) .rank-number,
.casino-signup-offers-page .ranked-offer:not(:first-child):not(:last-child) .rank-number,
.casino-bonus-page .ranked-offer:not(:first-child):not(:last-child) .rank-number,
.no-deposit-free-spins-page .ranked-offer:not(:first-child):not(:last-child) .rank-number,
.no-wagering-page .ranked-offer:not(:first-child):not(:last-child) .rank-number,
.blog-page .ranked-offer:not(:first-child):not(:last-child) .rank-number,
.blog-page #casino-offers-list .ranked-offer:not(:first-child):not(:last-child) .rank-number,
.blog-page #sports-offers-list .ranked-offer:not(:first-child):not(:last-child) .rank-number {
border-radius: 0 !important;
}
/* Last offer: card bottom-right straight so it flows with page */
.signup-offers-page .ranked-offer:last-child,
.casino-signup-offers-page .ranked-offer:last-child,
.casino-bonus-page .ranked-offer:last-child,
.no-deposit-free-spins-page .ranked-offer:last-child,
.no-wagering-page .ranked-offer:last-child,
.blog-page .ranked-offer:last-child,
.blog-page #casino-offers-list .ranked-offer:last-child,
.blog-page #sports-offers-list .ranked-offer:last-child {
border-bottom-right-radius: 0 !important;
}
/* Fix Issue B: Strengthen "No Line on Rank" – separator must not cross rank strip */
#offers-list .rank-number,
#casino-offers-list .rank-number,
#sports-offers-list .rank-number {
border-bottom: none !important;
box-shadow: none !important;
}
}
@media (max-width: 1023px) {
/* Up to 1023px: rank on top – fully rigid corners (no rounding, including rank-gold) */
.signup-offers-page .ranked-offer .rank-number,
.signup-offers-page .ranked-offer:first-child .rank-number,
.signup-offers-page .ranked-offer:first-child .rank-number.rank-gold,
.signup-offers-page .ranked-offer:last-child .rank-number,
.signup-offers-page #offers-list .ranked-offer:first-child .rank-number,
.signup-offers-page #offers-list .ranked-offer:first-child .rank-number.rank-gold,
.casino-bonus-page .ranked-offer:first-child .rank-number.rank-gold,
.no-wagering-page .ranked-offer:first-child .rank-number.rank-gold,
.no-deposit-free-spins-page .ranked-offer:first-child .rank-number.rank-gold,
.blog-page .ranked-offer:first-child .rank-number.rank-gold {
border-radius: 0 !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/* No card padding so rank strip is flush to list edge (no white corner) */
.signup-offers-page .ranked-offer.offer-card,
.signup-offers-page .offer-card.ranked-offer {
padding: 0 !important;
}
.signup-offers-page .offers-list {
padding: 0 !important;
}
}
/* Skeleton: 1024px+ rank rounded top-only (first) / bottom-only (last) – no rounded bottom on first child */
@media (min-width: 1024px) {
.signup-offers-page .offer-card.ranked-offer.skeleton-shimmer:first-child .rank-number,
.casino-signup-offers-page .offer-card.ranked-offer.skeleton-shimmer:first-child .rank-number,
.casino-bonus-page .offer-card.ranked-offer.skeleton-shimmer:first-child .rank-number,
.no-deposit-free-spins-page .offer-card.ranked-offer.skeleton-shimmer:first-child .rank-number,
.no-wagering-page .offer-card.ranked-offer.skeleton-shimmer:first-child .rank-number {
border-radius: 0.75rem 0 0 0 !important; /* Top rounded only, straight bottom */
}
.signup-offers-page .offer-card.ranked-offer.skeleton-shimmer:last-child .rank-number,
.casino-signup-offers-page .offer-card.ranked-offer.skeleton-shimmer:last-child .rank-number,
.casino-bonus-page .offer-card.ranked-offer.skeleton-shimmer:last-child .rank-number,
.no-deposit-free-spins-page .offer-card.ranked-offer.skeleton-shimmer:last-child .rank-number,
.no-wagering-page .offer-card.ranked-offer.skeleton-shimmer:last-child .rank-number {
border-radius: 0 0 0 0.75rem !important; /* Bottom-right flat; bottom-left rounded */
}
.signup-offers-page .offer-card.ranked-offer.skeleton-shimmer:not(:first-child):not(:last-child) .rank-number,
.casino-signup-offers-page .offer-card.ranked-offer.skeleton-shimmer:not(:first-child):not(:last-child) .rank-number,
.casino-bonus-page .offer-card.ranked-offer.skeleton-shimmer:not(:first-child):not(:last-child) .rank-number,
.no-deposit-free-spins-page .offer-card.ranked-offer.skeleton-shimmer:not(:first-child):not(:last-child) .rank-number,
.no-wagering-page .offer-card.ranked-offer.skeleton-shimmer:not(:first-child):not(:last-child) .rank-number {
border-radius: 0 !important;
}
}
@media (max-width: 1023px) {
.signup-offers-page .offer-card.ranked-offer.skeleton-shimmer .rank-number {
border-radius: 0 !important;
}
}
/* Skeleton loading: continuous linked offers – no rounded boxes, faint line between each (signup, casino-bonus, no-wagering) */
.signup-offers-page .offer-card.ranked-offer.skeleton-shimmer,
.casino-signup-offers-page .offer-card.ranked-offer.skeleton-shimmer,
.sports-offers-page .offer-card.ranked-offer.skeleton-shimmer,
.casino-bonus-page .offer-card.ranked-offer.skeleton-shimmer,
.no-wagering-page .offer-card.ranked-offer.skeleton-shimmer,
.no-deposit-free-spins-page .offer-card.ranked-offer.skeleton-shimmer {
border-radius: 0 !important;
box-shadow: none !important;
margin-bottom: 0 !important;
border-bottom: none !important;
}
/* Last-child border controlled only by OFFER ROW SEPARATOR block */
/* Casino bonus, no-deposit-free-spins, no-wagering, blog: exact same joined block logic as casino signup */
.casino-bonus-page .offers-list,
.no-deposit-free-spins-page .offers-list,
.no-wagering-page .offers-list,
.blog-page .offers-list,
.blog-page #casino-offers-list,
.blog-page #sports-offers-list {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
box-sizing: border-box;
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
overflow: hidden;
}
.casino-bonus-page .ranked-offer.offer-card,
.casino-bonus-page .offer-card.ranked-offer,
.no-deposit-free-spins-page .ranked-offer.offer-card,
.no-deposit-free-spins-page .offer-card.ranked-offer,
.no-wagering-page .ranked-offer.offer-card,
.no-wagering-page .offer-card.ranked-offer,
.blog-page .ranked-offer.offer-card,
.blog-page .offer-card.ranked-offer {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
border-bottom: none !important;
}
/* ============================================================
OFFER ROW SEPARATOR - FINAL SURGICAL FIX
============================================================ */
@media (min-width: 1023px) {
/* 1. KILL any line through the offer rank card – no border/shadow/outline on card or rank */
body[class*="-page"] #offers-list .offer-card,
body[class*="-page"] #casino-offers-list .offer-card,
body[class*="-page"] #sports-offers-list .offer-card {
border-bottom: none !important;
border-bottom-width: 0 !important;
border-top: none !important;
box-shadow: none !important;
outline: none !important;
}
body[class*="-page"] #offers-list .rank-number,
body[class*="-page"] #casino-offers-list .rank-number,
body[class*="-page"] #sports-offers-list .rank-number {
border-bottom: none !important;
border-bottom-width: 0 !important;
border-top: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Faint line must NOT cross rank strip: ensure ranked-offer card has no full-width bottom border */
body.casino-signup-offers-page #offers-list .offer-card.ranked-offer,
body.signup-offers-page #offers-list .offer-card.ranked-offer,
body.casino-bonus-page #offers-list .offer-card.ranked-offer,
body.no-deposit-free-spins-page #offers-list .offer-card.ranked-offer,
body.no-wagering-page #offers-list .offer-card.ranked-offer,
body.blog-page #casino-offers-list .offer-card.ranked-offer,
body.blog-page #sports-offers-list .offer-card.ranked-offer {
border-bottom: none !important;
border-bottom-width: 0 !important;
}
/* 2. APPLY the line ONLY to the content wrapper */
body[class*="-page"] #offers-list .offer-card .offer-content-wrapper,
body[class*="-page"] #casino-offers-list .offer-card .offer-content-wrapper,
body[class*="-page"] #sports-offers-list .offer-card .offer-content-wrapper {
border-bottom: 1px solid #d0d4d8 !important;
margin-bottom: 0 !important;
position: relative;
z-index: 1;
}
/* 3. THE "LAST CHILD" SAFETY - Remove border from the final card content */
body[class*="-page"] #offers-list .offer-card:last-child .offer-content-wrapper,
body[class*="-page"] #casino-offers-list .offer-card:last-child .offer-content-wrapper,
body[class*="-page"] #sports-offers-list .offer-card:last-child .offer-content-wrapper {
border-bottom: none !important;
}
}
/* 4. MOBILE RESET - Ensure clean layout on smaller screens */
@media (max-width: 1022px) {
.offer-content-wrapper {
border-bottom: none !important;
}
/* Sports + Blog: keep faint line between offers on mobile (sports page uses #offers-list) */
.sports-offers-page #offers-list .offer-card .offer-content-wrapper,
.sports-offers-page #sports-offers-list .offer-card .offer-content-wrapper,
.blog-page #sports-offers-list .offer-card .offer-content-wrapper,
.blog-page #casino-offers-list .offer-card .offer-content-wrapper {
border-bottom: 1px solid #d0d4d8 !important;
}
.sports-offers-page #offers-list .offer-card:last-child .offer-content-wrapper,
.sports-offers-page #sports-offers-list .offer-card:last-child .offer-content-wrapper,
.blog-page #sports-offers-list .offer-card:last-child .offer-content-wrapper,
.blog-page #casino-offers-list .offer-card:last-child .offer-content-wrapper {
border-bottom: none !important;
}
}
.casino-bonus-page .ranked-offer .offer-content-wrapper,
.no-deposit-free-spins-page .ranked-offer .offer-content-wrapper,
.no-wagering-page .ranked-offer .offer-content-wrapper,
.sports-offers-page .ranked-offer .offer-content-wrapper,
.blog-page .ranked-offer .offer-content-wrapper {
background: #fff;
contain: layout style;
padding-top: 0 !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-bottom: 1rem !important;
}
/* Below 768: 1rem padding top (and sides/bottom) on all these pages */
@media (max-width: 767px) {
.casino-bonus-page .ranked-offer .offer-content-wrapper,
.no-deposit-free-spins-page .ranked-offer .offer-content-wrapper,
.no-wagering-page .ranked-offer .offer-content-wrapper,
.sports-offers-page .ranked-offer .offer-content-wrapper,
.blog-page .ranked-offer .offer-content-wrapper,
.blog-page #casino-offers-list .ranked-offer .offer-content-wrapper,
.blog-page #sports-offers-list .ranked-offer .offer-content-wrapper {
padding-top: 1rem !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-bottom: 1rem !important;
}
}
/* Min 1024: 1rem padding top on same pages */
@media (min-width: 1024px) {
.casino-bonus-page .ranked-offer .offer-content-wrapper,
.no-deposit-free-spins-page .ranked-offer .offer-content-wrapper,
.no-wagering-page .ranked-offer .offer-content-wrapper,
.sports-offers-page .ranked-offer .offer-content-wrapper,
.blog-page .ranked-offer .offer-content-wrapper,
.blog-page #casino-offers-list .ranked-offer .offer-content-wrapper,
.blog-page #sports-offers-list .ranked-offer .offer-content-wrapper {
padding-top: 1rem !important;
}
}
/* Key terms section margin: match skeleton spacer (0.75rem / 0.5rem) – zero CLS on load */
/* CONSISTENT key-terms-to-claim gap: same on all pages and dimensions (match no-deposit, no-wagering, casino-bonus) */
.signup-offers-page .key-terms-section,
.casino-signup-offers-page .key-terms-section,
.casino-bonus-page .key-terms-section,
.no-deposit-free-spins-page .key-terms-section,
.no-wagering-page .key-terms-section,
.sports-offers-page .key-terms-section,
.blog-page .key-terms-section {
margin-top: 1rem !important;
}
@media (max-width: 767px) {
.signup-offers-page .key-terms-section,
.casino-signup-offers-page .key-terms-section,
.casino-bonus-page .key-terms-section,
.no-deposit-free-spins-page .key-terms-section,
.no-wagering-page .key-terms-section,
.sports-offers-page .key-terms-section,
.blog-page .key-terms-section {
margin-top: 0.5rem !important;
}
/* Key-terms-to-claim gap: casino-signup, sports-signup, blog – match no-deposit/no-wagering/casino-bonus (0.5rem below button) */
.signup-offers-page .mobile-claim-btn,
.sports-offers-page .mobile-claim-btn,
.blog-page .mobile-claim-btn,
.blog-page #casino-offers-list .mobile-claim-btn,
.blog-page #sports-offers-list .mobile-claim-btn {
margin-bottom: 0.5rem !important;
}
}
/* Mobile: keep claim button always visible during scroll (no flicker/drop-off) */
@media (max-width: 1023px) {
.casino-signup-offers-page .offer-card .mobile-claim-btn,
.no-wagering-page .offer-card .mobile-claim-btn,
.no-deposit-free-spins-page .offer-card .mobile-claim-btn,
.casino-bonus-page .offer-card .mobile-claim-btn,
.sports-offers-page .offer-card .mobile-claim-btn,
.blog-page .offer-card .mobile-claim-btn,
.blog-page #casino-offers-list .offer-card .mobile-claim-btn,
.blog-page #sports-offers-list .offer-card .mobile-claim-btn {
position: relative !important;
z-index: 2 !important;
transform: translateZ(0) !important; /* Promote to GPU layer - prevents scroll flicker */
backface-visibility: hidden !important;
isolation: isolate !important;
}
}
/* ========== MOBILE: Standardized spacing (all 6: casino-signup, sports-signup, casino-bonus, no-wagering, no-deposit, blog) ==========
Claim button: 1rem top and bottom. Key-terms-section: no padding/margin. Metrics bar: no vertical margin. */
@media (max-width: 1023px) {
.signup-offers-page .offer-card .mobile-claim-btn,
.signup-offers-page .offer-card .offer-actions,
.sports-offers-page .offer-card .mobile-claim-btn,
.sports-offers-page .offer-card .offer-actions,
.casino-bonus-page .offer-card .mobile-claim-btn,
.casino-bonus-page .offer-card .offer-actions,
.no-wagering-page .offer-card .mobile-claim-btn,
.no-wagering-page .offer-card .offer-actions,
.no-deposit-free-spins-page .offer-card .mobile-claim-btn,
.no-deposit-free-spins-page .offer-card .offer-actions,
.blog-page .offer-card .mobile-claim-btn,
.blog-page .offer-card .offer-actions,
.blog-page #casino-offers-list .offer-card .mobile-claim-btn,
.blog-page #casino-offers-list .offer-card .offer-actions,
.blog-page #sports-offers-list .offer-card .mobile-claim-btn,
.blog-page #sports-offers-list .offer-card .offer-actions {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.signup-offers-page .offer-card .key-terms-section,
.sports-offers-page .offer-card .key-terms-section,
.casino-bonus-page .offer-card .key-terms-section,
.no-wagering-page .offer-card .key-terms-section,
.no-deposit-free-spins-page .offer-card .key-terms-section,
.blog-page .offer-card .key-terms-section,
.blog-page #casino-offers-list .offer-card .key-terms-section,
.blog-page #sports-offers-list .offer-card .key-terms-section {
padding: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Metrics bar: no vertical margin so gap is only from claim button */
.signup-offers-page .offer-card .metrics-and-key-terms-block,
.signup-offers-page .offer-card .metrics-row,
.sports-offers-page .offer-card .metrics-and-key-terms-block,
.sports-offers-page .offer-card .metrics-row,
.casino-bonus-page .offer-card .metrics-and-key-terms-block,
.casino-bonus-page .offer-card .metrics-row,
.no-wagering-page .offer-card .metrics-and-key-terms-block,
.no-wagering-page .offer-card .metrics-row,
.no-deposit-free-spins-page .offer-card .metrics-and-key-terms-block,
.no-deposit-free-spins-page .offer-card .metrics-row,
.blog-page .offer-card .metrics-and-key-terms-block,
.blog-page .offer-card .metrics-row,
.blog-page #casino-offers-list .offer-card .metrics-and-key-terms-block,
.blog-page #casino-offers-list .offer-card .metrics-row,
.blog-page #sports-offers-list .offer-card .metrics-and-key-terms-block,
.blog-page #sports-offers-list .offer-card .metrics-row {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/* 768–1023px: same 1rem gap between metrics, claim and key terms on all 6 pages (overrides any tablet-only rules) */
@media (min-width: 768px) and (max-width: 1023px) {
.signup-offers-page .offer-card .mobile-claim-btn,
.signup-offers-page .offer-card .offer-actions,
.sports-offers-page .offer-card .mobile-claim-btn,
.sports-offers-page .offer-card .offer-actions,
.casino-bonus-page .offer-card .mobile-claim-btn,
.casino-bonus-page .offer-card .offer-actions,
.no-wagering-page .offer-card .mobile-claim-btn,
.no-wagering-page .offer-card .offer-actions,
.no-deposit-free-spins-page .offer-card .mobile-claim-btn,
.no-deposit-free-spins-page .offer-card .offer-actions,
.blog-page .offer-card .mobile-claim-btn,
.blog-page .offer-card .offer-actions,
.blog-page #casino-offers-list .offer-card .mobile-claim-btn,
.blog-page #casino-offers-list .offer-card .offer-actions,
.blog-page #sports-offers-list .offer-card .mobile-claim-btn,
.blog-page #sports-offers-list .offer-card .offer-actions {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.signup-offers-page .offer-card .key-terms-section,
.sports-offers-page .offer-card .key-terms-section,
.casino-bonus-page .offer-card .key-terms-section,
.no-wagering-page .offer-card .key-terms-section,
.no-deposit-free-spins-page .offer-card .key-terms-section,
.blog-page .offer-card .key-terms-section,
.blog-page #casino-offers-list .offer-card .key-terms-section,
.blog-page #sports-offers-list .offer-card .key-terms-section {
padding: 0 !important;
margin-top: 1rem !important;
margin-bottom: 0 !important;
}
.signup-offers-page .offer-card .metrics-and-key-terms-block,
.signup-offers-page .offer-card .metrics-row,
.sports-offers-page .offer-card .metrics-and-key-terms-block,
.sports-offers-page .offer-card .metrics-row,
.casino-bonus-page .offer-card .metrics-and-key-terms-block,
.casino-bonus-page .offer-card .metrics-row,
.no-wagering-page .offer-card .metrics-and-key-terms-block,
.no-wagering-page .offer-card .metrics-row,
.no-deposit-free-spins-page .offer-card .metrics-and-key-terms-block,
.no-deposit-free-spins-page .offer-card .metrics-row,
.blog-page .offer-card .metrics-and-key-terms-block,
.blog-page .offer-card .metrics-row,
.blog-page #casino-offers-list .offer-card .metrics-and-key-terms-block,
.blog-page #casino-offers-list .offer-card .metrics-row,
.blog-page #sports-offers-list .offer-card .metrics-and-key-terms-block,
.blog-page #sports-offers-list .offer-card .metrics-row {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
.casino-bonus-page .ranked-offer:last-child .offer-content-wrapper,
.no-deposit-free-spins-page .ranked-offer:last-child .offer-content-wrapper,
.no-wagering-page .ranked-offer:last-child .offer-content-wrapper,
.blog-page .ranked-offer:last-child .offer-content-wrapper {
border-bottom: none;
}
/* Sports (and blog sports): last offer on desktop – flat rigid bottom corners, no rounding */
.sports-offers-page .ranked-offer:last-child .offer-content-wrapper,
.blog-page #sports-offers-list .ranked-offer:last-child .offer-content-wrapper {
border-bottom: none;
}
@media (min-width: 1024px) {
.sports-offers-page .ranked-offer:last-child,
.blog-page #sports-offers-list .ranked-offer:last-child {
border-radius: 0.75rem 0.75rem 0 0 !important;
}
.sports-offers-page .ranked-offer:last-child .offer-content-wrapper,
.blog-page #sports-offers-list .ranked-offer:last-child .offer-content-wrapper {
border-radius: 0.375rem 0.375rem 0 0 !important;
}
.sports-offers-page .ranked-offer:last-child .rank-number,
.blog-page #sports-offers-list .ranked-offer:last-child .rank-number {
border-radius: 0 0 0 0 !important;
}
}
.casino-bonus-page .ranked-offer:hover,
.casino-bonus-page .offer-card.ranked-offer:hover,
.no-deposit-free-spins-page .ranked-offer:hover,
.no-deposit-free-spins-page .offer-card.ranked-offer:hover,
.no-wagering-page .ranked-offer:hover,
.no-wagering-page .offer-card.ranked-offer:hover,
.blog-page .ranked-offer:hover,
.blog-page .offer-card.ranked-offer:hover {
transform: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* No alternating – same as casino signup: all rows same, metrics bar slightly darker (single colour) */
.casino-bonus-page .ranked-offer .metrics-row,
.no-deposit-free-spins-page .ranked-offer .metrics-row,
.no-wagering-page .ranked-offer .metrics-row,
.blog-page .ranked-offer .metrics-row {
background: var(--metrics-bar-bg);
}
@media (min-width: 1024px) {
.casino-bonus-page .ranked-offer:first-child .rank-number,
.no-deposit-free-spins-page .ranked-offer:first-child .rank-number,
.no-wagering-page .ranked-offer:first-child .rank-number {
border-radius: 0.75rem 0 0 0 !important;
}
.casino-bonus-page .ranked-offer:last-child .rank-number,
.no-deposit-free-spins-page .ranked-offer:last-child .rank-number,
.no-wagering-page .ranked-offer:last-child .rank-number {
border-radius: 0 0 0 0.75rem !important; /* Bottom-right flat; bottom-left rounded */
}
.casino-bonus-page .ranked-offer:not(:first-child):not(:last-child) .rank-number,
.no-deposit-free-spins-page .ranked-offer:not(:first-child):not(:last-child) .rank-number,
.no-wagering-page .ranked-offer:not(:first-child):not(:last-child) .rank-number {
border-radius: 0 !important;
}
}
@media (max-width: 1023px) {
.casino-bonus-page .offers-list,
.no-deposit-free-spins-page .offers-list,
.no-wagering-page .offers-list {
border-radius: 0 !important;
padding: 0 !important;
}
.casino-bonus-page .ranked-offer .rank-number,
.casino-bonus-page .ranked-offer:first-child .rank-number,
.casino-bonus-page .ranked-offer:first-child .rank-number.rank-gold,
.no-deposit-free-spins-page .ranked-offer .rank-number,
.no-deposit-free-spins-page .ranked-offer:first-child .rank-number,
.no-wagering-page .ranked-offer .rank-number,
.no-wagering-page .ranked-offer:first-child .rank-number,
.no-wagering-page .ranked-offer:first-child .rank-number.rank-gold,
.blog-page .ranked-offer .rank-number,
.blog-page .ranked-offer:first-child .rank-number,
.blog-page .ranked-offer:first-child .rank-number.rank-gold {
border-radius: 0 !important;
}
.casino-bonus-page .ranked-offer.offer-card,
.casino-bonus-page .offer-card.ranked-offer,
.no-deposit-free-spins-page .ranked-offer.offer-card,
.no-deposit-free-spins-page .offer-card.ranked-offer,
.no-wagering-page .ranked-offer.offer-card,
.no-wagering-page .offer-card.ranked-offer,
.blog-page .ranked-offer.offer-card,
.blog-page .offer-card.ranked-offer {
padding: 0 !important;
}
.casino-bonus-page .offers-list,
.no-deposit-free-spins-page .offers-list,
.no-wagering-page .offers-list,
.blog-page .offers-list,
.blog-page #casino-offers-list,
.blog-page #sports-offers-list {
padding: 0 !important;
}
}
/* Mobile: larger bookmaker/casino logo on offer pages (same logic as casino signup) */
@media (max-width: 767px) {
.signup-offers-page .casino-logo,
.casino-signup-offers-page .casino-logo,
.sports-offers-page .casino-logo,
.casino-bonus-page .casino-logo,
.no-deposit-free-spins-page .casino-logo,
.no-wagering-page .casino-logo,
.blog-page .casino-logo {
width: 140px !important;
height: 70px !important;
}
.signup-offers-page .logo-section,
.casino-signup-offers-page .logo-section,
.casino-bonus-page .logo-section,
.no-deposit-free-spins-page .logo-section,
.no-wagering-page .logo-section,
.blog-page .logo-section {
width: 140px !important;
min-width: 140px !important;
}
/* Sports mobile: SAME logo dimensions as casino (140x70, 140px logo-section) - EXACT same logic; blog sports = carbon copy */
.sports-offers-page .logo-section,
.sports-offers-page .offer-card .logo-section,
.sports-offers-page .offer-card .offer-top-row .logo-section,
.blog-page #sports-offers-list .offer-card .logo-section,
.blog-page #sports-offers-list .offer-card .offer-top-row .logo-section {
width: 140px !important;
min-width: 140px !important;
max-width: 140px !important;
flex: 0 0 140px !important;
align-items: flex-start !important;
justify-content: flex-start !important;
align-self: flex-start !important;
}
/* Sports mobile: SAME logo image as casino (140x70) - blog sports = carbon copy */
.sports-offers-page .casino-logo,
.sports-offers-page .offer-card .casino-logo,
.blog-page #sports-offers-list .offer-card .casino-logo {
width: 140px !important;
height: 70px !important;
max-width: 140px !important;
object-fit: contain !important;
}
/* Sports mobile: offer-details gets MORE width (0.25rem gap) - blog sports = carbon copy */
.sports-offers-page .offer-card .offer-top-row .offer-details,
.blog-page #sports-offers-list .offer-card .offer-top-row .offer-details {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: calc(100% - 140px - 0.25rem) !important;
margin-left: 0 !important;
}
/* Casino mobile: offer-details gets MORE width (0.25rem gap) - same as sports for better blurb wrapping */
.signup-offers-page .offer-card .offer-top-row .offer-details,
.casino-signup-offers-page .offer-card .offer-top-row .offer-details,
.no-deposit-free-spins-page .offer-card .offer-top-row .offer-details,
.no-wagering-page .offer-card .offer-top-row .offer-details,
.casino-bonus-page .offer-card .offer-top-row .offer-details {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: calc(100% - 140px - 0.25rem) !important; /* Logo 140px + gap 0.25rem = more width for blurb */
margin-left: 0 !important;
}
}
.signup-offers-page .offer-card .logo-section,
.casino-signup-offers-page .offer-card .logo-section,
.sports-offers-page .offer-card .logo-section,
.no-wagering-page .offer-card .logo-section,
.blog-page #casino-offers-list .offer-card .logo-section,
.blog-page #sports-offers-list .offer-card .logo-section {
position: relative !important; /* Make logo-section positioning context */
overflow: visible !important; /* Ensure popup isn't clipped */
z-index: 999999 !important; /* Very high z-index for popup context */
}
/* Ensure logo-section and all children hide on navigation */
.signup-offers-page .offer-card .logo-section img,
.no-wagering-page .offer-card .logo-section img,
.signup-offers-page .casino-logo,
.no-wagering-page .casino-logo {
/* Will be hidden via inline styles in navigation.js */
}
/* Ensure UKGC popup wrapper doesn't keep logos visible */
.signup-offers-page .ukgc-popup-wrapper,
.no-wagering-page .ukgc-popup-wrapper {
/* Will be hidden via inline styles in navigation.js if contains logo */
}
.signup-offers-page .offer-card .logo-section .ukgc-popup-wrapper,
.no-wagering-page .offer-card .logo-section .ukgc-popup-wrapper {
position: relative !important;
display: inline-block !important;
z-index: 999999 !important; /* Ensure wrapper is above everything */
}
.signup-offers-page .offer-card .logo-section .ukgc-popup,
.no-wagering-page .offer-card .logo-section .ukgc-popup {
position: absolute !important;
top: 100% !important;
left: 50% !important; /* Center horizontally */
transform: translateX(-50%) translateY(6px) !important; /* Center and vertical offset */
min-width: 220px !important; /* Reduced from 260px */
max-width: 260px !important; /* Reduced from 320px */
z-index: 999999 !important; /* Very high z-index to appear above all content */
background: #fff !important;
border: 1px solid rgba(2,46,74,0.15) !important;
border-radius: 8px !important;
box-shadow: 0 12px 24px rgba(2,46,74,0.18) !important;
}
.signup-offers-page .offer-card .logo-section .ukgc-popup.show,
.no-wagering-page .offer-card .logo-section .ukgc-popup.show {
transform: translateX(-50%) translateY(0) !important; /* Center and no vertical offset when showing */
pointer-events: all !important;
opacity: 1 !important;
}
/* Mobile: hide license/UKGC hover popup on all offer pages (no popup on tap/hover) */
@media (max-width: 767px) {
.signup-offers-page .ukgc-popup,
.casino-signup-offers-page .ukgc-popup,
.casino-bonus-page .ukgc-popup,
.no-deposit-free-spins-page .ukgc-popup,
.no-wagering-page .ukgc-popup,
.blog-page .ukgc-popup,
.sports-offers-page .ukgc-popup {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
.ukgc-popup-inner {
padding: 8px 10px !important; /* Further reduced padding */
font-weight: normal !important; /* Override hero-author-info bold */
word-wrap: break-word !important; /* Prevent text overflow */
overflow-wrap: break-word !important; /* Prevent text overflow */
box-sizing: border-box !important; /* Ensure padding is included */
max-width: 100% !important; /* Prevent overflow */
}
.ukgc-popup-header {
font-weight: 700 !important; /* Header bold */
color: #022e4a;
margin-bottom: 3px !important; /* Further reduced margin */
font-size: 0.7rem !important; /* Super small header - similar to key terms */
}
.ukgc-popup-body {
font-size: 0.65rem !important; /* Even smaller - from 0.75rem */
color: #20242e;
font-weight: normal !important; /* Body normal weight */
line-height: 1.3 !important; /* Tighter line height */
word-wrap: break-word !important; /* Prevent text overflow */
overflow-wrap: break-word !important; /* Prevent text overflow */
max-width: 100% !important; /* Prevent overflow */
}
.ukgc-popup-body div {
font-weight: normal !important; /* All divs normal */
font-size: 0.65rem !important; /* Even smaller text */
margin-bottom: 2px !important; /* Further reduced spacing */
word-wrap: break-word !important; /* Prevent text overflow */
overflow-wrap: break-word !important; /* Prevent text overflow */
max-width: 100% !important; /* Prevent overflow */
}
.ukgc-popup-body strong {
font-weight: 700 !important; /* Only tags bold (labels like "License holder:") */
font-size: 0.65rem !important; /* Even smaller bold text */
}
.ukgc-popup-body a {
color: var(--primary-cta);
text-decoration: underline;
font-weight: normal !important; /* Links normal */
}
.ukgc-link-bottom {
margin-top: 6px !important; /* Further reduced from 8px */
padding-top: 6px !important; /* Further reduced from 8px */
border-top: 1px solid rgba(2,46,74,0.1); /* Subtle divider */
font-size: 0.65rem !important; /* Even smaller link text */
}
/* More specific selector to override .ukgc-popup-body a and hero-author-info bold */
.ukgc-popup .ukgc-popup-body .ukgc-link-bottom a,
.ukgc-popup-body .ukgc-link-bottom a,
.ukgc-link-bottom a {
color: var(--primary-cta) !important;
font-weight: 700 !important; /* Bold as requested */
text-decoration: underline !important;
}
/* Also override hero-author-info bold inheritance */
.hero-author-info .ukgc-popup .ukgc-link-bottom a {
font-weight: 700 !important;
}
.ukgc-domains {
margin-top: 3px !important; /* Further reduced from 4px */
font-weight: normal !important;
font-size: 0.65rem !important; /* Even smaller text */
}
.ukgc-domains strong {
font-weight: 700 !important; /* "Domains:" label bold */
font-size: 0.65rem !important; /* Even smaller bold text */
}
.ukgc-domains ul {
margin: 2px 0 0 12px !important; /* Further reduced margins */
padding: 0;
font-weight: normal !important;
font-size: 0.65rem !important; /* Even smaller list text */
}
.ukgc-domains li {
list-style: disc;
margin: 1px 0 !important; /* Keep minimal spacing */
font-weight: normal !important; /* Domain values normal */
font-size: 0.65rem !important; /* Even smaller list item text */
}
/* FORCE OVERRIDE - Betting sites terms modal */
.betting-sites-page .terms-modal {
width: 90% !important;
max-width: 600px !important;
padding: 2rem !important;
height: auto !important;
min-height: 300px !important;
display: block !important;
}
.betting-sites-page .terms-modal h2 {
text-align: center !important;
margin: 0 0 2rem 0 !important;
color: #022e4a !important;
font-size: var(--fs-h2) !important;
font-weight: 700 !important;
display: block !important;
position: static !important;
}
.betting-sites-page .terms-modal .terms-text {
text-align: center !important;
margin: 2rem 0 !important;
font-size: var(--fs-base) !important;
line-height: 1.6 !important;
color: #20242e !important;
display: block !important;
position: static !important;
max-height: none !important;
overflow: visible !important;
height: auto !important;
min-height: 100px !important;
}
.betting-sites-page .terms-modal .claim-offer-btn {
display: block !important;
width: 100% !important;
padding: 1rem 2rem !important;
background: #00cc5a !important;
color: #20242e !important;
text-decoration: none !important;
border-radius: 0.5rem !important;
font-size: var(--fs-base) !important;
font-weight: 700 !important;
text-align: center !important;
margin-top: 2rem !important;
position: static !important;
float: none !important;
}
/* Responsive breakpoints matching pq-bottom-email-container */
@media (max-width: 767px) {
.betting-sites-page .terms-modal {
padding: 1.5rem !important;
min-height: 250px !important;
}
.betting-sites-page .terms-modal h2 {
margin: 0 0 1.5rem 0 !important;
}
.betting-sites-page .terms-modal .terms-text {
margin: 1.5rem 0 !important;
min-height: 80px !important;
}
.betting-sites-page .terms-modal .claim-offer-btn {
padding: 0.75rem 1.5rem !important;
margin-top: 1.5rem !important;
}
}
@media (max-width: 480px) {
.betting-sites-page .terms-modal {
padding: 1rem !important;
min-height: 200px !important;
}
.betting-sites-page .terms-modal h2 {
margin: 0 0 1rem 0 !important;
}
.betting-sites-page .terms-modal .terms-text {
margin: 1rem 0 !important;
min-height: 60px !important;
}
.betting-sites-page .terms-modal .claim-offer-btn {
margin-top: 1rem !important;
}
}
/* Make all game boxes (jackpot, daily, and offers) use the same box logic and sizing */
.betting-sites-page .horizontal-game-box.jackpot-game,
.betting-sites-page .horizontal-game-box.daily-game,
.betting-sites-page .horizontal-game-box.offers-box {
min-height: 100px !important;
height: 100px !important;
position: relative !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
background: rgba(255,255,255,.1) !important;
border: none !important;
border-radius: var(--box-border-radius) !important;
padding: .75rem !important;
margin-bottom: .75rem !important;
width: 100% !important;
gap: .5rem !important;
transition: transform .2s !important;
box-sizing: border-box !important;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12) !important;
}
@media (hover: hover) {
.betting-sites-page .horizontal-game-box.jackpot-game:hover,
.betting-sites-page .horizontal-game-box.daily-game:hover,
.betting-sites-page .horizontal-game-box.offers-box:hover {
transform: translateY(-2px) !important;
}
}
/* Ensure offers blurbs have the same height as competition blurbs */
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-content {
min-height: 60px !important;
height: 60px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Ensure consistent sizing across all screen sizes */
@media (min-width: 768px) {
.betting-sites-page .horizontal-game-box.jackpot-game,
.betting-sites-page .horizontal-game-box.daily-game,
.betting-sites-page .horizontal-game-box.offers-box {
min-height: 120px !important;
height: 120px !important;
padding: 1rem !important;
margin-bottom: 1rem !important;
gap: .75rem !important;
}
.betting-sites-page .horizontal-game-blurb,
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-blurb {
font-size: 1.1rem !important;
line-height: 1.4 !important;
}
}
@media (min-width: 1024px) {
.betting-sites-page .horizontal-game-box.jackpot-game,
.betting-sites-page .horizontal-game-box.daily-game,
.betting-sites-page .horizontal-game-box.offers-box {
min-height: 120px !important;
height: 120px !important;
padding: 1rem !important;
margin-bottom: 1rem !important;
gap: .75rem !important;
}
}
@media (min-width: 1280px) {
.betting-sites-page .horizontal-game-box.jackpot-game,
.betting-sites-page .horizontal-game-box.daily-game,
.betting-sites-page .horizontal-game-box.offers-box {
min-height: 120px !important;
height: 120px !important;
padding: 1.25rem !important;
margin-bottom: 1.25rem !important;
gap: 1rem !important;
}
}
@media (min-width: 1536px) {
.betting-sites-page .horizontal-game-box.jackpot-game,
.betting-sites-page .horizontal-game-box.daily-game,
.betting-sites-page .horizontal-game-box.offers-box {
min-height: 120px !important;
height: 120px !important;
padding: 1.5rem !important;
margin-bottom: 1.5rem !important;
gap: 1.25rem !important;
}
}
/* === EXACT COLOR ASSIGNMENTS: SOLID COLORS ONLY === */
/* Loading overlay: solid dark */
.loading-overlay {
background: linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%) !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Header and Footer: #0f1923 */
header, nav, footer {
background-color: #0f1923 !important;
}
/* Additional offer text color: #20242e */
.additional-offer {
color: #20242e !important;
}
/* Offer blurb text – same class/styling on casino-bonus, no-deposit, no-wagering, casino-signup, sports-signup, betquest-blog */
.signup-offers-page .offer-blurb-text,
.no-wagering-page .offer-blurb-text,
.casino-bonus-page .offer-blurb-text,
.sports-offers-page .offer-blurb-text,
.blog-page .offer-blurb-text {
text-align: center;
text-transform: uppercase;
line-height: 1.2;
margin: 0;
padding: 0;
}
/* Desktop: first line 30px, second 20px, third+ 18px */
.signup-offers-page .offer-blurb-text .main-text,
.no-wagering-page .offer-blurb-text .main-text,
.casino-bonus-page .offer-blurb-text .main-text,
.sports-offers-page .offer-blurb-text .main-text,
.blog-page .offer-blurb-text .main-text {
font-size: 30px !important;
font-weight: 700;
color: #20242e;
margin: 0;
line-height: 1.1;
}
.signup-offers-page .offer-blurb-text .secondary-text,
.no-wagering-page .offer-blurb-text .secondary-text,
.casino-bonus-page .offer-blurb-text .secondary-text,
.sports-offers-page .offer-blurb-text .secondary-text,
.blog-page .offer-blurb-text .secondary-text {
font-size: 20px !important;
font-weight: 700;
color: #20242e;
margin: 0;
line-height: 1.1;
}
.signup-offers-page .offer-blurb-text .tertiary-text,
.no-wagering-page .offer-blurb-text .tertiary-text,
.casino-bonus-page .offer-blurb-text .tertiary-text,
.sports-offers-page .offer-blurb-text .tertiary-text,
.blog-page .offer-blurb-text .tertiary-text {
font-size: 18px !important;
font-weight: 700;
color: #20242e;
margin: 0;
line-height: 1.1;
}
/* Mobile: first line 24px, second 15px, third+ 18px */
@media (max-width: 767px) {
.signup-offers-page .offer-blurb-text .main-text,
.no-wagering-page .offer-blurb-text .main-text,
.casino-bonus-page .offer-blurb-text .main-text,
.sports-offers-page .offer-blurb-text .main-text,
.blog-page .offer-blurb-text .main-text {
font-size: 24px !important;
font-weight: 700 !important;
}
.signup-offers-page .offer-blurb-text .secondary-text,
.no-wagering-page .offer-blurb-text .secondary-text,
.casino-bonus-page .offer-blurb-text .secondary-text,
.sports-offers-page .offer-blurb-text .secondary-text,
.blog-page .offer-blurb-text .secondary-text {
font-size: 15px !important;
font-weight: 700 !important;
}
.signup-offers-page .offer-blurb-text .tertiary-text,
.no-wagering-page .offer-blurb-text .tertiary-text,
.casino-bonus-page .offer-blurb-text .tertiary-text,
.sports-offers-page .offer-blurb-text .tertiary-text,
.blog-page .offer-blurb-text .tertiary-text {
font-size: 18px !important;
font-weight: 700 !important;
}
}
/* 540px-767px: offer blurb first line 30px, second 20px (in-between dimension) */
@media (min-width: 540px) and (max-width: 767px) {
.signup-offers-page .offer-blurb-text .main-text,
.no-wagering-page .offer-blurb-text .main-text,
.casino-bonus-page .offer-blurb-text .main-text,
.sports-offers-page .offer-blurb-text .main-text,
.blog-page .offer-blurb-text .main-text {
font-size: 30px !important;
}
.signup-offers-page .offer-blurb-text .secondary-text,
.no-wagering-page .offer-blurb-text .secondary-text,
.casino-bonus-page .offer-blurb-text .secondary-text,
.sports-offers-page .offer-blurb-text .secondary-text,
.blog-page .offer-blurb-text .secondary-text {
font-size: 20px !important;
}
}
/* Mobile: blurb centred; give offer-details MORE WIDTH so more words fit on one line */
@media (max-width: 767px) {
/* Casino pages mobile: NO padding on offer-details to maximize blurb width - EXACT same as sports */
/* This allows "160 FREE SPINS" on one line and "WHEN YOU PLAY £10" on two lines instead of four */
.signup-offers-page .offer-top-row .offer-details,
.signup-offers-page .offer-card .offer-top-row .offer-details,
.casino-signup-offers-page .offer-card .offer-top-row .offer-details,
.casino-bonus-page .offer-top-row .offer-details,
.casino-bonus-page .offer-card .offer-top-row .offer-details,
.no-deposit-free-spins-page .offer-top-row .offer-details,
.no-deposit-free-spins-page .offer-card .offer-top-row .offer-details,
.no-wagering-page .offer-top-row .offer-details,
.no-wagering-page .offer-card .offer-top-row .offer-details,
.blog-page .offer-top-row .offer-details {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
flex: 1 !important;
min-width: 0 !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding: 0 !important;
text-align: center !important;
}
/* Sports mobile: NO padding on offer-details to maximize blurb width – same for blog sports section */
.sports-offers-page .offer-card .offer-top-row .offer-details,
.blog-page #sports-offers-list .offer-card .offer-top-row .offer-details {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
flex: 1 !important;
min-width: 0 !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding: 0 !important;
text-align: center !important;
}
/* Casino/signup mobile: blog casino section uses same as casino-signup page */
.blog-page #casino-offers-list .offer-card .offer-top-row .offer-details {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
flex: 1 !important;
min-width: 0 !important;
max-width: 100% !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
text-align: center !important;
}
}
/* Tablet row layout: give offer-details more of the row – blog sports = carbon copy of sports page */
@media (min-width: 550px) and (max-width: 767px) {
.signup-offers-page .offer-top-row .offer-details,
.casino-bonus-page .offer-top-row .offer-details,
.no-deposit-free-spins-page .offer-top-row .offer-details,
.no-wagering-page .offer-top-row .offer-details,
.blog-page .offer-top-row .offer-details,
.blog-page #casino-offers-list .offer-card .offer-top-row .offer-details,
.sports-offers-page .offer-card .offer-top-row .offer-details,
.blog-page #sports-offers-list .offer-card .offer-top-row .offer-details {
flex: 1 1 65% !important;
}
.signup-offers-page .offer-top-row .logo-section,
.casino-bonus-page .offer-top-row .logo-section,
.no-deposit-free-spins-page .offer-top-row .logo-section,
.no-wagering-page .offer-top-row .logo-section,
.blog-page .offer-top-row .logo-section,
.blog-page #casino-offers-list .offer-card .offer-top-row .logo-section {
flex: 0 0 32% !important;
max-width: 32% !important;
}
/* Sports: fixed logo width – blog sports = carbon copy */
.sports-offers-page .offer-card .offer-top-row .logo-section,
.blog-page #sports-offers-list .offer-card .offer-top-row .logo-section {
flex: 0 0 120px !important;
min-width: 120px !important;
max-width: 120px !important;
}
}
@media (max-width: 767px) {
.signup-offers-page .offer-top-row .offer-details .offer-blurb-text,
.casino-bonus-page .offer-top-row .offer-details .offer-blurb-text,
.no-deposit-free-spins-page .offer-top-row .offer-details .offer-blurb-text,
.no-wagering-page .offer-top-row .offer-details .offer-blurb-text,
.blog-page .offer-top-row .offer-details .offer-blurb-text,
.blog-page #casino-offers-list .offer-card .offer-top-row .offer-details .offer-blurb-text,
.sports-offers-page .offer-card .offer-top-row .offer-details .offer-blurb-text,
.sports-offers-page .offer-card .offer-blurb-text,
.blog-page #sports-offers-list .offer-card .offer-top-row .offer-details .offer-blurb-text {
text-align: center !important;
}
}
.additional-offer p,
.additional-offer span,
.additional-offer small {
color: #20242e !important;
font-weight: bold !important;
font-size: 16px !important; /* ONLY increased blurb text size */
}
/* Make bookmaker name and offer title bold */
.additional-offer p span,
.additional-offer > span {
font-weight: bold !important;
text-align: center !important;
line-height: 1.4 !important;
display: block !important;
white-space: normal !important; /* CRITICAL: Allow br tags to work */
}
/* Keep terms text normal weight */
.additional-offer small {
font-weight: normal !important;
}
.competition-box-grid .timer {
font-size:clamp(6px, 1vw, 9px)!important;
color:#00cc5a;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
width:100%;
margin:0 auto;
}
/* Mobile-specific competition box layout - only affects screens below 768px */
@media (max-width: 767px) {
.competition-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.5rem 0.375rem !important;
padding: 0 0.75rem !important;
}
}
/* Extra small mobile devices */
@media (max-width: 480px) {
.competition-grid {
gap: 0.5rem 0.375rem !important;
padding: 4px 8px !important;
}
}
/* Mobile-specific competition box layout - consolidated rules (removed duplicate) */
@media (max-width: 499px) {
/* Competition box mobile - small devices */
.competition-box {
max-width: 195px !important;
width: 100% !important;
aspect-ratio: 0.4 !important;
max-height: 180px !important;
margin: 0 auto !important;
border-radius: 0.5rem !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
gap: 0 !important;
}
}
/* Small mobile devices - keep fixed sizes */
@media (max-width: 499px) {
.competition-box {
max-width: 195px !important;
width: 100% !important;
aspect-ratio: 0.4 !important;
max-height: 180px !important;
margin: 0 auto !important;
border-radius: 0.5rem !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
gap: 0 !important;
}
.competition-image {
height: 120px !important;
flex-shrink: 0 !important;
}
.competition-top-border {
min-height: 40px !important;
padding: 0.25rem 0.5rem !important;
}
}
/* Shared mobile styles for both small and scaling ranges */
@media (max-width: 767px) {
.competition-box:hover {
transform: translateY(-3px) !important;
}
.competition-image img {
object-fit: contain !important;
width: 100% !important;
height: 100% !important;
}
.competition-top-border {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-shrink: 0 !important;
}
.bookmaker-logo {
position: relative !important;
left: auto !important;
transform: none !important;
top: auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
min-width: auto !important;
flex-shrink: 0 !important;
}
.competition-top-border .timer:not(.skeleton-shimmer) {
left: auto !important;
transform: none !important;
top: auto !important;
flex-shrink: 0 !important;
margin-left: auto !important;
}
/* Mobile timer skeleton - use same positioning as loaded timer */
.competition-top-border .timer.skeleton-shimmer {
position: relative !important;
left: auto !important;
transform: none !important;
top: auto !important;
right: auto !important;
flex-shrink: 0 !important;
margin-left: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
width: auto !important;
min-width: auto !important;
max-width: 95px !important;
background: transparent !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
}
/* Skeleton loader fixes for mobile - ensure they use same classes as loaded content */
.competition-image.skeleton-shimmer {
/* Height comes from .competition-image mobile rules (120px at 767px, 100px at 480px) */
flex-shrink: 0 !important;
}
.bookmaker-logo.skeleton-shimmer {
margin: 0 !important;
padding: 0 !important;
}
.bookmaker-logo.skeleton-shimmer .logo-wrapper {
margin: 0 !important;
padding: 0 !important;
}
.timer.skeleton-shimmer {
margin-left: auto !important;
margin-right: 0 !important;
margin-top: auto !important;
margin-bottom: auto !important;
width: auto !important;
min-width: auto !important;
display: flex !important;
align-items: center !important;
}
.timer .skeleton-shimmer {
width: 95px !important;
max-width: 95px !important;
min-width: 95px !important;
display: inline-block !important;
}
/* Ensure logo and timer are separate - no connection */
.competition-top-border.skeleton-shimmer {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.play-now-button.skeleton-shimmer {
font-size: 12px !important;
padding: 0.25rem 0.5rem !important;
min-height: 35px !important;
height: auto !important;
width: 100% !important;
margin: 0 !important;
margin-top: auto !important;
}
.bookmaker-logo img {
max-width: 48px !important;
max-height: 24px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
.competition-bottom-border {
padding: 0.5rem 0.5rem 0.375rem 0.5rem !important;
min-height: auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: center !important;
flex-grow: 1 !important;
position: relative !important;
}
.competition-blurb {
position: absolute !important;
top: 35% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: calc(100% - 1rem) !important;
padding: 4px 8px !important;
margin: 0 !important;
text-align: center !important;
font-size: 12px !important;
line-height: 1.3 !important;
z-index: 1 !important;
}
.play-now-button {
position: relative !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
margin: 0 !important;
margin-top: auto !important;
padding: 0.25rem 0.5rem !important;
font-size: 12px !important;
min-height: 35px !important;
flex-shrink: 0 !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 2 !important;
}
.competition-bottom-border .checked {
display: none !important;
}
/* Override any inline styles for jackpot competitions page */
.jackpot-competitions-page .competition-top-border .bookmaker-logo img,
.daily-free-games-page .competition-top-border .bookmaker-logo img {
max-width: 48px !important;
max-height: 24px !important;
width: auto !important;
height: auto !important;
min-width: auto !important;
min-height: auto !important;
aspect-ratio: auto !important;
}
.competition-top-border {
min-height: 28px !important; /* Reduced to match smaller logo */
padding: 0.25rem 0.5rem !important; /* Reduced padding */
}
/* REMOVED: Conflicting bottom border, blurb, and button rules - using main mobile rules at line 6954 instead */
}
/* Extra small mobile devices */
@media (max-width: 480px) {
.competition-box {
max-width: 180px !important;
aspect-ratio: 0.4 !important; /* Much shorter */
}
.competition-image {
height: 100px !important;
}
.competition-image img {
object-fit: contain !important; /* Show full image without cropping */
}
.bookmaker-logo img {
max-width: 48px !important;
max-height: 24px !important;
width: auto !important;
height: auto !important;
min-width: auto !important;
min-height: auto !important;
aspect-ratio: auto !important;
}
/* Override any inline styles for jackpot competitions page */
.jackpot-competitions-page .competition-top-border .bookmaker-logo img {
max-width: 48px !important;
max-height: 24px !important;
width: auto !important;
height: auto !important;
min-width: auto !important;
min-height: auto !important;
aspect-ratio: auto !important;
}
.competition-top-border {
min-height: 24px !important; /* Reduced to match smaller logo */
padding: 0.1875rem 0.375rem !important; /* Reduced padding */
}
/* REMOVED: Conflicting bottom border rules - using main mobile rules instead */
}
/* REMOVED: Duplicate mobile rules - consolidated into single @media (max-width: 767px) block at line 6868 */
/* Remove key terms from offers-box and increase font sizes */
.offers-box .offer-content small {
display: none !important; /* Hide key terms completely */
}
/* Increase font sizes for better readability */
.offers-box h3 {
font-size: 16px !important; /* Increased from 12px */
font-weight: 700;
color: var(--primary-cta);
text-align: left;
margin: 0 0 0.5rem;
}
.offers-box .offer-content p {
font-size: 16px !important; /* Increased from 12px */
font-weight: 600;
color: #20242e;
margin: 0 0 0.5rem;
text-align: left;
line-height: 1.3;
}
/* Responsive font sizes for different screen sizes */
@media (max-width: 767px) {
.offers-box h3 {
font-size: 18px !important; /* Increased from 14px */
margin-bottom: 0.75rem;
}
.offers-box .offer-content p {
font-size: 18px !important; /* Increased from 14px */
margin-bottom: 0.75rem;
}
}
@media (max-width: 479px) {
.offers-box h3 {
font-size: 16px !important; /* Increased from 11px */
margin-bottom: 0.5rem;
}
.offers-box .offer-content p {
font-size: 16px !important; /* Increased from 12px */
margin-bottom: 0.5rem;
}
}
@media (max-width: 380px) {
.offers-box h3 {
font-size: 14px !important; /* Increased from 10px */
margin-bottom: 0.5rem;
}
.offers-box .offer-content p {
font-size: 14px !important; /* Increased from 11px */
margin-bottom: 0.5rem;
}
}
/* Remove key terms from offers-box and increase font sizes */
.offers-box .offer-content small {
display: none !important; /* Hide key terms completely */
}
/* Enhanced offers-box styling with dynamic height - no default background */
.offers-box {
width: 100% !important;
max-width: 100% !important;
/* No default background - JavaScript will set it immediately */
border: none !important;
border-radius: 0.75rem !important;
text-align: center !important;
color: #f0f0f0 !important; /* Default to white text - prevent black flash */
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
opacity: 1 !important;
transition: opacity 0.3s ease-in-out !important;
padding: 1.5rem 1.25rem !important; /* Set initial padding to prevent shift */
gap: 1.25rem !important; /* Set initial gap */
justify-content: flex-start !important; /* Set initial alignment */
align-items: center !important; /* Set initial alignment */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.15) !important; /* Set initial shadow */
position: relative !important; /* Ensure positioning */
}
/* REMOVED: .offers-box.loaded - No longer using 'loaded' class, styles applied inline */
/* Enhanced header styling - top section */
.offers-box .offer-header {
font-size: 1rem !important;
font-weight: 400 !important;
font-style: italic !important;
/* color: removed - let inline style from JS control this */
text-align: center !important;
margin: 0 !important;
line-height: 1.2 !important;
flex-shrink: 0 !important;
width: 100% !important;
position: relative !important; /* Ensure positioning */
top: auto !important; /* Reset any absolute positioning */
}
/* Enhanced offer text styling - middle section */
.offers-box .offer-blurb-text {
text-align: center !important;
line-height: 1.2 !important;
margin: 0 !important;
width: 100% !important;
flex-grow: 0 !important; /* Don't grow, let content determine size */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 0.3rem !important; /* Small gap between lines */
color: #f0f0f0 !important; /* Ensure white text from start */
}
.offers-box .offer-blurb-text .main-text {
font-size: 1.5rem !important; /* Reduced from 1.6rem for better fit */
font-weight: 800 !important;
color: #f0f0f0 !important; /* Ensure white text from start */
margin: 0 !important;
line-height: 1.1 !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
display: block !important; /* Ensure proper display */
width: 100% !important; /* Ensure full width */
}
.offers-box .offer-blurb-text .secondary-text {
font-size: 1.1rem !important; /* Reduced from 1.2rem */
font-weight: 700 !important;
color: #f0f0f0 !important; /* Ensure white text from start */
margin: 0 !important;
line-height: 1.1 !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
display: block !important; /* Ensure proper display */
width: 100% !important; /* Ensure full width */
}
.offers-box .offer-blurb-text .tertiary-text {
font-size: 0.9rem !important; /* Reduced from 1rem */
font-weight: 700 !important;
color: #f0f0f0 !important; /* Ensure white text from start */
margin: 0 !important;
line-height: 1.1 !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
display: block !important; /* Ensure proper display */
width: 100% !important; /* Ensure full width */
}
/* Enhanced claim button - bottom section */
/* Loading state for offers-box */
.offers-box .loading-offer-content {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
height: 100% !important;
width: 100% !important;
}
.offers-box .offer-loading-spinner {
width: 30px !important;
height: 30px !important;
border: 3px solid rgba(255, 255, 255, 0.2) !important;
border-top: 3px solid rgba(255, 255, 255, 0.8) !important;
border-radius: 50% !important;
animation: spin 1s linear infinite !important;
}
.offers-box .enhanced-claim-button {
background: linear-gradient(135deg, #00cc5a, #00b852) !important;
color: white !important;
border: none !important;
border-radius: 0.5rem !important;
padding: 1rem 3rem !important;
font-size: 1rem !important;
font-weight: 700 !important;
min-width: 220px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
text-align: center !important;
min-width: 180px !important;
width: auto !important; /* Ensure proper width */
height: auto !important; /* Ensure proper height */
margin: 0 auto !important;
box-shadow: 0 4px 12px rgba(0, 204, 90, 0.3) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
flex-shrink: 0 !important;
display: inline-block !important; /* Ensure proper display */
box-sizing: border-box !important; /* Ensure proper sizing */
}
@media (hover: hover) {
.offers-box .enhanced-claim-button:hover {
background: linear-gradient(135deg, #00b852, #00a048) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(0, 204, 90, 0.4) !important;
}
}
/* Responsive sizing for enhanced offers-box */
@media (max-width: 767px) {
.offers-box {
min-height: 30px !important; /* HALF the previous size */
height: auto !important; /* Dynamic height on mobile */
padding: 0.25rem !important; /* Much smaller mobile padding */
gap: 0.05rem !important; /* Minimal gap on mobile */
}
.offers-box .offer-header {
font-size: 0.85rem !important;
}
.offers-box .offer-blurb-text .main-text {
font-size: 1.1rem !important; /* Reduced for mobile */
}
.offers-box .offer-blurb-text .secondary-text {
font-size: 0.9rem !important;
}
.offers-box .offer-blurb-text .tertiary-text {
font-size: 0.75rem !important;
}
.offers-box .enhanced-claim-button {
font-size: 0.8rem !important;
padding: 0.6rem 1.5rem !important;
min-width: 150px !important;
}
}
@media (max-width: 480px) {
.offers-box {
min-height: 25px !important; /* HALF the previous size */
height: auto !important; /* Dynamic height on small mobile */
padding: 0.2rem !important; /* Much smaller small mobile padding */
gap: 0.05rem !important; /* Minimal spacing on small mobile */
}
.offers-box .offer-header {
font-size: 0.75rem !important;
}
.offers-box .offer-blurb-text .main-text {
font-size: 0.95rem !important; /* Reduced for small mobile */
}
.offers-box .offer-blurb-text .secondary-text {
font-size: 0.8rem !important;
}
.offers-box .offer-blurb-text .tertiary-text {
font-size: 0.65rem !important;
}
.offers-box .enhanced-claim-button {
font-size: 0.75rem !important;
padding: 0.5rem 1.25rem !important;
min-width: 130px !important;
}
}
/* Legacy h3 styling for fallback */
.offers-box h3 {
font-size: 1rem !important; /* 16px - reduced from 18px */
font-weight: 700;
color: var(--primary-cta);
text-align: center !important; /* Center align */
margin: 0 0 0.5rem !important; /* Reduced margin */
width: 100% !important;
}
.offers-box .offer-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important; /* Changed to flex-start */
align-items: center !important;
padding: 0.25rem !important; /* Reduced padding */
width: 100% !important;
box-sizing: border-box !important;
}
.offers-box .offer-content p {
font-size: 1rem !important; /* 16px - reduced from 18px */
font-weight: 600;
color: #20242e;
margin: 0 0 0.5rem !important; /* Reduced margin */
text-align: center !important; /* Center align */
line-height: 1.3 !important; /* Reduced line height */
width: 100% !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
/* Position and style the See Terms button at the bottom - CENTERED */
.offers-box .claim-button {
position: static !important; /* Remove absolute positioning */
right: auto !important;
top: auto !important;
transform: none !important;
background: var(--primary-cta) !important;
color: #000 !important;
padding: 0.5rem 1rem !important; /* Reduced padding */
border-radius: 0.5rem !important;
text-decoration: none !important;
font-size: 0.875rem !important; /* 14px - reduced size */
font-weight: 700 !important;
transition: transform 0.2s !important;
display: inline-block !important;
white-space: nowrap !important;
margin: 0 auto !important; /* Center the button */
z-index: 10 !important;
width: auto !important;
min-width: 100px !important; /* Reduced min-width */
text-align: center !important;
align-self: center !important; /* Center align instead of flex-end */
margin-top: auto !important; /* Push to bottom */
}
@media (hover: hover) {
.offers-box .claim-button:hover {
transform: translateY(-2px) !important; /* Better hover effect */
text-decoration: none !important;
}
}
/* Responsive font sizes for different screen sizes - proportional scaling */
@media (max-width: 767px) {
.offers-box {
min-height: 8rem !important; /* Reduced from 10rem */
padding: 1rem !important; /* Reduced padding */
gap: 0.5rem !important; /* Reduced gap */
}
.offers-box h3 {
font-size: 0.875rem !important; /* 14px - much smaller */
margin-bottom: 0.5rem !important;
}
.offers-box .offer-content {
padding: 0.125rem !important; /* Much smaller padding */
}
.offers-box .offer-content p {
font-size: 0.875rem !important; /* 14px - much smaller */
margin-bottom: 0.5rem !important;
line-height: 1.2 !important;
}
.offers-box .claim-button {
font-size: 0.75rem !important; /* 12px - smaller */
padding: 0.375rem 0.75rem !important;
min-width: 80px !important;
}
}
@media (max-width: 479px) {
.offers-box {
min-height: 7rem !important; /* Reduced from 12rem */
padding: 0.75rem !important; /* Reduced padding */
gap: 0.375rem !important; /* Reduced gap */
}
.offers-box h3 {
font-size: 0.75rem !important; /* 12px - much smaller */
margin-bottom: 0.375rem !important;
}
.offers-box .offer-content {
padding: 0.125rem !important; /* Small padding */
}
.offers-box .offer-content p {
font-size: 0.75rem !important; /* 12px - much smaller */
margin-bottom: 0.375rem !important;
line-height: 1.2 !important;
}
.offers-box .claim-button {
font-size: 0.6875rem !important; /* 11px - smaller */
padding: 0.25rem 0.5rem !important;
min-width: 70px !important;
}
}
@media (max-width: 380px) {
.offers-box {
min-height: 6rem !important; /* Reduced from 14rem */
padding: 0.5rem !important; /* Reduced padding */
gap: 0.25rem !important; /* Reduced gap */
}
.offers-box h3 {
font-size: 0.6875rem !important; /* 11px - much smaller */
margin-bottom: 0.25rem !important;
}
.offers-box .offer-content {
padding: 0.125rem !important; /* Small padding */
}
.offers-box .offer-content p {
font-size: 0.6875rem !important; /* 11px - much smaller */
margin-bottom: 0.25rem !important;
line-height: 1.1 !important;
}
.offers-box .claim-button {
font-size: 0.625rem !important; /* 10px - smaller */
padding: 0.25rem 0.5rem !important;
min-width: 60px !important;
}
}
/* Above 767px - reduce text slightly to make room for button */
@media (min-width: 768px) and (max-width: 1023px) {
.offers-box {
min-height: 9rem !important; /* Increased height for better spacing */
padding: 1.25rem !important; /* Increased padding */
gap: 0.5rem !important; /* Increased gap */
justify-content: space-between !important; /* Better distribution */
}
.offers-box h3 {
font-size: 0.9375rem !important; /* 15px - slightly reduced */
margin-bottom: 0.75rem !important; /* Increased margin */
}
.offers-box .offer-content {
padding: 0.5rem !important; /* Increased padding */
justify-content: center !important; /* Center the content */
flex: 1 !important; /* Take up available space */
}
.offers-box .offer-content p {
font-size: 0.9375rem !important; /* 15px - slightly reduced */
margin-bottom: 0.75rem !important; /* Increased margin */
line-height: 1.3 !important;
}
.offers-box .claim-button {
font-size: 0.875rem !important; /* 14px */
padding: 0.5rem 1rem !important;
min-width: 100px !important;
margin-top: 0.5rem !important; /* Add space above button */
}
}
/* Above 1024px - perfect sizing, just ensure button is centered */
@media (min-width: 1024px) {
.offers-box {
min-height: 9rem !important; /* Reduced from 10rem to fit content */
max-height: 9rem !important; /* Ensure it doesn't exceed */
padding: 1.25rem !important; /* Reduced padding to fit content */
gap: 0.5rem !important; /* Reduced gap */
justify-content: space-between !important; /* Better distribution */
overflow: hidden !important; /* Prevent content from exceeding */
box-sizing: border-box !important; /* Include padding in size calculation */
}
.offers-box h3 {
font-size: 1rem !important; /* 16px - reduced to fit */
margin-bottom: 0.75rem !important; /* Reduced margin */
max-width: 100% !important; /* Ensure it doesn't exceed width */
overflow-wrap: break-word !important; /* Wrap long text */
}
.offers-box .offer-content {
padding: 0.5rem !important; /* Reduced padding */
justify-content: center !important; /* Center the content */
flex: 1 !important; /* Take up available space */
max-width: 100% !important; /* Ensure it doesn't exceed width */
overflow: hidden !important; /* Prevent overflow */
}
.offers-box .offer-content p {
font-size: 1rem !important; /* 16px - reduced to fit */
margin-bottom: 0.75rem !important; /* Reduced margin */
line-height: 1.3 !important; /* Reduced line height */
max-width: 100% !important; /* Ensure it doesn't exceed width */
overflow-wrap: break-word !important; /* Wrap long text */
word-wrap: break-word !important; /* Wrap long words */
}
.offers-box .claim-button {
align-self: center !important; /* Ensure center alignment */
margin: 0 auto !important; /* Center the button */
font-size: 0.875rem !important; /* 14px - reduced to fit */
padding: 0.5rem 1rem !important; /* Reduced padding */
min-width: 100px !important; /* Reduced min-width */
max-width: 90% !important; /* Ensure it doesn't exceed width */
margin-top: 0.5rem !important; /* Reduced space above button */
white-space: nowrap !important; /* Prevent button text wrapping */
overflow: hidden !important; /* Prevent overflow */
text-overflow: ellipsis !important; /* Show ellipsis if text is too long */
}
}
/* Sign Up Offers Page Specific Styles */
.signup-offers-page {
background: linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%);
min-height: 100vh;
}
.signup-offers-page .page-header {
background: #00cc5a;
color: #20242e;
padding: 1rem 0;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 204, 90, 0.3);
}
.signup-offers-page .page-header h1 {
font-size: 20px;
font-weight: 700;
margin: 0;
color: #20242e;
white-space: normal;
line-height: 1.2;
}
.signup-offers-page .features-grid {
display: none;
}
.signup-offers-page .feature-item {
display: none;
}
.signup-offers-page .feature-icon {
display: none;
}
/* Same width as home/individual – do not fill full page width */
.signup-offers-page .main-container,
.no-wagering-page .main-container,
.casino-bonus-page .main-container,
.sports-offers-page .main-container {
width: 100%;
max-width: 1200px;
min-width: 320px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
/* Blog page: NO container padding - each section has its own 0.5rem padding */
.blog-page .main-container {
width: 100%;
max-width: 1200px;
min-width: 320px;
margin: 0 auto;
padding: 0 !important; /* Zero padding - sections handle their own */
box-sizing: border-box;
}
/* Mobile (up to 767px): offers fill page width – no side padding */
@media (max-width: 767px) {
.signup-offers-page .main-container,
.no-wagering-page .main-container,
.casino-bonus-page .main-container,
.sports-offers-page .main-container {
padding: 0 !important;
max-width: 100% !important;
}
.blog-page .main-container {
padding: 0 !important; /* Already zero, but ensure it stays zero */
max-width: 100% !important;
}
/* BLOG: Force offer boxes to span FULL WIDTH of page on mobile – break out of .container padding */
.blog-page .main-content .container > .main-container:has(.offers-section),
.blog-page .main-content .container > .blog-offers-wrapper {
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.blog-page .main-content .container > .main-container:has(.offers-section) .offers-section,
.blog-page .main-content .container > .main-container:has(.offers-section) .offers-list,
.blog-page .main-content .container > .main-container:has(.offers-section) #casino-offers-list,
.blog-page .main-content .container > .main-container:has(.offers-section) #sports-offers-list,
.blog-page .main-content .container > .blog-offers-wrapper .offers-section,
.blog-page .main-content .container > .blog-offers-wrapper .offers-list,
.blog-page .main-content .container > .blog-offers-wrapper #casino-offers-list,
.blog-page .main-content .container > .blog-offers-wrapper #sports-offers-list {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.blog-page .blog-offers-wrapper .offer-card,
.blog-page .blog-offers-wrapper .ranked-offer.offer-card {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* 768px–1023px: boxes span full width of page with no padding */
@media (min-width: 768px) and (max-width: 1023px) {
.signup-offers-page .main-container,
.no-wagering-page .main-container,
.casino-bonus-page .main-container,
.sports-offers-page .main-container,
.blog-page .main-container {
padding: 0 !important;
max-width: 100% !important;
}
}
/* No left/right padding until 1024: filter box and offers span full page width (signup + sports) */
@media (max-width: 1023px) {
.signup-offers-page .main-container,
.sports-offers-page .main-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (min-width: 1280px) {
.signup-offers-page .main-container,
.no-wagering-page .main-container,
.casino-bonus-page .main-container,
.blog-page .main-container {
max-width: 1400px;
}
}
/* Offer listing pages: same width so offer boxes span consistently. Blog matches casino-signup. */
body.signup-offers-page .main-container,
body.no-wagering-page .main-container,
body.casino-bonus-page .main-container,
body.sports-offers-page .main-container,
body.blog-page .main-container {
max-width: 1150px;
}
@media (min-width: 1280px) {
body.signup-offers-page .main-container,
body.no-wagering-page .main-container,
body.casino-bonus-page .main-container,
body.sports-offers-page .main-container,
body.blog-page .main-container {
max-width: 1150px; /* Same on all offer pages including blog */
}
}
.signup-offers-page .filters-section {
background: white;
padding: 1rem;
margin: 1rem 0 0 0;
border-radius: 0.75rem;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
/* Center the entire filters section content */
text-align: center;
width: 100%;
box-sizing: border-box;
min-width: 320px;
}
/* Casino signup only – sports has its own block below; font sizes via vars (16px/20px title, 14px/16px value) */
.signup-offers-page .filters-title {
font-size: var(--filter-box-title);
font-weight: 700;
color: #022e4a;
margin: 0 0 1rem 0;
text-align: center;
}
.signup-offers-page .filters-row {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-bottom: 1rem;
/* Center the filter groups as a unit */
justify-content: center;
align-items: flex-start;
/* Ensure proper spacing from borders */
max-width: 100%;
margin-left: auto;
/* Pre-size to prevent layout shift - minimum height based on filter groups */
min-height: 180px; /* Prevents flash during loading */
margin-right: auto;
}
.signup-offers-page .filter-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 150px;
min-height: 160px;
text-align: left;
}
.signup-offers-page .filter-group > label {
font-weight: 700;
color: #00cc5a;
font-size: var(--filter-box-value);
text-align: left;
}
.signup-offers-page .filter-option {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 0.5rem;
font-size: var(--filter-box-value);
font-weight: 600;
color: #20242e;
cursor: pointer;
padding: 0.25rem 0;
line-height: 1.5;
min-width: 0;
}
.signup-offers-page .filter-option input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #00cc5a;
flex-shrink: 0 !important;
margin: 0 !important;
}
.signup-offers-page .filter-options {
display: flex;
flex-direction: column;
gap: 0.25rem;
text-align: left;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.signup-offers-page .offers-section,
.blog-page .offers-section {
margin: 0.2rem 0 2rem 0;
}
/* Casino signup: one joined block with faint lines between offers (no separate boxes) */
.signup-offers-page .offers-list {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
box-sizing: border-box;
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
overflow: hidden;
}
/* Up to 1023px: fully square list so first offer rank strip is rigid (no rounding) */
@media (max-width: 1023px) {
.signup-offers-page .offers-list {
border-radius: 0 !important;
}
}
.signup-offers-page .offer-card {
background: transparent;
border-radius: 0;
overflow: visible;
box-shadow: none;
transition: background 0.2s;
padding: 1.67rem;
min-height: 120px;
position: relative;
contain: layout style; /* Reduce CLS when content populates */
width: 100%;
box-sizing: border-box;
border-bottom: none; /* Faint line is on .offer-content-wrapper only */
}
/* Sports (non-ranked): full-width card, no rank column – logo, actions, metrics+key-terms block */
.signup-offers-page .offer-card:not(.ranked-offer) {
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
}
.signup-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper {
flex: 1 !important;
width: 100% !important;
padding: 0.5rem 1rem !important;
contain: layout style; /* Row separator at 1023px+ is in OFFER ROW SEPARATOR block */
}
/* Below 400px: offer-top-row gets 0.5rem effective padding (max blurb space). 401–767px: 1rem so logo/blurb align with metrics bar. */
/* BELOW 400px only: 0.5rem top row (sports + casino) – full focus on tiny screens */
@media (max-width: 399px) {
/* Sports: 0.5rem effective padding */
.sports-offers-page .signup-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row,
.sports-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row,
.blog-page #sports-offers-list .offer-card .offer-content-wrapper .offer-top-row {
margin-left: -1rem !important;
margin-right: -1rem !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
width: calc(100% + 2rem) !important;
box-sizing: border-box !important;
position: relative !important;
gap: 0.25rem !important;
}
/* Casino non-ranked: 0.5rem effective padding */
.signup-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row,
.casino-signup-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row,
.no-deposit-free-spins-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row,
.no-wagering-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row,
.casino-bonus-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row {
margin-left: -1rem !important;
margin-right: -1rem !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
width: calc(100% + 2rem) !important;
box-sizing: border-box !important;
position: relative !important;
gap: 0.25rem !important;
}
/* Casino ranked: 0.5rem effective padding */
.signup-offers-page .offer-card.ranked-offer .offer-content-wrapper .offer-top-row,
.casino-signup-offers-page .offer-card.ranked-offer .offer-content-wrapper .offer-top-row,
.no-deposit-free-spins-page .offer-card.ranked-offer .offer-content-wrapper .offer-top-row,
.no-wagering-page .offer-card.ranked-offer .offer-content-wrapper .offer-top-row,
.casino-bonus-page .offer-card.ranked-offer .offer-content-wrapper .offer-top-row,
.blog-page #casino-offers-list .offer-card .offer-content-wrapper .offer-top-row {
margin-left: -1.25rem !important;
margin-right: -1.25rem !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
width: calc(100% + 2.5rem) !important;
box-sizing: border-box !important;
position: relative !important;
gap: 0.25rem !important;
}
}
/* 401–767px: 1rem top-row padding so bookmaker logo and offer blurb align with metrics bar (sports + casino) */
@media (min-width: 400px) and (max-width: 767px) {
/* No padding on top row – bookmaker logo left aligns with metrics bar left edge */
.sports-offers-page .signup-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row,
.sports-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row,
.blog-page #sports-offers-list .offer-card .offer-content-wrapper .offer-top-row,
.signup-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row,
.casino-signup-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row,
.no-deposit-free-spins-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row,
.no-wagering-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row,
.casino-bonus-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row,
.signup-offers-page .offer-card.ranked-offer .offer-content-wrapper .offer-top-row,
.casino-signup-offers-page .offer-card.ranked-offer .offer-content-wrapper .offer-top-row,
.no-deposit-free-spins-page .offer-card.ranked-offer .offer-content-wrapper .offer-top-row,
.no-wagering-page .offer-card.ranked-offer .offer-content-wrapper .offer-top-row,
.casino-bonus-page .offer-card.ranked-offer .offer-content-wrapper .offer-top-row,
.blog-page #casino-offers-list .offer-card .offer-content-wrapper .offer-top-row {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
@media (max-width: 767px) {
/* Everything BELOW offer-top-row keeps 1rem padding (metrics, key-terms, mobile-claim-btn, etc.) */
/* Sports pages */
.sports-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .metrics-and-key-terms-block,
.sports-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .mobile-claim-btn,
.sports-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .key-terms-section,
.blog-page #sports-offers-list .offer-card .offer-content-wrapper .metrics-and-key-terms-block,
.blog-page #sports-offers-list .offer-card .offer-content-wrapper .mobile-claim-btn,
.blog-page #sports-offers-list .offer-card .offer-content-wrapper .key-terms-section,
.blog-page #casino-offers-list .offer-card .offer-content-wrapper .metrics-and-key-terms-block,
.blog-page #casino-offers-list .offer-card .offer-content-wrapper .mobile-claim-btn,
.blog-page #casino-offers-list .offer-card .offer-content-wrapper .key-terms-section {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Casino pages: metrics/key-terms keep 1rem padding (only offer-top-row gets 0.5rem) */
.signup-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .metrics-and-key-terms-block,
.signup-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .mobile-claim-btn,
.signup-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .key-terms-section,
.casino-signup-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .metrics-and-key-terms-block,
.casino-signup-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .mobile-claim-btn,
.casino-signup-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .key-terms-section,
.no-deposit-free-spins-page .offer-card:not(.ranked-offer) .offer-content-wrapper .metrics-and-key-terms-block,
.no-deposit-free-spins-page .offer-card:not(.ranked-offer) .offer-content-wrapper .mobile-claim-btn,
.no-deposit-free-spins-page .offer-card:not(.ranked-offer) .offer-content-wrapper .key-terms-section,
.no-wagering-page .offer-card:not(.ranked-offer) .offer-content-wrapper .metrics-and-key-terms-block,
.no-wagering-page .offer-card:not(.ranked-offer) .offer-content-wrapper .mobile-claim-btn,
.no-wagering-page .offer-card:not(.ranked-offer) .offer-content-wrapper .key-terms-section,
.casino-bonus-page .offer-card:not(.ranked-offer) .offer-content-wrapper .metrics-and-key-terms-block,
.casino-bonus-page .offer-card:not(.ranked-offer) .offer-content-wrapper .mobile-claim-btn,
.casino-bonus-page .offer-card:not(.ranked-offer) .offer-content-wrapper .key-terms-section {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Casino pages RANKED OFFERS: metrics/key-terms keep 1rem padding (only offer-top-row gets 0.5rem) */
.signup-offers-page .offer-card.ranked-offer .offer-content-wrapper .metrics-and-key-terms-block,
.signup-offers-page .offer-card.ranked-offer .offer-content-wrapper .mobile-claim-btn,
.signup-offers-page .offer-card.ranked-offer .offer-content-wrapper .key-terms-section,
.casino-signup-offers-page .offer-card.ranked-offer .offer-content-wrapper .metrics-and-key-terms-block,
.casino-signup-offers-page .offer-card.ranked-offer .offer-content-wrapper .mobile-claim-btn,
.casino-signup-offers-page .offer-card.ranked-offer .offer-content-wrapper .key-terms-section,
.no-deposit-free-spins-page .offer-card.ranked-offer .offer-content-wrapper .metrics-and-key-terms-block,
.no-deposit-free-spins-page .offer-card.ranked-offer .offer-content-wrapper .mobile-claim-btn,
.no-deposit-free-spins-page .offer-card.ranked-offer .offer-content-wrapper .key-terms-section,
.no-wagering-page .offer-card.ranked-offer .offer-content-wrapper .metrics-and-key-terms-block,
.no-wagering-page .offer-card.ranked-offer .offer-content-wrapper .mobile-claim-btn,
.no-wagering-page .offer-card.ranked-offer .offer-content-wrapper .key-terms-section,
.casino-bonus-page .offer-card.ranked-offer .offer-content-wrapper .metrics-and-key-terms-block,
.casino-bonus-page .offer-card.ranked-offer .offer-content-wrapper .mobile-claim-btn,
.casino-bonus-page .offer-card.ranked-offer .offer-content-wrapper .key-terms-section,
.blog-page #casino-offers-list .offer-card .offer-content-wrapper .metrics-and-key-terms-block,
.blog-page #casino-offers-list .offer-card .offer-content-wrapper .mobile-claim-btn,
.blog-page #casino-offers-list .offer-card .offer-content-wrapper .key-terms-section {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
.signup-offers-page .offer-card:not(.ranked-offer):last-child .offer-content-wrapper {
border-bottom: none !important;
}
.signup-offers-page .offer-top-row,
.casino-signup-offers-page .offer-top-row,
.casino-bonus-page .offer-top-row,
.no-wagering-page .offer-top-row,
.no-deposit-free-spins-page .offer-top-row,
.sports-offers-page .offer-top-row,
.blog-page .offer-top-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.67rem;
margin-bottom: 0 !important; /* No gap – matches skeleton; zero CLS (override ranked-offers.css) */
width: 100%;
}
/* Zero bounce: pin content to top – same box logic for ALL offer pages (signup, casino signup, casino bonus, no wagering, no deposit, blog) */
.signup-offers-page .offer-top-row,
.casino-signup-offers-page .offer-top-row,
.casino-bonus-page .offer-top-row,
.no-wagering-page .offer-top-row,
.no-deposit-free-spins-page .offer-top-row,
.blog-page .offer-top-row {
align-items: flex-start !important; /* Top-aligned – no vertical bounce on load */
}
/* ALL PAGES: ALL DIMENSIONS - Vertically center offer blurb with bookmaker logo */
/* This ensures the blurb is perfectly aligned vertically between top and bottom of logo on mobile, tablet, and desktop */
/* Mobile and Tablet: Vertically center */
@media (max-width: 1023px) {
/* Center align all items in top row */
.signup-offers-page .offer-top-row,
.casino-signup-offers-page .offer-top-row,
.casino-bonus-page .offer-top-row,
.no-wagering-page .offer-top-row,
.no-deposit-free-spins-page .offer-top-row,
.sports-offers-page .offer-top-row,
.blog-page .offer-top-row,
.blog-page #sports-offers-list .offer-top-row {
align-items: center !important; /* Vertically center all items */
}
/* Center align logo, offer-details, and offer-actions vertically */
.signup-offers-page .offer-card .logo-section,
.casino-signup-offers-page .offer-card .logo-section,
.casino-bonus-page .offer-card .logo-section,
.no-wagering-page .offer-card .logo-section,
.no-deposit-free-spins-page .offer-card .logo-section,
.sports-offers-page .offer-card .logo-section,
.blog-page .offer-card .logo-section,
.blog-page #sports-offers-list .offer-card .logo-section,
.signup-offers-page .offer-card .offer-details,
.casino-signup-offers-page .offer-card .offer-details,
.casino-bonus-page .offer-card .offer-details,
.no-wagering-page .offer-card .offer-details,
.no-deposit-free-spins-page .offer-card .offer-details,
.sports-offers-page .offer-card .offer-details,
.blog-page .offer-card .offer-details,
.blog-page #sports-offers-list .offer-card .offer-details {
align-self: center !important; /* Vertically center each item */
}
/* Offer details container: flex column to center blurb vertically */
.signup-offers-page .offer-card .offer-details,
.casino-signup-offers-page .offer-card .offer-details,
.casino-bonus-page .offer-card .offer-details,
.no-wagering-page .offer-card .offer-details,
.no-deposit-free-spins-page .offer-card .offer-details,
.sports-offers-page .offer-card .offer-details,
.blog-page .offer-card .offer-details,
.blog-page #sports-offers-list .offer-card .offer-details {
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* Vertically center blurb within offer-details */
align-items: center !important;
}
/* Offer blurb text: vertically centered within offer-details */
.signup-offers-page .offer-card .offer-details .offer-blurb-text,
.casino-signup-offers-page .offer-card .offer-details .offer-blurb-text,
.casino-bonus-page .offer-card .offer-details .offer-blurb-text,
.no-wagering-page .offer-card .offer-details .offer-blurb-text,
.no-deposit-free-spins-page .offer-card .offer-details .offer-blurb-text,
.sports-offers-page .offer-card .offer-details .offer-blurb-text,
.blog-page .offer-card .offer-details .offer-blurb-text,
.blog-page #sports-offers-list .offer-card .offer-details .offer-blurb-text {
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* Vertically center blurb content */
align-items: center !important;
}
}
/* ALL PAGES: Desktop (1024px+) - Vertically center offer blurb with bookmaker logo */
/* This ensures the blurb is perfectly aligned vertically between top and bottom of logo */
@media (min-width: 1024px) {
/* Center align all items in top row */
.signup-offers-page .offer-top-row,
.casino-signup-offers-page .offer-top-row,
.casino-bonus-page .offer-top-row,
.no-wagering-page .offer-top-row,
.no-deposit-free-spins-page .offer-top-row,
.sports-offers-page .offer-top-row,
.blog-page .offer-top-row,
.blog-page #sports-offers-list .offer-top-row {
align-items: center !important; /* Vertically center all items */
}
/* Center align logo, offer-details, and offer-actions vertically */
.signup-offers-page .offer-card .logo-section,
.casino-signup-offers-page .offer-card .logo-section,
.casino-bonus-page .offer-card .logo-section,
.no-wagering-page .offer-card .logo-section,
.no-deposit-free-spins-page .offer-card .logo-section,
.sports-offers-page .offer-card .logo-section,
.blog-page .offer-card .logo-section,
.blog-page #sports-offers-list .offer-card .logo-section,
.signup-offers-page .offer-card .offer-details,
.casino-signup-offers-page .offer-card .offer-details,
.casino-bonus-page .offer-card .offer-details,
.no-wagering-page .offer-card .offer-details,
.no-deposit-free-spins-page .offer-card .offer-details,
.sports-offers-page .offer-card .offer-details,
.blog-page .offer-card .offer-details,
.blog-page #sports-offers-list .offer-card .offer-details,
.signup-offers-page .offer-card .offer-actions,
.casino-signup-offers-page .offer-card .offer-actions,
.casino-bonus-page .offer-card .offer-actions,
.no-wagering-page .offer-card .offer-actions,
.no-deposit-free-spins-page .offer-card .offer-actions,
.sports-offers-page .offer-card .offer-actions,
.blog-page .offer-card .offer-actions,
.blog-page #sports-offers-list .offer-card .offer-actions {
align-self: center !important; /* Vertically center each item */
}
/* Offer details container: flex column to center blurb vertically */
.signup-offers-page .offer-card .offer-details,
.casino-signup-offers-page .offer-card .offer-details,
.casino-bonus-page .offer-card .offer-details,
.no-wagering-page .offer-card .offer-details,
.no-deposit-free-spins-page .offer-card .offer-details,
.sports-offers-page .offer-card .offer-details,
.blog-page .offer-card .offer-details,
.blog-page #sports-offers-list .offer-card .offer-details {
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* Vertically center blurb within offer-details */
align-items: center !important;
}
/* Offer blurb text: vertically centered within offer-details */
.signup-offers-page .offer-card .offer-details .offer-blurb-text,
.casino-signup-offers-page .offer-card .offer-details .offer-blurb-text,
.casino-bonus-page .offer-card .offer-details .offer-blurb-text,
.no-wagering-page .offer-card .offer-details .offer-blurb-text,
.no-deposit-free-spins-page .offer-card .offer-details .offer-blurb-text,
.sports-offers-page .offer-card .offer-details .offer-blurb-text,
.blog-page .offer-card .offer-details .offer-blurb-text,
.blog-page #sports-offers-list .offer-card .offer-details .offer-blurb-text {
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* Vertically center blurb content */
align-items: center !important;
}
}
.signup-offers-page .ranked-offer .offer-content-wrapper,
.casino-signup-offers-page .ranked-offer .offer-content-wrapper,
.casino-bonus-page .ranked-offer .offer-content-wrapper,
.no-wagering-page .ranked-offer .offer-content-wrapper,
.no-deposit-free-spins-page .ranked-offer .offer-content-wrapper,
.sports-offers-page .ranked-offer .offer-content-wrapper,
.blog-page .ranked-offer .offer-content-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start !important; /* Content stacks from top – no bounce */
}
/* ALL CASINO PAGES: Same logic for logo-section, offer-details, offer-actions, casino-logo */
.signup-offers-page .logo-section,
.casino-signup-offers-page .logo-section,
.casino-bonus-page .logo-section,
.no-wagering-page .logo-section,
.no-deposit-free-spins-page .logo-section {
flex-shrink: 0;
order: 1;
}
.signup-offers-page .offer-details,
.casino-signup-offers-page .offer-details,
.casino-bonus-page .offer-details,
.no-wagering-page .offer-details,
.no-deposit-free-spins-page .offer-details {
flex: 1;
order: 2;
text-align: center;
}
.signup-offers-page .offer-actions,
.casino-signup-offers-page .offer-actions,
.casino-bonus-page .offer-actions,
.no-wagering-page .offer-actions,
.no-deposit-free-spins-page .offer-actions {
flex-shrink: 0;
order: 3;
}
.signup-offers-page .offer-card:hover,
.casino-signup-offers-page .offer-card:hover,
.casino-bonus-page .offer-card:hover,
.no-wagering-page .offer-card:hover,
.no-deposit-free-spins-page .offer-card:hover {
background: transparent; /* No hover on casino signup offer box */
}
.signup-offers-page .casino-logo,
.casino-signup-offers-page .casino-logo,
.casino-bonus-page .casino-logo,
.no-wagering-page .casino-logo,
.no-deposit-free-spins-page .casino-logo {
width: 120px;
height: 60px;
object-fit: contain;
border-radius: 0.25rem;
flex-shrink: 0;
align-self: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 0;
}
.signup-offers-page .logo-section,
.casino-signup-offers-page .logo-section,
.casino-bonus-page .logo-section,
.no-wagering-page .logo-section,
.no-deposit-free-spins-page .logo-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
/* Zero bounce: logo pinned to top – same for ALL offer pages */
.signup-offers-page .offer-card .logo-section,
.casino-signup-offers-page .offer-card .logo-section,
.casino-bonus-page .offer-card .logo-section,
.no-wagering-page .offer-card .logo-section,
.no-deposit-free-spins-page .offer-card .logo-section,
.sports-offers-page .offer-card .logo-section,
.blog-page .offer-card .logo-section {
align-items: flex-start !important;
justify-content: flex-start !important;
}
/* ALL CASINO PAGES: Same offer-details logic */
.signup-offers-page .offer-details,
.casino-signup-offers-page .offer-details,
.casino-bonus-page .offer-details,
.no-wagering-page .offer-details,
.no-deposit-free-spins-page .offer-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 0;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
padding-top: 0;
}
.signup-offers-page .offer-blurb {
font-size: 1.2rem;
font-weight: 700;
color: #20242e;
margin: 0;
line-height: 1.4;
text-align: center;
text-transform: uppercase;
white-space: pre-line;
align-self: flex-start;
margin-top: 0;
padding-top: 0;
position: relative;
top: 0;
}
.signup-offers-page .offer-blurb .main-text {
font-size: 1.2rem;
display: inline;
}
.signup-offers-page .offer-blurb .secondary-text {
font-size: 0.9rem;
display: block;
margin-top: 0;
line-height: 1;
}
.signup-offers-page .offer-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-size: 0.85rem;
color: #666;
margin: 0;
}
.signup-offers-page .slots-count {
display: flex;
align-items: center;
gap: 0.25rem;
font-weight: 700;
}
.signup-offers-page .rating {
display: flex;
align-items: center;
gap: 0.25rem;
font-weight: 700;
}
.signup-offers-page .stars {
display: flex;
gap: 1px;
}
.signup-offers-page .star {
color: #ffd700;
font-size: 0.8rem;
}
.signup-offers-page .star.empty {
color: #ddd;
}
/* ALL CASINO PAGES: Same offer-actions logic */
.signup-offers-page .offer-actions,
.casino-signup-offers-page .offer-actions,
.casino-bonus-page .offer-actions,
.no-wagering-page .offer-actions,
.no-deposit-free-spins-page .offer-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
flex-shrink: 0;
justify-content: center;
align-self: center;
padding: 0;
margin-top: -0.3rem;
}
.signup-offers-page .claim-btn {
color: white;
border: none;
padding: 0.9rem 1.8rem;
border-radius: 0.5rem;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.2s;
animation: pulse 2s infinite;
white-space: nowrap;
touch-action: manipulation; /* Prevent accidental zoom/delay on touch */
}
@media (hover: hover) {
.signup-offers-page .claim-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.signup-offers-page .key-terms-section {
margin-top: 1rem;
}
.signup-offers-page .terms-text {
font-size: var(--fs-key-terms-offer-box) !important;
color: #666;
line-height: 1.4;
margin: 0;
text-align: left; /* Left aligned on desktop */
overflow: visible;
white-space: normal;
max-height: none;
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
}
/* Mobile: Bring key terms closer to claim button */
@media (max-width: 767px) {
.signup-offers-page .key-terms-section {
margin-top: 0.5rem; /* Reduced from 1rem to 0.5rem */
}
.signup-offers-page .terms-text {
font-size: var(--fs-key-terms-offer-box) !important;
line-height: 1.3;
margin: 0;
text-align: left; /* Left aligned on mobile too */
}
}
/* Mobile-only claim button below metrics */
.signup-offers-page .mobile-claim-btn {
display: none;
}
@media (max-width: 767px) {
.signup-offers-page .mobile-claim-btn {
display: block;
text-align: center;
margin: 1rem 0 1rem 0 !important; /* Match no-deposit/no-wagering/casino-bonus: 0.5rem gap to key-terms below */
}
.signup-offers-page .mobile-claim-btn .claim-btn {
width: 100%;
max-width: 400px;
}
}
/* REMOVED CONFLICTING RULE - Now using the proper key-terms-section styling above */
.signup-offers-page .no-offers {
text-align: center;
padding: 3rem 1rem;
color: #666;
font-size: 1.1rem;
background: white;
border-radius: 0.75rem;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
width: 100%;
box-sizing: border-box;
}
.signup-offers-page .loading {
text-align: center;
padding: 3rem 1rem;
color: #666;
width: 100%;
box-sizing: border-box;
}
.signup-offers-page .spinner {
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border-top: 3px solid #00cc5a;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 1rem;
}
/* Metrics Row Styles - Apple-level sleek design; same grey as key-terms-blurb (--metrics-bar-bg) */
.signup-offers-page .metrics-row,
.casino-bonus-page .metrics-row,
.no-wagering-page .metrics-row,
.sports-offers-page .metrics-row,
.blog-page .metrics-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin: 10px 0 0 0 !important; /* Tiny gap from offer-top-row */
margin-bottom: 0 !important; /* No bottom margin - blurb connects directly - NO GAP */
padding: 12px 15px; /* Same horizontal (15px) as key-terms-blurb for desktop alignment */
background: var(--metrics-bar-bg, #f0f1f3);
border-radius: 0.75rem 0.75rem 0 0; /* Rounded top corners, sharp bottom - connects to key-terms-blurb */
font-size: 0.85rem;
width: 100%;
box-sizing: border-box;
clear: both;
}
.signup-offers-page .metric-item {
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 5px;
}
.signup-offers-page .metric-label {
font-weight: bold;
color: #555;
font-size: 0.75rem;
line-height: 1.2;
}
.signup-offers-page .metric-value {
color: #333;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.2;
}
/* Metrics + Key Terms: one seamless block (no gap, no line) – wrapper owns background and radius */
.metrics-and-key-terms-block {
margin: 10px 0 0 0 !important;
margin-bottom: 0 !important;
background: var(--metrics-bar-bg, #f0f1f3) !important;
border-radius: 0.75rem !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.metrics-and-key-terms-block .metrics-row {
margin: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
.metrics-and-key-terms-block .key-terms-blurb {
margin-top: -1px !important;
background: transparent !important;
border-radius: 0 !important;
border-top: none !important;
}
/* Faint line between metrics row and key-terms blurb – loaded content only (no line in skeleton) */
.signup-offers-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb,
.casino-signup-offers-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb,
.casino-bonus-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb,
.no-wagering-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb,
.no-deposit-free-spins-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb,
.sports-offers-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb,
.blog-page .metrics-and-key-terms-block:not(.skeleton-shimmer) .key-terms-blurb {
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
/* Key Terms Blurb - ALWAYS VISIBLE; when NOT inside block, background matches metrics bar */
.signup-offers-page .key-terms-blurb,
.casino-bonus-page .key-terms-blurb,
.no-wagering-page .key-terms-blurb,
.sports-offers-page .key-terms-blurb,
.blog-page .key-terms-blurb {
display: block !important; /* ALWAYS VISIBLE */
visibility: visible !important; /* ALWAYS VISIBLE */
margin-top: -1px !important; /* Slight overlap to prevent sub-pixel gaps */
margin-bottom: 0 !important;
padding: 8px 15px 6px 15px; /* Match metrics-row horizontal padding (15px) for alignment */
background: var(--metrics-bar-bg, #f0f1f3) !important; /* Same grey as metrics bar – fallback for older browsers */
border-radius: 0 0 0.75rem 0.75rem;
border-top: none; /* One visual block with metrics row – no divider */
overflow: hidden !important; /* Prevent overflow - CRITICAL */
width: 100% !important;
box-sizing: border-box !important;
max-width: 100% !important;
min-width: 0 !important;
}
.signup-offers-page .metrics-and-key-terms-block .key-terms-blurb,
.casino-signup-offers-page .metrics-and-key-terms-block .key-terms-blurb,
.sports-offers-page .metrics-and-key-terms-block .key-terms-blurb,
.casino-bonus-page .metrics-and-key-terms-block .key-terms-blurb,
.no-deposit-free-spins-page .metrics-and-key-terms-block .key-terms-blurb,
.no-wagering-page .metrics-and-key-terms-block .key-terms-blurb {
background: transparent !important;
border-radius: 0 !important;
}
/* Skeleton metrics-and-key-terms block: same width and natural height as loaded (two rows only, no extra) */
@media (max-width: 767px) {
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer {
min-height: auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 0 0 !important;
box-sizing: border-box !important;
}
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer .metrics-row {
padding-top: 12px !important;
padding-bottom: 5px !important;
padding-left: 15px !important;
padding-right: 15px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer .key-terms-blurb {
padding: 8px 15px 6px 15px !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
@media (min-width: 500px) and (max-width: 767px) {
.offer-card.skeleton-shimmer .metrics-and-key-terms-block.skeleton-shimmer .metrics-row {
padding: 15px !important; /* Same as loaded at this breakpoint */
}
}
/* Key Terms Text - Opacity Zero Strategy: Hidden until refined (Gemini recommendation) */
.signup-offers-page .key-terms-text,
.casino-bonus-page .key-terms-text,
.no-wagering-page .key-terms-text,
.sports-offers-page .key-terms-text,
.blog-page .key-terms-text {
font-size: var(--fs-key-terms-offer-box) !important;
line-height: 1.4;
color: #555;
margin: 0;
font-weight: 400;
position: relative;
display: block;
width: 100% !important;
box-sizing: border-box !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* REMOVED: Opacity Zero Strategy - Now using CSS Flex-Box Industry Standard Approach */
/* All text is always visible - CSS handles truncation with text-overflow: ellipsis */
/* When collapsed - JS handles truncation, CSS just prevents overflow */
.signup-offers-page .key-terms-text:not(.expanded),
.casino-bonus-page .key-terms-text:not(.expanded),
.no-wagering-page .key-terms-text:not(.expanded),
.sports-offers-page .key-terms-text:not(.expanded),
.blog-page .key-terms-text:not(.expanded) {
display: block;
overflow: hidden !important; /* Prevent overflow - CRITICAL */
max-height: calc(var(--fs-key-terms-offer-box) * 1.4 * 1); /* Exactly 1 line */
line-height: 1.4;
white-space: normal !important; /* Let JS handle truncation */
text-overflow: clip !important; /* JS handles ellipsis */
}
/* Short version - shown by default, inline (Hero section pattern - natural flow) */
.signup-offers-page .key-terms-text:not(.expanded) .key-terms-short,
.casino-bonus-page .key-terms-text:not(.expanded) .key-terms-short,
.no-wagering-page .key-terms-text:not(.expanded) .key-terms-short,
.sports-offers-page .key-terms-text:not(.expanded) .key-terms-short,
.blog-page .key-terms-text:not(.expanded) .key-terms-short {
display: inline; /* Natural text flow - no constraints */
max-width: 100%; /* Ensure it respects container */
}
/* When expanded - show full text (MOBILE FIRST: works at all breakpoints) */
.signup-offers-page .key-terms-text.expanded,
.casino-bonus-page .key-terms-text.expanded,
.no-wagering-page .key-terms-text.expanded,
.sports-offers-page .key-terms-text.expanded,
.blog-page .key-terms-text.expanded {
display: block;
max-height: none;
overflow: visible;
white-space: normal; /* Allow wrapping when expanded */
visibility: visible !important; /* Always visible when expanded */
}
.signup-offers-page .key-terms-text.expanded .key-terms-short,
.casino-bonus-page .key-terms-text.expanded .key-terms-short,
.no-wagering-page .key-terms-text.expanded .key-terms-short,
.sports-offers-page .key-terms-text.expanded .key-terms-short,
.blog-page .key-terms-text.expanded .key-terms-short {
display: none; /* Hide short when expanded */
}
.signup-offers-page .key-terms-text.expanded .key-terms-full,
.casino-bonus-page .key-terms-text.expanded .key-terms-full,
.no-wagering-page .key-terms-text.expanded .key-terms-full,
.sports-offers-page .key-terms-text.expanded .key-terms-full,
.blog-page .key-terms-text.expanded .key-terms-full {
display: inline; /* Show full text when expanded */
aria-hidden: false;
}
/* Toggle - ALWAYS VISIBLE when present: Button styled as link for accessibility */
.signup-offers-page .key-terms-text:not(.expanded) .key-terms-toggle,
.casino-bonus-page .key-terms-text:not(.expanded) .key-terms-toggle,
.no-wagering-page .key-terms-text:not(.expanded) .key-terms-toggle,
.sports-offers-page .key-terms-text:not(.expanded) .key-terms-toggle,
.blog-page .key-terms-text:not(.expanded) .key-terms-toggle {
display: inline !important; /* ALWAYS VISIBLE */
visibility: visible !important; /* ALWAYS VISIBLE */
margin-left: 4px !important;
padding: 0 !important;
border: none !important;
background: none !important;
color: #00cc5a !important;
text-decoration: underline !important;
cursor: pointer !important;
font-weight: 600 !important;
white-space: nowrap !important;
font-size: 0.75rem !important;
font-family: inherit !important;
transition: color 0.2s ease !important;
flex-shrink: 0 !important;
-webkit-appearance: none !important;
appearance: none !important;
opacity: 1 !important; /* Ensure fully visible */
}
/* When expanded - show toggle inline with green/bold styling */
.signup-offers-page .key-terms-text.expanded .key-terms-toggle,
.casino-bonus-page .key-terms-text.expanded .key-terms-toggle,
.no-wagering-page .key-terms-text.expanded .key-terms-toggle,
.sports-offers-page .key-terms-text.expanded .key-terms-toggle,
.blog-page .key-terms-text.expanded .key-terms-toggle {
display: inline !important;
margin-left: 4px !important;
color: #00cc5a !important; /* Green */
text-decoration: underline !important;
cursor: pointer !important;
font-weight: 600 !important; /* Bold */
white-space: nowrap !important;
font-size: 0.75rem !important;
}
/* Expanded state - swap versions (Hero section pattern) */
.signup-offers-page .key-terms-text.expanded .key-terms-short,
.casino-bonus-page .key-terms-text.expanded .key-terms-short,
.no-wagering-page .key-terms-text.expanded .key-terms-short,
.sports-offers-page .key-terms-text.expanded .key-terms-short,
.blog-page .key-terms-text.expanded .key-terms-short {
display: none; /* Hide short when expanded */
}
/* Full version - hidden by default */
.signup-offers-page .key-terms-full,
.casino-bonus-page .key-terms-full,
.no-wagering-page .key-terms-full,
.sports-offers-page .key-terms-full,
.blog-page .key-terms-full {
display: none;
}
/* Expanded state - swap versions (like hero section) */
.signup-offers-page .key-terms-text.expanded .key-terms-short,
.casino-bonus-page .key-terms-text.expanded .key-terms-short,
.no-wagering-page .key-terms-text.expanded .key-terms-short,
.sports-offers-page .key-terms-text.expanded .key-terms-short,
.blog-page .key-terms-text.expanded .key-terms-short {
display: none;
}
.signup-offers-page .key-terms-text.expanded .key-terms-full,
.casino-bonus-page .key-terms-text.expanded .key-terms-full,
.no-wagering-page .key-terms-text.expanded .key-terms-full,
.sports-offers-page .key-terms-text.expanded .key-terms-full,
.blog-page .key-terms-text.expanded .key-terms-full {
display: inline;
}
/* Ellipsis and Toggle - inline after truncated text (Hero section pattern) - duplicate removed, using rules above */
.signup-offers-page .key-terms-toggle:hover,
.casino-bonus-page .key-terms-toggle:hover,
.no-wagering-page .key-terms-toggle:hover,
.sports-offers-page .key-terms-toggle:hover,
.blog-page .key-terms-toggle:hover {
color: #00a045;
}
/* Expanded state - toggle on new line */
.signup-offers-page .key-terms-text.expanded .key-terms-toggle,
.casino-bonus-page .key-terms-text.expanded .key-terms-toggle,
.no-wagering-page .key-terms-text.expanded .key-terms-toggle,
.sports-offers-page .key-terms-text.expanded .key-terms-toggle,
.blog-page .key-terms-text.expanded .key-terms-toggle {
margin-left: 0.25rem;
}
.signup-offers-page .key-terms-toggle:hover,
.casino-bonus-page .key-terms-toggle:hover,
.no-wagering-page .key-terms-toggle:hover,
.sports-offers-page .key-terms-toggle:hover,
.blog-page .key-terms-toggle:hover {
color: #00a045;
}
.signup-offers-page .key-terms-arrow,
.casino-bonus-page .key-terms-arrow,
.no-wagering-page .key-terms-arrow,
.sports-offers-page .key-terms-arrow,
.blog-page .key-terms-arrow {
transition: transform 0.3s ease;
color: currentColor;
}
.signup-offers-page .key-terms-toggle[aria-expanded="true"] .key-terms-arrow,
.casino-bonus-page .key-terms-toggle[aria-expanded="true"] .key-terms-arrow,
.no-wagering-page .key-terms-toggle[aria-expanded="true"] .key-terms-arrow,
.sports-offers-page .key-terms-toggle[aria-expanded="true"] .key-terms-arrow,
.blog-page .key-terms-toggle[aria-expanded="true"] .key-terms-arrow {
transform: rotate(180deg);
}
/* Star rating styles */
.signup-offers-page .stars {
display: flex;
gap: 2px;
}
.signup-offers-page .star {
color: #ffd700;
font-size: 0.9rem;
}
.signup-offers-page .star.empty {
color: #ddd;
}
/* MOBILE FIRST: Start with mobile (320px+), then scale up */
@media (max-width: 767px) {
/* Metrics bar - correct padding, no gap */
.signup-offers-page .metrics-row,
.casino-bonus-page .metrics-row,
.no-wagering-page .metrics-row,
.sports-offers-page .metrics-row,
.blog-page .metrics-row {
padding-top: 12px !important;
padding-bottom: 5px !important;
}
}
@media (max-width: 767px) {
/* Metrics bar - flush with offer-top-row, no gap */
.signup-offers-page .metrics-row,
.casino-bonus-page .metrics-row,
.no-wagering-page .metrics-row,
.blog-page .metrics-row {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
font-size: 0.8rem;
border-bottom: none !important;
border-radius: 0.75rem 0.75rem 0 0 !important;
}
/* Sports offers - separate rule to avoid conflicts with reorder */
.sports-offers-page .metrics-row {
grid-template-columns: repeat(2, 1fr) !important; /* 2 columns for reordered layout */
gap: 15px !important;
font-size: 0.8rem !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
border-bottom: none !important;
border-radius: 0.75rem 0.75rem 0 0 !important;
}
/* Key terms blurb - flush with metrics bar, no gap */
.signup-offers-page .key-terms-blurb,
.casino-bonus-page .key-terms-blurb,
.no-wagering-page .key-terms-blurb,
.sports-offers-page .key-terms-blurb,
.blog-page .key-terms-blurb {
margin-top: -1px !important; /* Slight overlap to prevent sub-pixel gaps */
border-radius: 0 0 0.75rem 0.75rem !important; /* Rounded bottom only */
}
.signup-offers-page .metric-item,
.casino-bonus-page .metric-item,
.no-wagering-page .metric-item,
.sports-offers-page .metric-item,
.blog-page .metric-item {
text-align: left;
justify-content: flex-start;
gap: 8px;
}
/* Canonical: mobile metrics bar – label and value both 12px (single source) */
.signup-offers-page .metric-label,
.casino-bonus-page .metric-label,
.no-wagering-page .metric-label,
.sports-offers-page .metric-label,
.blog-page .metric-label {
font-size: var(--metric-mobile-fs) !important;
}
.signup-offers-page .metric-value,
.casino-bonus-page .metric-value,
.no-wagering-page .metric-value,
.sports-offers-page .metric-value,
.blog-page .metric-value {
font-size: var(--metric-mobile-fs) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Show mobile labels, hide desktop labels */
.signup-offers-page .desktop-label,
.casino-bonus-page .desktop-label,
.no-wagering-page .desktop-label {
display: none;
}
.signup-offers-page .mobile-label,
.casino-bonus-page .mobile-label,
.no-wagering-page .mobile-label {
display: inline;
}
/* Mobile: Text left-aligned for readability */
.signup-offers-page .key-terms-text,
.casino-bonus-page .key-terms-text,
.no-wagering-page .key-terms-text,
.sports-offers-page .key-terms-text,
.blog-page .key-terms-text {
text-align: left !important;
}
/* Mobile: Key terms text left-aligned */
.signup-offers-page .key-terms-text,
.casino-bonus-page .key-terms-text,
.no-wagering-page .key-terms-text,
.sports-offers-page .key-terms-text,
.blog-page .key-terms-text {
text-align: left !important; /* Left-aligned on mobile, not centered */
}
/* Mobile: Ensure text doesn't exceed container and toggle is visible */
.signup-offers-page .key-terms-text:not(.expanded),
.casino-bonus-page .key-terms-text:not(.expanded),
.no-wagering-page .key-terms-text:not(.expanded),
.sports-offers-page .key-terms-text:not(.expanded),
.blog-page .key-terms-text:not(.expanded) {
overflow: hidden !important;
max-width: 100% !important;
}
}
/* Tablet (768px-1199px): Scale up from mobile, JS handles truncation */
@media (min-width: 768px) and (max-width: 1199px) {
.signup-offers-page .key-terms-blurb,
.casino-bonus-page .key-terms-blurb,
.no-wagering-page .key-terms-blurb,
.sports-offers-page .key-terms-blurb,
.blog-page .key-terms-blurb {
padding: 10px 15px 8px 15px; /* Slightly more padding on tablet */
}
}
/* Desktop (1200px+): Scale up from mobile/tablet */
@media (min-width: 1200px) {
/* Desktop: key-terms-blurb same horizontal padding as metrics-row (15px) for perfect alignment */
.signup-offers-page .key-terms-blurb,
.casino-bonus-page .key-terms-blurb,
.no-wagering-page .key-terms-blurb,
.sports-offers-page .key-terms-blurb,
.blog-page .key-terms-blurb {
padding: 12px 15px 10px 15px !important; /* Matches metrics-row 12px 15px – one rounded rectangle */
}
}
/* 768–919px: keep Spins W/R / Bonus W/R (mobile labels) to avoid offer value cropping; 0px gap between metrics items */
@media (min-width: 768px) and (max-width: 919px) {
.signup-offers-page .desktop-label,
.casino-bonus-page .desktop-label,
.no-wagering-page .desktop-label {
display: none !important;
}
.signup-offers-page .mobile-label,
.casino-bonus-page .mobile-label,
.no-wagering-page .mobile-label {
display: inline !important;
}
.signup-offers-page .metrics-row,
.casino-bonus-page .metrics-row,
.no-wagering-page .metrics-row,
.sports-offers-page .metrics-row,
.blog-page .metrics-row {
gap: 0 !important;
}
}
/* Desktop labels (Spins Wagering: / Bonus Wagering:) from 920px only */
@media (min-width: 920px) {
.signup-offers-page .desktop-label,
.casino-bonus-page .desktop-label,
.no-wagering-page .desktop-label {
display: inline !important;
}
.signup-offers-page .mobile-label,
.casino-bonus-page .mobile-label,
.no-wagering-page .mobile-label {
display: none !important;
}
}
/* Special styling for D+B wagering fields on mobile */
@media (max-width: 767px) {
.signup-offers-page .metric-item-db,
.casino-bonus-page .metric-item-db,
.no-wagering-page .metric-item-db {
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
}
.signup-offers-page .metric-item-db .metric-label,
.casino-bonus-page .metric-item-db .metric-label,
.no-wagering-page .metric-item-db .metric-label {
white-space: nowrap;
margin-right: 5px;
}
.signup-offers-page .metric-item-db .metric-value,
.casino-bonus-page .metric-item-db .metric-value,
.no-wagering-page .metric-item-db .metric-value {
white-space: normal;
line-height: 1.1;
text-align: left;
flex-basis: 100%;
margin-top: 2px;
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive Design for Sign Up Offers Page */
@media (min-width: 900px) {
.signup-offers-page .features-grid {
display: flex !important;
justify-content: center;
gap: 1.5rem;
margin-top: 0.75rem;
flex-wrap: wrap;
}
.signup-offers-page .feature-item {
display: flex !important;
align-items: center;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.1);
padding: 0.4rem 0.8rem;
border-radius: 0.4rem;
font-size: 14px;
font-weight: 500;
}
.signup-offers-page .feature-icon {
display: inline !important;
font-size: 1rem;
}
}
@media (min-width: 768px) {
.signup-offers-page .page-header h1 {
font-size: 32px;
}
.signup-offers-page .filters-title,
.sports-offers-page .filters-title {
font-size: var(--filter-box-title);
}
.signup-offers-page .offers-count {
font-size: 18px;
margin-left: 0.75rem;
}
.signup-offers-page .filter-group label {
font-size: var(--filter-box-value);
}
.signup-offers-page .filters-row,
.sports-offers-page .filters-row {
gap: 3rem;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.signup-offers-page .filter-group,
.sports-offers-page .filter-group {
min-width: 180px;
}
.signup-offers-page .offer-card {
padding: 2.5rem;
min-height: 140px;
}
.signup-offers-page .casino-logo {
width: 150px;
height: 75px;
}
.signup-offers-page .offer-blurb {
font-size: 1.4rem;
}
.signup-offers-page .offer-blurb .main-text {
font-size: 2rem;
}
.signup-offers-page .offer-blurb .secondary-text {
font-size: 1.5rem;
line-height: 1;
}
.signup-offers-page .claim-btn {
padding: 1.1rem 2.2rem;
font-size: 1.3rem;
}
.signup-offers-page .offer-meta {
display: none;
}
.signup-offers-page .logo-meta {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: #666;
}
}
@media (min-width: 1024px) {
.signup-offers-page .page-header {
padding: 1.5rem 0;
}
.signup-offers-page .page-header h1 {
font-size: 32px;
}
.signup-offers-page .filters-row {
gap: 4rem;
}
.signup-offers-page .filter-group {
min-width: 200px;
}
}
@media (max-width: 767px) {
.signup-offers-page .page-header {
padding: 0.5rem 0;
}
.signup-offers-page .page-header h1 {
font-size: 20px;
}
.signup-offers-page .filters-title,
.sports-offers-page .filters-title {
font-size: var(--filter-box-title) !important;
text-align: center;
}
.signup-offers-page .offers-count {
font-size: 14px;
margin-left: 0.5rem;
display: block;
margin-top: 0.25rem;
text-align: center;
}
.signup-offers-page .filters-section {
padding: 1rem;
margin: 0.5rem 0;
}
.signup-offers-page .filters-row {
gap: 1rem;
}
.signup-offers-page .filter-group {
min-width: 120px;
}
.signup-offers-page .offer-card,
.casino-signup-offers-page .offer-card,
.casino-bonus-page .offer-card,
.no-wagering-page .offer-card,
.no-deposit-free-spins-page .offer-card,
.sports-offers-page .offer-card,
.blog-page .offer-card {
flex-direction: column;
text-align: center;
gap: 1rem;
padding: 1.25rem;
min-height: 100px;
align-items: flex-start !important; /* Pin to top – no bounce on refresh */
}
.signup-offers-page .offer-top-row,
.casino-signup-offers-page .offer-top-row,
.casino-bonus-page .offer-top-row,
.no-wagering-page .offer-top-row,
.no-deposit-free-spins-page .offer-top-row,
.sports-offers-page .offer-top-row,
.blog-page .offer-top-row {
flex-direction: column;
gap: 1rem;
margin-bottom: 1rem;
align-items: flex-start !important; /* Top-aligned – content stays still */
}
.signup-offers-page .logo-section,
.signup-offers-page .offer-details,
.casino-signup-offers-page .logo-section,
.casino-signup-offers-page .offer-details,
.casino-bonus-page .logo-section,
.casino-bonus-page .offer-details,
.no-wagering-page .logo-section,
.no-wagering-page .offer-details,
.no-deposit-free-spins-page .logo-section,
.no-deposit-free-spins-page .offer-details,
.sports-offers-page .logo-section,
.sports-offers-page .offer-details,
.blog-page .logo-section,
.blog-page .offer-details {
order: unset;
flex: none;
}
.signup-offers-page .offer-actions {
order: unset;
flex: none;
display: none; /* Hide claim button from top row on mobile */
}
.signup-offers-page .logo-section,
.casino-signup-offers-page .logo-section,
.casino-bonus-page .logo-section,
.no-wagering-page .logo-section,
.no-deposit-free-spins-page .logo-section,
.sports-offers-page .logo-section,
.blog-page .logo-section {
align-self: flex-start !important; /* Pin to top – no bounce */
justify-content: flex-start !important;
}
.signup-offers-page .offer-meta {
justify-content: center;
flex-wrap: wrap;
}
.signup-offers-page .offer-actions {
align-items: center;
width: 100%;
margin-bottom: 1.5rem;
}
.signup-offers-page .offer-blurb {
margin-top: 0;
margin-bottom: 0.5rem;
}
.signup-offers-page .claim-btn {
width: 100%;
}
/* REMOVED CONFLICTING ABSOLUTE POSITIONING RULE - Now using proper key-terms-section styling */
/* Mobile responsive metrics */
.signup-offers-page .metrics-row {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
font-size: 0.8rem;
padding: 20px;
margin: 1.5rem 0;
}
.signup-offers-page .metric-item {
text-align: left;
align-items: flex-start;
}
.signup-offers-page .metric-label {
font-size: var(--metric-mobile-fs) !important;
}
.signup-offers-page .metric-value {
font-size: var(--metric-mobile-fs) !important;
}
/* Ensure metrics row is properly positioned within offer card */
.signup-offers-page .offer-card {
position: relative;
/* Removed padding-bottom - no longer needed with proper key-terms-section */
}
.signup-offers-page .logo-meta {
display: none;
}
/* Force company logos above competition blurb on mobile */
.signup-offers-page .company-logos,
.signup-offers-page .brand-logos,
.signup-offers-page .sponsor-logos {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 0.5rem !important;
order: 1 !important;
}
.signup-offers-page .competition-blurb {
order: 2 !important;
margin-top: 0.25rem !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.25rem !important;
}
.signup-offers-page .competition-blurb .company-name {
font-weight: 700 !important;
font-size: 0.9rem !important;
color: #022e4a !important;
text-align: center !important;
margin-bottom: 0.25rem !important;
}
.signup-offers-page .competition-blurb .prize-text {
font-size: 0.8rem !important;
color: #20242e !important;
text-align: center !important;
line-height: 1.2 !important;
}
}
@media (min-width: 1536px) {
.betting-sites-page .horizontal-game-box {
padding: 1.5rem !important;
margin-bottom: 1.5rem !important;
gap: 1.25rem !important;
}
.betting-sites-page .horizontal-game-box .main-row {
gap: 1.75rem !important;
}
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-image,
.betting-sites-page .horizontal-game-image {
width: 7rem !important;
height: 7rem !important;
}
.betting-sites-page .horizontal-game-blurb,
.betting-sites-page .horizontal-game-box.offers-box .horizontal-game-blurb {
font-size: 1.25rem !important;
line-height: 1.4 !important;
}
.betting-sites-page .horizontal-game-box .claim-button,
.betting-sites-page .horizontal-game-box .dropdown-toggle {
padding: 0.625rem 1.25rem !important;
border-radius: 0.875rem !important;
font-size: 1.25rem !important;
min-width: 9.5rem !important;
}
.betting-sites-page .horizontal-game-box .dropdown-content {
gap: 1.5rem !important;
padding-top: 1.5rem !important;
}
.betting-sites-page .horizontal-game-terms {
font-size: 0.75rem !important;
padding: 1rem !important;
}
}
/* Grid row wrapper for exact three-box width (912px at 1024px+) */
.grid-row-wrapper {
width: calc(3 * 300px + 2 * 0.75rem); /* 912px: 3 boxes + 2 gaps of 0.75rem */
margin: 0 auto; /* Centers wrapper */
max-width: 100%; /* Prevents overflow */
box-sizing: content-box; /* Excludes padding from width */
min-height: 180px; /* Matches .competition-box for CLS stability */
}
/* Align header and blurb to exact grid content width */
.jackpot-competitions-page .page-header {
width: calc(3 * 300px + 2 * 0.75rem); /* 912px to match wrapper */
max-width: 100%;
margin: 3.5rem auto 0.5rem; /* Align with right offers module on desktop */
padding: 0; /* No extra padding */
box-sizing: content-box;
z-index: 10; /* Below .jackpot-games-right-module (z-index:1) */
}
.jackpot-competitions-page .page-header h1 {
font-size: 20px;
font-weight: 700;
color: #022e4a;
margin: 0 0 0.5rem;
line-height: 1.2;
white-space: normal;
}
/* Removed page-blurb styling since it's no longer used */
/* Jackpot features grid styling - hidden by default */
.jackpot-features-grid {
display: none;
}
.jackpot-feature-item {
display: none;
}
.jackpot-feature-icon {
display: none;
}
/* Hover effects for feature items */
.jackpot-feature-item:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(2, 46, 74, 0.2);
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12);
transform: translateY(-1px);
transition: all 0.2s ease;
}
/* Desktop features grid - show only above 900px */
@media (min-width: 900px) {
.jackpot-features-grid {
display: flex !important;
justify-content: center;
gap: 1.5rem;
margin-top: 0.5rem;
flex-wrap: wrap;
}
.jackpot-feature-item {
display: flex !important;
align-items: center;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.1);
padding: 0.4rem 0.8rem;
border-radius: 0.4rem;
font-size: 14px;
font-weight: 500;
color: #022e4a;
border: 1px solid rgba(2, 46, 74, 0.1);
box-shadow: 0 2px 8px rgba(2, 46, 74, 0.08);
}
.jackpot-feature-icon {
display: inline !important;
font-size: 1rem;
}
.daily-free-games-page .jackpot-features-grid {
display: flex !important;
justify-content: center;
gap: 1.5rem;
margin: 0;
flex-wrap: wrap;
}
}
/* Individual Competition Pages - EXACT same styling as signup offers page */
.individual-competition-page .page-header {
background: #00cc5a;
color: #20242e;
padding: 1rem 0;
text-align: left !important; /* Left align on all screen sizes */
box-shadow: 0 4px 12px rgba(0, 204, 90, 0.3);
}
.individual-competition-page .page-header h1 {
font-size: 20px;
font-weight: 700;
margin: 0;
color: #20242e;
white-space: normal;
line-height: 1.2;
text-align: left !important; /* Left align on all screen sizes */
}
.individual-competition-page .features-grid {
display: none;
}
.individual-competition-page .feature-item {
display: none;
}
.individual-competition-page .feature-icon {
display: none;
}
/* Desktop styles - EXACT same as signup offers page */
@media (min-width: 768px) {
.individual-competition-page .page-header {
text-align: left !important; /* Left align on desktop too */
}
.individual-competition-page .page-header h1 {
font-size: 32px !important;
padding: 0 3rem;
text-align: left !important; /* Left align on desktop too */
}
}
@media (min-width: 900px) {
.individual-competition-page .features-grid {
display: flex !important;
justify-content: center;
gap: 1.5rem;
margin-top: 0.5rem;
flex-wrap: wrap;
}
.individual-competition-page .feature-item {
display: flex !important;
align-items: center;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.1);
padding: 0.4rem 0.8rem;
border-radius: 0.4rem;
font-size: 14px;
font-weight: 500;
color: #20242e;
border: 1px solid rgba(2, 46, 74, 0.1);
box-shadow: 0 2px 8px rgba(2, 46, 74, 0.08);
}
.individual-competition-page .feature-icon {
display: inline !important;
font-size: 1rem;
}
}
/* Individual Competition Pages ONLY (template.php) - right-column: same background as rest of page, no white. Explicitly exclude jackpot/daily. */
body.individual-competition-page:not(.jackpot-competitions-page):not(.daily-free-games-page) .right-column {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
background: linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%) !important;
}
/* Individual Competition Pages - Carousel Positioning */
.individual-competition-page .competition-layout {
gap: 0.5rem !important; /* Tight gap between main content and carousels */
}
/* Desktop only (min-width: 768px): 1rem gap between hero section and main content – individual page ONLY. Jackpot explicitly gets 0; daily-free-games handled below by breakpoint. */
@media (min-width: 768px) {
body.individual-competition-page .main-content {
margin-top: 1rem !important;
}
body.jackpot-competitions-page .main-content {
margin-top: 0 !important;
}
}
/* Daily free games: 1rem gap between hero and content below 1024px only */
@media (max-width: 1023px) {
body.daily-free-games-page .main-content {
margin-top: 1rem !important;
}
}
@media (min-width: 1024px) {
body.daily-free-games-page .main-content {
margin-top: 0 !important;
}
}
/* Desktop: competition box breaks out of game-hero-section 1rem left padding - no inset on competition box; content below keeps 0.5rem */
@media (min-width: 768px) {
.individual-competition-page .main-competition-box {
margin-left: calc(var(--content-side-padding, 1rem) * -1) !important;
}
}
.individual-competition-page .carousel-wrapper {
margin-bottom: 0.5rem; /* Minimal spacing between carousels */
}
.individual-competition-page .carousel-wrapper h2 {
font-size: 14px !important; /* 14px mobile */
font-weight: 700;
color: #022e4a;
margin: 0 0 0rem !important; /* Desktop: 1rem gap between header and carousel. Mobile: override below. */
text-align: left !important; /* Left align on all screen sizes */
}
/* 16px desktop */
@media (min-width: 920px) {
.individual-competition-page .carousel-wrapper h2 {
font-size: 16px !important;
text-align: left !important; /* Left align on desktop too */
}
}
.individual-competition-page .carousel-wrapper a {
color: #00cc5a;
text-decoration: none;
font-weight: 600;
/* font-size: from global .see-all-link block – 16px desktop, 14px mobile */
}
.individual-competition-page .carousel-wrapper a:hover {
text-decoration: underline;
}
/* Desktop: Bring carousels closer together */
@media (min-width: 768px) {
.individual-competition-page .competition-layout {
gap: 1rem !important; /* Even tighter gap on desktop */
}
.individual-competition-page .internal-linking-section {
margin-left: 2rem;
margin-top: 0; /* No gap - part of competition-layout */
display: flex;
justify-content: center;
}
.individual-competition-page .carousel-wrapper {
flex: 1;
margin-bottom: 0;
}
.individual-competition-page .carousel-wrapper h2 {
font-size: 14px !important; /* 14px mobile (768px-919px) */
}
.individual-competition-page .offers-box {
height: auto !important; /* Allow dynamic height */
min-height: 220px !important;
max-height: none !important;
padding: 1.5rem 1rem !important; /* Push content inward from edges */
}
}
@media (min-width: 920px) {
.individual-competition-page .carousel-wrapper h2 {
font-size: 16px !important; /* 16px desktop */
}
.individual-competition-page .offers-box {
height: auto !important; /* Allow dynamic height */
min-height: 220px !important;
max-height: none !important;
padding: 1.5rem 1rem !important; /* Push content inward from edges */
}
}
/* Desktop page header font sizes */
@media (min-width: 768px) {
.daily-free-games-page .page-header h1 {
font-size: 32px !important;
}
.jackpot-competitions-page .page-header h1 {
font-size: 32px !important;
}
}
/* Daily Free Games Page Styling - Copy Jackpot Games Logic */
.daily-free-games-page .page-header {
width: calc(3 * 300px + 2 * 0.75rem); /* 912px to match wrapper */
max-width: 100%;
margin: 3.5rem auto 0.5rem; /* Align with right offers module on desktop */
padding: 0; /* No extra padding */
text-align: center; /* Center the header text */
box-sizing: content-box;
z-index: 10;
}
/* Container to center features between title and content */
.daily-free-games-page .features-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 1rem 0 2rem; /* Simple: 1rem below title, 2rem above competition boxes */
}
.daily-free-games-page .page-header h1 {
font-size: 20px;
font-weight: 700;
color: #022e4a;
margin: 0 0 0.5rem;
line-height: 1.2;
white-space: normal;
}
/* Main content wrapper to use flexbox for perfect centering */
.daily-free-games-page .main-content-wrapper {
display: flex;
flex-direction: column;
min-height: 0;
}
.daily-free-games-page .jackpot-features-grid {
display: none;
}
/* Mobile responsive styles - copy jackpot games logic */
@media (max-width: 767px) {
.daily-free-games-page .page-header {
width: 100%; /* Full-width for 2-box grid */
padding: 0 0.75rem; /* Matches grid */
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 1rem; /* Small gap below prize calculator on mobile */
box-sizing: border-box;
}
.daily-free-games-page .page-header h1 {
font-size: 20px;
text-align: center; /* Center H1 on mobile only */
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
padding: 0;
}
.daily-free-games-page .main-content-wrapper {
display: flex;
flex-direction: column;
min-height: 0;
}
.daily-free-games-page .features-container {
margin: 0.5rem 0 1.5rem; /* Smaller margins on mobile */
}
.daily-free-games-page .jackpot-features-grid {
gap: 0.4rem;
margin: 0; /* Remove individual margins */
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.daily-free-games-page .page-header {
padding: 0 0.5rem; /* Matches grid */
width: 100%;
margin: 0 auto;
margin-top: 1rem; /* Small gap below prize calculator on very small screens */
}
.daily-free-games-page .page-header h1 {
font-size: 20px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
padding: 0;
}
.daily-free-games-page .main-content-wrapper {
display: flex;
flex-direction: column;
min-height: 0;
}
.daily-free-games-page .features-container {
margin: 0.5rem 0 1.5rem; /* Smaller margins on small mobile */
}
.daily-free-games-page .jackpot-features-grid {
gap: 0.3rem;
width: 100%;
justify-content: center;
margin: 0; /* Remove individual margins */
}
}
/* Stabilize prize calculator to prevent CLS */
.prize-calculator-wrapper {
min-height: 3rem; /* Matches existing height */
}
/* Breakpoint-specific alignment */
@media (min-width: 1280px) {
.grid-row-wrapper, .jackpot-competitions-page .page-header {
width: calc(3 * 300px + 2 * 0.75rem); /* 912px */
padding: 0; /* Grid handles padding (5rem) */
}
}
@media (min-width: 1024px) and (max-width: 1279px) {
.grid-row-wrapper, .jackpot-competitions-page .page-header {
width: calc(3 * 300px + 2 * 0.75rem); /* 912px */
padding: 0; /* Grid handles padding (4rem) */
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.grid-row-wrapper, .jackpot-competitions-page .page-header {
width: calc(3 * 300px + 2 * 0.625rem); /* 920px: 3 boxes + 2 gaps of 0.625rem */
padding: 0; /* Grid handles padding (2rem) */
}
/* Jackpot live rounds: wrapper must not constrain until 1024 – let .comp-box-grid 1.5rem padding define edges */
.jackpot-competitions-page #live-rounds-wrapper.grid-row-wrapper {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.jackpot-competitions-page .page-header h1 {
font-size: 32px;
}
}
@media (max-width: 767px) {
.grid-row-wrapper, .jackpot-competitions-page .page-header {
width: 100%; /* Full-width for 2-box grid */
padding: 0 0.5rem; /* Matches grid */
margin-left: auto;
margin-right: auto;
margin-top: 1rem; /* Small gap below prize calculator on mobile */
box-sizing: border-box;
}
.jackpot-competitions-page .page-header h1 {
font-size: 20px;
text-align: center; /* Center H1 on mobile only */
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
padding: 0;
}
.jackpot-competitions-page .page-blurb {
font-size: 0.75rem; /* 12px */
}
/* Make section controls text bold on mobile */
.section-controls .control-module .expired-button {
font-weight: 700 !important;
}
}
@media (max-width: 480px) {
.grid-row-wrapper, .jackpot-competitions-page .page-header {
padding: 0 0.5rem; /* Matches grid */
width: 100%;
margin: 0 auto;
margin-top: 1rem; /* Small gap below prize calculator on very small screens */
}
.jackpot-competitions-page .page-header h1 {
font-size: 20px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
padding: 0;
}
}
/* Add spacing between page header and bookmakers content on betting sites page */
.signup-offers-page .page-header + .container {
margin-top: 1rem;
}
/* FORCE REMOVE WHITE LINE ON BETTING SITES PAGE */
.betting-sites-page {
margin-top: 0 !important;
padding-top: 0 !important;
}
.betting-sites-page body {
margin-top: 0 !important;
padding-top: 0 !important;
}
.betting-sites-page .page-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
}
.signup-offers-page .offers-count {
font-weight: 600;
color: #00cc5a;
font-size: 14px;
margin-left: 0.5rem;
}
.signup-offers-page .offers-count.loading {
color: #666;
font-style: italic;
}
/* Use same bonus-grid-heading structure as other pages */
.signup-offers-page .bonus-grid-heading {
margin: 0.75rem 0 0.75rem;
}
/* Ensure proper spacing between sections */
.signup-offers-page .filters-section + .bonus-grid-heading {
margin-top: 0.75rem;
}
.signup-offers-page .bonus-grid-heading + .offers-section {
margin-top: 0;
}
/* Apply bonus-grid-heading styles to signup-offers-page */
@media (min-width: 992px) {
/* CASINO SIGNUP OFFERS - GRID ALIGNED WITH OFFER CARD: centre of each label over centre of content below */
/* Rank over rank-number (80px) | Casino over logo (120px) | Headline over blurb (1fr) | Claim over button (250px) */
.signup-offers-page .bonus-grid-heading:has(span) {
background: linear-gradient(135deg, #0fbf6b 0%, #0b8b4f 100%);
color: #ffffff;
border-radius: 0.5rem;
padding: 0.45rem 0;
margin: 0.75rem 0 0.75rem;
display: grid;
grid-template-columns: 80px 1.5rem 120px 1.67rem minmax(0, 1fr) 1.67rem 250px;
align-items: center;
gap: 0;
box-shadow: none;
line-height: 1.1;
}
.signup-offers-page .bonus-grid-heading:has(span) span:first-child { grid-column: 1; text-align: center; }
.signup-offers-page .bonus-grid-heading:has(span) span:nth-child(2) { grid-column: 3; text-align: center; }
.signup-offers-page .bonus-grid-heading:has(span) h2 { grid-column: 5; text-align: center; }
.signup-offers-page .bonus-grid-heading:has(span) span:last-child { grid-column: 7; text-align: center; }
/* SPORTS SIGNUP OFFERS - PURPOSE-BUILT GREEN BOX (NO SPANS, NO GRID) */
.signup-offers-page .bonus-grid-heading:not(:has(span)) {
/* DUPLICATE GREEN BOX STYLING - SAME AS CASINO BUT NO GRID */
background: linear-gradient(135deg, #0fbf6b 0%, #0b8b4f 100%) !important;
color: #ffffff !important;
border-radius: 0.5rem !important;
padding: 0.45rem 0.75rem 0.45rem 0.4rem !important;
margin: 0.75rem 0 0.75rem !important;
box-shadow: none !important;
line-height: 1.1 !important;
/* NO GRID - SIMPLE BLOCK CENTERING */
display: block !important;
text-align: center !important;
grid-template-columns: none !important;
grid: none !important;
}
.signup-offers-page .bonus-grid-heading:not(:has(span)) #offers-count {
display: inline-block !important;
margin: 0 auto !important;
width: auto !important;
text-align: center !important;
color: #ffffff !important;
font-size: 16px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
/* Ranked pages: Rank, Casino, Claim Offer (spans) match #offers-count / h2 – 20px desktop */
.signup-offers-page .bonus-grid-heading:has(span) span,
.signup-offers-page .bonus-grid-heading:has(span) h2,
.no-wagering-page .bonus-grid-heading span,
.no-wagering-page .bonus-grid-heading h2,
.casino-bonus-page .bonus-grid-heading span,
.casino-bonus-page .bonus-grid-heading h2 {
font-size: var(--fs-h2) !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: 0.95;
margin: 0;
padding: 0;
line-height: 1.1;
}
.signup-offers-page .bonus-grid-heading:has(span) span {
display: flex;
align-items: center;
justify-content: center;
}
/* Rank – centred over rank-number column */
.signup-offers-page .bonus-grid-heading:has(span) span:first-child,
.no-wagering-page .bonus-grid-heading span:first-child,
.casino-bonus-page .bonus-grid-heading span:first-child {
justify-self: center;
}
/* Casino – centred over logo-section */
.signup-offers-page .bonus-grid-heading:has(span) span:nth-child(2),
.no-wagering-page .bonus-grid-heading span:nth-child(2),
.casino-bonus-page .bonus-grid-heading span:nth-child(2) {
justify-self: center;
}
/* Headline – centred over offer-details / offer blurb */
.signup-offers-page .bonus-grid-heading:has(span) h2,
.no-wagering-page .bonus-grid-heading h2,
.casino-bonus-page .bonus-grid-heading h2 {
justify-self: center;
white-space: nowrap;
letter-spacing: 0.03em;
}
/* Claim Offer – centred over claim button */
.signup-offers-page .bonus-grid-heading:has(span) span:last-child,
.no-wagering-page .bonus-grid-heading span:last-child,
.casino-bonus-page .bonus-grid-heading span:last-child {
justify-self: center;
}
}
@media (min-width: 768px) {
.signup-offers-page .page-header h1 {
font-size: 32px;
}
.signup-offers-page .filters-title {
font-size: var(--filter-box-title);
}
.signup-offers-page .offers-count {
font-size: 18px;
margin-left: 0.75rem;
}
.signup-offers-page .bonus-grid-heading {
margin: 0.75rem 0 0.75rem;
}
.signup-offers-page .filter-group label {
font-size: var(--filter-box-value);
}
}
/* Mobile styling for bonus-grid-heading on signup-offers-page - CASINO ONLY (HAS SPANS) */
@media (max-width: 991px) {
.signup-offers-page .bonus-grid-heading:has(span) {
display: block;
text-align: center;
padding: 0.6rem 1rem;
margin: 0.75rem 0 0.75rem;
background: linear-gradient(135deg, #0fbf6b 0%, #0b8b4f 100%);
color: #ffffff;
border-radius: 0.5rem;
box-shadow: none;
}
.signup-offers-page .bonus-grid-heading:has(span) span {
display: none;
}
.signup-offers-page .bonus-grid-heading:has(span) h2 {
display: block;
margin: 0;
font-size: var(--fs-base) !important; /* 16px mobile – same as all bonus-grid-heading */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #ffffff !important;
text-align: center;
width: auto;
}
}
/* Responsive Design for Sign Up Offers Page */
@media (min-width: 900px) {
.signup-offers-page .features-grid {
display: flex !important;
justify-content: center;
gap: 1.5rem;
margin-top: 0.75rem;
flex-wrap: wrap;
}
.signup-offers-page .feature-item {
display: flex !important;
align-items: center;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.1);
padding: 0.4rem 0.8rem;
border-radius: 0.4rem;
font-size: 14px;
font-weight: 500;
}
.signup-offers-page .feature-icon {
display: inline !important;
font-size: 1rem;
}
}
/* Filter layout: sports 3-col at 500px+; casino tree until 768px then one row (see below) */
@media (min-width: 500px) {
/* Sports only: 3 columns on one line */
.sports-offers-page .filters-row {
gap: 1.5rem;
justify-content: center;
flex-wrap: nowrap;
margin-left: auto;
margin-right: auto;
}
.sports-offers-page .filter-group {
min-width: auto;
flex: 0 0 auto;
max-width: none;
}
/* Casino: allow wrap so 5 groups don’t overflow; desktop one-line in 1024px block */
.casino-signup-offers-page .filters-row {
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
}
.casino-signup-offers-page .filter-group {
min-width: 150px;
flex: 0 0 auto;
max-width: none;
}
}
@media (max-width: 499px) {
/* Below 500px - casino/sports vertical / 2-col */
.signup-offers-page .filters-row,
.sports-offers-page .filters-row {
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
max-width: calc(2 * 150px + 1rem);
}
.signup-offers-page .filter-group,
.sports-offers-page .filter-group {
min-width: 150px;
flex: 0 0 150px;
max-width: 150px;
box-sizing: border-box;
}
}
/* Casino only: keep tree layout (below-500 style) until 768px - sports unchanged */
@media (min-width: 500px) and (max-width: 767px) {
.casino-signup-offers-page .filters-row {
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
max-width: calc(2 * 150px + 1rem);
}
.casino-signup-offers-page .filter-group {
min-width: 150px;
flex: 0 0 150px;
max-width: 150px;
box-sizing: border-box;
}
}
/* Ensure 2x2 layout continues down to 330px (casino only) */
@media (max-width: 330px) {
.casino-signup-offers-page .filters-row {
gap: 0.75rem;
/* Keep 2x2 layout even on very small screens */
flex-wrap: wrap;
justify-content: center;
max-width: calc(2 * 140px + 0.75rem); /* Slightly smaller groups for very small screens */
}
.casino-signup-offers-page .filter-group {
min-width: 140px;
flex: 0 0 140px;
max-width: 140px;
}
}
/* Force 2x2 layout below 380px - OVERRIDE EVERYTHING (casino only) */
@media (max-width: 380px) {
.casino-signup-offers-page .filters-row {
gap: 0.5rem !important;
flex-wrap: wrap !important;
justify-content: center !important;
/* Force exactly 2 groups per row */
max-width: calc(2 * 140px + 0.75rem) !important;
display: flex !important;
}
.casino-signup-offers-page .filter-group {
min-width: 140px !important;
flex: 0 0 140px !important;
max-width: 140px !important;
width: 140px !important;
/* Force each group to take exactly half the available space */
box-sizing: border-box !important;
}
/* Ensure no other CSS can override this */
.casino-signup-offers-page .filters-row * {
flex-wrap: wrap !important;
}
}
/* Sports Offers Page Specific Styles */
.sports-offers-page {
background: linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%);
min-height: 100vh;
}
/* Casino/Sports Offers - Filter Expand/Collapse (Mobile Only) */
.signup-offers-page .filter-expand-btn,
.sports-offers-page .filter-expand-btn {
display: none; /* Hidden by default (desktop) */
width: 100%;
margin-top: 1rem;
padding: 0.75rem 1rem;
background: transparent;
border: 2px solid #0fbf6b;
border-radius: 0.5rem;
color: #0fbf6b;
font-size: var(--filter-box-value);
font-weight: 600;
cursor: pointer;
text-align: center;
transition: all 0.3s ease;
}
.signup-offers-page .filter-expand-btn:hover {
background: #0fbf6b;
color: #ffffff;
}
.signup-offers-page .filter-group-collapsible {
/* Visible by default on desktop */
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* ========== HERO MOBILE BAR (UK: X Offers — See Filters — How We Rate) ==========
Shown on all dimensions for offer pages so hero height is consistent (no CLS). */
.hero-mobile-bar {
display: none;
/* Visible in @media (max-width: 1023px) for all; and in @media (min-width: 1024px) for offer pages */
}
/* See Filters + How We Rate inside author bar (with | between) – signup/sports */
.hero-author-info .hero-author-bar__btn,
.hero-author-info .hero-author-bar__how-we-rate {
font-size: inherit;
line-height: inherit;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.8) !important;
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
text-decoration: underline;
white-space: nowrap;
font-family: inherit;
}
.hero-author-info .hero-author-bar__btn:hover,
.hero-author-info .hero-author-bar__how-we-rate:hover {
color: #fff !important;
}
.hero-author-info .hero-author-bar__how-we-rate {
text-decoration: underline;
}
/* Desktop (1024px+): hide green count bar; filter box hidden until triggered; subtitle and author directly below each other */
@media (min-width: 1024px) {
.hero-left .hero-subtitle {
margin-bottom: 0 !important;
}
.signup-offers-page .hero-mobile-bar,
.sports-offers-page .hero-mobile-bar {
display: none !important;
}
/* Filter box collapsed by default on desktop – show only when See Filters is clicked */
.signup-offers-page .filters-section .filters-title,
.signup-offers-page .filters-section .filters-row,
.sports-offers-page .filters-section .filters-title,
.sports-offers-page .filters-section .filters-row {
display: none !important;
}
.signup-offers-page .filters-section.filters-expanded .filters-title,
.signup-offers-page .filters-section.filters-expanded .filters-row,
.sports-offers-page .filters-section.filters-expanded .filters-title,
.sports-offers-page .filters-section.filters-expanded .filters-row {
display: block !important;
}
.signup-offers-page .filters-section.filters-expanded .filters-row,
.sports-offers-page .filters-section.filters-expanded .filters-row {
display: flex !important;
}
/* Collapsed filter section closes fully (no gap below hero) – sports + casino */
.signup-offers-page .filters-section:not(.filters-expanded),
.sports-offers-page .filters-section:not(.filters-expanded) {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
min-height: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
}
@media (max-width: 1023px) {
/* Hide duplicate How We Rate / See Filters in author row – hero bar has them (up to 1023px) */
.signup-offers-page .hero-author-info .how-we-rate-link,
.signup-offers-page .hero-author-info .hero-author-bar__how-we-rate,
.signup-offers-page .hero-author-info .hero-author-bar__btn,
.sports-offers-page .hero-author-info .how-we-rate-link,
.sports-offers-page .hero-author-info .hero-author-bar__how-we-rate,
.sports-offers-page .hero-author-info .hero-author-bar__btn,
.casino-bonus-page .hero-author-info .how-we-rate-link,
.no-deposit-free-spins-page .hero-author-info .how-we-rate-link,
.no-wagering-page .hero-author-info .how-we-rate-link,
.daily-free-games-page .hero-author-info .how-we-rate-link,
.jackpot-competitions-page .hero-author-info .how-we-rate-link {
display: none !important;
}
/* Hide | separator after Last Updated (up to 1023px) – hero bar has How We Rate, no pipe needed */
.author-sep-before-how-we-rate {
display: none !important;
}
/* Mobile/tablet up to 1023px: Written by closer to subtitle (compact) */
.hero-left .hero-subtitle {
margin-bottom: 0 !important;
}
.hero-left .hero-author-info {
margin-top: -0.25rem !important;
}
/* Hero bar: UK: X Offers + How We Rate + See Filters as buttons on same line (up to 1023px) */
.hero-mobile-bar {
display: flex !important;
align-items: stretch;
justify-content: flex-start;
flex-wrap: nowrap !important;
gap: 0.25rem;
margin-top: 0.25rem !important;
margin-bottom: 0.5rem !important;
padding: 0;
font-size: 0.75rem;
width: 100%;
max-width: 540px !important;
box-sizing: border-box;
}
/* Green box: UK: Offers – same font size as See Filters / How We Rate (12px <430, 13px 430+) */
.hero-mobile-bar__count {
font-weight: 600;
flex-shrink: 0;
min-width: 2.8em !important; /* Fixed width for up to 99 offers - prevents CLS when count changes */
padding: 0.4rem 0.6rem;
border-radius: 0.375rem;
background: #00cc5a;
color: #fff !important;
white-space: nowrap;
font-size: 12px !important;
text-align: center;
box-sizing: border-box;
}
.jackpot-competitions-page .hero-mobile-bar__count--none {
background: rgb(204, 8, 0) !important;
}
/* Actions: same tight gap as bar (See Filters ↔ How We Rate) – don't grow so How We Rate stays right by See Filters */
.hero-mobile-bar__actions {
display: flex !important;
align-items: stretch;
flex: 0 1 auto !important;
min-width: 0;
gap: 0.25rem;
}
.hero-mobile-bar__actions:empty {
display: none !important;
}
/* See Filters – same font size as count and How We Rate */
.hero-mobile-bar .hero-mobile-bar__btn {
flex: 1 1 0;
min-width: 0;
max-width: 9rem;
padding: 0.4rem 0.6rem;
font-size: 12px !important;
font-weight: 600;
border: none;
border-radius: 0.375rem;
background: rgba(255, 255, 255, 0.14);
color: #fff !important;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
text-align: center;
}
.hero-mobile-bar .hero-mobile-bar__btn:hover {
background: rgba(255, 255, 255, 0.22);
}
/* Jackpot mobile: Sort By dropdown wrapper (position for dropdown) */
.jackpot-competitions-page .hero-mobile-bar__sort-wrap {
position: relative;
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: stretch;
}
.jackpot-competitions-page .hero-mobile-bar__sort-wrap .hero-mobile-bar__btn {
flex: 1 1 100%;
}
.jackpot-competitions-page .hero-mobile-bar__sort-dropdown {
display: none;
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: auto;
min-width: 180px;
max-width: calc(100vw - 1.5rem);
background: #fff;
border: 2px solid #0fbf6b;
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 10000;
overflow: hidden;
}
.jackpot-competitions-page .hero-mobile-bar__sort-dropdown.active {
display: block;
}
.jackpot-competitions-page .hero-mobile-bar__sort-option {
display: block;
width: 100%;
padding: 0.75rem 1rem;
background: #fff;
color: #20242e;
border: none;
border-bottom: 1px solid #e9ecef;
text-align: left;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
font-family: Montserrat, sans-serif;
}
.jackpot-competitions-page .hero-mobile-bar__sort-option:last-child {
border-bottom: none;
}
.jackpot-competitions-page .hero-mobile-bar__sort-option:hover {
background: #f8f9fa;
}
/* Sort dropdown: keep inside page on very small screens */
@media (max-width: 400px) {
.jackpot-competitions-page .hero-mobile-bar__sort-dropdown {
max-width: min(calc(100vw - 1.5rem), 100%) !important;
}
}
/* How We Rate – same font size and gap as count / See Filters */
.hero-mobile-bar__how-we-rate {
flex: 1 1 0;
min-width: 0;
max-width: 6.5rem !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 0.4rem 0.6rem;
border-radius: 0.375rem;
background: rgba(255, 255, 255, 0.14);
color: #fff !important;
text-decoration: none;
font-weight: 600;
white-space: nowrap;
font-size: 12px !important;
}
/* 430px–1023px: See Filters and How We Rate same width (match each other) */
@media (min-width: 430px) and (max-width: 1023px) {
.hero-mobile-bar .hero-mobile-bar__btn,
.hero-mobile-bar__how-we-rate {
min-width: 7.5rem !important;
width: 7.5rem !important;
max-width: 7.5rem !important;
flex: 0 0 7.5rem !important;
box-sizing: border-box;
}
}
/* Below 430px: author row same size as hero bar – 12px */
@media (max-width: 429px) {
.hero-author-info,
.hero-author-info .author-name,
.hero-author-info .author-expertise,
.hero-author-info .last-updated,
.hero-author-info .how-we-rate-link,
.hero-author-info .author-sep {
font-size: 12px !important;
}
}
/* 430px–1023px: hero bar and author row 13px; filter box uses CSS vars (--filter-box-title / --filter-box-value) */
@media (min-width: 430px) and (max-width: 1023px) {
.hero-mobile-bar__count,
.hero-mobile-bar .hero-mobile-bar__btn,
.hero-mobile-bar__how-we-rate {
font-size: 13px !important;
}
.hero-author-info,
.hero-author-info .author-name,
.hero-author-info .author-expertise,
.hero-author-info .last-updated,
.hero-author-info .how-we-rate-link,
.hero-author-info .author-sep {
font-size: 13px !important;
}
}
.hero-mobile-bar__how-we-rate:hover {
background: rgba(255, 255, 255, 0.22);
color: #fff !important;
}
/* Hide bonus-grid-heading up to 1023px – hero bar replaces it. No-deposit: always show full-size heading (no mobile swap, no flash). */
.signup-offers-page .main-container .bonus-grid-heading,
.sports-offers-page .main-container .bonus-grid-heading,
.casino-bonus-page .main-container .bonus-grid-heading,
.no-wagering-page .main-container .bonus-grid-heading {
display: none !important;
}
/* Jackpot/daily: hide entire section-title bar on mobile (hero bar has count + Sort By / How We Rate) */
.jackpot-competitions-page #live-rounds-section.section-title,
.daily-free-games-page #daily-games-section.section-title {
display: none !important;
}
/* Jackpot: show expired rounds header on mobile ONLY when there are live competitions */
/* When all expired, hero-mobile-bar__count turns red, so we don't need the header */
/* Desktop: expired header always visible (handled elsewhere) */
/* Mobile: only show when there ARE live competitions */
@media (max-width: 767px) {
.jackpot-competitions-page #expired-games.section-title {
display: none !important; /* Hide by default on mobile */
}
/* Show expired header on mobile only when there ARE live competitions */
.jackpot-competitions-page:not(.no-live-competitions) #expired-games.section-title {
display: block !important; /* Show between live and expired rounds on mobile */
}
}
/* Jackpot: 1rem gap so grid isn’t directly stuck to hero. Daily free games: gap from main-content padding-top only (no double gap). */
.jackpot-competitions-page #live-rounds-wrapper {
margin-top: 1rem !important;
}
.daily-free-games-page .grid-row-wrapper {
margin-top: 0 !important;
}
/* Unified spacing for both page types – exact same as daily */
body.jackpot-competitions-page .hero-section,
body.daily-free-games-page .hero-section {
padding-bottom: 0.5rem !important;
}
/* When only expired rounds: 1.25rem gap between hero and expired grid */
body.no-live-competitions #expired-games-grid {
margin-top: 1rem !important;
}
/* Offers section starts flush under hero (768–1023: hero bar in hero; 1024+ normal) */
.signup-offers-page .main-container,
.sports-offers-page .main-container,
.casino-bonus-page .main-container,
.no-deposit-free-spins-page .main-container,
.no-wagering-page .main-container {
margin-top: 0 !important;
}
/* See Filters in hero bar up to 1023px; hide duplicate in filters-section */
.signup-offers-page .filters-section .filter-expand-btn,
.sports-offers-page .filters-section .filter-expand-btn {
display: none !important;
}
/* Filter section: zero space when closed (767px) – no gap unless expanded */
.signup-offers-page .filters-section:not(.filters-expanded),
.sports-offers-page .filters-section:not(.filters-expanded) {
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
/* Filter section expanded: add padding from hero, reduce padding to filters */
.signup-offers-page .filters-section.filters-expanded,
.sports-offers-page .filters-section.filters-expanded {
margin-top: 1.25rem !important; /* Space from hero so header isn't flush */
padding-top: 0.5rem !important; /* Reduced padding inside */
padding-bottom: 0.5rem !important;
}
/* FIND SPECIFIC OFFERS: mobile only 1rem margin-top when filter box is enabled */
.signup-offers-page .filters-section.filters-expanded .filters-title,
.sports-offers-page .filters-section.filters-expanded .filters-title {
margin-top: 1rem !important;
margin-bottom: 0.35rem !important;
}
}
/* How We Rate: below 450px = hide entirely (spacing); 450px+ = in box on same line as before */
@media (max-width: 449px) {
.signup-offers-page .hero-mobile-bar__how-we-rate,
.sports-offers-page .hero-mobile-bar__how-we-rate,
.casino-bonus-page .hero-mobile-bar__how-we-rate,
.no-deposit-free-spins-page .hero-mobile-bar__how-we-rate,
.no-wagering-page .hero-mobile-bar__how-we-rate {
display: none !important;
}
}
/* Up to 1023px: layout structure (bonus-grid order, filters-section); hero bar visible, bonus-grid-heading hidden; at 1024+ reversed */
@media (max-width: 1023px) {
.signup-offers-page .main-container,
.sports-offers-page .main-container {
display: flex !important;
flex-direction: column !important;
}
/* bonus-grid-heading hidden (hero bar); filters-section order; offers flush */
.signup-offers-page .bonus-grid-heading,
.sports-offers-page .bonus-grid-heading {
order: 1;
}
/* Bonus-grid-heading hidden on mobile (hero bar replaces); no margin needed */
.signup-offers-page .bonus-grid-heading,
.sports-offers-page .bonus-grid-heading {
margin-bottom: 0 !important;
}
/* Filters-section: zero visible space when closed – no gap unless triggered */
.signup-offers-page .filters-section:not(.filters-expanded),
.sports-offers-page .filters-section:not(.filters-expanded) {
order: 2;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
}
.signup-offers-page .filters-section.filters-expanded,
.sports-offers-page .filters-section.filters-expanded {
order: 2;
height: auto;
overflow: visible;
padding: 0 !important;
margin: 0 0 0rem 0 !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* Seamless: first offer flush under hero when filter closed */
.signup-offers-page .filters-section + .offers-section,
.sports-offers-page .filters-section + .offers-section {
margin-top: 0 !important;
}
.signup-offers-page .offers-section,
.sports-offers-page .offers-section {
margin-top: 0 !important; /* overridden above when adjacent to filters-section */
}
/* Pages WITHOUT filter: no gap – first offer flush with bonus-grid-heading (industry standard) */
.casino-bonus-page .bonus-grid-heading + .offers-section,
.no-wagering-page .bonus-grid-heading + .offers-section,
.no-deposit-free-spins-page .bonus-grid-heading + .offers-section,
.blog-page .bonus-grid-heading + .offers-section {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* No faint white strip: first offer card flush with section (seamless when filter closed) */
.bonus-grid-heading + .offers-section .offers-list,
.filters-section + .offers-section .offers-list {
padding-top: 0 !important;
}
.filters-section + .offers-section {
padding-top: 0 !important;
}
.offers-list .offer-card:first-child {
margin-top: 0 !important;
}
/* Casino only: filter box closed – hide title and row */
.signup-offers-page .filters-section .filters-title,
.signup-offers-page .filters-section .filters-row {
display: none !important;
}
.signup-offers-page .filters-section.filters-expanded .filters-title,
.signup-offers-page .filters-section.filters-expanded .filters-row {
display: block !important;
}
/* Casino only: filter box expanded layout */
.signup-offers-page .filters-section.filters-expanded {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
padding: 1rem !important;
background: #fff !important;
border-radius: 0.5rem !important;
box-shadow: 0 2px 8px rgba(2, 46, 74, 0.08) !important;
text-align: center !important;
box-sizing: border-box !important;
}
.signup-offers-page .filters-section.filters-expanded .filters-title {
margin-top: 0.75rem !important;
margin-bottom: 0.75rem !important;
text-align: center !important;
}
.signup-offers-page .filters-section.filters-expanded .filters-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
gap: 1rem 1.5rem !important;
}
.signup-offers-page .filters-section.filters-expanded .filter-group {
flex: 0 0 auto !important;
min-width: 72px !important;
max-width: none !important;
align-items: center !important;
text-align: center !important;
}
.signup-offers-page .filters-section.filters-expanded .filter-group > label {
text-align: center !important;
}
/* Casino: one line at 768px+ only; sports: one line at 500px+ */
@media (min-width: 768px) and (max-width: 1023px) {
.casino-signup-offers-page .filters-section.filters-expanded .filters-row {
flex-wrap: nowrap !important;
}
}
@media (min-width: 500px) and (max-width: 1023px) {
.sports-offers-page .filters-section.filters-expanded .filters-row {
flex-wrap: nowrap !important;
}
}
.signup-offers-page .filter-expand-btn {
display: block !important;
margin: 0 !important;
width: 100%;
padding: 0.5rem 1rem !important;
font-size: var(--filter-box-value) !important;
}
.signup-offers-page .filters-section {
padding: 0.375rem 0 0 0 !important;
}
/* Sports: button and section padding (layout is in sports-only block) */
.sports-offers-page .filter-expand-btn {
display: block !important;
margin: 0 !important;
width: 100%;
padding: 0.5rem 1rem !important;
font-size: var(--filter-box-value) !important;
}
.sports-offers-page .filters-section {
padding: 0.375rem 0 0 0 !important;
}
.signup-offers-page .offers-section,
.sports-offers-page .offers-section {
order: 3;
}
/* Mobile: bonus-grid-heading flat corners, full width */
.signup-offers-page .bonus-grid-heading,
.sports-offers-page .bonus-grid-heading,
.no-wagering-page .bonus-grid-heading,
.casino-bonus-page .bonus-grid-heading {
border-radius: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Mobile: attach bonus-grid-heading to bottom of hero-section (no gap) on offer pages */
.signup-offers-page .main-content .hero-section,
.casino-bonus-page .main-content .hero-section,
.no-deposit-free-spins-page .main-content .hero-section,
.no-wagering-page .main-content .hero-section,
.blog-page .main-content .hero-section,
.sports-offers-page .main-content .hero-section {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.signup-offers-page .main-container,
.casino-bonus-page .main-container,
.no-deposit-free-spins-page .main-container,
.no-wagering-page .main-container,
.blog-page .main-container,
.sports-offers-page .main-container {
margin-top: 0 !important;
}
.signup-offers-page .bonus-grid-heading,
.casino-bonus-page .bonus-grid-heading,
.no-deposit-free-spins-page .bonus-grid-heading,
.no-wagering-page .bonus-grid-heading,
.blog-page .bonus-grid-heading,
.sports-offers-page .bonus-grid-heading {
margin-top: 0 !important;
}
/* See Filters box: slightly narrower on mobile, centred */
.signup-offers-page .filter-expand-btn,
.sports-offers-page .filter-expand-btn {
width: 92% !important;
max-width: 92% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 991px) {
.signup-offers-page .filter-expand-btn {
display: block;
}
.sports-offers-page .filter-expand-btn {
display: block;
}
}
/* Casino only: below 768px – 2x2 grid when filters expanded (tree layout) */
@media (max-width: 767px) {
.casino-signup-offers-page .filters-section.filters-expanded .filters-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.5rem !important;
justify-content: center !important;
align-items: flex-start !important;
min-height: 160px !important;
}
.casino-signup-offers-page .filters-section.filters-expanded .filter-group:not(.filter-group-collapsible) {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* Casino: tree layout ONLY below 768px – at 768+ uses desktop one-line */
@media (max-width: 767px) {
.casino-signup-offers-page .filter-group:not(.filter-group-collapsible) {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.5rem !important;
min-height: 140px !important;
}
.casino-signup-offers-page .filters-row .filter-group-collapsible {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
}
.casino-signup-offers-page .filters-row .filter-group-collapsible.expanded {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.5rem !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-top: 0 !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
opacity: 1 !important;
}
.casino-signup-offers-page .filter-group label,
.casino-signup-offers-page .filter-group-collapsible > label {
align-self: flex-start !important;
margin-bottom: 0.5rem !important;
font-size: var(--filter-box-value) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
min-height: auto !important;
height: auto !important;
}
.casino-signup-offers-page .filter-options {
align-items: flex-start !important;
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
width: 100% !important;
color: #00cc5a !important;
}
.casino-signup-offers-page .filter-option {
color: #20242e !important;
}
}
/* Sports: tree/collapsible layout up to 991px */
@media (max-width: 991px) {
.sports-offers-page .filter-group:not(.filter-group-collapsible) {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.5rem !important;
min-height: 140px !important;
}
.sports-offers-page .filters-row .filter-group-collapsible {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
}
.sports-offers-page .filters-row .filter-group-collapsible.expanded {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.5rem !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-top: 0 !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
opacity: 1 !important;
}
.sports-offers-page .filter-group label {
align-self: flex-start !important;
margin-bottom: 0.5rem !important;
font-size: var(--filter-box-value) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
min-height: auto !important;
height: auto !important;
}
.sports-offers-page .filter-options {
align-items: flex-start !important;
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
width: 100% !important;
color: #00cc5a !important;
}
.sports-offers-page .filter-option {
color: #20242e !important;
}
}
.sports-offers-page .page-header {
background: #00cc5a;
color: #20242e;
padding: 1rem 0;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 204, 90, 0.3);
}
.sports-offers-page .page-header h1 {
font-size: 20px;
font-weight: 700;
margin: 0;
color: #20242e;
white-space: normal;
line-height: 1.2;
}
.sports-offers-page .features-grid {
display: none;
}
.sports-offers-page .feature-item {
display: none;
}
.sports-offers-page .feature-icon {
display: none;
}
/* Sports offer listing: width unified with other offer pages (see main-container block above; blog unchanged) */
.sports-offers-page .main-container {
margin: 0 auto;
padding: 0 1rem;
}
.sports-offers-page .results-header {
background: white;
padding: 1.5rem;
margin: 1rem 0;
border-radius: 0.75rem;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.sports-offers-page .results-info {
flex: 1;
}
.sports-offers-page .results-info .offers-count {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
color: #00cc5a;
}
/* ========== SPORTS SIGNUP OFFERS – FILTER BOX (STANDALONE: 3 COLUMNS ONLY) ========== */
/* Fresh logic for sports only. Casino signup keeps its own rules. Three headers on one line, centred, above 500px. */
.sports-offers-page .filters-section {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
background: white;
padding: 1rem;
margin: 1rem 0 0 0;
border-radius: 0.75rem;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
text-align: center;
}
.sports-offers-page .filters-section .filters-title {
font-size: var(--filter-box-title);
font-weight: 700;
color: #022e4a;
margin: 0 0 1rem 0;
text-align: center;
}
.sports-offers-page .filters-section .filters-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 1rem 1.5rem;
margin-bottom: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.sports-offers-page .filters-section .filter-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: max-content;
max-width: 100%;
min-width: 0;
text-align: left;
flex-shrink: 0;
}
.sports-offers-page .filters-section .filter-group > label {
font-weight: 700;
color: #00cc5a;
font-size: var(--filter-box-value);
text-align: left;
}
.sports-offers-page .filters-section .filter-options {
display: flex;
flex-direction: column;
gap: 0.25rem;
width: max-content;
max-width: 100%;
text-align: left;
box-sizing: border-box;
align-items: flex-start;
}
.sports-offers-page .filters-section .filter-option {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
gap: 0.5rem;
font-size: var(--filter-box-value);
font-weight: 600;
color: #20242e;
cursor: pointer;
padding: 0.25rem 0;
min-width: min-content;
width: max-content;
max-width: 100%;
text-align: left;
}
.sports-offers-page .filters-section .filter-option input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #00cc5a;
flex-shrink: 0 !important;
margin: 0 !important;
}
/* Sports: above 500px – three headers on same line; filter headers left-aligned */
@media (min-width: 500px) {
.sports-offers-page .filters-section .filters-row {
flex-wrap: nowrap;
justify-content: center;
width: 100%;
}
.sports-offers-page .filters-section .filter-group {
align-items: flex-start;
text-align: left;
}
.sports-offers-page .filters-section .filter-group > label {
text-align: left;
width: 100%;
}
.sports-offers-page .filters-section .filter-options {
align-items: flex-start;
}
}
/* Sports: desktop (1024px+) – one-line layout, same font sizes as casino; filter items LEFT align */
@media (min-width: 1024px) {
.sports-offers-page .filters-section {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}
.sports-offers-page .filters-section .filters-title {
font-size: var(--filter-box-title);
text-align: center;
}
.sports-offers-page .filters-section .filters-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
gap: 1.5rem 2rem;
}
.sports-offers-page .filters-section .filter-group {
flex: 0 0 auto;
align-items: flex-start !important;
text-align: left !important;
}
.sports-offers-page .filters-section .filter-group > label {
font-size: var(--filter-box-value);
text-align: left !important;
display: block;
}
.sports-offers-page .filters-section .filter-options {
align-items: flex-start !important;
text-align: left;
}
.sports-offers-page .filters-section .filter-option {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
white-space: nowrap !important;
font-size: var(--filter-box-value) !important;
gap: 0.5rem;
width: max-content;
min-width: min-content;
text-align: left;
}
.sports-offers-page .filters-section .filter-option input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
margin: 0 !important;
}
}
/* Sports: below 500px – stacked / 2-col so all three fit */
@media (max-width: 499px) {
.sports-offers-page .filters-section .filters-row {
display: grid;
grid-template-columns: repeat(2, max-content);
justify-content: center;
gap: 0.75rem 1rem;
}
}
/* Sports: up to 1023px – show/hide filter content (toggle), then expanded layout */
@media (max-width: 1023px) {
.sports-offers-page .filters-section .filters-title,
.sports-offers-page .filters-section .filters-row {
display: none !important;
}
.sports-offers-page .filters-section.filters-expanded .filters-title,
.sports-offers-page .filters-section.filters-expanded .filters-row {
display: block !important;
}
.sports-offers-page .filters-section.filters-expanded .filters-row {
display: flex !important;
}
.sports-offers-page .filters-section.filters-expanded {
width: 100% !important;
max-width: 100% !important;
padding: 1rem !important;
background: #fff !important;
border-radius: 0.5rem !important;
box-shadow: 0 2px 8px rgba(2, 46, 74, 0.08) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.sports-offers-page .filters-section.filters-expanded .filters-title {
display: block !important;
font-size: var(--filter-box-title) !important;
margin-top: 0.75rem !important;
margin-bottom: 0.75rem !important;
text-align: center !important;
}
.sports-offers-page .filters-section.filters-expanded .filters-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
gap: 1rem 1.5rem !important;
}
.sports-offers-page .filters-section.filters-expanded .filter-group {
flex: 0 0 auto !important;
width: max-content !important;
align-items: center !important;
text-align: center !important;
}
.sports-offers-page .filters-section.filters-expanded .filter-group > label {
text-align: left !important;
}
.sports-offers-page .filters-section.filters-expanded .filter-group {
align-items: flex-start !important;
text-align: left !important;
}
.sports-offers-page .filters-section.filters-expanded .filter-option {
font-size: var(--filter-box-value) !important;
}
}
@media (max-width: 499px) {
.sports-offers-page .filters-section.filters-expanded .filters-row {
flex-wrap: wrap !important;
display: grid !important;
grid-template-columns: repeat(2, max-content) !important;
justify-content: center !important;
}
}
/* Casino signup: desktop one-line at 768px+ (same as 1024+ layout) */
@media (min-width: 768px) {
.casino-signup-offers-page .filters-section .filters-row,
.casino-signup-offers-page .filters-section.filters-expanded .filters-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: flex-start !important; /* Left-align so wrapped Game Specific sits under Offer Type */
align-items: flex-start !important;
width: 100% !important;
gap: 1.5rem 2rem !important;
}
.casino-signup-offers-page .filters-section .filter-group,
.casino-signup-offers-page .filters-section .filter-group-collapsible {
flex: 0 0 auto !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
align-items: flex-start !important;
text-align: left !important;
}
.casino-signup-offers-page .filters-section .filter-group-collapsible {
display: flex !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
opacity: 1 !important;
}
}
/* 800px+: centre filters (plenty of room for all to fit) */
@media (min-width: 800px) {
.casino-signup-offers-page .filters-section .filters-row,
.casino-signup-offers-page .filters-section.filters-expanded .filters-row {
justify-content: center !important;
}
}
/* 768–800px: left-align + tighter gap + allow shrink so Game Specific fits to right of Wagering */
@media (min-width: 768px) and (max-width: 799px) {
.casino-signup-offers-page .filters-section .filters-row,
.casino-signup-offers-page .filters-section.filters-expanded .filters-row {
justify-content: flex-start !important;
gap: 1rem 1.25rem !important;
}
.casino-signup-offers-page .filters-section .filter-group,
.casino-signup-offers-page .filters-section .filter-group-collapsible {
flex: 0 1 auto !important; /* Allow shrink to fit all on one line */
}
}
/* Casino signup: desktop (1024px+) – one row, wrap if needed, left-align, same font vars as sports */
@media (min-width: 1024px) {
.signup-offers-page .filters-section {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}
.signup-offers-page .filters-section .filters-title {
font-size: var(--filter-box-title);
text-align: center;
}
.signup-offers-page .filters-section .filters-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
width: 100%;
gap: 1.5rem 2rem;
}
.signup-offers-page .filters-section .filter-group,
.signup-offers-page .filters-section .filter-group-collapsible {
flex: 0 0 auto;
align-items: flex-start;
text-align: left;
min-width: 0;
}
.signup-offers-page .filters-section .filter-group > label,
.signup-offers-page .filters-section .filter-group-collapsible > label {
font-size: var(--filter-box-value);
text-align: left;
}
.signup-offers-page .filters-section .filter-option {
font-size: var(--filter-box-value);
}
}
/* Sports offers page - COMPLETELY ISOLATED bonus-grid-heading - NO SHARED STYLES */
.sports-offers-page .filters-section + .bonus-grid-heading {
margin-top: 0.75rem;
}
.sports-offers-page .bonus-grid-heading + .offers-section {
margin-top: 0;
}
.sports-offers-page .sort-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.sports-offers-page .sort-controls select {
padding: 0.5rem 1rem;
border: 1px solid #ddd;
border-radius: 0.5rem;
font-size: 14px;
background: white;
color: #022e4a;
cursor: pointer;
min-width: 200px;
}
.sports-offers-page .sort-controls select:focus {
outline: none;
border-color: #00cc5a;
box-shadow: 0 0 0 2px rgba(0, 204, 90, 0.2);
}
.sports-offers-page .offers-section {
margin: 0.2rem 0 2rem 0;
}
.sports-offers-page .bonus-grid-heading + .offers-section {
margin-top: 0;
}
/* Sports signup: same joined block as casino signup – one container, faint lines between cards */
.sports-offers-page .offers-list {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
box-sizing: border-box;
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
overflow: hidden;
}
.sports-offers-page .offer-card {
background: transparent;
border-radius: 0;
box-shadow: none;
}
/* Row separator: OFFER ROW SEPARATOR block only (content wrapper, not card) */
/* No hover on sports offer box (match casino signup) */
.sports-offers-page .offer-card:hover {
transform: none;
box-shadow: none;
background: transparent;
}
/* No alternating – same as casino signup: all rows same, metrics bar slightly darker */
.sports-offers-page .offer-card {
background: #fff;
}
.sports-offers-page .offer-card .metrics-row {
background: var(--metrics-bar-bg);
}
@media (max-width: 767px) {
.sports-offers-page .offers-list {
border-radius: 0 !important;
}
}
.sports-offers-page .offer-card {
transition: transform 0.2s, box-shadow 0.2s;
padding: 1.67rem;
min-height: 120px;
height: auto;
position: relative;
width: 100%;
box-sizing: border-box;
contain: layout style; /* Reduce CLS when content populates */
}
.sports-offers-page .offer-content {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
gap: 1.67rem;
}
/* No hover (already set above in joined block) */
/* Sports: EXACT same bookmaker logo dimensions as casino signup – base (120x60), 768px+ (150x75), mobile (140x70) */
.sports-offers-page .casino-logo,
.sports-offers-page .offer-card .casino-logo {
width: 120px !important;
height: 60px !important;
max-width: 120px !important;
object-fit: contain !important;
border-radius: 0.25rem;
flex-shrink: 0 !important;
align-self: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: block !important;
}
.sports-offers-page .logo-section,
.sports-offers-page .offer-card .logo-section {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
width: 120px !important;
min-width: 120px !important;
max-width: 120px !important;
}
.sports-offers-page .offer-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
justify-content: center;
align-items: center;
height: 100%;
overflow: hidden;
text-align: center;
}
.sports-offers-page .offer-blurb {
font-size: 1.2rem;
font-weight: 700;
color: #20242e;
margin: 0;
line-height: 1.4;
text-align: center;
text-transform: uppercase;
white-space: pre-line;
max-height: 80px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.sports-offers-page .offer-blurb .main-text {
font-size: 1.2rem;
display: inline;
}
.sports-offers-page .offer-blurb .secondary-text {
font-size: 0.9rem;
display: block;
margin-top: 0;
line-height: 1;
}
.sports-offers-page .offer-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-size: 0.85rem;
color: #666;
margin: 0.75rem 0;
height: 40px;
flex-shrink: 0;
}
.sports-offers-page .deposit-info {
display: flex;
align-items: center;
gap: 0.25rem;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
.sports-offers-page .offer-value {
display: flex;
align-items: center;
gap: 0.25rem;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
/* Sports: EXACT same claim layout as casino signup – no fixed width so claim isn’t cropped */
.sports-offers-page .offer-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-shrink: 0 !important;
min-width: 0 !important;
width: auto !important;
}
.sports-offers-page .offer-content-wrapper {
overflow: visible !important;
}
.sports-offers-page .terms-btn {
background: #00cc5a;
color: #000;
border: none;
border-radius: 0.5rem;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s;
text-decoration: none;
display: inline-block;
text-align: center;
}
.sports-offers-page .terms-btn:hover {
background: #00b350;
}
.sports-offers-page .logo-meta {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: center;
font-size: 0.75rem;
color: #666;
text-align: center;
line-height: 1.2;
}
.sports-offers-page .claim-btn {
color: white;
border: none;
padding: 0.9rem 1.8rem;
border-radius: 0.5rem;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.2s;
animation: pulse 2s infinite;
white-space: nowrap;
touch-action: manipulation; /* Prevent accidental zoom/delay on touch */
}
@media (hover: hover) {
.sports-offers-page .claim-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
}
/* Key terms (T&Cs / BeGambleAware) at BOTTOM of box – same as casino signup, NOT blurb styling */
.sports-offers-page .key-terms-section {
border-top: none !important;
background: transparent !important;
}
.sports-offers-page .key-terms-section .terms-text {
font-size: var(--fs-key-terms-offer-box) !important;
color: #666 !important;
line-height: 1.4 !important;
margin: 0 !important;
text-align: left !important;
position: static !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
overflow: visible !important;
white-space: normal !important;
max-height: none !important;
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
}
.sports-offers-page .no-offers {
text-align: center;
padding: 3rem 1rem;
color: #666;
font-size: 1.1rem;
background: white;
border-radius: 0.75rem;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
}
.sports-offers-page .loading {
text-align: center;
padding: 3rem 1rem;
color: #666;
}
.sports-offers-page .spinner {
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border-top: 3px solid #00cc5a;
animation: spin 1s linear infinite;
margin: 0 auto 1rem;
}
/* Responsive Design for Sports Offers Page */
@media (min-width: 900px) {
.sports-offers-page .features-grid {
display: flex !important;
justify-content: center;
gap: 1.5rem;
margin-top: 0.75rem;
flex-wrap: wrap;
}
.sports-offers-page .feature-item {
display: flex !important;
align-items: center;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.1);
padding: 0.4rem 0.8rem;
border-radius: 0.4rem;
font-size: 14px;
font-weight: 500;
}
.sports-offers-page .feature-icon {
display: inline !important;
font-size: 1rem;
}
}
@media (min-width: 768px) {
.sports-offers-page .page-header h1 {
font-size: 32px;
}
.sports-offers-page .sort-title {
font-size: 24px;
}
/* Non-ranked only; ranked cards use same layout as casino signup (no extra padding) */
.sports-offers-page .offer-card:not(.ranked-offer) {
padding: 2.5rem;
min-height: 140px;
}
/* Sports: EXACT same as casino signup at 768px+ – 150x75 logo */
.sports-offers-page .casino-logo,
.sports-offers-page .offer-card .casino-logo {
width: 150px !important;
height: 75px !important;
max-width: 150px !important;
}
.sports-offers-page .logo-section,
.sports-offers-page .offer-card .logo-section {
width: 150px !important;
min-width: 150px !important;
max-width: 150px !important;
}
.sports-offers-page .offer-blurb {
font-size: 1.4rem;
}
.sports-offers-page .offer-blurb .main-text {
font-size: 2rem;
}
.sports-offers-page .offer-blurb .secondary-text {
font-size: 1.5rem;
line-height: 1;
}
.sports-offers-page .claim-btn {
padding: 1.1rem 2.2rem;
font-size: 1.3rem;
}
.sports-offers-page .offer-meta {
display: none;
}
.sports-offers-page .logo-meta {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: #666;
}
}
@media (min-width: 1024px) {
.sports-offers-page .main-container {
padding: 0 2rem;
}
.sports-offers-page .page-header {
padding: 1.5rem 0;
}
.sports-offers-page .page-header h1 {
font-size: 32px;
}
}
@media (max-width: 767px) {
.sports-offers-page .page-header {
padding: 0.5rem 0;
}
.sports-offers-page .page-header h1 {
font-size: 20px;
}
.sports-offers-page .sort-section {
padding: 1rem;
margin: 0.5rem 0;
}
/* Non-ranked only; ranked cards use same layout as casino signup */
.sports-offers-page .offer-card:not(.ranked-offer) {
flex-direction: column;
text-align: left;
gap: 0.75rem;
padding: 1.25rem;
min-height: 100px;
align-items: stretch;
}
/* Sports mobile: logo LEFT, smaller gap (0.25rem) to maximize blurb width */
.sports-offers-page .offer-card .offer-top-row {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important; /* Start from left */
align-items: center !important;
gap: 0.25rem !important; /* SMALLER gap - blurb closer to logo */
margin-bottom: 0.5rem !important;
}
/* Casino pages mobile: EXACT same flex properties as sports (0.25rem gap, row layout, flex-start) to maximize blurb width - allows "160 FREE SPINS" on one line, "WHEN YOU PLAY £10" on two lines */
.signup-offers-page .offer-card .offer-top-row,
.casino-signup-offers-page .offer-card .offer-top-row,
.no-deposit-free-spins-page .offer-card .offer-top-row,
.no-wagering-page .offer-card .offer-top-row,
.casino-bonus-page .offer-card .offer-top-row,
.blog-page #casino-offers-list .offer-card .offer-top-row {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important; /* Start from left - EXACT same as sports */
align-items: center !important;
gap: 0.25rem !important; /* EXACT same reduced gap as sports - maximizes blurb width */
margin-bottom: 0.5rem !important;
}
/* Sports mobile: offer-top-row COMPLETELY IGNORES wrapper's 1rem padding - gets 0.5rem instead */
/* Rule defined at line 10730 - this is duplicate, keeping for reference */
/* Ensure content BELOW offer-top-row keeps 1rem padding */
.sports-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .metrics-and-key-terms-block,
.sports-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .mobile-claim-btn,
.sports-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .key-terms-section {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Blog sports: keep centered layout */
.blog-page #sports-offers-list .offer-card .offer-top-row {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
gap: 0.75rem !important;
margin-bottom: 0.5rem !important;
}
/* Sports mobile logo: LEFT aligned, SAME dimensions as casino (140x70, 140px logo-section), positioned further left */
.sports-offers-page .offer-card .offer-top-row .logo-section {
flex-shrink: 0 !important;
align-self: flex-start !important; /* LEFT, not centered */
justify-content: flex-start !important;
align-items: flex-start !important;
display: flex !important;
flex-direction: column !important; /* EXACT same as casino signup */
gap: 0.5rem !important; /* EXACT same as casino signup */
width: 140px !important; /* SAME as casino */
min-width: 140px !important;
max-width: 140px !important;
flex: 0 0 140px !important;
margin-left: 0 !important; /* Position further left */
margin-right: 0 !important;
}
/* Sports mobile logo image: SAME as casino (140x70) - EXACT same logic */
.sports-offers-page .offer-card .offer-top-row .logo-section .casino-logo,
.sports-offers-page .offer-card .casino-logo {
width: 140px !important; /* SAME as casino */
height: 70px !important; /* SAME as casino */
max-width: 140px !important;
object-fit: contain !important; /* EXACT same as casino – fills container properly */
border-radius: 0.25rem !important;
flex-shrink: 0 !important;
align-self: flex-start !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
margin: 0 !important;
display: block !important;
}
/* Blog sports: EXACT same as sports-signup-offers – logo left-aligned, same dimensions */
.blog-page #sports-offers-list .offer-card .offer-top-row .logo-section {
flex-shrink: 0 !important;
align-self: flex-start !important;
justify-content: flex-start !important;
align-items: flex-start !important;
display: flex !important;
width: 140px !important;
min-width: 140px !important;
max-width: 140px !important;
}
/* Sports mobile: offer-top-row OVERRIDES wrapper's 1rem padding - expands to get 0.5rem effective padding */
/* Rule defined at line 10730 - this is duplicate, keeping gap override here */
.sports-offers-page .offer-card:not(.ranked-offer) .offer-content-wrapper .offer-top-row {
gap: 0.25rem !important; /* SMALLER gap - blurb closer to logo */
}
.sports-offers-page .offer-card .offer-top-row .offer-details {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: calc(100% - 140px - 0.25rem) !important; /* Logo 140px + smaller gap 0.25rem = more width for blurb */
text-align: center !important; /* Center blurb text */
align-items: center !important;
justify-content: center !important;
margin-bottom: 0 !important;
margin-left: 0 !important; /* No extra left margin */
display: flex !important;
flex-direction: column !important;
}
/* Blog sports: EXACT same logic as sports-signup-offers – gap, offer-details width, more space in top row */
.blog-page #sports-offers-list .offer-card .offer-content-wrapper .offer-top-row {
gap: 0.25rem !important;
}
.blog-page #sports-offers-list .offer-card .offer-top-row .offer-details {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: calc(100% - 140px - 0.25rem) !important; /* Same as sports page – more width for blurb */
text-align: center !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* Sports mobile: offer-content-wrapper keeps 1rem padding (for content below offer-top-row) */
/* offer-top-row expands beyond this with negative margin to get 0.5rem effective padding */
}
/* Sports: Below 1024px - respect \n line breaks (main-text and secondary-text stack vertically) */
/* This applies to ALL screen sizes below 1024px, not just mobile */
@media (max-width: 1023px) {
.sports-offers-page .offer-card .offer-blurb-text {
display: flex !important;
flex-direction: column !important; /* Stack vertically - respects \n from JSON */
align-items: center !important;
gap: 0 !important;
}
.sports-offers-page .offer-card .offer-blurb-text .main-text,
.sports-offers-page .offer-card .offer-blurb-text .secondary-text {
display: block !important; /* Stack vertically - respects \n from JSON */
text-align: center !important;
width: 100% !important;
}
}
/* Sports signup offers page + Blog sports: Make secondary-text same size as main-text (IN FREE BETS line) */
/* Mobile: 24px for both main-text and secondary-text */
@media (max-width: 767px) {
.sports-offers-page .offer-card .offer-blurb-text .secondary-text,
.blog-page #sports-offers-list .offer-card .offer-blurb-text .secondary-text {
font-size: 24px !important; /* Same as main-text on mobile */
font-weight: 700 !important;
}
}
/* Desktop: 30px for both main-text and secondary-text */
@media (min-width: 920px) {
.sports-offers-page .offer-card .offer-blurb-text .secondary-text,
.blog-page #sports-offers-list .offer-card .offer-blurb-text .secondary-text {
font-size: 30px !important; /* Same as main-text on desktop */
font-weight: 700 !important;
}
}
/* Sports desktop: Above 1024px - ONLY for offers with "IN FREE BETS" (2-line offers) */
/* Multi-line offers (3+ lines) and Betway keep column layout – Betway spans two lines on desktop */
@media (min-width: 1024px) {
/* Only apply row layout to sports offers WITHOUT tertiary-text AND NOT Betway (Betway spans two lines) */
.sports-offers-page .offer-card:not([data-brand="betway"]) .offer-blurb-text:not(:has(.tertiary-text)),
.sports-offers-page .offer-card:not([data-brand="betway"]) .offer-details .offer-blurb-text:not(:has(.tertiary-text)),
.blog-page #sports-offers-list .offer-card:not([data-brand="betway"]) .offer-blurb-text:not(:has(.tertiary-text)),
.blog-page #sports-offers-list .offer-card:not([data-brand="betway"]) .offer-details .offer-blurb-text:not(:has(.tertiary-text)) {
display: flex !important; /* Ensure flex container */
flex-direction: row !important; /* Flow horizontally - ignores \n - OVERRIDE COLUMN */
flex-wrap: nowrap !important; /* Force single line - NO WRAPPING */
justify-content: center !important;
align-items: center !important;
gap: 0.25rem !important;
width: auto !important;
max-width: none !important;
}
.sports-offers-page .offer-card:not([data-brand="betway"]) .offer-blurb-text:not(:has(.tertiary-text)) .main-text,
.sports-offers-page .offer-card:not([data-brand="betway"]) .offer-blurb-text:not(:has(.tertiary-text)) .secondary-text,
.sports-offers-page .offer-card:not([data-brand="betway"]) .offer-details .offer-blurb-text:not(:has(.tertiary-text)) .main-text,
.sports-offers-page .offer-card:not([data-brand="betway"]) .offer-details .offer-blurb-text:not(:has(.tertiary-text)) .secondary-text,
.blog-page #sports-offers-list .offer-card:not([data-brand="betway"]) .offer-blurb-text:not(:has(.tertiary-text)) .main-text,
.blog-page #sports-offers-list .offer-card:not([data-brand="betway"]) .offer-blurb-text:not(:has(.tertiary-text)) .secondary-text,
.blog-page #sports-offers-list .offer-card:not([data-brand="betway"]) .offer-details .offer-blurb-text:not(:has(.tertiary-text)) .main-text,
.blog-page #sports-offers-list .offer-card:not([data-brand="betway"]) .offer-details .offer-blurb-text:not(:has(.tertiary-text)) .secondary-text {
display: inline !important; /* Inline to flow on same line */
white-space: nowrap !important; /* Keep each part on one line */
width: auto !important;
max-width: none !important;
flex-shrink: 0 !important; /* Prevent shrinking */
flex-basis: auto !important;
}
/* Multi-line offers (with tertiary-text) keep column layout - no override needed, they inherit column from base rules */
/* Examples: "UP TO £30 MATCHED FREE BET + £30 UBER EATS VOUCHER + 100 FREE SPINS" stays on 3 lines */
}
@media (max-width: 767px) {
/* Blog sports keeps centered */
.blog-page #sports-offers-list .offer-card .offer-blurb-text,
.blog-page #sports-offers-list .offer-card .offer-blurb-text .main-text {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
text-align: center !important;
}
.sports-offers-page .offer-card .offer-top-row .offer-actions,
.blog-page #sports-offers-list .offer-card .offer-top-row .offer-actions {
display: none !important;
}
.sports-offers-page .offer-meta {
justify-content: center;
flex-wrap: wrap;
}
.sports-offers-page .offer-actions {
align-items: center;
width: 100%;
margin-bottom: 1.5rem;
}
.sports-offers-page .claim-btn {
width: 100%;
}
.sports-offers-page .key-terms-section .terms-text {
text-align: left !important;
position: static !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
font-size: var(--fs-key-terms-offer-box) !important;
max-height: none !important;
-webkit-line-clamp: unset !important;
overflow: visible !important;
white-space: normal !important;
}
.sports-offers-page .logo-meta {
display: none;
}
}
/* Extra small mobile styling */
@media (max-width: 480px) {
.sports-offers-page .results-header {
flex-direction: column;
align-items: stretch;
text-align: center;
gap: 1rem;
}
.sports-offers-page .results-info .offers-count {
font-size: 1rem;
text-align: center;
}
.sports-offers-page .sort-controls {
justify-content: center;
}
.sports-offers-page .sort-controls select {
min-width: 180px;
font-size: 13px;
padding: 0.5rem 0.75rem;
}
.sports-offers-page .offer-card {
height: auto;
min-height: 180px;
padding: 1rem;
}
.sports-offers-page .offer-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
/* Sports: same logo dimensions as casino signup on mobile (140x70) */
.sports-offers-page .casino-logo,
.sports-offers-page .offer-card .casino-logo {
width: 140px !important;
height: 70px !important;
}
.sports-offers-page .logo-section,
.sports-offers-page .offer-card .logo-section {
width: 140px !important;
min-width: 140px !important;
max-width: 140px !important;
}
.sports-offers-page .offer-actions {
width: auto !important;
flex-shrink: 0 !important;
}
.sports-offers-page .offer-blurb {
font-size: 1rem;
max-height: 60px;
}
.sports-offers-page .offer-meta {
flex-direction: column;
gap: 0.5rem;
height: auto;
}
}
/* Mobile cookie popup styling */
@media (max-width: 767px) {
.pq-cookie-popup-rect {
padding: 16px 20px;
min-width: 280px;
max-width: 85vw;
bottom: 20px;
}
.pq-cookie-popup-text {
margin-bottom: 12px;
font-size: 10px;
line-height: 1.3;
}
.pq-cookie-popup-text strong {
font-size: 10px;
display: block;
margin-bottom: 4px;
}
.pq-cookie-popup-text small {
font-size: 10px;
line-height: 1.2;
}
.pq-cookie-popup-actions {
gap: 12px;
}
#pqCookieAccept {
padding: 8px 18px;
font-size: 14px;
min-height: 44px;
min-width: 44px;
}
#pqCookieReject {
padding: 8px 18px;
font-size: 13px;
min-height: 44px;
min-width: 44px;
}
}
@media (max-width: 480px) {
.pq-cookie-popup-rect {
padding: 12px 16px;
min-width: 260px;
max-width: 90vw;
bottom: 16px;
}
.pq-cookie-popup-text {
margin-bottom: 0px;
font-size: 10px;
}
.pq-cookie-popup-text strong {
font-size: 10px;
margin-bottom: 3px;
}
.pq-cookie-popup-text small {
font-size: 10px;
}
.pq-cookie-popup-actions {
gap: 10px;
}
#pqCookieAccept {
padding: 8px 16px;
font-size: 13px;
min-height: 44px;
min-width: 44px;
}
#pqCookieReject {
padding: 8px 16px;
font-size: 12px;
min-height: 44px;
min-width: 44px;
}
}
/* Mobile email modal styling */
@media (max-width: 767px) {
.pq-modal {
padding: 1.5rem;
max-width: 95%;
width: 350px;
}
.pq-modal h2 {
font-size: 1.3rem;
margin: 0 0 0.8rem;
}
.pq-modal p {
font-size: 0.9rem;
margin: 0 0 1rem;
}
.pq-email-form {
gap: 0.8rem;
}
.pq-email-form input {
padding: 0.6rem;
font-size: 0.9rem;
}
.pq-email-form button {
padding: 0.6rem;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.pq-modal {
padding: 1.25rem;
max-width: 98%;
width: 320px;
}
.pq-modal h2 {
font-size: 1.2rem;
margin: 0 0 0.7rem;
}
.pq-modal p {
font-size: 0.85rem;
margin: 0 0 0.9rem;
}
.pq-email-form {
gap: 0.7rem;
}
.pq-email-form input {
padding: 0.5rem;
font-size: 0.85rem;
}
.pq-email-form button {
padding: 0.5rem;
font-size: 0.85rem;
}
}
/* Hide desktop banner until 1600px */
@media (min-width: 1400px) and (max-width: 1599px) {
.pq-banner-desktop {
display: none !important;
}
}
/* Metrics Row Styles for Signup Offers */
.signup-offers-page .metrics-row {
display: grid;
grid-template-columns: repeat(6, minmax(120px, 1fr));
gap: 10px;
margin: 1rem 0;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
font-size: 0.85rem;
width: 100%;
box-sizing: border-box;
}
.signup-offers-page .metric-item {
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 0;
overflow: hidden;
}
.signup-offers-page .metric-label {
font-weight: bold;
color: #555;
font-size: 0.75rem;
line-height: 1.2;
}
.signup-offers-page .metric-value {
color: #333;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
min-width: 0;
flex-shrink: 0;
}
/* Star rating styles */
.signup-offers-page .stars {
display: flex;
gap: 2px;
}
.signup-offers-page .star {
color: #ffd700;
font-size: 0.9rem;
}
.signup-offers-page .star.empty {
color: #ddd;
}
/* Mobile responsive metrics */
@media (max-width: 767px) {
.signup-offers-page .metrics-row {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
font-size: 0.8rem;
padding: 20px;
}
.signup-offers-page .metric-item {
text-align: left;
justify-content: flex-start;
gap: 8px;
}
.signup-offers-page .metric-label {
font-size: var(--metric-mobile-fs) !important;
}
.signup-offers-page .metric-value {
font-size: var(--metric-mobile-fs) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Show mobile labels, hide desktop labels on mobile */
.signup-offers-page .desktop-label,
.casino-bonus-page .desktop-label,
.no-wagering-page .desktop-label {
display: none !important;
}
.signup-offers-page .mobile-label,
.casino-bonus-page .mobile-label,
.no-wagering-page .mobile-label {
display: inline !important;
}
}
/* 768–919px: keep Spins W/R / Bonus W/R (mobile labels) to avoid offer value cropping; 0px gap between metrics items */
@media (min-width: 768px) and (max-width: 919px) {
.signup-offers-page .desktop-label,
.casino-bonus-page .desktop-label,
.no-wagering-page .desktop-label {
display: none !important;
}
.signup-offers-page .mobile-label,
.casino-bonus-page .mobile-label,
.no-wagering-page .mobile-label {
display: inline !important;
}
.signup-offers-page .metrics-row,
.casino-bonus-page .metrics-row,
.no-wagering-page .metrics-row,
.sports-offers-page .metrics-row,
.blog-page .metrics-row {
gap: 0 !important;
}
}
/* Desktop labels (Spins Wagering: / Bonus Wagering:) from 920px only */
@media (min-width: 920px) {
.signup-offers-page .desktop-label,
.casino-bonus-page .desktop-label,
.no-wagering-page .desktop-label {
display: inline !important;
}
.signup-offers-page .mobile-label,
.casino-bonus-page .mobile-label,
.no-wagering-page .mobile-label {
display: none !important;
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* FAQ Section Styles */
.faq-section {
margin: 2rem 0 !important;
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
}
@media (max-width: 767px) {
.faq-section {
padding: 0 1rem !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Jackpot competitions: FAQ in main content, no box/wrapper on mobile */
.jackpot-competitions-page .faq-section,
.jackpot-competitions-page .content-section.faq-section {
background: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 1rem !important;
margin: 2rem 0 !important;
}
.faq-item-accordion {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.faq-question {
padding: 1rem 1rem !important;
box-sizing: border-box !important;
}
.faq-answer {
padding-left: 1rem !important;
padding-right: 1rem !important;
box-sizing: border-box !important;
}
.faq-item-accordion.active .faq-answer {
padding-left: 1rem !important;
padding-right: 1rem !important;
padding-bottom: 1rem !important;
box-sizing: border-box !important;
}
}
.faq-section h2 {
font-size: 1.25rem !important;
font-weight: 700 !important;
color: #022e4a !important;
margin-bottom: 1.1rem !important;
line-height: 1.3 !important;
padding: 0 1rem !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
.faq-section > p:first-of-type {
font-size: 1.1rem !important;
color: #20242e !important;
margin-bottom: 2rem !important;
line-height: 1.6 !important;
font-weight: 500 !important;
padding: 0 1rem !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
@media (min-width: 768px) {
.faq-section h2,
.faq-section > p:first-of-type {
padding: 0 !important;
}
}
.faq-item {
margin-bottom: 2rem !important;
padding: 1.5rem !important;
background: rgba(255, 255, 255, 0.02) !important;
border-radius: 8px !important;
border: 1px solid rgba(2, 46, 74, 0.1) !important;
transition: all 0.3s ease !important;
}
.faq-item:hover {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(0, 204, 90, 0.2) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 204, 90, 0.1) !important;
}
.faq-item h3 {
font-size: 1.25rem !important;
font-weight: 700 !important;
color: #00cc5a !important;
margin-bottom: 1rem !important;
line-height: 1.4 !important;
}
.faq-item h4 {
font-size: 1.1rem !important;
font-weight: 600 !important;
color: #022e4a !important;
margin: 1.5rem 0 0.75rem 0 !important;
line-height: 1.4 !important;
}
.faq-item h5 {
font-size: 1rem !important;
font-weight: 600 !important;
color: #022e4a !important;
margin: 1.25rem 0 0.5rem 0 !important;
line-height: 1.4 !important;
}
.faq-item p {
font-size: 1rem !important;
color: #20242e !important;
line-height: 1.6 !important;
margin-bottom: 1rem !important;
}
.faq-item ul {
margin: 1rem 0 !important;
padding-left: 1.5rem !important;
}
.faq-item li {
font-size: 1rem !important;
color: #20242e !important;
line-height: 1.6 !important;
margin-bottom: 0.5rem !important;
position: relative !important;
}
.faq-item li:before {
content: "•" !important;
color: #00cc5a !important;
font-weight: bold !important;
position: absolute !important;
left: -1.5rem !important;
}
/* Responsive FAQ Styles - no wrapper box, just text + accordion items */
@media (min-width: 768px) {
.faq-section {
margin: 3rem 0 !important;
padding: 0 1rem !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
}
.faq-section h2 {
font-size: 2rem !important;
margin-bottom: 2rem !important;
padding: 0 !important;
}
.faq-section > p:first-of-type {
font-size: 1.2rem !important;
margin-bottom: 2.5rem !important;
}
.faq-item {
margin-bottom: 2.5rem !important;
padding: 2rem !important;
}
.faq-item h3 {
font-size: 1.5rem !important;
margin-bottom: 1.25rem !important;
}
.faq-item h4 {
font-size: 1.25rem !important;
margin: 2rem 0 1rem 0 !important;
}
.faq-item h5 {
font-size: 1.1rem !important;
margin: 1.5rem 0 0.75rem 0 !important;
}
.faq-item p {
font-size: 1.1rem !important;
margin-bottom: 1.25rem !important;
}
.faq-item li {
font-size: 1.1rem !important;
margin-bottom: 0.75rem !important;
}
}
@media (min-width: 1024px) {
.faq-section {
margin: 4rem 0 !important;
padding: 0 2rem !important;
max-width: 1000px !important;
margin-left: auto !important;
margin-right: auto !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
}
/* Jackpot: FAQ width must not exceed the three-wide competition grid */
.jackpot-competitions-page .faq-section,
.jackpot-competitions-page .content-section.faq-section {
max-width: 1400px !important;
padding-left: 4rem !important;
padding-right: 4rem !important;
}
.faq-section h2 {
font-size: 2.25rem !important;
margin-bottom: 2.5rem !important;
padding: 0 !important;
}
.faq-section > p:first-of-type {
font-size: 1.3rem !important;
margin-bottom: 3rem !important;
}
.faq-item {
margin-bottom: 3rem !important;
padding: 2.5rem !important;
}
.faq-item h3 {
font-size: 1.75rem !important;
margin-bottom: 1.5rem !important;
}
.faq-item h4 {
font-size: 1.4rem !important;
margin: 2.5rem 0 1.25rem 0 !important;
}
.faq-item h5 {
font-size: 1.2rem !important;
margin: 2rem 0 1rem 0 !important;
}
.faq-item p {
font-size: 1.15rem !important;
margin-bottom: 1.5rem !important;
}
.faq-item li {
font-size: 1.15rem !important;
margin-bottom: 1rem !important;
}
}
@media (min-width: 1280px) {
.faq-section {
max-width: 999px !important;
padding: 0 4rem !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
}
.jackpot-competitions-page .faq-section,
.jackpot-competitions-page .content-section.faq-section {
max-width: 999px !important;
}
.faq-section h2 {
font-size: 2.5rem !important;
padding: 0 !important;
}
.faq-section > p:first-of-type {
font-size: 1.4rem !important;
}
.faq-item h3 {
font-size: 2rem !important;
}
.faq-item h4 {
font-size: 1.5rem !important;
}
.faq-item h5 {
font-size: 1.3rem !important;
}
.faq-item p {
font-size: 1.2rem !important;
}
.faq-item li {
font-size: 1.2rem !important;
}
}
/* CRITICAL: Fix additional offers line breaks on individual pages */
.right-side-offers-module .additional-offer > span {
display: block !important;
text-align: center !important;
line-height: 1.4 !important;
font-weight: 700 !important;
color: #20242e !important;
margin: 0 0 8px !important;
white-space: normal !important; /* Critical for br tags to work */
min-height: 48px !important; /* Prevent height shift when content loads */
font-size: 14px !important; /* Ensure consistent font size from start */
}
.daily-free-games-right-module .additional-offer p,
.jackpot-games-right-module .additional-offer p,
.right-side-offers-module .additional-offer p {
margin-bottom: 0 !important;
}
.daily-free-games-right-module .additional-offer span,
.jackpot-games-right-module .additional-offer span,
.right-side-offers-module .additional-offer span {
display: block !important;
text-align: center !important;
line-height: 1.4 !important;
font-weight: 700 !important;
color: #20242e !important;
margin: 0 0 8px !important;
white-space: normal !important; /* Critical for br tags to work */
min-height: 48px !important; /* Prevent height shift when content loads */
font-size: 16px !important; /* Ensure consistent font size from start */
}
/* Specific rule for the right-side offers module that uses jackpot-games-right-module class */
.jackpot-games-right-module .additional-offer span {
display: block !important;
text-align: center !important;
line-height: 1.4 !important;
font-weight: 700 !important;
color: #20242e !important;
margin: 0 0 8px !important;
white-space: normal !important; /* Critical for br tags to work */
min-height: 48px !important; /* Prevent height shift when content loads */
font-size: 16px !important; /* Ensure consistent font size from start */
}
/* Removed conflicting positioning rules - now using same approach as daily-free-games */
.right-side-offers-module {
position: absolute !important;
left: calc(100% + 20px) !important;
top: 0 !important;
width: 320px !important;
background: rgba(255,255,255,.1) !important;
border: none !important;
border-radius: 12px !important;
padding: 15px !important;
z-index: 10 !important;
backdrop-filter: blur(10px) !important;
text-align: center !important;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12) !important;
}
.right-side-offers-module h3 {
font-size: 16px !important;
font-weight: 700 !important;
margin: 0 0 15px !important;
color: #20242e !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
}
.right-side-offers-module .additional-offer {
margin-bottom: 15px !important;
padding: 12px !important;
background: #ffffff !important;
border-radius: 8px !important;
border: none !important;
text-align: center !important;
box-shadow: 0 2px 8px rgba(2, 46, 74, 0.05), 0 1px 4px rgba(2, 46, 74, 0.03) !important; /* Slightly more shadow */
}
.ukgc-logo{width:165px;height:auto}
/* Individual pages additional offers module - carbon copy of jackpot-games-right-module but with top: 0 */
.individual-pages-right-module {
position: absolute;
top: 0px;
left: calc(50% + 400px + 120px);
width: 320px;
background: #f8f9fa;
border: none;
border-radius: 12px;
padding: 15px;
z-index: 1;
text-align: center;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
}
.individual-pages-right-module h3 {
font-size: 16px;
font-weight: 700;
margin: 0 0 15px;
color: var(--text-color);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.individual-pages-right-module h3 img {
max-width: 35px;
height: auto;
border-radius: 3px;
}
.individual-pages-right-module .additional-offer {
margin-bottom: 12px;
padding: 12px;
background: #ffffff;
border-radius: 8px;
border: none;
text-align: center;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
font-weight: bold;
}
.individual-pages-right-module .additional-offer p {
font-size: 14px;
margin: 0 0 8px !important;
padding: 0 0 8px 0 !important;
color: var(--text-color);
text-align: center;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important; /* No gap - just centered logo */
min-height: 36px !important;
contain: layout style !important;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.individual-pages-right-module .additional-offer p img {
width: 71px !important;
height: 36px !important;
min-width: 71px !important;
min-height: 36px !important;
max-width: 71px !important;
max-height: 36px !important;
flex-shrink: 0 !important;
display: block !important;
object-fit: contain !important;
aspect-ratio: 2/1 !important;
border-radius: 3px;
margin: 0 !important;
padding: 0 !important;
contain: layout style size !important;
}
.individual-pages-right-module .additional-offer small {
font-size: 9px !important;
color: var(--subtle-gray);
display: block;
margin-top: 6px;
margin-bottom: 6px;
text-align: center;
line-height: 1.2;
}
.individual-pages-right-module .offer-button-small {
display: inline-block;
background: var(--primary-cta);
color: #20242e;
padding: 6px 12px;
border-radius: 6px;
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition: transform .2s;
text-align: center;
width: 100%;
box-sizing: border-box;
margin-top: 0 !important;
}
.individual-pages-right-module .offer-button-small:hover {
transform: translateY(-1px);
text-decoration: none;
}
.individual-pages-right-module .additional-offer p {
margin-bottom: 0 !important;
}
/* ===== CAROUSEL COMPLETE OVERHAUL - AGGRESSIVE FIXES ===== */
/* COMPLETE OVERHAUL for max-width: 479px - Much larger everything */
@media (max-width: 479px) {
.grid-wrapper {
grid-template-columns: repeat(3, 120px) !important;
gap: 12px !important;
padding: 0 8px !important;
justify-content: center !important;
margin: 0 auto !important;
max-width: 100% !important;
}
.competition-box-grid {
width: 120px !important;
height: 180px !important;
}
.competition-image-grid {
height: 70px !important;
}
.competition-top-border-grid {
height: 22px !important;
padding: 4px 8px !important;
position: relative !important;
}
/* Bookmaker logo positioning - adjust margin-left to move it */
.competition-top-border-grid .bookmaker-logo-grid {
position: absolute !important;
left: 0px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin-left: 2px !important; /* CHANGE THIS: increase to move right, decrease to move left */
}
.competition-top-border-grid .bookmaker-logo-grid img {
width: 18px !important;
height: 18px !important;
}
/* Timer positioning - adjust margin-right to move it */
.competition-top-border-grid .timer {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
font-size: 7px !important;
font-weight: 700 !important;
color: #00cc5a !important;
text-align: center !important;
}
/* Make "Round Expired" red */
.competition-top-border-grid .timer.urgent {
color: rgb(204, 8, 0) !important;
}
/* Bottom border completely removed - matches homepage */
.competition-bottom-border-grid {
display: none !important;
}
.competition-box-grid .timer {
font-size: 8px !important;
font-weight: 700 !important;
}
.competition-blurb-grid {
font-size: 8px !important;
line-height: 12px !important;
min-height: 36px !important;
-webkit-line-clamp: 3 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.play-now-button-grid {
font-size: 8px !important;
padding: 6px 8px !important;
}
}
/* Increase timer size for max-width: 767px */
@media (max-width: 767px) {
.grid-wrapper {
justify-content: center !important;
margin: 0 auto !important;
}
.competition-box-grid .timer {
font-size: 8px !important;
font-weight: 700 !important;
}
.competition-blurb-grid {
-webkit-line-clamp: 4 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
}
/* COMPLETE OVERHAUL for 768px-1023px - Increase box height */
@media (min-width: 768px) and (max-width: 1023px) {
.grid-wrapper {
justify-content: center !important;
margin: 0 auto !important;
}
.competition-box-grid,
.internal-linking-section .competition-box-grid {
height: 200px !important;
}
.competition-box-grid .timer {
font-size: 9px !important;
font-weight: 700 !important;
}
.competition-blurb-grid,
.internal-linking-section .competition-blurb-grid {
font-size: 9px !important;
line-height: 13px !important;
min-height: 20px !important;
padding: 0 8px !important;
-webkit-line-clamp: 4 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.play-now-button-grid {
font-size: 9px !important;
font-weight: 700 !important;
}
}
/* ===== HOMEPAGE-SPECIFIC STYLES ===== */
/* These styles ONLY apply to the homepage and won't affect other pages */
.homepage .homepage-container {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
box-sizing: border-box;
}
/* Prize Calculator - Full Width */
.homepage .prize-calculator-wrapper {
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
background-color: #00cc5a !important;
border: none !important;
box-shadow: 0 1px 3px rgba(32, 36, 46, 0.03), 0 1px 2px rgba(32, 36, 46, 0.02) !important; /* Super faint shadow */
padding: var(--spacing-sm) var(--spacing-sm) !important;
text-align: center !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 3rem !important;
}
/* Hero Section - overridden by "New Hero Section Design" block later (blue, 290px height) */
.homepage .hero-title {
font-size: 20px !important;
font-weight: 700 !important;
color: #022e4a !important;
margin-bottom: 1rem !important;
line-height: 1.2 !important;
word-wrap: break-word !important;
text-align: left !important;
}
.homepage .hero-subtitle {
font-size: 1rem !important;
color: #4a5568 !important;
max-width: 100% !important;
margin: 0 !important;
line-height: 1.5 !important;
word-wrap: break-word !important;
text-align: left !important;
}
/* Website Blurb */
.homepage .website-blurb {
margin: 2rem 0.5rem 2rem 0.5rem !important;
padding: 1.5rem !important;
background: #ffffff !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12) !important;
width: calc(100% - 1rem) !important;
box-sizing: border-box !important;
}
.homepage .website-blurb h2 {
font-size: 1.5rem !important;
color: #022e4a !important;
margin-bottom: 1rem !important;
word-wrap: break-word !important;
}
.homepage .website-blurb p {
font-size: 0.95rem !important;
line-height: 1.5 !important;
color: #4a5568 !important;
margin-bottom: 1rem !important;
word-wrap: break-word !important;
}
.homepage .desktop-only {
display: block !important;
}
/* Games Section – CLS: min-height + same margin from first paint so skeleton/loaded don’t jump */
.homepage .games-section {
margin: 2rem 0 -1rem !important;
width: 100% !important;
box-sizing: border-box !important;
padding-left: 0rem !important; /* Carousel left inset - restore 0.5rem for alignment */
padding-right: 0 !important; /* Carousels should disappear against page border */
padding-top: 15px !important; /* Space for shadow to breathe on top */
padding-bottom: 15px !important; /* Space for shadow to breathe on bottom */
overflow: visible !important; /* Ensure shadows aren't clipped */
min-height: 280px !important; /* Reserve space from first paint – reduces CLS when carousel appears */
}
/* CLS fix: when carousel is hidden (pre-load), keep same layout space so it doesn’t jump when shown */
body:not(.loaded) .homepage .games-section,
body:not(.loaded) #loading-overlay:not(.hidden) ~ .main-content .homepage .games-section {
min-height: 250px !important;
margin: 2rem 0 -1rem !important;
}
.homepage .games-section h2 {
font-size: 1.563rem !important; /* Match global h2 desktop (~25px) */
color: #022e4a !important;
margin: 0 0 1rem 0 !important;
word-wrap: break-word !important;
text-align: left !important;
box-sizing: border-box !important;
padding-left: 1.5rem !important; /* 1.5rem gap from page border - match carousel boxes */
}
/* Mobile: Match global h2 mobile size and align with 1.5rem gap */
@media (max-width: 767px) {
.homepage .games-section h2 {
font-size: 1.375rem !important; /* Match global h2 mobile (~22px) */
padding-left: 1rem !important; /* 1.5rem gap from page border - match carousel boxes */
}
}
.homepage .see-all-link,
.homepage h2 .see-all-link,
.homepage h2 a.see-all-link {
color: #00cc5a;
text-decoration: none;
font-weight: 600;
/* font-size: from global typography block – var(--fs-h2) */
}
.homepage .see-all-link:hover {
color: #00cc57;
}
/* betting.bets style horizontal-track - desktop only; 768–1023 use mobile carousel */
@media (min-width: 1024px) {
.homepage .horizontal-track,
.individual-competition-page .horizontal-track {
display: flex !important;
flex-wrap: nowrap !important;
gap: 7px !important; /* betting.bets uses 7px */
overflow-x: auto !important; /* Track itself scrolls - betting.bets style */
overflow-y: visible !important; /* Allow shadows to show above/below */
-webkit-overflow-scrolling: touch !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important; /* Removed negative margin - parent .games-section handles padding */
margin-right: 0 !important; /* Removed negative margin - carousels should disappear against border */
padding-left: 0 !important; /* Parent .games-section already has left padding */
padding-right: 0 !important; /* Carousels should disappear against page border */
padding-top: 5px !important; /* Small padding to accommodate shadow */
padding-bottom: 5px !important; /* Small padding to accommodate shadow */
scroll-snap-type: x mandatory !important; /* Native scroll snapping */
scroll-padding: 0 !important; /* Remove padding to ensure boxes snap fully out of view */
-ms-overflow-style: none !important;
scrollbar-width: none !important;
--horizontal-track-items: 1 !important; /* betting.bets has this */
box-sizing: border-box !important;
}
}
.homepage .horizontal-track::-webkit-scrollbar,
.individual-competition-page .horizontal-track::-webkit-scrollbar {
display: none !important;
}
/* Legacy support for games-scroll class */
.homepage .games-scroll {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 7px !important; /* Match betting.bets */
cursor: grab !important;
width: max-content !important;
padding: 0 !important;
box-sizing: border-box !important;
scroll-snap-type: x mandatory !important;
}
.homepage .games-scroll.active {
cursor: grabbing;
}
/* betting.bets style item */
.homepage .horizontal-track .item,
.homepage .game-item,
.individual-competition-page .horizontal-track .item,
.individual-competition-page .game-item {
flex: 0 0 calc(66.67vw - 0.5rem) !important;
max-width: 280px !important;
min-width: 260px !important;
cursor: pointer !important;
box-shadow: 0 4px 16px rgba(2, 46, 74, 0.12), 0 2px 8px rgba(2, 46, 74, 0.08) !important; /* Increased shadow intensity by ~15% for better depth */
border-radius: 8px !important; /* Rounded corners for natural shadow bleed */
overflow: hidden !important;
height: 195px !important; /* FIXED height to match skeleton: 160px image + 35px top border */
min-height: 195px !important;
max-height: 195px !important;
touch-action: manipulation !important; /* Prevent accidental zoom/delay on touch */
display: flex !important;
flex-direction: column !important;
scroll-snap-align: start !important; /* Native scroll snapping */
flex-shrink: 0 !important;
}
/* Remove transitions from game-items inside swiper for maximum smoothness */
.swiper .game-item {
transition: none !important;
transform: translate3d(0, 0, 0) !important;
-webkit-transform: translate3d(0, 0, 0) !important;
}
.homepage .game-image {
position: relative !important;
width: 100% !important;
height: 160px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
background: #1a1f3f !important;
border: none !important; /* Remove any border */
border-bottom: none !important; /* Ensure no border-bottom */
margin-bottom: 0 !important; /* Remove any margin */
}
.homepage .game-image img {
width: 100%;
height: 100%;
object-fit: cover;
border: none !important; /* Remove any border */
display: block !important; /* Prevent inline spacing */
vertical-align: bottom !important; /* Remove baseline spacing */
}
.homepage .game-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.7));
padding: 0.5rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.homepage .bookmaker-logo img {
width: 30px;
height: auto;
border-radius: 4px;
}
.homepage .game-timer {
color: #00cc5a;
font-size: 0.8rem;
font-weight: 600;
background: rgba(0,0,0,0.5);
padding: 0.2rem 0.4rem;
border-radius: 4px;
}
.homepage .game-top-border {
padding: 0.5rem 0.75rem !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
min-height: 35px !important;
background: #ffffff !important; /* White background for better visibility */
border: none !important; /* Remove any border */
border-top: none !important; /* Ensure no border-top - seamless connection with image */
border-bottom: 1px solid #f0f0f0 !important; /* Only bottom border for separation */
margin-top: 0 !important; /* Remove any margin */
margin-bottom: 0 !important; /* Remove any margin */
}
.homepage .game-bookmaker-logo {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.homepage .game-bookmaker-logo img {
width: 70px !important;
height: auto !important;
max-height: 35px !important;
object-fit: contain !important;
}
.homepage .game-timer-text {
color: #00cc5a !important;
font-size: 14px !important;
font-weight: 700 !important;
text-align: right !important;
}
/* Offers Section - Clean like betting.bet */
.homepage .offers-section {
margin: 1rem 0 2rem 0 !important; /* Reduced top margin to bring closer to carousel */
width: 100% !important;
box-sizing: border-box !important;
}
.homepage .offers-section h2 {
font-size: 1.563rem !important; /* Match global h2 desktop (~25px) */
color: #022e4a !important;
margin-bottom: 1.5rem !important;
text-align: left !important;
word-wrap: break-word !important;
padding-right: 0 !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
box-sizing: border-box !important;
}
/* Desktop: Ensure offers section h2 aligns with games-section h2 */
@media (min-width: 920px) {
}
}
.homepage .offers-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 2rem !important;
padding: 4px 8px !important;
box-sizing: border-box !important;
}
.homepage .offer-category h2 {
color: #022e4a !important;
text-align: left !important;
word-wrap: break-word !important;
}
.homepage .offer-list {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
@media (max-width: 767px) {
.homepage .offer-item {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.75rem 0 !important;
border-bottom: 1px solid #e2e8f0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
transition: none !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
}
/* Heading size normalization - enforce consistent h2/h3 sizing sitewide */
h2,
h3 {
font-size: 20px !important;
line-height: 1.3;
}
@media (max-width: 767px) {
h2 {
font-size: 1.35rem !important; /* 1.35x body text (1.05rem) = ~22.7px, ensuring h2 is larger than bolded sub-content (16.8px) */
}
h3 {
font-size: 1.25rem !important; /* 1.25x body text (1.05rem) = ~21px, ensuring h3 is larger than bolded sub-content (16.8px) */
}
/* Override section-title h2 which was set to 16px */
.section-title h2 {
font-size: 1.35rem !important; /* Match base h2 size */
}
/* content-section h2: use canonical var(--fs-h2) */
.content-section h2 {
font-size: var(--fs-h2) !important;
}
/* Override homepage games-section h2 */
.homepage .games-section h2 {
font-size: 1.35rem !important; /* Match base h2 size */
}
/* Mobile: Clean carousel styling - break out of container padding so shadows show on left; 0.5rem left inset */
.homepage .games-section {
margin-left: -1rem !important; /* Break out of container padding (1rem) so shadows show on left */
margin-right: 0 !important; /* Right edge - carousels disappear against border */
padding-left: calc(1rem + 0.5rem) !important; /* Container (1rem) + 0.5rem carousel left inset – equal spacing */
padding-right: 0 !important; /* Right edge - carousels disappear against border */
padding-top: 12px !important; /* Top padding - shadows bleed into it */
padding-bottom: 12px !important; /* Bottom padding - shadows bleed into it */
margin-bottom: 0 !important; /* Remove negative margin on mobile */
overflow: visible !important; /* Shadows bleed into padding area */
width: calc(100% + 1rem) !important; /* Extend width to compensate for negative margin */
}
.homepage .horizontal-track {
padding-top: 0 !important; /* Remove extra padding */
padding-bottom: 0 !important; /* Remove extra padding */
padding-left: 0.5rem !important; /* 0.5rem left so first card has equal spacing */
padding-right: 0 !important; /* No padding - parent handles it */
margin-bottom: 0 !important;
overflow-x: auto !important;
overflow-y: visible !important; /* Allow shadows to show above/below */
}
/* Swiper carousels - 0.5rem left inset to match horizontal-track */
.swiper-jackpot,
.swiper-daily {
padding-left: 0.5rem !important; /* 0.5rem carousel left inset */
padding-right: 12px !important; /* Keep right padding - shadows bleed into it */
padding-top: 12px !important; /* Top padding - shadows bleed into it */
padding-bottom: 12px !important; /* Bottom padding - shadows bleed into it */
overflow: visible !important; /* Allow shadows to bleed into padding area */
}
.swiper-jackpot .swiper-wrapper,
.swiper-daily .swiper-wrapper {
overflow: visible !important; /* Ensure wrapper doesn't clip shadows */
}
/* Ensure game items have proper rounded corners and natural shadow on mobile - free-standing boxes */
.homepage .horizontal-track .item,
.homepage .game-item,
.swiper-jackpot .game-item,
.swiper-daily .game-item {
border-radius: 8px !important; /* Rounded corners */
box-shadow: 0 2px 8px rgba(2, 46, 74, 0.12), 0 1px 4px rgba(2, 46, 74, 0.08) !important; /* Natural shadow on all sides */
margin-bottom: 0 !important;
}
/* HOMEPAGE CAROUSEL MOBILE: shift header + carousel right (1rem from viewport); wrapper width unchanged so shadows not clipped */
body.homepage .main-content .betquest-carousel-wrapper.games-section {
margin-left: -0.5rem !important;
padding-left: 0.5rem !important; /* Push title + carousel right; no change to wrapper outer width */
width: calc(100% + 0.5rem) !important;
}
body.homepage .main-content .betquest-carousel-title {
padding-left: 0.5rem !important; /* Title at 1rem from viewport (wrapper 0.5rem + this 0.5rem) */
}
body.homepage .main-content .betquest-carousel-container {
padding-left: 0.5rem !important; /* First card at 1rem (wrapper 0.5rem + this 0.5rem) */
scroll-padding-left: 1rem !important; /* Match visual start so first card snap aligns */
}
}
/* HOMEPAGE CAROUSEL: one block – stable socket, 2rem gap desktop. Narrow wrapper only on mobile (see 767px block). */
body.homepage .main-content .betquest-carousel-wrapper.games-section {
display: block !important;
min-height: 280px !important;
margin-top: 0 !important; /* Base: 0rem - header has 1rem padding = 1rem total */
padding-top: 15px !important;
padding-right: 0 !important;
background: transparent !important;
}
body.homepage .main-content .betquest-carousel-container {
scroll-padding-left: 0.5rem !important;
}
/* 768–919px: homepage carousel – 0.5rem from left (same as mobile); 0rem gap below hero */
@media (min-width: 768px) and (max-width: 919px) {
body.homepage .main-content .betquest-carousel-wrapper.games-section {
margin-left: -0.5rem !important;
padding-left: 0.5rem !important;
width: calc(100% + 0.5rem) !important;
margin-top: 0 !important; /* 0rem - header has 1rem padding = 1rem total */
}
body.homepage .main-content .betquest-carousel-title {
padding-left: 1rem !important;
}
body.homepage .main-content .betquest-carousel-container {
padding-left: 1rem !important;
scroll-padding-left: 1rem !important;
}
}
/* 920px+: base rules - overridden by 920-1023px specific rules below */
@media (min-width: 920px) {
/* Default 920px+ rules - specific homepage 920-1023px rules override these */
}
/* 920–1023px: home.php logic – 3 cards wide, 1rem spacing, shadows visible */
@media (min-width: 920px) and (max-width: 1023px) {
body.homepage .main-content .betquest-carousel-wrapper.games-section {
margin-top: 1rem !important; /* 1rem + header's 1rem = 2rem total */
margin-left: calc(-1 * var(--spacing-md, 1rem)) !important; /* Break out of page padding for shadows */
margin-right: calc(-1 * var(--spacing-md, 1rem)) !important; /* Break out of page padding for shadows */
width: calc(100% + 2 * var(--spacing-md, 1rem)) !important; /* Compensate for negative margins */
padding-left: var(--spacing-md, 1rem) !important; /* Bring content back to 1rem alignment */
padding-right: var(--spacing-md, 1rem) !important; /* Bring content back to 1rem alignment */
overflow: visible !important; /* Allow shadows to show */
}
body.homepage .main-content .betquest-carousel-title {
padding-left: 0 !important; /* Wrapper already has 1rem padding - content aligns at 1rem */
}
body.homepage .main-content .betquest-carousel-container {
display: grid !important; /* Use grid for 3 columns */
grid-template-columns: repeat(3, 1fr) !important; /* 3 cards wide */
gap: 1rem !important; /* 1rem gap between cards */
padding-left: 0 !important; /* Wrapper already has 1rem padding - content aligns at 1rem */
padding-right: 0 !important;
overflow: visible !important; /* Don't clip shadows */
}
/* Ensure cards work in grid layout */
body.homepage .main-content .betquest-carousel-container .betquest-carousel-card {
flex: none !important; /* Override flex: 0 0 280px for grid layout */
width: auto !important; /* Let grid control width */
max-width: none !important;
}
/* Individual page: match home.php – padding 0 1.5rem, shadows unaffected */
.individual-competition-page .betquest-carousel-wrapper.games-section,
.individual-competition-page .homepage-container .betquest-carousel-wrapper.games-section {
padding: 0 1.5rem !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
overflow: visible !important;
}
.individual-competition-page .betquest-carousel-title {
padding-left: 0 !important;
padding-right: 0 !important;
}
.individual-competition-page .betquest-carousel-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* 1024px+: individual page carousel – resume breakout layout */
@media (min-width: 1024px) {
.individual-competition-page .betquest-carousel-wrapper.games-section {
margin-left: calc(-1 * var(--content-side-padding, 1rem)) !important;
margin-right: calc(-1 * var(--content-side-padding, 1rem)) !important;
width: calc(100% + 2 * var(--content-side-padding, 1rem)) !important;
padding: 0 !important;
}
.individual-competition-page .betquest-carousel-title {
padding-right: 0.5rem !important;
}
.individual-competition-page .betquest-carousel-container {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
}
/* HOMEPAGE CAROUSEL CLS: same position from first paint – skeleton and loaded content */
body.homepage .main-content .betquest-carousel-wrapper.games-section {
margin-top: 0 !important; /* Base: 0rem - header has 1rem padding = 1rem total */
min-height: 280px !important; /* Reserve space (title + one row of cards) so layout doesn’t shift when skeleton → loaded */
}
/* Homepage carousel: same top padding on mobile as base so internal layout doesn’t shift */
@media (max-width: 767px) {
body.homepage .main-content .betquest-carousel-wrapper.games-section {
margin-top: 0 !important; /* 0rem - header has 1rem padding = 1rem total */
padding-top: 15px !important;
}
}
/* 1024px+: 1rem gap below hero */
@media (min-width: 1024px) {
body.homepage .main-content .betquest-carousel-wrapper.games-section {
margin-top: 1rem !important; /* 1rem + header's 1rem = 2rem total */
}
}
/* ===== HOMEPAGE SECTION ENDS ===== */
/* Apply offer card styles to no-wagering page */
.no-wagering-page .offer-card {
background: white;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
transition: transform 0.2s, box-shadow 0.2s;
padding: 1.67rem;
min-height: 120px;
position: relative;
width: 100%;
box-sizing: border-box;
}
.no-wagering-page .offer-top-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.67rem;
margin-bottom: 0; /* No gap - metrics-row starts directly */
width: 100%;
}
.no-wagering-page .logo-section {
flex-shrink: 0;
order: 1;
}
.no-wagering-page .offer-details {
flex: 1;
order: 2;
text-align: center;
}
.no-wagering-page .offer-actions {
flex-shrink: 0;
order: 3;
}
/* No hover on offer box */
.no-wagering-page .offer-card:hover {
transform: none;
box-shadow: inherit;
}
.no-wagering-page .casino-logo {
width: 120px;
height: 60px;
object-fit: contain;
border-radius: 0.25rem;
flex-shrink: 0;
align-self: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 0;
}
.no-wagering-page .offer-blurb-text {
text-align: center;
text-transform: uppercase;
line-height: 1.2;
margin: 0;
padding: 0;
}
.no-wagering-page .offer-blurb-text .main-text {
font-size: 1.6rem;
font-weight: 700;
color: #20242e;
margin: 0;
line-height: 1.1;
}
.no-wagering-page .offer-blurb-text .secondary-text {
font-size: 1.2rem;
font-weight: 700;
color: #20242e;
margin: 0;
line-height: 1.1;
}
.no-wagering-page .offer-blurb-text .tertiary-text {
font-size: 1.0rem;
font-weight: 700;
color: #20242e;
margin: 0;
line-height: 1.1;
}
.no-wagering-page .claim-btn {
color: white;
border: none;
padding: 0.9rem 1.8rem;
border-radius: 0.5rem;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.2s;
animation: pulse 2s infinite;
white-space: nowrap;
touch-action: manipulation; /* Prevent accidental zoom/delay on touch */
}
@media (hover: hover) {
.no-wagering-page .claim-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
}
.no-wagering-page .metrics-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin: 0; /* No gap - starts directly after offer-top-row */
padding: 12px 15px; /* Tighter padding for sleek look */
background: var(--metrics-bar-bg); /* Same as key-terms-blurb everywhere */
border-radius: 0.75rem 0.75rem 0 0; /* Top only – connects to key-terms-blurb as one box */
font-size: 0.85rem;
width: 100%;
box-sizing: border-box;
clear: both;
}
/* 500px-767px: 3 per row (compact) for all offers pages – metrics bar stays connected to key terms blurb */
@media (min-width: 500px) and (max-width: 767px) {
.signup-offers-page .metrics-row,
.no-wagering-page .metrics-row,
.casino-bonus-page .metrics-row,
.sports-offers-page .metrics-row {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important; /* Reduced gap for better spacing */
padding: 15px !important; /* Equal padding on all sides */
justify-items: center !important; /* Center items within grid cells for equal spacing */
}
/* Reorder Rating to second row - Rating is 2nd child, move it to position 4 (second row) */
.signup-offers-page .metrics-row .metric-item:nth-child(2),
.no-wagering-page .metrics-row .metric-item:nth-child(2),
.casino-bonus-page .metrics-row .metric-item:nth-child(2) {
order: 4 !important; /* Move Rating to second row (positions 4-6 in 3-column grid) */
}
/* Move Min Deposit to first row - Min Deposit is typically 4th or 5th child depending on wagering */
/* Target common positions where Min Deposit appears */
.signup-offers-page .metrics-row .metric-item:nth-child(4),
.signup-offers-page .metrics-row .metric-item:nth-child(5),
.casino-bonus-page .metrics-row .metric-item:nth-child(4),
.casino-bonus-page .metrics-row .metric-item:nth-child(5),
.no-wagering-page .metrics-row .metric-item:nth-child(3) {
order: 2 !important; /* Move Min Deposit to first row (positions 1-3 in 3-column grid) */
}
}
/* Mobile/Tablet: Center grid items for equal left/right spacing and reorder Rating */
@media (max-width: 767px) {
.signup-offers-page .metrics-row,
.no-wagering-page .metrics-row,
.casino-bonus-page .metrics-row,
.sports-offers-page .metrics-row {
justify-items: center !important; /* Center items within grid cells – sports same as casino at 500px+ */
}
/* Reorder Rating to second row - Rating is 2nd child, move it to position 3 (second row) */
/* EXCLUDE sports-offers-page - it has its own reorder below */
.signup-offers-page .metrics-row .metric-item:nth-child(2),
.no-wagering-page .metrics-row .metric-item:nth-child(2),
.casino-bonus-page .metrics-row .metric-item:nth-child(2) {
order: 3 !important; /* Move Rating to second row (positions 3-4 in 2-column grid) */
}
/* Move Min Deposit to first row - Min Deposit is typically 4th or 5th child depending on wagering */
/* Target common positions where Min Deposit appears - EXCLUDE sports-offers-page */
.signup-offers-page .metrics-row .metric-item:nth-child(4),
.signup-offers-page .metrics-row .metric-item:nth-child(5),
.casino-bonus-page .metrics-row .metric-item:nth-child(4),
.casino-bonus-page .metrics-row .metric-item:nth-child(5),
.no-wagering-page .metrics-row .metric-item:nth-child(3) {
order: 2 !important; /* Move Min Deposit to first row (positions 1-2 in 2-column grid) */
}
/* SPORTS PAGE SPECIFIC: Reorder metrics for mobile - BELOW 500px only (2x3 grid) */
/* At 500px+ sports uses same 3x2 layout as casino-signup (see @media (min-width: 500px) block above) */
/* DOM order: Rating (1), Min Bet (2), Min Odds (3), Offer Value (4), Special feature (5), Special feature 2 (6) */
/* Desired: Top row: Offer Value (top left), Special feature 2 (top right)
Middle row: Min odds (middle left), Min bet (middle right)
Bottom row: Special feature (bottom left), Rating (bottom right) */
}
/* Below 500px only: Sports metrics 2 columns x 3 rows (same reorder as mobile) */
@media (max-width: 499px) {
.sports-offers-page .metrics-row {
grid-template-columns: repeat(2, 1fr) !important; /* 2 columns for 6 items in 3 rows */
}
/* Offer Value (4th child) -> Top Left (order: 1) */
.sports-offers-page .metrics-row .metric-item:nth-child(4) {
order: 1 !important;
}
/* Special feature 2 (6th child) -> Top Right (order: 2) */
.sports-offers-page .metrics-row .metric-item:nth-child(6) {
order: 2 !important;
}
/* Min Odds (3rd child) -> Middle Left (order: 3) */
.sports-offers-page .metrics-row .metric-item:nth-child(3) {
order: 3 !important;
}
/* Min Bet (2nd child) -> Middle Right (order: 4) */
.sports-offers-page .metrics-row .metric-item:nth-child(2) {
order: 4 !important;
}
/* Special feature (5th child) -> Bottom Left (order: 5) */
.sports-offers-page .metrics-row .metric-item:nth-child(5) {
order: 5 !important;
}
/* Rating (1st child) -> Bottom Right (order: 6) */
.sports-offers-page .metrics-row .metric-item:nth-child(1) {
order: 6 !important;
}
}
.no-wagering-page .metric-item {
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 5px;
}
.no-wagering-page .metric-label {
font-weight: bold;
color: #555;
font-size: 0.75rem;
line-height: 1.2;
}
.no-wagering-page .metric-value {
color: #333;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.2;
}
.no-wagering-page .stars {
display: flex;
gap: 2px;
}
.no-wagering-page .star {
color: #ffd700;
font-size: 0.9rem;
}
.no-wagering-page .star.empty {
color: #ddd;
}
.casino-bonus-page .stars {
display: flex;
gap: 2px;
}
.casino-bonus-page .star {
color: #ffd700;
font-size: 0.9rem;
}
.casino-bonus-page .star.empty {
color: #ddd;
}
.casino-bonus-page .star.half-star {
color: #ffd700;
}
.no-wagering-page .mobile-claim-btn {
display: none;
}
.no-wagering-page .key-terms-section {
margin-top: 1rem;
}
.no-wagering-page .terms-text {
font-size: var(--fs-key-terms-offer-box) !important;
color: #666;
line-height: 1.4;
margin: 0;
text-align: left;
overflow: visible;
white-space: normal;
max-height: none;
display: block;
}
.no-wagering-page .no-offers {
text-align: center;
padding: 3rem 1rem;
color: #666;
font-size: 1.1rem;
background: white;
border-radius: 0.75rem;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
width: 100%;
box-sizing: border-box;
}
.no-wagering-page .loading {
text-align: center;
padding: 3rem 1rem;
color: #666;
width: 100%;
box-sizing: border-box;
}
/* Mobile responsive for no-wagering page */
@media (max-width: 767px) {
.no-wagering-page .offer-blurb-text .main-text {
font-size: 1.6rem;
font-weight: 700 !important;
}
.no-wagering-page .offer-blurb-text .secondary-text {
font-size: 1.2rem;
font-weight: 700 !important;
}
.no-wagering-page .offer-blurb-text .tertiary-text {
font-size: 0.9rem;
font-weight: 700 !important;
}
.no-wagering-page .mobile-claim-btn {
display: block;
text-align: center;
margin-top: 1rem !important; /* No top margin - spacing comes from metrics margin-bottom */
margin-bottom: 1rem !important; /* 1rem spacing between button and key terms */
}
.no-wagering-page .mobile-claim-btn .claim-btn {
width: 100%;
max-width: 400px;
}
.no-wagering-page .key-terms-section {
margin-top: 0.5rem;
}
.no-wagering-page .terms-text {
font-size: var(--fs-key-terms-offer-box) !important;
line-height: 1.3;
margin: 0;
text-align: left;
}
.no-wagering-page .offer-card {
flex-direction: column;
text-align: center;
gap: 1rem;
padding: 1.25rem;
min-height: 100px;
align-items: center;
}
.no-wagering-page .offer-top-row {
flex-direction: column;
gap: 1rem;
margin-bottom: 0; /* No gap - metrics-row starts directly */
align-items: center;
}
.no-wagering-page .logo-section,
.no-wagering-page .offer-details {
order: unset;
flex: none;
}
.no-wagering-page .offer-actions {
order: unset;
flex: none;
display: none;
}
.no-wagering-page .metrics-row {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
font-size: 0.8rem;
padding: 20px;
margin: 1.5rem 0;
}
.no-wagering-page .metric-item {
text-align: left;
justify-content: flex-start;
gap: 8px;
}
.no-wagering-page .metric-label {
font-size: var(--metric-mobile-fs) !important;
}
.no-wagering-page .metric-value {
font-size: var(--metric-mobile-fs) !important;
}
}
@media (max-width: 480px) {
.no-wagering-page .offer-blurb-text .main-text {
font-size: 1.6rem;
font-weight: 700 !important;
}
.no-wagering-page .offer-blurb-text .secondary-text {
font-size: 1.2rem;
font-weight: 700 !important;
}
.no-wagering-page .offer-blurb-text .tertiary-text {
font-size: 0.8rem;
font-weight: 700 !important;
}
}
@media (min-width: 768px) {
.no-wagering-page .casino-logo {
width: 150px;
height: 75px;
}
.no-wagering-page .offer-card {
padding: 2.5rem;
min-height: 140px;
}
.no-wagering-page .claim-btn {
padding: 1.1rem 2.2rem;
font-size: 1.3rem;
}
.no-wagering-page .results-count-section {
margin: 0.5rem 0;
}
.no-wagering-page .results-count-section .offers-count {
font-size: 1.3rem;
}
}
/* Container and Results Count Styles – width overridden at 1280px by shared rule (same as home) */
.no-wagering-page .main-container {
width: 100%;
max-width: 1200px;
min-width: 320px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
@media (min-width: 1280px) {
.no-wagering-page .main-container {
max-width: 1400px;
}
}
.no-wagering-page .offers-section {
margin: 0.5rem 0 2rem 0;
}
/* .no-wagering-page .offers-list joined block styling is above (same as casino signup) – do not override gap/background here */
.no-wagering-page .results-count-section {
background: white;
padding: 1rem 1.5rem;
margin: 0.5rem 0;
border-radius: 0.75rem;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
text-align: center;
width: 100%;
box-sizing: border-box;
display: block;
}
.no-wagering-page .results-count-section .offers-count {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
color: #00cc5a;
}
.no-wagering-page .results-count-section .offers-count.loading {
color: #666;
font-style: italic;
}
@media (min-width: 1024px) {
.no-wagering-page .main-container {
padding: 0 2rem;
}
}
/* Casino signup: match no-wagering/no-deposit/casino-bonus width – same 2rem padding on desktop */
@media (min-width: 1024px) {
.casino-signup-offers-page .main-container {
padding: 0 2rem !important;
}
}
/* Individual competition page: use tokens only; text-align only here */
@media (max-width: 919px) {
.individual-competition-page h2,
.individual-competition-page h2 a {
line-height: 1.3 !important;
text-align: left !important;
}
.individual-competition-page h3,
.individual-competition-page h3 a {
line-height: 1.3 !important;
text-align: left !important;
}
.individual-competition-page .offers-box h3.offer-header,
.individual-competition-page .offers-box h3.offer-header a {
text-align: center !important;
}
}
@media (min-width: 920px) {
.individual-competition-page h2,
.individual-competition-page h2 a,
.individual-competition-page h3,
.individual-competition-page h3 a {
line-height: 1.3 !important;
text-align: left !important;
}
}
@media (max-width: 919px) {
/* Keep "Follow & Rate Us" and "Stay Updated with Betquest!" centred on mobile */
#footer-social-section h3.footer-social-header {
text-align: center !important;
}
#pqBottomEmailForm .pq-bottom-email-content h2 {
text-align: center !important;
}
}
/* Heading normalization – use tokens only (final block at end of file wins for font-size) */
html body h2,
html body h2 a,
html body h3,
html body h3 a,
.section-title h2,
.section-title h2 a,
.homepage .about-section h2,
.homepage .about-section h2 a {
line-height: 1.3 !important;
}
.homepage .offer-item:hover {
transform: none;
box-shadow: none;
background: rgba(0, 204, 90, 0.02);
}
.homepage .offer-brand img {
width: 93px !important;
height: 50px !important;
border-radius: 4px !important;
flex-shrink: 0 !important;
object-fit: contain !important;
}
.homepage .offer-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
min-width: 0 !important;
overflow: hidden !important;
}
.homepage .offer-header {
margin: 0;
}
.homepage .offer-header strong {
font-size: 0.85rem !important;
color: #022e4a !important;
font-weight: 700 !important;
word-wrap: break-word !important;
}
.homepage .offer-text {
font-weight: 600 !important;
color: #022e4a !important;
font-size: 0.8rem !important;
line-height: 1.3 !important;
word-wrap: break-word !important;
}
.homepage .offer-item {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.75rem 0 !important;
border-bottom: 1px solid #e2e8f0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
transition: none !important;
width: 100% !important;
box-sizing: border-box !important;
cursor: pointer !important;
}
/* MOBILE FIRST - Remove this 768px rule completely and move to 920px where it belongs */
.homepage .see-all-category {
display: block;
text-align: center;
color: #00cc5a;
text-decoration: none;
font-weight: 600;
/* font-size: from global typography block – var(--fs-h2) */
margin-top: 1rem;
padding: 0.5rem 0;
}
.homepage .see-all-category:hover {
color: #00cc57;
}
/* Why Betquest Section - DESKTOP ONLY */
.homepage .why-betquest-section {
display: none; /* Hidden by default, shown only on desktop */
margin: 3rem 0;
text-align: center;
}
.homepage .why-betquest-section h2 {
font-size: 20px !important;
color: #022e4a !important;
margin-bottom: 2rem !important;
}
.homepage .eeat-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-s);
padding: 0 0.5rem;
box-sizing: border-box;
}
.homepage .eeat-box {
padding: 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12);
transition: transform 0.2s;
}
.homepage .eeat-box:hover {
transform: translateY(-5px);
}
.homepage .eeat-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
.homepage .eeat-box h3 {
font-size: 16px !important;
color: #022e4a !important;
margin-bottom: 0.5rem !important;
}
.homepage .eeat-box p {
color: #4a5568 !important;
line-height: 1.5 !important;
font-size: 14px !important;
}
/* Blog Section – homepage, jackpot, blog-post page (Latest Analysis) same styling */
.homepage .blog-section,
.individual-competition-page .blog-section,
.jackpot-competitions-page .blog-section,
.daily-free-games-page .blog-section,
.betting-sites-page .blog-section,
.signup-offers-page .blog-section,
.no-wagering-page .blog-section,
.casino-bonus-page .blog-section,
.sports-offers-page .blog-section,
.blog-post-page .blog-section {
margin: 3rem 0;
}
/* Individual + Jackpot + Blog post: Latest Analysis same width (1100px desktop) */
@media (min-width: 920px) {
.individual-competition-page .blog-section,
.jackpot-competitions-page .blog-section,
.daily-free-games-page .blog-section,
.betting-sites-page .blog-section,
.signup-offers-page .blog-section,
.no-wagering-page .blog-section,
.casino-bonus-page .blog-section,
.sports-offers-page .blog-section,
.blog-post-page .blog-section {
max-width: 1100px !important;
margin: 3rem auto 2rem !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
width: 100%;
box-sizing: border-box;
}
}
.homepage .blog-section h2,
.individual-competition-page .blog-section h2,
.jackpot-competitions-page .blog-section h2,
.daily-free-games-page .blog-section h2,
.betting-sites-page .blog-section h2,
.signup-offers-page .blog-section h2,
.no-wagering-page .blog-section h2,
.casino-bonus-page .blog-section h2,
.sports-offers-page .blog-section h2,
.blog-post-page .blog-section h2 {
font-size: var(--fs-h2) !important;
color: #022e4a !important;
margin-bottom: 2rem !important;
text-align: center !important;
}
.homepage .blog-grid,
.individual-competition-page .blog-grid,
.jackpot-competitions-page .blog-grid,
.daily-free-games-page .blog-grid,
.betting-sites-page .blog-grid,
.signup-offers-page .blog-grid,
.no-wagering-page .blog-grid,
.casino-bonus-page .blog-grid,
.sports-offers-page .blog-grid,
.blog-post-page .blog-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
padding: 0 0.5rem;
box-sizing: border-box;
}
.homepage .blog-post,
.individual-competition-page .blog-post,
.jackpot-competitions-page .blog-post,
.daily-free-games-page .blog-post,
.betting-sites-page .blog-post,
.signup-offers-page .blog-post,
.no-wagering-page .blog-post,
.casino-bonus-page .blog-post,
.sports-offers-page .blog-post,
.blog-post-page .blog-post {
padding: 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12);
cursor: pointer;
transition: transform 0.2s;
}
.homepage .blog-post:hover,
.individual-competition-page .blog-post:hover,
.jackpot-competitions-page .blog-post:hover,
.daily-free-games-page .blog-post:hover,
.betting-sites-page .blog-post:hover,
.blog-post-page .blog-post:hover {
transform: translateY(-5px);
}
.homepage .blog-post h3,
.individual-competition-page .blog-post h3,
.jackpot-competitions-page .blog-post h3,
.daily-free-games-page .blog-post h3,
.betting-sites-page .blog-post h3,
.blog-post-page .blog-post h3 {
font-size: 16px !important;
color: #022e4a !important;
margin-bottom: 0.5rem !important;
}
.homepage .blog-post p,
.individual-competition-page .blog-post p,
.jackpot-competitions-page .blog-post p,
.daily-free-games-page .blog-post p,
.betting-sites-page .blog-post p,
.blog-post-page .blog-post p {
color: #4a5568 !important;
line-height: 1.5 !important;
font-size: 14px !important;
}
/* Blog post image: prominent height – same on homepage, jackpot, blog-post page (desktop + mobile) */
.homepage .blog-post .blog-post-image,
.individual-competition-page .blog-post .blog-post-image,
.jackpot-competitions-page .blog-post .blog-post-image,
.daily-free-games-page .blog-post .blog-post-image,
.betting-sites-page .blog-post .blog-post-image,
.blog-post-page .blog-post .blog-post-image {
height: 160px !important;
min-height: 160px !important;
overflow: hidden;
border-radius: 8px;
margin-bottom: 1rem;
}
.homepage .blog-post .blog-post-image img,
.individual-competition-page .blog-post .blog-post-image img,
.jackpot-competitions-page .blog-post .blog-post-image img,
.daily-free-games-page .blog-post .blog-post-image img,
.betting-sites-page .blog-post .blog-post-image img,
.blog-post-page .blog-post .blog-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.homepage .blog-link {
display: block;
text-align: center;
color: #00cc5a;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
}
.homepage .blog-link:hover {
color: #00cc57;
}
/* About Section */
.homepage .about-section {
margin: 3rem 0;
text-align: center;
}
.homepage .about-section h2 {
font-size: var(--fs-h2) !important;
color: #022e4a !important;
margin-bottom: 2rem !important;
}
.homepage .about-content {
max-width: 600px;
margin: 0 auto;
}
.homepage .about-content p {
font-size: 14px !important;
line-height: 1.6 !important;
color: #4a5568 !important;
margin-bottom: 1.5rem !important;
}
.homepage .about-link {
display: inline-block;
color: #00cc5a;
text-decoration: none;
font-weight: 600;
/* font-size: from typography block – var(--fs-h2) */
padding: 0.75rem 1.5rem;
border: 2px solid #00cc5a;
border-radius: 8px;
transition: all 0.2s;
}
.homepage .about-link:hover {
background: #00cc5a;
color: #ffffff;
}
/* Responsive Design */
/* Tablet (768-919px) ONLY grows mobile sizes, NO card styles */
/* 920px+ takes precedence over 1024px for homepage only */
/* This section removed - using 920px+ layout instead */
@media (max-width: 767px) {
.homepage .desktop-only {
display: none !important;
}
/* Spacing system: Use gap-based layout on homepage-container (critical CSS duplicates this to prevent CLS) */
.homepage .homepage-container {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important; /* 1rem between sections */
}
/* Hero section: 1rem gap after hero to first section - MUST override all other hero-section rules */
body.homepage .hero-section,
.homepage .hero-section,
body.homepage .main-content .hero-section {
margin-bottom: var(--space-block) !important; /* 1rem gap after hero to first section */
margin-top: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.homepage .hero-title {
font-size: 2rem;
}
.homepage .hero-subtitle {
font-size: 1rem;
}
.homepage .section-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.homepage .website-blurb {
margin: 0.5rem 0 0 0 !important; /* Remove bottom margin - gap handles spacing */
padding: 1.5rem;
}
/* Games section: flex column + 1rem gap between header and carousel (spacing system) */
/* Keep breakout margins for carousel shadow visibility */
.homepage .games-section {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: -1rem !important; /* Breakout for carousel shadows */
margin-right: -1rem !important; /* Breakout for carousel shadows */
}
/* Games section header: Remove bottom margin - gap handles spacing */
.homepage .games-section h2 {
margin-bottom: 0 !important;
}
/* ===== HOMEPAGE OFFERS SPACING RESET (mobile only) ===== */
/* Zero ALL old padding/margin so ONLY gap system applies. 1rem = header to first offer. */
/* Left/right padding matches carousel track (1.5rem) so headers and offers align. */
.homepage .offers-section {
margin: 0 !important;
padding: 0 0.5rem !important;
}
.homepage .offers-section h2,
.homepage .offer-category h2 {
margin: 0 !important;
padding: 0 !important;
}
.homepage .offers-grid {
padding: 0 !important;
gap: var(--space-section) !important; /* 2rem between offer-category blocks (See all → next header) */
}
.homepage .offer-category {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important; /* 1rem between h2, list, see-all-link */
margin: 0 !important;
padding: 0 !important;
}
.homepage .offer-list,
.homepage #no-wagering-offers,
.homepage #sports-offers,
.homepage #casino-bonus-offers,
.homepage #no-deposit-offers {
margin: 0 !important;
padding: 0 !important;
gap: var(--space-inline) !important; /* 0.75rem between offers; parent gap = header to list */
}
.homepage .see-all-category {
margin: 0 !important;
padding: 0 !important;
}
.homepage .why-betquest-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.homepage .blog-section,
.individual-competition-page .blog-section,
.jackpot-competitions-page .blog-section,
.daily-free-games-page .blog-section,
.blog-post-page .blog-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.homepage .about-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ===== HOMEPAGE BLOG & ABOUT SPACING RESET (mobile only) ===== */
.homepage .blog-section {
margin: 0 !important;
padding: 0 0.5rem !important;
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
}
.homepage .blog-section h2 {
margin: 0 !important;
padding: 0 !important;
}
.homepage .blog-grid {
margin: 0 !important;
padding: 0 !important;
gap: var(--space-block) !important;
}
.homepage .about-section {
margin: 0 !important;
padding: 0 0.5rem !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* Centre block on page */
gap: var(--space-block) !important;
}
.homepage .about-section h2 {
margin: 0 !important;
padding: 0 !important;
}
.homepage .about-content {
max-width: 600px !important;
margin: 0 auto !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: var(--space-s) !important;
}
.homepage .about-content p {
margin: 0 !important;
}
/* Section boundary: 2rem after "See all" / end of section (container gap 1rem + margin-top 1rem) */
.homepage .offers-section + .games-section {
margin-top: var(--space-block) !important; /* 1rem + 1rem gap = 2rem to Daily Games carousel header */
}
.homepage .offers-section + .blog-section {
margin-top: var(--space-block) !important; /* 1rem + 1rem gap = 2rem to Latest Blog Posts header */
}
.homepage .why-betquest-section + .about-section {
margin-top: var(--space-block) !important; /* 1rem + 1rem gap = 2rem to About Betquest header (why-betquest hidden on mobile) */
}
}
/* Desktop/Tablet Centered Layout (768px+) - CRITICAL DEFAULTS */
/* REMOVED: This block was causing desktop styles to trigger at 768px instead of 920px */
/* MOBILE-FIRST tablet (768px-919px) - Same spacing system as mobile */
@media (min-width: 768px) and (max-width: 919px) {
body.homepage .hero-section,
.homepage .hero-section {
margin-bottom: var(--space-block) !important;
}
.homepage .homepage-container {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
}
.homepage .games-section,
.homepage .offers-section,
.homepage .blog-section,
.homepage .why-betquest-section,
.homepage .about-section {
margin: 0 !important;
}
.homepage .games-section {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
}
.homepage .games-section h2 {
margin-bottom: 0 !important;
}
.homepage .offers-section { padding: 0 1rem !important; }
.homepage .offers-section h2,
.homepage .offer-category h2 { margin: 0 !important; padding: 0 !important; }
.homepage .offers-grid {
display: grid !important;
grid-template-columns: repeat(1, 1fr) !important;
gap: var(--space-section) !important;
padding: 0 !important;
width: 100%;
}
.homepage .offer-category {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
margin: 0 !important;
padding: 0 !important;
}
.homepage .offer-list,
.homepage .see-all-category { margin: 0 !important; padding: 0 !important; }
.homepage .offer-list { gap: var(--space-inline) !important; }
.homepage .blog-section {
padding: 0 0.5rem !important;
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
}
.homepage .blog-section h2,
.homepage .blog-grid { margin: 0 !important; padding: 0 !important; }
.homepage .blog-grid { gap: var(--space-block) !important; }
.homepage .about-section {
padding: 0 0.5rem !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* Centre block on page */
gap: var(--space-block) !important;
text-align: center !important;
}
.homepage .about-section h2,
.homepage .about-content,
.homepage .about-content p { margin: 0 !important; padding: 0 !important; }
.homepage .about-content {
max-width: 600px !important;
margin-left: auto !important;
margin-right: auto !important;
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
text-align: center !important;
}
.homepage .offers-section + .games-section,
.homepage .offers-section + .blog-section,
.homepage .why-betquest-section + .about-section {
margin-top: var(--space-block) !important;
}
/* Font scaling */
.homepage .hero-title { font-size: 3.8rem; }
.homepage .hero-subtitle { font-size: 1.5rem; }
.homepage .offer-list {
display: flex;
flex-direction: column;
}
/* SCALED PROGRESSION: MOBILE LIST remains mobile list, scaled to larger tablet screen space */
.homepage .offer-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0;
border-bottom: 1px solid #e2e8f0;
background: none;
box-shadow: none;
border-radius: 0;
transition: none;
width: 100%;
}
.homepage .offer-brand img {
width: 70px;
height: 70px;
object-fit: contain;
border-radius: 4px;
}
.homepage .offer-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* KEEP MOBILE BEHAVIOR/scroll for games */
.homepage .horizontal-scroll-container {
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.homepage .horizontal-track {
display: flex !important;
flex-wrap: nowrap !important;
gap: 7px !important;
overflow: auto !important;
margin-left: 0 !important; /* Removed negative margin - parent .games-section handles padding */
margin-right: 0 !important; /* Removed negative margin - carousels should disappear against border */
padding-left: 0 !important; /* Parent .games-section already has left padding */
padding-right: 0 !important; /* Carousels should disappear against page border */
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-snap-type: x mandatory !important;
scroll-padding: 0 !important; /* Remove padding to ensure boxes snap fully out of view */
}
.homepage .games-scroll {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0.75rem !important;
cursor: grab !important;
width: max-content !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-padding: 0 !important; /* Remove padding to ensure boxes snap fully out of view */
}
.homepage .carousel-track {
display: flex !important;
gap: 7px !important;
width: max-content !important;
}
.homepage .game-item {
flex: 0 0 calc(66.67vw - 0.5rem) !important;
max-width: 280px !important;
min-width: 260px !important;
display: flex !important;
flex-direction: column !important;
scroll-snap-align: start !important;
}
.homepage .game-image {
height: 160px !important; /* Mobile: base rule with !important wins, so 160px (not 150px) */
}
/* SCALED MOBILE grids with more gaps */
.homepage .eeat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
margin: 2.5rem 0;
}
.homepage .blog-grid,
.individual-competition-page .blog-grid,
.jackpot-competitions-page .blog-grid,
.daily-free-games-page .blog-grid,
.blog-post-page .blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
margin: 2.5rem 0;
}
}
/* CRITICAL: Force scrolling between 768-919px - MUST override any grid rules */
@media (min-width: 768px) and (max-width: 919px) {
.homepage .horizontal-scroll-container,
.individual-competition-page .horizontal-scroll-container {
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
width: 100% !important;
}
.homepage .horizontal-track,
.individual-competition-page .horizontal-track {
display: flex !important;
flex-wrap: nowrap !important;
gap: 7px !important;
overflow: auto !important;
margin-left: 0 !important; /* Removed negative margin - parent .games-section handles padding */
margin-right: 0 !important; /* Removed negative margin - carousels should disappear against border */
padding-left: 0 !important; /* Parent .games-section already has left padding */
padding-right: 0 !important; /* Carousels should disappear against page border */
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-snap-type: x mandatory !important;
width: auto !important;
}
.homepage .games-scroll,
.individual-competition-page .games-scroll {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 7px !important;
cursor: grab !important;
width: max-content !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.homepage .carousel-track,
.individual-competition-page .carousel-track {
display: flex !important;
gap: 7px !important;
width: max-content !important;
}
.homepage .game-item,
.individual-competition-page .game-item {
flex: 0 0 calc(66.67vw - 0.5rem) !important;
max-width: 280px !important;
min-width: 260px !important;
display: flex !important;
flex-direction: column !important;
scroll-snap-align: start !important;
width: auto !important;
}
}
/* Desktop layout (920px+) - full desktop layout implementation */
@media (min-width: 920px) {
body.homepage .hero-section,
.homepage .hero-section {
margin-bottom: var(--space-block) !important;
}
.homepage .why-betquest-section {
display: block;
}
/* Spacing system: same as mobile/tablet */
.homepage .homepage-container {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 1.5rem !important;
}
.homepage .games-section,
.homepage .offers-section,
.homepage .blog-section,
.homepage .why-betquest-section,
.homepage .about-section {
margin: 0 !important;
}
.homepage .offers-section + .games-section,
.homepage .offers-section + .blog-section,
.homepage .why-betquest-section + .about-section {
margin-top: var(--space-block) !important;
}
.homepage .games-section {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
}
.homepage .games-section h2 {
margin: 0 !important;
padding-left: 0 !important;
}
/* Desktop carousel - 4 games visible (920px+) - NO SCROLL, use grid */
/* Applies to both homepage and individual-competition-page */
.homepage .horizontal-scroll-container,
.individual-competition-page .horizontal-scroll-container {
overflow: hidden !important;
width: 100% !important;
display: block !important;
}
.homepage .horizontal-track,
.individual-competition-page .horizontal-track {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important; /* 4 games on desktop */
gap: 7px !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.homepage .games-scroll,
.individual-competition-page .games-scroll {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important; /* 4 games on desktop */
gap: 7px !important;
width: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.homepage .carousel-track,
.individual-competition-page .carousel-track {
display: contents !important;
}
.homepage .game-item {
width: 100% !important;
cursor: pointer !important;
transition: transform 0.2s !important;
box-shadow: none !important;
border-radius: 8px !important;
overflow: hidden !important;
display: block !important;
}
/* Individual competition page: Add box-shadow on desktop to match homepage */
.individual-competition-page .game-item,
.carousel-wrapper .game-item {
width: 100% !important;
cursor: pointer !important;
transition: transform 0.2s !important;
box-shadow: 0 4px 16px rgba(2, 46, 74, 0.12), 0 2px 8px rgba(2, 46, 74, 0.08) !important; /* Match homepage shadow */
border-radius: 8px !important;
overflow: hidden !important;
display: block !important;
}
/* 4 games visible (1150px+) - NO SCROLL */
@media (min-width: 1150px) {
.homepage .games-scroll,
.individual-competition-page .games-scroll {
grid-template-columns: repeat(4, 1fr) !important;
}
}
.homepage .game-item.fade-out {
opacity: 0 !important;
}
.homepage .game-item[style*="display: none"] {
display: none !important;
}
@media (hover: hover) {
.homepage .game-item:hover .game-top-border {
background: rgba(0, 204, 90, 0.05) !important;
box-shadow: 0 0 8px rgba(0, 204, 90, 0.2) !important;
}
}
.homepage .game-image {
position: relative !important;
width: 100% !important;
height: 160px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
background: #1a1f3f !important;
}
/* Desktop offers layout - EXACT match to games-section width */
.homepage .offers-section {
width: 100% !important;
padding-left: 0 !important; /* EXACT match to games-section - no padding */
padding-right: 0 !important; /* EXACT match to games-section - no padding */
box-sizing: border-box !important;
}
.homepage .offers-grid {
display: flex !important;
flex-direction: column !important;
gap: var(--space-section) !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.homepage .offer-category {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.homepage .offer-category h2 {
margin: 0 !important;
padding: 0 !important;
color: #022e4a !important;
text-align: left !important;
}
.homepage .offer-list {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--space-inline) !important;
}
/* Desktop: Align offers section h2 with games-section h2 - EXACT match */
.homepage .offers-section h2 {
padding-right: 0 !important;
}
.homepage .offer-item {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.75rem 0 !important;
border-bottom: 1px solid #e2e8f0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
cursor: pointer !important;
transition: background 0.2s !important;
}
.homepage .offer-item:hover {
background: rgba(0, 204, 90, 0.02) !important;
transform: none !important;
box-shadow: none !important;
}
.homepage .offer-brand {
flex-shrink: 0 !important;
}
.homepage .offer-brand img {
height: 50px !important;
object-fit: contain !important;
border-radius: 4px !important;
}
.homepage .offer-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
}
.homepage .offer-header strong {
font-size: 1rem !important;
font-weight: 600 !important;
color: #022e4a !important;
}
.homepage .offer-text {
font-size: 0.9rem !important;
color: #4a5568 !important;
line-height: 1.4 !important;
}
/* Text section styling – margin 0 so container gap handles spacing */
.homepage .why-betquest-section,
.homepage .blog-section,
.homepage .about-section {
background: rgba(255, 255, 255, 0.05) !important;
padding: 2rem !important;
margin: 0 !important;
border-radius: 8px !important;
box-shadow: none !important;
text-align: center !important;
}
.homepage .eeat-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: var(--space-block) !important;
margin: 0 !important;
}
.homepage .eeat-box {
padding: 1.5rem !important;
text-align: center !important;
transition: transform 0.2s, opacity 0.5s !important;
}
.homepage .eeat-box:hover {
transform: translateY(-5px) !important;
}
.homepage .blog-grid,
.individual-competition-page .blog-grid,
.jackpot-competitions-page .blog-grid,
.daily-free-games-page .blog-grid,
.blog-post-page .blog-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 1.5rem !important;
margin: 2rem 0 !important;
}
.homepage .blog-post,
.individual-competition-page .blog-post,
.jackpot-competitions-page .blog-post,
.daily-free-games-page .blog-post,
.blog-post-page .blog-post {
padding: 1.5rem !important;
transition: transform 0.2s, opacity 0.5s !important;
}
.homepage .blog-post:hover,
.individual-competition-page .blog-post:hover,
.jackpot-competitions-page .blog-post:hover,
.daily-free-games-page .blog-post:hover,
.blog-post-page .blog-post:hover {
transform: translateY(-5px) !important;
}
}
/* Mobile: Keep horizontal scroll for games */
/* Applies to both homepage and individual-competition-page */
@media (max-width: 919px) {
.homepage .horizontal-track,
.individual-competition-page .horizontal-track {
display: flex !important;
flex-wrap: nowrap !important;
gap: 7px !important;
overflow: auto !important; /* Track scrolls on mobile - betting.bets style */
margin-left: 0 !important; /* Removed negative margin - parent .games-section handles padding */
margin-right: 0 !important; /* Removed negative margin - carousels should disappear against border */
padding-left: 0 !important; /* Parent .games-section already has left padding */
padding-right: 0 !important; /* Carousels should disappear against page border */
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-snap-type: x mandatory !important;
}
.homepage .games-scroll,
.individual-competition-page .games-scroll {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 7px !important;
cursor: grab !important;
width: max-content !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.homepage .carousel-track,
.individual-competition-page .carousel-track {
display: flex !important;
gap: 7px !important;
width: max-content !important;
}
.homepage .game-item,
.individual-competition-page .game-item {
flex: 0 0 calc(66.67vw - 0.5rem) !important;
max-width: 280px !important;
min-width: 260px !important;
display: flex !important;
flex-direction: column !important;
scroll-snap-align: start !important;
}
}
/* 1024px+: 4 boxes fit - clean scaling from smaller to full desktop */
@media (min-width: 1024px) {
.homepage .horizontal-track .game-item,
.homepage .game-item {
min-width: 0 !important;
max-width: none !important;
background: #ffffff !important; /* Match game-top-border */
}
}
/* Scale image, logo, timer, AND game-top-border from 1024px to 1150px */
@media (min-width: 1024px) and (max-width: 1150px) {
.homepage .game-image {
height: clamp(140px, calc(140px + (160 - 140) * ((100vw - 1024px) / (1150 - 1024))), 160px) !important;
}
.homepage .game-bookmaker-logo img {
width: clamp(60px, calc(60px + (70 - 60) * ((100vw - 1024px) / (1150 - 1024))), 70px) !important;
max-height: clamp(30px, calc(30px + (35 - 30) * ((100vw - 1024px) / (1150 - 1024))), 35px) !important;
}
.homepage .game-timer-text {
font-size: clamp(12px, calc(12px + (14 - 12) * ((100vw - 1024px) / (1150 - 1024))), 14px) !important;
}
/* game-top-border: Match game-item dimensions - ensure perfect vertical centering */
.homepage .game-top-border {
width: 100% !important; /* Match game-item width */
padding-top: clamp(0.4rem, calc(0.4rem + (0.5 - 0.4) * ((100vw - 1024px) / (1150 - 1024))), 0.5rem) !important;
padding-bottom: clamp(0.4rem, calc(0.4rem + (0.5 - 0.4) * ((100vw - 1024px) / (1150 - 1024))), 0.5rem) !important; /* Equal top/bottom for vertical centering */
padding-left: clamp(0.6rem, calc(0.6rem + (0.75 - 0.6) * ((100vw - 1024px) / (1150 - 1024))), 0.75rem) !important;
padding-right: clamp(0.6rem, calc(0.6rem + (0.75 - 0.6) * ((100vw - 1024px) / (1150 - 1024))), 0.75rem) !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important; /* Vertically center logo and timer */
min-height: clamp(30px, calc(30px + (35 - 30) * ((100vw - 1024px) / (1150 - 1024))), 35px) !important;
background: #ffffff !important;
border: none !important;
border-top: none !important;
border-bottom: none !important; /* REMOVED to eliminate line */
margin-top: 0 !important;
margin-bottom: 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
/* Ensure logo and timer have no extra spacing that breaks centering */
.homepage .game-bookmaker-logo,
.homepage .game-timer-text {
margin-top: 0 !important;
margin-bottom: 0 !important;
line-height: 1 !important; /* Remove line-height spacing */
display: flex !important;
align-items: center !important;
}
}
/* ===== HOMEPAGE-SPECIFIC STYLES ===== */
/* These styles ONLY apply to the homepage and won't affect other pages */
.homepage .homepage-container {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
box-sizing: border-box;
}
/* Prize Calculator - Full Width */
.homepage .prize-calculator-wrapper {
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
background-color: #00cc5a !important;
border: none !important;
box-shadow: 0 1px 3px rgba(32, 36, 46, 0.03), 0 1px 2px rgba(32, 36, 46, 0.02) !important; /* Super faint shadow */
padding: var(--spacing-sm) var(--spacing-sm) !important;
text-align: center !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 3rem !important;
}
/* Hero Section */
.homepage .hero-section {
text-align: center !important;
background: linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%) !important;
margin: 0 !important;
padding: 2rem 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.homepage .hero-title {
font-size: 20px !important;
font-weight: 700 !important;
color: #022e4a !important;
margin-bottom: 1rem !important;
line-height: 1.2 !important;
word-wrap: break-word !important;
text-align: left !important;
}
.homepage .hero-subtitle {
font-size: 1rem !important;
color: #4a5568 !important;
max-width: 100% !important;
margin: 0 !important;
line-height: 1.5 !important;
word-wrap: break-word !important;
text-align: left !important;
}
/* Website Blurb */
.homepage .website-blurb {
margin: 2rem 0.5rem 2rem 0.5rem !important;
padding: 1.5rem !important;
background: #ffffff !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12) !important;
width: calc(100% - 1rem) !important;
box-sizing: border-box !important;
}
.homepage .website-blurb h2 {
font-size: 1.5rem !important;
color: #022e4a !important;
margin-bottom: 1rem !important;
word-wrap: break-word !important;
}
.homepage .website-blurb p {
font-size: 0.95rem !important;
line-height: 1.5 !important;
color: #4a5568 !important;
margin-bottom: 1rem !important;
word-wrap: break-word !important;
}
.homepage .desktop-only {
display: block !important;
}
/* Games Section – CLS: min-height + same margin from first paint so skeleton/loaded don’t jump */
.homepage .games-section {
margin: 2rem 0 -1rem !important;
width: 100% !important;
box-sizing: border-box !important;
padding-left: 0rem !important; /* Carousel left inset - restore 0.5rem for alignment */
padding-right: 0 !important; /* Carousels should disappear against page border */
padding-top: 15px !important; /* Space for shadow to breathe on top */
padding-bottom: 15px !important; /* Space for shadow to breathe on bottom */
overflow: visible !important; /* Ensure shadows aren't clipped */
min-height: 280px !important; /* Reserve space from first paint – reduces CLS when carousel appears */
}
/* CLS fix: when carousel is hidden (pre-load), keep same layout space so it doesn’t jump when shown */
body:not(.loaded) .homepage .games-section,
body:not(.loaded) #loading-overlay:not(.hidden) ~ .main-content .homepage .games-section {
min-height: 250px !important;
margin: 2rem 0 -1rem !important;
}
.homepage .games-section h2 {
font-size: 1.563rem !important; /* Match global h2 desktop (~25px) */
color: #022e4a !important;
margin: 0 0 0rem 0 !important;
word-wrap: break-word !important;
text-align: left !important;
box-sizing: border-box !important;
padding-left: 0.5rem !important; /* 1.5rem gap from page border - match carousel boxes */
}
/* Mobile: Match global h2 mobile size and align with 1.5rem gap */
@media (max-width: 767px) {
.homepage .games-section h2 {
font-size: 1.375rem !important; /* Match global h2 mobile (~22px) */
padding-left: 0.5rem !important; /* 1.5rem gap from page border - match carousel boxes */
}
}
.homepage .see-all-link,
.homepage h2 .see-all-link,
.homepage h2 a.see-all-link {
color: #00cc5a;
text-decoration: none;
font-weight: 600;
/* font-size: from global typography block – var(--fs-h2) */
}
.homepage .see-all-link:hover {
color: #00cc57;
}
/* Horizontal Scroll */
.homepage .horizontal-scroll-container {
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 0 !important;
margin: 0 !important;
overscroll-behavior-x: contain !important; /* Prevent scrolling past content */
}
.homepage .horizontal-scroll-container::-webkit-scrollbar {
display: none !important;
}
.homepage .games-scroll {
display: flex !important;
gap: 0.5rem !important;
cursor: grab !important;
width: max-content !important;
padding: 4px 8px !important;
box-sizing: border-box !important;
}
.homepage .games-scroll.active {
cursor: grabbing;
}
.homepage .game-item {
flex: 0 0 calc(66.67vw - 0.5rem) !important;
max-width: 280px !important;
min-width: 260px !important;
cursor: pointer !important;
transition: transform 0.2s !important;
box-shadow: 0 2px 8px rgba(2, 46, 74, 0.08), 0 1px 4px rgba(2, 46, 74, 0.05) !important; /* Shadow on all carousel boxes */
overflow: hidden !important;
}
/* Ensure box-shadow is always applied to homepage carousel boxes */
.homepage .horizontal-track .item,
.homepage .games-scroll .game-item,
.homepage .horizontal-track .game-item {
box-shadow: 0 4px 16px rgba(2, 46, 74, 0.12), 0 2px 8px rgba(2, 46, 74, 0.08) !important; /* Increased shadow intensity by ~15% for better depth */
}
.homepage .game-image {
position: relative !important;
width: 100% !important;
height: 160px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
background: #1a1f3f !important;
border: none !important; /* Remove any border */
border-bottom: none !important; /* Ensure no border-bottom */
margin-bottom: 0 !important; /* Remove any margin */
}
.homepage .game-image img {
width: 100%;
height: 100%;
object-fit: cover;
border: none !important; /* Remove any border */
display: block !important; /* Prevent inline spacing */
vertical-align: bottom !important; /* Remove baseline spacing */
}
.homepage .game-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.7));
padding: 0.5rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.homepage .bookmaker-logo img {
width: 30px;
height: auto;
border-radius: 4px;
}
.homepage .game-timer {
color: #00cc5a;
font-size: 0.8rem;
font-weight: 600;
background: rgba(0,0,0,0.5);
padding: 0.2rem 0.4rem;
border-radius: 4px;
}
.homepage .game-top-border {
padding: 0.5rem 0.75rem !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
min-height: 35px !important;
background: #ffffff !important; /* White background for better visibility */
border: none !important; /* Remove any border */
border-top: none !important; /* Ensure no border-top - seamless connection with image */
border-bottom: 1px solid #f0f0f0 !important; /* Only bottom border for separation */
margin-top: 0 !important; /* Remove any margin */
margin-bottom: 0 !important; /* Remove any margin */
}
.homepage .game-bookmaker-logo {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.homepage .game-bookmaker-logo img {
width: 70px !important;
height: auto !important;
max-height: 35px !important;
object-fit: contain !important;
}
.homepage .game-timer-text {
color: #00cc5a !important;
font-size: 14px !important;
font-weight: 700 !important;
text-align: right !important;
}
/* Offers Section - Clean like betting.bet */
.homepage .offers-section {
margin: 1rem 0 2rem 0 !important; /* Reduced top margin to bring closer to carousel */
width: 100% !important;
box-sizing: border-box !important;
}
.homepage .offers-section h2 {
font-size: 1.563rem !important; /* Match global h2 desktop (~25px) */
color: #022e4a !important;
margin-bottom: 1.5rem !important;
text-align: left !important;
word-wrap: break-word !important;
padding-right: 0 !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
box-sizing: border-box !important;
}
/* Desktop: Ensure offers section h2 aligns with games-section h2 */
@media (min-width: 920px) {
.homepage .offers-section h2 {
}
}
.homepage .offers-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 2rem !important;
padding: 4px 8px !important;
box-sizing: border-box !important;
}
.homepage .offer-category h2 {
color: #022e4a !important;
text-align: left !important;
word-wrap: break-word !important;
}
.homepage .offer-list {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
@media (max-width: 767px) {
.homepage .offer-item {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.75rem 0 !important;
border-bottom: 1px solid #e2e8f0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
transition: none !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
.homepage .offer-item:hover {
transform: none;
box-shadow: none;
background: rgba(0, 204, 90, 0.02);
}
.homepage .offer-brand img {
width: 93px !important;
height: 50px !important;
border-radius: 4px !important;
flex-shrink: 0 !important;
object-fit: contain !important;
}
.homepage .offer-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
min-width: 0 !important;
overflow: hidden !important;
}
.homepage .offer-header {
margin: 0;
}
.homepage .offer-header strong {
font-size: 0.85rem !important;
color: #022e4a !important;
font-weight: 700 !important;
word-wrap: break-word !important;
}
.homepage .offer-text {
font-weight: 600 !important;
color: #022e4a !important;
font-size: 0.8rem !important;
line-height: 1.3 !important;
word-wrap: break-word !important;
}
.homepage .offer-item {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.75rem 0 !important;
border-bottom: 1px solid #e2e8f0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
transition: none !important;
width: 100% !important;
box-sizing: border-box !important;
cursor: pointer !important;
}
/* MOBILE FIRST - Remove this 768px rule completely and move to 920px where it belongs */
.homepage .see-all-category {
display: block;
text-align: center;
color: #00cc5a;
text-decoration: none;
font-weight: 600;
/* font-size: from global typography block – var(--fs-h2) */
margin-top: 1rem;
padding: 0.5rem 0;
}
.homepage .see-all-category:hover {
color: #00cc57;
}
/* Why Betquest Section - DESKTOP ONLY */
.homepage .why-betquest-section {
display: none; /* Hidden by default, shown only on desktop */
margin: 3rem 0;
text-align: center;
}
.homepage .why-betquest-section h2 {
font-size: 20px !important;
color: #022e4a !important;
margin-bottom: 2rem !important;
}
.homepage .eeat-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-s);
padding: 0 0.5rem;
box-sizing: border-box;
}
.homepage .eeat-box {
padding: 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12);
transition: transform 0.2s;
}
.homepage .eeat-box:hover {
transform: translateY(-5px);
}
.homepage .eeat-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
.homepage .eeat-box h3 {
font-size: 16px !important;
color: #022e4a !important;
margin-bottom: 0.5rem !important;
}
.homepage .eeat-box p {
color: #4a5568 !important;
line-height: 1.5 !important;
font-size: 14px !important;
}
/* Blog Section – homepage, jackpot, blog-post page (Latest Analysis) same styling */
.homepage .blog-section,
.individual-competition-page .blog-section,
.jackpot-competitions-page .blog-section,
.daily-free-games-page .blog-section,
.betting-sites-page .blog-section,
.signup-offers-page .blog-section,
.no-wagering-page .blog-section,
.casino-bonus-page .blog-section,
.sports-offers-page .blog-section,
.blog-post-page .blog-section {
margin: 3rem 0;
}
/* Individual + Jackpot + Blog post: Latest Analysis same width (1100px desktop) */
@media (min-width: 920px) {
.individual-competition-page .blog-section,
.jackpot-competitions-page .blog-section,
.daily-free-games-page .blog-section,
.betting-sites-page .blog-section,
.signup-offers-page .blog-section,
.no-wagering-page .blog-section,
.casino-bonus-page .blog-section,
.sports-offers-page .blog-section,
.blog-post-page .blog-section {
max-width: 1100px !important;
margin: 3rem auto 2rem !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
width: 100%;
box-sizing: border-box;
}
}
.homepage .blog-section h2,
.individual-competition-page .blog-section h2,
.jackpot-competitions-page .blog-section h2,
.daily-free-games-page .blog-section h2,
.betting-sites-page .blog-section h2,
.signup-offers-page .blog-section h2,
.no-wagering-page .blog-section h2,
.casino-bonus-page .blog-section h2,
.sports-offers-page .blog-section h2,
.blog-post-page .blog-section h2 {
font-size: var(--fs-h2) !important;
color: #022e4a !important;
margin-bottom: 2rem !important;
text-align: center !important;
}
.homepage .blog-grid,
.individual-competition-page .blog-grid,
.jackpot-competitions-page .blog-grid,
.daily-free-games-page .blog-grid,
.betting-sites-page .blog-grid,
.signup-offers-page .blog-grid,
.no-wagering-page .blog-grid,
.casino-bonus-page .blog-grid,
.sports-offers-page .blog-grid,
.blog-post-page .blog-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
padding: 0 0.5rem;
box-sizing: border-box;
}
.homepage .blog-post,
.individual-competition-page .blog-post,
.jackpot-competitions-page .blog-post,
.daily-free-games-page .blog-post,
.betting-sites-page .blog-post,
.signup-offers-page .blog-post,
.no-wagering-page .blog-post,
.casino-bonus-page .blog-post,
.sports-offers-page .blog-post,
.blog-post-page .blog-post {
padding: 1.5rem;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12);
cursor: pointer;
transition: transform 0.2s;
}
.homepage .blog-post:hover,
.individual-competition-page .blog-post:hover,
.jackpot-competitions-page .blog-post:hover,
.daily-free-games-page .blog-post:hover,
.betting-sites-page .blog-post:hover,
.blog-post-page .blog-post:hover {
transform: translateY(-5px);
}
.homepage .blog-post h3,
.individual-competition-page .blog-post h3,
.jackpot-competitions-page .blog-post h3,
.daily-free-games-page .blog-post h3,
.betting-sites-page .blog-post h3,
.blog-post-page .blog-post h3 {
font-size: 16px !important;
color: #022e4a !important;
margin-bottom: 0.5rem !important;
}
.homepage .blog-post p,
.individual-competition-page .blog-post p,
.jackpot-competitions-page .blog-post p,
.daily-free-games-page .blog-post p,
.betting-sites-page .blog-post p,
.blog-post-page .blog-post p {
color: #4a5568 !important;
line-height: 1.5 !important;
font-size: 14px !important;
}
/* Blog post image: prominent height – same on homepage, jackpot, blog-post page (desktop + mobile) */
.homepage .blog-post .blog-post-image,
.individual-competition-page .blog-post .blog-post-image,
.jackpot-competitions-page .blog-post .blog-post-image,
.daily-free-games-page .blog-post .blog-post-image,
.betting-sites-page .blog-post .blog-post-image,
.blog-post-page .blog-post .blog-post-image {
height: 160px !important;
min-height: 160px !important;
overflow: hidden;
border-radius: 8px;
margin-bottom: 1rem;
}
.homepage .blog-post .blog-post-image img,
.individual-competition-page .blog-post .blog-post-image img,
.jackpot-competitions-page .blog-post .blog-post-image img,
.daily-free-games-page .blog-post .blog-post-image img,
.betting-sites-page .blog-post .blog-post-image img,
.blog-post-page .blog-post .blog-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.homepage .blog-link {
display: block;
text-align: center;
color: #00cc5a;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
}
.homepage .blog-link:hover {
color: #00cc57;
}
/* About Section */
.homepage .about-section {
margin: 3rem 0;
text-align: center;
padding: 0 0.5rem;
}
.homepage .about-section h2 {
font-size: var(--fs-h2) !important;
color: #022e4a !important;
margin-bottom: 2rem !important;
}
.homepage .about-content {
max-width: 600px;
margin: 0 auto;
}
.homepage .about-content p {
font-size: 16px !important;
line-height: 1.6 !important;
color: #4a5568 !important;
margin-bottom: 1.5rem !important;
}
.homepage .about-link {
display: inline-block;
color: #00cc5a;
text-decoration: none;
font-weight: 600;
/* font-size: from typography block – var(--fs-h2) */
padding: 0.75rem 1.5rem;
border: 2px solid #00cc5a;
border-radius: 8px;
transition: all 0.2s;
}
.homepage .about-link:hover {
background: #00cc5a;
color: #ffffff;
}
/* Responsive Design */
/* Tablet (768-919px) ONLY grows mobile sizes, NO card styles */
/* 920px+ takes precedence over 1024px for homepage only */
/* This section removed - using 920px+ layout instead */
@media (max-width: 767px) {
.homepage .desktop-only {
display: none !important;
}
/* Spacing system: Use gap-based layout on homepage-container (critical CSS duplicates this to prevent CLS) */
.homepage .homepage-container {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important; /* 1rem between sections */
}
/* Hero section: 1rem gap after hero to first section - MUST override all other hero-section rules */
body.homepage .hero-section,
.homepage .hero-section,
body.homepage .main-content .hero-section {
margin-bottom: var(--space-block) !important; /* 1rem gap after hero to first section */
margin-top: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.homepage .hero-title {
font-size: 2rem;
}
.homepage .hero-subtitle {
font-size: 1rem;
}
.homepage .section-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.homepage .website-blurb {
margin: 0.5rem 0 0 0 !important; /* Remove bottom margin - gap handles spacing */
padding: 1.5rem;
}
/* Games section: flex column + 1rem gap between header and carousel (spacing system) */
/* Keep breakout margins for carousel shadow visibility */
.homepage .games-section {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: -1rem !important; /* Breakout for carousel shadows */
margin-right: -1rem !important; /* Breakout for carousel shadows */
}
/* Games section header: Remove bottom margin - gap handles spacing */
.homepage .games-section h2 {
margin-bottom: 0 !important;
}
/* ===== HOMEPAGE OFFERS SPACING RESET (mobile only) ===== */
/* Zero ALL old padding/margin so ONLY gap system applies. 1rem = header to first offer. */
/* Left/right padding matches carousel track (1.5rem) so headers and offers align. */
.homepage .offers-section {
margin: 0 !important;
padding: 0 0.5rem !important;
}
.homepage .offers-section h2,
.homepage .offer-category h2 {
margin: 0 !important;
padding: 0 !important;
}
.homepage .offers-grid {
padding: 0 !important;
gap: var(--space-section) !important; /* 2rem between offer-category blocks (See all → next header) */
}
.homepage .offer-category {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important; /* 1rem between h2, list, see-all-link */
margin: 0 !important;
padding: 0 !important;
}
.homepage .offer-list,
.homepage #no-wagering-offers,
.homepage #sports-offers,
.homepage #casino-bonus-offers,
.homepage #no-deposit-offers {
margin: 0 !important;
padding: 0 !important;
gap: var(--space-inline) !important; /* 0.75rem between offers; parent gap = header to list */
}
.homepage .see-all-category {
margin: 0 !important;
padding: 0 !important;
}
.homepage .why-betquest-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.homepage .blog-section,
.individual-competition-page .blog-section,
.jackpot-competitions-page .blog-section,
.daily-free-games-page .blog-section,
.blog-post-page .blog-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.homepage .about-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ===== HOMEPAGE BLOG & ABOUT SPACING RESET (mobile only) ===== */
.homepage .blog-section {
margin: 0 !important;
padding: 0 0.5rem !important;
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
}
.homepage .blog-section h2 {
margin: 0 !important;
padding: 0 !important;
}
.homepage .blog-grid {
margin: 0 !important;
padding: 0 !important;
gap: var(--space-block) !important;
}
.homepage .about-section {
margin: 0 !important;
padding: 0 0.5rem !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* Centre block on page */
gap: var(--space-block) !important;
}
.homepage .about-section h2 {
margin: 0 !important;
padding: 0 !important;
}
.homepage .about-content {
max-width: 600px !important;
margin: 0 auto !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: var(--space-s) !important;
}
.homepage .about-content p {
margin: 0 !important;
}
/* Section boundary: 2rem after "See all" / end of section (container gap 1rem + margin-top 1rem) */
.homepage .offers-section + .games-section {
margin-top: var(--space-block) !important; /* 1rem + 1rem gap = 2rem to Daily Games carousel header */
}
.homepage .offers-section + .blog-section {
margin-top: var(--space-block) !important; /* 1rem + 1rem gap = 2rem to Latest Blog Posts header */
}
.homepage .why-betquest-section + .about-section {
margin-top: var(--space-block) !important; /* 1rem + 1rem gap = 2rem to About Betquest header (why-betquest hidden on mobile) */
}
}
/* Desktop/Tablet Centered Layout (768px+) - CRITICAL DEFAULTS */
/* REMOVED: This block was causing desktop styles to trigger at 768px instead of 920px */
/* MOBILE-FIRST tablet (768px-919px) - Same spacing system as mobile */
@media (min-width: 768px) and (max-width: 919px) {
body.homepage .hero-section,
.homepage .hero-section {
margin-bottom: var(--space-block) !important;
}
.homepage .homepage-container {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
}
.homepage .games-section,
.homepage .offers-section,
.homepage .blog-section,
.homepage .why-betquest-section,
.homepage .about-section {
margin: 0 !important;
}
.homepage .games-section {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
}
.homepage .games-section h2 {
margin-bottom: 0 !important;
}
.homepage .offers-section { padding: 0 1rem !important; }
.homepage .offers-section h2,
.homepage .offer-category h2 { margin: 0 !important; padding: 0 !important; }
.homepage .offers-grid {
display: grid !important;
grid-template-columns: repeat(1, 1fr) !important;
gap: var(--space-section) !important;
padding: 0 !important;
width: 100%;
}
.homepage .offer-category {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
margin: 0 !important;
padding: 0 !important;
}
.homepage .offer-list,
.homepage .see-all-category { margin: 0 !important; padding: 0 !important; }
.homepage .offer-list { gap: var(--space-inline) !important; }
.homepage .blog-section {
padding: 0 1rem !important;
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
}
.homepage .blog-section h2,
.homepage .blog-grid { margin: 0 !important; padding: 0 !important; }
.homepage .blog-grid { gap: var(--space-block) !important; }
.homepage .about-section {
padding: 0 0.5rem !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* Centre block on page */
gap: var(--space-block) !important;
text-align: center !important;
}
.homepage .about-section h2,
.homepage .about-content,
.homepage .about-content p { margin: 0 !important; padding: 0 !important; }
.homepage .about-content {
max-width: 600px !important;
margin-left: auto !important;
margin-right: auto !important;
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
text-align: center !important;
}
.homepage .offers-section + .games-section,
.homepage .offers-section + .blog-section,
.homepage .why-betquest-section + .about-section {
margin-top: var(--space-block) !important;
}
/* Font scaling */
.homepage .hero-title { font-size: 3.8rem; }
.homepage .hero-subtitle { font-size: 1.5rem; }
.homepage .offer-list {
display: flex;
flex-direction: column;
}
/* SCALED PROGRESSION: MOBILE LIST remains mobile list, scaled to larger tablet screen space */
.homepage .offer-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0;
border-bottom: 1px solid #e2e8f0;
background: none;
box-shadow: none;
border-radius: 0;
transition: none;
width: 100%;
}
.homepage .offer-brand img {
width: 70px;
height: 70px;
object-fit: contain;
border-radius: 4px;
}
.homepage .offer-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* KEEP MOBILE BEHAVIOR/scroll for games */
.homepage .horizontal-scroll-container {
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.homepage .horizontal-track {
display: flex !important;
flex-wrap: nowrap !important;
gap: 7px !important;
overflow: auto !important;
margin-left: 0 !important; /* Removed negative margin - parent .games-section handles padding */
margin-right: 0 !important; /* Removed negative margin - carousels should disappear against border */
padding-left: 0 !important; /* Parent .games-section already has left padding */
padding-right: 0 !important; /* Carousels should disappear against page border */
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-snap-type: x mandatory !important;
scroll-padding: 0 !important; /* Remove padding to ensure boxes snap fully out of view */
}
.homepage .games-scroll {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0.75rem !important;
cursor: grab !important;
width: max-content !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-padding: 0 !important; /* Remove padding to ensure boxes snap fully out of view */
}
.homepage .carousel-track {
display: flex !important;
gap: 7px !important;
width: max-content !important;
}
.homepage .game-item {
flex: 0 0 calc(66.67vw - 0.5rem) !important;
max-width: 280px !important;
min-width: 260px !important;
display: flex !important;
flex-direction: column !important;
scroll-snap-align: start !important;
}
.homepage .game-image {
height: 160px !important; /* Mobile: base rule with !important wins, so 160px (not 150px) */
}
/* SCALED MOBILE grids with more gaps */
.homepage .eeat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
margin: 2.5rem 0;
}
.homepage .blog-grid,
.individual-competition-page .blog-grid,
.jackpot-competitions-page .blog-grid,
.daily-free-games-page .blog-grid,
.blog-post-page .blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
margin: 2.5rem 0;
}
}
/* CRITICAL: Force scrolling between 768-919px - MUST override any grid rules */
@media (min-width: 768px) and (max-width: 919px) {
.homepage .horizontal-scroll-container,
.individual-competition-page .horizontal-scroll-container {
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
width: 100% !important;
}
.homepage .horizontal-track,
.individual-competition-page .horizontal-track {
display: flex !important;
flex-wrap: nowrap !important;
gap: 7px !important;
overflow: auto !important;
margin-left: 0 !important; /* Removed negative margin - parent .games-section handles padding */
margin-right: 0 !important; /* Removed negative margin - carousels should disappear against border */
padding-left: 0 !important; /* Parent .games-section already has left padding */
padding-right: 0 !important; /* Carousels should disappear against page border */
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-snap-type: x mandatory !important;
width: auto !important;
}
.homepage .games-scroll,
.individual-competition-page .games-scroll {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 7px !important;
cursor: grab !important;
width: max-content !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.homepage .carousel-track,
.individual-competition-page .carousel-track {
display: flex !important;
gap: 7px !important;
width: max-content !important;
}
.homepage .game-item,
.individual-competition-page .game-item {
flex: 0 0 calc(66.67vw - 0.5rem) !important;
max-width: 280px !important;
min-width: 260px !important;
display: flex !important;
flex-direction: column !important;
scroll-snap-align: start !important;
width: auto !important;
}
}
/* Desktop layout (920px+) - full desktop layout implementation */
@media (min-width: 920px) {
body.homepage .hero-section,
.homepage .hero-section {
margin-bottom: var(--space-block) !important;
}
.homepage .why-betquest-section {
display: block;
}
/* Spacing system: same as mobile/tablet */
.homepage .homepage-container {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 1.5rem !important;
}
.homepage .games-section,
.homepage .offers-section,
.homepage .blog-section,
.homepage .why-betquest-section,
.homepage .about-section {
margin: 0 !important;
}
.homepage .offers-section + .games-section,
.homepage .offers-section + .blog-section,
.homepage .why-betquest-section + .about-section {
margin-top: var(--space-block) !important;
}
.homepage .games-section {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
}
.homepage .games-section h2 {
margin: 0 !important;
padding-left: 0 !important;
}
/* Desktop carousel - 4 games visible (920px+) - NO SCROLL, use grid */
/* Applies to both homepage and individual-competition-page */
.homepage .horizontal-scroll-container,
.individual-competition-page .horizontal-scroll-container {
overflow: hidden !important;
width: 100% !important;
display: block !important;
}
.homepage .horizontal-track,
.individual-competition-page .horizontal-track {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important; /* 4 games on desktop */
gap: 7px !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.homepage .games-scroll,
.individual-competition-page .games-scroll {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important; /* 4 games on desktop */
gap: 7px !important;
width: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.homepage .carousel-track,
.individual-competition-page .carousel-track {
display: contents !important;
}
.homepage .game-item {
width: 100% !important;
cursor: pointer !important;
transition: transform 0.2s !important;
box-shadow: none !important;
border-radius: 8px !important;
overflow: hidden !important;
display: block !important;
}
/* Individual competition page: Add box-shadow on desktop to match homepage */
.individual-competition-page .game-item,
.carousel-wrapper .game-item {
width: 100% !important;
cursor: pointer !important;
transition: transform 0.2s !important;
box-shadow: 0 4px 16px rgba(2, 46, 74, 0.12), 0 2px 8px rgba(2, 46, 74, 0.08) !important; /* Match homepage shadow */
border-radius: 8px !important;
overflow: hidden !important;
display: block !important;
}
/* 4 games visible (1150px+) - NO SCROLL */
@media (min-width: 1150px) {
.homepage .games-scroll,
.individual-competition-page .games-scroll {
grid-template-columns: repeat(4, 1fr) !important;
}
}
.homepage .game-item.fade-out {
opacity: 0 !important;
}
.homepage .game-item[style*="display: none"] {
display: none !important;
}
@media (hover: hover) {
.homepage .game-item:hover .game-top-border {
background: rgba(0, 204, 90, 0.05) !important;
box-shadow: 0 0 8px rgba(0, 204, 90, 0.2) !important;
}
}
.homepage .game-image {
position: relative !important;
width: 100% !important;
height: 160px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
background: #1a1f3f !important;
}
/* Desktop offers layout - EXACT match to games-section width */
.homepage .offers-section {
width: 100% !important;
padding-left: 0 !important; /* EXACT match to games-section - no padding */
padding-right: 0 !important; /* EXACT match to games-section - no padding */
box-sizing: border-box !important;
}
.homepage .offers-grid {
display: flex !important;
flex-direction: column !important;
gap: var(--space-section) !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.homepage .offer-category {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.homepage .offer-category h2 {
margin: 0 !important;
padding: 0 !important;
color: #022e4a !important;
text-align: left !important;
}
.homepage .offer-list {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--space-inline) !important;
}
/* Desktop: Align offers section h2 with games-section h2 - EXACT match */
.homepage .offers-section h2 {
padding-right: 0 !important;
}
.homepage .offer-item {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.75rem 0 !important;
border-bottom: 1px solid #e2e8f0 !important;
background: none !important;
box-shadow: none !important;
border-radius: 0 !important;
cursor: pointer !important;
transition: background 0.2s !important;
}
.homepage .offer-item:hover {
background: rgba(0, 204, 90, 0.02) !important;
transform: none !important;
box-shadow: none !important;
}
.homepage .offer-brand {
flex-shrink: 0 !important;
}
.homepage .offer-brand img {
height: 50px !important;
object-fit: contain !important;
border-radius: 4px !important;
}
.homepage .offer-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
}
.homepage .offer-header strong {
font-size: 1rem !important;
font-weight: 600 !important;
color: #022e4a !important;
}
.homepage .offer-text {
font-size: 0.9rem !important;
color: #4a5568 !important;
line-height: 1.4 !important;
}
/* Text section styling – margin 0 so container gap handles spacing */
.homepage .why-betquest-section,
.homepage .blog-section,
.homepage .about-section {
background: rgba(255, 255, 255, 0.05) !important;
padding: 2rem !important;
margin: 0 !important;
border-radius: 8px !important;
box-shadow: none !important;
text-align: center !important;
}
.homepage .eeat-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: var(--space-block) !important;
margin: 0 !important;
}
.homepage .eeat-box {
padding: 1.5rem !important;
text-align: center !important;
transition: transform 0.2s, opacity 0.5s !important;
}
.homepage .eeat-box:hover {
transform: translateY(-5px) !important;
}
.homepage .blog-grid,
.individual-competition-page .blog-grid,
.jackpot-competitions-page .blog-grid,
.daily-free-games-page .blog-grid,
.blog-post-page .blog-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 1.5rem !important;
margin: 2rem 0 !important;
}
.homepage .blog-post,
.individual-competition-page .blog-post,
.jackpot-competitions-page .blog-post,
.daily-free-games-page .blog-post,
.blog-post-page .blog-post {
padding: 1.5rem !important;
transition: transform 0.2s, opacity 0.5s !important;
}
.homepage .blog-post:hover,
.individual-competition-page .blog-post:hover,
.jackpot-competitions-page .blog-post:hover,
.daily-free-games-page .blog-post:hover,
.blog-post-page .blog-post:hover {
transform: translateY(-5px) !important;
}
}
/* Mobile: Keep horizontal scroll for games */
/* Applies to both homepage and individual-competition-page */
@media (max-width: 919px) {
.homepage .horizontal-track,
.individual-competition-page .horizontal-track {
display: flex !important;
flex-wrap: nowrap !important;
gap: 7px !important;
overflow: auto !important; /* Track scrolls on mobile - betting.bets style */
margin-left: 0 !important; /* Removed negative margin - parent .games-section handles padding */
margin-right: 0 !important; /* Removed negative margin - carousels should disappear against border */
padding-left: 0 !important; /* Parent .games-section already has left padding */
padding-right: 0 !important; /* Carousels should disappear against page border */
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-snap-type: x mandatory !important;
}
.homepage .games-scroll,
.individual-competition-page .games-scroll {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 7px !important;
cursor: grab !important;
width: max-content !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.homepage .carousel-track,
.individual-competition-page .carousel-track {
display: flex !important;
gap: 7px !important;
width: max-content !important;
}
.homepage .game-item,
.individual-competition-page .game-item {
flex: 0 0 calc(66.67vw - 0.5rem) !important;
max-width: 280px !important;
min-width: 260px !important;
display: flex !important;
flex-direction: column !important;
scroll-snap-align: start !important;
}
}
/* Scale box sizes from 1024px to 1150px (desktop grid only – 768–1023 use mobile carousel) */
@media (min-width: 1024px) and (max-width: 1150px) {
.homepage .game-item {
min-width: 0 !important;
max-width: none !important;
background: #ffffff !important; /* Match game-top-border to prevent line showing through */
}
.homepage .game-image {
height: clamp(140px, calc(140px + (160 - 140) * ((100vw - 1024px) / (1150 - 1024))), 160px) !important;
}
.homepage .game-bookmaker-logo img {
width: clamp(60px, calc(60px + (70 - 60) * ((100vw - 1024px) / (1150 - 1024))), 70px) !important;
max-height: clamp(30px, calc(30px + (35 - 30) * ((100vw - 1024px) / (1150 - 1024))), 35px) !important;
}
.homepage .game-timer-text {
font-size: clamp(12px, calc(12px + (14 - 12) * ((100vw - 1024px) / (1150 - 1024))), 14px) !important;
}
/* game-top-border: Match game-item dimensions - ensure perfect vertical centering */
.homepage .game-top-border {
width: 100% !important; /* Match game-item width */
padding-top: clamp(0.4rem, calc(0.4rem + (0.5 - 0.4) * ((100vw - 1024px) / (1150 - 1024))), 0.5rem) !important;
padding-bottom: clamp(0.4rem, calc(0.4rem + (0.5 - 0.4) * ((100vw - 1024px) / (1150 - 1024))), 0.5rem) !important; /* Equal top/bottom for vertical centering */
padding-left: clamp(0.6rem, calc(0.6rem + (0.75 - 0.6) * ((100vw - 1024px) / (1150 - 1024))), 0.75rem) !important;
padding-right: clamp(0.6rem, calc(0.6rem + (0.75 - 0.6) * ((100vw - 1024px) / (1150 - 1024))), 0.75rem) !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important; /* Vertically center logo and timer */
min-height: clamp(30px, calc(30px + (35 - 30) * ((100vw - 1024px) / (1150 - 1024))), 35px) !important;
background: #ffffff !important;
border: none !important;
border-top: none !important;
border-bottom: none !important; /* REMOVED to eliminate line */
margin-top: 0 !important;
margin-bottom: 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
/* Ensure logo and timer have no extra spacing that breaks centering */
.homepage .game-bookmaker-logo,
.homepage .game-timer-text {
margin-top: 0 !important;
margin-bottom: 0 !important;
line-height: 1 !important; /* Remove line-height spacing */
display: flex !important;
align-items: center !important;
}
}
.homepage .offer-terms {
font-size: 0.7rem !important;
color: #666 !important;
font-weight: bold !important;
text-align: center !important;
margin-top: 0.25rem !important;
}
/* Increased green hover intensity for offers and carousel boxes */
@media (hover: hover) {
.homepage .offer-item:hover {
background: rgba(0, 204, 90, 0.08) !important;
}
.homepage .game-item:hover .game-top-border {
background: rgba(0, 204, 90, 0.08) !important;
box-shadow: 0 0 12px rgba(0, 204, 90, 0.3) !important;
}
}
/* Fix offer alignment - logo stays aligned with bookmaker name */
.homepage .offer-item {
align-items: flex-start !important;
}
.homepage .offer-brand {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
flex-shrink: 0 !important;
}
.homepage .offer-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
.homepage .offer-header {
margin-bottom: 0.25rem !important;
}
/* New Hero Section Design – reduced height (240px desktop, 220px mobile), map image taller and flush bottom */
.homepage .hero-section,
body.homepage .main-content .hero-section,
body.homepage .hero-section {
background: linear-gradient(135deg, #022e4a 0%, #004d7a 100%) !important;
color: white !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
position: relative !important;
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
/* Desktop: slightly reduced fixed height – map image fills and flush bottom */
height: 240px !important;
max-height: 240px !important;
min-height: 240px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.homepage .hero-content {
display: flex !important;
align-items: flex-start !important;
gap: 0 !important; /* Removed 2rem - was causing excess gap between hero title and betquest map on mobile */
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
}
/* Desktop: centre title + subtitle vertically (equidistant from top and bottom); map stays at bottom */
.homepage .hero-text {
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
margin-top: -1.5rem !important; /* Move hero-text up slightly */
}
.homepage .hero-title {
display: flex !important;
flex-direction: column !important;
margin-top: 3rem !important;
color: white !important;
text-transform: uppercase !important;
width: 100% !important;
line-height: 1.1 !important;
text-align: left !important; /* Ensure left alignment */
}
/* Homepage hero base styles - mobile only (below 768px) */
@media (max-width: 767px) {
.homepage .hero-title-line1 {
font-size: 1.5rem !important; /* Base size - mobile */
font-weight: 900 !important; /* Black weight */
display: block !important;
text-align: left !important;
letter-spacing: 0 !important; /* Prevent letter spacing from affecting alignment */
}
.homepage .hero-title-line2 {
font-size: 3.25rem !important; /* Base size - mobile */
font-weight: 900 !important; /* Black weight */
display: block !important;
line-height: 1 !important;
text-align: left !important;
letter-spacing: 0 !important; /* Prevent letter spacing from affecting alignment */
margin-top: 0 !important; /* Let gap handle spacing */
margin-left: -0.02em !important; /* Move left slightly to align P's perfectly */
}
.homepage .hero-subtitle {
display: block !important;
font-size: 1rem !important;
line-height: 1.4 !important;
color: rgba(255, 255, 255, 0.9) !important;
margin: 0 !important;
width: 100% !important;
font-weight: 700 !important; /* Bold subtitle */
max-width: fit-content !important; /* Allow natural width below 920px */
}
}
/* Desktop base - will be overridden by specific breakpoints */
.homepage .hero-title-line1 {
font-weight: 900 !important;
display: block !important;
text-align: left !important;
letter-spacing: 0 !important;
}
.homepage .hero-title-line2 {
font-weight: 900 !important;
display: block !important;
line-height: 1 !important;
text-align: left !important;
letter-spacing: 0 !important;
margin-top: 0 !important;
margin-left: -0.02em !important;
}
.homepage .hero-subtitle {
display: block !important;
line-height: 1.4 !important;
color: rgba(255, 255, 255, 0.9) !important;
margin: 0 !important;
width: 100% !important;
font-weight: 700 !important;
}
/* Homepage: Adjust title between 768px and 919px */
@media (min-width: 768px) and (max-width: 919px) {
.homepage .hero-title-line1 {
font-size: 24px !important;
}
.homepage .hero-title-line2 {
font-size: 48px !important;
}
.homepage .hero-subtitle {
font-size: 16px !important;
max-width: 24rem !important; /* Constrain to width of "YOU'RE HERE" at 3.5rem - forces wrapping to 2 lines */
}
}
/* Homepage: 920px to 1023px – title sizes and subtitle */
@media (min-width: 920px) and (max-width: 1023px) {
.homepage .hero-content {
gap: 0 !important;
align-items: stretch !important;
height: 100% !important;
position: relative !important;
}
/* Hero text: centred vertically = halfway up visible hero height */
.homepage .hero-text {
flex: 0 0 auto !important;
display: block !important;
position: relative !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 !important;
}
.homepage .hero-title {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 920-1023px: Fixed title + subtitle sizes - NO VAR LOGIC */
.homepage .hero-title-line1 {
font-size: 32px !important;
}
.homepage .hero-title-line2 {
font-size: 64px !important;
}
.homepage .hero-title {
max-width: 560px !important;
}
.homepage .hero-subtitle {
max-width: none !important;
font-size: 16px !important;
}
/* Reduce What is Betquest box height to match title/subtitle block */
.homepage .hero-info-box {
padding: 1rem !important;
flex: 0 0 280px !important;
}
.homepage .hero-info-box h2 {
font-size: 1rem !important;
margin-bottom: 0.5rem !important;
}
.homepage .hero-info-box p {
font-size: 0.8rem !important;
line-height: 1.3 !important;
}
}
/* Homepage: 1024px+ – title sizes same, subtitle increases to 20px */
@media (min-width: 1024px) {
.homepage .hero-content {
gap: 0 !important;
align-items: stretch !important;
height: 100% !important;
position: relative !important;
}
/* Hero text: centred vertically = halfway up visible hero height */
.homepage .hero-text {
flex: 0 0 auto !important;
display: block !important;
position: relative !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 !important;
}
.homepage .hero-title {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 1024px+: Fixed title sizes - NO VAR LOGIC */
.homepage .hero-title-line1 {
font-size: 32px !important;
}
.homepage .hero-title-line2 {
font-size: 64px !important;
}
.homepage .hero-title {
max-width: 560px !important;
}
.homepage .hero-subtitle {
max-width: none !important;
font-size: 20px !important;
}
/* Reduce What is Betquest box height to match title/subtitle block */
.homepage .hero-info-box {
padding: 1rem !important;
flex: 0 0 280px !important;
}
.homepage .hero-info-box h2 {
font-size: 1rem !important;
margin-bottom: 0.5rem !important;
}
.homepage .hero-info-box p {
font-size: 0.8rem !important;
line-height: 1.3 !important;
}
}
/* Homepage: 920px+ desktop – title centred at 50% height; map shift via transform */
@media (min-width: 920px) {
/* Betquest map – 240px, bottom flush; further right (20px) above 920; min gap so never touches text */
.homepage .hero-map-image,
body.homepage .hero-section .hero-map-image {
width: auto !important;
height: 240px !important;
min-height: 240px !important;
max-height: 240px !important;
max-width: 340px !important;
object-fit: contain !important;
object-position: bottom center !important;
flex-shrink: 0 !important;
align-self: flex-end !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: var(--homepage-hero-map-min-gap-desktop) !important;
transform: translateX(80px) !important;
position: relative;
}
/* Oval shadow on the floor where the feet are */
.homepage .hero-map-image::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 220px;
height: 45px;
background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.2) 70%, transparent 100%);
border-radius: 50%;
z-index: -1;
pointer-events: none;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
}
/* Large Desktop - 1200px+ (map stays close to title, no push right) */
@media (min-width: 1100px) {
/* Adjust shadow position for large desktop */
.homepage .hero-map-image::after {
width: 240px;
height: 50px;
bottom: -14px;
}
}
.homepage .hero-info-box {
background: rgba(0, 204, 90, 0.15) !important;
border: 2px solid rgba(0, 204, 90, 0.3) !important;
border-radius: 8px !important;
padding: 1.5rem !important;
flex: 0 0 300px !important;
backdrop-filter: blur(10px) !important;
}
.homepage .hero-info-box h2 {
color: #00cc5a !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
margin-bottom: 0.75rem !important;
text-align: center !important;
}
.homepage .hero-info-box p {
color: white !important;
font-size: 0.9rem !important;
line-height: 1.4 !important;
margin: 0 !important;
text-align: center !important;
}
/* Mobile Hero Section */
@media (max-width: 767px) {
.homepage .hero-section,
body.homepage .main-content .hero-section,
body.homepage .hero-section {
padding: 0 !important;
height: auto !important;
min-height: 280px !important;
max-height: none !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
margin-bottom: var(--space-block) !important; /* 1rem gap after hero to first section */
margin-top: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.homepage .hero-content {
flex-direction: column !important;
gap: 0.75rem !important;
padding: 0.75rem 1rem 0 !important;
align-items: stretch !important;
padding-bottom: 0 !important;
flex: 1 !important;
min-height: 0 !important;
}
.homepage .hero-text {
align-items: flex-start !important;
width: 100% !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
}
.homepage .hero-title {
align-items: flex-start !important;
width: 100% !important;
}
.homepage .hero-title-line1 {
font-size: 1.5rem !important;
text-align: left !important;
}
.homepage .hero-title-line2 {
font-size: 3rem !important;
text-align: left !important;
}
.homepage .hero-subtitle {
font-size: 1rem !important;
font-weight: 700 !important;
text-align: left !important;
max-width: 22rem !important;
}
/* Image: size = --homepage-hero-map-height-mobile; centred at bottom until 768 */
.homepage .hero-map-image.desktop-only,
body.homepage .hero-section .hero-map-image.desktop-only {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: var(--homepage-hero-map-height-mobile) !important;
min-height: var(--homepage-hero-map-height-mobile) !important;
max-height: var(--homepage-hero-map-height-mobile) !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: auto !important;
margin-bottom: 0 !important;
object-fit: contain !important;
object-position: bottom center !important;
flex-shrink: 0 !important;
}
/* Adjust shadow for mobile */
.homepage .hero-map-image.desktop-only::after {
width: 200px;
height: 40px;
bottom: -10px;
}
.homepage .hero-info-box {
flex: none !important;
width: 100% !important;
padding: 1rem !important;
}
.homepage .hero-info-box h2 {
font-size: 1.1rem !important;
}
.homepage .hero-info-box p {
font-size: 0.8rem !important;
}
}
/* Small Desktop – hero 240px; title centred at 50% height; map shifted left via transform */
@media (min-width: 768px) and (max-width: 919px) {
.homepage .hero-section,
body.homepage .main-content .hero-section,
body.homepage .hero-section {
padding: 0 !important;
height: 240px !important;
max-height: 240px !important;
min-height: 240px !important;
overflow: hidden !important;
}
.homepage .hero-content {
flex-direction: row !important;
gap: 0 !important;
padding: 0 1.5rem 0 !important;
align-items: stretch !important;
height: 100% !important;
position: relative !important;
}
/* Hero text: centred vertically = halfway up visible hero height (top 50% + translateY -50%) */
.homepage .hero-text {
flex: 0 0 auto !important;
display: block !important;
position: relative !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 !important;
}
.homepage .hero-title {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 768–919: hero text 24px / 48px / 16px */
.homepage .hero-title-line1 {
font-size: 24px !important;
}
.homepage .hero-title-line2 {
font-size: 48px !important;
}
.homepage .hero-subtitle {
display: block !important;
font-size: 16px !important;
}
/* Map: slightly further right (5px); min gap so never touches hero text */
.homepage .hero-map-image.desktop-only {
align-self: flex-end !important;
margin-bottom: 0 !important;
margin-left: var(--homepage-hero-map-min-gap-desktop) !important;
transform: translateX(5px) !important;
display: block !important;
}
.homepage .hero-info-box {
flex: 0 0 280px !important;
padding: 1.25rem !important;
}
.homepage .hero-info-box h2 {
font-size: 1.15rem !important;
}
.homepage .hero-info-box p {
font-size: 0.85rem !important;
}
/* Medium screens – image 240px, bottom flush; 5px right; min gap so never touches text */
.homepage .hero-map-image,
body.homepage .hero-section .hero-map-image {
width: auto !important;
height: 240px !important;
min-height: 240px !important;
max-height: 240px !important;
max-width: 320px !important;
object-fit: contain !important;
object-position: bottom center !important;
flex-shrink: 0 !important;
align-self: flex-end !important;
display: block !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: var(--homepage-hero-map-min-gap-desktop) !important;
transform: translateX(5px) !important;
}
/* Adjust shadow for medium screens */
.homepage .hero-map-image::after {
width: 210px;
height: 42px;
bottom: -11px;
}
}
/* Mobile offer alignment fix */
@media (max-width: 767px) {
.homepage .offer-item {
align-items: flex-start !important;
}
.homepage .offer-brand {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
flex-shrink: 0 !important;
}
.homepage .offer-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
.homepage .offer-header {
margin-bottom: 0.25rem !important;
}
/* Center timer on mobile jackpot games carousel */
/* Mobile: Logo left, timer right (like individual pages) */
.homepage .game-top-border {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-direction: row !important;
}
.homepage .game-bookmaker-logo {
display: flex !important;
order: 1 !important;
}
.homepage .game-timer-text {
text-align: right !important;
order: 2 !important;
}
}
/* Typography Hierarchy: "Hierarchy of Three" - Major Third Scale
Base (Body): 1rem (16px)
h3: 1.25rem (20px) - Ensures h3 is always the "Boss" of content below
h2: 1.563rem (25px)
h1: 1.953rem (31px)
*/
/* Desktop Typography Scale */
h1 {
font-size: 1.953rem !important; /* ~31px */
line-height: 1.3;
}
h2 {
font-size: 1.563rem !important; /* ~25px */
line-height: 1.3;
}
h3 {
font-size: 1.25rem !important; /* ~20px - Always larger than body (1rem) */
line-height: 1.3;
}
/* Mobile Typography Scale - Maintain hierarchy but scale appropriately */
@media (max-width: 767px) {
h1 {
font-size: 1.75rem !important; /* ~28px mobile */
}
h2 {
font-size: 1.375rem !important; /* ~22px mobile - Still larger than h3 */
}
h3 {
font-size: 1.125rem !important; /* ~18px mobile - Still larger than body (1rem) */
}
/* Override section-title h2 */
.section-title h2 {
font-size: 1.375rem !important; /* Match base h2 size */
}
/* content-section h2: use canonical var(--fs-h2) */
.content-section h2 {
font-size: var(--fs-h2) !important;
}
/* Override homepage games-section h2 */
.homepage .games-section h2 {
font-size: 1.375rem !important; /* Match base h2 size */
}
/* MOBILE CAROUSEL SHADOW BLEED FIX - Industry Standard "Full-Width Bleed" Technique
Objective: 10/10 Premium Fidelity - Shadows visible on all sides like desktop */
/* 1. The Container: Allow shadows to exist outside the bounds */
.homepage .games-section {
margin-top: 0 !important; /* Gap system handles spacing */
margin-left: -1rem !important; /* Match .container padding exactly - break out on left */
margin-right: -1rem !important; /* Allow bleed on right side too */
margin-bottom: 0 !important; /* Gap system handles spacing */
width: calc(100% + 2rem) !important; /* Compensate for both margins */
overflow: visible !important; /* The 'Secret Sauce' for shadows - allows bleed */
-webkit-overflow-scrolling: touch !important;
padding-left: 0 !important; /* Remove padding - track handles it */
padding-right: 0 !important; /* Remove padding - track handles it */
padding-top: 0 !important; /* Remove padding - track handles it */
padding-bottom: 0 !important; /* Remove padding - track handles it */
}
/* 2. The Track: Re-align the content while keeping the container wide */
.homepage .games-section .horizontal-track {
display: flex !important;
overflow-x: auto !important;
overflow-y: visible !important; /* Ensure top/bottom shadows aren't clipped */
padding-left: 0.5rem !important; /* 0.5rem carousel left inset – equal spacing each side */
padding-right: 1.5rem !important; /* Symmetric padding for end alignment */
padding-top: 15px !important; /* Breathability for top shadows */
padding-bottom: 15px !important; /* Breathability for bottom shadows */
margin-bottom: 0 !important;
scrollbar-width: none !important; /* Hide scrollbar for cleaner look */
-ms-overflow-style: none !important;
scroll-snap-type: x mandatory !important; /* Enable scroll snapping */
scroll-padding-left: 0.5rem !important; /* Snap so first card aligns with 0.5rem inset */
}
.homepage .games-section .horizontal-track::-webkit-scrollbar {
display: none !important; /* Safari/Chrome hide scrollbar */
}
/* 3. Swiper carousels - same treatment */
.swiper-jackpot,
.swiper-daily {
margin-left: -1rem !important; /* Break out of container padding */
margin-right: -1rem !important; /* Break out on right */
width: calc(100% + 2rem) !important; /* Compensate for margins */
overflow: visible !important; /* Allow shadow bleed */
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.swiper-jackpot .swiper-wrapper,
.swiper-daily .swiper-wrapper {
overflow: visible !important; /* Ensure wrapper doesn't clip shadows */
padding-left: 0.5rem !important; /* 0.5rem carousel left inset – match track */
padding-right: 1.5rem !important; /* Symmetric padding for end alignment */
padding-top: 15px !important; /* Shadow breathability */
padding-bottom: 15px !important; /* Shadow breathability */
scroll-snap-type: x mandatory !important; /* Enable scroll snapping */
scroll-padding-left: 0.5rem !important; /* Snap so first card aligns with 0.5rem inset */
gap: 0 !important; /* Remove gap - using margin-right on items instead */
}
/* 4. Ensure game items have proper rounded corners and natural shadow - free-standing boxes */
.homepage .horizontal-track .item,
.homepage .game-item,
.swiper-jackpot .game-item,
.swiper-daily .game-item,
.individual-competition-page .horizontal-track .item,
.individual-competition-page .game-item,
.carousel-wrapper .horizontal-track .item,
.carousel-wrapper .game-item,
.blog-page .games-section .game-item {
border-radius: 8px !important; /* Rounded corners */
box-shadow: 0 4px 16px rgba(2, 46, 74, 0.12), 0 2px 8px rgba(2, 46, 74, 0.08) !important; /* Natural shadow on all sides - bleeds into padding */
margin-bottom: 0 !important;
margin-right: 12px !important; /* Gap between boxes - 12px total */
scroll-snap-align: start !important; /* Snap to start - gap centered via scroll-padding-left */
flex: 0 0 280px !important; /* Consistent box width */
}
/* 4a. Remove black lines between game-image and game-top-border on all pages */
.individual-competition-page .game-image,
.carousel-wrapper .game-image {
border: none !important; /* Remove any border */
border-bottom: none !important; /* Ensure no border-bottom */
margin-bottom: 0 !important; /* Remove any margin */
}
.individual-competition-page .game-image img,
.carousel-wrapper .game-image img {
border: none !important; /* Remove any border */
display: block !important; /* Prevent inline spacing */
vertical-align: bottom !important; /* Remove baseline spacing */
}
.individual-competition-page .game-top-border,
.carousel-wrapper .game-top-border {
border: none !important; /* Remove any border */
border-top: none !important; /* Ensure no border-top - seamless connection with image */
border-bottom: 1px solid #f0f0f0 !important; /* Only bottom border for separation */
margin-top: 0 !important; /* Remove any margin */
margin-bottom: 0 !important; /* Remove any margin */
}
/* 5. Apply EXACT same carousel logic as home.php - individual competition pages and blog */
/* Home structure: .games-section (padding 0, margin-bottom 0, overflow visible) > .horizontal-track (padding 1.5rem L/R, 15px T/B, overflow-y visible) */
.individual-competition-page .carousel-wrapper,
.carousel-wrapper,
.individual-competition-page .games-section,
.blog-page .games-section {
margin-left: -1rem !important; /* Break out like home .games-section */
margin-right: -1rem !important;
width: calc(100% + 2rem) !important;
overflow: visible !important; /* No clipping - shadows bleed like home */
-webkit-overflow-scrolling: touch !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 1rem !important; /* Slight padding between content above and carousel */
padding-bottom: 0 !important; /* Match home - track has the bottom padding */
margin-bottom: 0 !important; /* Match home - no extra margin */
}
/* Prevent any parent from clipping - match home (no overflow hidden on section) */
.individual-competition-page .internal-linking-section {
overflow: visible !important;
}
/* Individual page track - EXACT match to homepage: padding-left matches scroll-padding-left for proper scroll snap */
/* Homepage: games-section at 0 (breaks out -1rem from 1rem container), track padding 1.5rem = first box at 1.5rem, h2 padding 1.5rem = text at 1.5rem. Aligned. */
/* Individual: section 0.5rem padding, carousel-wrapper breaks out -1rem = left edge at -0.5rem, track padding 1.5rem = first box at 1rem, h2 padding 1rem = text at 1.5rem. Need track 1.5rem to align. */
.individual-competition-page .carousel-wrapper .horizontal-track,
.individual-competition-page .internal-linking-section .carousel-wrapper .horizontal-track {
display: flex !important;
overflow-x: auto !important;
overflow-y: visible !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 1rem !important; /* Match homepage: align first box with h2 text (both at 1.5rem from viewport) */
padding-right: 1.5rem !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
margin-bottom: 0 !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-snap-type: x mandatory !important;
scroll-padding-left: 1rem !important; /* Match padding-left exactly like homepage (1.5rem matches 1.5rem) */
gap: 0 !important;
}
.individual-competition-page .carousel-wrapper .horizontal-track::-webkit-scrollbar,
.individual-competition-page .internal-linking-section .carousel-wrapper .horizontal-track::-webkit-scrollbar {
display: none !important;
}
/* Blog page track - swipe "one and a bit": scroll so previous card is JUST out of view */
.blog-page .games-section .horizontal-track {
display: flex !important;
overflow-x: auto !important;
overflow-y: visible !important;
padding-left: 1.5rem !important; /* Gap from left border to first box */
padding-right: 1.5rem !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
margin-bottom: 0 !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-snap-type: x mandatory !important;
scroll-padding-left: 12px !important; /* Smaller = scroll more, so previous card just out of view */
gap: 0 !important;
}
.blog-page .games-section .horizontal-track::-webkit-scrollbar {
display: none !important; /* Safari/Chrome hide scrollbar */
}
/* Blog page games-section h2 - match carousel left padding */
.blog-page .games-section h2 {
padding-left: 1.5rem !important; /* Match track padding-left */
padding-right: 0 !important;
}
/* Blog page game items - match homepage shadow and styling */
.blog-page .games-section .game-item {
border-radius: 8px !important; /* Rounded corners */
box-shadow: 0 4px 16px rgba(2, 46, 74, 0.12), 0 2px 8px rgba(2, 46, 74, 0.08) !important; /* Natural shadow on all sides */
margin-bottom: 0 !important;
margin-right: 12px !important; /* Gap between boxes - 12px total */
scroll-snap-align: start !important; /* Snap to start - one full card per swipe */
flex: 0 0 280px !important; /* Consistent box width */
}
/* Blog page game-image and game-top-border - remove black lines */
.blog-page .games-section .game-image {
border: none !important;
border-bottom: none !important;
margin-bottom: 0 !important;
}
.blog-page .games-section .game-image img {
border: none !important;
display: block !important;
vertical-align: bottom !important;
}
.blog-page .games-section .game-top-border {
border: none !important;
border-top: none !important;
border-bottom: 1px solid #f0f0f0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Headers: Match carousel first-box position - both align at same position like homepage */
.individual-competition-page .carousel-wrapper h2,
.individual-competition-page .internal-linking-section .carousel-wrapper h2 {
padding-left: 1rem !important; /* Match track padding-left so h2 text aligns with first box (both at 1rem from viewport: carousel -0.5rem + 1.5rem = 1rem) */
padding-right: 0 !important;
font-size: 1.375rem !important; /* Match global h2 mobile size */
}
/* 6. Adjust horizontal-track gap to match margin-right on items */
.homepage .games-section .horizontal-track {
gap: 0 !important; /* Remove gap - using margin-right on items instead */
}
.swiper-jackpot .swiper-wrapper,
.swiper-daily .swiper-wrapper {
gap: 0 !important; /* Remove gap - using margin-right on items instead */
}
}
/* 768–1023px: EXTEND MOBILE CAROUSEL – same layout as mobile, no old overrides */
@media (min-width: 768px) and (max-width: 1023px) {
.homepage .games-section {
margin-left: -1rem !important;
margin-right: -1rem !important;
width: calc(100% + 2rem) !important;
overflow: visible !important;
-webkit-overflow-scrolling: touch !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.homepage .games-section .horizontal-track {
display: flex !important;
overflow-x: auto !important;
overflow-y: visible !important;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
margin-bottom: 0 !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-snap-type: x mandatory !important;
scroll-padding-left: 1.5rem !important;
gap: 0 !important;
}
.homepage .games-section .horizontal-track::-webkit-scrollbar {
display: none !important;
}
.swiper-jackpot,
.swiper-daily {
margin-left: -1rem !important;
margin-right: -1rem !important;
width: calc(100% + 2rem) !important;
overflow: visible !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.swiper-jackpot .swiper-wrapper,
.swiper-daily .swiper-wrapper {
overflow: visible !important;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
scroll-snap-type: x mandatory !important;
scroll-padding-left: 1.5rem !important;
gap: 0 !important;
}
.homepage .horizontal-track .item,
.homepage .game-item,
.swiper-jackpot .game-item,
.swiper-daily .game-item {
border-radius: 8px !important;
box-shadow: 0 4px 16px rgba(2, 46, 74, 0.12), 0 2px 8px rgba(2, 46, 74, 0.08) !important;
margin-bottom: 0 !important;
margin-right: 12px !important;
scroll-snap-align: start !important;
flex: 0 0 280px !important;
}
}
/* 920–1023px: 3 bigger boxes, centered, seamless – no track padding, boxes fill space */
@media (min-width: 920px) and (max-width: 1023px) {
/* MOBILE-STYLE BREAKOUT: Break out of container padding to show shadows, align with headers */
.homepage .games-section {
margin-left: -1.5rem !important; /* Break out of container padding (1.5rem) - match mobile logic */
margin-right: -1.5rem !important; /* Break out on right */
width: calc(100% + 3rem) !important; /* Compensate for both margins */
overflow: hidden !important; /* Clip to show exactly 3 boxes */
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Header alignment: padding-left matches track padding for seamless alignment */
.homepage .games-section h2 {
padding-right: 0 !important;
}
/* Track: Static 3 boxes - no scrolling, no carousel */
.homepage .games-section .horizontal-track {
padding-left: 1.5rem !important; /* Allow left shadow to show, align with header */
padding-right: 1.5rem !important; /* Symmetric padding */
padding-top: 15px !important; /* Shadow breathability */
padding-bottom: 15px !important; /* Shadow breathability */
overflow-x: hidden !important; /* NO SCROLLING - static 3 boxes only */
overflow-y: visible !important; /* Allow shadows above/below */
display: flex !important;
justify-content: flex-start !important;
gap: 12px !important; /* Gap between boxes */
}
/* Box sizing: exactly 3 boxes, slightly bigger to ensure no 4th box visible */
.homepage .games-section .horizontal-track .item,
.homepage .games-section .horizontal-track .game-item {
flex: 0 0 calc((100% - 24px) / 3) !important; /* 3 boxes: 100% - 24px gaps (2×12px) - slightly bigger */
margin-right: 0 !important; /* Gap handled by parent */
min-width: 0 !important;
max-width: none !important;
}
/* Swiper carousels - same breakout treatment */
.swiper-jackpot,
.swiper-daily {
margin-left: -1.5rem !important; /* Break out of container padding */
margin-right: -1.5rem !important; /* Break out on right */
width: calc(100% + 3rem) !important; /* Compensate for margins */
overflow: hidden !important; /* Parent clips to 3 boxes */
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.swiper-jackpot .swiper-wrapper,
.swiper-daily .swiper-wrapper {
overflow-x: hidden !important; /* NO SCROLLING - static 3 boxes only */
overflow-y: visible !important; /* Allow shadows above/below */
padding-left: 1.5rem !important; /* Allow left shadow to show, align with header */
padding-right: 1.5rem !important; /* Symmetric padding */
padding-top: 15px !important; /* Shadow breathability */
padding-bottom: 15px !important; /* Shadow breathability */
gap: 12px !important; /* Gap between boxes */
display: flex !important;
}
.swiper-jackpot .game-item,
.swiper-daily .game-item {
flex: 0 0 calc((100% - 24px) / 3) !important; /* 3 boxes: 100% - 24px gaps (2×12px) - slightly bigger */
margin-right: 0 !important; /* Gap handled by parent */
min-width: 0 !important;
max-width: none !important;
}
}
/* ===== TEMPLATE.PHP CAROUSEL ADAPTER (Parent–Child Contract) ===== */
/* The carousel component is correct. template.php was the broken socket: no parent with flex+gap. */
/* This wrapper gives the same parent role as .homepage-container: spacing from gap, not from child margins. */
/* DO NOT add carousel spacing overrides here; do not change reusable-carousel.css. */
/* Exact same structure as home.php - uses .homepage-container class for consistency */
.individual-competition-page .homepage-container {
display: flex;
flex-direction: column;
gap: var(--space-block, 1rem);
max-width: 100vw;
margin: 0 auto;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: visible;
}
/* Carousel sections inside the wrapper: let gap control spacing; zero conflicting margins */
.individual-competition-page .homepage-container .betquest-carousel-wrapper.games-section {
margin-top: 0;
margin-bottom: 0;
}
/* Both carousels identical: no extra border on last (Free Instant Win) – same logic as Jackpot */
.individual-competition-page .homepage-container .betquest-carousel-wrapper {
border: none !important;
border-bottom: none !important;
}
.individual-competition-page .homepage-container .betquest-carousel-wrapper:last-child {
padding-bottom: 15px !important;
margin-bottom: 0 !important;
border: none !important;
border-bottom: none !important;
}
/* Same overflow as Jackpot – no harsh cutoff on Free Instant Win carousel */
.individual-competition-page .homepage-container .betquest-carousel-container {
overflow-y: visible !important;
}
/* See All: same var as home (desktop 16px, mobile 14px) */
.individual-competition-page .homepage-container .betquest-carousel-see-all {
font-size: var(--fs-base) !important;
}
@media (max-width: 767px) {
.individual-competition-page .homepage-container .betquest-carousel-see-all {
font-size: var(--fs-sm) !important;
}
}
/* 768–919px: individual competition carousel – left and right padding, no impact on box shadows */
@media (min-width: 768px) and (max-width: 919px) {
.individual-competition-page .homepage-container .betquest-carousel-wrapper.games-section {
margin-left: calc(-1 * var(--content-side-padding, 1rem)) !important;
margin-right: calc(-1 * var(--content-side-padding, 1rem)) !important;
width: calc(100% + 2 * var(--content-side-padding, 1rem)) !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
overflow: visible !important;
}
.individual-competition-page .betquest-carousel-title {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.individual-competition-page .betquest-carousel-container {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
overflow-y: visible !important;
scroll-padding-left: 1rem !important;
}
}
/* 920–1023px: individual – full breakout (override 768px narrow rule); header/cards inset 0.5rem; more space after final CTA */
@media (min-width: 920px) and (max-width: 1023px) {
.individual-competition-page .homepage-container .betquest-carousel-wrapper.games-section {
margin-left: calc(-1 * var(--content-side-padding, 1rem)) !important;
margin-right: calc(-1 * var(--content-side-padding, 1rem)) !important;
width: calc(100% + 2 * var(--content-side-padding, 1rem)) !important;
}
.individual-competition-page .betquest-carousel-title {
padding-left: 0.5rem !important;
}
.individual-competition-page .betquest-carousel-container {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.individual-competition-page .final-cta {
margin-bottom: 1.5rem !important;
}
}
/* Desktop: Centre carousel section like home.php (max-width + padding) */
@media (min-width: 1024px) {
.individual-competition-page .homepage-container {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
}
/* Mobile: same flex+gap as home */
@media (max-width: 767px) {
.individual-competition-page .homepage-container {
display: flex !important;
flex-direction: column !important;
gap: var(--space-block) !important;
}
}
/* DESKTOP PROTECTION: Ensure carousel layouts remain perfect on desktop */
@media (min-width: 768px) {
/* Individual competition pages - restore normal layout */
.individual-competition-page .carousel-wrapper,
.carousel-wrapper,
.individual-competition-page .games-section {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
overflow: visible !important;
}
.individual-competition-page .carousel-wrapper .horizontal-track,
.carousel-wrapper .horizontal-track {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
}
/* Blog page - restore normal layout */
.blog-page .games-section {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
overflow: visible !important;
}
.blog-page .games-section .horizontal-track {
padding-left: 0 !important;
padding-right: 0 !important;
}
.blog-page .games-section h2 {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Individual competition page headers - restore normal layout */
.individual-competition-page .carousel-wrapper h2,
.carousel-wrapper h2 {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* ===== NO WAGERING FREE SPINS PAGE STYLES ===== */
/* Comparison Table Styles - Reusable across multiple pages */
.comparison-table-wrapper {
width: 100%;
overflow-x: auto;
margin: 1rem 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.comparison-table {
width: 100%;
border-collapse: collapse;
background: white;
min-width: 800px;
}
.comparison-table thead {
background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
color: white;
}
.comparison-table th {
padding: 1rem;
text-align: left;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid #00cc5a;
}
.comparison-table tbody tr {
border-bottom: 1px solid #e0e0e0;
transition: background-color 0.2s ease;
}
.comparison-table tbody tr:hover {
background-color: #f8f9fa;
}
.comparison-table tbody tr.rank-1 {
background-color: #fff9e6;
}
.comparison-table td {
padding: 1rem;
vertical-align: middle;
font-size: 0.95rem;
}
.comparison-table .rank-cell {
font-size: 1.5rem;
font-weight: bold;
color: #00cc5a;
text-align: center;
width: 60px;
}
.comparison-table .casino-cell {
width: 140px;
}
.comparison-table .casino-cell {
background: transparent;
padding: 0.5rem;
border: none;
}
.comparison-table .casino-logo {
width: 120px;
height: 60px;
object-fit: contain;
display: block;
padding: 0;
background: transparent;
border: none;
}
.comparison-table .offer-summary {
font-weight: 600;
color: #1a1a2e;
}
.comparison-table .true-value {
font-size: 1rem;
font-weight: bold;
color: #00cc5a;
}
.comparison-table .no-cap {
color: #00cc5a;
font-weight: 600;
}
.comparison-table .capped {
color: #ff6b6b;
font-weight: 600;
}
.comparison-table .claim-btn {
background: linear-gradient(135deg, #00cc5a 0%, #00a847 100%);
color: white;
padding: 0.9rem 1.8rem;
border-radius: 6px;
border: none;
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
display: inline-block;
transition: transform 0.2s ease, box-shadow 0.2s ease;
text-align: center;
min-width: 120px;
cursor: pointer;
white-space: nowrap;
}
@media (hover: hover) {
.comparison-table .claim-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 204, 90, 0.3);
}
}
.comparison-table .claim-btn.gold-btn {
background: linear-gradient(135deg, #d4af37 0%, #c5a028 100%);
color: #000;
box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}
.comparison-table .claim-btn.gold-btn:hover {
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5);
background: linear-gradient(135deg, #c5a028 0%, #b8941f 100%);
}
/* Analysis Sections - Reusable content sections */
.analysis-section {
max-width: 1200px;
margin: 1.5rem auto;
padding: 0 1rem;
box-sizing: border-box;
}
.analysis-section h2 {
color: #1a1a2e;
font-size: 2rem;
margin-bottom: 1rem;
border-left: 4px solid #00cc5a;
padding-left: 1rem;
}
.analysis-section h3 {
color: #2d2d44;
font-size: 1.5rem;
margin: 1.5rem 0 0.75rem 0;
}
.analysis-section p {
line-height: 1.8;
color: #333;
margin-bottom: 1rem;
}
.analysis-section ul {
margin: 1rem 0;
padding-left: 2rem;
}
.analysis-section li {
margin-bottom: 0.75rem;
line-height: 1.8;
}
.analysis-section strong {
color: #00cc5a;
}
.important-note {
background: #fff9e6;
border-left: 4px solid #ffc107;
padding: 1.5rem;
margin: 1rem 0;
border-radius: 4px;
}
.important-note strong {
color: #f57c00;
}
.example-scenario {
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
}
.example-scenario h4 {
color: #1a1a2e;
margin-bottom: 1rem;
}
/* Mobile Responsive for Comparison Table - Card Layout */
@media (max-width: 767px) {
.comparison-table-wrapper {
overflow-x: visible;
box-shadow: none;
}
.comparison-table {
min-width: 100%;
display: block;
}
.comparison-table thead {
display: none;
}
.comparison-table tbody {
display: block;
}
.comparison-table tr {
display: block;
margin-bottom: 1.5rem;
background: white;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
border-bottom: none;
}
.comparison-table tr.rank-1 {
background-color: #fff9e6;
border: 2px solid #ffc843;
}
.comparison-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid #f0f0f0;
font-size: 0.9rem;
}
.comparison-table td:last-child {
border-bottom: none;
justify-content: center;
padding-top: 1rem;
}
.comparison-table td:before {
content: attr(data-label);
font-weight: 700;
color: #555;
text-transform: uppercase;
font-size: 0.75rem;
}
.comparison-table .rank-cell {
font-size: 1.8rem;
justify-content: center;
padding: 0.5rem 0;
border-bottom: 2px solid #00cc5a;
margin-bottom: 0.5rem;
}
.comparison-table .rank-cell:before {
content: '';
}
.comparison-table .casino-cell {
justify-content: center;
border-bottom: none;
padding-bottom: 0.75rem;
}
.comparison-table .casino-cell:before {
content: '';
}
.comparison-table .casino-logo {
width: 100px;
height: 50px;
padding: 0;
}
.comparison-table .claim-btn {
padding: 0.8rem 1.5rem;
font-size: 1rem;
min-width: 100%;
}
.analysis-section h2 {
font-size: 1.5rem;
}
.analysis-section h3 {
font-size: 1.2rem;
}
}
/* No Wagering Page Specific Styles */
.no-wagering-page {
background: linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%);
min-height: 100vh;
}
.no-wagering-page .faq-section {
max-width: 1200px;
margin: 2rem auto 3rem auto;
padding: 0;
box-sizing: border-box;
}
@media (max-width: 767px) {
.no-wagering-page .faq-section {
padding: 0;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
}
/* FAQ Accordion Styles */
.faq-item-accordion {
margin-bottom: 1rem;
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(2, 46, 74, 0.1), 0 1px 3px rgba(2, 46, 74, 0.08);
border: 1px solid rgba(2, 46, 74, 0.1);
transition: all 0.3s ease;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.faq-item-accordion:hover {
box-shadow: 0 4px 16px rgba(0, 204, 90, 0.15), 0 2px 6px rgba(0, 204, 90, 0.1);
border-color: rgba(0, 204, 90, 0.2);
transform: translateY(-1px);
}
.faq-question {
width: 100%;
padding: 1.5rem 1.75rem;
background: #ffffff;
border: none;
box-sizing: border-box;
max-width: 100%;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.15rem;
font-weight: 700;
color: #022e4a;
transition: all 0.3s ease;
position: relative;
}
.faq-question:hover {
background-color: #f8f9fa;
color: #00cc5a;
}
.faq-question span:first-child {
flex: 1;
padding-right: 1rem;
}
.faq-item-accordion.active .faq-question {
background-color: #f0f9f4;
color: #00cc5a;
border-bottom: 2px solid rgba(0, 204, 90, 0.2);
}
.faq-icon {
font-size: 1.75rem;
font-weight: 300;
color: #00cc5a;
transition: transform 0.3s ease;
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 204, 90, 0.1);
border-radius: 50%;
line-height: 1;
}
.faq-item-accordion.active .faq-icon {
transform: rotate(45deg);
background: rgba(0, 204, 90, 0.2);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.3s ease;
background: #ffffff;
padding: 0 1.5rem;
max-width: 100%;
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: break-word;
}
.faq-item-accordion.active .faq-answer {
max-height: 2000px;
padding: 0 1.5rem 1.5rem 1.5rem;
}
.faq-answer p {
padding: 0;
margin: 1.25rem 0 0 0;
line-height: 1.8;
color: #20242e;
font-size: 1rem;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
box-sizing: border-box;
}
.faq-answer ul {
padding: 0 1.75rem 1.5rem 4rem;
margin: 1.25rem 0 0 0;
}
.faq-answer li {
margin-bottom: 0.75rem;
line-height: 1.7;
color: #20242e;
font-size: 1rem;
}
.faq-answer li:last-child {
margin-bottom: 0;
}
.faq-answer strong {
color: #00cc5a;
font-weight: 600;
}
@media (max-width: 767px) {
.faq-question {
padding: 1rem;
font-size: 1rem;
}
.faq-icon {
font-size: 1.25rem;
}
.faq-answer p {
padding: 0 1rem 1rem 1rem;
font-size: 0.95rem;
}
.faq-answer ul {
padding: 0 1rem 1rem 2rem;
}
}
/* Apply offer card styles to no-wagering page */
.no-wagering-page .offer-card {
background: white;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18), 0 3px 10px rgba(2, 46, 74, 0.12);
transition: transform 0.2s, box-shadow 0.2s;
padding: 1.67rem;
min-height: 120px;
position: relative;
width: 100%;
box-sizing: border-box;
}
.no-wagering-page .offer-top-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.67rem;
margin-bottom: 0; /* No gap - metrics-row starts directly */
width: 100%;
}
.no-wagering-page .logo-section {
flex-shrink: 0;
order: 1;
}
.no-wagering-page .offer-details {
flex: 1;
order: 2;
text-align: center;
}
.no-wagering-page .offer-actions {
flex-shrink: 0;
order: 3;
}
/* No hover on offer box */
.no-wagering-page .offer-card:hover {
transform: none;
box-shadow: inherit;
}
.no-wagering-page .casino-logo {
width: 120px;
height: 60px;
object-fit: contain;
border-radius: 0.25rem;
flex-shrink: 0;
align-self: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 0;
}
.no-wagering-page .offer-blurb-text {
text-align: center;
text-transform: uppercase;
line-height: 1.2;
margin: 0;
padding: 0;
}
.no-wagering-page .offer-blurb-text .main-text {
font-size: 1.6rem;
font-weight: 700;
color: #20242e;
margin: 0;
line-height: 1.1;
}
.no-wagering-page .offer-blurb-text .secondary-text {
font-size: 1.2rem;
font-weight: 700;
color: #20242e;
margin: 0;
line-height: 1.1;
}
.no-wagering-page .offer-blurb-text .tertiary-text {
font-size: 1.0rem;
font-weight: 700;
color: #20242e;
margin: 0;
line-height: 1.1;
}
.no-wagering-page .claim-btn {
color: white;
border: none;
padding: 0.9rem 1.8rem;
border-radius: 0.5rem;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.2s;
animation: pulse 2s infinite;
white-space: nowrap;
touch-action: manipulation; /* Prevent accidental zoom/delay on touch */
}
@media (hover: hover) {
.no-wagering-page .claim-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
}
.no-wagering-page .metrics-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin: 0px 0;
padding: 15px;
background: var(--metrics-bar-bg); /* Same as key-terms-blurb everywhere */
border-radius: 0.75rem 0.75rem 0 0; /* Top only – one box with key-terms-blurb */
font-size: 0.85rem;
width: 100%;
box-sizing: border-box;
clear: both;
}
.no-wagering-page .metric-item {
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 5px;
}
.no-wagering-page .metric-label {
font-weight: bold;
color: #555;
font-size: 0.75rem;
line-height: 1.2;
}
.no-wagering-page .metric-value {
color: #333;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.2;
}
.no-wagering-page .stars {
display: flex;
gap: 2px;
}
.no-wagering-page .star {
color: #ffd700;
font-size: 0.9rem;
}
.no-wagering-page .star.empty {
color: #ddd;
}
.casino-bonus-page .stars {
display: flex;
gap: 2px;
}
.casino-bonus-page .star {
color: #ffd700;
font-size: 0.9rem;
}
.casino-bonus-page .star.empty {
color: #ddd;
}
.casino-bonus-page .star.half-star {
color: #ffd700;
}
.no-wagering-page .mobile-claim-btn {
display: none;
}
.no-wagering-page .key-terms-section {
margin-top: 1rem;
}
.no-wagering-page .terms-text {
font-size: var(--fs-key-terms-offer-box) !important;
color: #666;
line-height: 1.4;
margin: 0;
text-align: left;
overflow: visible;
white-space: normal;
max-height: none;
display: block;
}
.no-wagering-page .no-offers {
text-align: center;
padding: 3rem 1rem;
color: #666;
font-size: 1.1rem;
background: white;
border-radius: 0.75rem;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
width: 100%;
box-sizing: border-box;
}
.no-wagering-page .loading {
text-align: center;
padding: 3rem 1rem;
color: #666;
width: 100%;
box-sizing: border-box;
}
/* Mobile responsive for no-wagering page */
@media (max-width: 767px) {
.no-wagering-page .offer-blurb-text .main-text {
font-size: 1.6rem;
font-weight: 700 !important;
}
.no-wagering-page .offer-blurb-text .secondary-text {
font-size: 1.2rem;
font-weight: 700 !important;
}
.no-wagering-page .offer-blurb-text .tertiary-text {
font-size: 0.9rem;
font-weight: 700 !important;
}
.no-wagering-page .mobile-claim-btn {
display: block;
text-align: center;
margin-top: 1rem !important; /* No top margin - spacing comes from metrics margin-bottom */
margin-bottom: 1rem !important; /* 1rem spacing between button and key terms */
}
.no-wagering-page .mobile-claim-btn .claim-btn {
width: 100%;
max-width: 400px;
}
.no-wagering-page .key-terms-section {
margin-top: 0.5rem;
}
.no-wagering-page .terms-text {
font-size: var(--fs-key-terms-offer-box) !important;
line-height: 1.3;
margin: 0;
text-align: left;
}
.no-wagering-page .offer-card {
flex-direction: column;
text-align: center;
gap: 1rem;
padding: 1.25rem;
min-height: 100px;
align-items: center;
}
.no-wagering-page .offer-top-row {
flex-direction: column;
gap: 1rem;
margin-bottom: 0; /* No gap - metrics-row starts directly */
align-items: center;
}
.no-wagering-page .logo-section,
.no-wagering-page .offer-details {
order: unset;
flex: none;
}
.no-wagering-page .offer-actions {
order: unset;
flex: none;
display: none;
}
.no-wagering-page .metrics-row {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
font-size: 0.8rem;
padding: 20px;
margin: 1.5rem 0;
}
.no-wagering-page .metric-item {
text-align: left;
justify-content: flex-start;
gap: 8px;
}
.no-wagering-page .metric-label {
font-size: var(--metric-mobile-fs) !important;
}
.no-wagering-page .metric-value {
font-size: var(--metric-mobile-fs) !important;
}
}
@media (max-width: 480px) {
.no-wagering-page .offer-blurb-text .main-text {
font-size: 1.6rem;
font-weight: 700 !important;
}
.no-wagering-page .offer-blurb-text .secondary-text {
font-size: 1.2rem;
font-weight: 700 !important;
}
.no-wagering-page .offer-blurb-text .tertiary-text {
font-size: 0.8rem;
font-weight: 700 !important;
}
}
@media (min-width: 768px) {
.no-wagering-page .casino-logo {
width: 150px;
height: 75px;
}
.no-wagering-page .offer-card {
padding: 2.5rem;
min-height: 140px;
}
.no-wagering-page .claim-btn {
padding: 1.1rem 2.2rem;
font-size: 1.3rem;
}
.no-wagering-page .results-count-section {
margin: 0.5rem 0;
}
.no-wagering-page .results-count-section .offers-count {
font-size: 1.3rem;
}
}
/* Container and Results Count Styles – width overridden at 1280px by shared rule (same as home) */
.no-wagering-page .main-container {
width: 100%;
max-width: 1200px;
min-width: 320px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
@media (min-width: 1280px) {
.no-wagering-page .main-container {
max-width: 1400px;
}
}
.no-wagering-page .offers-section {
margin: 0.5rem 0 2rem 0;
}
/* .no-wagering-page .offers-list joined block styling is above (same as casino signup) – do not override gap/background here */
.no-wagering-page .results-count-section {
background: white;
padding: 1rem 1.5rem;
margin: 0.5rem 0;
border-radius: 0.75rem;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06);
text-align: center;
width: 100%;
box-sizing: border-box;
display: block;
}
.no-wagering-page .results-count-section .offers-count {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
color: #00cc5a;
}
.no-wagering-page .results-count-section .offers-count.loading {
color: #666;
font-style: italic;
}
@media (min-width: 1024px) {
.no-wagering-page .main-container {
padding: 0 2rem;
}
}
/* PERFORMANCE FIX: Prevent layout shift on homepage */
.homepage .offers-section { min-height: 0 !important; }
.homepage-container { min-height: 0 !important; }
/* Prevent CLS when clearing skeleton loaders - ROW-SPECIFIC */
#no-deposit-offers {
min-height: 90px !important; /* 1 row × 90px */
}
#free-spins-offers {
min-height: 90px !important; /* Match no-deposit: 1 row × 90px */
}
#sports-offers,
#no-wagering-offers,
#casino-bonus-offers {
min-height: 270px !important; /* 3 rows × 90px */
}
/* Prevent CLS in games sections */
.homepage .games-scroll {
min-height: 200px !important; /* Image + logo bar */
}
.homepage .offer-list {
min-height: 0 !important;
}
/* Skeleton loaders to prevent CLS */
/* ===== RANKED OFFER SKELETON (for casino-bonus, no-wagering, etc.) ===== */
.ranked-offer-skeleton {
display: flex !important;
align-items: stretch !important;
background: #fff !important;
border-radius: 0.75rem !important;
box-shadow: 0 6px 20px rgba(2, 46, 74, 0.18) !important;
margin-bottom: 1rem !important;
overflow: hidden !important;
min-height: 150px !important;
}
.ranked-offer-skeleton .skeleton-rank {
min-width: 60px !important;
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
border-radius: 0.75rem 0 0 0.75rem !important;
}
.ranked-offer-skeleton .skeleton-content {
flex: 1 !important;
padding: 1.5rem !important;
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
}
.ranked-offer-skeleton .skeleton-top {
display: flex !important;
align-items: center !important;
gap: 1rem !important;
}
.ranked-offer-skeleton .skeleton-logo {
width: 100px !important;
height: 50px !important;
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
border-radius: 4px !important;
flex-shrink: 0 !important;
}
.ranked-offer-skeleton .skeleton-text-block {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
}
.ranked-offer-skeleton .skeleton-text-line {
height: 18px !important;
width: 200px !important;
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
border-radius: 4px !important;
}
.ranked-offer-skeleton .skeleton-text-line.short {
width: 140px !important;
height: 14px !important;
}
.ranked-offer-skeleton .skeleton-btn {
width: 120px !important;
height: 44px !important;
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
border-radius: 6px !important;
flex-shrink: 0 !important;
}
.ranked-offer-skeleton .skeleton-metrics {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 10px !important;
padding: 15px !important;
background: #f8f9fa !important;
border-radius: 0.75rem !important;
}
.ranked-offer-skeleton .skeleton-metric {
height: 30px !important;
background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
border-radius: 4px !important;
}
.ranked-offer-skeleton .skeleton-terms {
height: 30px !important;
width: 100% !important;
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 1.5s ease-in-out infinite !important;
border-radius: 4px !important;
}
/* Mobile responsive for ranked offer skeleton */
@media (max-width: 767px) {
.ranked-offer-skeleton .skeleton-top {
flex-direction: column !important;
align-items: flex-start !important;
}
.ranked-offer-skeleton .skeleton-btn {
display: none !important;
}
.ranked-offer-skeleton .skeleton-metrics {
grid-template-columns: repeat(2, 1fr) !important;
}
.ranked-offer-skeleton .skeleton-text-line {
width: 100% !important;
}
}
/* ===== HOMEPAGE OFFER SKELETON ===== */
.offer-skeleton {
min-height: 80px !important;
display: flex !important;
align-items: flex-start !important;
gap: 0.5rem !important;
padding: 0.75rem 0 !important;
border-bottom: 1px solid #e2e8f0 !important;
margin-bottom: 0 !important;
background: none !important;
}
.skeleton-logo {
width: 93px !important;
height: 50px !important;
flex-shrink: 0 !important;
/* Consistent shimmer colors with individual pages: #e8e8e8 → #f4f4f4 → #e8e8e8 */
background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 2s ease-in-out infinite !important;
border-radius: 4px !important;
}
.skeleton-text {
flex: 1 !important;
height: 60px !important;
/* Consistent shimmer colors with individual pages: #e8e8e8 → #f4f4f4 → #e8e8e8 */
background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%) !important;
background-size: 200% 100% !important;
animation: skeleton-loading 2s ease-in-out infinite !important;
border-radius: 4px !important;
}
/* Ensure skeletons take up space before replacement */
.offer-list:has(.offer-skeleton) {
min-height: 0 !important;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* SIMPLE COOKIE POPUP - MOBILE BOTTOM, DESKTOP BOTTOM-RIGHT */
.pq-cookie-popup-simple {
position: fixed;
z-index: 9999999 !important; /* Above everything including UKGC popups and bookmaker logos */
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
padding: 10px 14px;
font-family: inherit;
max-width: 90vw;
}
/* Mobile: Bottom center, two lines */
@media (max-width: 1023px) {
.pq-cookie-popup-simple {
left: 50%;
bottom: 20px;
transform: translateX(-50%);
width: calc(100% - 32px);
max-width: 480px;
}
.pq-cookie-popup-simple .pq-cookie-popup-inner {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.pq-cookie-popup-simple .pq-cookie-popup-actions {
justify-content: flex-end;
}
}
/* Desktop: Bottom-right */
@media (min-width: 1024px) {
.pq-cookie-popup-simple {
right: 24px;
bottom: 24px;
max-width: 400px;
}
}
.pq-cookie-popup-simple .pq-cookie-popup-inner {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.pq-cookie-popup-simple .pq-cookie-popup-text {
font-size: 11px;
line-height: 1.5;
color: #333;
flex: 1;
text-align: left;
}
.pq-cookie-popup-simple .pq-cookie-popup-text a {
color: #022e4a;
text-decoration: underline;
font-weight: 500;
}
.pq-cookie-popup-simple .pq-cookie-popup-text a:hover {
color: #034d7e;
}
.pq-cookie-popup-simple .pq-cookie-popup-actions {
display: flex;
flex-shrink: 0;
align-items: center;
margin: 0;
}
.pq-cookie-popup-simple #pqCookieAccept {
background: #022e4a;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 10px 22px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
line-height: 1.1;
min-height: 42px;
min-width: 80px;
}
.pq-cookie-popup-simple #pqCookieAccept:hover {
background: #034d7e;
}
.pq-cookie-popup-simple #pqCookieAccept:active {
background: #01253a;
}
/* LEGAL PAGE STYLING (Privacy Policy, Terms, etc.) */
.legal-page {
background: #f5f7fa;
}
.legal-page .main-content {
background: #f5f7fa;
padding: 2rem 0;
}
.legal-page .legal-container {
max-width: 900px;
margin: 2rem auto;
padding: 2rem 1.5rem;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12);
line-height: 1.7;
}
.legal-page .legal-container h1 {
font-size: 2.5rem;
color: #022e4a;
margin-bottom: 0.5rem;
}
.legal-page .legal-container .last-updated {
font-size: 0.95rem;
color: #666;
margin-bottom: 2rem;
}
.legal-page .legal-container section {
margin-bottom: 2.5rem;
}
.legal-page .legal-container h2 {
font-size: 1.75rem;
color: #022e4a;
margin-top: 2rem;
margin-bottom: 1rem;
border-bottom: 2px solid #022e4a;
padding-bottom: 0.5rem;
}
.legal-page .legal-container h3 {
font-size: 1.35rem;
color: #034d7e;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.legal-page .legal-container p {
margin-bottom: 1rem;
color: #333;
}
.legal-page .legal-container ul {
margin: 1rem 0 1rem 2rem;
list-style: disc;
}
.legal-page .legal-container ul li {
margin-bottom: 0.75rem;
color: #333;
}
.legal-page .legal-container a {
color: #022e4a;
text-decoration: underline;
}
.legal-page .legal-container a:hover {
color: #034d7e;
}
.legal-page .legal-container strong {
font-weight: 600;
color: #022e4a;
}
@media (max-width: 767px) {
.legal-page .legal-container h1 {
font-size: 2rem;
}
.legal-page .legal-container h2 {
font-size: 1.5rem;
}
.legal-page .legal-container h3 {
font-size: 1.2rem;
}
.legal-page .legal-container {
padding: 1.5rem 1rem;
}
}
/* Skeleton loaders for betting-sites page */
.bookmaker-section-skeleton {
min-height: 300px;
margin-bottom: 2rem;
background: #f8f9fa;
border-radius: 8px;
padding: 1rem;
}
.bookmaker-section-skeleton .skeleton-header {
height: 60px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 4px;
margin-bottom: 1rem;
}
.bookmaker-section-skeleton .skeleton-content {
height: 120px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 4px;
margin-bottom: 0.75rem;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Prevent CLS on betting-sites page - Reserve space for skeletons */
.betting-sites-page #bookmakers-list {
min-height: 2000px !important; /* Reserve space for 3+ bookmaker sections with skeletons */
}
.betting-sites-page.loaded #bookmakers-list {
min-height: auto !important; /* Remove min-height once loaded */
}
/* ===== CASINO PAGES SKELETON LOADERS ===== */
/* REMOVED: All casino page skeleton CSS - pages now use synchronous PHP-rendered data */
/* Using Shared Classes Strategy - skeletons use same HTML structure and CSS classes as loaded content */
/* Global Shimmer Animation - applies to any element with .skeleton-shimmer */
.skeleton-shimmer {
background: #e0e0e0;
background-image: linear-gradient(90deg, rgba(240, 240, 240, 0.3) 25%, rgba(224, 224, 224, 0.5) 50%, rgba(240, 240, 240, 0.3) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Casino page skeleton CSS removed - pages now use synchronous PHP-rendered data */
/* Daily free games skeletons - EXACT match to competition-box dimensions */
/* REMOVED: Old competition-box-skeleton - now using same classes as actual content (match homepage approach) */
/* Skeleton shimmer animation for competition boxes - uses same classes as actual content */
/* CRITICAL FIX: Protect skeletons from ALL hiding rules (page-transitioning, loading-overlay, etc.) */
.competition-box.skeleton-shimmer {
/* Dimensions come from .competition-box class - no override needed */
/* Only add shimmer animation */
background-image: linear-gradient(90deg, rgba(240, 240, 240, 0.3) 25%, rgba(224, 224, 224, 0.5) 50%, rgba(240, 240, 240, 0.3) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
/* CRITICAL: Override ALL hiding rules - ensures skeletons are always visible */
opacity: 1 !important;
visibility: visible !important;
display: flex !important; /* Ensure display is not set to none */
}
/* CRITICAL: Protect competition-grid containing skeletons from hiding rules */
.competition-grid .competition-box.skeleton-shimmer,
#free-daily-games-grid .competition-box.skeleton-shimmer,
#live-games .competition-box.skeleton-shimmer,
#expired-games-grid .competition-box.skeleton-shimmer {
opacity: 1 !important;
visibility: visible !important;
display: flex !important;
}
/* Skeleton loaders use same classes as loaded content - dimensions come from shared CSS */
.competition-image.skeleton-shimmer {
background: #f0f0f0 !important;
background-image: linear-gradient(90deg, rgba(240, 240, 240, 0.3) 25%, rgba(224, 224, 224, 0.5) 50%, rgba(240, 240, 240, 0.3) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
/* Height comes from .competition-image mobile rules - no override needed */
}
.competition-top-border.skeleton-shimmer {
background: #ffffff !important;
/* NO shimmer on top border - logo and timer have their own separate skeletons */
}
.competition-bottom-border.skeleton-shimmer {
background: #ffffff !important;
background-image: linear-gradient(90deg, rgba(240, 240, 240, 0.3) 25%, rgba(224, 224, 224, 0.5) 50%, rgba(240, 240, 240, 0.3) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
/* CRITICAL: Match loaded content - use same padding and flex properties */
padding: 0.5rem 0.5rem 0.375rem 0.5rem !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: center !important;
flex-grow: 1 !important;
position: relative !important;
}
.competition-blurb.skeleton-shimmer {
/* Pure shimmer overlay: let shared .competition-blurb CSS control geometry */
background: #e0e0e0 !important;
border-radius: 4px;
}
.play-now-button.skeleton-shimmer {
/* Pure shimmer overlay for the CTA button - dimensions come from shared CSS */
background: #e0e0e0 !important;
border-radius: 4px;
pointer-events: none !important;
}
.bookmaker-logo.skeleton-shimmer {
pointer-events: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* --- Bookmaker Logo Skeleton - Responsive Dimensions (Gemini Solution) --- */
/* Mobile/Base (max-width: 767px) - Match Mobile: 48px x 24px */
@media (max-width: 767px) {
.bookmaker-logo.skeleton-shimmer .logo-wrapper .skeleton-logo-placeholder {
width: 48px !important;
height: 24px !important;
max-width: 48px !important;
max-height: 24px !important;
min-width: 48px !important;
min-height: 24px !important;
background: #e0e0e0 !important;
background-image: linear-gradient(90deg, rgba(240, 240, 240, 0.3) 25%, rgba(224, 224, 224, 0.5) 50%, rgba(240, 240, 240, 0.3) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
display: block !important;
}
}
/* Base Desktop (min-width: 768px - 1023px) - Match Loaded: max-width: 55px; max-height: 30px; */
@media (min-width: 768px) {
.bookmaker-logo.skeleton-shimmer .logo-wrapper .skeleton-logo-placeholder {
width: 55px !important;
height: 30px !important;
max-width: 55px !important;
max-height: 30px !important;
min-width: 55px !important;
min-height: 30px !important;
background: #e0e0e0 !important;
background-image: linear-gradient(90deg, rgba(240, 240, 240, 0.3) 25%, rgba(224, 224, 224, 0.5) 50%, rgba(240, 240, 240, 0.3) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
display: block !important;
}
}
/* Desktop 1024px+ - Match Loaded: max-width: 63px; max-height: 34px; */
@media (min-width: 1024px) {
.bookmaker-logo.skeleton-shimmer .logo-wrapper .skeleton-logo-placeholder {
width: 63px !important;
height: 34px !important;
max-width: 63px !important;
max-height: 34px !important;
min-width: 63px !important;
min-height: 34px !important;
}
}
/* Desktop 1280px+ - Match Loaded: max-width: 71px; max-height: 38px; */
@media (min-width: 1280px) {
.bookmaker-logo.skeleton-shimmer .logo-wrapper .skeleton-logo-placeholder {
width: 71px !important;
height: 38px !important;
max-width: 71px !important;
max-height: 38px !important;
min-width: 71px !important;
min-height: 38px !important;
}
}
/* --- Timer Skeleton - Use EXACT Same Classes as Loaded Timer --- */
/* The skeleton timer wrapper should inherit ALL properties from .timer class */
/* Only add shimmer effect to the inner div, no other overrides */
.timer.skeleton-shimmer {
/* CRITICAL: Don't override anything - let it inherit from .timer class */
/* Only ensure shimmer background is transparent on wrapper */
background: 0 0 !important;
}
/* Inner shimmer div - simple block with shimmer, inherits positioning from parent */
.timer .skeleton-shimmer {
width: 110px !important;
height: 19px !important;
display: inline-block !important;
background: #e0e0e0 !important;
background-image: linear-gradient(90deg, rgba(240, 240, 240, 0.3) 25%, rgba(224, 224, 224, 0.5) 50%, rgba(240, 240, 240, 0.3) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: 4px;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle !important;
}
/* --- Desktop 768px+ Timer Skeleton --- */
@media (min-width: 768px) {
.timer.skeleton-shimmer {
font-size: 16px !important; /* Match loaded font-size at 768px+ */
padding: 0 !important; /* No padding at 768px+ */
}
}
/* --- Desktop 1024px+ Timer Skeleton --- */
@media (min-width: 1024px) {
.timer.skeleton-shimmer {
font-size: 18px !important; /* Match loaded font-size */
min-width: 85px !important; /* Match loaded min-width */
padding: 0.5rem 1rem !important; /* Match loaded padding */
}
}
/* --- Desktop 1280px+ Timer Skeleton --- */
@media (min-width: 1280px) {
.timer.skeleton-shimmer {
/* Note: 1.125rem font size is roughly 18px. If your base font is 16px, 1.125rem is 18px. */
font-size: 1.125rem !important; /* Match loaded font-size */
min-width: 95px !important; /* Match loaded min-width */
padding: 0.625rem 1.25rem !important; /* Match loaded padding */
}
}
/* --- Mobile Fix (max-width: 767px) - Gemini Solution --- */
@media (max-width: 767px) {
.timer.skeleton-shimmer {
/* Override desktop absolute positioning for mobile Flexbox */
position: static !important;
transform: none !important;
top: auto !important;
/* Match mobile properties */
font-size: 12px !important; /* Match loaded font-size */
min-width: auto !important;
padding: 0 !important; /* Match loaded override */
margin-left: auto !important; /* Match loaded flex behavior */
}
}
/* CRITICAL FIX: Make timer placeholder invisible on Daily Free Games page to match dimensions but hide timer */
.daily-free-games-page .competition-top-border .timer.skeleton-shimmer > div {
/* Keep timer HTML for structural parity, but make it visually invisible on Daily Free Games */
background-color: transparent !important;
opacity: 0 !important;
}
/* Sports offers skeletons */
.sports-offer-skeleton {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
min-height: 140px; /* Match actual offer card height to prevent jolting */
height: 140px; /* Fixed height to prevent CLS */
}
.sports-offer-skeleton .skeleton-logo {
width: 80px;
height: 80px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 8px;
flex-shrink: 0;
}
.sports-offer-skeleton .skeleton-content {
flex: 1;
}
.sports-offer-skeleton .skeleton-line {
height: 16px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 4px;
margin-bottom: 0.5rem;
}
.sports-offer-skeleton .skeleton-line.short {
width: 60%;
}
.sports-offer-skeleton .skeleton-button {
width: 140px;
height: 45px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 6px;
flex-shrink: 0;
}
/* Prevent CLS on sports offers */
.sports-offers-page .offers-list {
min-height: 300px; /* 3 skeletons */
}
/* REMOVED: Old .no-wager-offer-skeleton classes - now using shared classes strategy */
/* Fix CLS on main containers across all pages */
.main-container {
min-height: 0 !important; /* REMOVED - was causing CLS on sports/casino pages */
}
/* Target specific pages that need min-heights */
.signup-offers-page .offers-list,
.sports-offers-page .offers-list {
min-height: 300px !important; /* Reserve space for skeletons */
}
.analysis-section {
min-height: 0 !important; /* No need - content is static */
}
.grid-row-wrapper {
min-height: 100px !important; /* Reduced - reserve minimal space for grid items */
}
/* Fix individual page layout shifts - TARGETED FIX */
.individual-competition-page .competition-layout {
min-height: 0 !important; /* Let it size naturally - the issue is somewhere else */
}
/* Fix the actual container - NO MIN-HEIGHT to prevent excessive space (body scope = zero impact on jackpot/daily) */
body.individual-competition-page .main-content .container {
min-height: 0 !important; /* No forced height */
}
/* Remove game-hero-section min-height to prevent hero section height issues */
.individual-competition-page .game-hero-section {
min-height: 0 !important;
}
/* Ensure carousel sections have space */
.homepage .games-scroll {
min-height: 200px !important;
}
/* Fix betting sites page container shifts - REDUCED */
.bookmaker-section {
min-height: 0 !important; /* Removed to prevent CLS */
}
/* REMOVED - this was causing the container shifts */
/* Ensure nav bar doesn't have min-height */
.betting-sites-page header .container,
.betting-sites-page nav .container,
header .container,
nav .container {
min-height: 0 !important;
overflow: visible !important;
}
/* Fix filter sections causing shifts */
.filters-section {
min-height: 100px !important;
}
/* Fix results count section */
.results-count-section {
min-height: 50px !important;
}
/* Font loading optimization - already set in @font-face rules above */
/* Breadcrumb trail styling */
.breadcrumb-trail {
color: #022e4a !important;
}
.breadcrumb-trail a {
color: #022e4a !important;
text-decoration: none;
}
.breadcrumb-trail a:hover {
text-decoration: underline;
}
.breadcrumb-trail span {
color: #022e4a !important;
font-weight: bold;
}
/* Align breadcrumb with hero content padding for how-we-rate pages */
/* Homepage hero-content has padding: 0 2rem, so breadcrumb container (1rem) + breadcrumb (1rem) = 2rem total */
.how-we-rate-page .breadcrumb-trail,
.how-we-rate-criterion .breadcrumb-trail {
padding-left: 1rem !important;
}
/* Bold text class (replacement for strong tags) */
.bold-text {
font-weight: bold;
display: inline;
}
/* Hide author separator pipes on mobile */
@media (max-width: 767px) {
.hero-author-info .author-sep {
display: none !important;
}
}
/* Desktop: Jackpot + Daily show FULL line – exact same as daily, no flicker */
@media (min-width: 768px) {
body.jackpot-competitions-page .hero-author-info .author-expertise,
body.daily-free-games-page .hero-author-info .author-expertise {
display: inline-block !important;
}
body.jackpot-competitions-page .hero-author-info .author-row + .author-sep,
body.daily-free-games-page .hero-author-info .author-row + .author-sep,
body.jackpot-competitions-page .hero-author-info .author-expertise + .author-sep,
body.daily-free-games-page .hero-author-info .author-expertise + .author-sep {
display: inline-block !important;
}
}
/* How We Rate pages and About page: Use EXACT homepage hero styling */
.how-we-rate-page .hero-section,
.how-we-rate-criterion .hero-section,
.about-page .hero-section {
background: linear-gradient(135deg, #022e4a 0%, #004d7a 100%) !important;
color: white !important;
padding: 1.5rem 0 0rem 0 !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
position: relative !important;
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
}
.how-we-rate-page .hero-content,
.how-we-rate-criterion .hero-content,
.about-page .hero-content {
display: flex !important;
align-items: flex-start !important;
gap: 2rem !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
}
.how-we-rate-page .hero-text,
.how-we-rate-criterion .hero-text,
.about-page .hero-text {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
.how-we-rate-page .hero-title,
.how-we-rate-criterion .hero-title,
.how-we-rate-page .hero-section h1,
.how-we-rate-criterion .hero-section h1,
.about-page .hero-title,
.about-page .hero-section h1 {
font-size: var(--fs-page-hero-title) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
margin-bottom: 1rem !important;
color: white !important;
text-transform: uppercase !important;
width: 100% !important;
text-align: left !important;
}
.how-we-rate-page .hero-subtitle,
.how-we-rate-criterion .hero-subtitle,
.how-we-rate-page .hero-section .hero-subtitle,
.how-we-rate-criterion .hero-section .hero-subtitle,
.about-page .hero-subtitle,
.about-page .hero-section .hero-subtitle {
font-size: var(--fs-page-hero-sub) !important;
line-height: 1.4 !important;
color: rgba(255, 255, 255, 0.9) !important;
margin: 0 0 1rem 0 !important;
width: 100% !important;
text-align: left !important;
}
/* Mobile Hero Section - EXACT same as homepage */
@media (max-width: 767px) {
.how-we-rate-page .hero-section,
.how-we-rate-criterion .hero-section,
.about-page .hero-section {
padding: 1rem 0 !important;
}
.how-we-rate-page .hero-content,
.how-we-rate-criterion .hero-content,
.about-page .hero-content {
flex-direction: column !important;
gap: 1.5rem !important;
padding: 0 1rem !important;
text-align: left !important;
}
.how-we-rate-page .hero-text,
.how-we-rate-criterion .hero-text,
.about-page .hero-text {
align-items: flex-start !important;
}
.how-we-rate-page .hero-title,
.how-we-rate-criterion .hero-title,
.how-we-rate-page .hero-section h1,
.how-we-rate-criterion .hero-section h1,
.about-page .hero-title,
.about-page .hero-section h1 {
font-size: var(--fs-page-hero-title) !important;
text-align: left !important;
}
.how-we-rate-page .hero-subtitle,
.how-we-rate-criterion .hero-subtitle,
.how-we-rate-page .hero-section .hero-subtitle,
.how-we-rate-criterion .hero-section .hero-subtitle,
.about-page .hero-subtitle,
.about-page .hero-section .hero-subtitle {
font-size: var(--fs-page-hero-sub) !important;
text-align: left !important;
position: relative;
line-height: 1.4;
margin: 0 0 1rem 0 !important;
}
/* JavaScript handles all truncation logic */
/* CSS just provides styling for the states */
.how-we-rate-page .hero-subtitle.truncated,
.how-we-rate-page .hero-subtitle.expanded,
.how-we-rate-criterion .hero-subtitle.truncated,
.how-we-rate-criterion .hero-subtitle.expanded,
.about-page .hero-subtitle.truncated,
.about-page .hero-subtitle.expanded {
display: block;
}
}
/* Small Desktop - EXACT same as homepage */
@media (min-width: 768px) and (max-width: 1023px) {
.how-we-rate-page .hero-section,
.how-we-rate-criterion .hero-section,
.about-page .hero-section {
padding: 1.25rem 0 !important;
}
.how-we-rate-page .hero-content,
.how-we-rate-criterion .hero-content,
.about-page .hero-content {
gap: 1.75rem !important;
padding: 0 0.5rem !important;
}
.how-we-rate-page .hero-title,
.how-we-rate-criterion .hero-title,
.how-we-rate-page .hero-section h1,
.how-we-rate-criterion .hero-section h1,
.about-page .hero-title,
.about-page .hero-section h1 {
font-size: var(--fs-page-hero-title) !important;
}
.how-we-rate-page .hero-subtitle,
.how-we-rate-criterion .hero-subtitle,
.how-we-rate-page .hero-section .hero-subtitle,
.how-we-rate-criterion .hero-section .hero-subtitle,
.about-page .hero-subtitle,
.about-page .hero-section .hero-subtitle {
font-size: var(--fs-page-hero-sub) !important;
}
}
/* How We Rate and About: keep title and subtitle constrained to left (like homepage) */
@media (min-width: 1024px) {
.how-we-rate-page .hero-title,
.how-we-rate-criterion .hero-title,
.how-we-rate-page .hero-section h1,
.how-we-rate-criterion .hero-section h1,
.how-we-rate-page .hero-subtitle,
.how-we-rate-criterion .hero-subtitle,
.how-we-rate-page .hero-section .hero-subtitle,
.how-we-rate-criterion .hero-section .hero-subtitle,
.about-page .hero-title,
.about-page .hero-section h1,
.about-page .hero-subtitle,
.about-page .hero-section .hero-subtitle {
max-width: 560px !important;
}
.how-we-rate-page .hero-subtitle,
.how-we-rate-criterion .hero-subtitle,
.how-we-rate-page .hero-section .hero-subtitle,
.how-we-rate-criterion .hero-section .hero-subtitle,
.about-page .hero-subtitle,
.about-page .hero-section .hero-subtitle {
width: 100% !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
}
}
/* ===== BONUS GRID HEADING STYLES ===== */
/* Matches the exact layout of ranked offer cards for perfect alignment */
.casino-bonus-page .offers-section,
.no-wagering-page .offers-section {
margin: 0.2rem 0 2rem 0;
}
@media (min-width: 992px) {
/* BONUS-GRID-HEADING – RANKED PAGES: centre of label over centre of content (rank 80px, logo 120px, blurb 1fr, button 250px) */
.no-wagering-page .bonus-grid-heading,
.signup-offers-page .bonus-grid-heading:has(span),
.casino-bonus-page .bonus-grid-heading {
background: linear-gradient(135deg, #0fbf6b 0%, #0b8b4f 100%);
color: #ffffff;
border-radius: 0.5rem;
padding: 0.45rem 0;
margin: 0.75rem 0 0.75rem;
display: grid;
grid-template-columns: 85px 2rem 110px 2rem minmax(0, 1fr) 2rem 233px;
align-items: center;
gap: 0;
box-shadow: none;
line-height: 1.1;
}
.no-wagering-page .bonus-grid-heading span:first-child,
.casino-bonus-page .bonus-grid-heading span:first-child { grid-column: 1; text-align: center; }
.no-wagering-page .bonus-grid-heading span:nth-child(2),
.casino-bonus-page .bonus-grid-heading span:nth-child(2) { grid-column: 3; text-align: center; }
.no-wagering-page .bonus-grid-heading h2,
.casino-bonus-page .bonus-grid-heading h2 { grid-column: 5; text-align: center; }
.no-wagering-page .bonus-grid-heading span:last-child,
.casino-bonus-page .bonus-grid-heading span:last-child { grid-column: 7; text-align: center; }
/* ============================================
SPORTS SIGNUP OFFERS PAGE: PURPOSE-BUILT GREEN BOX - NO GRID TEMPLATE COLUMNS
Uses :not(:has(span)) to target sports page (no spans, only h2)
DUPLICATES GREEN BOX STYLING BUT WITHOUT GRID
============================================ */
.signup-offers-page .bonus-grid-heading:not(:has(span)) {
/* DUPLICATE GREEN BOX - SAME AS CASINO BUT NO GRID */
background: linear-gradient(135deg, #0fbf6b 0%, #0b8b4f 100%) !important;
color: #ffffff !important;
border-radius: 0.5rem !important;
padding: 0.45rem 0.75rem 0.45rem 0.4rem !important;
margin: 0.75rem 0 0.75rem !important;
box-shadow: none !important;
line-height: 1.1 !important;
/* NO GRID - SIMPLE BLOCK CENTERING */
display: block !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
/* EXPLICITLY OVERRIDE GRID-TEMPLATE-COLUMNS */
grid-template-columns: none !important;
grid: none !important;
}
/* Ranked pages span/h2 font set above (var(--fs-h2)) – no-wagering uses same as signup/casino-bonus */
/* SPORTS SIGNUP OFFERS PAGE H2/OFFERS-COUNT: CENTERED WHITE TEXT - NO GRID */
.signup-offers-page .bonus-grid-heading:not(:has(span)) h2,
.signup-offers-page .bonus-grid-heading:not(:has(span)) #offers-count {
/* INLINE-BLOCK CENTERS WITH TEXT-ALIGN ON PARENT */
display: inline-block !important;
margin: 0 auto !important;
width: auto !important;
/* TYPOGRAPHY - WHITE CAPITALIZED TEXT */
font-size: 16px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
opacity: 0.95 !important;
text-align: center !important;
white-space: normal !important;
line-height: 1.1 !important;
/* RESET ALL POSITIONING */
padding: 0 !important;
position: static !important;
float: none !important;
clear: none !important;
/* REMOVE ALL GRID PROPERTIES */
grid-column: auto !important;
grid-row: auto !important;
grid-area: auto !important;
justify-self: auto !important;
align-self: auto !important;
}
/* bonus-grid-heading h2: use global scale */
.no-wagering-page .bonus-grid-heading h2,
.signup-offers-page .bonus-grid-heading h2 {
font-size: var(--fs-h2) !important;
}
.signup-offers-page .bonus-grid-heading:not(:has(span)) #offers-count {
font-size: var(--fs-base) !important;
}
/* Ranked pages: span alignment (Rank, Casino, Claim Offer) – signup, no-wagering, casino-bonus */
.no-wagering-page .bonus-grid-heading span,
.casino-bonus-page .bonus-grid-heading span {
display: flex;
align-items: center;
justify-content: center;
}
/* Rank / Casino / h2 / Claim Offer alignment handled in shared block above */
}
/* Mobile/Desktop title visibility for no-wagering and no-deposit pages */
/* Below 440px: show mobile title, hide desktop title */
@media (max-width: 439px) {
.no-wagering-page .bonus-grid-heading .mobile-title {
display: block !important;
}
.no-wagering-page .bonus-grid-heading .desktop-title {
display: none !important;
}
}
/* Above 440px: hide mobile title, show desktop title */
@media (min-width: 440px) {
.no-wagering-page .bonus-grid-heading .mobile-title {
display: none !important;
}
.no-wagering-page .bonus-grid-heading .desktop-title {
display: block !important;
}
}
@media (max-width: 479px) {
/* Mobile: always 16px (var) for readability – never 14px */
.no-wagering-page .bonus-grid-heading h2,
.signup-offers-page .bonus-grid-heading h2,
.jackpot-competitions-page .bonus-grid-heading h2 {
font-size: var(--fs-base) !important; /* 16px */
}
}
/* 480px+: 16px font size for all bonus-grid-headings */
@media (min-width: 480px) and (max-width: 991px) {
.no-wagering-page .bonus-grid-heading h2,
.signup-offers-page .bonus-grid-heading h2,
.jackpot-competitions-page .bonus-grid-heading h2 {
font-size: 1rem !important; /* 16px from 480px+ */
}
.signup-offers-page .bonus-grid-heading:not(:has(span)) h2,
.signup-offers-page .bonus-grid-heading:not(:has(span)) #offers-count {
font-size: 1rem !important; /* 16px from 480px+ */
}
}
@media (max-width: 991px) {
/* ONLY FOR NO-WAGERING AND SIGNUP-OFFERS (NOT SPORTS) */
.no-wagering-page .bonus-grid-heading,
.signup-offers-page .bonus-grid-heading {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 0.6rem 1rem;
margin: 0.75rem 0 0.75rem;
background: linear-gradient(135deg, #0fbf6b 0%, #0b8b4f 100%);
color: #ffffff;
border-radius: 0.5rem;
box-shadow: none;
}
.no-wagering-page .bonus-grid-heading span,
.signup-offers-page .bonus-grid-heading span {
display: none;
}
.no-wagering-page .bonus-grid-heading h2,
.signup-offers-page .bonus-grid-heading h2 {
display: block !important;
margin: 0 !important;
font-size: var(--fs-base) !important; /* 16px – always readable on mobile */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #ffffff !important;
text-align: center !important;
width: auto !important;
}
}
/* 480px+: 16px font size for all bonus-grid-headings */
@media (min-width: 480px) and (max-width: 991px) {
.no-wagering-page .bonus-grid-heading h2,
.signup-offers-page .bonus-grid-heading h2,
.jackpot-competitions-page .bonus-grid-heading h2 {
font-size: 1rem !important; /* 16px from 480px+ */
}
.signup-offers-page .bonus-grid-heading:not(:has(span)) h2,
.signup-offers-page .bonus-grid-heading:not(:has(span)) #offers-count {
font-size: 1rem !important; /* 16px from 480px+ */
}
}
@media (max-width: 991px) {
/* ONLY FOR NO-WAGERING AND SIGNUP-OFFERS (NOT SPORTS) */
.no-wagering-page .bonus-grid-heading,
.signup-offers-page .bonus-grid-heading {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 0.6rem 1rem;
margin: 0.75rem 0 0.75rem;
background: linear-gradient(135deg, #0fbf6b 0%, #0b8b4f 100%);
color: #ffffff;
border-radius: 0.5rem;
box-shadow: none;
}
.no-wagering-page .bonus-grid-heading span,
.signup-offers-page .bonus-grid-heading span {
display: none;
}
/* SPORTS SIGNUP OFFERS PAGE: MOBILE - GREEN BOX CENTERING */
.signup-offers-page .bonus-grid-heading:not(:has(span)) {
display: block !important;
text-align: center !important;
background: linear-gradient(135deg, #0fbf6b 0%, #0b8b4f 100%) !important;
color: #ffffff !important;
border-radius: 0.5rem !important;
padding: 0.6rem 1rem !important;
margin: 0.75rem 0 0.75rem !important;
box-shadow: none !important;
}
.signup-offers-page .bonus-grid-heading:not(:has(span)) h2,
.signup-offers-page .bonus-grid-heading:not(:has(span)) #offers-count {
display: block !important;
margin: 0 !important;
font-size: var(--fs-base) !important; /* 16px – always readable on mobile */
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
color: #ffffff !important;
text-align: center !important;
width: auto !important;
}
}
/* ============================================
JACKPOT COMPETITIONS PAGE: BONUS-GRID-HEADING
Match exact dimensions from signup-offers-page and no-wagering-page
============================================ */
.jackpot-competitions-page .bonus-grid-heading,
.daily-free-games-page .bonus-grid-heading {
margin: 0.75rem 0 0.75rem;
}
/* Red background for expired competitions */
.jackpot-competitions-page .bonus-grid-heading.expired-competitions {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}
/* Mobile (up to 991px) - match competition-grid width exactly with padding */
@media (max-width: 991px) {
.jackpot-competitions-page .bonus-grid-heading,
.daily-free-games-page .bonus-grid-heading {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 0.6rem 1rem !important; /* Match competition-grid mobile padding */
background: linear-gradient(135deg, #0fbf6b 0%, #0b8b4f 100%);
color: #ffffff;
border-radius: 0.5rem;
box-shadow: none;
line-height: 1.1 !important;
max-width: 1400px !important; /* Match competition-grid max-width */
box-sizing: border-box !important;
}
/* Reduce spacing between daily free games header and competition boxes on mobile only */
.daily-free-games-page #daily-games-section .bonus-grid-heading {
margin-bottom: 0.5rem !important; /* Reduced from 0.75rem */
}
/* Expired should be red - more specific to override desktop rule */
.jackpot-competitions-page .bonus-grid-heading.expired-competitions,
.jackpot-competitions-page #expired-games .bonus-grid-heading.expired-competitions {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}
.jackpot-competitions-page .bonus-grid-heading h2,
.daily-free-games-page .bonus-grid-heading h2 {
display: block !important;
margin: 0 !important;
font-size: var(--fs-base) !important; /* 16px mobile – same as all bonus-grid-heading */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #ffffff !important;
text-align: center !important;
width: 100% !important; /* Span full width */
line-height: 1.1 !important; /* Match line-height */
}
}
/* Below 420px: Show mobile header, hide desktop header */
@media (max-width: 419px) {
.jackpot-competitions-page .bonus-grid-heading.desktop-header,
.daily-free-games-page .bonus-grid-heading.desktop-header {
display: none !important;
}
.jackpot-competitions-page .bonus-grid-heading.mobile-header,
.daily-free-games-page .bonus-grid-heading.mobile-header {
display: block !important;
}
}
/* 420px+: Show desktop header, hide mobile header */
@media (min-width: 420px) {
.jackpot-competitions-page .bonus-grid-heading.desktop-header,
.daily-free-games-page .bonus-grid-heading.desktop-header {
display: block !important;
}
.jackpot-competitions-page .bonus-grid-heading.mobile-header,
.daily-free-games-page .bonus-grid-heading.mobile-header {
display: none !important;
}
}
/* 480px+ to 991px: 16px (var(--fs-base)) – same as global bonus-grid-heading mobile */
@media (min-width: 480px) and (max-width: 991px) {
.jackpot-competitions-page .bonus-grid-heading h2,
.daily-free-games-page .bonus-grid-heading h2 {
font-size: var(--fs-base) !important;
}
}
/* Desktop (992px+) - match signup-offers-page structure exactly */
@media (min-width: 992px) {
/* General rule for bonus-grid-heading - but NOT for live/expired sections */
.jackpot-competitions-page .bonus-grid-heading:not(#live-rounds-section .bonus-grid-heading):not(#expired-games .bonus-grid-heading),
.daily-free-games-page .bonus-grid-heading:not(#daily-games-section .bonus-grid-heading) {
background: linear-gradient(135deg, #0fbf6b 0%, #0b8b4f 100%);
color: #ffffff;
border-radius: 0.5rem;
padding: 0.45rem 0.75rem 0.45rem 0.4rem !important;
margin: 0.75rem auto !important;
display: block;
text-align: center;
box-shadow: none;
line-height: 1.1 !important;
min-height: auto;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.jackpot-competitions-page .bonus-grid-heading h2,
.daily-free-games-page .bonus-grid-heading h2 {
margin: 0 !important;
font-size: var(--fs-h2) !important; /* 20px desktop – same as all bonus-grid-heading */
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
color: #ffffff !important;
text-align: center !important;
line-height: 1.1 !important;
}
/* SPECIFIC RULE FOR LIVE/EXPIRED SECTIONS – heading spans full width of section (like mobile); only font size scales at 992+ */
/* APPLY TO BOTH JACKPOT COMPETITIONS AND DAILY FREE GAMES */
.jackpot-competitions-page #live-rounds-section .bonus-grid-heading,
.jackpot-competitions-page #expired-games .bonus-grid-heading,
.daily-free-games-page #daily-games-section .bonus-grid-heading {
background: linear-gradient(135deg, #0fbf6b 0%, #0b8b4f 100%) !important;
color: #ffffff !important;
border-radius: 0.5rem !important;
padding: 0.45rem 0 0.45rem 0 !important; /* No left/right padding – span full width of section */
margin-top: 0 !important;
margin-bottom: 0.75rem !important;
text-align: center !important;
box-shadow: none !important;
line-height: 1.1 !important;
min-height: auto !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: block !important;
margin-left: 0 !important;
margin-right: 0 !important;
position: relative !important;
left: auto !important;
transform: none !important;
}
/* Override background for expired - must override the green background rule above */
.jackpot-competitions-page #expired-games .bonus-grid-heading.expired-competitions {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}
/* Also ensure expired is red even without .expired-competitions class */
.jackpot-competitions-page #expired-games .bonus-grid-heading {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}
/* GEMINI SOLUTION: Two distinct desktop ranges */
/* 992px - 1449px: padding-right is 0, use viewport-based centering */
/* 1450px+: padding-right is 340px, use left: 130px offset to shift header right */
/* Range 1: 992px to 1449px - Padding is 0, use EXACT same logic as expired (which works perfectly) */
/* Same structure as desktop (1450px+) but with left: auto (no offset) since padding-right is 0 */
.jackpot-competitions-page #live-rounds-section .bonus-grid-heading,
.daily-free-games-page #daily-games-section .bonus-grid-heading {
position: relative !important;
left: auto !important; /* Same as expired - no offset needed when padding-right is 0 */
transform: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Expired works perfectly - DO NOT CHANGE THIS */
.jackpot-competitions-page #expired-games .bonus-grid-heading {
position: relative !important;
left: auto !important;
transform: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Ensure h2 text is centered - override any conflicting rules */
.jackpot-competitions-page #live-rounds-section .bonus-grid-heading h2,
.jackpot-competitions-page #expired-games .bonus-grid-heading h2,
.daily-free-games-page #daily-games-section .bonus-grid-heading h2 {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 100% !important;
}
/* Ensure desktop header shows and mobile header hides on desktop */
.jackpot-competitions-page #live-rounds-section .bonus-grid-heading.desktop-header,
.jackpot-competitions-page #expired-games .bonus-grid-heading.desktop-header,
.daily-free-games-page #daily-games-section .bonus-grid-heading.desktop-header {
display: block !important;
}
.jackpot-competitions-page #live-rounds-section .bonus-grid-heading.mobile-header,
.jackpot-competitions-page #expired-games .bonus-grid-heading.mobile-header,
.daily-free-games-page #daily-games-section .bonus-grid-heading.mobile-header {
display: none !important;
}
}
/* 1024px+: Bonus grid heading spans competition grid width only; flush with grid left/right (no section-title inset) */
@media (min-width: 1024px) {
/* Remove section-title padding so heading bar aligns with grid wrapper left/right */
.jackpot-competitions-page #live-rounds-section .section-title,
.jackpot-competitions-page #expired-games.section-title {
padding-left: 0 !important;
padding-right: 0 !important;
}
.jackpot-competitions-page #live-rounds-section .bonus-grid-heading,
.jackpot-competitions-page #expired-games .bonus-grid-heading,
.daily-free-games-page #daily-games-section .bonus-grid-heading {
width: calc(3 * 300px + 2 * 0.75rem) !important;
max-width: calc(3 * 300px + 2 * 0.75rem) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
}
/* Range 2 - 1450px+: Use same logic as expired (no padding-right, so no offset needed) */
@media (min-width: 1450px) {
.jackpot-competitions-page #live-rounds-section .bonus-grid-heading,
.daily-free-games-page #daily-games-section .bonus-grid-heading {
position: relative !important;
left: auto !important; /* No offset needed - same as expired header */
transform: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Add spacing between hero section and competition boxes/headers */
/* APPLY TO BOTH JACKPOT COMPETITIONS AND DAILY FREE GAMES */
.jackpot-competitions-page #live-rounds-section,
.daily-free-games-page #daily-games-section {
position: relative !important; /* positioning context for right module */
/* padding-right removed - header centers properly without it */
}
/* 920px+: Live and expired use same horizontal spacing (0.5rem) so margins match */
@media (min-width: 920px) {
.jackpot-competitions-page #live-rounds-section,
.jackpot-competitions-page #expired-games,
.jackpot-competitions-page #expired-games-grid {
box-sizing: border-box;
}
}
/* CANONICAL: Jackpot + Daily – bonus grid headers get exactly 1rem top and 1rem bottom; grid wrapper has no extra top margin so header-to-grid gap is 1rem. */
body.jackpot-competitions-page #live-rounds-section.section-title,
body.jackpot-competitions-page #live-rounds-section .section-title,
body.jackpot-competitions-page #expired-games.section-title,
body.daily-free-games-page #daily-games-section.section-title,
body.daily-free-games-page #daily-games-section .section-title {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
body.jackpot-competitions-page #live-rounds-section .bonus-grid-heading,
body.jackpot-competitions-page #expired-games .bonus-grid-heading,
body.daily-free-games-page #daily-games-section .bonus-grid-heading {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Grid wrapper: no extra top margin on desktop (1024px+) – section-title provides spacing. Below 1024px the 1rem gap is from the max-width: 1023px block so skeleton and loaded content match. */
@media (min-width: 1024px) {
body.jackpot-competitions-page #live-rounds-wrapper,
body.daily-free-games-page .grid-row-wrapper {
margin-top: 0 !important;
}
}
/* Default: 1rem gap when live competitions are present (overridden by canonical block above for #expired-games) */
.jackpot-competitions-page #expired-games {
margin-top: 1rem !important;
}
/* Mobile: same left/right spacing (0.5rem) as live rounds – expired section and its grid */
/* Mobile: 1rem gap above and below expired rounds header so spacing is even */
@media (max-width: 767px) {
.jackpot-competitions-page #expired-games,
.jackpot-competitions-page #expired-games-grid {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
box-sizing: border-box;
}
.jackpot-competitions-page #expired-games.section-title {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
/* Expired rounds bonus grid heading only: no left/right padding so bar spans full width of #expired-games content area */
.jackpot-competitions-page #expired-games .bonus-grid-heading {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* When no live competitions, expired section takes place of live section - needs 2rem spacing */
/* Body class is added/removed by JavaScript based on whether live competitions exist */
/* More specific selector to ensure it overrides the default */
body.no-live-competitions.jackpot-competitions-page #expired-games {
margin-top: 1rem !important; /* 2rem gap from hero section when live section is hidden */
}
/* Desktop only: Add spacing between hero section and competition boxes/headers */
/* JACKPOT COMPETITIONS ONLY - Daily free games should not have this */
@media (min-width: 992px) {
.jackpot-competitions-page #live-rounds-section {
margin-top: 1rem !important; /* Space from hero section - desktop only */
}
/* Daily free games also needs desktop spacing, but NOT on mobile */
.daily-free-games-page #daily-games-section {
margin-top: 1rem !important; /* Space from hero section - desktop only */
}
}
/* padding-right rules removed - header centers properly at all breakpoints */
/* Base: keep module off by default, reset legacy positioning */
/* APPLY TO BOTH JACKPOT COMPETITIONS AND DAILY FREE GAMES */
.jackpot-competitions-page #live-rounds-section .jackpot-games-right-module,
.daily-free-games-page #daily-games-section .daily-free-games-right-module {
display: none !important;
position: absolute !important;
top: 303px !important; /* No prize calculator, so start lower */
right: 0 !important;
left: auto !important;
width: 320px !important;
padding: 15px !important;
background: #f8f9fa !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(2, 46, 74, 0.12), 0 2px 6px rgba(2, 46, 74, 0.06) !important;
z-index: 10 !important;
visibility: hidden !important;
opacity: 0 !important;
}
@media (min-width: 1450px) {
/* Show module alongside heading on desktop */
/* APPLY TO BOTH JACKPOT COMPETITIONS AND DAILY FREE GAMES */
.jackpot-competitions-page #live-rounds-section .jackpot-games-right-module,
.daily-free-games-page #daily-games-section .daily-free-games-right-module {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* Remove old live-indicator and expired-indicator styles for jackpot-competitions */
.jackpot-competitions-page .section-title h2.live-indicator::before,
.jackpot-competitions-page .section-title h2.expired-indicator::before {
display: none !important;
}
/* ============================================
SPORTS SIGNUP OFFERS PAGE: FINAL OVERRIDE - GREEN BOX, NO GRID-TEMPLATE-COLUMNS
PLACED AT END OF FILE TO ENSURE IT WINS - MAXIMUM SPECIFICITY
Uses :not(:has(span)) to target sports page (no spans, only h2)
============================================ */
@media (min-width: 992px) {
html body .signup-offers-page .bonus-grid-heading:not(:has(span)) {
/* GREEN BOX - SAME AS CASINO BUT NO GRID */
display: block !important;
text-align: center !important;
background: linear-gradient(135deg, #0fbf6b 0%, #0b8b4f 100%) !important;
color: #ffffff !important;
border-radius: 0.5rem !important;
padding: 0.45rem 0.75rem 0.45rem 0.4rem !important;
margin: 0.75rem 0 0.75rem !important;
box-shadow: none !important;
line-height: 1.1 !important;
/* ABSOLUTELY NO GRID-TEMPLATE-COLUMNS - OVERRIDE EVERYTHING */
grid-template-columns: none !important;
grid: none !important;
}
html body .signup-offers-page .bonus-grid-heading:not(:has(span)) h2,
html body .signup-offers-page .bonus-grid-heading:not(:has(span)) #offers-count {
display: inline-block !important;
margin: 0 auto !important;
width: auto !important;
text-align: center !important;
color: #ffffff !important;
}
}
/* ============================================
HOMEPAGE CAROUSEL SKELETON LOADERS
INDUSTRY-STANDARD APPROACH: Use same CSS classes as actual content
============================================ */
/*
* GEMINI'S RECOMMENDATION: Use shared classes so skeleton automatically matches actual content dimensions
*
* HOW IT WORKS:
* - Skeleton HTML uses: .game-item, .game-image, .game-top-border (SAME as actual content)
* - Only adds .skeleton-shimmer class for the shimmer animation effect
* - Skeleton automatically inherits ALL dimensions from actual content classes
* - If actual content dimensions change, skeleton automatically matches (zero brittleness)
*
* BENEFITS:
* ✅ Zero layout shift - perfect dimension matching
* ✅ Zero brittleness - automatically matches if content changes
* ✅ Works across all breakpoints automatically
* ✅ Industry-standard approach
*/
/* SKELETON SHIMMER ANIMATION: Only add shimmer effect, dimensions come from actual content classes */
.skeleton-shimmer {
/* Shimmer animation overlay */
background-image: linear-gradient(90deg, rgba(240, 240, 240, 0.3) 25%, rgba(224, 224, 224, 0.5) 50%, rgba(240, 240, 240, 0.3) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
}
/* Skeleton image gets shimmer effect (not dark background) */
.game-image.skeleton-shimmer {
background: #f0f0f0 !important; /* Light gray base for shimmer visibility */
}
/* Skeleton top border gets white background */
.game-top-border.skeleton-shimmer {
background: #ffffff !important;
}
/* Keyframe animation for shimmer effect */
@keyframes skeleton-loading {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* ============================================
JACKPOT COMPETITIONS - RIGHT OFFERS MODULE
MUST BE AT END TO OVERRIDE ALL OTHER RULES
Same setup as daily-free-games-right-module
============================================ */
@media (min-width: 1450px) {
/* Force the right offers module to be visible on desktop */
.jackpot-games-right-module {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* ============================================
TYPOGRAPHY SCALE – SINGLE SOURCE OF TRUTH
Uses :root tokens (--fs-*). Desktop: H2 20px, H3 20px, body 16px, secondary 14px.
Mobile: H2 18px, H3 17px; no fractional px. See All = 16px desktop, 14px mobile (match blog).
Applies globally so other pages pick up the same scale automatically.
============================================ */
/* Mobile: hide "Featured " in section titles (e.g. "Featured Free Instant Win Games" → "Free Instant Win Games").
Scoped: .section-title-prefix only on home/blog; h2 margin applies to section/content headers.
Individual competition carousel h2: override below to remove gap. */
@media (max-width: 767px) {
.section-title-prefix {
display: none !important;
}
h2 {
margin-bottom: 1.5rem !important;
}
/* Individual competition page: remove gap between carousel header and carousel on mobile only */
.individual-competition-page .carousel-wrapper h2 {
margin-bottom: 0 !important;
}
}
/* Desktop (default – tokens set in :root) */
html body h2,
html body h2 a {
font-size: var(--fs-h2) !important;
}
html body h3,
html body h3 a {
font-size: var(--fs-h3) !important;
}
html body p {
font-size: var(--fs-base) !important;
}
/* Page-specific overrides so they use the scale (not old rem/px) */
.individual-competition-page h2,
.individual-competition-page h2 a,
.blog-page h2,
.homepage h2 {
font-size: var(--fs-h2) !important;
}
/* Carousel/section h2s – use global scale (var(--fs-h2)) 20px desktop / 18px mobile.
Betting sites mobile headers (h3.mobile-offer-header etc.) follow same homepage logic. */
.individual-competition-page .carousel-wrapper h2,
.individual-competition-page .internal-linking-section .carousel-wrapper h2,
.carousel-wrapper h2,
.homepage .games-section h2,
.homepage .offers-section h2,
.blog-page .games-section h2,
.jackpot-competitions-page .content-section h2,
.daily-free-games-page .content-section h2,
.betting-sites-page .content-section h2,
.betting-sites-page .competitions-header,
.betting-sites-page .mobile-offer-header,
.betting-sites-page .mobile-competitions-header,
.betting-sites-page .mobile-games-header,
.signup-offers-page .content-section h2,
.sports-offers-page .content-section h2,
.no-wagering-page .content-section h2,
.casino-bonus-page .content-section h2,
.content-section h2 {
font-size: var(--fs-h2) !important;
}
.individual-competition-page h3,
.individual-competition-page h3 a,
.blog-page h3,
.homepage h3 {
font-size: var(--fs-h3) !important;
}
/* Hero (homepage + any page using these classes) */
/* Homepage hero styles use fixed sizes in media queries - NO base override */
/* Non-homepage hero title line1 */
body:not(.homepage) .hero-title-line1 {
font-size: 1.5rem !important;
}
/* Homepage hero styles use fixed sizes in media queries - NO base override here */
/* Non-homepage hero title line2 */
body:not(.homepage) .hero-title-line2 {
font-size: 3.25rem !important;
}
/* Non-homepage hero subtitle uses var, but homepage uses fixed sizes */
body:not(.homepage) .hero-subtitle {
font-size: var(--fs-hero-sub) !important;
}
/* Timer / round expired: 16px – flows with body text (same on all breakpoints as homepage carousel timer) */
/* Fixed-width timer: tabular numbers + min-width so digits don't shift layout (no left-right bounce) */
.game-timer-text,
.game-timer-text span,
.homepage .game-timer-text,
.homepage .game-timer-text span,
.internal-linking-section .game-timer-text,
.main-timer,
#competition-timer,
.betting-sites-page .horizontal-timer,
.betting-sites-page .game-timer-text,
.betting-sites-page .game-timer-text span {
font-size: var(--fs-base) !important;
font-variant-numeric: tabular-nums !important;
min-width: 10ch !important;
display: inline-block !important;
text-align: right !important;
}
/* Segmented timer: only seconds digit updates each second; days/hours/minutes stay still until they change */
.timer-segments .t-d, .timer-segments .t-h, .timer-segments .t-m, .timer-segments .t-s10, .timer-segments .t-s1 {
font-variant-numeric: tabular-nums;
display: inline;
}
/* d>0: show only d h m (no seconds). d=0: show h m s; h=0 hide hours; m=0 hide minutes */
.timer-segments.timer-days-mode .timer-s-wrap { display: none !important; }
.timer-segments.timer-no-hours .timer-h-wrap { display: none !important; }
.timer-segments.timer-no-minutes .timer-m-wrap { display: none !important; }
.timer-segments.timer-seconds-mode .timer-d-wrap { display: none !important; }
.homepage .game-timer-text .timer-segments.timer-seconds-mode .timer-d-wrap { display: none !important; }
.comp-box-timer.timer-segments .timer-d-wrap,
.comp-box-timer.timer-segments .timer-h-wrap,
.comp-box-timer.timer-segments .timer-m-wrap,
.comp-box-timer.timer-segments .t-h,
.comp-box-timer.timer-segments .t-m,
.comp-box-timer.timer-segments .timer-s-wrap { display: inline; }
.comp-box-timer.timer-segments.timer-seconds-mode .timer-d-wrap { display: none; }
.comp-box-timer.timer-segments.timer-days-mode .timer-s-wrap { display: none; }
.comp-box-timer.timer-segments.timer-no-hours .timer-h-wrap { display: none; }
.comp-box-timer.timer-segments.timer-no-minutes .timer-m-wrap { display: none; }
/* Home carousel: keep timer one line – inner spans inline so they don't stack (global .game-timer-text span is inline-block) */
.homepage .game-timer-text .timer-segments {
display: inline-block !important;
white-space: nowrap !important;
min-width: 10ch !important;
}
.homepage .game-timer-text .timer-segments span,
.homepage .game-timer-text .timer-segments .timer-d-wrap,
.homepage .game-timer-text .timer-segments .timer-h-wrap,
.homepage .game-timer-text .timer-segments .timer-m-wrap,
.homepage .game-timer-text .timer-segments .timer-s-wrap {
display: inline !important;
min-width: 0 !important;
}
.homepage .offer-header strong {
font-size: var(--fs-base) !important; /* 16px – flows with body */
}
/* Offer text: 16px on desktop and mobile */
.offer-text,
.homepage .offer-text {
font-size: var(--fs-base) !important;
}
/* See All: smaller than header – match betquest-blog (16px desktop, 14px mobile) */
.see-all-link,
.see-all-category,
.see-all-wrapper a,
.homepage .see-all-link,
.homepage h2 .see-all-link,
.homepage h2 a.see-all-link,
.homepage .see-all-category,
.individual-competition-page .carousel-wrapper h2 a {
font-size: 16px !important;
}
@media (max-width: 767px) {
.see-all-link,
.see-all-category,
.see-all-wrapper a,
.homepage .see-all-link,
.homepage h2 .see-all-link,
.homepage h2 a.see-all-link,
.homepage .see-all-category,
.individual-competition-page .carousel-wrapper h2 a {
font-size: 14px !important;
}
}
/* About link: 16px on mobile, 1.1rem on desktop */
.homepage .about-link {
font-size: var(--fs-h2) !important; /* Match section header scale (20px desktop, 18px mobile) */
}
@media (max-width: 767px) {
.homepage .about-link {
font-size: var(--fs-h2) !important; /* 18px mobile – same as h2 */
}
}
/* Bottom email section – no 12px; H2 uses scale */
.pq-bottom-email-content h2,
#pqBottomEmailForm .pq-bottom-email-content h2 {
font-size: var(--fs-h2) !important;
}
.pq-bottom-email-content p {
font-size: var(--fs-base) !important;
}
@media (max-width: 767px) {
.pq-bottom-email-content p {
font-size: var(--fs-sm) !important; /* 14px on mobile – secondary to h2 */
}
}
.pq-bottom-email-form input,
.pq-bottom-email-form button {
font-size: var(--fs-base) !important;
}
/* Section titles (e.g. Why Betquest) */
.homepage .why-betquest-section h2 {
font-size: var(--fs-h2) !important;
}
/* Footer legal text: 14px on desktop, 12px on mobile */
@media (min-width: 768px) {
footer p,
.footer-content p,
.footer-legal p {
font-size: var(--fs-sm) !important; /* 14px desktop */
}
}
@media (max-width: 767px) {
footer p,
.footer-content p,
.footer-legal p {
font-size: var(--fs-xs) !important; /* 12px on mobile */
}
}
/* ============================================
NON-HOMEPAGE PAGE HERO & BODY (all other pages)
Uses --fs-page-hero-title (32px desktop / 20px mobile) and --fs-page-hero-sub (16px / 14px).
Does NOT affect .homepage (hero uses .hero-title-line1/line2 and --fs-hero-sub).
Change tokens in :root above to adjust all non-homepage hero title/subtitle once.
============================================ */
body:not(.homepage) .hero-section h1 {
font-size: var(--fs-page-hero-title) !important;
}
body:not(.homepage) .hero-section .hero-subtitle {
font-size: var(--fs-page-hero-sub) !important;
}
/* Daily free games + Jackpot: same h1 hierarchy as above, page-specific so we beat hero-section.css (e.g. 1.6rem at 768–1023px) */
body.daily-free-games-page .hero-section h1,
body.jackpot-competitions-page .hero-section h1 {
font-size: var(--fs-page-hero-title) !important;
}
body.daily-free-games-page .hero-section .hero-subtitle,
body.jackpot-competitions-page .hero-section .hero-subtitle {
font-size: var(--fs-page-hero-sub) !important;
}
@media (max-width: 767px) {
body:not(.homepage) .hero-section h1 {
text-align: left !important;
text-transform: uppercase !important;
}
body.daily-free-games-page .hero-section h1,
body.jackpot-competitions-page .hero-section h1 {
text-align: left !important;
text-transform: uppercase !important;
}
}
/* Non-homepage: body text always 16px (no 14px) – overrides any cached or stray rule */
body:not(.homepage) .main-content p,
body:not(.homepage) main p {
font-size: var(--fs-base) !important;
}
/* Key terms (full terms) inside offer boxes: CSS clamp() – no JS font scaling (CLS-safe, calculated before first paint) */
.offer-card .key-terms-section p,
.offer-card .key-terms-section .terms-text {
font-size: clamp(0.4375rem, 1.5vw, 0.625rem) !important; /* ~7px–10px fluid, no adjustTermsFontSize() */
}
/* Blurb key terms (short summary above full terms): 12px on desktop and mobile on all offer pages */
.offer-card .key-terms-blurb .key-terms-text {
font-size: 12px !important;
}
.offer-card .key-terms-blurb .key-terms-text:not(.expanded) {
max-height: calc(12px * 1.4); /* One line at 12px */
}
/* CANONICAL: .bonus-grid-heading bar – 20px desktop, 16px mobile (var) on ALL 7 pages.
Casino/sports/no-wagering/casino-bonus: .bonus-grid-heading is a div with h2 inside.
Sports bar uses h2#offers-count – override any 16px so desktop gets 20px. */
@media (min-width: 992px) {
.signup-offers-page .bonus-grid-heading h2,
.signup-offers-page .bonus-grid-heading:not(:has(span)) #offers-count,
.sports-offers-page .bonus-grid-heading h2,
.no-wagering-page .bonus-grid-heading h2,
.casino-bonus-page .bonus-grid-heading h2,
.daily-free-games-page .bonus-grid-heading h2,
.daily-free-games-page h2.bonus-grid-heading,
.jackpot-competitions-page .bonus-grid-heading h2,
.jackpot-competitions-page h2.bonus-grid-heading,
.jackpot-competitions-page .section-title h2.bonus-grid-heading,
.daily-free-games-page .section-title h2.bonus-grid-heading {
font-size: var(--fs-h2) !important; /* 20px desktop */
}
}
@media (max-width: 991px) {
.signup-offers-page .bonus-grid-heading h2,
.signup-offers-page .bonus-grid-heading:not(:has(span)) #offers-count,
.sports-offers-page .bonus-grid-heading h2,
.no-wagering-page .bonus-grid-heading h2,
.casino-bonus-page .bonus-grid-heading h2,
.daily-free-games-page .bonus-grid-heading h2,
.daily-free-games-page h2.bonus-grid-heading,
.jackpot-competitions-page .bonus-grid-heading h2,
.jackpot-competitions-page h2.bonus-grid-heading,
.jackpot-competitions-page .section-title h2.bonus-grid-heading,
.daily-free-games-page .section-title h2.bonus-grid-heading {
font-size: var(--fs-base) !important; /* 16px mobile */
}
}
/* Bonus-grid-heading: always 16px (var) on mobile – never 14px, even on small screens */
@media (max-width: 400px) {
.signup-offers-page .bonus-grid-heading h2,
.signup-offers-page .bonus-grid-heading:not(:has(span)) #offers-count,
.sports-offers-page .bonus-grid-heading h2,
.no-wagering-page .bonus-grid-heading h2,
.casino-bonus-page .bonus-grid-heading h2,
.blog-page .bonus-grid-heading h2 {
font-size: var(--fs-base) !important; /* 16px – keep readable on small mobiles */
line-height: 1.2 !important;
}
.signup-offers-page .bonus-grid-heading:has(span),
.signup-offers-page .bonus-grid-heading:not(:has(span)),
.sports-offers-page .bonus-grid-heading,
.no-wagering-page .bonus-grid-heading,
.casino-bonus-page .bonus-grid-heading,
.blog-page .bonus-grid-heading {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
}
/* Individual competition page only: timer, blurb, play button – 16px desktop (mobile = 20px in @media max-width 767px above) */
@media (min-width: 768px) {
.individual-competition-page .main-timer,
.individual-competition-page .main-competition-blurb,
.individual-competition-page .main-play-now-button,
.individual-competition-page #competition-play-button {
font-size: var(--fs-base) !important; /* 16px */
}
}
/* Jackpot + Daily + Prizequest: timer, blurb, button – 16px desktop (14px mobile small only below) */
@media (min-width: 768px) {
.jackpot-competitions-page .comp-box-timer,
.jackpot-competitions-page .comp-box-blurb,
.jackpot-competitions-page .comp-box-button,
.daily-free-games-page .comp-box-timer,
.daily-free-games-page .comp-box-blurb,
.daily-free-games-page .comp-box-button,
.prizequest-page .comp-box-timer,
.prizequest-page .comp-box-blurb,
.prizequest-page .comp-box-button {
font-size: var(--fs-base) !important; /* 16px */
}
}
/* Mobile small only: use var(--fs-sm). At 600-767px use competition-box.css scaled styles */
@media (max-width: 599px) {
.jackpot-competitions-page .comp-box-timer,
.jackpot-competitions-page .comp-box-blurb,
.jackpot-competitions-page .comp-box-button,
.daily-free-games-page .comp-box-timer,
.daily-free-games-page .comp-box-blurb,
.daily-free-games-page .comp-box-button,
.prizequest-page .comp-box-timer,
.prizequest-page .comp-box-blurb,
.prizequest-page .comp-box-button {
font-size: var(--fs-sm) !important; /* 14px */
}
}
/* Same layout logic for jackpot + daily: gap between blurb and See Game Page, button at bottom */
.jackpot-competitions-page .comp-box-blurb,
.daily-free-games-page .comp-box-blurb {
margin-bottom: 0.75rem !important; /* Gap above button – do not remove */
}
.jackpot-competitions-page .comp-box-button,
.daily-free-games-page .comp-box-button,
.prizequest-page .comp-box-button {
margin-top: auto !important; /* Button at bottom of box */
}
/* HOMEPAGE CAROUSEL SKELETON: Single source of truth
Skeleton uses SAME classes as loaded (.game-item, .game-image, .game-top-border).
NO skeleton-specific overrides – inherits .homepage .game-top-border (padding, clamp(), etc).
Future-proof: loaded box CSS changes automatically apply to skeleton. */
/* DAILY FREE GAMES: 1rem gap between hero and content below 1024px – MUST win over any other rule. Use padding-top (no margin collapse). */
@media (max-width: 1023px) {
body.daily-free-games-page main.main-content {
padding-top: 1rem !important;
margin-top: 0 !important;
}
}
@media (min-width: 1024px) {
body.daily-free-games-page main.main-content {
padding-top: 0 !important;
}
}