/* ===================================================================== Overlog, overlog.gg AG-inspired editorial theme: white canvas, red brand, deep navy, gold Fonts loaded from Google in : Inter + Montserrat ===================================================================== */ :root { --bg: #ffffff; --bg-alt: #f7f8fa; --bg-soft: #eef1f5; --surface: #ffffff; --surface-hover: #f7f8fa; --border: #e5e7eb; --border-strong: #cbd5e0; --text: #0e1a2b; --text-muted: #4a5568; --text-dim: #718096; --red: #d62828; --red-2: #ef4444; --red-deep: #b91c1c; --navy: #003f88; --navy-2: #1e5aa8; --navy-deep: #002b5e; --gold: #ffc300; --gold-2: #ffd547; --success: #16a34a; /* Legacy aliases so old markup keeps rendering */ --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: #d4a300; --bg-0: var(--bg); --bg-1: var(--bg-alt); --bg-2: var(--bg-soft); --bg-3: var(--border); --surface-2: var(--bg-alt); --pink-glow: rgba(214, 40, 40, .24); --purple-glow: rgba(0, 63, 136, .22); --gold-glow: rgba(255, 195, 0, .32); --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow-1: 0 2px 8px rgba(15, 23, 42, .06); --shadow-2: 0 8px 28px rgba(15, 23, 42, .10); --shadow-strong: 0 16px 40px rgba(15, 23, 42, .14); --shadow-pink: 0 8px 22px rgba(214, 40, 40, .18); --max-w: 1200px; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-head: 'Montserrat', 'Inter', 'Segoe UI', sans-serif; --font-display: 'Montserrat', 'Inter', 'Segoe UI', 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(214, 40, 40, .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(214, 40, 40, .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(214, 40, 40, .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-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:cover;object-position:center;padding:0;margin:0;display:block} .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(214, 40, 40, .08);padding:4px 10px;border-radius:4px} .article-card .ac-tag.guide{color:var(--navy);background:rgba(0, 63, 136, .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:900px){.article-grid, .article-grid.cols-4{grid-template-columns:repeat(2, 1fr)}} @media (max-width:520px){.article-grid, .article-grid.cols-4{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(0, 63, 136, .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(214, 40, 40, .08);padding:4px 10px;border-radius:4px;margin-bottom:10px} .blog-card .tag.guide{color:var(--navy);background:rgba(0, 63, 136, .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(0, 63, 136, .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(214, 40, 40, .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(214, 40, 40, .04);border-color:rgba(214, 40, 40, .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(0, 63, 136, .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(214, 40, 40, .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(0, 63, 136, .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(0, 63, 136, .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(214, 40, 40, .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(0, 63, 136, .35), 0 6px 14px rgba(214, 40, 40, .10);color:var(--text)} .demo-card .dc-visual{position:relative;height:140px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, #eef3ff 0%, #f7f9ff 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(214, 40, 40, .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(0, 63, 136, .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, #fff2f2 0%, #fff7ec 100%)} .demo-card.slot .dc-badge{background:var(--red);color:#fff;border-color:transparent} .demo-card.wheel .dc-visual{background:linear-gradient(135deg, #eff4ff 0%, #eefaf5 100%)} .demo-card.wheel .dc-badge{background:var(--navy);color:#fff;border-color:transparent} .demo-card.table .dc-visual{background:linear-gradient(135deg, #f4f6ff 0%, #eef7fb 100%)} .demo-card.table .dc-badge{background:#2b4570;color:#fff;border-color:transparent} .demo-card.new .dc-visual{background:linear-gradient(135deg, #fff5e6 0%, #fef1f6 100%)} .demo-card.new .dc-badge{background:var(--gold);color:var(--text);border-color:transparent} .demo-card.real .dc-visual{background:linear-gradient(135deg, #003f88 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, #f8fafc 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, #fff6f6 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(214, 40, 40, .08), 0 12px 30px -12px rgba(214, 40, 40, .25)} .oc-toplist .casino-card.is-top .rank-badge{background:var(--red);box-shadow:0 4px 12px rgba(214, 40, 40, .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(0, 63, 136, .35)} .feat-card.is-hot{border:2px solid var(--red);box-shadow:0 0 0 5px rgba(214, 40, 40, .06), 0 12px 30px -16px rgba(214, 40, 40, .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(214, 40, 40, .35))} .feat-thumb{display:flex;align-items:center;justify-content:center;height:120px;margin-bottom:14px;background:linear-gradient(180deg, #f8fafc 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, #eaf1fa 0%, #dce7f4 55%, #c9d8ec 100%)!important; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(0, 63, 136, .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(0, 63, 136, .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%, #b71c1c 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(214, 40, 40, .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%, #0a1830 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:#e8ecf3;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:#86efac;font-weight:700} .game-msg.lose{background:rgba(214, 40, 40, .20);color:#fca5a5} .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%, #b71c1c 100%);border-color:transparent;padding:12px 30px;text-transform:uppercase;font-size:14px;font-weight:800;box-shadow:0 6px 16px rgba(214, 40, 40, .35)} .gbtn-primary:hover{background:linear-gradient(135deg, #e04040 0%, #c62828 100%);border-color:transparent;color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(214, 40, 40, .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, #050c1a 0%, #0a1730 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, #0a1830, #050c1a);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(214, 40, 40, .28), rgba(214, 40, 40, .12));border-color:rgba(214, 40, 40, .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, #050c1a 0%, #0a1730 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(214, 40, 40, .28);border-color:rgba(214, 40, 40, .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(0, 63, 136, .25)} .faq-item[open]{border-color:var(--red);box-shadow:0 8px 24px -12px rgba(214, 40, 40, .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(214, 40, 40, .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(0, 63, 136, .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(214, 40, 40, .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(0,63,136,.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,#eaf1fa 0%,#dce7f4 55%,#c9d8ec 100%); box-shadow:0 8px 24px -14px rgba(0,63,136,.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} }