/* ===================================================================== Faders, faders.io AG-inspired editorial theme: white canvas, red brand, deep navy, gold Fonts loaded from Google in : Inter + Montserrat ===================================================================== */ :root { /* Backgrounds - SkyCity dark theme */ --bg: #0F1419; --bg-alt: #1B2229; --bg-soft: #0F1419; --surface: #242B32; --surface-hover: #2D3540; --border: #2D3540; --border-strong: #4A5560; --text: #E5E7EB; --text-muted: #9CA3AF; --text-dim: #6B7280; /* Brand palette - gold primary (SkyCity #2D7FFF) */ --navy: #2D7FFF; --navy-2: #5BA1FF; --navy-deep: #1A5CE0; --red: #FF8C00; --red-2: #FF8C00; --red-deep: #E67E00; --gold: #F5B82E; --gold-2: #FFCB47; --success: #10B981; /* Aliases kept for backward-compat with existing utility names */ --pink: var(--red); --pink-2: var(--red-2); --pink-deep: var(--red-deep); --purple: var(--navy); --purple-2: var(--navy-2); --accent: var(--navy); --accent-2: var(--navy-2); --danger: var(--red); --teal: var(--navy-2); --teal-2: var(--navy-deep); --yellow: var(--gold); --yellow-deep: #2D7FFF; --surface-2: var(--bg-alt); --pink-glow: rgba(255, 140, 0, .24); --purple-glow: rgba(45, 127, 255, .24); --gold-glow: rgba(245, 184, 46, .28); /* Shape + shadow - SkyCity feel */ --radius-sm: 4px; --radius: 4px; --radius-lg: 10px; --button-radius: 44px; --shadow-1: 0 1px 1px 0 rgba(0,0,0,0.25), 0 0 1px 0 rgba(0,0,0,0.25); --shadow-2: 0 3px 4px 0 rgba(0,0,0,0.35), 0 0 1px 0 rgba(0,0,0,0.25); --shadow-3: 0 8px 10px 0 rgba(0,0,0,0.45), 0 0 1px 0 rgba(0,0,0,0.3); --shadow-strong: 0 18px 26px 0 rgba(0,0,0,0.55), 0 0 1px 0 rgba(0,0,0,0.3); --shadow-pink: 0 8px 22px rgba(255, 140, 0, .22); /* Layout */ --max-w: 1344px; /* Typography - Montserrat across the board (SkyCity) */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-head: 'Red Hat Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-display: 'Red Hat Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.6;font-size:16px;min-height:100vh;overflow-x:hidden} body::before{content:none} img{max-width:100%;display:block} a{color:var(--navy);text-decoration:none} a:hover{color:var(--red)} h1, h2, h3, h4{font-family:var(--font-head);font-weight:800;color:var(--text);line-height:1.2;letter-spacing:-.01em} h1{font-size:clamp(2rem, 4.5vw, 3.4rem)} h2{font-size:clamp(1.6rem, 3vw, 2.2rem)} h3{font-size:1.15rem;font-weight:700} p{color:var(--text-muted)} button{cursor:pointer;font-family:inherit} .container{max-width:var(--max-w);margin:0 auto;padding:0 20px} /* ---------- HEADER + NAV ---------- */ .top-strip{background:var(--navy-deep);color:#fff;font-family:var(--font-head);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600} .top-strip .container{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap} .top-strip .strip-left{display:inline-flex;gap:14px;align-items:center;flex-wrap:wrap} .top-strip .strip-left .pill{padding:3px 10px;border-radius:999px;background:rgba(255, 255, 255, .14);font-size:11px} .top-strip a{color:var(--gold-2)} .top-strip a:hover{color:#fff;text-decoration:underline} @media (max-width:720px){.top-strip .strip-right{display:none}} .site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 1px 0 rgba(0, 0, 0, .03)} .header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:18px} .logo{display:inline-flex;align-items:center;gap:10px;color:var(--text);flex:0 0 auto} .logo img{height:56px;width:auto;display:block;max-width:100%} .logo:hover{opacity:.9} @media (max-width:640px){.logo img{height:44px}} .nav{display:flex;align-items:center;gap:4px} .nav a, .nav .dropdown-trigger{padding:10px 14px;border-radius:4px;color:var(--text);font-family:var(--font-head);font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:none;border:none;transition:color .15s, background .15s} .nav a:hover, .nav .dropdown-trigger:hover{color:var(--red);background:var(--bg-alt)} .nav a.active{color:var(--red);border-bottom:3px solid var(--red);border-radius:0;padding-bottom:7px} .nav .has-dropdown{position:relative} .nav .dropdown-trigger{display:inline-flex;align-items:center;gap:6px} .nav .dropdown-trigger::after{content:"\25BE";font-size:10px;margin-top:2px;transition:transform .2s} .nav .has-dropdown:hover .dropdown-trigger::after, .nav .has-dropdown.open .dropdown-trigger::after{transform:rotate(180deg)} .nav .dropdown-menu{position:absolute;top:100%;left:0;min-width:280px;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-2);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .2s} .nav .has-dropdown:hover .dropdown-menu, .nav .has-dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)} .nav .dropdown-menu>a, .nav .dropdown-menu .submenu-parent{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13.5px;letter-spacing:.04em;text-transform:none;font-weight:600;color:var(--text);border-radius:0} .nav .dropdown-menu>a:hover, .nav .dropdown-menu .submenu-parent:hover{background:var(--bg-alt);color:var(--red)} .nav .flag-ico-img{width:20px;height:20px;border-radius:3px;flex-shrink:0} .nav .has-submenu{position:relative} .nav .submenu-caret{margin-left:auto;font-size:10px;color:var(--text-dim)} .nav .dropdown-submenu{position:absolute;top:0;left:100%;min-width:240px;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-2);padding:8px 0;opacity:0;visibility:hidden;transform:translateX(6px);transition:all .2s} .nav .has-submenu:hover .dropdown-submenu{opacity:1;visibility:visible;transform:translateX(0)} .nav .dropdown-submenu a{display:block;padding:9px 16px;font-size:13px;color:var(--text);font-family:var(--font-body);letter-spacing:0;text-transform:none;font-weight:500} .nav .dropdown-submenu a:hover{background:var(--bg-alt);color:var(--red)} .header-search{display:none !important} .nav-toggle, .menu-toggle{display:none;background:none;border:none;font-size:26px;color:var(--text);cursor:pointer;padding:4px 8px} @media (max-width:900px){ .nav-toggle, .menu-toggle{display:block} .header-search{display:none} .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:12px;border-top:1px solid var(--border);box-shadow:var(--shadow-2);gap:0;max-height:calc(100vh - 60px);overflow-y:auto} .nav.open{display:flex} .nav a, .nav .dropdown-trigger{padding:12px 14px;width:100%;text-align:left;justify-content:flex-start} /* Collapse dropdowns/submenus by default on mobile — open only when parent has .open */ .nav .dropdown-menu{display:none;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:4px 0 4px 12px;background:var(--bg-alt);border-radius:6px;margin:4px 0} .nav .has-dropdown.open > .dropdown-menu{display:block} .nav .dropdown-submenu{display:none;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding-left:24px;background:#fff} .nav .has-submenu.open > .dropdown-submenu{display:block} /* Rotate caret when submenu is open for visual feedback */ .nav .has-submenu > .submenu-parent .submenu-caret{transition:transform .18s} .nav .has-submenu.open > .submenu-parent .submenu-caret{transform:rotate(90deg)} } /* ---------- HERO ---------- */ .ag-hero{background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-2) 100%);color:#fff;text-align:center;padding:28px 20px 34px;position:relative;overflow:hidden} @media (max-width:720px){ .ag-hero{padding:14px 16px 18px} .ag-hero .kicker{display:none !important} .ag-hero h1{font-size:1.35rem;line-height:1.15;margin-bottom:8px} .ag-hero .lede{font-size:.85rem;line-height:1.45;margin-bottom:12px} .ag-hero .hero-ctas{gap:8px} .ag-hero .btn, .ag-hero .btn-primary, .ag-hero .btn-secondary, .ag-hero .btn-hero-primary, .ag-hero .btn-hero-secondary{padding:9px 14px;font-size:12px;letter-spacing:.04em} } .ag-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 100%, rgba(255, 140, 0, .20), transparent 70%);pointer-events:none} .ag-hero .container{position:relative} .ag-hero .kicker{display:inline-block;font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);background:rgba(255, 255, 255, .08);padding:4px 11px;border-radius:999px;margin-bottom:10px;border:1px solid rgba(255, 255, 255, .14)} .ag-hero h1{color:#fff;font-size:clamp(1.7rem, 3.4vw, 2.6rem);font-weight:900;line-height:1.05;letter-spacing:-.02em;margin-bottom:10px} .ag-hero h1 .grad{background:linear-gradient(90deg, var(--gold), var(--red-2));-webkit-background-clip:text;background-clip:text;color:transparent} .ag-hero .lede{max-width:640px;margin:0 auto 16px;font-size:.95rem;color:rgba(255, 255, 255, .85);line-height:1.5} .ag-hero .hero-ctas{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center} .btn-hero-primary{background:var(--red);color:#fff;padding:12px 22px;border-radius:6px;font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:background .2s, transform .1s;border:none} .btn-hero-primary:hover{background:var(--red-deep);color:#fff;transform:translateY(-1px)} .btn-hero-secondary{background:transparent;color:#fff;border:2px solid rgba(255, 255, 255, .30);padding:10px 20px;border-radius:6px;font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:background .2s, border-color .2s} .btn-hero-secondary:hover{background:rgba(255, 255, 255, .08);border-color:#fff;color:#fff} /* ---------- QUICK ACCESS ---------- */ .quick-access{background:var(--bg-alt);padding:40px 0;border-bottom:1px solid var(--border)} .qa-grid{display:grid;grid-template-columns:repeat(7, minmax(0, 140px));gap:14px;justify-content:center} .qa-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 12px;background:#fff;border:1px solid var(--border);border-radius:10px;text-align:center;transition:transform .2s, box-shadow .2s, border-color .2s;color:var(--text)} .qa-tile:hover{transform:translateY(-3px);border-color:var(--red);box-shadow:var(--shadow-2);color:var(--red)} .qa-tile .qa-ico{font-size:26px;line-height:1} .qa-tile .qa-label{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} @media (max-width:900px){.qa-grid{grid-template-columns:repeat(4, 1fr)}} @media (max-width:480px){.qa-grid{grid-template-columns:repeat(2, 1fr);gap:10px}} /* ---------- SECTION FRAME ---------- */ .section{padding:60px 0} .section.tight{padding:32px 0 40px} .section.alt{background:var(--bg-alt)} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap} .section-head h2{font-size:clamp(1.6rem, 2.6vw, 2rem)} .section-head p{max-width:680px;margin-top:8px;color:var(--text-muted);font-size:15px} .section-head .see-all, .see-all{font-family:var(--font-head);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red);white-space:nowrap} .section-head .see-all:hover, .see-all:hover{color:var(--red-deep)} /* ---------- CASINO CARDS ---------- */ .casino-list{display:flex;flex-direction:column;gap:16px} .casino-card{display:grid;grid-template-columns:60px 130px 1fr 240px 220px;align-items:center;gap:20px;padding:20px 24px;background:#fff;border:1px solid var(--border);border-radius:12px;transition:box-shadow .2s, border-color .2s, transform .2s;position:relative} .casino-card:hover{border-color:var(--navy);box-shadow:var(--shadow-2);transform:translateY(-2px)} .casino-card.is-top{border-color:var(--red);border-width:2px;box-shadow:0 0 0 4px rgba(255, 140, 0, .08)} .rank-badge{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:20px} .casino-card.is-top .rank-badge{background:var(--red);box-shadow:0 4px 12px rgba(255, 140, 0, .35)} .new-badge{background:var(--gold);color:var(--text);font-size:10px;font-weight:800;padding:3px 8px;border-radius:4px;letter-spacing:.05em;text-transform:uppercase} .casino-thumb{display:flex;align-items:center;justify-content:center;height:70px} .casino-thumb img{max-height:70px;max-width:130px;object-fit:contain} .casino-info h3{font-size:1.05rem;margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .casino-info .oc-flag{width:20px;height:20px;border-radius:3px} .casino-info .rating{display:inline-flex;align-items:center;gap:4px;background:var(--gold);color:var(--text);padding:4px 10px;border-radius:6px;font-size:12px;font-weight:800;font-family:var(--font-head);margin-bottom:10px;margin-right:8px;letter-spacing:.02em;box-shadow:0 1px 2px rgba(0, 0, 0, .06)} .casino-features{list-style:none;font-size:13px;color:var(--text-muted)} .casino-features li{padding:2px 0 2px 18px;position:relative} .casino-features li::before{content:"\2713";position:absolute;left:0;color:var(--success);font-weight:700} .casino-bonus{text-align:center;padding:12px;background:var(--bg-alt);border-radius:8px} .casino-bonus .bonus-label{display:block;font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-bottom:4px} .casino-bonus .bonus-amount{font-family:var(--font-head);font-weight:700;color:var(--text);font-size:15px;line-height:1.25} .casino-cta{display:flex;flex-direction:column;gap:8px;align-items:center} .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px;border-radius:6px;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;transition:all .2s;border:none;cursor:pointer} .btn-primary{background:var(--red);color:#fff} .btn-primary:hover{background:var(--red-deep);color:#fff} .btn-secondary{background:var(--bg-alt);color:var(--navy);border:1px solid var(--border)} .btn-secondary:hover{background:#fff;border-color:var(--navy)} .btn-block{width:100%} .review-link{font-size:12.5px;font-weight:600;color:var(--navy);letter-spacing:.03em} .review-link:hover{color:var(--red)} @media (max-width:900px){ .casino-card{grid-template-columns:44px 100px 1fr;grid-template-rows:auto auto;gap:12px 16px;padding:16px} .casino-bonus{grid-column:1/-1} .casino-cta{grid-column:1/-1;flex-direction:row;gap:12px} .casino-cta .btn{flex:1} } @media (max-width:520px){ /* Full single-column stack, everything centered */ .casino-card{grid-template-columns:1fr!important;grid-template-rows:none;gap:14px;padding:20px 16px;text-align:center;position:relative} .casino-card .rank-badge{position:absolute;top:12px;left:12px;width:34px;height:34px;font-size:14px;margin:0;grid-column:auto;grid-row:auto} .casino-card .casino-thumb{grid-column:1/-1;grid-row:auto;justify-content:center;align-items:center;min-width:0!important;height:auto;padding:6px 0 2px} .casino-card .casino-thumb img{max-height:64px;max-width:180px;margin:0 auto;display:block} .casino-card .casino-info{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center} .casino-card .casino-info h3{text-align:center;margin:0} .casino-card .casino-info .rating, .casino-card .casino-info .score-block, .casino-card .casino-info .badge, .casino-card .casino-info .tag{margin-left:auto;margin-right:auto} .casino-card .casino-features{display:inline-block;text-align:left;margin:2px auto 0;padding:0} .casino-card .casino-features li{padding-left:20px} .casino-card .payment-icons{justify-content:center;margin-left:auto;margin-right:auto} .casino-card .casino-bonus{grid-column:1/-1;text-align:center;width:100%} .casino-card .casino-cta{grid-column:1/-1;flex-direction:column;align-items:center;gap:8px;width:100%} .casino-card .casino-cta .btn{width:auto;min-width:200px;max-width:100%;margin:0 auto;display:inline-flex;align-items:center;justify-content:center} .casino-card .casino-cta .oc-terms, .casino-card .casino-cta small, .casino-card .casino-cta .fine{text-align:center;width:100%} /* Same treatment for the .oc-toplist card variant */ .oc-toplist .casino-card .casino-cta .btn{width:auto;min-width:200px;max-width:100%;margin:0 auto} } /* ---------- PROMISE / MARKETS / ARTICLES ---------- */ .promise{background:var(--navy-deep);color:#fff;padding:60px 0;text-align:center} .promise h2{color:#fff;margin-bottom:20px} .promise .promise-body{max-width:780px;margin:0 auto;font-size:1.05rem;line-height:1.7;color:rgba(255, 255, 255, .85)} .promise .promise-body strong{color:var(--gold-2)} .market-tiles{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px} .market-tile{display:flex;align-items:center;gap:14px;padding:20px 22px;background:#fff;border:1px solid var(--border);border-radius:12px;transition:all .2s;color:var(--text)} .market-tile:hover{border-color:var(--red);box-shadow:var(--shadow-2);transform:translateY(-2px);color:var(--text)} .market-tile img{width:36px;height:36px;border-radius:4px;flex-shrink:0} .market-tile .m-name{display:block;font-family:var(--font-head);font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:var(--text)} .market-tile .m-sub{display:block;font-size:12px;color:var(--text-muted);margin-top:3px} .market-tile .m-arrow{margin-left:auto;color:var(--red);font-weight:700;font-size:18px} @media (max-width:900px){.market-tiles{grid-template-columns:repeat(2, 1fr)}} @media (max-width:520px){.market-tiles{grid-template-columns:1fr}} .article-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px} .article-grid.cols-4{grid-template-columns:repeat(4, 1fr)} .article-grid.cols-5{grid-template-columns:repeat(5, 1fr)} .article-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:all .2s;color:var(--text)} .article-card:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:var(--shadow-strong);color:var(--text)} /* Card image box matches the source image aspect ratio (3:2 = 1536×1024) so the WHOLE image is visible AND fills the box — no crop, no side frame. */ .article-card .ac-image{aspect-ratio:3/2;height:auto;background:#fff;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--navy);padding:0} .article-card .ac-image img{width:100%;height:100%;object-fit:contain;object-position:center;padding:0;margin:0;display:block;background:#fff} .article-card .ac-image .ac-placeholder{padding:24px;text-align:center} .article-card .ac-image .ac-placeholder{font-family:var(--font-head);font-weight:800;font-size:24px;color:var(--navy);opacity:.35;letter-spacing:.05em;text-transform:uppercase} .article-card .ac-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1} .article-card .ac-tag{display:inline-block;align-self:flex-start;font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red);background:rgba(255, 140, 0, .08);padding:4px 10px;border-radius:4px} .article-card .ac-tag.guide{color:var(--navy);background:rgba(45, 127, 255, .08)} .article-card .ac-tag.payment{color:#059669;background:rgba(5, 150, 105, .08)} .article-card .ac-tag.tool{color:#7c3aed;background:rgba(124, 58, 237, .08)} .article-card h3{font-size:1.05rem;font-weight:700;line-height:1.35;color:var(--text)} .article-card .ac-meta{font-size:12px;color:var(--text-dim);margin-top:auto;padding-top:6px} .article-card .ac-read{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--red)} @media (max-width:1200px){.article-grid.cols-5{grid-template-columns:repeat(3, 1fr)}} @media (max-width:900px){.article-grid, .article-grid.cols-4, .article-grid.cols-5{grid-template-columns:repeat(2, 1fr)}} @media (max-width:520px){.article-grid, .article-grid.cols-4, .article-grid.cols-5{grid-template-columns:1fr}} /* ---------- TRUST / COMPLAINT / BONUS / TEAM / FOOTER ---------- */ .trust-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:22px} .trust-block{padding:24px;background:#fff;border:1px solid var(--border);border-radius:12px} .trust-block .t-ico{width:44px;height:44px;border-radius:8px;background:rgba(45, 127, 255, .08);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--navy);margin-bottom:14px} .trust-block h3{color:var(--navy);font-size:1.05rem;margin-bottom:8px} .trust-block p{font-size:14px;line-height:1.6} @media (max-width:900px){.trust-grid{grid-template-columns:repeat(2, 1fr)}} @media (max-width:520px){.trust-grid{grid-template-columns:1fr}} .complaint{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:linear-gradient(135deg, #fff 0%, var(--bg-alt) 100%);border:1px solid var(--border);border-radius:14px;padding:40px} .complaint h2{margin-bottom:16px;color:var(--navy)} .complaint p{margin-bottom:24px;line-height:1.65} .complaint .cx-visual{background:var(--navy);color:#fff;border-radius:12px;padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:220px} .complaint .cx-visual .cx-ico{font-size:60px} .complaint .cx-visual .cx-tagline{font-family:var(--font-head);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:13px;color:var(--gold-2);text-align:center} @media (max-width:720px){.complaint{grid-template-columns:1fr;padding:28px}} .bonus-types{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px} .bonus-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:26px 22px;text-align:center;transition:all .2s} .bonus-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow-2)} .bonus-card .b-ico{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(135deg, var(--gold), var(--gold-2));display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--navy-deep)} .bonus-card h3{color:var(--text);font-size:1.1rem;margin-bottom:10px} .bonus-card p{font-size:13.5px;line-height:1.55;margin-bottom:14px} .bonus-card .b-link{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--red)} @media (max-width:900px){.bonus-types{grid-template-columns:repeat(2, 1fr)}} @media (max-width:520px){.bonus-types{grid-template-columns:1fr}} .team-stats{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;margin-bottom:40px} .team-stat{background:var(--navy);color:#fff;border-radius:12px;padding:24px;text-align:center} .team-stat .ts-num{display:block;font-family:var(--font-head);font-weight:900;font-size:2.4rem;color:var(--gold);line-height:1} .team-stat .ts-lbl{display:block;font-family:var(--font-head);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-top:8px;color:rgba(255, 255, 255, .85)} .team-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px} .team-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:26px;text-align:center} .team-card .tc-avatar{width:90px;height:90px;border-radius:50%;margin:0 auto 14px;overflow:hidden;background:var(--bg-alt);border:3px solid var(--gold)} .team-card .tc-avatar img{width:100%;height:100%;object-fit:cover} .team-card h3{font-size:1.15rem;margin-bottom:4px} .team-card .tc-role{display:block;font-family:var(--font-head);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:12px} .team-card p{font-size:14px;line-height:1.55;margin-bottom:12px} .team-card .tc-link{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy)} @media (max-width:900px){.team-stats{grid-template-columns:repeat(2, 1fr)}.team-grid{grid-template-columns:1fr}} .site-footer{background:var(--navy-deep);color:rgba(255, 255, 255, .75);padding:60px 0 30px;margin-top:60px} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px} .footer-grid h4{color:#fff;font-size:14px;font-family:var(--font-head);letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:16px} .footer-grid ul{list-style:none} .footer-grid li{margin-bottom:8px} .footer-grid a{color:rgba(255, 255, 255, .75);font-size:14px} .footer-grid a:hover{color:var(--gold)} .footer-brand p{color:rgba(255, 255, 255, .75);font-size:14px;line-height:1.6;margin-bottom:20px} .footer-brand .fb-logo{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px} .footer-brand .fb-logo img{height:48px;width:auto;max-width:100%;display:block;flex-shrink:0} .footer-social{display:flex;gap:10px;margin-top:12px} .footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(255, 255, 255, .10);display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff} .footer-social a:hover{background:var(--red)} .newsletter{padding:24px;background:rgba(255, 255, 255, .06);border-radius:12px;margin-bottom:30px;border:1px solid rgba(255, 255, 255, .10)} .newsletter h4{color:#fff;font-family:var(--font-head);font-size:16px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin-bottom:8px} .newsletter p{color:rgba(255, 255, 255, .75);font-size:14px;margin-bottom:14px;line-height:1.55} .newsletter form{display:flex;gap:8px;max-width:480px} .newsletter input{flex:1;padding:11px 14px;border:1px solid rgba(255, 255, 255, .15);background:rgba(255, 255, 255, .05);color:#fff;border-radius:6px;font-family:inherit} .newsletter input::placeholder{color:rgba(255, 255, 255, .5)} .newsletter button{background:var(--red);color:#fff;padding:11px 22px;border-radius:6px;font-family:var(--font-head);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:13px;border:none} .newsletter button:hover{background:var(--red-deep)} .footer-bottom{border-top:1px solid rgba(255, 255, 255, .10);padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255, 255, 255, .55)} .footer-bottom .fb-disc{max-width:640px;line-height:1.55} .footer-bottom .fb-disc a{color:var(--gold-2)} .age-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255, 255, 255, .10);color:#fff;font-weight:700;font-size:12px;font-family:var(--font-head);letter-spacing:.05em} @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.newsletter form{flex-direction:column}} @media (max-width:520px){.footer-grid{grid-template-columns:1fr}} /* ---------- LEGACY SUPPORT (market subpages, blog posts, etc.) ---------- */ .content{padding:40px 0} .content section{margin-bottom:30px} .section-title, .pu-section-title{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:24px 0 20px;flex-wrap:wrap} .section-title h2, .pu-section-title h2{font-size:1.8rem;color:var(--text)} .hero, .editorial-hero, .page-hero, .article-hero{background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);color:#fff;padding:60px 20px 70px;text-align:center} .hero h1, .editorial-hero h1, .page-hero h1, .article-hero h1{color:#fff} .hero p, .editorial-hero p, .page-hero p, .article-hero p{color:rgba(255, 255, 255, .85)} .hero .grad, .editorial-hero .grad, .page-hero .grad, .article-hero .grad{background:linear-gradient(90deg, var(--gold), var(--red-2));-webkit-background-clip:text;background-clip:text;color:transparent} .kicker{display:inline-block;font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);margin-bottom:16px} .lede{max-width:680px;margin:0 auto 20px;font-size:1.1rem;line-height:1.55} .fact-strip{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px} .fact-strip .fact{background:rgba(255, 255, 255, .08);border:1px solid rgba(255, 255, 255, .14);padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:#fff} .stat-row{display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:16px;margin-top:24px;max-width:800px;margin-inline:auto} .stat-row .stat, .stat-row>div{padding:14px} .stat-row .num{display:block;font-family:var(--font-head);font-weight:800;font-size:1.8rem;color:var(--gold)} .stat-row .lbl{display:block;font-family:var(--font-head);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255, 255, 255, .85);margin-top:4px} .editorial-columns{display:grid;grid-template-columns:2fr 1fr;gap:40px;margin:40px 0} .editorial-columns .side{position:sticky;top:80px;align-self:start;padding:20px;background:var(--bg-alt);border:1px solid var(--border);border-radius:10px} .editorial-columns .side h3{color:var(--navy);font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px} @media (max-width:900px){.editorial-columns{grid-template-columns:1fr}.editorial-columns .side{position:static}} .blog-grid, .oc-toplist{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px;margin:20px 0} .blog-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .2s;color:var(--text)} .blog-card:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:var(--shadow-strong)} .blog-card .b-img{height:170px;background:linear-gradient(135deg, var(--bg-soft), var(--bg-alt))} .blog-card .b-img img{width:100%;height:100%;object-fit:cover} .blog-card .b-body{padding:18px 20px} .blog-card .tag{display:inline-block;font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red);background:rgba(255, 140, 0, .08);padding:4px 10px;border-radius:4px;margin-bottom:10px} .blog-card .tag.guide{color:var(--navy);background:rgba(45, 127, 255, .08)} .blog-card h3{font-size:1.05rem;font-weight:700;margin-bottom:8px;color:var(--text)} .blog-card .meta{font-size:12px;color:var(--text-dim);margin-top:6px} @media (max-width:900px){.blog-grid, .oc-toplist{grid-template-columns:repeat(2, 1fr)}} @media (max-width:520px){.blog-grid, .oc-toplist{grid-template-columns:1fr}} @media (max-width:720px){ } .table-wrap{overflow-x:auto;border-radius:8px;border:1px solid var(--border);margin:20px 0} table{width:100%;border-collapse:collapse;background:#fff} th, td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:14px} th{background:var(--bg-alt);font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--navy)} tr:last-child td{border-bottom:none} tr:hover td{background:var(--bg-alt)} .toc{background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;padding:20px 22px;margin:20px 0} .toc .toc-title{font-family:var(--font-head);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:12.5px;color:var(--navy);margin-bottom:12px} .toc ol{list-style:none;counter-reset:toc} .toc li{counter-increment:toc;padding:4px 0;font-size:14px} .toc li::before{content:counter(toc) ". ";color:var(--red);font-weight:700} .toc a{color:var(--text)} .toc a:hover{color:var(--red)} .callout{padding:18px 22px;border-radius:10px;background:rgba(45, 127, 255, .06);border-left:4px solid var(--navy);margin:20px 0} .callout.is-warning{background:rgba(255, 195, 0, .10);border-left-color:var(--gold)} .callout.is-danger{background:rgba(255, 140, 0, .06);border-left-color:var(--red)} .pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0} .pros-cons>div{padding:20px;border-radius:10px;border:1px solid var(--border)} .pros-cons .pros{background:rgba(22, 163, 74, .05);border-color:rgba(22, 163, 74, .2)} .pros-cons .cons{background:rgba(255, 140, 0, .04);border-color:rgba(255, 140, 0, .2)} .pros-cons h4{font-size:14px;margin-bottom:10px;letter-spacing:.05em;text-transform:uppercase} .pros-cons .pros h4{color:var(--success)} .pros-cons .cons h4{color:var(--red)} .pros-cons ul{list-style:none} .pros-cons li{padding:4px 0 4px 20px;position:relative;font-size:14px;color:var(--text-muted)} .pros-cons .pros li::before{content:"\2713";position:absolute;left:0;color:var(--success);font-weight:700} .pros-cons .cons li::before{content:"\2717";position:absolute;left:0;color:var(--red);font-weight:700} @media (max-width:520px){.pros-cons{grid-template-columns:1fr}} .country-rows{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;margin:20px 0} .country-rows a{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--border);border-radius:10px;color:var(--text);transition:all .2s} .country-rows a:hover{border-color:var(--red);box-shadow:var(--shadow-2)} .country-rows a img{width:30px;height:30px;border-radius:3px} .country-rows .c-name{display:block;font-family:var(--font-head);font-weight:700;letter-spacing:.03em;font-size:14px;text-transform:uppercase} .country-rows .c-sub{display:block;font-size:12px;color:var(--text-muted);margin-top:3px} .country-rows .c-arrow{margin-left:auto;color:var(--red);font-weight:700} @media (max-width:900px){.country-rows{grid-template-columns:repeat(2, 1fr)}} @media (max-width:520px){.country-rows{grid-template-columns:1fr}} .pu-promo-strip{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px 0} .pu-promo-strip .container{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--text-muted);align-items:center} .pu-promo-strip .item{display:inline-flex;align-items:center;gap:6px} .pu-promo-strip .yellow-dot{display:inline-block;width:8px;height:8px;background:var(--gold);border-radius:50%} .pu-promo-strip .promo-howto{margin-left:auto;color:var(--red);font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase} .pu-stat-panels{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;margin:30px 0} .pu-stat-panel{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px} .sp-figure .sp-num{display:block;font-family:var(--font-head);font-weight:900;font-size:2.5rem;color:var(--navy);line-height:1} .sp-figure .sp-num em{color:var(--red);font-style:normal;font-size:1.6rem} .sp-figure .sp-lbl{display:block;font-family:var(--font-head);font-weight:700;color:var(--text);letter-spacing:.02em;margin-top:6px;font-size:14px} .sp-figure .sp-sub{display:block;font-size:12px;color:var(--text-muted);margin-top:2px} .sp-collage{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .sp-collage .sp-chip{display:inline-flex;padding:4px 8px;background:var(--bg-alt);border:1px solid var(--border);border-radius:6px;transform:rotate(var(--r, 0deg))} .sp-collage .sp-chip img{max-height:20px} .sp-flags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .flag-diamond{display:inline-flex;padding:4px;background:var(--bg-alt);border:1px solid var(--border);border-radius:6px} .flag-diamond img{width:24px;height:24px;border-radius:3px} .sp-motif{margin-top:14px;opacity:.7} @media (max-width:900px){.pu-stat-panels{grid-template-columns:1fr}} .win-ticker{background:rgba(45, 127, 255, .05);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--text-muted);margin:12px 0;overflow:hidden} .win-track{white-space:nowrap;display:flex;gap:20px} .js-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .js-clamp.open{display:block;-webkit-line-clamp:unset} .clamp-toggle{background:none;border:none;color:var(--red);font-family:var(--font-head);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 0;cursor:pointer} .hidden, [hidden]{display:none!important} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ---------- MARKET STRIP (redesigned) ---------- */ .markets-strip{padding:36px 0 44px;background:var(--bg)} .ms-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap} .ms-head h2{font-size:clamp(1.5rem, 2.4vw, 1.9rem);margin-top:4px} .ms-kicker{display:inline-block;font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red);background:rgba(255, 140, 0, .08);padding:4px 10px;border-radius:999px;margin-bottom:6px} .market-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px} .market-card{display:flex;align-items:stretch;gap:0;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .2s;color:var(--text);position:relative} .market-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--navy);transition:background .2s} .market-card:hover{transform:translateY(-2px);border-color:var(--red);box-shadow:var(--shadow-2);color:var(--text)} .market-card:hover::before{background:var(--red)} .mc-flag{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0 18px 0 22px;background:var(--bg-alt);border-right:1px solid var(--border)} .mc-flag img{width:44px;height:44px;border-radius:6px;box-shadow:0 1px 3px rgba(0, 0, 0, .08)} .mc-body{flex:1;padding:14px 18px;display:flex;flex-direction:column;gap:4px;min-width:0} .mc-body h3{font-size:1.1rem;font-weight:800;color:var(--text);letter-spacing:.01em;margin:0} .mc-tags{font-size:12px;color:var(--text-muted);margin:0;line-height:1.4} .mc-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding-top:8px;border-top:1px dashed var(--border);flex-wrap:wrap} .mc-count{font-size:11.5px;color:var(--text-dim);font-weight:600;letter-spacing:.02em} .mc-cta{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red)} @media (max-width:900px){.market-grid{grid-template-columns:repeat(2, 1fr)}} @media (max-width:520px){.market-grid{grid-template-columns:1fr}} /* ---------- Casino card rating descriptor + claimed-today (JS-injected) ---------- */ .oc-score-desc{ display:inline-flex;align-items:center;gap:4px; padding:4px 10px;border-radius:6px; background:rgba(22, 163, 74, .10);color:var(--success); font-family:var(--font-head);font-size:11.5px;font-weight:700; letter-spacing:.06em;text-transform:uppercase; vertical-align:middle;margin-bottom:10px; border:1px solid rgba(22, 163, 74, .22); } .oc-score-desc::before{content:"●";font-size:8px;line-height:1;color:var(--success)} /* Ratings 9.0-9.4 land as "Very good"/"Great", desaturate a bit */ .casino-card:has(.rating:not(:empty)) .oc-score-desc{} /* Fallback for "Good" score (< 8.5), subtle navy pill */ .oc-claimed{ display:inline-flex;align-items:center;gap:4px; font-size:11.5px;color:var(--text-muted);font-weight:600; margin-top:6px;letter-spacing:.02em; } /* ---------- Market/article/page hero compacting + breadcrumb fix (above-the-fold) ---------- */ .page-hero, .editorial-hero, .article-hero{ background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-2) 100%)!important; color:#fff!important; padding:22px 20px 28px!important; text-align:left!important; position:relative!important; overflow:hidden!important; } .page-hero .container, .editorial-hero .container, .article-hero .container{position:relative;text-align:left} .page-hero h1, .editorial-hero h1, .article-hero h1{ color:#fff!important; font-size:clamp(1.4rem, 2.6vw, 2rem)!important; font-weight:800!important; line-height:1.15!important; letter-spacing:-.01em!important; margin:6px 0 8px!important; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .page-hero h1 img.flag-inline, .editorial-hero h1 img.flag-inline, .article-hero h1 img.flag-inline{ width:26px;height:26px;border-radius:4px;box-shadow:0 1px 3px rgba(0, 0, 0, .2);flex-shrink:0 } .page-hero .grad, .editorial-hero .grad, .article-hero .grad{ background:linear-gradient(90deg, var(--gold), var(--red-2));-webkit-background-clip:text;background-clip:text;color:transparent; font-size:.85em } .page-hero .breadcrumbs, .editorial-hero .breadcrumbs, .article-hero .breadcrumbs, .page-hero .crumbs, .editorial-hero .crumbs, .article-hero .crumbs{ font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255, 255, 255, .55);margin-bottom:2px } .page-hero .breadcrumbs a, .editorial-hero .breadcrumbs a, .article-hero .breadcrumbs a, .page-hero .crumbs a, .editorial-hero .crumbs a, .article-hero .crumbs a{color:var(--gold-2)!important} .page-hero .breadcrumbs a:hover, .editorial-hero .breadcrumbs a:hover, .article-hero .breadcrumbs a:hover{color:#fff!important} .page-hero .breadcrumbs .sep, .editorial-hero .breadcrumbs .sep{margin:0 4px;color:rgba(255, 255, 255, .35)} .page-hero .lead, .editorial-hero .lede, .article-hero .lede, .page-hero .lede{color:rgba(255, 255, 255, .85)!important;font-size:.95rem!important;line-height:1.5!important;max-width:820px;margin:0!important} .page-hero .blob, .editorial-hero .blob{display:none!important} .page-hero .stat-row, .editorial-hero .stat-row{display:none!important} .page-hero .fact-strip, .editorial-hero .fact-strip{display:none!important} .page-hero .hero-ctas, .editorial-hero .hero-ctas{margin-top:12px} .page-hero .kicker, .editorial-hero .kicker, .article-hero .kicker{ display:inline-block;font-size:10px;padding:2px 8px;margin-bottom:6px;color:var(--gold-2); background:rgba(255, 255, 255, .08);border-radius:999px;border:1px solid rgba(255, 255, 255, .14) } /* also nail the tight article hero on posts */ .article-hero .kicker{font-size:11px} /* list heading directly under hero, reduce top margin so casino list surfaces */ .list-heading{margin-top:20px!important;margin-bottom:16px!important;font-size:1.3rem} /* also compact the standalone .hero if any market uses it */ .hero:not(.ag-hero){padding:22px 20px 28px!important} .hero:not(.ag-hero) h1{font-size:clamp(1.4rem, 2.6vw, 2rem)!important;margin-bottom:8px!important} /* Mobile: even tighter */ @media (max-width:720px){ .page-hero, .editorial-hero, .article-hero{padding:16px 20px 22px!important} .page-hero h1, .editorial-hero h1, .article-hero h1{font-size:1.15rem!important} .page-hero .lead, .editorial-hero .lede, .article-hero .lede{-webkit-line-clamp:2;font-size:.85rem!important} .page-hero h1 img.flag-inline{width:20px;height:20px} } /* ---------- H1 domain suffix inline pill ---------- */ .h1-domain{ font-family:var(--font-head); font-size:.6em; font-weight:700; letter-spacing:.03em; color:var(--gold-2); background:rgba(255, 255, 255, .10); border:1px solid rgba(255, 255, 255, .16); padding:3px 10px; border-radius:999px; text-transform:lowercase; vertical-align:middle; white-space:nowrap; } @media (max-width:520px){.h1-domain{font-size:.55em;padding:2px 8px}} /* ---------- Legacy site-footer (used by market pages: h3 headings, different structure) ---------- */ .site-footer .container{position:relative} .site-footer .footer-grid h3{ color:#fff!important; font-family:var(--font-head)!important; font-size:13px!important; letter-spacing:.09em; text-transform:uppercase; font-weight:800; margin-bottom:14px; padding:0; border:0; } .site-footer .footer-grid p{color:rgba(255, 255, 255, .75)!important;font-size:14px;line-height:1.55;margin:0 0 12px} .site-footer .footer-grid ul{list-style:none;padding:0;margin:0} .site-footer .footer-grid li{margin-bottom:8px;line-height:1.35} .site-footer .footer-grid a{color:rgba(255, 255, 255, .82)!important;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:color .15s} .site-footer .footer-grid a:hover{color:var(--gold)!important} .site-footer .footer-grid .flag-ico-img{width:20px;height:14px;border-radius:2px;flex-shrink:0;box-shadow:0 0 0 1px rgba(255, 255, 255, .15)} .site-footer .footer-bottom{border-top:1px solid rgba(255, 255, 255, .10);padding-top:22px;margin-top:8px;display:flex;justify-content:space-between;gap:14px;font-size:12.5px;color:rgba(255, 255, 255, .55);flex-wrap:wrap} .site-footer .responsible-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(255, 255, 255, .10);color:#fff;font-family:var(--font-head);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border:1px solid rgba(255, 255, 255, .14)} /* footer logo (image + wordmark inline) */ .site-footer .logo, .site-footer .footer-logo{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:800;font-size:22px;color:#fff!important;text-transform:uppercase;margin-bottom:14px;letter-spacing:.02em;background:none} /* Footer uses the horizontal white-wordmark lockup — let it render at natural aspect ratio */ .site-footer .logo img, .site-footer .footer-logo img, .site-footer .fb-logo img{height:48px;width:auto!important;max-width:100%;display:block} .site-footer .logo span, .site-footer .footer-logo span{color:#fff!important;line-height:1;white-space:nowrap} @media (max-width:720px){ } /* ================================================================== MARKET SUBNAV, v4 single-line slim horizontal bar ================================================================== */ .market-subnav{ display:flex; align-items:center; gap:0; margin:12px 0 20px; padding:0; background:transparent; border:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; white-space:nowrap; height:42px; } .market-subnav::-webkit-scrollbar{display:none} .market-subnav a{ display:inline-flex; align-items:center; gap:0; padding:0 16px; height:100%; color:var(--text-muted); font-family:var(--font-head); font-size:11.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; text-decoration:none; border:0; border-radius:0; background:transparent; transition:color .15s, background .15s; position:relative; } .market-subnav a + a{border-left:1px solid var(--border)} .market-subnav a:hover{color:var(--text);background:var(--bg-alt)} .market-subnav a.active{ color:var(--red); background:transparent; font-weight:800; } .market-subnav a.active::after{ content:""; position:absolute; left:0;right:0;bottom:-1px; height:2px; background:var(--red); } @media (max-width:720px){ .market-subnav{height:38px} .market-subnav a{padding:0 12px;font-size:10.5px;letter-spacing:.08em} } /* ================================================================== ARTICLE PAGES (news + guides + payout log posts) ================================================================== */ .article-main{padding:20px 0 60px} .article-layout{display:grid;grid-template-columns:1fr;gap:40px;max-width:820px;margin:0 auto} .article-content{max-width:820px} .article-content > .toc{margin:0 0 30px} .article-body-section{margin:32px 0} .article-body-section h2{font-size:1.5rem;font-weight:800;color:var(--text);margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--red);display:inline-block} .article-body-section h3{font-size:1.1rem;margin:20px 0 8px;color:var(--navy)} .article-body-section p{color:var(--text-muted);line-height:1.7;font-size:1.0rem;margin-bottom:14px} .article-body-section ul, .article-body-section ol{margin:14px 0 14px 20px;color:var(--text-muted);line-height:1.7} .article-body-section li{margin-bottom:6px} .article-body-section strong{color:var(--text)} .article-body-section a{color:var(--navy);border-bottom:1px solid rgba(45, 127, 255, .25);transition:color .15s, border-color .15s} .article-body-section a:hover{color:var(--red);border-bottom-color:var(--red)} .article-body-section .callout{background:rgba(45, 127, 255, .06);border-left:4px solid var(--navy);padding:16px 20px;border-radius:0 8px 8px 0;margin:18px 0;color:var(--text)} .article-body-section .callout.is-warning{background:rgba(255, 195, 0, .12);border-left-color:var(--gold)} .article-body-section .callout.is-danger{background:rgba(255, 140, 0, .06);border-left-color:var(--red)} .article-body-section .callout p{margin:0;color:var(--text)} .article-body-section .table-wrap{margin:18px 0} .article-meta{display:flex;align-items:center;gap:10px;margin-top:14px;color:rgba(255, 255, 255, .75);font-size:13px;flex-wrap:wrap} .article-meta .am-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;background:rgba(255, 255, 255, .15)} .article-meta .am-author{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600} .article-meta .am-dot{color:rgba(255, 255, 255, .35)} .article-meta .am-date, .article-meta .am-read{color:rgba(255, 255, 255, .75)} .faq-accordion{display:flex;flex-direction:column;gap:8px;margin-top:14px} /* NOTE: base .faq-item styles live in the polished block further down (~line 1115). The old plain-text +/− rules were removed to prevent them cascading over the circle button. */ .author-box{display:flex;align-items:flex-start;gap:16px;padding:20px;background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;margin:40px 0 30px} .author-box .ab-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid var(--gold)} .author-box .ab-role{display:block;font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-bottom:2px} .author-box .ab-name{font-size:1.15rem;margin-bottom:6px;color:var(--text)} .author-box p{font-size:14px;line-height:1.6;color:var(--text-muted);margin-bottom:6px} .author-box .ab-link{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy)} .author-box .ab-link:hover{color:var(--red)} .related-posts{margin-top:30px;padding-top:24px;border-top:1px solid var(--border)} .related-posts h3{font-family:var(--font-head);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);margin-bottom:14px} .rp-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px} .rp-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;color:var(--text);transition:all .2s} .rp-card:hover{transform:translateY(-2px);border-color:var(--red);box-shadow:var(--shadow-2);color:var(--text)} .rp-card .rp-tag{font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red)} .rp-card .rp-title{font-family:var(--font-head);font-size:14px;font-weight:700;line-height:1.35;color:var(--text)} @media (max-width:720px){.rp-grid{grid-template-columns:1fr}} /* Related-grid variant (site-wide, used on ~242 pages) */ .related-title{font-family:var(--font-head);font-size:1.15rem;font-weight:800;letter-spacing:-.01em;color:var(--navy);margin:34px 0 14px;padding-top:24px;border-top:1px solid var(--border)} .related-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;margin-bottom:30px} .related-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;color:var(--text);text-decoration:none;transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease} .related-card:hover{transform:translateY(-2px);border-color:var(--red);box-shadow:var(--shadow-2);color:var(--text)} .related-card .r-tag{display:inline-block;font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red)} .related-card .r-title{display:block;font-family:var(--font-head);font-size:14px;font-weight:700;line-height:1.35;color:var(--text)} @media (max-width:900px){.related-grid{grid-template-columns:repeat(2, 1fr)}} @media (max-width:560px){.related-grid{grid-template-columns:1fr}} /* Footer flag icons, enforce sizing across all pages */ .site-footer .footer-grid .flag-ico-img, .site-footer .footer-grid a img.flag-ico-img, .site-footer .footer-grid li img{width:20px!important;height:14px!important;border-radius:2px;flex-shrink:0;box-shadow:0 0 0 1px rgba(255, 255, 255, .15);object-fit:cover;vertical-align:middle} .site-footer .footer-grid li a{display:inline-flex!important;align-items:center;gap:8px} /* TOC expand/collapse, button absolutely positioned in top-right */ .toc{position:relative;padding-right:56px!important} .toc .toc-toggle{position:absolute!important;top:14px;right:14px;background:#fff;border:1px solid var(--border);color:var(--navy);cursor:pointer;width:34px;height:34px;display:inline-flex!important;align-items:center;justify-content:center;border-radius:8px;padding:0;transition:background .15s, border-color .15s, color .15s;z-index:2} .toc .toc-toggle:hover{background:var(--navy);border-color:var(--navy);color:#fff} .toc .toc-toggle svg{width:18px;height:18px;transition:transform .22s ease;display:block} .toc.is-collapsed .toc-toggle svg{transform:rotate(-90deg)} .toc.is-collapsed{padding-bottom:16px!important} .toc.is-collapsed ol, .toc.is-collapsed ul{display:none!important} .toc ol, .toc ul{margin-top:12px} /* legacy .toc-head wrapper (from old JS pass), flatten, arrow goes top-right anyway */ .toc .toc-head{display:block;margin:0} /* Casino card layout hardening, prevent thumb column collapse */ .casino-list .casino-card{grid-template-columns:60px 130px minmax(0, 1fr) 240px 220px} .casino-list .casino-thumb{min-width:130px} .casino-list .casino-thumb img{display:block;margin:0 auto} @media (max-width:900px){ .casino-list .casino-card{grid-template-columns:44px 100px minmax(0, 1fr)} .casino-list .casino-thumb{min-width:100px} } /* Demo hub, game showcase grid (Lucky Slots, Roulette, Blackjack, Plinko, Real) */ .demo-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:22px;margin:8px 0 4px} .demo-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;color:var(--text);text-decoration:none;transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease} .demo-card:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:0 18px 40px -20px rgba(45, 127, 255, .35), 0 6px 14px rgba(255, 140, 0, .10);color:var(--text)} .demo-card .dc-visual{position:relative;height:140px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, #242B32 0%, #1B2229 100%);border-bottom:1px solid var(--border);overflow:hidden} .demo-card .dc-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(360px 180px at 50% 130%, rgba(255, 140, 0, .16), transparent 70%);pointer-events:none} .demo-card .dc-ico{position:relative;font-size:64px;line-height:1;filter:drop-shadow(0 6px 12px rgba(45, 127, 255, .18))} .demo-card .dc-badge{position:absolute;top:12px;left:12px;font-family:var(--font-head);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255, 255, 255, .85);color:var(--navy);border:1px solid var(--border);backdrop-filter:blur(4px)} .demo-card.slot .dc-visual{background:linear-gradient(135deg, #1F262E 0%, #1B2229 100%)} .demo-card.slot .dc-badge{background:var(--red);color:#fff;border-color:transparent} .demo-card.wheel .dc-visual{background:linear-gradient(135deg, #242B32 0%, #242B32 100%)} .demo-card.wheel .dc-badge{background:var(--navy);color:#fff;border-color:transparent} .demo-card.table .dc-visual{background:linear-gradient(135deg, #1B2229 0%, #242B32 100%)} .demo-card.table .dc-badge{background:#2b4570;color:#fff;border-color:transparent} .demo-card.new .dc-visual{background:linear-gradient(135deg, #1B2229 0%, #1B2229 100%)} .demo-card.new .dc-badge{background:var(--gold);color:var(--text);border-color:transparent} .demo-card.real .dc-visual{background:linear-gradient(135deg, #2D7FFF 0%, #001e42 100%)} .demo-card.real .dc-ico{filter:drop-shadow(0 6px 12px rgba(0, 0, 0, .35))} .demo-card.real .dc-badge{background:var(--gold);color:var(--text);border-color:transparent} .demo-card .dc-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1} .demo-card .dc-body h3{font-family:var(--font-head);font-size:1.15rem;font-weight:800;letter-spacing:-.01em;margin:0;color:var(--navy)} .demo-card .dc-body p{font-size:.9rem;line-height:1.5;color:var(--text-muted);margin:0;flex:1} .demo-card .dc-meta{display:flex;flex-wrap:wrap;gap:6px} .demo-card .dc-meta .dc-tag{font-family:var(--font-head);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);background:var(--bg-alt);border:1px solid var(--border);padding:3px 8px;border-radius:6px} .demo-card .dc-cta{margin-top:6px;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-size:13px;font-weight:800;color:var(--red);letter-spacing:.02em} .demo-card .dc-cta span{transition:transform .18s ease;display:inline-block} .demo-card:hover .dc-cta span{transform:translateX(4px)} @media (max-width:960px){.demo-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}.demo-card .dc-visual{height:120px}.demo-card .dc-ico{font-size:52px}} @media (max-width:540px){.demo-grid{grid-template-columns:1fr;gap:14px}.demo-card .dc-visual{height:110px}} /* Bonus/toplist cards, vertical stacked layout when inside .oc-toplist grid */ .oc-toplist{grid-template-columns:repeat(2, minmax(0, 1fr))!important;gap:22px} .oc-toplist .casino-card{display:flex!important;flex-direction:column;align-items:stretch;grid-template-columns:none;gap:0;padding:0;overflow:hidden;position:relative;text-align:center;height:100%} .oc-toplist .casino-card .rank-badge{position:absolute;top:14px;left:14px;z-index:3;margin:0;width:36px;height:36px;font-size:15px} .oc-toplist .casino-card .casino-thumb{display:flex;align-items:center;justify-content:center;height:120px;padding:20px 20px 8px;background:linear-gradient(180deg, #1B2229 0%, #ffffff 100%);border-bottom:1px solid var(--border);min-width:0;width:100%} .oc-toplist .casino-card .casino-thumb img{max-height:80px;max-width:180px;object-fit:contain;margin:0 auto} .oc-toplist .casino-card .casino-info{padding:18px 20px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1} .oc-toplist .casino-card .casino-info h3{font-family:var(--font-head);font-size:1.15rem;font-weight:800;color:var(--navy);margin:0;text-align:center;justify-content:center} .oc-toplist .casino-card .casino-info .rating{margin:0} .oc-toplist .casino-card .oc-accepts{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:4px;font-size:12px;color:var(--text-muted)} .oc-toplist .casino-card .oc-accepts .oc-accepts-lbl{font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-right:2px} .oc-toplist .casino-card .oc-accepts img{width:20px!important;height:14px!important;border-radius:2px;box-shadow:0 0 0 1px rgba(0, 0, 0, .08);object-fit:cover;display:inline-block;vertical-align:middle} .oc-toplist .casino-card .casino-bonus{margin:0;padding:14px 20px;background:linear-gradient(180deg, #1B2229 0%, #fff 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;border-radius:0} .oc-toplist .casino-card .casino-bonus .bonus-label{display:block;font-family:var(--font-head);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:4px} .oc-toplist .casino-card .casino-bonus .bonus-amount{display:block;font-family:var(--font-head);font-weight:800;color:var(--navy);font-size:1rem;line-height:1.3} .oc-toplist .casino-card .casino-cta{padding:14px 20px 18px;display:flex;flex-direction:column;align-items:stretch;gap:8px} .oc-toplist .casino-card .casino-cta .btn{width:100%;font-family:var(--font-head);font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:12px 16px;font-size:13px} .oc-toplist .casino-card .casino-cta .oc-terms{font-size:11.5px;color:var(--text-muted);text-align:center} .oc-toplist .casino-card.is-top{border:2px solid var(--red);box-shadow:0 0 0 5px rgba(255, 140, 0, .08), 0 12px 30px -12px rgba(255, 140, 0, .25)} .oc-toplist .casino-card.is-top .rank-badge{background:var(--red);box-shadow:0 4px 12px rgba(255, 140, 0, .4)} @media (max-width:720px){.oc-toplist{grid-template-columns:1fr!important;gap:16px}.oc-toplist .casino-card .casino-thumb{height:100px}.oc-toplist .casino-card .casino-thumb img{max-height:64px;max-width:150px}} /* Footer trust bar, badge row above copyright */ .site-footer .footer-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;padding:20px 0 18px;margin-top:6px;border-top:1px solid rgba(255, 255, 255, .10)} .site-footer .footer-trust .ft-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(255, 255, 255, .04);border:1px solid rgba(255, 255, 255, .10);border-radius:999px;font-family:var(--font-head);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255, 255, 255, .82);line-height:1;white-space:nowrap;transition:background .15s, border-color .15s, color .15s} .site-footer .footer-trust .ft-badge:hover{background:rgba(255, 255, 255, .08);border-color:rgba(255, 195, 0, .35);color:#fff} .site-footer .footer-trust .ft-ico{width:15px;height:15px;flex-shrink:0;color:var(--gold-2);stroke:currentColor} .site-footer .footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:18px;margin-top:0;border-top:1px solid rgba(255, 255, 255, .08);font-size:12.5px;color:rgba(255, 255, 255, .55);line-height:1.55} .site-footer .footer-bottom span:last-child{max-width:640px;text-align:right} @media (max-width:720px){ .site-footer .footer-trust{gap:6px 8px;padding:16px 0 14px} .site-footer .footer-trust .ft-badge{padding:6px 11px;font-size:10.5px} .site-footer .footer-trust .ft-ico{width:13px;height:13px} .site-footer .footer-bottom{flex-direction:column;align-items:flex-start;text-align:left} .site-footer .footer-bottom span:last-child{text-align:left;max-width:100%} } /* Casino card, payment icons row (fix vertical stack bug) */ .casino-card .payment-icons{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:6px;max-width:220px} .casino-card .payment-icons img{height:20px;width:auto;max-width:36px;object-fit:contain;opacity:.85;filter:grayscale(.15)} .casino-card .payment-icons img:hover{opacity:1;filter:none} .casino-list .casino-card{align-items:center} @media (max-width:900px){ .casino-card .payment-icons{max-width:100%} } /* Homepage featured shortcuts (SE + any market using .featured-cards) */ .featured-cards{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:22px;margin:8px 0 32px} .feat-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px 22px 22px;transition:transform .22s, border-color .22s, box-shadow .22s;overflow:hidden} .feat-card:hover{transform:translateY(-4px);border-color:var(--navy);box-shadow:0 18px 40px -20px rgba(45, 127, 255, .35)} .feat-card.is-hot{border:2px solid var(--red);box-shadow:0 0 0 5px rgba(255, 140, 0, .06), 0 12px 30px -16px rgba(255, 140, 0, .28)} .feat-card.is-hot:hover{border-color:var(--red)} .feat-flame{position:absolute;top:14px;right:14px;font-size:22px;line-height:1;filter:drop-shadow(0 2px 6px rgba(255, 140, 0, .35))} .feat-thumb{display:flex;align-items:center;justify-content:center;height:120px;margin-bottom:14px;background:linear-gradient(180deg, #1B2229 0%, #ffffff 100%);border-radius:10px;padding:14px} .feat-thumb img{max-height:96px;max-width:180px;width:auto;height:auto;object-fit:contain} .feat-card h3{font-family:var(--font-head);font-size:1.05rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;line-height:1.3;margin:0 0 12px;text-align:center} .feat-list{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:8px;flex:1} .feat-list li{display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:1.35;color:var(--text)} .feat-list li .ico{flex-shrink:0;font-size:16px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-alt);border-radius:6px} .feat-card .btn{width:100%;font-family:var(--font-head);font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:12px 16px;font-size:13px;margin-top:auto} @media (max-width:900px){.featured-cards{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}.feat-thumb{height:100px}.feat-thumb img{max-height:78px;max-width:150px}} @media (max-width:560px){.featured-cards{grid-template-columns:1fr;gap:14px}} /* Bluish tinted background on all image thumbs (list & feature cards, all markets) */ .casino-list .casino-thumb, .oc-toplist .casino-card .casino-thumb, .feat-thumb{ background:linear-gradient(135deg, #242B32 0%, #242B32 55%, #2D3540 100%)!important; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(45, 127, 255, .08); padding:8px 12px; } .casino-list .casino-thumb img, .oc-toplist .casino-card .casino-thumb img, .feat-thumb img{ mix-blend-mode:normal; filter:drop-shadow(0 1px 2px rgba(45, 127, 255, .12)); } /* Give the desktop 5-col row a bit more breathing room around the tinted panel */ @media (min-width:901px){ .casino-list .casino-thumb{height:80px;margin:4px 0} .casino-list .casino-thumb img{max-height:64px} } /* MOBILE: single-column centered casino card. Everything stacked, thumb + text + bonus + CTA all centered horizontally. Compact hero kept so the button still lands close to the fold. */ @media (max-width:720px){ /* 1) tighter hero on mobile - saves ~60-80px vertical */ .page-hero, .editorial-hero, .article-hero{padding:14px 16px 18px!important} .page-hero .container, .editorial-hero .container, .article-hero .container{padding:0!important} .page-hero .breadcrumbs{font-size:11px;margin-bottom:6px} .page-hero h1{font-size:clamp(1.15rem, 4.5vw, 1.5rem)!important;line-height:1.15!important;margin-bottom:6px!important} .page-hero h1 .flag-inline{width:20px;height:14px;vertical-align:baseline} .page-hero h1 .h1-domain{font-size:.6em;padding:2px 8px} .page-hero .lead{font-size:.85rem!important;line-height:1.35!important;margin-bottom:0!important;-webkit-line-clamp:2} .page-hero .blob, .page-hero::before{display:none} /* 2) tighter list heading */ .list-heading{font-size:1rem!important;margin:14px 0 12px!important;line-height:1.3} /* 3) tighter market subnav */ .market-subnav{padding:0!important} .market-subnav .subnav-scroll{padding:6px 12px} .market-subnav a{padding:8px 10px!important;font-size:11px!important} /* 4) single-column, fully centered casino card */ .casino-list .casino-card{ display:flex!important; flex-direction:column!important; align-items:center!important; text-align:center!important; grid-template-columns:none!important; grid-template-rows:none!important; gap:14px!important; padding:22px 16px 20px!important; position:relative; } .casino-list .casino-card .rank-badge{ position:absolute!important;top:12px;left:12px; width:32px;height:32px;font-size:13px;margin:0!important; grid-column:auto!important;grid-row:auto!important; } /* Thumb: tight inline-block box around the logo, not full width */ .casino-list .casino-thumb{ display:inline-flex!important; width:auto!important;min-width:0!important;max-width:220px; height:auto!important; padding:10px 18px!important;margin:0 auto!important; justify-content:center!important;align-items:center!important; border-radius:12px; } .casino-list .casino-thumb img{ max-height:82px!important;max-width:170px!important; height:auto!important;width:auto!important; margin:0!important;display:block!important; } .casino-list .casino-info{ display:flex!important;flex-direction:column!important; align-items:center!important;gap:8px;padding:0!important;width:100%; } .casino-list .casino-info h3{ font-size:1.15rem!important;margin:0 0 2px!important;text-align:center;justify-content:center!important; } .casino-list .casino-info .rating{ padding:4px 12px;font-size:13px;margin:0!important; } .casino-list .casino-info .oc-score-desc{font-size:11.5px;margin:0!important} /* Features list: block-centered, checkmark has enough room so text doesn't overlap it */ .casino-list .casino-features{ display:table!important;text-align:left;margin:6px auto 0!important;padding:0!important; font-size:13px;grid-column:auto!important;order:0!important;list-style:none!important; } .casino-list .casino-features li{padding:3px 0 3px 24px!important;position:relative} .casino-list .casino-features li::before{ left:2px!important;top:3px!important; } .casino-list .casino-bonus{ width:100%;margin:4px 0 0!important;padding:12px 14px!important; text-align:center!important;grid-column:auto!important;order:0!important; } .casino-list .casino-bonus .bonus-label{font-size:10.5px;margin-bottom:3px} .casino-list .casino-bonus .bonus-amount{font-size:1rem;line-height:1.25} /* CTA: strictly stacked column. Button on its own line centered. Claimed text on a new line below, also centered. */ .casino-list .casino-cta{ display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important; flex-wrap:wrap!important; width:100%;gap:10px!important;padding:0!important;margin:0!important; grid-column:auto!important;order:0!important; } .casino-list .casino-cta > *{flex:0 0 100%!important;max-width:100%!important} .casino-list .casino-cta .btn{ flex:0 0 auto!important;width:auto!important;min-width:220px;max-width:100%; margin:0 auto!important;padding:14px 26px!important;font-size:14px!important; font-weight:800;display:inline-flex!important;align-items:center;justify-content:center; align-self:center!important; } .casino-list .casino-cta .oc-claimed{ display:flex!important;align-self:center!important; justify-content:center!important;align-items:center; width:100%;text-align:center!important;font-size:11.5px; margin:2px 0 0!important;order:99!important;flex-basis:100%!important; } .casino-list .casino-cta .payment-icons{ justify-content:center!important;flex-basis:100%;margin-top:4px;max-width:100%; } } /* Even smaller: keep everything centered, just tighter spacing */ @media (max-width:400px){ .casino-list .casino-card{padding:20px 12px 18px!important} .casino-list .casino-thumb{padding:8px 14px!important;max-width:200px} .casino-list .casino-thumb img{max-height:74px!important;max-width:150px!important} .casino-list .casino-info h3{font-size:1.05rem!important} .casino-list .casino-cta .btn{min-width:200px;padding:13px 22px!important} .page-hero h1{font-size:1.1rem!important} } /* "Nieuw"/"New" flag badge, floats ABOVE the thumb panel, does not overlap image */ .casino-thumb{position:relative;overflow:visible} .casino-thumb .new-flag{ position:absolute; top:-9px; left:10px; z-index:3; display:inline-flex; align-items:center; gap:4px; padding:3px 9px 3px 8px; background:linear-gradient(135deg, var(--red) 0%, #E67E00 100%); color:#fff; font-family:var(--font-head); font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; border-radius:4px; box-shadow:0 3px 8px rgba(255, 140, 0, .4), 0 0 0 2px #fff; line-height:1; white-space:nowrap; pointer-events:none; } .casino-thumb .new-flag::before{ content:"★"; font-size:9px; line-height:1; color:var(--gold); } /* Give the row a touch more top padding so the floating flag has clearance */ .casino-list .casino-card:has(.casino-thumb .new-flag), .oc-toplist .casino-card:has(.casino-thumb .new-flag){padding-top:24px} .casino-list .casino-thumb img, .oc-toplist .casino-card .casino-thumb img{max-width:100%;object-fit:contain} @media (max-width:720px){ .casino-thumb .new-flag{top:-7px;left:8px;padding:2px 7px;font-size:8.5px} } /* ============================================================ DEMO GAMES, shared shell + per-game (Slots, Roulette, Blackjack, Plinko) ============================================================ */ /* Shared cabinet */ .game-shell{max-width:720px;margin:16px auto 30px;display:grid;gap:18px} .plinko-shell, .game-shell:has(.game-rail){grid-template-columns:minmax(0, 1fr) 220px;max-width:900px} @media (max-width:820px){.plinko-shell, .game-shell:has(.game-rail){grid-template-columns:1fr}} .game-cab{background:linear-gradient(180deg, #0b1f3a 0%, #0F1419 100%);border:1px solid rgba(255, 195, 0, .18);border-radius:16px;padding:18px 20px 20px;box-shadow:0 20px 50px -20px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);color:#2D3540;position:relative;overflow:hidden} .game-cab::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 50% 0%, rgba(255, 195, 0, .10), transparent 60%);pointer-events:none} .game-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap} .game-title{font-family:var(--font-head);font-weight:800;font-size:1.15rem;color:#fff;display:inline-flex;align-items:center;gap:10px} .game-title .badge{font-size:9.5px;font-weight:800;letter-spacing:.12em;padding:3px 8px;border-radius:4px;background:var(--red);color:#fff;text-transform:uppercase} .hud{display:flex;gap:8px} .hud .cell{background:rgba(255, 255, 255, .06);border:1px solid rgba(255, 255, 255, .10);border-radius:8px;padding:6px 12px;min-width:66px;text-align:center;display:flex;flex-direction:column;gap:2px} .hud .cell .l{font-family:var(--font-head);font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255, 255, 255, .55)} .hud .cell .v{font-family:var(--font-head);font-size:1.05rem;font-weight:800;color:#fff;line-height:1} .hud .cell.win .v{color:var(--gold)} .game-msg{text-align:center;padding:10px 14px;background:rgba(0, 0, 0, .25);border-radius:8px;font-size:14px;color:rgba(255, 255, 255, .88);margin:14px 0;min-height:20px;font-weight:500} .game-msg.win{background:rgba(34, 197, 94, .20);color:#52C97A;font-weight:700} .game-msg.lose{background:rgba(255, 140, 0, .20);color:#FFB36B} .game-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px} .gbtn{background:rgba(255, 255, 255, .08);border:1px solid rgba(255, 255, 255, .14);color:#fff;padding:10px 18px;border-radius:8px;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.03em;cursor:pointer;transition:all .15s;min-width:52px} .gbtn:hover{background:rgba(255, 255, 255, .14);border-color:rgba(255, 195, 0, .5);color:var(--gold)} .gbtn:disabled{opacity:.35;cursor:not-allowed} .gbtn-primary{background:linear-gradient(135deg, var(--red) 0%, #E67E00 100%);border-color:transparent;padding:12px 30px;text-transform:uppercase;font-size:14px;font-weight:800;box-shadow:0 6px 16px rgba(255, 140, 0, .35)} .gbtn-primary:hover{background:linear-gradient(135deg, #FF8C00 0%, #E67E00 100%);border-color:transparent;color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(255, 140, 0, .45)} .gbtn-round{width:40px;height:40px;padding:0;font-size:18px;border-radius:50%} .gbtn-ghost{background:transparent} .game-note{text-align:center;font-size:11px;color:rgba(255, 255, 255, .45);margin-top:14px;font-family:var(--font-head);letter-spacing:.05em} .win-banner{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0, 0, 0, .7);z-index:5;pointer-events:none} .win-banner.show{display:flex;animation:winPop .5s ease} .win-banner .box{text-align:center;color:var(--gold);text-shadow:0 4px 20px rgba(255, 195, 0, .6)} .win-banner .big{font-family:var(--font-head);font-size:3rem;font-weight:900} .win-banner .sub{font-size:1rem;letter-spacing:.2em;font-weight:800} @keyframes winPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}} /* Rail (Plinko sidebar cards) */ .game-rail{display:flex;flex-direction:column;gap:12px} .rail-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px} .rail-card h3{font-family:var(--font-head);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);margin:0 0 10px} .rail-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:13px} .rail-card li{display:flex;justify-content:space-between;color:var(--text-muted)} .rail-card b{color:var(--navy);font-weight:800} /* SLOT (Lucky Slots) */ .slot-window{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;background:linear-gradient(180deg, #070A0D 0%, #0F1419 100%);border:1px solid rgba(255, 195, 0, .30);border-radius:10px;padding:12px;box-shadow:inset 0 3px 20px rgba(0, 0, 0, .6);margin:10px 0} .slot-window .reel{background:#fff;border-radius:6px;height:270px;overflow:hidden;position:relative} .slot-window .reel .strip{display:flex;flex-direction:column;align-items:stretch;text-align:center;will-change:transform} .slot-window .reel .sym{display:flex;align-items:center;justify-content:center;height:90px;font-size:56px;line-height:1;color:var(--text);flex-shrink:0} .slot-window .reel .sym.win{background:radial-gradient(circle, rgba(255, 195, 0, .45), rgba(255, 195, 0, .10));animation:symPulse .8s ease infinite alternate} @keyframes symPulse{0%{box-shadow:inset 0 0 0 2px rgba(255, 195, 0, .5)}100%{box-shadow:inset 0 0 0 3px rgba(255, 195, 0, .9)}} .paytable{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;padding:10px;background:rgba(0, 0, 0, .25);border-radius:8px;font-size:13px;color:rgba(255, 255, 255, .85);margin:12px 0} .paytable span{padding:3px 8px;background:rgba(255, 255, 255, .06);border-radius:6px;font-family:var(--font-head);font-weight:700} /* ROULETTE (Mini) */ .rl-stage{display:flex;flex-direction:column;align-items:center;gap:14px;margin:8px 0} .rl-wheelwrap{position:relative;width:220px;height:220px} .rl-pointer{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:16px solid var(--gold);z-index:3;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, .5))} .rl-wheel{width:220px;height:220px;filter:drop-shadow(0 6px 16px rgba(0, 0, 0, .4));transition:transform 3s cubic-bezier(.15, .9, .25, 1)} .rl-hub{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:48px;height:48px;background:linear-gradient(135deg, #0F1419, #070A0D);border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:var(--font-head);font-weight:800;font-size:18px;z-index:2;box-shadow:0 2px 8px rgba(0, 0, 0, .5)} .rl-result{font-family:var(--font-head);font-size:13.5px;color:rgba(255, 255, 255, .75);text-align:center} .rl-board{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:6px;width:100%;max-width:460px} .rl-numrow{display:flex;gap:6px;width:100%;max-width:460px;margin-top:4px} .rl-numin{flex:1;padding:9px 12px;border-radius:8px;background:rgba(255, 255, 255, .08);border:1px solid rgba(255, 255, 255, .14);color:#fff;font-family:var(--font-head);font-size:13px} .rl-chip{padding:9px 8px;background:rgba(255, 255, 255, .06);border:1px solid rgba(255, 255, 255, .12);border-radius:8px;color:#fff;font-family:var(--font-head);font-size:11.5px;font-weight:700;cursor:pointer;transition:all .12s;text-align:center;line-height:1.15} .rl-chip:hover{background:rgba(255, 255, 255, .14);border-color:var(--gold);color:var(--gold)} .rl-chip.selected{background:var(--gold);color:var(--text);border-color:var(--gold)} .rl-chip.red{background:linear-gradient(135deg, rgba(255, 140, 0, .28), rgba(255, 140, 0, .12));border-color:rgba(255, 140, 0, .5)} .rl-chip.red:hover{background:var(--red);color:#fff;border-color:var(--red)} .rl-chip.black{background:rgba(0, 0, 0, .5);border-color:rgba(255, 255, 255, .2)} .rl-chip.black:hover{background:#000;color:var(--gold)} /* BLACKJACK */ .bj-felt{background:radial-gradient(ellipse at 50% 40%, #116c34, #0a4a24 70%);border-radius:14px;border:2px solid rgba(255, 195, 0, .25);padding:22px 20px;margin:6px 0;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 0 60px rgba(0, 0, 0, .4)} .bj-hand{color:#fff} .bj-lbl{font-family:var(--font-head);font-size:11.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:rgba(255, 255, 255, .75);margin-bottom:10px;display:flex;align-items:center;gap:10px} .bj-lbl .score{background:rgba(0, 0, 0, .35);padding:3px 10px;border-radius:12px;font-size:13px;color:var(--gold)} .bj-cards{display:flex;gap:8px;flex-wrap:wrap;min-height:88px} .bj-cards .card{width:56px;height:80px;background:#fff;border-radius:6px;box-shadow:0 4px 12px rgba(0, 0, 0, .35);color:var(--text);font-family:var(--font-head);font-weight:800;font-size:16px;padding:6px 8px;display:flex;flex-direction:column;justify-content:space-between;position:relative} .bj-cards .card.red{color:var(--red)} .bj-cards .card .rank{line-height:1} .bj-cards .card .suit{font-size:22px;align-self:flex-end;line-height:1} .bj-cards .card.back{background:linear-gradient(135deg, var(--navy), var(--navy-2));border:1px solid var(--gold);color:transparent} .bj-cards .card.back::after{content:"?";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:var(--gold);font-size:26px;font-weight:900} .bj-divider{border-top:1px dashed rgba(255, 255, 255, .20);margin:16px 0} /* PLINKO */ .plinko-stage{display:flex;flex-direction:column;align-items:center;gap:8px;background:linear-gradient(180deg, #070A0D 0%, #0F1419 100%);border:1px solid rgba(255, 195, 0, .25);border-radius:10px;padding:14px;margin:10px 0} .plinko-stage canvas{max-width:100%;height:auto;display:block;background:#020815;border-radius:6px} .plinko-slots{display:grid;grid-template-columns:repeat(13, 1fr);gap:2px;width:100%;max-width:520px} .plinko-slots .slot{background:rgba(255, 255, 255, .06);border:1px solid rgba(255, 195, 0, .15);border-radius:4px;padding:4px 2px;text-align:center;font-family:var(--font-head);font-size:10.5px;font-weight:800;color:var(--gold)} .plinko-slots .slot.hi{background:rgba(255, 140, 0, .28);border-color:rgba(255, 140, 0, .55);color:#fff} .risk-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px} .risk-row .gbtn.active{background:var(--gold);border-color:var(--gold);color:var(--text)} /* Mobile tweaks */ @media (max-width:560px){ .game-cab{padding:14px} .game-topbar{flex-direction:column;align-items:stretch} .hud{justify-content:space-between} .hud .cell{flex:1;min-width:0} .slot-window{gap:4px;padding:8px} .slot-window .reel{height:270px} .slot-window .reel .sym{font-size:44px} .rl-wheelwrap, .rl-wheel{width:180px;height:180px} .rl-board{grid-template-columns:repeat(2, minmax(0, 1fr))} .bj-cards .card{width:44px;height:64px;font-size:13px} .bj-cards .card .suit{font-size:16px} .gbtn-primary{padding:10px 20px;font-size:12.5px} } /* FAQ accordion, polished styling (site-wide) */ .faq-item{ background:#fff; border:1px solid var(--border); border-radius:12px; margin-bottom:10px; overflow:hidden; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .faq-item:hover{border-color:var(--navy);box-shadow:0 6px 20px -10px rgba(45, 127, 255, .25)} .faq-item[open]{border-color:var(--red);box-shadow:0 8px 24px -12px rgba(255, 140, 0, .20)} .faq-item summary{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:16px 22px; font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.35; color:var(--navy);cursor:pointer; list-style:none; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::marker{display:none} .faq-item summary::after{ content:""; flex-shrink:0; width:26px;height:26px; border:1.5px solid var(--border);border-radius:50%; background: linear-gradient(currentColor, currentColor) center/10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 10px no-repeat; color:var(--navy); transition:transform .22s ease, background-color .18s, border-color .18s, color .18s; } .faq-item:hover summary::after{border-color:var(--navy)} .faq-item[open] summary{color:var(--red)} .faq-item[open] summary::after{ transform:rotate(45deg); border-color:var(--red);color:var(--red); background-color:rgba(255, 140, 0, .06); } .faq-item .faq-answer{ padding:0 22px 20px; color:var(--text-muted); line-height:1.65; font-size:14.5px; border-top:1px solid transparent; animation:faqSlide .25s ease-out; } .faq-item[open] .faq-answer{border-top-color:var(--border);padding-top:16px} .faq-item .faq-answer p{margin:0 0 10px} .faq-item .faq-answer p:last-child{margin-bottom:0} .faq-item .faq-answer a{color:var(--navy);border-bottom:1px solid rgba(45, 127, 255, .30)} .faq-item .faq-answer a:hover{color:var(--red);border-bottom-color:var(--red)} @keyframes faqSlide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} /* Wrap consecutive .faq-items in a subtle container feel */ .faq-item + .faq-item{margin-top:8px} @media (max-width:560px){ /* MOBILE FAQ: text on the left with fixed right padding so long questions wrap BEFORE reaching the button. Button is an absolutely-positioned circle on the right, vertically centered. Never overlaps text. */ .faq-item summary{ display:block !important; padding:14px 56px 14px 16px !important; font-size:14px !important; line-height:1.4 !important; position:relative !important; gap:0 !important; } .faq-item summary::after{ content:"" !important; position:absolute !important; right:14px !important; top:50%; width:26px !important; height:26px !important; border:1.5px solid var(--border) !important; border-radius:50% !important; background: linear-gradient(currentColor, currentColor) center/12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 12px no-repeat !important; background-color:transparent; color:var(--navy) !important; font-size:0 !important; transform:translateY(-50%) !important; transition:transform .22s ease, border-color .18s, color .18s, background-color .18s; } .faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg) !important; border-color:var(--red) !important; color:var(--red) !important; background-color:rgba(255, 140, 0, .06); } .faq-item .faq-answer{padding:0 16px 16px;font-size:13.5px} .faq-item[open] .faq-answer{padding-top:14px} } /* ---------- AUTHOR BOX (about-page person cards) ---------- */ .author-box .author-avatar{ width:120px;height:120px; border-radius:50%; object-fit:cover; flex-shrink:0; border:3px solid var(--gold); box-shadow:0 4px 12px rgba(45, 127, 255,.12); } .author-box .author-eyebrow{ display:block;font-family:var(--font-head);font-size:11px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:4px; } .author-box .author-name{ font-size:1.25rem;margin:0 0 4px;color:var(--navy);font-weight:800; } .author-box .author-role{ display:block;font-family:var(--font-head);font-size:12.5px;font-weight:700; letter-spacing:.04em;color:var(--text-muted);margin-bottom:10px; } .author-box .author-bio{ font-size:14px;line-height:1.65;color:var(--text);margin:0; } /* Mobile: stack image on top, text below, all centered */ @media (max-width:640px){ .author-box{ flex-direction:column !important; align-items:center !important; text-align:center !important; gap:14px !important; padding:22px 18px !important; } .author-box > div{width:100%} .author-box .author-avatar{width:104px;height:104px;margin:0 auto} .author-box .author-name{font-size:1.15rem} .author-box .author-bio{font-size:13.5px;text-align:left} } /* ---------- POST HERO IMAGE (news + guides) ---------- */ /* Show the WHOLE image, no cropping. Fit to width, keep aspect ratio. */ .post-hero{ margin:0 0 28px; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#242B32 0%,#242B32 55%,#2D3540 100%); box-shadow:0 8px 24px -14px rgba(45, 127, 255,.25); border:1px solid var(--border); } .post-hero img{ display:block; width:100%; height:auto; max-height:520px; object-fit:contain; object-position:center; margin:0 auto; } @media (max-width:720px){ .post-hero{margin:0 0 20px;border-radius:12px} .post-hero img{max-height:340px} } /* ---------- "NEW" badge on top casino cards (BE) ---------- */ .casino-thumb .thumb-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center} .oc-new-badge{ position:absolute;top:-5px;right:-8px; background:#FF8C00;color:#fff; font-family:var(--font-head);font-weight:800;font-size:7.5px; padding:1px 5px;border-radius:3px; letter-spacing:.06em;text-transform:uppercase; box-shadow:0 1px 4px rgba(0,0,0,.22); z-index:3;pointer-events:none;white-space:nowrap;line-height:1.3; } @media (max-width:520px){ .oc-new-badge{top:-3px;right:-6px;font-size:7px;padding:1px 4px;border-radius:3px} } /* ---------- Floating "Top Offer" bottom bar (auto-detected 2nd brand) ---------- */ .oc-top-offer{ position:fixed;left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%,140%); width:calc(100% - 24px);max-width:calc(var(--max-w) - 40px); z-index:9500; background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,var(--navy-2) 100%); color:#fff; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.2); transform:translateY(140%); opacity:0; transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s ease; border:1px solid rgba(255,255,255,.08); } .oc-top-offer.visible{transform:translate(-50%,0);opacity:1} .oc-top-offer-inner{ display:grid; grid-template-columns:auto 60px 1fr auto auto; align-items:center; gap:14px; padding:12px 42px 12px 16px; position:relative; } .oc-to-badge{ background:var(--gold);color:var(--navy-deep); font-family:var(--font-head);font-weight:800; font-size:10.5px;letter-spacing:.08em; padding:4px 9px;border-radius:4px; text-transform:uppercase;white-space:nowrap; } .oc-to-logo{ width:60px;height:40px; object-fit:contain; background:rgba(255,255,255,.08); border-radius:6px;padding:4px; flex-shrink:0; } .oc-to-text{min-width:0;line-height:1.3} .oc-to-name{ font-family:var(--font-head);font-weight:800;font-size:15px; margin:0 0 2px;color:#fff; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;line-height:1.2; } .oc-to-bonus{ font-size:12.5px;color:rgba(255,255,255,.9); display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical; overflow:hidden;line-height:1.3; } .oc-to-cta{ background:var(--red);color:#fff; font-family:var(--font-head);font-weight:800;font-size:12.5px;letter-spacing:.04em; padding:10px 18px;border-radius:6px;text-decoration:none; text-transform:uppercase;white-space:nowrap; box-shadow:0 2px 8px rgba(255, 140, 0,.4); transition:background .15s; } .oc-to-cta:hover{background:var(--red-deep)} .oc-to-close{ position:absolute;top:6px;right:8px; background:transparent;border:0; color:rgba(255,255,255,.6); font-size:20px;line-height:1;cursor:pointer; width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center; transition:color .15s,background .15s; } .oc-to-close:hover{color:#fff;background:rgba(255,255,255,.1)} /* Tablet */ @media (max-width:720px){ .oc-top-offer{margin-top:12px} .oc-top-offer-inner{grid-template-columns:46px minmax(0,1fr) auto;gap:10px;padding:8px 32px 8px 10px} .oc-to-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:9px;padding:3px 8px;letter-spacing:.06em;box-shadow:0 2px 6px rgba(0,0,0,.25)} .oc-to-logo{width:46px;height:34px;padding:3px;grid-column:1;grid-row:1} .oc-to-text{grid-column:2;grid-row:1;min-width:0} .oc-to-name{font-size:13px;margin:0;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal} .oc-to-bonus{font-size:11px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .oc-to-cta{grid-column:3;grid-row:1;font-size:11px;padding:8px 12px} .oc-to-close{top:4px;right:6px;width:22px;height:22px;font-size:17px} } /* Phone */ @media (max-width:420px){ .oc-top-offer{bottom:calc(28px + env(safe-area-inset-bottom, 0px));width:calc(100% - 16px);border-radius:10px} .oc-top-offer-inner{grid-template-columns:38px minmax(0,1fr) auto;gap:8px;padding:7px 28px 7px 8px} .oc-to-badge{top:-10px;left:50%;transform:translateX(-50%);font-size:8.5px;padding:2px 7px} .oc-to-logo{width:38px;height:28px;padding:2px;border-radius:5px} .oc-to-name{font-size:12px;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal} .oc-to-bonus{font-size:10.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .oc-to-cta{font-size:10px;padding:7px 10px;border-radius:5px;letter-spacing:.02em} .oc-to-close{top:3px;right:5px;width:20px;height:20px;font-size:16px} } /* ---------- Idle-exit popup (10s inactivity, first brand) ---------- */ .oc-exit-overlay{ position:fixed;inset:0;z-index:9800; background:rgba(0,30,70,.72); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); display:flex;align-items:center;justify-content:center; padding:20px;opacity:0;pointer-events:none; transition:opacity .3s ease; } .oc-exit-overlay.visible{opacity:1;pointer-events:auto} .oc-exit-modal{ position:relative; background:#fff;color:var(--text); border-radius:16px; width:100%;max-width:460px; padding:28px 22px 20px; box-shadow:0 20px 60px rgba(0,0,0,.4); transform:scale(.9) translateY(10px); transition:transform .35s cubic-bezier(.22,1,.36,1); text-align:center; } .oc-exit-overlay.visible .oc-exit-modal{transform:scale(1) translateY(0)} .oc-ex-close{ position:absolute;top:10px;right:10px; background:#fff;border:1px solid rgba(0,0,0,.12); width:34px;height:34px;border-radius:50%; color:var(--text-muted);font-size:20px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:color .15s,border-color .15s,background .15s; } .oc-ex-close:hover{color:var(--red);border-color:var(--red)} .oc-ex-title{ font-family:var(--font-head);font-weight:900; color:var(--navy); font-size:26px;line-height:1.15;letter-spacing:.01em; margin:4px 0 10px;text-transform:uppercase; } .oc-ex-subtitle{ font-size:15px;line-height:1.4;color:var(--text); margin:0 0 18px; } .oc-ex-bonus{ background:linear-gradient(135deg,#1B2229 0%,#1F262E 100%); border:1px solid rgba(255,195,0,.4); border-radius:10px; padding:16px 14px;margin:0 0 16px; } .oc-ex-logo{display:block;margin:0 auto 12px;max-height:80px;max-width:220px;width:auto;height:auto;object-fit:contain;background:var(--navy-deep);border-radius:8px;padding:6px 10px} .oc-ex-bonus-amount{ font-family:var(--font-head);font-weight:900; color:var(--red);font-size:22px;line-height:1.2; margin:0; } .oc-ex-brand-note{ font-size:12.5px;color:var(--text-muted); margin:0 0 18px;font-style:italic; } .oc-ex-cta{ display:block;width:100%; background:var(--red);color:#fff; font-family:var(--font-head);font-weight:800;font-size:15px;letter-spacing:.03em; padding:14px 18px;border-radius:10px; text-decoration:none;text-transform:uppercase; box-shadow:0 4px 14px rgba(255, 140, 0,.4); transition:background .15s,transform .1s; } .oc-ex-cta:hover{background:var(--red-deep)} .oc-ex-cta:active{transform:translateY(1px)} .oc-ex-dismiss{ display:inline-block;margin-top:12px; color:var(--text-muted);font-size:12.5px; text-decoration:underline;background:none;border:0;cursor:pointer; padding:4px 8px;font-family:inherit; } .oc-ex-dismiss:hover{color:var(--text)} @media (max-width:480px){ .oc-exit-modal{padding:22px 16px 16px;border-radius:14px} .oc-ex-title{font-size:21px} .oc-ex-subtitle{font-size:13.5px;margin-bottom:14px} .oc-ex-bonus{padding:12px 10px;margin-bottom:14px} .oc-ex-logo{max-height:64px;max-width:180px;padding:5px 8px} .oc-ex-bonus-amount{font-size:18px} .oc-ex-cta{font-size:14px;padding:12px 16px} } /* MOBILE OVERRIDE: rating + verdict badge on one line (must come AFTER the 720px block) */ @media (max-width:520px){ .casino-card .casino-info, .casino-list .casino-info{ flex-direction:row!important; flex-wrap:wrap!important; justify-content:center!important; align-items:center!important; gap:6px 8px!important; } .casino-card .casino-info h3, .casino-list .casino-info h3, .casino-card .casino-info .casino-features, .casino-list .casino-features{flex:0 0 100%!important;width:100%!important} .casino-card .casino-info .rating, .casino-list .casino-info .rating, .casino-card .casino-info .oc-score-desc, .casino-list .casino-info .oc-score-desc{ margin:0!important; flex:0 0 auto!important; } } /* MOBILE: remove white gap between market-subnav and hero (all markets) */ @media (max-width:720px){ .market-subnav{margin:0!important} .page-hero, .editorial-hero, .article-hero{padding-top:16px!important;padding-bottom:22px!important} } /* ============================================ SkyCity-inspired overrides (Faders) ============================================ */ /* Body background hardened */ body { background: var(--bg); color: var(--text); } /* Pill buttons across all primary/secondary CTAs */ .btn, .btn-primary, .btn-secondary, .hero-ctas .btn, .author-email-btn, .cta, button.dropdown-trigger, .newsletter-form button { border-radius: var(--button-radius) !important; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-family: var(--font-head); } /* Primary CTA = red (high-contrast conversion) */ .btn-primary, .cta-primary { background: linear-gradient(135deg, #FF8C00 0%, #E67E00 100%); color: #fff; border: 0; } .btn-primary:hover, .cta-primary:hover { background: linear-gradient(135deg, #FF9C1A 0%, #E67E00 100%); } /* .casino-cta is a WRAPPER column, not a button - reset any inherited button chrome */ .casino-cta { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; font-weight: normal !important; } /* Secondary CTA = outline on dark */ .btn-secondary, .cta-secondary { background: transparent; color: var(--navy); border: 1px solid var(--navy); } .btn-secondary:hover { background: rgba(45, 127, 255, 0.1); } /* Header + nav on dark */ header, .site-header { background: var(--bg); border-bottom: 1px solid var(--border); } .nav a, .nav button { color: var(--text); } .nav a:hover, .nav a.active { color: var(--navy); } .dropdown-menu, .dropdown-submenu { background: var(--surface); border: 1px solid var(--border); } .dropdown-menu a, .dropdown-submenu a { color: var(--text); } .dropdown-menu a:hover, .dropdown-submenu a:hover { background: var(--surface-hover); color: var(--navy); } /* Hero */ .ag-hero, .hero, section.hero { background: linear-gradient(135deg, #070A0D 0%, #0F1419 55%, #1B2229 100%); color: var(--text); } .ag-hero .kicker, .hero .kicker, .kicker { color: var(--navy); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: 0.8rem; } .ag-hero h1, .hero h1 { color: #fff; } .ag-hero .lede, .hero .lede, .lede { color: var(--text-muted); } /* Market tiles / cards */ .market-card, .mc-flag, .market-tile { background: var(--surface); border: 1px solid var(--border); color: var(--text); } .market-card:hover { border-color: var(--navy); background: var(--surface-hover); } /* Casino cards - keep layout but adjust surface + accent */ .casino-card { background: var(--surface); border: 1px solid var(--border); color: var(--text); } .casino-card:hover { border-color: var(--navy); } .rank-badge { background: var(--navy); color: #fff; } .casino-features { color: var(--text-muted); } .casino-bonus { color: var(--gold); } /* Tables */ table { color: var(--text); } thead { background: var(--surface); border-bottom: 1px solid var(--border); } tbody tr { border-bottom: 1px solid var(--border); } tbody tr:nth-child(even) { background: var(--bg-alt); } th, td { color: var(--text); } /* Author box on dark */ .author-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .author-name { color: #fff; } .author-role { color: var(--navy); } .author-bio { color: var(--text-muted); } /* Footer */ .site-footer, .gr-footer { background: #070A0D; color: var(--text-muted); border-top: 1px solid var(--border); } .site-footer h4, .gr-footer h4 { color: #fff; } .site-footer a, .gr-footer a { color: var(--text-muted); } .site-footer a:hover, .gr-footer a:hover { color: var(--navy); } .age-pill { background: var(--surface); color: var(--navy); border: 1px solid var(--navy); border-radius: var(--button-radius); padding: 6px 14px; font-weight: 700; font-size: .78rem; letter-spacing: .08em; } /* FAQ / collapsibles */ .faq-item, details { background: var(--surface); border: 1px solid var(--border); } .faq-item h3, details summary { color: #fff; } /* Newsletter form */ .newsletter input[type="email"] { background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); border-radius: var(--button-radius); padding: 12px 20px; } .newsletter input[type="email"]::placeholder { color: var(--text-dim); } /* Headings default */ h1, h2, h3, h4, h5 { color: #fff; font-family: var(--font-head); font-weight: 800; letter-spacing: -0.015em; } /* Links */ a { color: var(--navy); } a:hover { color: var(--navy-2); } /* Reveal class / animations - keep working against dark */ .reveal { background: transparent; } /* Content section backgrounds */ section.content, section { background: transparent; } /* ============================================ Mobile breakpoints (Phase 10) ============================================ */ /* Tablet and down */ @media (max-width: 960px) { :root { --max-w: 100%; } .container { padding-left: 16px; padding-right: 16px; } .ag-hero h1, .hero h1 { font-size: 2rem; line-height: 1.15; } .market-grid { grid-template-columns: repeat(2, 1fr); } } /* Phone */ @media (max-width: 720px) { .ag-hero h1, .hero h1 { font-size: 1.65rem; } .ag-hero .lede, .hero .lede, .lede { font-size: 1rem; } .fact-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; } .market-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } /* Nav: compact mobile */ .nav { gap: 6px; flex-wrap: wrap; } .nav a, .nav button { padding: 6px 10px; font-size: 14px; } /* Markets dropdown on mobile: flag + name tight-left */ .dropdown-submenu a { justify-content: flex-start; gap: 10px; } /* Footer stack */ .footer-grid { grid-template-columns: 1fr; gap: 24px; } /* Casino card stacking */ .casino-card { flex-direction: column; } .casino-thumb { width: 100%; max-height: 180px; } /* Tables responsive */ table { font-size: 13px; } th, td { padding: 8px 10px; } } /* Small phone */ @media (max-width: 480px) { .btn, .btn-primary, .btn-secondary { width: 100%; justify-content: center; } .hero-ctas { flex-direction: column; gap: 10px; } .ag-hero h1, .hero h1 { font-size: 1.4rem; } .fact-strip { grid-template-columns: 1fr 1fr; } .fnum { font-size: 1.5rem; } } /* Market subnav: single-row horizontal scroll (never wrap) */ .market-subnav .subnav-scroll { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: thin !important; scrollbar-color: rgba(45, 127, 255,0.75) rgba(0,0,0,0.06) !important; } .market-subnav .subnav-scroll::-webkit-scrollbar { display: block !important; height: 8px !important; } .market-subnav .subnav-scroll::-webkit-scrollbar-thumb { background: rgba(45, 127, 255,0.75); border-radius: 4px; } /* ============================================ SkyCity-style homepage layout (Faders) ============================================ */ body.sc-layout { display: flex; min-height: 100vh; background: #0F1419; margin: 0; padding: 0; } /* ---- Sidebar ---- */ .sc-sidebar { width: 240px; min-width: 240px; background: #070A0D; color: var(--text); padding: 24px 16px 32px; display: flex; flex-direction: column; gap: 18px; border-right: 1px solid #0F1419; box-sizing: border-box; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sc-logo { display: block; padding: 0 4px 6px; } .sc-logo img { width: 100%; max-width: 180px; height: auto; display: block; } .sc-ctas { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; } .sc-ctas .btn { width: 100%; justify-content: center; padding: 11px 16px; font-size: 13px; } .sc-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .sc-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--text-muted); text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 14px; transition: all 0.15s; } .sc-item:hover { background: #0F1419; color: #fff; } .sc-item.sc-active { color: var(--navy); background: rgba(45, 127, 255,0.08); } .sc-item.sc-active::before { content: ""; position: absolute; left: 0; width: 3px; height: 20px; background: var(--navy); border-radius: 0 3px 3px 0; margin-left: -16px; } .sc-item { position: relative; } .sc-ico { width: 20px; height: 20px; flex-shrink: 0; color: currentColor; } .sc-section-head { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: var(--text-dim); padding: 8px 12px 4px; margin-top: 10px; font-weight: 700; } .sc-markets { display: flex; flex-direction: column; gap: 1px; } .sc-flag-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text-muted); text-decoration: none; border-radius: 6px; font-size: 13px; transition: all 0.15s; } .sc-flag-item:hover { background: #0F1419; color: #fff; } .sc-flag-item img { width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0; } /* ---- Mobile header (hidden on desktop) ---- */ .sc-mobile-head { display: none; } /* ---- Main pane ---- */ .sc-main { flex: 1; min-width: 0; background: #0F1419; padding: 0; overflow-x: hidden; } /* ---- Hero ---- */ .sc-hero-pane { position: relative; padding: 72px 48px 56px; background: linear-gradient(135deg, #070A0D 0%, #0F1419 55%, #242B32 100%); overflow: hidden; min-height: 300px; display: flex; align-items: center; } .sc-hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 85% 50%, rgba(45, 127, 255,0.25), transparent 55%), radial-gradient(circle at 15% 20%, rgba(255, 140, 0,0.10), transparent 50%); pointer-events: none; } .sc-hero-copy { position: relative; max-width: 720px; } .sc-hero-kicker { display: inline-block; background: rgba(45, 127, 255,0.15); color: var(--navy); padding: 6px 14px; border-radius: 44px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; } .sc-hero-h1 { font-family: var(--font-head); font-weight: 900; font-size: 2.8rem; line-height: 1.05; letter-spacing: -0.02em; color: #fff; margin: 0 0 14px; } .sc-hero-lede { color: var(--text-muted); font-size: 1.05rem; line-height: 1.55; margin: 0 0 24px; max-width: 580px; } .sc-hero-lede strong { color: #fff; font-weight: 700; } .sc-hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; } .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 11px 24px; border-radius: 44px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.15s; } .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.05); } /* ---- Search + tabs ---- */ .sc-tabs-row { display: flex; align-items: center; gap: 24px; padding: 24px 48px; background: #0F1419; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .sc-search { position: relative; flex: 0 0 320px; max-width: 320px; } .sc-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-dim); } .sc-search input { width: 100%; padding: 10px 14px 10px 40px; background: #1B2229; border: 1px solid var(--border); border-radius: 44px; color: var(--text); font-family: var(--font-body); font-size: 14px; outline: none; box-sizing: border-box; } .sc-search input::placeholder { color: var(--text-dim); } .sc-search input:focus { border-color: var(--navy); } .sc-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .sc-tab { padding: 8px 18px; color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 44px; transition: all 0.15s; } .sc-tab:hover { color: #fff; background: #1B2229; } .sc-tab.sc-tab-active { color: var(--navy); border-bottom: 2px solid var(--navy); border-radius: 0; padding-bottom: 6px; } /* ---- Content sections ---- */ .sc-section { padding: 40px 48px; } .sc-section-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; } .sc-section-head-row h2 { font-size: 1.4rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.01em; } .sc-see-all { color: var(--navy); text-decoration: none; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; } .sc-see-all:hover { color: var(--navy-2); } /* Top-ranked tiles */ .sc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .sc-tile { background: #1B2229; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--text); transition: all 0.2s; display: flex; flex-direction: column; } .sc-tile:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-3); } .sc-tile-media { height: 100px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); } .sc-tile-media img { width: 56px; height: 56px; border-radius: 10px; } .sc-tile-body { padding: 14px 16px 16px; } .sc-tile-kicker { display: block; color: var(--navy); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; } .sc-tile-body h3 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 6px; } .sc-tile-body p { color: var(--text-muted); font-size: 13px; margin: 0; line-height: 1.45; } /* Market card grid */ .sc-market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .sc-market-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #1B2229; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); transition: all 0.2s; } .sc-market-card:hover { border-color: var(--navy); background: #1F262E; } .sc-market-card img { width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0; } .sc-market-card .mc-name { display: block; font-weight: 700; color: #fff; font-size: 14px; margin-bottom: 2px; } .sc-market-card .mc-sub { display: block; color: var(--text-dim); font-size: 12px; } /* News grid */ .sc-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .sc-news-card { display: block; padding: 18px; background: #1B2229; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; transition: all 0.2s; } .sc-news-card:hover { border-color: var(--navy); } .sc-news-tag { display: inline-block; color: var(--navy); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .sc-news-card h3 { font-size: 0.95rem; color: #fff; margin: 0 0 10px; line-height: 1.35; font-weight: 700; } .sc-news-date { color: var(--text-dim); font-size: 12px; } /* Promise strip */ .sc-promise { background: linear-gradient(180deg, #0F1419, #070A0D); border-top: 1px solid var(--border); } .sc-promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .sc-promise-card { padding: 24px; background: #1B2229; border: 1px solid var(--border); border-radius: 10px; } .sc-promise-num { font-size: 2.6rem; font-weight: 900; color: var(--navy); line-height: 1; margin-bottom: 10px; } .sc-promise-card h3 { color: #fff; font-size: 1.05rem; margin: 0 0 6px; } .sc-promise-card p { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 0; } /* Footer */ .sc-footer { background: #070A0D; padding: 48px 48px 20px; border-top: 1px solid var(--border); } .sc-footer-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border); } .sc-footer-brand img { height: 36px; display: block; margin-bottom: 10px; } .sc-footer-brand p { color: var(--text-muted); font-size: 13px; line-height: 1.5; max-width: 360px; } .sc-footer-col h4 { color: #fff; font-size: 13px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.1em; } .sc-footer-col a { display: block; color: var(--text-muted); font-size: 13px; text-decoration: none; padding: 3px 0; } .sc-footer-col a:hover { color: var(--navy); } .sc-footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; color: var(--text-dim); font-size: 12px; gap: 16px; flex-wrap: wrap; } .sc-age { background: var(--surface); color: var(--navy); padding: 6px 12px; border: 1px solid var(--navy); border-radius: 44px; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; } /* ---- Tablet ---- */ @media (max-width: 1080px) { .sc-hero-pane { padding: 56px 32px 44px; } .sc-hero-h1 { font-size: 2.2rem; } .sc-tabs-row { padding: 20px 32px; } .sc-section { padding: 36px 32px; } .sc-footer { padding: 40px 32px 20px; } .sc-footer-row { grid-template-columns: 1fr 1fr; gap: 24px; } } /* ---- Mobile ---- */ @media (max-width: 760px) { body.sc-layout { flex-direction: column; } .sc-sidebar { position: fixed; top: 0; left: 0; width: 280px; max-width: 85vw; height: 100vh; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 999; box-shadow: 10px 0 30px rgba(0,0,0,0.6); } .sc-sidebar.open { transform: translateX(0); } .sc-mobile-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #070A0D; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .sc-logo-m img { height: 32px; display: block; } .sc-burger { background: transparent; border: 1px solid var(--border); color: #fff; width: 40px; height: 40px; border-radius: 8px; font-size: 20px; cursor: pointer; } .sc-main { width: 100%; } .sc-hero-pane { padding: 40px 20px 32px; min-height: 240px; } .sc-hero-h1 { font-size: 1.7rem; } .sc-hero-lede { font-size: 0.95rem; } .sc-hero-cta-row { flex-direction: column; } .sc-hero-cta-row .btn { width: 100%; justify-content: center; } .sc-tabs-row { padding: 16px 20px; flex-direction: column; align-items: stretch; gap: 14px; } .sc-search { flex: 1; max-width: 100%; } .sc-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; } .sc-tab { white-space: nowrap; flex-shrink: 0; } .sc-section { padding: 28px 20px; } .sc-card-grid { grid-template-columns: 1fr; } .sc-market-grid { grid-template-columns: 1fr; } .sc-news-grid { grid-template-columns: 1fr; } .sc-footer { padding: 32px 20px 16px; } .sc-footer-row { grid-template-columns: 1fr; } .sc-footer-bottom { flex-direction: column; gap: 10px; } } /* bonus-type-card */ .bonus-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; } .bonus-type-card { display: flex; gap: 16px; padding: 20px; background: #1B2229; border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; transition: all 0.2s; align-items: flex-start; } .bonus-type-card:hover { border-color: var(--navy); background: #1F262E; transform: translateY(-2px); box-shadow: var(--shadow-3); } .bonus-type-card .btc-icon { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(45, 127, 255,0.12); border: 1px solid rgba(45, 127, 255,0.25); border-radius: 10px; color: var(--navy); } .bonus-type-card .btc-icon svg { width: 24px; height: 24px; } .bonus-type-card .btc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .bonus-type-card h3 { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.3; } .bonus-type-card p { color: var(--text-muted); font-size: 13.5px; line-height: 1.5; margin: 0; } .bonus-type-card .btc-cta { color: var(--navy); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; display: inline-block; } .bonus-type-card:hover .btc-cta { color: var(--navy-2); } @media (max-width: 520px) { .bonus-type-card { padding: 16px; gap: 12px; } .bonus-type-card .btc-icon { flex: 0 0 40px; width: 40px; height: 40px; } .bonus-type-card .btc-icon svg { width: 20px; height: 20px; } .bonus-type-card h3 { font-size: 0.98rem; } .bonus-type-card p { font-size: 13px; } } /* ============================================ Casino card CTA + thumb fixes (Phase post-launch) ============================================ */ /* Thumb needs a light background so logos with light fills (#E5E7EB etc) show on the dark card */ .casino-card .casino-thumb { background: #E5E7EB; border-radius: 8px; padding: 8px; min-height: 70px; overflow: hidden; } .casino-card .casino-thumb img { max-height: 60px; max-width: 100%; width: auto; display: block; } /* Rank badge: ensure it never visually overlaps the thumb */ .casino-card .rank-badge { z-index: 2; flex-shrink: 0; margin: 0; } /* Casino info name: ensure no text spills under the badge */ .casino-card .casino-info h3 { color: #fff; font-weight: 700; margin-bottom: 8px; } .casino-card .casino-info .rating { background: var(--navy); color: #fff; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 10px; display: inline-flex; padding: 4px 10px; border-radius: 4px; } .casino-card .casino-features li { color: var(--text-muted); } .casino-card .casino-features li::before { color: var(--success); } /* Bonus column: clearer dark panel with legible text */ .casino-card .casino-bonus { background: #0F1419; border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; text-align: center; min-width: 0; } .casino-card .casino-bonus .bonus-label { color: var(--navy); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 6px; } .casino-card .casino-bonus .bonus-amount { color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; display: block; } /* CTA column: wider, pill button with better contrast and shadow */ .casino-card .casino-cta { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; padding: 0 4px; min-width: 180px; } .casino-card .casino-cta .btn, .casino-card .casino-cta .btn-primary { background: var(--navy) !important; color: #fff !important; border: 0 !important; border-radius: 44px !important; padding: 14px 20px !important; font-family: var(--font-head) !important; font-weight: 800 !important; font-size: 13.5px !important; letter-spacing: 0.08em !important; text-transform: uppercase; text-align: center; white-space: nowrap; box-shadow: 0 4px 12px rgba(45, 127, 255, 0.35); transition: all 0.2s; display: flex !important; align-items: center; justify-content: center; width: 100%; } .casino-card .casino-cta .btn:hover, .casino-card .casino-cta .btn-primary:hover { background: var(--navy-2) !important; box-shadow: 0 6px 18px rgba(45, 127, 255, 0.55); transform: translateY(-1px); } .casino-card .casino-cta .oc-terms, .casino-card .casino-cta small, .casino-card .casino-cta .fine { text-align: center; color: var(--text-dim); font-size: 11px; line-height: 1.4; margin-top: 2px; } /* Grow the CTA column on desktop so the button has breathing room */ @media (min-width: 1081px) { .casino-card { grid-template-columns: 56px 130px minmax(0, 1fr) 220px 220px !important; gap: 24px; padding: 20px 24px; align-items: center; } } /* Tablet (900-1080) - compact but still 2-col for bonus + cta */ @media (max-width: 1080px) and (min-width: 901px) { .casino-card { grid-template-columns: 50px 110px minmax(0, 1fr) 200px 190px !important; gap: 16px; padding: 18px 20px; } .casino-card .casino-cta .btn, .casino-card .casino-cta .btn-primary { padding: 12px 14px !important; font-size: 12.5px !important; } } /* Small-tablet (720-900): stack bonus/cta full width under info */ @media (max-width: 900px) and (min-width: 721px) { .casino-card { grid-template-columns: 44px 100px minmax(0, 1fr) !important; grid-template-rows: auto auto; gap: 14px; padding: 16px; } .casino-card .casino-bonus { grid-column: 2 / -1; } .casino-card .casino-cta { grid-column: 1 / -1; flex-direction: row; padding-top: 6px; } .casino-card .casino-cta .btn { flex: 1; } } /* Mobile already handled by existing 520px rules - ensure gold CTA stands out */ @media (max-width: 720px) { .casino-card .casino-cta .btn, .casino-card .casino-cta .btn-primary { font-size: 14px !important; padding: 14px 22px !important; min-width: 200px !important; } } /* ============================================ Casino card CTA area - final polished layout ============================================ */ .casino-card .casino-cta { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 4px 6px !important; min-width: 0; overflow: visible !important; box-sizing: border-box; width: 100%; } .casino-card .casino-cta .btn, .casino-card .casino-cta .btn-primary { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 13px 12px !important; background: var(--navy) !important; color: #fff !important; border: 0 !important; border-radius: 44px !important; font-family: var(--font-head) !important; font-weight: 800 !important; font-size: 13px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-shadow: 0 3px 10px rgba(45, 127, 255, 0.30); transition: all 0.2s; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; line-height: 1.2 !important; } .casino-card .casino-cta .btn:hover, .casino-card .casino-cta .btn-primary:hover { background: var(--navy-2) !important; box-shadow: 0 5px 14px rgba(45, 127, 255, 0.50); transform: translateY(-1px); } /* oc-claimed below the button - a plain line of text, centered, inside the card */ .casino-card .casino-cta .oc-claimed, .casino-cta .oc-claimed { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: var(--navy) !important; font-family: var(--font-head) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; text-align: center !important; line-height: 1.35 !important; white-space: normal !important; word-wrap: break-word !important; overflow-wrap: anywhere !important; text-overflow: clip !important; } /* Card itself: give enough vertical room so the claimed row sits inside the border */ .casino-card { align-items: stretch !important; padding-top: 20px !important; padding-bottom: 20px !important; } /* ============================================ CTA buttons v3 - high-contrast red + visible claimed line ============================================ */ /* Primary casino CTA: red gradient, bold white, bigger */ .casino-card .casino-cta .btn, .casino-card .casino-cta .btn-primary, .casino-card .casino-cta a.btn, .casino-card .casino-cta a.btn-primary { background: linear-gradient(135deg, #FF8C00 0%, #E67E00 100%) !important; color: #ffffff !important; border: 0 !important; border-radius: 44px !important; padding: 15px 18px !important; font-family: var(--font-head) !important; font-weight: 900 !important; font-size: 14px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-align: center !important; white-space: nowrap !important; box-shadow: 0 4px 14px rgba(255, 140, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.18) !important; text-decoration: none !important; width: 100% !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: all 0.2s ease; } .casino-card .casino-cta .btn:hover, .casino-card .casino-cta .btn-primary:hover, .casino-card .casino-cta a.btn:hover, .casino-card .casino-cta a.btn-primary:hover { background: linear-gradient(135deg, #FF9C1A 0%, #E67E00 100%) !important; box-shadow: 0 6px 20px rgba(255, 140, 0, 0.60), inset 0 1px 0 rgba(255,255,255,0.22) !important; transform: translateY(-2px) !important; } /* The claimed-today line below the button: subtle dark pill, white text, clearly legible */ .casino-card .casino-cta .oc-claimed, .casino-cta .oc-claimed { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; width: auto !important; max-width: 100% !important; margin: 10px auto 0 !important; padding: 5px 12px !important; background: rgba(0, 0, 0, 0.35) !important; border: 1px solid rgba(45, 127, 255, 0.35) !important; border-radius: 44px !important; color: #ffffff !important; font-family: var(--font-head) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; line-height: 1.3 !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; box-sizing: border-box !important; } /* On mobile, let claimed text wrap on 2 lines if needed */ @media (max-width: 720px) { .casino-card .casino-cta .oc-claimed, .casino-cta .oc-claimed { white-space: normal !important; text-overflow: clip !important; } } /* Any other CTA using .btn-primary on the site (hero CTAs, hub tabs, etc.) also gets the red primary */ .btn-primary, a.btn-primary, .hero-ctas .btn-primary, .sc-cta.btn-primary { background: linear-gradient(135deg, #FF8C00 0%, #E67E00 100%) !important; color: #ffffff !important; border: 0 !important; box-shadow: 0 4px 14px rgba(255, 140, 0, 0.40) !important; } .btn-primary:hover, a.btn-primary:hover { background: linear-gradient(135deg, #FF9C1A 0%, #E67E00 100%) !important; box-shadow: 0 6px 20px rgba(255, 140, 0, 0.55) !important; transform: translateY(-1px); } /* ============================================ Hero - new 2400x500 banner, full width visible, text on left ============================================ */ .sc-hero-pane.sc-hero-img-pane { position: relative; padding: 0; margin: 0; background: #070A0D; overflow: hidden; display: block; min-height: 0; } .sc-hero-pane.sc-hero-img-pane .sc-hero-img { display: block; width: 100%; height: auto; max-width: none; object-fit: cover; } .sc-hero-pane.sc-hero-img-pane .sc-hero-copy { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 3; max-width: 460px; padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; } .sc-hero-pane.sc-hero-img-pane .sc-hero-kicker { background: rgba(10,10,10,0.55); color: var(--navy); padding: 5px 12px; border-radius: 44px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; display: inline-block; margin-bottom: 10px; border: 1px solid rgba(45, 127, 255,0.4); } .sc-hero-pane.sc-hero-img-pane .sc-hero-h1 { font-size: 2rem; line-height: 1.1; color: #fff; margin: 0 0 10px; font-weight: 900; text-shadow: 0 2px 16px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); } .sc-hero-pane.sc-hero-img-pane .sc-hero-lede { color: #E5E7EB; font-size: 0.88rem; line-height: 1.5; margin: 0 0 14px; text-shadow: 0 1px 10px rgba(0,0,0,0.85); } .sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row { display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 1100px) { .sc-hero-pane.sc-hero-img-pane .sc-hero-copy { max-width: 340px; left: 24px; } .sc-hero-pane.sc-hero-img-pane .sc-hero-h1 { font-size: 1.6rem; } .sc-hero-pane.sc-hero-img-pane .sc-hero-lede { font-size: 0.82rem; } } @media (max-width: 760px) { .sc-hero-pane.sc-hero-img-pane { padding-bottom: 18px; } .sc-hero-pane.sc-hero-img-pane .sc-hero-img { position: static; } .sc-hero-pane.sc-hero-img-pane .sc-hero-copy { position: static; transform: none; margin: 18px 16px 0; max-width: 100%; } .sc-hero-pane.sc-hero-img-pane .sc-hero-h1 { font-size: 1.5rem; } } /* AU market hero - full visible image, text overlay */ .page-hero.au-hero-bg { position: relative !important; padding: 0 !important; background: #070A0D !important; overflow: hidden !important; min-height: 0 !important; display: block !important; } .page-hero.au-hero-bg .au-hero-img { display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0; } .page-hero.au-hero-bg .container { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 3; max-width: 540px; padding: 0; background: transparent; } .page-hero.au-hero-bg .breadcrumbs, .page-hero.au-hero-bg h1, .page-hero.au-hero-bg .lead { text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); color: #fff !important; } .page-hero.au-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; } .page-hero.au-hero-bg .lead { font-size: 0.92rem !important; color: #E5E7EB !important; } .page-hero.au-hero-bg .blob { display: none !important; } @media (max-width: 1100px) { .page-hero.au-hero-bg .container { max-width: 400px; left: 24px; } .page-hero.au-hero-bg h1 { font-size: 1.55rem !important; } .page-hero.au-hero-bg .lead { font-size: 0.82rem !important; } } @media (max-width: 760px) { .page-hero.au-hero-bg { padding-bottom: 16px !important; } .page-hero.au-hero-bg .au-hero-img { position: static; } .page-hero.au-hero-bg .container { position: static; transform: none; margin: 14px 16px 0; max-width: 100%; } .page-hero.au-hero-bg h1 { font-size: 1.4rem !important; } } /* BE market hero background */ .page-hero.be-hero-bg { position: relative !important; padding: 0 !important; background: #070A0D !important; overflow: hidden !important; min-height: 0 !important; display: block !important; } .page-hero.be-hero-bg .be-hero-img { display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0; } .page-hero.be-hero-bg .container { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 3; max-width: 540px; padding: 0; background: transparent; } .page-hero.be-hero-bg .breadcrumbs, .page-hero.be-hero-bg h1, .page-hero.be-hero-bg .lead { text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); color: #fff !important; } .page-hero.be-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; } .page-hero.be-hero-bg .lead { font-size: 0.92rem !important; color: #E5E7EB !important; } .page-hero.be-hero-bg .blob { display: none !important; } @media (max-width: 1100px) { .page-hero.be-hero-bg .container { max-width: 400px; left: 24px; } .page-hero.be-hero-bg h1 { font-size: 1.55rem !important; } .page-hero.be-hero-bg .lead { font-size: 0.82rem !important; } } @media (max-width: 760px) { .page-hero.be-hero-bg { padding-bottom: 16px !important; } .page-hero.be-hero-bg .be-hero-img { position: static; } .page-hero.be-hero-bg .container { position: static; transform: none; margin: 14px 16px 0; max-width: 100%; } .page-hero.be-hero-bg h1 { font-size: 1.4rem !important; } } /* Any "th-hero-art" or decorative illustration beside the copy becomes irrelevant - hide */ .page-hero.th-hero.th-hero-bg .th-hero-art, .page-hero.th-hero.th-hero-bg .th-hero-illustration, .page-hero.th-hero.th-hero-bg .th-hero-image { display: none !important; } /* TH market hero - +overlay pattern (mirror AU/BE) */ .page-hero.th-hero.th-hero-bg { position: relative !important; padding: 0 !important; background: #070A0D !important; overflow: hidden !important; min-height: 0 !important; display: block !important; } .page-hero.th-hero.th-hero-bg > .th-hero-img-el { display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0; } .page-hero.th-hero.th-hero-bg .container { position: absolute !important; top: 50% !important; left: 5% !important; transform: translateY(-50%) !important; z-index: 3 !important; max-width: 560px !important; width: auto !important; padding: 0 !important; display: block !important; grid-template-columns: none !important; gap: 0 !important; background: transparent !important; } .page-hero.th-hero.th-hero-bg .th-hero-copy { max-width: 560px !important; text-align: left !important; } .page-hero.th-hero.th-hero-bg .th-hero-copy h1, .page-hero.th-hero.th-hero-bg .th-hero-copy .lead, .page-hero.th-hero.th-hero-bg .th-hero-copy .breadcrumbs, .page-hero.th-hero.th-hero-bg .th-hero-copy .th-badge { text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 0 24px rgba(0,0,0,0.6); color: #fff !important; } .page-hero.th-hero.th-hero-bg .th-hero-copy h1 { font-size: 1.55rem !important; line-height: 1.2 !important; margin-bottom: 8px !important; } .page-hero.th-hero.th-hero-bg .th-hero-copy .lead { font-size: 0.85rem !important; color: #E5E7EB !important; margin: 0 0 10px !important; } .page-hero.th-hero.th-hero-bg .th-hero-copy .th-badge { display: inline-block; background: rgba(45, 127, 255,0.22) !important; color: var(--navy) !important; padding: 4px 10px !important; border-radius: 44px !important; border: 1px solid rgba(45, 127, 255,0.4) !important; font-size: 10.5px !important; letter-spacing: 0.06em !important; margin-bottom: 8px !important; } .page-hero.th-hero.th-hero-bg .th-hero-copy .th-hero-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .page-hero.th-hero.th-hero-bg .th-hero-copy .th-chips { display: none !important; } .page-hero.th-hero.th-hero-bg .blob { display: none !important; } .page-hero.th-hero.th-hero-bg figure.th-hero-img, .page-hero.th-hero.th-hero-bg .th-hero-copy figure, .page-hero.th-hero.th-hero-bg .container > figure { display: none !important; } @media (max-width: 1100px) { .page-hero.th-hero.th-hero-bg .container { max-width: 400px !important; left: 24px !important; } .page-hero.th-hero.th-hero-bg .th-hero-copy h1 { font-size: 1.3rem !important; } .page-hero.th-hero.th-hero-bg .th-hero-copy .lead { font-size: 0.78rem !important; } } @media (max-width: 760px) { .page-hero.th-hero.th-hero-bg { padding-bottom: 16px !important; } .page-hero.th-hero.th-hero-bg > .th-hero-img-el { position: static; } .page-hero.th-hero.th-hero-bg .container { position: static !important; transform: none !important; margin: 14px 16px 0 !important; max-width: 100% !important; } .page-hero.th-hero.th-hero-bg .th-hero-copy h1 { font-size: 1.2rem !important; } } /* DK market hero background */ .page-hero.dk-hero-bg { position: relative !important; padding: 0 !important; background: #070A0D !important; overflow: hidden !important; min-height: 0 !important; display: block !important; } .page-hero.dk-hero-bg .dk-hero-img { display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0; } .page-hero.dk-hero-bg .container { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 3; max-width: 540px; padding: 0; background: transparent; } .page-hero.dk-hero-bg .breadcrumbs, .page-hero.dk-hero-bg h1, .page-hero.dk-hero-bg .lead { text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); color: #fff !important; } .page-hero.dk-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; } .page-hero.dk-hero-bg .lead { font-size: 0.92rem !important; color: #E5E7EB !important; } .page-hero.dk-hero-bg .blob { display: none !important; } @media (max-width: 1100px) { .page-hero.dk-hero-bg .container { max-width: 400px; left: 24px; } .page-hero.dk-hero-bg h1 { font-size: 1.55rem !important; } .page-hero.dk-hero-bg .lead { font-size: 0.82rem !important; } } @media (max-width: 760px) { .page-hero.dk-hero-bg { padding-bottom: 16px !important; } .page-hero.dk-hero-bg .dk-hero-img { position: static; } .page-hero.dk-hero-bg .container { position: static; transform: none; margin: 14px 16px 0; max-width: 100%; } .page-hero.dk-hero-bg h1 { font-size: 1.4rem !important; } } /* FR market hero background */ .page-hero.fr-hero-bg { position: relative !important; padding: 0 !important; background: #070A0D !important; overflow: hidden !important; min-height: 0 !important; display: block !important; } .page-hero.fr-hero-bg .fr-hero-img { display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0; } .page-hero.fr-hero-bg .container { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 3; max-width: 540px; padding: 0; background: transparent; } .page-hero.fr-hero-bg .breadcrumbs, .page-hero.fr-hero-bg h1, .page-hero.fr-hero-bg .lead { text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); color: #fff !important; } .page-hero.fr-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; } .page-hero.fr-hero-bg .lead { font-size: 0.92rem !important; color: #E5E7EB !important; } .page-hero.fr-hero-bg .blob { display: none !important; } @media (max-width: 1100px) { .page-hero.fr-hero-bg .container { max-width: 400px; left: 24px; } .page-hero.fr-hero-bg h1 { font-size: 1.55rem !important; } .page-hero.fr-hero-bg .lead { font-size: 0.82rem !important; } } @media (max-width: 760px) { .page-hero.fr-hero-bg { padding-bottom: 16px !important; } .page-hero.fr-hero-bg .fr-hero-img { position: static; } .page-hero.fr-hero-bg .container { position: static; transform: none; margin: 14px 16px 0; max-width: 100%; } .page-hero.fr-hero-bg h1 { font-size: 1.4rem !important; } } /* IE market hero background */ .page-hero.ie-hero-bg { position: relative !important; padding: 0 !important; background: #070A0D !important; overflow: hidden !important; min-height: 0 !important; display: block !important; } .page-hero.ie-hero-bg .ie-hero-img { display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0; } .page-hero.ie-hero-bg .container { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 3; max-width: 540px; padding: 0; background: transparent; } .page-hero.ie-hero-bg .breadcrumbs, .page-hero.ie-hero-bg h1, .page-hero.ie-hero-bg .lead { text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); color: #fff !important; } .page-hero.ie-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; } .page-hero.ie-hero-bg .lead { font-size: 0.92rem !important; color: #E5E7EB !important; } .page-hero.ie-hero-bg .blob { display: none !important; } @media (max-width: 1100px) { .page-hero.ie-hero-bg .container { max-width: 400px; left: 24px; } .page-hero.ie-hero-bg h1 { font-size: 1.55rem !important; } .page-hero.ie-hero-bg .lead { font-size: 0.82rem !important; } } @media (max-width: 760px) { .page-hero.ie-hero-bg { padding-bottom: 16px !important; } .page-hero.ie-hero-bg .ie-hero-img { position: static; } .page-hero.ie-hero-bg .container { position: static; transform: none; margin: 14px 16px 0; max-width: 100%; } .page-hero.ie-hero-bg h1 { font-size: 1.4rem !important; } } /* NL market hero background */ .page-hero.nl-hero-bg { position: relative !important; padding: 0 !important; background: #070A0D !important; overflow: hidden !important; min-height: 0 !important; display: block !important; } .page-hero.nl-hero-bg .nl-hero-img { display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0; } .page-hero.nl-hero-bg .container { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 3; max-width: 540px; padding: 0; background: transparent; } .page-hero.nl-hero-bg .breadcrumbs, .page-hero.nl-hero-bg h1, .page-hero.nl-hero-bg .lead { text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); color: #fff !important; } .page-hero.nl-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; } .page-hero.nl-hero-bg .lead { font-size: 0.92rem !important; color: #E5E7EB !important; } .page-hero.nl-hero-bg .blob { display: none !important; } @media (max-width: 1100px) { .page-hero.nl-hero-bg .container { max-width: 400px; left: 24px; } .page-hero.nl-hero-bg h1 { font-size: 1.55rem !important; } .page-hero.nl-hero-bg .lead { font-size: 0.82rem !important; } } @media (max-width: 760px) { .page-hero.nl-hero-bg { padding-bottom: 16px !important; } .page-hero.nl-hero-bg .nl-hero-img { position: static; } .page-hero.nl-hero-bg .container { position: static; transform: none; margin: 14px 16px 0; max-width: 100%; } .page-hero.nl-hero-bg h1 { font-size: 1.4rem !important; } } /* PT market hero background */ .page-hero.pt-hero-bg { position: relative !important; padding: 0 !important; background: #070A0D !important; overflow: hidden !important; min-height: 0 !important; display: block !important; } .page-hero.pt-hero-bg .pt-hero-img { display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0; } .page-hero.pt-hero-bg .container { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 3; max-width: 540px; padding: 0; background: transparent; } .page-hero.pt-hero-bg .breadcrumbs, .page-hero.pt-hero-bg h1, .page-hero.pt-hero-bg .lead { text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); color: #fff !important; } .page-hero.pt-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; } .page-hero.pt-hero-bg .lead { font-size: 0.92rem !important; color: #E5E7EB !important; } .page-hero.pt-hero-bg .blob { display: none !important; } @media (max-width: 1100px) { .page-hero.pt-hero-bg .container { max-width: 400px; left: 24px; } .page-hero.pt-hero-bg h1 { font-size: 1.55rem !important; } .page-hero.pt-hero-bg .lead { font-size: 0.82rem !important; } } @media (max-width: 760px) { .page-hero.pt-hero-bg { padding-bottom: 16px !important; } .page-hero.pt-hero-bg .pt-hero-img { position: static; } .page-hero.pt-hero-bg .container { position: static; transform: none; margin: 14px 16px 0; max-width: 100%; } .page-hero.pt-hero-bg h1 { font-size: 1.4rem !important; } } /* PT market hero also for article-hero */ .article-hero.pt-hero-bg { position: relative !important; padding: 0 !important; background: #070A0D !important; overflow: hidden !important; min-height: 0 !important; display: block !important; } .article-hero.pt-hero-bg .pt-hero-img { display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0; } .article-hero.pt-hero-bg .container { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 3; max-width: 540px; padding: 0; background: transparent; } .article-hero.pt-hero-bg .breadcrumbs, .article-hero.pt-hero-bg h1, .article-hero.pt-hero-bg .lead { text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); color: #fff !important; } .article-hero.pt-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; } .article-hero.pt-hero-bg .lead { font-size: 0.92rem !important; color: #E5E7EB !important; } .article-hero.pt-hero-bg .blob { display: none !important; } @media (max-width: 1100px) { .article-hero.pt-hero-bg .container { max-width: 400px; left: 24px; } .article-hero.pt-hero-bg h1 { font-size: 1.55rem !important; } .article-hero.pt-hero-bg .lead { font-size: 0.82rem !important; } } @media (max-width: 760px) { .article-hero.pt-hero-bg { padding-bottom: 16px !important; } .article-hero.pt-hero-bg .pt-hero-img { position: static; } .article-hero.pt-hero-bg .container { position: static; transform: none; margin: 14px 16px 0; max-width: 100%; } .article-hero.pt-hero-bg h1 { font-size: 1.4rem !important; } } /* SE market hero background */ .page-hero.se-hero-bg { position: relative !important; padding: 0 !important; background: #070A0D !important; overflow: hidden !important; min-height: 0 !important; display: block !important; } .page-hero.se-hero-bg .se-hero-img { display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0; } .page-hero.se-hero-bg .container { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 3; max-width: 540px; padding: 0; background: transparent; } .page-hero.se-hero-bg .breadcrumbs, .page-hero.se-hero-bg h1, .page-hero.se-hero-bg .lead { text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); color: #fff !important; } .page-hero.se-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; } .page-hero.se-hero-bg .lead { font-size: 0.92rem !important; color: #E5E7EB !important; } .page-hero.se-hero-bg .blob { display: none !important; } @media (max-width: 1100px) { .page-hero.se-hero-bg .container { max-width: 400px; left: 24px; } .page-hero.se-hero-bg h1 { font-size: 1.55rem !important; } .page-hero.se-hero-bg .lead { font-size: 0.82rem !important; } } @media (max-width: 760px) { .page-hero.se-hero-bg { padding-bottom: 16px !important; } .page-hero.se-hero-bg .se-hero-img { position: static; } .page-hero.se-hero-bg .container { position: static; transform: none; margin: 14px 16px 0; max-width: 100%; } .page-hero.se-hero-bg h1 { font-size: 1.4rem !important; } } /* UK market hero background */ .page-hero.uk-hero-bg { position: relative !important; padding: 0 !important; background: #070A0D !important; overflow: hidden !important; min-height: 0 !important; display: block !important; } .page-hero.uk-hero-bg .uk-hero-img { display: block; width: 100%; height: auto; object-fit: cover; margin: 0; padding: 0; } .page-hero.uk-hero-bg .container { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 3; max-width: 540px; padding: 0; background: transparent; } .page-hero.uk-hero-bg .breadcrumbs, .page-hero.uk-hero-bg h1, .page-hero.uk-hero-bg .lead { text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); color: #fff !important; } .page-hero.uk-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; } .page-hero.uk-hero-bg .lead { font-size: 0.92rem !important; color: #E5E7EB !important; } .page-hero.uk-hero-bg .blob { display: none !important; } @media (max-width: 1100px) { .page-hero.uk-hero-bg .container { max-width: 400px; left: 24px; } .page-hero.uk-hero-bg h1 { font-size: 1.55rem !important; } .page-hero.uk-hero-bg .lead { font-size: 0.82rem !important; } } @media (max-width: 760px) { .page-hero.uk-hero-bg { padding-bottom: 16px !important; } .page-hero.uk-hero-bg .uk-hero-img { position: static; } .page-hero.uk-hero-bg .container { position: static; transform: none; margin: 14px 16px 0; max-width: 100%; } .page-hero.uk-hero-bg h1 { font-size: 1.4rem !important; } } /* ---------- EMERALD GREEN CTA OVERRIDE (applies to every primary CTA button site-wide) ---------- */ :root { --cta-green: #10B981; --cta-green-deep: #0F9E6A; } .btn-primary, a.btn-primary, button.btn-primary, .cta-primary, .hero-ctas .btn-primary, .sc-cta.btn-primary, .casino-card .casino-cta .btn-primary, .casino-card .casino-cta a.btn-primary, .sc-hero-cta-row .btn-primary, .gbtn-primary, .oc-to-cta, .oc-ex-cta { background: linear-gradient(135deg, #10B981 0%, #0F9E6A 100%) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(16, 185, 129, .40) !important; } .btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover, .cta-primary:hover, .hero-ctas .btn-primary:hover, .sc-cta.btn-primary:hover, .casino-card .casino-cta .btn-primary:hover, .casino-card .casino-cta a.btn-primary:hover, .sc-hero-cta-row .btn-primary:hover, .gbtn-primary:hover, .oc-to-cta:hover, .oc-ex-cta:hover { background: linear-gradient(135deg, #0F9E6A 0%, #0D865A 100%) !important; box-shadow: 0 6px 18px rgba(16, 185, 129, .50) !important; color: #fff !important; transform: translateY(-1px); } .btn-primary:active, a.btn-primary:active, button.btn-primary:active { transform: translateY(0); } /* ---------- MOBILE HERO: NO image, compact height, CTA lifted to top ---------- */ @media (max-width: 760px) { /* --- Homepage + Bonus Calculator (sc-hero): hide image, use dark gradient --- */ .sc-hero-pane.sc-hero-img-pane { padding: 0 !important; min-height: 0 !important; position: relative !important; overflow: hidden !important; background: linear-gradient(135deg, #070A0D 0%, #0F1419 55%, #1B2229 100%) !important; } .sc-hero-pane.sc-hero-img-pane .sc-hero-img { display: none !important; } .sc-hero-pane.sc-hero-img-pane::after { display: none !important; } .sc-hero-pane.sc-hero-img-pane .sc-hero-copy { position: relative !important; z-index: 3 !important; transform: none !important; left: 0 !important; right: 0 !important; top: 0 !important; margin: 0 !important; padding: 18px 20px 20px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-height: 0 !important; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; } .sc-hero-pane.sc-hero-img-pane .sc-hero-kicker { margin-bottom: 0; } .sc-hero-pane.sc-hero-img-pane .sc-hero-h1 { font-size: 1.55rem !important; margin: 0 !important; } .sc-hero-pane.sc-hero-img-pane .sc-hero-lede { font-size: 0.88rem !important; margin: 0 !important; } .sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row { flex-direction: row !important; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row .btn { width: auto !important; flex: 1 1 140px; min-width: 140px; justify-content: center; } /* --- All per-market hero: hide image, compact --- */ .page-hero.au-hero-bg, .page-hero.at-hero-bg, .page-hero.be-hero-bg, .page-hero.de-hero-bg, .page-hero.th-hero-bg, .page-hero.dk-hero-bg, .page-hero.fr-hero-bg, .page-hero.ie-hero-bg, .page-hero.nl-hero-bg, .page-hero.pt-hero-bg, .page-hero.se-hero-bg, .page-hero.uk-hero-bg, .article-hero.pt-hero-bg { padding: 0 !important; min-height: 0 !important; position: relative !important; overflow: hidden !important; background: linear-gradient(135deg, #070A0D 0%, #0F1419 55%, #1B2229 100%) !important; } .page-hero.au-hero-bg .au-hero-img, .page-hero.at-hero-bg .at-hero-img, .page-hero.be-hero-bg .be-hero-img, .page-hero.de-hero-bg .de-hero-img, .page-hero.th-hero-bg .th-hero-img, .page-hero.dk-hero-bg .dk-hero-img, .page-hero.fr-hero-bg .fr-hero-img, .page-hero.ie-hero-bg .ie-hero-img, .page-hero.nl-hero-bg .nl-hero-img, .page-hero.pt-hero-bg .pt-hero-img, .page-hero.se-hero-bg .se-hero-img, .page-hero.uk-hero-bg .uk-hero-img, .article-hero.pt-hero-bg .pt-hero-img { display: none !important; } .page-hero.au-hero-bg::after, .page-hero.at-hero-bg::after, .page-hero.be-hero-bg::after, .page-hero.de-hero-bg::after, .page-hero.th-hero-bg::after, .page-hero.dk-hero-bg::after, .page-hero.fr-hero-bg::after, .page-hero.ie-hero-bg::after, .page-hero.nl-hero-bg::after, .page-hero.pt-hero-bg::after, .page-hero.se-hero-bg::after, .page-hero.uk-hero-bg::after, .article-hero.pt-hero-bg::after { display: none !important; } .page-hero.au-hero-bg .container, .page-hero.at-hero-bg .container, .page-hero.be-hero-bg .container, .page-hero.de-hero-bg .container, .page-hero.th-hero-bg .container, .page-hero.dk-hero-bg .container, .page-hero.fr-hero-bg .container, .page-hero.ie-hero-bg .container, .page-hero.nl-hero-bg .container, .page-hero.pt-hero-bg .container, .page-hero.se-hero-bg .container, .page-hero.uk-hero-bg .container, .article-hero.pt-hero-bg .container { position: relative !important; top: auto !important; left: auto !important; transform: none !important; z-index: 3 !important; max-width: 100% !important; padding: 16px 20px 18px !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 8px !important; margin: 0 !important; } .page-hero.au-hero-bg h1, .page-hero.at-hero-bg h1, .page-hero.be-hero-bg h1, .page-hero.de-hero-bg h1, .page-hero.th-hero-bg h1, .page-hero.dk-hero-bg h1, .page-hero.fr-hero-bg h1, .page-hero.ie-hero-bg h1, .page-hero.nl-hero-bg h1, .page-hero.pt-hero-bg h1, .page-hero.se-hero-bg h1, .page-hero.uk-hero-bg h1, .article-hero.pt-hero-bg h1 { font-size: 1.4rem !important; line-height: 1.15 !important; margin: 0 !important; } .page-hero.au-hero-bg .lead, .page-hero.at-hero-bg .lead, .page-hero.be-hero-bg .lead, .page-hero.de-hero-bg .lead, .page-hero.th-hero-bg .lead, .page-hero.dk-hero-bg .lead, .page-hero.fr-hero-bg .lead, .page-hero.ie-hero-bg .lead, .page-hero.nl-hero-bg .lead, .page-hero.pt-hero-bg .lead, .page-hero.se-hero-bg .lead, .page-hero.uk-hero-bg .lead, .article-hero.pt-hero-bg .lead { font-size: 0.82rem !important; color: #D1D5DB !important; margin: 0 !important; line-height: 1.4 !important; } } /* ---------- Very narrow screens: stack hero CTAs & tighter H1 ---------- */ @media (max-width: 480px) { .sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row { flex-direction: column !important; width: 100%; } .sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row .btn { width: 100% !important; flex: none !important; max-width: 100%; } .sc-hero-pane.sc-hero-img-pane .sc-hero-h1 { font-size: 1.45rem !important; } .sc-hero-pane.sc-hero-img-pane .sc-hero-lede { font-size: 0.85rem !important; } .page-hero.au-hero-bg h1, .page-hero.at-hero-bg h1, .page-hero.be-hero-bg h1, .page-hero.de-hero-bg h1, .page-hero.th-hero-bg h1, .page-hero.dk-hero-bg h1, .page-hero.fr-hero-bg h1, .page-hero.ie-hero-bg h1, .page-hero.nl-hero-bg h1, .page-hero.pt-hero-bg h1, .page-hero.se-hero-bg h1, .page-hero.uk-hero-bg h1, .article-hero.pt-hero-bg h1 { font-size: 1.35rem !important; } .page-hero.au-hero-bg .lead, .page-hero.at-hero-bg .lead, .page-hero.be-hero-bg .lead, .page-hero.de-hero-bg .lead, .page-hero.th-hero-bg .lead, .page-hero.dk-hero-bg .lead, .page-hero.fr-hero-bg .lead, .page-hero.ie-hero-bg .lead, .page-hero.nl-hero-bg .lead, .page-hero.pt-hero-bg .lead, .page-hero.se-hero-bg .lead, .page-hero.uk-hero-bg .lead, .article-hero.pt-hero-bg .lead { font-size: 0.82rem !important; } } /* ---------- MARKETS DROPDOWN: dark background + bright text for readability ---------- */ .nav .dropdown-menu, .nav .dropdown-submenu, .nav .has-dropdown .dropdown-menu, .nav .has-submenu .dropdown-submenu { background: #171D23 !important; border: 1px solid #2D3540 !important; box-shadow: 0 12px 32px rgba(0,0,0,.55) !important; } .nav .dropdown-menu > a, .nav .dropdown-menu .submenu-parent, .nav .dropdown-submenu a { color: #E5E7EB !important; font-weight: 600; } .nav .dropdown-menu > a:hover, .nav .dropdown-menu .submenu-parent:hover, .nav .dropdown-submenu a:hover { background: #242B32 !important; color: #F5B82E !important; } .nav .dropdown-menu .submenu-caret { color: #2D7FFF !important; opacity: 0.8; } .nav .dropdown-menu > a:hover .submenu-caret, .nav .dropdown-menu .submenu-parent:hover .submenu-caret { color: #F5B82E !important; opacity: 1; } /* Mobile dropdown: keep dark theme (was overriding to bg-alt) */ @media (max-width: 960px) { .nav .dropdown-menu { background: #171D23 !important; border: 1px solid #2D3540 !important; } .nav .dropdown-submenu { background: #1F262E !important; border: 1px solid #2D3540 !important; } .nav .dropdown-menu > a, .nav .dropdown-menu .submenu-parent, .nav .dropdown-submenu a { color: #E5E7EB !important; } } /* ---------- MOBILE BURGER MENU: dark background + bright readable text ---------- */ @media (max-width: 900px) { .nav { background: #0F1419 !important; border-top: 1px solid #242B32 !important; box-shadow: 0 12px 32px rgba(0,0,0,.55) !important; } .nav a, .nav .dropdown-trigger, .nav button { color: #E5E7EB !important; font-weight: 700; } .nav > a { border-bottom: 1px solid #1F262E; } .nav a:hover, .nav a:active, .nav .dropdown-trigger:hover, .nav .dropdown-trigger:active { color: #F5B82E !important; background: #1B2229 !important; } .nav .has-dropdown.open > .dropdown-trigger { color: #F5B82E !important; background: #1B2229 !important; } .nav .dropdown-menu { background: #1B2229 !important; border: 1px solid #242B32 !important; } .nav .dropdown-submenu { background: #2d2e33 !important; border: 1px solid #3a3a3a !important; } .nav .dropdown-menu > a, .nav .dropdown-menu .submenu-parent, .nav .dropdown-submenu a { color: #E5E7EB !important; font-weight: 600; } .nav .dropdown-menu > a:hover, .nav .dropdown-menu .submenu-parent:hover, .nav .dropdown-submenu a:hover { background: #242B32 !important; color: #F5B82E !important; } .nav .submenu-parent.open, .nav .has-submenu.open > .submenu-parent { color: #F5B82E !important; background: #242B32 !important; } .nav .submenu-caret { color: #2D7FFF !important; opacity: 0.85; } .menu-toggle { color: #F5B82E !important; } } /* ---------- DE market hero background ---------- */ .page-hero.de-hero-bg { position: relative !important; padding: 0 !important; background: #070A0D !important; overflow: hidden !important; min-height: 0 !important; display: block !important; } .page-hero.de-hero-bg .de-hero-img { display: block; width: 100%; height: auto; object-fit: cover; object-position: center; } .page-hero.de-hero-bg .container { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 3; max-width: 540px; padding: 0; } .page-hero.de-hero-bg .breadcrumbs, .page-hero.de-hero-bg h1, .page-hero.de-hero-bg .lead { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); } .page-hero.de-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; } .page-hero.de-hero-bg .lead { font-size: 0.92rem !important; color: #E5E7EB !important; } .page-hero.de-hero-bg .blob { display: none !important; } @media (max-width: 1100px) { .page-hero.de-hero-bg .container { max-width: 400px; left: 24px; } .page-hero.de-hero-bg h1 { font-size: 1.55rem !important; } .page-hero.de-hero-bg .lead { font-size: 0.82rem !important; } } /* ---------- AT market hero background ---------- */ .page-hero.at-hero-bg { position: relative !important; padding: 0 !important; background: #070A0D !important; overflow: hidden !important; min-height: 0 !important; display: block !important; } .page-hero.at-hero-bg .at-hero-img { display: block; width: 100%; height: auto; object-fit: cover; object-position: center; } .page-hero.at-hero-bg .container { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); z-index: 3; max-width: 540px; padding: 0; } .page-hero.at-hero-bg .breadcrumbs, .page-hero.at-hero-bg h1, .page-hero.at-hero-bg .lead { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.6); } .page-hero.at-hero-bg h1 { font-size: 1.9rem !important; line-height: 1.1 !important; } .page-hero.at-hero-bg .lead { font-size: 0.92rem !important; color: #E5E7EB !important; } .page-hero.at-hero-bg .blob { display: none !important; } @media (max-width: 1100px) { .page-hero.at-hero-bg .container { max-width: 400px; left: 24px; } .page-hero.at-hero-bg h1 { font-size: 1.55rem !important; } .page-hero.at-hero-bg .lead { font-size: 0.82rem !important; } } /* ---------- DE/AT casino-card: make .btn-secondary green like .btn-primary (consistent CTA) ---------- */ .casino-card .btn-secondary, .casino-card a.btn-secondary, .casino-card .btn-block, article.casino-card .btn, article.casino-card a.btn { background: linear-gradient(135deg, #10B981 0%, #0F9E6A 100%) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(16, 185, 129, .40) !important; } .casino-card .btn-secondary:hover, .casino-card a.btn-secondary:hover, article.casino-card .btn:hover { background: linear-gradient(135deg, #0F9E6A 0%, #0D865A 100%) !important; box-shadow: 0 6px 18px rgba(16, 185, 129, .50) !important; color: #fff !important; } /* top-pick badge positioning fix (zockercheck layout) */ .casino-card.top-pick .top-pick-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #10B981; color: #fff; font-weight: 700; padding: 4px 12px; border-radius: 999px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; z-index: 10; white-space: nowrap; box-shadow: 0 2px 8px rgba(16, 185, 129, .35); } /* ---------- DE/AT pages: bigger casino-thumb to properly show logo images ---------- */ body.lesson-layout .casino-card .casino-thumb { height: auto !important; min-height: 108px !important; padding: 10px 14px !important; background: transparent !important; min-width: 160px !important; } body.lesson-layout .casino-card .casino-thumb img { max-height: 108px !important; max-width: 180px !important; width: auto !important; height: auto !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; border-radius: 8px !important; } body.lesson-layout .casino-card .casino-thumb.th-mino img, body.lesson-layout .casino-card .casino-thumb.has-new img { max-height: 120px !important; max-width: 200px !important; border-radius: 12px !important; } body.lesson-layout .casino-card .casino-thumb .new-flag { position: absolute; top: -8px; right: -8px; background: #FF8C00; color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; z-index: 5; box-shadow: 0 2px 6px rgba(0,0,0,.3); } body.lesson-layout .casino-card .casino-thumb.has-new { position: relative; overflow: visible !important; } /* ---------- CTA buttons: GREEN for both btn-primary and btn-secondary + .btn with maximum specificity ---------- */ body.lesson-layout .casino-card .btn, body.lesson-layout .casino-card a.btn, body.lesson-layout .casino-card .btn-primary, body.lesson-layout .casino-card a.btn-primary, body.lesson-layout .casino-card .btn-secondary, body.lesson-layout .casino-card a.btn-secondary, body.lesson-layout .casino-card .btn-block, body.lesson-layout .casino-card a.btn-block, body.lesson-layout .casino-list .casino-card .btn, body.lesson-layout .casino-list .casino-card a.btn, body.lesson-layout .casino-list .casino-card .btn-primary, body.lesson-layout .casino-list .casino-card .btn-secondary { background: linear-gradient(135deg, #10B981 0%, #0F9E6A 100%) !important; color: #fff !important; border: none !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(16, 185, 129, .40) !important; text-decoration: none !important; } body.lesson-layout .casino-card .btn:hover, body.lesson-layout .casino-card a.btn:hover, body.lesson-layout .casino-card .btn-primary:hover, body.lesson-layout .casino-card a.btn-primary:hover, body.lesson-layout .casino-card .btn-secondary:hover, body.lesson-layout .casino-card a.btn-secondary:hover { background: linear-gradient(135deg, #0F9E6A 0%, #0D865A 100%) !important; box-shadow: 0 6px 18px rgba(16, 185, 129, .50) !important; color: #fff !important; transform: translateY(-1px); } /* Remove the "→" arrow that zockercheck's .btn-secondary::after adds */ body.lesson-layout .casino-card .btn-secondary::after { content: "" !important; } /* ---------- DE/AT pages: expand casino-card layout so logo column doesn't bleed into info ---------- */ body.lesson-layout .casino-list .casino-card { grid-template-columns: 60px 200px minmax(0, 1fr) 240px 220px !important; gap: 24px !important; padding: 20px 24px !important; background: #0F1419 !important; border: 1px solid #2D3540 !important; } body.lesson-layout .casino-list .casino-card:hover { border-color: #10B981 !important; } body.lesson-layout .casino-card .casino-thumb { height: auto !important; min-height: 108px !important; max-height: 140px !important; padding: 8px !important; background: transparent !important; min-width: 0 !important; width: 200px !important; max-width: 200px !important; overflow: visible !important; } body.lesson-layout .casino-card .casino-thumb img { max-height: 120px !important; max-width: 180px !important; width: auto !important; height: auto !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; border-radius: 8px !important; } /* Hide the "NEU" / "Neu" badge on Mino Casino thumb */ body.lesson-layout .casino-card .casino-thumb.has-new .new-flag, body.lesson-layout .casino-card .casino-thumb .new-flag { display: none !important; } /* Ensure casino-info column (name, rating, features) is fully visible */ body.lesson-layout .casino-card .casino-info { min-width: 0 !important; overflow: visible !important; padding-left: 0 !important; } body.lesson-layout .casino-card .casino-info h3 { color: #fff !important; font-size: 1.15rem !important; margin: 0 0 6px !important; } body.lesson-layout .casino-card .casino-features { list-style: none !important; padding: 0 !important; margin: 8px 0 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } body.lesson-layout .casino-card .casino-features li { color: #E5E7EB !important; font-size: 14px !important; padding-left: 20px !important; position: relative !important; } body.lesson-layout .casino-card .casino-features li::before { content: "✓" !important; color: #10B981 !important; font-weight: 700 !important; position: absolute !important; left: 0 !important; top: 0 !important; } /* Bonus column styling — match AU style: subtle bg, no heavy border */ body.lesson-layout .casino-card .casino-bonus { background: transparent !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 12px !important; padding: 18px 16px !important; text-align: center !important; color: #E5E7EB !important; } body.lesson-layout .casino-card .casino-bonus .bonus-label { display: block !important; color: #2D7FFF !important; font-weight: 700 !important; font-size: 11.5px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin-bottom: 6px !important; } body.lesson-layout .casino-card .casino-bonus .bonus-amount { display: block !important; color: #fff !important; font-weight: 800 !important; font-size: 15.5px !important; line-height: 1.3 !important; margin-bottom: 8px !important; } body.lesson-layout .casino-card .casino-bonus .bonus-terms { display: block !important; color: #9CA3AF !important; font-size: 11.5px !important; } body.lesson-layout .casino-card .casino-bonus .bonus-terms a { color: #2D7FFF !important; text-decoration: none !important; } /* Rank badge styling for dark theme */ body.lesson-layout .casino-list .rank-badge { background: #2D7FFF !important; color: #fff !important; } /* Mobile layout adjustments */ @media (max-width: 900px) { body.lesson-layout .casino-list .casino-card { grid-template-columns: 44px 1fr !important; grid-template-rows: auto auto auto auto !important; gap: 12px 14px !important; padding: 16px !important; } body.lesson-layout .casino-card .casino-thumb { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; padding: 10px !important; } body.lesson-layout .casino-card .casino-thumb img { max-height: 90px !important; max-width: 160px !important; } body.lesson-layout .casino-card .casino-info, body.lesson-layout .casino-card .casino-bonus, body.lesson-layout .casino-card .casino-cta { grid-column: 1 / -1 !important; } } /* ---------- Faders sticky promo bar (casino-card style) ---------- */ .faders-promo-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #0F1419; border-top: 1px solid #2D3540; box-shadow: 0 -8px 24px rgba(0,0,0,.55); z-index: 998; display: grid; grid-template-columns: auto 100px minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 12px 20px; transform: translateY(100%); transition: transform .35s ease; } .faders-promo-bar.is-open { transform: translateY(0); } .faders-promo-bar__stars { color: #F5B82E; font-size: 13px; letter-spacing: 2px; } .faders-promo-bar__logo { width: 100px; height: 56px; display: flex; align-items: center; justify-content: center; padding: 4px; } .faders-promo-bar__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .faders-promo-bar__copy { min-width: 0; color: #fff; display: flex; flex-direction: column; gap: 2px; } .faders-promo-bar__kicker { color: #2D7FFF; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .faders-promo-bar__name { color: #fff; font-weight: 800; font-size: 16px; } .faders-promo-bar__terms { color: #9CA3AF; font-size: 12.5px; line-height: 1.3; } .faders-promo-bar__cta { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #10B981 0%, #0F9E6A 100%); color: #fff; font-weight: 800; font-size: 13.5px; padding: 11px 22px; border-radius: 999px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: 0 4px 12px rgba(16, 185, 129, .4); transition: transform .15s ease, box-shadow .15s ease; white-space: nowrap; } .faders-promo-bar__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 185, 129, .55); color: #fff; } .faders-promo-bar__dismiss { background: transparent; border: 0; color: rgba(255,255,255,.55); font-size: 22px; line-height: 1; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; } .faders-promo-bar__dismiss:hover { color: #fff; background: rgba(255,255,255,.08); } @media (max-width: 720px) { .faders-promo-bar { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px 10px 12px; } .faders-promo-bar__stars { display: none; } .faders-promo-bar__logo { width: 56px; height: 44px; padding: 2px; } .faders-promo-bar__name { font-size: 14px; } .faders-promo-bar__terms { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .faders-promo-bar__kicker { font-size: 10px; } .faders-promo-bar__cta { padding: 9px 14px; font-size: 12px; } .faders-promo-bar__dismiss { position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; font-size: 16px; } } /* ---------- Faders exit-intent modal (casino-card bonus box style) ---------- */ .faders-exit { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 999; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); } .faders-exit.is-open { display: flex; animation: faders-exit-fade .25s ease; } @keyframes faders-exit-fade { from { opacity: 0; } to { opacity: 1; } } .faders-exit__card { position: relative; background: #0F1419; border: 1px solid #2D3540; border-radius: 12px; max-width: 460px; width: 100%; padding: 32px 26px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.6); text-align: center; } .faders-exit__suits { display: none; } .faders-exit__close { position: absolute; top: 10px; right: 10px; background: transparent; border: 0; color: rgba(255,255,255,.7); font-size: 26px; line-height: 1; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .faders-exit__close:hover { color: #fff; background: rgba(255,255,255,.08); } .faders-exit__head { color: #fff; font-size: 1.4rem; font-weight: 900; margin: 0 0 6px; line-height: 1.15; } .faders-exit__sub { color: #9CA3AF; font-size: 0.9rem; font-weight: 500; margin: 0 0 18px; line-height: 1.4; } .faders-exit__bonus { background: #1B2229; border: 1px solid #2D3540; border-radius: 10px; padding: 16px 12px; margin-bottom: 14px; } .faders-exit__bonus-label { display: block; color: #2D7FFF; font-weight: 800; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; } .faders-exit__bonus-pct { color: #10B981; font-size: 1.7rem; font-weight: 900; line-height: 1; margin-bottom: 4px; letter-spacing: 0.02em; } .faders-exit__bonus-amt { color: #fff; font-size: 1.05rem; font-weight: 700; } .faders-exit__note { color: #9CA3AF; font-size: 12.5px; margin: 0 0 18px; line-height: 1.4; } .faders-exit__cta { display: inline-block; background: linear-gradient(135deg, #10B981 0%, #0F9E6A 100%); color: #fff !important; font-weight: 800; font-size: 15px; padding: 13px 30px; border-radius: 999px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: 0 6px 18px rgba(16, 185, 129,.45); margin-bottom: 10px; transition: transform .15s ease; } .faders-exit__cta:hover { transform: translateY(-1px); color: #fff !important; } .faders-exit__skip { display: block; background: transparent; border: 0; color: rgba(255,255,255,.55); font-size: 12.5px; text-decoration: underline; cursor: pointer; margin: 0 auto; padding: 4px; } .faders-exit__skip:hover { color: #fff; } /* ---------- AT/DE market cards: match AU visual style ---------- */ /* Keep rating as inline flex so verdict pill sits next to it */ body.lesson-layout .casino-card .casino-info .rating { background: transparent !important; color: #2D7FFF !important; padding: 0 !important; border-radius: 0 !important; font-weight: 800 !important; font-size: 15px !important; margin: 0 !important; display: inline-block !important; vertical-align: middle !important; } /* Rating "★" prefix shown by zockercheck markup — keep natural inline flow */ body.lesson-layout .casino-card .casino-info .rating::before { content: ""; } /* oc-score-desc verdict pill — matches AU green outline pill */ body.lesson-layout .casino-card .casino-info .oc-score-desc { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: transparent !important; color: #10B981 !important; border: 1px solid #10B981 !important; padding: 3px 12px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; margin-left: 8px !important; vertical-align: middle !important; } body.lesson-layout .casino-card .casino-info .oc-score-desc::before { content: "●" !important; font-size: 7px !important; line-height: 1 !important; color: #10B981 !important; } /* Hide the Umsatz/AGB/Min line to match AU's simpler bonus display */ body.lesson-layout .casino-card .casino-bonus .bonus-terms, body.lesson-layout .casino-card .casino-bonus span.bonus-terms, body.lesson-layout .casino-list .casino-card .casino-bonus .bonus-terms { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } /* Bonus column cleanup for AU-style look */ body.lesson-layout .casino-card .casino-bonus .bonus-label { color: #2D7FFF !important; font-weight: 800 !important; font-size: 11.5px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin-bottom: 8px !important; display: block !important; } body.lesson-layout .casino-card .casino-bonus .bonus-amount { color: #fff !important; font-weight: 800 !important; font-size: 15.5px !important; line-height: 1.3 !important; display: block !important; } /* oc-claimed below CTA button — AU-style dark pill with fire emoji */ body.lesson-layout .casino-card .casino-cta .oc-claimed { display: inline-flex !important; align-items: center !important; background: #0F1419 !important; color: #F5B82E !important; border: 1px solid #2D3540 !important; padding: 5px 12px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; margin: 8px auto 0 !important; width: fit-content !important; white-space: nowrap !important; } /* ---------- DE/AT mobile: smaller logos + tighter card so CTA shows up higher ---------- */ @media (max-width: 900px) { body.lesson-layout .casino-list .casino-card { padding: 14px 14px 16px !important; gap: 8px 12px !important; } body.lesson-layout .casino-card .casino-thumb, body.lesson-layout .casino-card .casino-thumb.has-new, body.lesson-layout .casino-card .casino-thumb.th-mino { padding: 2px 10px !important; min-height: 60px !important; max-height: 70px !important; margin-bottom: 0 !important; } body.lesson-layout .casino-card .casino-thumb img, body.lesson-layout .casino-card .casino-thumb.has-new img, body.lesson-layout .casino-card .casino-thumb.th-mino img { max-height: 60px !important; max-width: 130px !important; width: auto !important; height: auto !important; border-radius: 6px !important; } body.lesson-layout .casino-card .casino-info h3 { font-size: 1.05rem !important; margin: 2px 0 4px !important; text-align: center !important; } body.lesson-layout .casino-card .casino-info .rating { font-size: 14px !important; } body.lesson-layout .casino-card .casino-info .oc-score-desc { font-size: 10.5px !important; padding: 2px 8px !important; margin-left: 6px !important; } body.lesson-layout .casino-card .casino-bonus { padding: 10px 12px !important; margin: 0 !important; } body.lesson-layout .casino-card .casino-bonus .bonus-label { margin-bottom: 4px !important; font-size: 10.5px !important; } body.lesson-layout .casino-card .casino-bonus .bonus-amount { font-size: 14px !important; } body.lesson-layout .casino-card .casino-cta { margin: 0 !important; padding: 0 !important; } body.lesson-layout .casino-card .casino-cta .btn, body.lesson-layout .casino-card .casino-cta .btn-primary { padding: 11px 16px !important; font-size: 13.5px !important; } body.lesson-layout .casino-card .casino-cta .oc-claimed { margin-top: 6px !important; padding: 3px 10px !important; font-size: 10.5px !important; } /* Casino features: smaller text and tighter spacing */ body.lesson-layout .casino-card .casino-features { margin: 4px 0 0 !important; gap: 2px !important; } body.lesson-layout .casino-card .casino-features li { font-size: 12.5px !important; padding-left: 18px !important; line-height: 1.3 !important; } /* Grid rows: logo + info + bonus + cta tight */ body.lesson-layout .casino-list .casino-card { grid-template-columns: 36px 1fr !important; } body.lesson-layout .casino-list .casino-card .rank-badge { width: 32px !important; height: 32px !important; font-size: 15px !important; } } /* ---------- SE feat-card: TOPP 1 badge (replaces the fire emoji) ---------- */ .feat-card .feat-top-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #10B981 0%, #0F9E6A 100%); color: #fff; font-family: var(--font-head, Montserrat, sans-serif); font-weight: 900; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; box-shadow: 0 4px 12px rgba(16, 185, 129, .45), 0 0 0 2px #0F1419; z-index: 5; white-space: nowrap; line-height: 1; } .feat-card.is-hot { position: relative; overflow: visible !important; } @media (max-width: 720px) { .feat-card .feat-top-badge { font-size: 11px; padding: 5px 14px; top: -10px; } } /* ---------- Content page tables (disclosure, responsible gambling, etc.): readable on dark theme ---------- */ .content table, main table { width: 100% !important; border-collapse: collapse !important; margin: 18px 0 !important; background: #0F1419 !important; border: 1px solid #2D3540 !important; border-radius: 10px !important; overflow: hidden !important; color: #E5E7EB !important; } .content table thead, main table thead { background: #1B2229 !important; } .content table thead tr, main table thead tr { background: #1B2229 !important; } .content table thead th, main table thead th { background: #1B2229 !important; color: #F5B82E !important; font-weight: 800 !important; text-align: left !important; padding: 14px 16px !important; border-bottom: 2px solid #2D3540 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; font-size: 12.5px !important; } .content table tbody tr, main table tbody tr { background: #0F1419 !important; border-bottom: 1px solid #242B32 !important; } .content table tbody tr:nth-child(even), main table tbody tr:nth-child(even) { background: #1B2229 !important; } .content table tbody td, main table tbody td { color: #E5E7EB !important; padding: 14px 16px !important; border-bottom: 1px solid #242B32 !important; vertical-align: top !important; font-size: 14px !important; line-height: 1.5 !important; } .content table tbody td strong, main table tbody td strong { color: #fff !important; font-weight: 800 !important; } .content table tbody td a, main table tbody td a { color: #10B981 !important; text-decoration: underline !important; } .content table tbody tr:last-child td, main table tbody tr:last-child td { border-bottom: 0 !important; } /* ---------- Red text → green (brand button color) everywhere ---------- */ a:hover, .nav a:hover, .nav a.active, .nav .dropdown-trigger:hover, .nav .dropdown-menu > a:hover, .nav .dropdown-menu .submenu-parent:hover, .nav .dropdown-submenu a:hover, .qa-tile:hover, .section-head .see-all, .see-all, .section-head .see-all:hover, .see-all:hover, .casino-bonus .bonus-label, .review-link:hover, .market-tile .m-arrow, .article-card .ac-tag, .article-card .ac-read, .bonus-card .b-link, .team-card .tc-role, .blog-card .tag, .toc li::before, .toc a:hover, .pros-cons .cons h4, .pros-cons .cons li::before, .country-rows .c-arrow, .pu-promo-strip .promo-howto, .sp-figure .sp-num em, .clamp-toggle, .ms-kicker, .blog-card .tag, .ac-tag, .article-card .ac-tag { color: #10B981 !important; } .nav a.active { border-bottom-color: #10B981 !important; } /* Market subnav active tab: green instead of red */ .market-subnav a.active { color: #10B981 !important; } .market-subnav a.active::after { background: #10B981 !important; } /* Footer top-offer bar: green background (brand button color) */ .oc-top-offer { background: linear-gradient(135deg, #10B981 0%, #0F9E6A 55%, #0D865A 100%) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 8px 28px rgba(16, 185, 129,.35), 0 2px 6px rgba(0,0,0,.25) !important; } .oc-to-badge { background: #0A2A1D !important; color: #F5B82E !important; } .oc-to-logo { background: #0A2A1D !important; } .oc-to-cta { background: #0A2A1D !important; color: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.35) !important; } .oc-to-cta:hover { background: #000 !important; color: #F5B82E !important; } /* DE/AT: allow oc-claimed pill to wrap on 2 lines so long German text ("Mal heute beansprucht") isn't clipped */ body.lesson-layout .casino-card .casino-cta .oc-claimed { white-space: normal !important; max-width: 100% !important; text-align: center !important; padding: 5px 10px !important; font-size: 10.5px !important; letter-spacing: 0.03em !important; line-height: 1.3 !important; } /* DE/AT: Mino Casino top-pick card — always green border (same as hover) */ body.lesson-layout .casino-list .casino-card.top-pick { border: 2px solid #10B981 !important; box-shadow: 0 0 0 4px rgba(16, 185, 129, .08), 0 8px 24px -8px rgba(16, 185, 129, .35) !important; } body.lesson-layout .casino-list .casino-card.top-pick:hover { border-color: #10B981 !important; box-shadow: 0 0 0 4px rgba(16, 185, 129, .14), 0 10px 28px -8px rgba(16, 185, 129, .5) !important; } /* SE market: .feat-card.is-hot (Mino/top-pick on feat-card markets) — green border instead of red */ .feat-card.is-hot { border: 2px solid #10B981 !important; box-shadow: 0 0 0 5px rgba(16, 185, 129, .06), 0 12px 30px -16px rgba(16, 185, 129, .28) !important; } .feat-card.is-hot:hover { border-color: #10B981 !important; box-shadow: 0 0 0 5px rgba(16, 185, 129, .14), 0 14px 32px -12px rgba(16, 185, 129, .5) !important; } /* DE/AT: Wild Tokyo logo gets a white outline so the dark lettering shows on dark card bg */ body.lesson-layout .casino-card .casino-thumb.th-wildtokyo img, body.lesson-layout .casino-card .casino-thumb img[alt="Wild Tokyo"], body.lesson-layout .casino-card .casino-thumb img[src*="wild-tokyo"] { filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(1px -1px 0 #fff) drop-shadow(-1px 1px 0 #fff); } /* BE: Winolot logo — add white outline so the dark "Win" text shows on dark card bg */ body.lesson-layout .casino-card .casino-thumb img[src*="winolot"], body.lesson-layout .casino-card .casino-thumb img[alt="Winolot"] { filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(1px -1px 0 #fff) drop-shadow(-1px 1px 0 #fff); } /* BE: NIEUW badge in casino list — green (brand button color) instead of red */ .casino-thumb .oc-new-badge, .casino-card .oc-new-badge, body .oc-new-badge { background: linear-gradient(135deg, #10B981 0%, #0F9E6A 100%) !important; color: #ffffff !important; font-size: 10px !important; font-weight: 900 !important; padding: 3px 9px !important; border-radius: 999px !important; letter-spacing: 0.1em !important; text-shadow: 0 1px 2px rgba(0,0,0,.35) !important; box-shadow: 0 2px 6px rgba(16, 185, 129, .5), 0 0 0 1.5px #070A0D !important; top: -14px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; } @media (max-width: 520px) { .casino-thumb .oc-new-badge, .casino-card .oc-new-badge, body .oc-new-badge { font-size: 9px !important; padding: 2px 7px !important; top: -11px !important; } } /* FR market: NorseMania logo — extra-large for better visibility */ body.lesson-layout .casino-card .casino-thumb img[src*="norsemania"], body.lesson-layout .casino-card .casino-thumb img[alt="NorseMania"] { max-width: 290px !important; max-height: 200px !important; width: auto !important; height: auto !important; transform: scale(1.15) !important; transform-origin: center !important; } body.lesson-layout .casino-card .casino-thumb:has(img[src*="norsemania"]), body.lesson-layout .casino-card .casino-thumb:has(img[alt="NorseMania"]) { min-height: 180px !important; padding: 10px 6px !important; } /* FR market: VipLuck logo — gold outline around the letters (drop-shadow stacking) */ body.lesson-layout .casino-card .casino-thumb img[src*="vipluck"], body.lesson-layout .casino-card .casino-thumb img[alt="VipLuck Casino"] { filter: drop-shadow(1px 0 0 #2D7FFF) drop-shadow(-1px 0 0 #2D7FFF) drop-shadow(0 1px 0 #2D7FFF) drop-shadow(0 -1px 0 #2D7FFF) drop-shadow(1px 1px 0 #2D7FFF) drop-shadow(-1px -1px 0 #2D7FFF) drop-shadow(1px -1px 0 #2D7FFF) drop-shadow(-1px 1px 0 #2D7FFF); } /* FR market: NorseMania footer-bar logo — swap to tight-cropped version so letters fill the box */ html[lang^="fr"] .oc-top-offer .oc-to-logo[src*="norsemania"] { content: url("images/norsemania-casino-logo-tight.webp") !important; object-fit: contain !important; padding: 2px !important; } /* FR + BE markets: mobile — NEW/NIEUW/NOUVEAU badge pinned to the TOP-RIGHT corner of the whole casino-card (the article), not the thumb. Thumb and thumb-wrap are forced static so the badge resolves against the card, which is already position:relative. */ @media (max-width: 720px) { html[lang^="fr"] .casino-card, html[lang^="nl-BE"] .casino-card, html[lang^="nl"] .casino-card, html[lang^="fr-BE"] .casino-card { position: relative !important; overflow: visible !important; } html[lang^="fr"] .casino-card .casino-thumb, html[lang^="nl-BE"] .casino-card .casino-thumb, html[lang^="nl"] .casino-card .casino-thumb, html[lang^="fr-BE"] .casino-card .casino-thumb, html[lang^="fr"] .casino-card .thumb-wrap, html[lang^="nl-BE"] .casino-card .thumb-wrap, html[lang^="nl"] .casino-card .thumb-wrap, html[lang^="fr-BE"] .casino-card .thumb-wrap { position: static !important; overflow: visible !important; } html[lang^="fr"] .casino-card .oc-new-badge, html[lang^="nl-BE"] .casino-card .oc-new-badge, html[lang^="nl"] .casino-card .oc-new-badge, html[lang^="fr-BE"] .casino-card .oc-new-badge { position: absolute !important; top: -8px !important; /* iznad gornje ivice kartice */ right: -6px !important; /* malo preko desne ivice */ left: auto !important; bottom: auto !important; transform: none !important; font-size: 9px !important; padding: 2px 7px !important; letter-spacing: 0.08em !important; line-height: 1.1 !important; z-index: 30 !important; /* iznad svega u kartici */ background: linear-gradient(135deg, #10B981 0%, #0F9E6A 100%) !important; color: #ffffff !important; border-radius: 999px !important; font-weight: 900 !important; text-shadow: 0 1px 2px rgba(0,0,0,.35) !important; box-shadow: 0 2px 6px rgba(16, 185, 129, .5), 0 0 0 1.5px #070A0D !important; pointer-events: none !important; } /* Da ništa iznad ne iseca značku */ html[lang^="fr"] .casino-list, html[lang^="nl-BE"] .casino-list, html[lang^="nl"] .casino-list, html[lang^="fr-BE"] .casino-list { overflow: visible !important; } /* Rezervisemo prostor gore-desno u kartici tako da H3 nikad ne dopre do mesta gde značka visi iznad ivice (dodatni gornji padding) */ html[lang^="fr"] .casino-card:has(.oc-new-badge), html[lang^="nl-BE"] .casino-card:has(.oc-new-badge), html[lang^="nl"] .casino-card:has(.oc-new-badge), html[lang^="fr-BE"] .casino-card:has(.oc-new-badge) { padding-top: 28px !important; } } /* All markets: footer top-offer bar — narrower on desktop, less empty space */ @media (min-width: 721px) { .oc-top-offer { max-width: 640px !important; width: auto !important; left: 50% !important; } .oc-top-offer-inner { grid-template-columns: auto 60px minmax(0, auto) auto auto !important; gap: 12px !important; padding: 10px 40px 10px 14px !important; } .oc-to-name { white-space: nowrap !important; -webkit-line-clamp: 1 !important; max-width: 240px !important; overflow: hidden !important; text-overflow: ellipsis !important; } .oc-to-bonus { white-space: nowrap !important; max-width: 240px !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* All markets: lead paragraph with Read more / Collapse toggle. The actual clamp is defined later and is MOBILE-ONLY now (see the "Lead paragraph clamp — MOBILE ONLY" block). */ .lead.lead-clampable { position: relative; margin-bottom: 8px; } .lead-toggle { display: inline-block; margin-top: 6px; background: none; border: none; padding: 0; color: #10B981; font-family: var(--font-head, inherit); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .lead-toggle:hover, .lead-toggle:focus { color: #0F9E6A; outline: none; } /* AT/DE markets only: Mino Casino top-pick card — mobile fix so the UNSER TOP-TIPP badge no longer clips the horns of the Mino logo. Shrinks the badge's frame, slims the card's outer frame, and gives the thumb a little clearance below the badge. Scoped via :has(.casino-thumb.th-mino) so FR/other-market top-pick cards are untouched. */ @media (max-width: 720px) { body.lesson-layout .casino-list .casino-card.top-pick:has(.casino-thumb.th-mino) { padding-top: 30px !important; border-width: 1px !important; box-shadow: 0 0 0 2px rgba(16, 185, 129, .10), 0 6px 18px -8px rgba(16, 185, 129, .35) !important; } body.lesson-layout .casino-list .casino-card.top-pick:has(.casino-thumb.th-mino):hover { box-shadow: 0 0 0 2px rgba(16, 185, 129, .18), 0 8px 22px -8px rgba(16, 185, 129, .5) !important; } body.lesson-layout .casino-list .casino-card.top-pick:has(.casino-thumb.th-mino) .top-pick-badge { top: -11px; padding: 3px 10px; font-size: 10px; letter-spacing: 0.04em; box-shadow: 0 2px 6px rgba(16, 185, 129, .3); } body.lesson-layout .casino-list .casino-card.top-pick .casino-thumb.th-mino { padding-top: 4px !important; } } /* BE/BE-FR: Crusado logo renders smaller than peers because its artwork sits inside extra transparent padding. Scale it up so it reads at the same visual weight as Tower, Atefia, etc. Desktop has more thumb width so it can grow more; on mobile keep it at natural size so it never spills into the rating column and the NIEUW badge stays fully visible above the thumb. */ .casino-list .casino-card .casino-thumb img[src*="crusado-logo"] { transform: scale(1.4); transform-origin: center center; } @media (max-width: 720px) { .casino-list .casino-card .casino-thumb img[src*="crusado-logo"] { transform: none; } } /* ============================================================ Three-in-one UI pass 1) Exit pop-up — brighter text so all copy is legible 2) Remaining red text under the logo → CTA button green 3) Mobile hero — compact so the first CTA lifts higher on screen ============================================================ */ /* ---------- 1) Exit pop-up readability ---------- */ .faders-exit__sub { color: #E5E7EB !important; } .faders-exit__note { color: #E5E7EB !important; } .faders-exit__skip { color: rgba(255,255,255,.85) !important; } .faders-exit__skip:hover { color: #fff !important; } .faders-exit__bonus-label { color: #FFCB47 !important; } .faders-exit__bonus-amt { color: #ffffff !important; } /* ---------- 2) Red text under the logo → CTA green ---------- */ .author-box .author-eyebrow, .related-card .r-tag { color: #10B981 !important; } /* ---------- 3) Mobile hero: trim vertical space so the CTA lifts ---------- */ @media (max-width: 720px) { /* Market/article/page hero: tighten padding, hide redundant chip + inline flag, clamp lead */ .page-hero, .editorial-hero, .article-hero { padding: 8px 18px 12px !important; } .page-hero h1, .editorial-hero h1, .article-hero h1 { font-size: 1rem !important; line-height: 1.2 !important; margin: 2px 0 4px !important; gap: 4px !important; } /* H1 flag + domain are visible on every market, including mobile. (Earlier version hid them here on the assumption the H1 carried an emoji flag + domain in text — that is no longer the case; AT/DE now use the same markup as AU/FR/… and the user asked for both to show.) */ .page-hero h1 .h1-domain, .editorial-hero h1 .h1-domain, .article-hero h1 .h1-domain, .page-hero h1 img.flag-inline, .editorial-hero h1 img.flag-inline, .article-hero h1 img.flag-inline { display: inline !important; vertical-align: baseline !important; } .page-hero h1 img.flag-inline, .editorial-hero h1 img.flag-inline, .article-hero h1 img.flag-inline { display: inline-block !important; width: 18px !important; height: auto !important; margin: 0 2px !important; } .page-hero h1 .h1-domain, .editorial-hero h1 .h1-domain, .article-hero h1 .h1-domain { font-size: .6em !important; padding: 1px 6px !important; white-space: nowrap !important; } .page-hero .lead, .page-hero .lede, .editorial-hero .lead, .editorial-hero .lede, .article-hero .lead, .article-hero .lede { font-size: .80rem !important; line-height: 1.4 !important; margin: 0 !important; } .lead.lead-clampable.is-clamped { -webkit-line-clamp: 2 !important; max-height: 2.8em !important; } .lead-toggle { margin-top: 2px !important; font-size: 12.5px !important; } .page-hero .breadcrumbs, .editorial-hero .breadcrumbs, .article-hero .breadcrumbs, .page-hero .crumbs, .editorial-hero .crumbs { font-size: 10.5px !important; margin-bottom: 0 !important; } .list-heading { margin-top: 14px !important; font-size: 1.15rem !important; } /* Homepage / Bonus Calculator / News sc-hero: tighter copy stack */ .sc-hero-pane.sc-hero-img-pane .sc-hero-copy { padding: 12px 18px 14px !important; gap: 6px !important; } .sc-hero-pane.sc-hero-img-pane .sc-hero-h1 { font-size: 1.25rem !important; line-height: 1.15 !important; } .sc-hero-pane.sc-hero-img-pane .sc-hero-lede { font-size: 0.80rem !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row { margin-top: 2px !important; } .sc-hero-pane.sc-hero-img-pane .sc-hero-cta-row .btn { padding: 10px 14px !important; font-size: 12px !important; } /* News page "article-hero" variant uses the sc-hero pattern after our rewrite: keep breadcrumbs visible but tight */ .sc-hero-pane.sc-hero-img-pane .sc-hero-copy .breadcrumbs { font-size: 10.5px !important; margin-bottom: 0 !important; } } /* Mobile burger menu: market parent links navigate directly to their market page. The horizontal fly-out submenu can't lay out correctly inside the vertical burger nav (its contents push the whole row off-screen), so hide it here. Users reach a market's sub-topics from that market's own page. The caret is hidden too since there is nothing to toggle open any more. */ @media (max-width: 900px) { .nav .dropdown-submenu, .nav .has-submenu.open > .dropdown-submenu { display: none !important; } .nav .has-submenu > .submenu-parent .submenu-caret { display: none !important; } /* Ensure the .has-dropdown menu items stretch to the nav's full width and stack cleanly without horizontal overflow. */ .nav .has-dropdown .dropdown-menu { width: auto !important; min-width: 0 !important; } .nav .has-submenu { width: auto !important; min-width: 0 !important; } .nav .has-submenu > .submenu-parent { width: 100% !important; justify-content: flex-start !important; white-space: normal !important; } } /* ---------- Market page byline (author + last update) ---------- */ .page-byline { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; padding: 8px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; font-size: 13px; color: rgba(255,255,255,0.78); text-align: left; max-width: 820px; } .page-byline .pb-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(245, 184, 46, 0.30); display: block; background: #1B2229; } .page-byline .pb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .page-byline .pb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .page-byline .pb-by { color: #ffffff; font-weight: 600; line-height: 1.3; } .page-byline .pb-by a { color: #F5B82E; border-bottom: 1px solid rgba(245, 184, 46, 0.40); transition: color .15s, border-color .15s; } .page-byline .pb-by a:hover { color: #FFCB47; border-bottom-color: #FFCB47; } .page-byline .pb-role { color: rgba(255,255,255,0.60); font-weight: 500; } .page-byline .pb-updated { font-size: 12px; color: rgba(255,255,255,0.55); } @media (max-width: 720px) { .page-byline { padding: 6px 10px; gap: 8px; font-size: 11.5px; margin-top: 6px; border-radius: 8px; } .page-byline .pb-avatar { width: 30px; height: 30px; } .page-byline .pb-by { font-size: 11.5px; line-height: 1.3; } .page-byline .pb-updated { font-size: 10.5px; } .page-byline .pb-role { display: block; font-size: 10.5px; margin-top: 1px; } } /* About page: when jumped to via anchor (#author-slug), position the card right below the sticky site-header (desktop ~81px, mobile ~69px). Also highlight the targeted card briefly so the eye lands on the right person. */ .author-box[id] { scroll-margin-top: 90px; } @media (max-width: 720px) { .author-box[id] { scroll-margin-top: 78px; } } .author-box[id]:target { box-shadow: 0 0 0 2px #F5B82E, 0 10px 30px -10px rgba(245, 184, 46,0.35); } /* ============================================================ Mobile casino cards: 2-column header row (logo+name LEFT, rating RIGHT) so the CTA button lifts higher on screen. Applies across all markets. Prefixed with `html body` (and both body-variants) to win specificity over the older body.lesson-layout mobile overrides. ============================================================ */ @media (max-width: 720px) { body.lesson-layout .casino-list .casino-card { display: grid !important; grid-template-columns: minmax(135px, 46%) 1fr !important; grid-template-rows: auto auto auto auto auto !important; align-items: center !important; gap: 10px 12px !important; text-align: left !important; padding: 18px 14px 16px !important; position: relative !important; flex-direction: initial !important; } /* Thumb left */ body.lesson-layout .casino-list .casino-card .casino-thumb { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; padding: 8px 10px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; order: 0 !important; } body.lesson-layout .casino-list .casino-card .casino-thumb img { max-height: 70px !important; max-width: 100% !important; width: auto !important; height: auto !important; margin: 0 auto !important; display: block !important; } /* Info right — h3 name + rating stack vertically on the right */ body.lesson-layout .casino-list .casino-card .casino-info { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; text-align: left !important; padding: 0 !important; width: 100% !important; min-width: 0 !important; order: 0 !important; } body.lesson-layout .casino-list .casino-card .casino-info h3 { font-size: 1.05rem !important; line-height: 1.2 !important; text-align: left !important; justify-content: flex-start !important; margin: 0 !important; } body.lesson-layout .casino-list .casino-card .casino-info .rating { align-self: flex-start !important; margin: 0 !important; } body.lesson-layout .casino-list .casino-card .casino-info .oc-score-desc { align-self: flex-start !important; margin: 0 !important; margin-left: 0 !important; } /* Rank badge in top-left corner, absolute */ body.lesson-layout .casino-list .casino-card .rank-badge { position: absolute !important; top: 8px !important; left: 8px !important; width: 28px !important; height: 28px !important; font-size: 12px !important; z-index: 3 !important; } /* Full-width rows */ body.lesson-layout .casino-list .casino-card .casino-bonus { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; margin: 0 !important; text-align: center !important; } body.lesson-layout .casino-list .casino-card .casino-cta { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100% !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; } body.lesson-layout .casino-list .casino-card .casino-features, body.lesson-layout .casino-list .casino-card > .casino-features { grid-column: 1 / -1 !important; grid-row: 4 !important; width: auto !important; text-align: left !important; display: table !important; margin: 0 auto !important; padding: 0 !important; order: 4 !important; } /* Hide features when still inside .casino-info (before JS moves it) */ body.lesson-layout .casino-list .casino-card .casino-info .casino-features { display: none !important; } body.lesson-layout .casino-list .casino-card .casino-cta .oc-claimed { margin-top: 0 !important; } body.lesson-layout .casino-list .casino-card .payment-icons { grid-column: 1 / -1 !important; grid-row: 5 !important; } } /* ============================================================ Mobile casino cards: 2-column header row (logo+name LEFT, rating RIGHT) so the CTA button lifts higher on screen. Applies across all markets. Prefixed with `html body` (and both body-variants) to win specificity over the older body:not(.lesson-layout) mobile overrides. ============================================================ */ @media (max-width: 720px) { body:not(.lesson-layout) .casino-list .casino-card { display: grid !important; grid-template-columns: minmax(135px, 46%) 1fr !important; grid-template-rows: auto auto auto auto auto !important; align-items: center !important; gap: 10px 12px !important; text-align: left !important; padding: 18px 14px 16px !important; position: relative !important; flex-direction: initial !important; } /* Thumb left */ body:not(.lesson-layout) .casino-list .casino-card .casino-thumb { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; padding: 8px 10px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; order: 0 !important; } body:not(.lesson-layout) .casino-list .casino-card .casino-thumb img { max-height: 70px !important; max-width: 100% !important; width: auto !important; height: auto !important; margin: 0 auto !important; display: block !important; } /* Info right — h3 name + rating stack vertically on the right */ body:not(.lesson-layout) .casino-list .casino-card .casino-info { grid-column: 2 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; text-align: left !important; padding: 0 !important; width: 100% !important; min-width: 0 !important; order: 0 !important; } body:not(.lesson-layout) .casino-list .casino-card .casino-info h3 { font-size: 1.05rem !important; line-height: 1.2 !important; text-align: left !important; justify-content: flex-start !important; margin: 0 !important; } body:not(.lesson-layout) .casino-list .casino-card .casino-info .rating { align-self: flex-start !important; margin: 0 !important; } body:not(.lesson-layout) .casino-list .casino-card .casino-info .oc-score-desc { align-self: flex-start !important; margin: 0 !important; margin-left: 0 !important; } /* Rank badge in top-left corner, absolute */ body:not(.lesson-layout) .casino-list .casino-card .rank-badge { position: absolute !important; top: 8px !important; left: 8px !important; width: 28px !important; height: 28px !important; font-size: 12px !important; z-index: 3 !important; } /* Full-width rows */ body:not(.lesson-layout) .casino-list .casino-card .casino-bonus { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; margin: 0 !important; text-align: center !important; } body:not(.lesson-layout) .casino-list .casino-card .casino-cta { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100% !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; } body:not(.lesson-layout) .casino-list .casino-card .casino-features, body:not(.lesson-layout) .casino-list .casino-card > .casino-features { grid-column: 1 / -1 !important; grid-row: 4 !important; width: auto !important; text-align: left !important; display: table !important; margin: 0 auto !important; padding: 0 !important; order: 4 !important; } /* Hide features when still inside .casino-info (before JS moves it) */ body:not(.lesson-layout) .casino-list .casino-card .casino-info .casino-features { display: none !important; } body:not(.lesson-layout) .casino-list .casino-card .casino-cta .oc-claimed { margin-top: 0 !important; } body:not(.lesson-layout) .casino-list .casino-card .payment-icons { grid-column: 1 / -1 !important; grid-row: 5 !important; } } /* ============================================================ AU market only: rating displays as "N/10" (e.g. "10/10", "9.7/10") Target by html[lang] prefix so other markets stay as single number. ============================================================ */ html[lang^="en-AU"] body.lesson-layout .casino-card .casino-info .rating::after { content: "/10"; margin-left: 1px; opacity: 0.85; font-weight: 700; } /* ============================================================ Exit popup (oc-exit-modal): fix subtle text that was invisible on white bg, convert to dark theme to match the rest of the site, and keep CTA readable. ============================================================ */ .oc-exit-modal { background: #0F1419 !important; color: #E5E7EB !important; border: 1px solid rgba(245, 184, 46, 0.25) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.03) !important; } .oc-ex-title { color: #F5B82E !important; } .oc-ex-subtitle { color: #E5E7EB !important; font-weight: 500 !important; } .oc-ex-brand-note { color: #CBD5DD !important; font-style: italic !important; } .oc-ex-dismiss { color: rgba(255,255,255,0.75) !important; } .oc-ex-dismiss:hover { color: #fff !important; } .oc-ex-close { background: #1B2229 !important; color: #F5B82E !important; border: 1px solid rgba(245, 184, 46, 0.4) !important; } .oc-ex-close:hover { color: #fff !important; background: #242B32 !important; border-color: #fff !important; } .oc-ex-bonus { background: linear-gradient(135deg, #1B2229 0%, #1F262E 100%) !important; border: 1px solid rgba(16, 185, 129, 0.35) !important; } .oc-ex-bonus-amount { color: #10B981 !important; } .oc-ex-cta { background: linear-gradient(135deg, #10B981 0%, #0F9E6A 100%) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45) !important; } .oc-ex-cta:hover { background: linear-gradient(135deg, #0F9E6A 0%, #0D865A 100%) !important; color: #fff !important; } /* ============================================================ Payment icons: unified light background pill for every logo. Reason: a few payment PNGs (Jetonbank, etc.) ship as dark-text on transparent backgrounds, so they vanish on the dark page. A consistent white pill behind each icon makes every method clearly visible, and matches the pills already baked into the Visa/Mastercard/etc. SVGs. ============================================================ */ .casino-card .payment-icons { gap: 6px !important; max-width: 100% !important; row-gap: 8px !important; } .casino-card .payment-icons img { background: #ffffff !important; padding: 3px 6px !important; border-radius: 5px !important; height: 22px !important; max-width: 48px !important; min-width: 34px !important; object-fit: contain !important; opacity: 1 !important; filter: none !important; box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important; } .casino-card .payment-icons img:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(245, 184, 46, 0.35) !important; } @media (max-width: 720px) { .casino-card .payment-icons { gap: 5px !important; row-gap: 6px !important; justify-content: center !important; } .casino-card .payment-icons img { height: 20px !important; padding: 2px 5px !important; min-width: 32px !important; max-width: 44px !important; } } /* ============================================================ Round 2 fixes ============================================================ */ /* ---------- 3) FR market top-pick card: push "Notre top choix" badge to the top-right so it does not overlap with the "NOUVEAU" new-flag or the rank badge on the logo. ---------- */ html[lang^="fr"] .casino-card.top-pick .top-pick-badge, html[lang^="fr-BE"] .casino-card.top-pick .top-pick-badge, body.lesson-layout html[lang^="fr"] .casino-list .casino-card.top-pick .top-pick-badge { left: auto !important; right: 12px !important; transform: none !important; top: -10px !important; } @media (max-width: 720px) { html[lang^="fr"] .casino-card.top-pick .top-pick-badge { right: 10px !important; top: -11px !important; } } /* ---------- 4) FAQ: opened question text in CTA green (was red) ---------- */ .faq-item[open] { border-color: #10B981 !important; box-shadow: 0 8px 24px -12px rgba(16, 185, 129, 0.25) !important; } .faq-item[open] summary { color: #10B981 !important; } .faq-item[open] summary::after { border-color: #10B981 !important; color: #10B981 !important; background-color: rgba(16, 185, 129, 0.06) !important; } /* ---------- 5) SE market feat-card: on mobile, match the casino-list layout — logo LEFT, name + features RIGHT, CTA full-width below. ---------- */ @media (max-width: 720px) { body .featured-cards { display: block !important; gap: 14px !important; } body .feat-card { display: grid !important; grid-template-columns: minmax(130px, 42%) 1fr !important; grid-template-rows: auto auto auto !important; align-items: center !important; gap: 10px 14px !important; padding: 20px 14px 16px !important; margin-bottom: 14px !important; text-align: left !important; flex-direction: initial !important; overflow: visible !important; position: relative !important; } body .feat-card .feat-top-badge { position: absolute !important; top: -11px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 3 !important; } body .feat-card .feat-thumb { grid-column: 1 !important; grid-row: 1 !important; height: auto !important; min-height: 90px !important; max-height: 110px !important; padding: 8px !important; margin: 0 !important; border-radius: 10px !important; } body .feat-card .feat-thumb img { max-height: 80px !important; max-width: 100% !important; } /* Right column (row 1): the 3 features with icon pills */ body .feat-card .feat-list { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } /* H3 moves to its own full-width row below the thumb + features */ body .feat-card h3 { grid-column: 1 / -1 !important; grid-row: 2 !important; text-align: left !important; font-size: 1rem !important; line-height: 1.25 !important; margin: 0 !important; color: #F5B82E !important; } body .feat-card .feat-list li { font-size: 12.5px !important; padding: 4px 0 !important; } body .feat-card > .btn, body .feat-card > a.btn, body .feat-card .btn-primary, body .feat-card .btn-block { grid-column: 1 / -1 !important; grid-row: 3 !important; margin-top: 0 !important; } } /* ---------- 6) News "article-card": card was WHITE with LIGHT text --- invisible title and lede. Switch to dark theme to match the site. --- */ .article-card { background: #171D23 !important; color: #E5E7EB !important; border: 1px solid #242B32 !important; } .article-card:hover { border-color: #F5B82E !important; box-shadow: 0 18px 40px -20px rgba(245, 184, 46, 0.35) !important; color: #E5E7EB !important; } .article-card .ac-image { background: #141414 !important; } .article-card .ac-image img { background: transparent !important; } .article-card h3 { color: #ffffff !important; font-weight: 700 !important; } .article-card .ac-lede { color: #CBD5DD !important; } .article-card .ac-meta { color: #9CA3AF !important; } .article-card .ac-tag { background: rgba(16, 185, 129, 0.15) !important; color: #10B981 !important; } .article-card .ac-tag.guide { background: rgba(245, 184, 46, 0.12) !important; color: #F5B82E !important; } .article-card .ac-read { color: #10B981 !important; } /* ---------- 7) FR/BE markets: oc-top-offer bottom bar — the "OFFRE TOP" absolute badge was crowding the "JOUER MAINTENANT" CTA on mobile. Pin the badge to top-LEFT (out of the CTA's way) instead of top-center, and give the CTA a touch more breathing room. ---------- */ html[lang^="fr"] .oc-top-offer-inner, html[lang^="nl-BE"] .oc-top-offer-inner, html[lang^="fr-BE"] .oc-top-offer-inner { grid-template-columns: auto 50px minmax(0, 1fr) auto auto !important; gap: 10px !important; padding: 10px 40px 10px 12px !important; } html[lang^="fr"] .oc-to-badge, html[lang^="nl-BE"] .oc-to-badge, html[lang^="fr-BE"] .oc-to-badge { font-size: 9.5px !important; letter-spacing: 0.05em !important; padding: 3px 7px !important; } html[lang^="fr"] .oc-to-cta, html[lang^="nl-BE"] .oc-to-cta, html[lang^="fr-BE"] .oc-to-cta { font-size: 11px !important; padding: 9px 12px !important; letter-spacing: 0.02em !important; white-space: nowrap !important; } @media (max-width: 720px) { /* Pull the whole bar down a hair so the badge can sit above without clipping */ html[lang^="fr"] .oc-top-offer, html[lang^="nl-BE"] .oc-top-offer, html[lang^="fr-BE"] .oc-top-offer { margin-top: 18px !important; } html[lang^="fr"] .oc-top-offer-inner, html[lang^="nl-BE"] .oc-top-offer-inner, html[lang^="fr-BE"] .oc-top-offer-inner { grid-template-columns: 44px minmax(0, 1fr) auto !important; padding: 10px 30px 10px 10px !important; gap: 8px !important; } /* Badge moves out of the center (where CTA lives) to top-LEFT corner, clearly above the logo so it never collides with "JOUER MAINTENANT". */ html[lang^="fr"] .oc-to-badge, html[lang^="nl-BE"] .oc-to-badge, html[lang^="fr-BE"] .oc-to-badge { left: 10px !important; top: -11px !important; transform: none !important; font-size: 9px !important; padding: 3px 8px !important; } html[lang^="fr"] .oc-to-cta, html[lang^="nl-BE"] .oc-to-cta, html[lang^="fr-BE"] .oc-to-cta { font-size: 10px !important; padding: 8px 10px !important; } html[lang^="fr"] .oc-to-name, html[lang^="nl-BE"] .oc-to-name, html[lang^="fr-BE"] .oc-to-name { font-size: 11.5px !important; } html[lang^="fr"] .oc-to-bonus, html[lang^="nl-BE"] .oc-to-bonus, html[lang^="fr-BE"] .oc-to-bonus { font-size: 10px !important; } } /* Revolut payment pill: svg content color for light-pill-on-dark theme */ .casino-card .payment-icons img[src*="revolut-payment"] { background: #ffffff !important; } /* ---------- FR market: "Notre top choix" badge in gold frame (not green pill) to stand out as the premium pick, with good text contrast. ---------- */ html[lang^="fr"] .casino-card.top-pick .top-pick-badge, html[lang^="fr-BE"] .casino-card.top-pick .top-pick-badge { background: #0F1419 !important; color: #F5B82E !important; border: 1.5px solid #F5B82E !important; box-shadow: 0 2px 8px rgba(245, 184, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; font-weight: 800 !important; letter-spacing: 0.08em !important; } /* Also tune the card outline on FR top-pick to match the gold accent */ html[lang^="fr"] body.lesson-layout .casino-list .casino-card.top-pick, html[lang^="fr-BE"] body.lesson-layout .casino-list .casino-card.top-pick { border-color: #F5B82E !important; box-shadow: 0 0 0 3px rgba(245, 184, 46, 0.10), 0 8px 24px -8px rgba(245, 184, 46, 0.25) !important; } html[lang^="fr"] body.lesson-layout .casino-list .casino-card.top-pick:hover, html[lang^="fr-BE"] body.lesson-layout .casino-list .casino-card.top-pick:hover { border-color: #FFCB47 !important; box-shadow: 0 0 0 3px rgba(245, 184, 46, 0.18), 0 10px 28px -8px rgba(245, 184, 46, 0.4) !important; } /* ============================================================ Round 3 fixes ============================================================ */ /* ---------- Task 1: News post page — author name invisible on gold hero. Force the byline link + text to white so it reads cleanly. ---------- */ .article-hero .article-meta, .article-hero .article-meta .am-author, .article-hero .article-meta .am-author a, .article-hero .article-meta .am-author a:link, .article-hero .article-meta .am-author a:visited { color: #ffffff !important; font-weight: 600; } .article-hero .article-meta .am-author a:hover { color: #F5B82E !important; text-decoration: underline; } .article-hero .article-meta .am-date, .article-hero .article-meta .am-read, .article-hero .article-meta .am-dot { color: rgba(255, 255, 255, 0.85) !important; } /* ---------- Lead paragraph clamp — MOBILE ONLY ---------- Desktop: show the full lead, no "Read more" button. Mobile: clamp to 1 line and show "Read more" INLINE on the same line. */ @media (min-width: 721px) { .lead.lead-clampable, .lead.lead-clampable.is-clamped { display: block !important; -webkit-line-clamp: unset !important; max-height: none !important; overflow: visible !important; } .lead-toggle { display: none !important; } } @media (max-width: 720px) { .lead.lead-clampable.is-clamped { -webkit-line-clamp: 1 !important; max-height: 1.7em !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .lead.lead-clampable + .lead-toggle, .lead-toggle { display: inline-block !important; margin-top: 0 !important; margin-left: 6px !important; padding: 0 !important; vertical-align: baseline !important; font-size: 12.5px !important; line-height: 1.6 !important; position: relative !important; top: -2px !important; } } /* ---------- Task 5 + 6: SE oc-top-offer — kill the "TOPPERBJUDANDE" badge (it was crowding the layout on desktop and overlapping on mobile), and let the name + bonus text wrap so they are fully readable. ---------- */ html[lang^="sv"] .oc-top-offer .oc-to-badge { display: none !important; } html[lang^="sv"] .oc-top-offer-inner { grid-template-columns: 60px minmax(0, 1fr) auto !important; gap: 12px !important; padding: 12px 42px 12px 14px !important; } html[lang^="sv"] .oc-to-name { -webkit-line-clamp: 2 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; white-space: normal !important; overflow: hidden !important; } html[lang^="sv"] .oc-to-bonus { -webkit-line-clamp: 2 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; white-space: normal !important; overflow: hidden !important; } @media (max-width: 720px) { html[lang^="sv"] .oc-top-offer { margin-top: 0 !important; } html[lang^="sv"] .oc-top-offer-inner { grid-template-columns: 46px minmax(0, 1fr) auto !important; padding: 10px 30px 10px 10px !important; gap: 10px !important; align-items: center !important; } /* Show ONLY the H3 (casino name) in full; hide bonus/feature line */ html[lang^="sv"] .oc-to-bonus { display: none !important; } html[lang^="sv"] .oc-to-name { font-size: 13px !important; line-height: 1.25 !important; font-weight: 800 !important; white-space: normal !important; overflow: visible !important; -webkit-line-clamp: unset !important; display: block !important; text-overflow: clip !important; } html[lang^="sv"] .oc-to-cta { font-size: 10.5px !important; padding: 8px 12px !important; white-space: nowrap !important; } } /* ---------- All markets (except SE which hides the bonus text entirely): mobile oc-top-offer footer must show the FULL bonus text without clipping or overlap. Earlier mobile rules clamped it to 1 line + overflow:hidden, which chopped the bonus. Unclamp everywhere, let the row grow vertically as needed. SE's own rule (html[lang^="sv"] .oc-to-bonus{display:none}) wins by specificity + !important so Sweden stays as the user asked. ---------- */ @media (max-width: 720px) { .oc-top-offer-inner { align-items: center !important; } .oc-to-name { white-space: normal !important; -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; line-height: 1.25 !important; } .oc-to-bonus { white-space: normal !important; -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; line-height: 1.3 !important; margin-top: 2px !important; } /* Keep SE override: bonus hidden on Swedish mobile (H3 only) */ html[lang^="sv"] .oc-to-bonus { display: none !important; } } /* ---------- Mobile burger: osiguraj .has-dropdown + dropdown-menu da zauzimaju celu širinu nav-a. Bez ovoga, .has-dropdown se smanjuje na ~198px i cela Markets lista završi pomerena desno, van viewporta (video posle Markets tap da je x=384 na 390px viewportu). Rešenje: explicitni width + box-sizing. */ @media (max-width: 900px) { .site-header .nav .has-dropdown { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; align-self: stretch !important; flex-shrink: 0 !important; } .site-header .nav .has-dropdown .dropdown-menu { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .site-header .nav .has-submenu { width: 100% !important; box-sizing: border-box !important; } .site-header .nav .has-submenu > .submenu-parent { width: 100% !important; box-sizing: border-box !important; } } /* ---------- Mobile burger: force Markets list da ostane u viewportu ---------- Ranije je .has-dropdown.open bio pomeren 384px desno jer su neke uskoro-flex stavke unutra (min-content submenu-parent, etc.) prošireno dole proširile roditelja. Fix: min-width:0 na SVE flex potomke, overflow-x:hidden na nav i podmenima, i dozvoli wrap submenu-parent textu. ---------- */ @media (max-width: 900px) { .site-header .nav { overflow-x: hidden !important; } .site-header .nav, .site-header .nav *, .site-header .nav .has-dropdown, .site-header .nav .has-dropdown .dropdown-menu, .site-header .nav .has-submenu, .site-header .nav .has-submenu > .submenu-parent { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } .site-header .nav .has-dropdown, .site-header .nav .has-dropdown .dropdown-menu, .site-header .nav .has-submenu { width: 100% !important; flex: 0 0 auto !important; align-self: stretch !important; } .site-header .nav .has-submenu > .submenu-parent { width: 100% !important; flex-wrap: wrap !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; } .site-header .nav .has-submenu > .submenu-parent > * { flex-shrink: 1 !important; min-width: 0 !important; } } /* ---------- Mobile Markets overlay panel ---------- */ .mr-markets-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(10, 10, 10, 0.88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .2s ease; overflow-y: auto; padding: 24px 16px; box-sizing: border-box; display: none; } @media (max-width: 900px) { .mr-markets-overlay { display: block; } } .mr-markets-overlay.is-open { opacity: 1; visibility: visible; } html.mr-markets-open, html.mr-markets-open body { overflow: hidden; } .mr-markets-overlay .mr-mo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #242B32; } .mr-markets-overlay .mr-mo-title { color: #F5B82E; font-family: var(--font-head, sans-serif); font-size: 14px; font-weight: 800; letter-spacing: 0.15em; } .mr-markets-overlay .mr-mo-close { background: transparent; border: none; color: #E5E7EB; font-size: 32px; line-height: 1; padding: 4px 10px; cursor: pointer; border-radius: 6px; } .mr-markets-overlay .mr-mo-close:hover, .mr-markets-overlay .mr-mo-close:focus { background: rgba(255,255,255,.08); color: #F5B82E; } .mr-markets-overlay .mr-mo-list { display: flex; flex-direction: column; gap: 6px; } .mr-markets-overlay .mr-mo-market { display: flex; align-items: center; gap: 12px; padding: 14px 14px; background: #171D23; border: 1px solid #242B32; border-radius: 10px; color: #E5E7EB; font-family: var(--font-head, sans-serif); font-weight: 700; font-size: 15px; text-decoration: none; letter-spacing: 0.02em; transition: background .15s, border-color .15s, color .15s; min-height: 48px; box-sizing: border-box; } .mr-markets-overlay .mr-mo-market:hover, .mr-markets-overlay .mr-mo-market:focus { background: #1F262E; border-color: #F5B82E; color: #F5B82E; } .mr-markets-overlay .mr-mo-market img { width: 24px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.1); object-fit: cover; flex-shrink: 0; } .mr-markets-overlay .mr-mo-market .mr-mo-name { flex: 1; min-width: 0; } .mr-markets-overlay .mr-mo-market .mr-mo-arrow { color: #2D7FFF; font-size: 20px; line-height: 1; } /* ==================== FADERS MOBILE OVERRIDES (appended) ==================== */ /* Market subnav: always single-row horizontal scroll, never wrap */ .market-subnav .subnav-scroll { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: thin !important; scrollbar-color: rgba(45,127,255,0.75) rgba(27,34,41,0.6) !important; -webkit-overflow-scrolling: touch; } .market-subnav .subnav-scroll::-webkit-scrollbar { display: block !important; height: 8px !important; } .market-subnav .subnav-scroll::-webkit-scrollbar-thumb { background: rgba(45,127,255,0.75); border-radius: 4px; } /* Casino card narrow-viewport: fill empty thumb slot with bonus block */ @media (max-width: 520px) { .casino-card { grid-template-columns: 1fr !important; grid-template-areas: "rank" "thumb" "info" "bonus" "cta" !important; text-align: center; } .casino-card .rank-badge { grid-area: rank; justify-self: center; } .casino-card .casino-thumb { grid-area: thumb; } .casino-card .casino-info { grid-area: info; } .casino-card .casino-bonus { grid-area: bonus; } .casino-card .casino-cta { grid-area: cta; flex-direction: column; gap: 8px; } .casino-card .casino-cta .btn { width: 100%; } } /* Hero padding on phone */ @media (max-width: 720px) { .article-hero { padding: 24px 0 16px; } .article-hero h1 { font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.15; } .article-hero .lede { font-size: 0.92rem; line-height: 1.5; } } /* Nav dropdown on mobile: flag + name tight-left */ @media (max-width: 900px) { .nav .submenu-parent { justify-content: flex-start !important; gap: 10px !important; } .nav .flag-ico-img { flex-shrink: 0; } } /* Blog/news card image aspect ratio 16:9 */ .ac-image img, .sc-news-card img, .sc-tile-media img { aspect-ratio: 16 / 9; object-fit: cover; } /* Post hero 16:9 */ .post-hero img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; } /* Author avatar never distorts */ .am-avatar, .ab-avatar, .author-avatar { object-fit: cover; aspect-ratio: 1 / 1; } /* Smooth focus ring across the site */ a:focus-visible, button:focus-visible { outline: 2px solid #2D7FFF; outline-offset: 2px; border-radius: 4px; }