/* ============================================================ RICKY CASINO — Premium Design System Dark violet base · gold accent ------------------------------------------------------------ 1. Tokens 2. Base & utilities 3. Buttons 4. Section furniture 5. Header & navigation 6. Hero 7. Trust bar 8. Split bands & steps 9. Games 10. Promotions 11. Tournaments 12. VIP 13. Providers & payments 14. FAQ 15. Closing CTA 16. Footer 17. Modal 18. Promo popup 19. Sub-page components 20. Responsive ============================================================ */ /* ============================================================ 1. TOKENS ============================================================ */ :root { /* Surfaces — near-black with a violet undertone */ --ink-900: #07050d; --ink-850: #0b0814; --ink-800: #100b1c; --ink-750: #150f26; --ink-700: #1c1531; --ink-600: #251c3f; --line: rgba(255, 255, 255, 0.075); --line-str: rgba(255, 255, 255, 0.145); /* Gold — primary accent */ --gold-200: #ffe9a8; --gold-300: #f8d67c; --gold-400: #eebc50; --gold-500: #d99f2b; --gold-600: #b47d18; /* Violet — secondary accent */ --vio-300: #c4a5ff; --vio-400: #a97bff; --vio-500: #8b5cf6; --vio-600: #6d28d9; --vio-700: #4c1d95; /* Text */ --text: #f8f6fc; --dim: #b9b0cf; --mut: #8d84a8; /* Status */ --live: #ff4d6d; --success: #3ddc97; /* Legacy aliases — keep older markup rendering correctly */ --bg-dark: var(--ink-900); --bg-card: var(--ink-800); --bg-header: var(--ink-850); --accent: var(--gold-400); --accent-hover: var(--gold-300); --red: var(--live); --gold: var(--gold-400); --silver: #c9c9d8; --bronze: #cd7f32; --text-main: var(--text); --text-muted: var(--mut); --border: var(--line); /* Gradients */ --g-gold: linear-gradient(135deg, #ffe9a8 0%, #eebc50 45%, #c8871f 100%); --g-gold-soft: linear-gradient(135deg, rgba(238,188,80,.16), rgba(238,188,80,.04)); --g-vio: linear-gradient(135deg, #a97bff 0%, #6d28d9 100%); --g-line: linear-gradient(90deg, transparent, rgba(238,188,80,.55), transparent); /* Radii */ --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-pill: 999px; --radius: var(--r-sm); --radius-sm: var(--r-xs); /* Elevation */ --sh-1: 0 2px 10px rgba(0, 0, 0, .40); --sh-2: 0 14px 44px -14px rgba(0, 0, 0, .75); --sh-3: 0 28px 70px -20px rgba(0, 0, 0, .85); --sh-gold: 0 12px 36px -10px rgba(238, 188, 80, .45); --sh-vio: 0 14px 44px -14px rgba(139, 92, 246, .55); /* Layout */ --wrap: 1240px; --gutter: clamp(16px, 4vw, 28px); --sp-sec: clamp(56px, 8vw, 112px); /* Type */ --font: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-display: var(--font); --ease: cubic-bezier(.22, .8, .3, 1); } /* ============================================================ 2. BASE & UTILITIES ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; /* Do NOT put overflow-x here. Setting overflow on stops 's overflow propagating to the viewport, which turns into its own scroll container. Body has no scrollable overflow of its own, so wheel and touch gestures land on a dead scroller and the page appears frozen. Keeping the guard on alone lets it propagate to the viewport. */ } body { font-family: var(--font); background: var(--ink-900); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Softer, on-brand tap feedback instead of the default grey flash */ * { -webkit-tap-highlight-color: rgba(238, 188, 80, .18); } /* Anything interactive should feel deliberate under a thumb */ a, button, .btn, input, select, [role="button"] { touch-action: manipulation; } /* Ambient glow behind the page */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 520px at 12% -8%, rgba(109, 40, 217, .22), transparent 70%), radial-gradient(760px 460px at 92% 4%, rgba(238, 188, 80, .10), transparent 70%); } body > * { position: relative; z-index: 1; } a { color: var(--gold-400); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--gold-300); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; } ::selection { background: rgba(238, 188, 80, .3); color: #fff; } :focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; border-radius: 4px; } .container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .container-narrow { max-width: 880px; } .w-full { width: 100%; } .text-gold { color: var(--gold-400); } /* Gradient text */ .grad-gold { background: var(--g-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Hairline divider */ .rule { height: 1px; background: var(--g-line); border: 0; margin: 0; } /* Reveal-on-scroll. Content is VISIBLE by default and only starts hidden once the inline head script has set html.js — so a JS failure can never blank a section. */ .reveal { opacity: 1; } html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; } html.js .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, html.js .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============================================================ 3. BUTTONS ============================================================ */ .btn { --btn-py: 13px; --btn-px: 26px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: var(--btn-py) var(--btn-px); border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--font); font-size: .95rem; font-weight: 600; letter-spacing: .01em; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease); } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px) scale(.995); } /* Primary — gold, the money button */ .btn-primary { background: var(--g-gold); color: #2a1c00; font-weight: 700; box-shadow: var(--sh-gold); } .btn-primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.34), transparent 55%); opacity: .65; pointer-events: none; } .btn-primary:hover { color: #2a1c00; transform: translateY(-2px); box-shadow: 0 18px 44px -10px rgba(238, 188, 80, .62); } /* Outline — quiet companion */ .btn-outline { background: rgba(255, 255, 255, .04); color: var(--text); border-color: var(--line-str); backdrop-filter: blur(6px); } .btn-outline:hover { color: var(--gold-300); border-color: rgba(238, 188, 80, .55); background: rgba(238, 188, 80, .08); transform: translateY(-2px); } /* Violet — tertiary emphasis */ .btn-violet { background: var(--g-vio); color: #fff; box-shadow: var(--sh-vio); } .btn-violet:hover { color: #fff; transform: translateY(-2px); } /* Ghost */ .btn-ghost { background: transparent; color: var(--dim); } .btn-ghost:hover { color: var(--text); background: rgba(255, 255, 255, .06); } .btn-lg { --btn-py: 17px; --btn-px: 40px; font-size: 1.05rem; } .btn-sm { --btn-py: 9px; --btn-px: 18px; font-size: .84rem; } .btn-xl { --btn-py: 20px; --btn-px: 52px; font-size: 1.12rem; } /* Attention pulse for the hero CTA */ .btn-pulse { animation: btnPulse 3.2s ease-in-out infinite; } @keyframes btnPulse { 0%, 100% { box-shadow: 0 12px 36px -10px rgba(238,188,80,.45), 0 0 0 0 rgba(238,188,80,.42); } 50% { box-shadow: 0 12px 36px -10px rgba(238,188,80,.45), 0 0 0 16px rgba(238,188,80,0); } } /* ============================================================ 4. SECTION FURNITURE ============================================================ */ .section { padding: var(--sp-sec) 0; } .section--tight { padding: clamp(40px, 5vw, 68px) 0; } /* Alternating band with a top hairline */ .section--alt { background: linear-gradient(180deg, rgba(255,255,255,.022), transparent 42%), var(--ink-850); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-head { max-width: 720px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; } .section-head--left { margin-left: 0; text-align: left; } .section-eyebrow, .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 14px; } .section-eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .7; } .section-head--left .section-eyebrow { justify-content: flex-start; } .section-title, .section-heading { font-size: clamp(1.7rem, 3.6vw, 2.85rem); font-weight: 800; color: var(--text); margin-bottom: 14px; } .section-sub, .section-lead, .faq-lead { font-size: clamp(.98rem, 1.4vw, 1.08rem); color: var(--dim); line-height: 1.7; max-width: 62ch; margin-inline: 0; /* left-aligned by default (inner pages) */ } /* only centre when it sits in a centred section header */ .section-head .section-sub, .section-head .section-lead, .section-head .faq-lead { margin-inline: auto; } .section-head--left .section-sub, .section-head--left .section-lead, .section-head--left .faq-lead { margin-inline: 0; } /* Small label pill used across bands */ .pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid rgba(238, 188, 80, .35); background: var(--g-gold-soft); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-300); } /* ============================================================ 5. HEADER & NAVIGATION ============================================================ */ .site-header { position: sticky; top: 0; z-index: 500; background: transparent; transition: background-color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(9, 6, 17, .82); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom-color: var(--line); box-shadow: 0 10px 34px -18px rgba(0, 0, 0, .9); } /* Sub-pages start on a solid surface */ .site-header--solid { background: rgba(9, 6, 17, .9); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom-color: var(--line); } .header-inner { display: flex; align-items: center; gap: 22px; height: 78px; } .logo-link { flex-shrink: 0; display: block; } .logo { height: 46px; width: auto; transition: transform .25s var(--ease); } .logo-link:hover .logo { transform: scale(1.04); } .main-nav { display: flex; align-items: center; gap: 2px; margin-left: 10px; } .main-nav a { position: relative; color: var(--dim); font-size: .93rem; font-weight: 500; white-space: nowrap; padding: 9px 15px; border-radius: var(--r-pill); transition: color .2s var(--ease), background-color .2s var(--ease); } .main-nav a::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--g-gold); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); } .main-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .05); } .main-nav a:hover::after, .main-nav a.nav-active::after { transform: scaleX(1); } .main-nav a.nav-active { color: var(--gold-300); } .header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .chevron { width: 10px; height: 6px; opacity: .8; } /* Hamburger */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; margin-left: auto; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-str); border-radius: 12px; cursor: pointer; } .hamburger span { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--text); transition: transform .3s var(--ease), opacity .2s var(--ease); } .hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; } .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer */ .mobile-nav { display: none; flex-direction: column; gap: 4px; padding: 18px var(--gutter) 26px; background: rgba(9, 6, 17, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line); } .mobile-nav.open { display: flex; animation: drawerIn .28s var(--ease); } @keyframes drawerIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } /* :not(.btn) so the CTA anchors keep their own button colours — a bare `.mobile-nav a` rule out-specifies .btn-primary and greys them out */ .mobile-nav a:not(.btn) { color: var(--dim); font-size: 1.02rem; font-weight: 500; padding: 13px 14px; border-radius: 12px; transition: background-color .2s var(--ease), color .2s var(--ease); } .mobile-nav a:not(.btn):hover { color: var(--text); background: rgba(255, 255, 255, .06); } .mobile-nav hr { border: 0; height: 1px; background: var(--line); margin: 12px 0; } .mobile-nav .btn { margin-top: 6px; } /* ============================================================ 6. HERO ============================================================ */ .hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: min(92vh, 880px); padding: clamp(72px, 12vw, 130px) 0 clamp(64px, 9vw, 104px); /* svh = viewport with mobile browser chrome VISIBLE, so the CTA never hides behind the address bar on first paint */ margin-top: -78px; /* slide under the transparent header */ padding-top: calc(78px + clamp(56px, 9vw, 104px)); overflow: hidden; text-align: center; isolation: isolate; } @supports (height: 100svh) { .hero { min-height: min(92svh, 880px); } } .hero picture { display: contents; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; z-index: -2; transform: scale(1.04); animation: heroDrift 26s ease-in-out infinite alternate; } @keyframes heroDrift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.11) translate3d(0, -1.5%, 0); } } /* Cinematic vignette: darkens edges, lifts the centre */ .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 34%, rgba(7,5,13,.18) 0%, rgba(7,5,13,.72) 58%, rgba(7,5,13,.95) 100%), linear-gradient(180deg, rgba(7,5,13,.86) 0%, rgba(7,5,13,.34) 34%, rgba(7,5,13,.9) 92%, var(--ink-900) 100%); } /* Violet + gold light leak */ .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(620px 380px at 18% 82%, rgba(109, 40, 217, .34), transparent 72%), radial-gradient(560px 340px at 84% 16%, rgba(238, 188, 80, .20), transparent 72%); mix-blend-mode: screen; } .hero-content { position: relative; z-index: 2; max-width: 900px; display: flex; flex-direction: column; align-items: center; } .hero .hero-eyebrow { padding: 7px 16px; border: 1px solid rgba(238, 188, 80, .34); border-radius: var(--r-pill); background: rgba(238, 188, 80, .1); backdrop-filter: blur(8px); margin-bottom: 22px; } /* the leading dash belongs on section eyebrows, not the hero pill */ .hero .hero-eyebrow::before { display: none; } .hero-title { font-size: clamp(2.3rem, 7.4vw, 5.1rem); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; color: #fff; margin-bottom: 20px; text-shadow: 0 4px 40px rgba(0, 0, 0, .6); } .hero-title .highlight { display: inline-block; background: var(--g-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 26px rgba(238, 188, 80, .38)); } .hero-sub { font-size: clamp(1rem, 1.7vw, 1.2rem); color: rgba(248, 246, 252, .8); max-width: 56ch; margin: 0 auto 30px; line-height: 1.65; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 26px; } .hero-terms { font-size: .82rem; color: rgba(248, 246, 252, .55); letter-spacing: .02em; } /* Inline trust markers under the CTA */ .hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .1); width: 100%; max-width: 720px; } .hero-trust li { display: flex; align-items: center; gap: 8px; list-style: none; font-size: .88rem; font-weight: 500; color: rgba(248, 246, 252, .82); } .hero-trust svg { width: 17px; height: 17px; color: var(--gold-400); flex-shrink: 0; } /* Scroll cue */ .scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; display: grid; place-items: center; width: 30px; height: 48px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-pill); opacity: .75; } .scroll-cue::after { content: ''; width: 4px; height: 8px; border-radius: 2px; background: var(--gold-400); animation: cue 1.9s ease-in-out infinite; } @keyframes cue { 0% { transform: translateY(-8px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } } /* ============================================================ 7. TRUST BAR ============================================================ */ .trustbar { position: relative; z-index: 3; margin-top: calc(-1 * clamp(30px, 5vw, 58px)); padding-bottom: clamp(28px, 4vw, 44px); } .trustbar-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-3); } .trust-tile { padding: clamp(20px, 3vw, 30px) clamp(14px, 2vw, 24px); text-align: center; background: rgba(21, 15, 38, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background-color .28s var(--ease); } .trust-tile:hover { background: rgba(37, 28, 63, .95); } .trust-value { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; background: var(--g-gold); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 7px; } .trust-label { font-size: .78rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); } /* ============================================================ 8. SPLIT BANDS & STEPS ============================================================ */ .split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 78px); } .split--reverse .split-media { order: 2; } .split-media { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-str); box-shadow: var(--sh-2); aspect-ratio: 4 / 3; } .split-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .split-media:hover img { transform: scale(1.05); } .split-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 40%, rgba(7, 5, 13, .55)); pointer-events: none; } /* Floating stat chip over media */ .media-chip { position: absolute; z-index: 2; right: 18px; bottom: 18px; padding: 12px 18px; border-radius: var(--r-sm); background: rgba(11, 8, 20, .84); backdrop-filter: blur(12px); border: 1px solid rgba(238, 188, 80, .3); box-shadow: var(--sh-2); text-align: right; } .media-chip strong { display: block; font-size: 1.3rem; font-weight: 800; color: var(--gold-300); line-height: 1.1; } .media-chip span { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--mut); } .split-body .section-title { margin-bottom: 16px; } .split-body > p { color: var(--dim); font-size: 1.02rem; line-height: 1.75; margin-bottom: 26px; } /* Numbered steps (deposit breakdown) */ .steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; list-style: none; } .step { position: relative; display: flex; align-items: center; gap: 16px; padding: 15px 20px; border: 1px solid var(--line); border-radius: var(--r-sm); background: linear-gradient(120deg, rgba(255, 255, 255, .035), transparent); transition: border-color .25s var(--ease), transform .25s var(--ease), background-color .25s var(--ease); } .step:hover { border-color: rgba(238, 188, 80, .38); transform: translateX(5px); background: linear-gradient(120deg, rgba(238, 188, 80, .07), transparent); } .step-num { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--g-gold); color: #2a1c00; font-weight: 800; font-size: .95rem; box-shadow: 0 6px 18px -6px rgba(238, 188, 80, .6); } .step-text { font-size: .95rem; color: var(--dim); } .step-text strong { color: var(--text); font-weight: 700; } .step-amount { margin-left: auto; font-weight: 800; font-size: 1.02rem; color: var(--gold-300); white-space: nowrap; } /* Generic feature grid */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(14px, 2vw, 22px); } .feature-card { padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(160deg, var(--ink-750), var(--ink-800)); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .feature-card:hover { transform: translateY(-6px); border-color: rgba(238, 188, 80, .34); box-shadow: var(--sh-2); } .feature-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 15px; font-size: 1.5rem; background: var(--g-gold-soft); border: 1px solid rgba(238, 188, 80, .28); } .feature-card h3 { font-size: 1.14rem; margin-bottom: 9px; } .feature-card p { font-size: .93rem; color: var(--mut); line-height: 1.7; } /* ============================================================ 9. GAMES ============================================================ */ .game-section { padding: var(--sp-sec) 0; } /* Toolbar: tabs on the left, search on the right */ .game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 34px); } .category-tabs { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; } .tab-btn { padding: 10px 19px; border: 1px solid var(--line-str); border-radius: var(--r-pill); background: rgba(255, 255, 255, .03); color: var(--dim); font-family: var(--font); font-size: .88rem; font-weight: 500; cursor: pointer; transition: all .22s var(--ease); } .tab-btn:hover { color: var(--gold-300); border-color: rgba(238, 188, 80, .5); background: rgba(238, 188, 80, .08); } .tab-btn.active { background: var(--g-gold); border-color: transparent; color: #2a1c00; font-weight: 700; box-shadow: var(--sh-gold); } .search-bar-wrap { position: relative; width: 300px; max-width: 100%; flex-shrink: 0; } .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--mut); pointer-events: none; } .search-input { width: 100%; padding: 13px 18px 13px 46px; border: 1px solid var(--line-str); border-radius: var(--r-pill); background: rgba(255, 255, 255, .04); color: var(--text); font-family: var(--font); font-size: .92rem; outline: none; transition: border-color .2s var(--ease), background-color .2s var(--ease); } .search-input:focus { border-color: rgba(238, 188, 80, .6); background: rgba(238, 188, 80, .05); } .search-input::placeholder { color: var(--mut); } /* Grid */ .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: clamp(12px, 1.6vw, 20px); } .game-card { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--ink-750); border: 1px solid var(--line); cursor: pointer; transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease); } .game-card:hover { transform: translateY(-8px); border-color: rgba(238, 188, 80, .42); box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(238, 188, 80, .12); } .game-card.hidden { display: none; } .card-img-wrap { position: relative; aspect-ratio: 3 / 4; overflow: hidden; } .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); } .game-card:hover .card-img-wrap img { transform: scale(1.09); } .card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; opacity: 0; background: linear-gradient(180deg, rgba(7, 5, 13, .35), rgba(7, 5, 13, .88)); backdrop-filter: blur(2px); transition: opacity .3s var(--ease); } .game-card:hover .card-overlay, .game-card:focus-within .card-overlay { opacity: 1; } .card-overlay .btn { transform: translateY(10px); transition: transform .32s var(--ease); } .game-card:hover .card-overlay .btn { transform: none; } .card-overlay .btn:nth-child(2) { transition-delay: .05s; } .card-title { padding: 11px 12px; font-size: .85rem; font-weight: 600; text-align: center; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s var(--ease); } .game-card:hover .card-title { color: var(--gold-300); } .no-results { padding: 64px 20px; text-align: center; color: var(--mut); font-size: 1.02rem; } .games-footer { margin-top: clamp(28px, 4vw, 44px); text-align: center; } /* ============================================================ 10. PROMOTIONS ============================================================ */ .promo-section { padding: var(--sp-sec) 0; } .promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: clamp(16px, 2vw, 24px); } .promo-card { position: relative; display: flex; flex-direction: column; gap: 13px; padding: clamp(26px, 3vw, 34px) clamp(22px, 2.5vw, 28px); border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(165deg, var(--ink-750) 0%, var(--ink-850) 100%); overflow: hidden; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } /* Gold hairline that fills in on hover */ .promo-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--g-gold); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .promo-card:hover::before { transform: scaleX(1); } .promo-card:hover { transform: translateY(-7px); border-color: rgba(238, 188, 80, .32); box-shadow: var(--sh-2); } .promo-badge { align-self: flex-start; padding: 5px 13px; border-radius: var(--r-pill); background: var(--g-gold); color: #2a1c00; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .promo-card h3 { font-size: 1.24rem; font-weight: 700; } .promo-card p { flex-grow: 1; font-size: .94rem; color: var(--mut); line-height: 1.7; } .promo-card p strong { color: var(--gold-300); font-weight: 700; } .promo-card .btn { align-self: flex-start; margin-top: 4px; } /* ============================================================ 11. TOURNAMENTS ============================================================ */ .tournament-section { padding: var(--sp-sec) 0; } .tournament-card { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 52px); padding: clamp(26px, 4vw, 46px); border: 1px solid var(--line-str); border-radius: var(--r-lg); background: radial-gradient(700px 340px at 12% 0%, rgba(109, 40, 217, .26), transparent 68%), linear-gradient(150deg, var(--ink-750), var(--ink-850)); box-shadow: var(--sh-2); } .tournament-info { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .live-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px; border-radius: var(--r-pill); background: rgba(255, 77, 109, .14); border: 1px solid rgba(255, 77, 109, .45); color: #ff8098; font-size: .72rem; font-weight: 800; letter-spacing: .16em; } .live-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(255, 77, 109, .7); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 109, .7); } 70% { box-shadow: 0 0 0 9px rgba(255, 77, 109, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0); } } .tournament-info h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; } .tournament-info p { color: var(--dim); font-size: 1rem; line-height: 1.7; } .tournament-info p strong { color: var(--gold-300); } .tournament-meta { display: flex; flex-wrap: wrap; gap: 10px 12px; } .tournament-meta span { padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: rgba(255, 255, 255, .035); font-size: .84rem; color: var(--dim); } .leaderboard { padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(7, 5, 13, .5); } .leaderboard h4 { margin-bottom: 16px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); } .leaderboard ol { list-style: none; display: flex; flex-direction: column; gap: 8px; } .leaderboard li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-xs); background: rgba(255, 255, 255, .035); font-size: .9rem; transition: background-color .22s var(--ease), transform .22s var(--ease); } .leaderboard li:hover { background: rgba(255, 255, 255, .07); transform: translateX(4px); } .leaderboard li .prize { margin-left: auto; font-weight: 800; color: var(--gold-300); } .rank { display: grid; place-items: center; width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: .78rem; font-weight: 800; color: var(--dim); } .rank.gold { background: var(--g-gold); color: #2a1c00; box-shadow: 0 4px 14px -4px rgba(238, 188, 80, .7); } .rank.silver { background: linear-gradient(135deg, #f0f0f6, #a8a8bd); color: #1a1a24; } .rank.bronze { background: linear-gradient(135deg, #e0a06a, #a9662f); color: #2a1500; } /* ============================================================ 12. VIP ============================================================ */ .vip-section { padding: var(--sp-sec) 0; text-align: center; } .vip-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(16px, 2.2vw, 26px); max-width: 1000px; margin: 0 auto clamp(34px, 4vw, 50px); } .vip-card { position: relative; padding: clamp(26px, 3vw, 38px) clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(170deg, var(--ink-750), var(--ink-850)); text-align: left; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .vip-card:hover { transform: translateY(-7px); border-color: rgba(238, 188, 80, .3); box-shadow: var(--sh-2); } .vip-card.featured { border-color: rgba(238, 188, 80, .5); background: radial-gradient(420px 220px at 50% 0%, rgba(238, 188, 80, .17), transparent 70%), linear-gradient(170deg, var(--ink-700), var(--ink-850)); box-shadow: 0 0 0 1px rgba(238, 188, 80, .16), var(--sh-2); } .vip-card.featured::before { content: 'Most Popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 5px 16px; border-radius: var(--r-pill); background: var(--g-gold); color: #2a1c00; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--sh-gold); } .vip-icon { display: inline-block; margin-bottom: 14px; padding: 6px 16px; border: 1px solid rgba(238, 188, 80, .38); border-radius: var(--r-pill); background: var(--g-gold-soft); font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); } .vip-card h4 { font-size: 1.3rem; margin-bottom: 18px; } .vip-card ul { list-style: none; display: flex; flex-direction: column; gap: 11px; } .vip-card li { position: relative; padding-left: 27px; font-size: .92rem; color: var(--dim); line-height: 1.55; } .vip-card li::before { content: ''; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--g-gold-soft); border: 1px solid rgba(238, 188, 80, .4); } .vip-card li::after { content: ''; position: absolute; left: 6px; top: 8px; width: 5px; height: 8px; border: solid var(--gold-300); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ============================================================ 13. PROVIDERS & PAYMENTS ============================================================ */ .providers-section, .payments-section { padding: clamp(40px, 5vw, 68px) 0; } /* Edge-faded auto-scrolling marquee */ .marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } /* gap:0 + per-chip margin keeps translateX(-50%) landing exactly on the duplicate set, so the loop has no visible seam */ .marquee-track { display: flex; gap: 0; width: max-content; animation: marquee 44s linear infinite; } .marquee-track > * { margin-right: 12px; flex-shrink: 0; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .providers-grid, .payments-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .provider-chip, .payment-chip { padding: 12px 26px; border: 1px solid var(--line); border-radius: var(--r-pill); background: rgba(255, 255, 255, .035); font-size: .9rem; font-weight: 600; color: var(--dim); white-space: nowrap; transition: all .24s var(--ease); } .provider-chip:hover, .payment-chip:hover { color: var(--gold-300); border-color: rgba(238, 188, 80, .45); background: rgba(238, 188, 80, .08); transform: translateY(-3px); } /* ============================================================ 14. FAQ ============================================================ */ .faq-section { padding: var(--sp-sec) 0; } .faq-grid, .faq-list { display: flex; flex-direction: column; gap: 11px; max-width: 880px; margin: 0 auto; } .faq-item { border: 1px solid var(--line); border-radius: var(--r-sm); background: linear-gradient(160deg, var(--ink-750), var(--ink-850)); overflow: hidden; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .faq-item:hover { border-color: var(--line-str); } .faq-item.open { border-color: rgba(238, 188, 80, .38); box-shadow: 0 0 0 1px rgba(238, 188, 80, .1), var(--sh-1); } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 20px 24px; border: none; background: none; font-family: var(--font); font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--text); text-align: left; cursor: pointer; transition: color .2s var(--ease), background-color .2s var(--ease); } .faq-question:hover { background: rgba(255, 255, 255, .03); } .faq-item.open .faq-question { color: var(--gold-300); } .faq-arrow { flex-shrink: 0; width: 21px; height: 21px; color: var(--mut); transition: transform .3s var(--ease), color .2s var(--ease); } .faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--gold-400); } /* Height-animated answer */ .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease); } .faq-item.open .faq-answer { grid-template-rows: 1fr; } .faq-answer > * { overflow: hidden; } .faq-answer-inner { padding: 0 24px; font-size: .95rem; color: var(--dim); line-height: 1.8; } .faq-item.open .faq-answer-inner { padding-top: 4px; padding-bottom: 22px; } .faq-answer strong { color: var(--text); } .faq-answer a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ 15. CLOSING CTA ============================================================ */ .cta-final, .cta-banner { position: relative; padding: clamp(44px, 6vw, 76px) clamp(24px, 4vw, 60px); border: 1px solid rgba(238, 188, 80, .28); border-radius: var(--r-lg); background: radial-gradient(760px 380px at 50% 0%, rgba(238, 188, 80, .17), transparent 68%), radial-gradient(600px 320px at 12% 100%, rgba(109, 40, 217, .32), transparent 70%), linear-gradient(150deg, var(--ink-750), var(--ink-850)); box-shadow: var(--sh-2); text-align: center; overflow: hidden; } .cta-final h2, .cta-banner h2 { font-size: clamp(1.7rem, 4vw, 2.9rem); font-weight: 800; margin-bottom: 14px; } .cta-final p, .cta-banner p { max-width: 56ch; margin: 0 auto 28px; font-size: 1.04rem; color: var(--dim); line-height: 1.7; } .cta-final .btn, .cta-banner .btn { margin-inline: auto; } .cta-note { margin-top: 18px; font-size: .82rem; color: var(--mut); } /* ============================================================ 16. FOOTER ============================================================ */ .site-footer { margin-top: clamp(40px, 6vw, 80px); padding: clamp(46px, 6vw, 76px) 0 28px; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(7, 5, 13, .85)); } .footer-top { display: grid; grid-template-columns: minmax(240px, 1.1fr) 2fr; gap: clamp(30px, 5vw, 64px); margin-bottom: clamp(32px, 4vw, 48px); } .footer-brand { max-width: 360px; } .footer-logo { height: 42px; margin-bottom: 18px; } .footer-brand p { margin-bottom: 18px; font-size: .91rem; line-height: 1.75; color: var(--mut); } .responsible-badges { display: flex; flex-wrap: wrap; gap: 8px; } .badge { padding: 6px 14px; border: 1px solid var(--line-str); border-radius: var(--r-pill); font-size: .74rem; font-weight: 600; color: var(--dim); } .footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(22px, 3vw, 40px); } .footer-col { display: flex; flex-direction: column; gap: 11px; } .footer-col h5 { margin-bottom: 5px; font-size: .76rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-400); } .footer-col a { font-size: .91rem; color: var(--mut); transition: color .2s var(--ease), transform .2s var(--ease); width: fit-content; } .footer-col a:hover { color: var(--text); transform: translateX(3px); } .footer-bottom { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; border-top: 1px solid var(--line); } .footer-bottom p { font-size: .84rem; color: var(--mut); } .disclaimer { padding: 15px 20px; border-radius: var(--r-xs); border-left: 3px solid var(--gold-400); background: rgba(238, 188, 80, .06); line-height: 1.7; } .disclaimer strong { color: var(--gold-300); } /* ============================================================ 17. MODAL ============================================================ */ .modal-overlay { display: none; position: fixed; inset: 0; z-index: 999; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 3, 8, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .modal-overlay.open { display: flex; animation: fadeIn .22s var(--ease); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto; padding: clamp(28px, 4vw, 40px) clamp(22px, 3vw, 34px); border: 1px solid var(--line-str); border-radius: var(--r-lg); background: radial-gradient(500px 260px at 50% 0%, rgba(109, 40, 217, .3), transparent 70%), linear-gradient(165deg, var(--ink-750), var(--ink-850)); box-shadow: var(--sh-3); animation: slideUp .3s var(--ease); } @keyframes slideUp { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } } .modal-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, .05); color: var(--mut); font-size: .9rem; line-height: 1; cursor: pointer; transition: all .2s var(--ease); } .modal-close:hover { color: var(--text); border-color: var(--line-str); background: rgba(255, 255, 255, .1); transform: rotate(90deg); } .modal-form h2 { margin-bottom: 24px; font-size: 1.55rem; font-weight: 800; } .modal-form label { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; font-size: .84rem; font-weight: 600; color: var(--dim); } .modal-form input[type="text"], .modal-form input[type="email"], .modal-form input[type="password"], .modal-form input[type="date"] { width: 100%; padding: 13px 16px; border: 1px solid var(--line-str); border-radius: var(--r-xs); background: rgba(7, 5, 13, .6); color: var(--text); font-family: var(--font); font-size: .93rem; outline: none; transition: border-color .2s var(--ease), background-color .2s var(--ease); } .modal-form input:focus { border-color: rgba(238, 188, 80, .6); background: rgba(238, 188, 80, .05); } .modal-form input::placeholder { color: var(--mut); } .modal-form .btn { margin-top: 6px; } .checkbox-label { flex-direction: row !important; align-items: flex-start !important; gap: 11px !important; font-weight: 400 !important; color: var(--mut) !important; line-height: 1.55; cursor: pointer; } .checkbox-label input[type="checkbox"] { flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--gold-400); cursor: pointer; } .modal-switch { margin-top: 18px; text-align: center; font-size: .88rem; color: var(--mut); } .modal-switch a { color: var(--gold-300); font-weight: 600; } .social-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0 16px; } .social-divider::before, .social-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .social-divider span { font-size: .78rem; color: var(--mut); white-space: nowrap; } .social-login-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .btn-social { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--font); font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .22s var(--ease); } .btn-whatsapp { background: rgba(37, 211, 102, .1); color: #25d366; border-color: rgba(37, 211, 102, .45); } .btn-whatsapp:hover { background: #25d366; color: #04220e; transform: translateY(-2px); box-shadow: 0 10px 26px -8px rgba(37, 211, 102, .55); } .btn-telegram { background: rgba(42, 171, 238, .1); color: #2aabee; border-color: rgba(42, 171, 238, .45); } .btn-telegram:hover { background: #2aabee; color: #04202e; transform: translateY(-2px); box-shadow: 0 10px 26px -8px rgba(42, 171, 238, .55); } /* ============================================================ 18. PROMO POPUP ============================================================ */ #promoPopup { position: fixed; bottom: 0; left: 50%; z-index: 10000; width: 460px; max-width: calc(100vw - 20px); transform: translateX(-50%) translateY(110%); transition: transform .6s cubic-bezier(.34, 1.25, .64, 1); pointer-events: none; } #promoPopup.pp-visible { transform: translateX(-50%) translateY(0); pointer-events: auto; } #promoPopup.pp-dismissed { transform: translateX(-50%) translateY(140%); pointer-events: none; } /* The popup outranks the modal on z-index, so get it out of the way while a modal is open rather than letting it cover the form. */ body.modal-open #promoPopup { transform: translateX(-50%) translateY(140%); pointer-events: none; } .pp-char-wrap { position: absolute; bottom: 0; left: 0; width: 155px; z-index: 2; pointer-events: none; } .pp-char { display: block; width: 155px; height: auto; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .6)); } .pp-panel { position: relative; min-height: 94px; padding: 20px 22px 20px 168px; border: 1px solid rgba(238, 188, 80, .42); border-bottom: none; border-radius: var(--r-md) var(--r-md) 0 0; background: radial-gradient(420px 200px at 76% 0%, rgba(238, 188, 80, .16), transparent 70%), linear-gradient(150deg, var(--ink-700) 0%, #240f3d 58%, var(--ink-850) 100%); box-shadow: 0 -10px 52px rgba(238, 188, 80, .14), 0 -6px 26px rgba(0, 0, 0, .6); } .pp-close { position: absolute; top: -14px; right: 16px; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(238, 188, 80, .4); border-radius: 50%; background: var(--ink-700); color: var(--mut); font-size: .68rem; cursor: pointer; transition: all .2s var(--ease); } .pp-close:hover { background: var(--g-gold); color: #2a1c00; transform: rotate(90deg); } .pp-body { display: flex; flex-direction: column; align-items: flex-start; } .pp-eyebrow { margin-bottom: 3px; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-400); } .pp-amount { margin-bottom: 2px; font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; background: var(--g-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } .pp-spins { margin-bottom: 12px; font-size: .84rem; color: rgba(255, 255, 255, .76); } .pp-cta { --btn-py: 10px; --btn-px: 22px; margin-bottom: 9px; font-size: .88rem; } .pp-terms { font-size: .66rem; line-height: 1.45; color: rgba(255, 255, 255, .36); } /* ============================================================ 19. SUB-PAGE COMPONENTS ============================================================ */ /* ---- Page hero (inner pages) ---- */ .page-hero, .promo-hero { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(44px, 6vw, 76px); border-bottom: 1px solid var(--line); overflow: hidden; text-align: center; background: radial-gradient(760px 400px at 50% -12%, rgba(109, 40, 217, .34), transparent 68%), radial-gradient(560px 300px at 88% 8%, rgba(238, 188, 80, .14), transparent 70%), var(--ink-850); } .page-hero-inner, .promo-hero-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; } .page-hero-title, .promo-hero-title { font-size: clamp(2rem, 5.4vw, 3.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; margin-bottom: 16px; } .page-hero-title span, .promo-hero-title span { background: var(--g-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } .page-hero-sub, .promo-hero-sub { font-size: clamp(1rem, 1.6vw, 1.14rem); color: var(--dim); line-height: 1.72; max-width: 62ch; margin: 0 auto; } /* ---- Content sections ---- */ .content-section { padding: var(--sp-sec) 0; } .content-section.bg-card, .bg-card { background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 40%), var(--ink-850); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .content-section p { color: var(--dim); line-height: 1.8; margin-bottom: 16px; } .content-section p:last-child { margin-bottom: 0; } .content-section strong { color: var(--text); } .content-section h3 { font-size: 1.2rem; margin: 26px 0 10px; } .content-section ul, .content-section ol { margin: 0 0 16px 20px; color: var(--dim); line-height: 1.8; } .content-section li { margin-bottom: 8px; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; } /* ---- Stat boxes ---- */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 30px; } .stat-box { padding: 22px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: linear-gradient(160deg, var(--ink-750), var(--ink-850)); text-align: center; transition: transform .28s var(--ease), border-color .28s var(--ease); } .stat-box:hover { transform: translateY(-5px); border-color: rgba(238, 188, 80, .32); } .stat-box-value { display: block; /* markup uses */ font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; background: var(--g-gold); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px; } .stat-box-label { display: block; font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); } /* ---- Value / tool cards ---- */ .values-grid, .tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(14px, 2vw, 22px); } .value-card, .tool-card { padding: clamp(24px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(160deg, var(--ink-750), var(--ink-850)); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .value-card:hover, .tool-card:hover { transform: translateY(-6px); border-color: rgba(238, 188, 80, .32); box-shadow: var(--sh-2); } .value-icon, .tool-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 15px; border: 1px solid rgba(238, 188, 80, .28); background: var(--g-gold-soft); font-size: 1.55rem; } .value-card h3, .tool-card h3 { font-size: 1.14rem; margin-bottom: 10px; } .value-card p, .tool-card p { font-size: .93rem; color: var(--mut); line-height: 1.72; } /* ---- Team ---- */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 2vw, 24px); } .team-card { padding: clamp(24px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(160deg, var(--ink-750), var(--ink-850)); transition: transform .3s var(--ease), border-color .3s var(--ease); } .team-card:hover { transform: translateY(-6px); border-color: rgba(238, 188, 80, .3); } .team-name { font-size: 1.16rem; font-weight: 700; margin-bottom: 4px; } .team-role { display: inline-block; margin-bottom: 14px; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-400); } .team-bio { font-size: .92rem; color: var(--mut); line-height: 1.75; margin-bottom: 14px; } .team-exp { display: inline-block; padding: 5px 13px; border: 1px solid var(--line-str); border-radius: var(--r-pill); font-size: .76rem; color: var(--dim); } /* ---- Process steps ---- */ .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(14px, 2vw, 22px); counter-reset: pstep; } .process-step { position: relative; padding: clamp(24px, 3vw, 32px) clamp(20px, 2.5vw, 26px); padding-top: 44px; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(160deg, var(--ink-750), var(--ink-850)); transition: transform .3s var(--ease), border-color .3s var(--ease); } .process-step:hover { transform: translateY(-6px); border-color: rgba(238, 188, 80, .3); } .process-step::before { counter-increment: pstep; content: counter(pstep, decimal-leading-zero); position: absolute; top: 20px; left: clamp(20px, 2.5vw, 26px); font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; background: var(--g-gold); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .75; } .process-step h3 { font-size: 1.1rem; margin-bottom: 9px; } .process-step p { font-size: .92rem; color: var(--mut); line-height: 1.72; } /* ---- Promotions page ---- */ .promo-hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; } .hero-stat { min-width: 148px; padding: 16px 22px; border: 1px solid var(--line-str); border-radius: var(--r-sm); background: rgba(255, 255, 255, .04); backdrop-filter: blur(10px); } .hero-stat-value { display: block; /* markup uses */ font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; line-height: 1.1; margin-bottom: 3px; background: var(--g-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-stat-label { display: block; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); } .promo-filters { padding: 26px 0 0; } .filter-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; } .promotions-section { padding: clamp(32px, 4vw, 52px) 0 var(--sp-sec); } .promotions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(18px, 2.4vw, 28px); } .promo-full-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(165deg, var(--ink-750), var(--ink-850)); overflow: hidden; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .promo-full-card:hover { transform: translateY(-7px); border-color: rgba(238, 188, 80, .34); box-shadow: var(--sh-2); } .promo-full-card.hidden { display: none; } .promo-card-banner { position: relative; display: grid; place-items: center; min-height: 132px; padding: 26px 20px; text-align: center; background: radial-gradient(420px 200px at 50% 0%, rgba(238, 188, 80, .22), transparent 70%), linear-gradient(135deg, var(--vio-700), var(--ink-700)); border-bottom: 1px solid var(--line); overflow: hidden; } .promo-card-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; } .banner-amount { position: relative; z-index: 1; font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; background: var(--g-gold); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 4px 24px rgba(0, 0, 0, .4); } /* optional kicker line above the amount */ .banner-amount span { display: block; margin-bottom: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: none; -webkit-text-fill-color: rgba(255, 255, 255, .72); color: rgba(255, 255, 255, .72); } /* Sits inline in the card header next to the title */ .promo-type-badge { flex-shrink: 0; padding: 5px 13px; border-radius: var(--r-pill); background: var(--g-gold); color: #2a1c00; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .badge-vip { background: linear-gradient(135deg, #ffe9a8, #d99f2b); } .badge-crypto { background: linear-gradient(135deg, #7ee7c7, #16a37b); color: #04241a; } .badge-special { background: linear-gradient(135deg, #c4a5ff, #6d28d9); color: #fff; } .promo-card-body { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.6vw, 28px); } .promo-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .promo-card-title { font-size: 1.22rem; font-weight: 700; } .promo-card-desc { font-size: .94rem; color: var(--mut); line-height: 1.72; margin-bottom: 18px; } .promo-breakdown { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-xs); background: rgba(7, 5, 13, .45); } .promo-breakdown li, .promo-breakdown > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; list-style: none; } .breakdown-label { flex-shrink: 0; font-size: .86rem; color: var(--mut); } .breakdown-value { font-size: .92rem; font-weight: 700; color: var(--gold-300); text-align: right; } .promo-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; } .promo-terms-wrap { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; } .promo-terms-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: none; background: none; font-family: var(--font); font-size: .82rem; font-weight: 600; color: var(--mut); cursor: pointer; transition: color .2s var(--ease); } .promo-terms-toggle:hover { color: var(--gold-300); } /* the button ships its own inline chevron — size and rotate that */ .promo-terms-toggle svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .25s var(--ease); } .promo-terms-toggle.open svg, .promo-terms-toggle.active svg { transform: rotate(180deg); } .promo-terms-text { display: none; margin-top: 11px; font-size: .82rem; line-height: 1.75; color: var(--mut); } .promo-terms-text.open, .promo-terms-text.active { display: block; } /* ---- How We Review page ---- */ .score-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 32px; } .score-chip { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-sm); background: linear-gradient(160deg, var(--ink-750), var(--ink-850)); transition: transform .28s var(--ease), border-color .28s var(--ease); } .score-chip:hover { transform: translateY(-5px); border-color: rgba(238, 188, 80, .3); } /* weight sits above the info block, not inside it */ .score-chip-weight { display: block; margin-bottom: 10px; font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; background: var(--g-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } .score-chip-info { display: block; } .score-chip-name { font-size: 1rem; font-weight: 700; margin-bottom: 5px; } .score-chip-desc { font-size: .86rem; color: var(--mut); line-height: 1.65; } .criteria-list { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 20px); } .criterion-card { border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(160deg, var(--ink-750), var(--ink-850)); overflow: hidden; transition: border-color .28s var(--ease), box-shadow .28s var(--ease); } .criterion-card:hover { border-color: rgba(238, 188, 80, .3); box-shadow: var(--sh-1); } .criterion-header { display: flex; align-items: center; gap: 18px; padding: clamp(18px, 2.4vw, 26px); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .022); } .criterion-number { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--g-gold); color: #2a1c00; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; box-shadow: 0 6px 20px -8px rgba(238, 188, 80, .7); } .criterion-title-wrap { flex: 1; min-width: 0; } .criterion-title { font-size: 1.16rem; font-weight: 700; margin-bottom: 3px; } .criterion-subtitle { font-size: .85rem; color: var(--mut); } .criterion-weight-badge { flex-shrink: 0; padding: 7px 15px; border: 1px solid rgba(238, 188, 80, .38); border-radius: var(--r-pill); background: var(--g-gold-soft); font-size: .82rem; font-weight: 800; color: var(--gold-300); white-space: nowrap; } .criterion-body { padding: clamp(18px, 2.4vw, 26px); } .criterion-body p { font-size: .95rem; color: var(--dim); line-height: 1.78; margin-bottom: 16px; } .criterion-checklist { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0; } .criterion-checklist li { position: relative; padding-left: 28px; font-size: .9rem; color: var(--mut); line-height: 1.6; } .criterion-checklist li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--g-gold-soft); border: 1px solid rgba(238, 188, 80, .4); } .criterion-checklist li::after { content: ''; position: absolute; left: 6px; top: 7px; width: 5px; height: 9px; border: solid var(--gold-300); border-width: 0 2px 2px 0; transform: rotate(45deg); } .rating-scale { display: flex; flex-direction: column; gap: 11px; margin-top: 30px; } .rating-tier { display: flex; align-items: center; gap: 18px; padding: 17px 22px; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-sm); background: linear-gradient(100deg, rgba(255, 255, 255, .035), transparent); transition: transform .25s var(--ease); } .rating-tier:hover { transform: translateX(5px); } .rating-tier-score { flex-shrink: 0; min-width: 82px; font-family: var(--font-display); font-size: 1.16rem; font-weight: 800; } .rating-tier-label { flex-shrink: 0; min-width: 116px; font-size: .95rem; font-weight: 700; } .rating-tier-desc { font-size: .9rem; color: var(--mut); line-height: 1.6; } .tier-excellent { border-left-color: #3ddc97; } .tier-excellent .rating-tier-score { color: #3ddc97; } .tier-good { border-left-color: var(--gold-400); } .tier-good .rating-tier-score { color: var(--gold-400); } .tier-average { border-left-color: #f0883e; } .tier-average .rating-tier-score { color: #f0883e; } .tier-poor { border-left-color: var(--live); } .tier-poor .rating-tier-score { color: var(--live); } .independence-box, .commitment-box { padding: clamp(24px, 3vw, 36px); border: 1px solid rgba(238, 188, 80, .3); border-radius: var(--r-md); background: radial-gradient(600px 280px at 12% 0%, rgba(238, 188, 80, .12), transparent 70%), linear-gradient(150deg, var(--ink-750), var(--ink-850)); } .independence-box h3, .commitment-box h3 { margin-top: 0; font-size: 1.24rem; margin-bottom: 12px; } .independence-box p, .commitment-box p { color: var(--dim); line-height: 1.8; } /* ---- Responsible gambling page ---- */ .helpline-banner { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 26px); padding: clamp(22px, 3vw, 32px); border: 1px solid rgba(255, 77, 109, .38); border-radius: var(--r-md); background: radial-gradient(600px 260px at 8% 0%, rgba(255, 77, 109, .18), transparent 70%), linear-gradient(150deg, var(--ink-750), var(--ink-850)); box-shadow: var(--sh-1); } .helpline-icon { flex-shrink: 0; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; border: 1px solid rgba(255, 77, 109, .4); background: rgba(255, 77, 109, .14); font-size: 1.7rem; } .helpline-text { flex: 1; min-width: 0; } .helpline-text strong { display: block; font-size: 1.1rem; margin-bottom: 4px; } .helpline-text p { font-size: .92rem; color: var(--mut); margin: 0; } .helpline-phone { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; color: #ff8098; white-space: nowrap; } .helpline-phone:hover { color: #ffa3b5; } .warning-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .warning-item { position: relative; padding: 17px 20px 17px 46px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(255, 255, 255, .03); font-size: .93rem; color: var(--dim); line-height: 1.65; transition: border-color .25s var(--ease), transform .25s var(--ease); } .warning-item:hover { border-color: rgba(255, 77, 109, .4); transform: translateY(-3px); } .warning-item::before { content: '!'; position: absolute; left: 17px; top: 17px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 77, 109, .18); border: 1px solid rgba(255, 77, 109, .45); color: #ff8098; font-size: .76rem; font-weight: 800; } .support-orgs { display: flex; flex-direction: column; gap: 13px; } .support-org { display: flex; align-items: center; gap: 18px; padding: 19px 22px; border: 1px solid var(--line); border-radius: var(--r-sm); background: linear-gradient(120deg, rgba(255, 255, 255, .035), transparent); transition: border-color .25s var(--ease), transform .25s var(--ease); } .support-org:hover { border-color: rgba(238, 188, 80, .32); transform: translateX(5px); } .org-initial { flex-shrink: 0; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--g-gold); color: #2a1c00; font-family: var(--font-display); font-size: 1.14rem; font-weight: 800; } .org-info { flex: 1; min-width: 0; } .org-info strong { display: block; font-size: 1.04rem; margin-bottom: 3px; } .org-info p { font-size: .88rem; color: var(--mut); margin: 0; line-height: 1.6; } .org-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; } .org-phone { font-weight: 800; color: var(--gold-300); white-space: nowrap; } .org-web { font-size: .85rem; color: var(--mut); } .org-web:hover { color: var(--gold-300); } .green { color: var(--success); } /* ============================================================ 20. RESPONSIVE ============================================================ */ /* ---- Laptop (≤ 1080px) ---- */ @media (max-width: 1080px) { .tournament-card { grid-template-columns: 1fr; } .vip-levels { grid-template-columns: 1fr; max-width: 480px; } .vip-card.featured { order: -1; } } /* ---- Tablet (≤ 900px) ---- */ @media (max-width: 900px) { .main-nav, .header-actions { display: none; } .hamburger { display: flex; } .header-inner { height: 66px; gap: 12px; } .logo { height: 38px; } .hero { margin-top: -66px; padding-top: calc(66px + clamp(48px, 8vw, 80px)); min-height: 82vh; } html { scroll-padding-top: 76px; } .trustbar-inner { grid-template-columns: repeat(2, 1fr); } .split, .two-col { grid-template-columns: 1fr; } .split--reverse .split-media { order: 0; } .split-media { aspect-ratio: 16 / 10; } .footer-top { grid-template-columns: 1fr; } .footer-brand { max-width: none; } .helpline-banner { flex-wrap: wrap; } .support-org { flex-wrap: wrap; gap: 14px; } .org-contact { align-items: flex-start; text-align: left; } .rating-tier { flex-wrap: wrap; gap: 8px 16px; } .rating-tier-score, .rating-tier-label { min-width: 0; } .rating-tier-desc { flex-basis: 100%; } .criterion-header { flex-wrap: wrap; gap: 14px; } .criterion-weight-badge { order: 3; } } /* ---- Mobile (≤ 600px) ---- */ @media (max-width: 600px) { :root { --sp-sec: 48px; } .header-inner { height: 60px; } .logo { height: 32px; } .hero { margin-top: -60px; padding-top: calc(60px + 44px); min-height: 76vh; } .hero-title { font-size: clamp(1.95rem, 9vw, 2.7rem); } .hero-sub { font-size: .96rem; } .hero-cta-row { flex-direction: column; align-items: stretch; width: 100%; } .hero-cta-row .btn { width: 100%; } .hero-trust { gap: 9px 18px; font-size: .82rem; } .hero-trust li { font-size: .82rem; } .scroll-cue { display: none; } .trustbar { margin-top: -26px; } .trust-tile { padding: 17px 10px; } /* Tabs scroll horizontally instead of wrapping. flex-wrap must be reset to nowrap here: in a COLUMN flex container a wrapping line takes its width from its content, so the rail would size to max-content (~722px) and overflow-x would never engage. */ .game-toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px; } .category-tabs, .filter-tabs { width: 100%; max-width: 100%; min-width: 0; flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; justify-content: flex-start; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .category-tabs::-webkit-scrollbar, .filter-tabs::-webkit-scrollbar { display: none; } .tab-btn { flex-shrink: 0; padding: 9px 16px; font-size: .84rem; } .search-bar-wrap { width: 100%; } .game-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; } .card-title { font-size: .78rem; padding: 9px 8px; } /* (touch treatment for .card-overlay lives in section 21) */ .promo-grid, .promotions-grid { grid-template-columns: 1fr; } .tournament-card { padding: 22px 18px; } .tournament-meta { flex-direction: column; align-items: flex-start; } .faq-question { font-size: .92rem; padding: 17px 18px; } .faq-answer-inner { font-size: .89rem; padding-inline: 18px; } .footer-links { grid-template-columns: 1fr 1fr; gap: 20px; } .footer-bottom { text-align: center; } .responsible-badges { justify-content: center; } .modal { padding: 26px 20px; border-radius: var(--r-md); } .social-login-btns { grid-template-columns: 1fr; } .stats-row { grid-template-columns: 1fr 1fr; } .helpline-banner { flex-direction: column; align-items: flex-start; text-align: left; } .criterion-checklist { grid-template-columns: 1fr; } .promo-card-actions { flex-direction: column; } .promo-card-actions .btn { width: 100%; } } /* ---- Small mobile (≤ 480px) ---- */ @media (max-width: 480px) { #promoPopup { width: calc(100vw - 12px); } .pp-char-wrap, .pp-char { width: 128px; } .pp-panel { min-height: 84px; padding: 14px 14px 14px 140px; } .pp-amount { font-size: 1.5rem; } .pp-spins { font-size: .76rem; margin-bottom: 9px; } .pp-cta { --btn-py: 8px; --btn-px: 16px; font-size: .82rem; } .trustbar-inner { grid-template-columns: 1fr 1fr; } .footer-links { grid-template-columns: 1fr; } } /* ============================================================ 21. MOBILE REFINEMENTS ============================================================ */ /* ---- Touch-friendly hit areas (any pointer that isn't a mouse) ---- */ @media (hover: none) { .modal-close { width: 44px; height: 44px; font-size: 1rem; } .pp-close { width: 38px; height: 38px; top: -19px; font-size: .8rem; } .footer-col a { padding: 3px 0; } .tab-btn { min-height: 42px; } /* hover transforms are pointless on touch and cause sticky states */ .game-card:hover, .promo-card:hover, .feature-card:hover, .value-card:hover, .tool-card:hover, .team-card:hover, .stat-box:hover, .score-chip:hover, .vip-card:hover, .promo-full-card:hover { transform: none; } } @media (max-width: 600px) { /* Long CTA labels (e.g. the helpline number) must wrap rather than push past the viewport — .btn is nowrap by default. */ .btn { white-space: normal; } /* ---- Stop iOS zooming the page when a field is focused ---- */ .search-input, .modal-form input[type="text"], .modal-form input[type="email"], .modal-form input[type="password"], .modal-form input[type="date"] { font-size: 16px; } /* ---- Game cards: tap anywhere to play ---- The hover overlay covered the artwork on touch, so hide it and stretch the primary link across the whole card instead. */ .card-overlay { display: block; opacity: 1; padding: 0; background: none; backdrop-filter: none; } .card-overlay .btn { display: none; } .card-overlay .btn-primary { display: block; position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; font-size: 0; color: transparent; } .card-overlay .btn-primary::after { display: none; } /* small play affordance so the card reads as tappable */ .card-img-wrap::after { content: ''; position: absolute; right: 7px; bottom: 7px; width: 26px; height: 26px; border-radius: 50%; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7.5v9l7.5-4.5z' fill='%232a1c00'/%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(135deg, #ffe9a8, #eebc50); box-shadow: 0 3px 10px rgba(0, 0, 0, .5); pointer-events: none; } /* ---- Scroll affordance on the horizontal tab rails ---- */ .category-tabs, .filter-tabs { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); scroll-snap-type: x proximity; } .tab-btn { scroll-snap-align: start; } /* ---- Trim animation cost on phones ---- */ .hero-bg { animation: none; transform: scale(1.02); } .marquee-track { animation-duration: 60s; } .btn-pulse { animation: none; } /* ---- Hero breathing room ---- */ .hero-terms { font-size: .76rem; line-height: 1.5; } .hero-trust { gap: 8px 16px; margin-top: 22px; padding-top: 20px; } /* ---- Compact promo popup ---- At full size it swallowed roughly a fifth of the screen on every page. */ .pp-char-wrap, .pp-char { width: 104px; } .pp-panel { min-height: 72px; padding: 12px 14px 12px 114px; } .pp-amount { font-size: 1.3rem; } .pp-spins { margin-bottom: 8px; font-size: .72rem; } .pp-eyebrow { font-size: .62rem; } .pp-cta { --btn-py: 9px; --btn-px: 16px; margin-bottom: 6px; font-size: .8rem; } .pp-terms { font-size: .6rem; } } /* ---- Small mobile: popup slims down further ---- */ @media (max-width: 400px) { .pp-char-wrap, .pp-char { width: 88px; } .pp-panel { padding: 11px 12px 11px 96px; min-height: 66px; } .pp-amount { font-size: 1.16rem; } .pp-terms { display: none; } } /* ---- Landscape phones: hero must not eat the whole screen ---- */ @media (max-height: 520px) and (orientation: landscape) { .hero { min-height: 0; padding-top: calc(60px + 28px); padding-bottom: 36px; } .hero-trust { display: none; } #promoPopup { display: none; } } /* ---- Print ---- */ @media print { body::before, .site-header, .mobile-nav, #promoPopup, .modal-overlay, .scroll-cue { display: none !important; } body { background: #fff; color: #000; } }