@import url("https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500&display=swap"); /* ==== base (noir structural) ==== */ /* Fonts loaded via non-blocking in (no render-blocking @import) */ /* ===================================================================== CASINO NOIR — premium dark / gold editorial theme Display: Fraunces (high-contrast serif) Body: Hanken Grotesk ===================================================================== */ /* ===== CSS VARIABLES (these win the cascade — recolor everything) ===== */ :root{ --primary:#c9a24b; /* gold */ --primary-dark:#a9813a; --accent:#e6c879; /* light champagne gold (used by h2::after, scrollbar) */ --gold:#c9a24b; --gold-bright:#f0d68f; --emerald:#3fae7a; /* "verified / win" green accent */ --bg:#0b0e0d; /* near-black, faint green-tint */ --bg-soft:#11150f; /* lifted panel */ --bg-panel:#14180f; --fg:#ece6d8; /* warm ivory */ --fg-muted:#938d7e; --fg-dim:#6f6a5e; --border:rgba(201,162,75,.18);/* gold hairline */ --border-soft:rgba(236,230,216,.08); --card-bg:#13160f; --card-bg-hi:#181c12; --card-shadow:0 1px 0 rgba(255,255,255,.03),0 18px 40px -20px rgba(0,0,0,.8); --radius:18px; --radius-sm:12px; --btn-radius:10px; --h1-weight:600; --font:"Hanken Grotesk",system-ui,-apple-system,sans-serif; --font-display:"Fraunces","Hanken Grotesk",Georgia,serif; --shadow-btn:0 10px 24px -10px rgba(201,162,75,.55); /* extra vars used by the legacy obfuscated-class rules (secondary pages) — mapped to noir */ --primary-600:#a9813a; --primary-tint:rgba(201,162,75,.12); --muted:#938d7e; --border-strong:rgba(201,162,75,.32); --success:#3fae7a; --danger:#c0533f; --card-shadow-hover:0 26px 50px -24px rgba(0,0,0,.9); } /* ===== RESET & BASE ===== */ *,*::before,*::after{box-sizing:border-box} body,html{margin:0;padding:0} body{ font-family:var(--font); color:var(--fg); background:var(--bg); line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* atmospheric gold glows fixed behind everything (own layer, no conflict) */ body::before{ content:""; position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(60vw 50vh at 78% -8%,rgba(201,162,75,.10),transparent 60%), radial-gradient(50vw 50vh at -10% 12%,rgba(63,174,122,.06),transparent 55%), radial-gradient(80vw 60vh at 50% 120%,rgba(201,162,75,.07),transparent 60%); } body>*{position:relative;z-index:1} a{color:var(--primary);text-decoration:none;transition:color .18s} a:hover{color:var(--gold-bright)} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--font-display);color:var(--fg);line-height:1.08;letter-spacing:-.015em;font-optical-sizing:auto} h2{font-size:clamp(26px,3.4vw,40px);font-weight:600;margin:0 0 14px} h3{font-size:19px;font-weight:600;margin:0 0 8px} p{margin:0 0 16px} ul,ol{margin:0;padding:0} ::selection{background:rgba(201,162,75,.3);color:#fff} /* ===== SKIP LINK ===== */ .skip-link{position:absolute;left:0;top:0;transform:translateY(-120%);background:var(--primary);color:#0b0e0d;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700;z-index:400;transition:transform .15s} .skip-link:focus{transform:translateY(0);color:#0b0e0d} /* ===== CONTAINER ===== */ .container{max-width:1180px;margin:0 auto;padding:0 28px} /* ===== NAV / HEADER ===== */ header.nav{ background:rgba(10,13,11,.72)!important; -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--border); } header.nav .container{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px} .nav-sticky{position:sticky;top:0;z-index:100} .brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;color:var(--fg);text-decoration:none} .brand:hover{color:var(--gold-bright)} .logo{display:inline-flex;align-items:center;gap:11px} .logo img,.logo svg{filter:drop-shadow(0 2px 6px rgba(201,162,75,.4))} .logo-text{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--fg);letter-spacing:-.01em} .logo-text::first-letter{color:var(--gold)} /* recolor the legacy blue-heart logo until the gold emblem is injected (and on no-JS pages) */ .logo svg:not([data-gold]) rect{fill:#14180f} .logo svg:not([data-gold]) path{fill:var(--gold)} header.nav nav{display:flex;gap:26px;flex-wrap:wrap;align-items:center} header.nav nav a{position:relative;color:rgba(236,230,216,.78);font-weight:500;font-size:14.5px;letter-spacing:.01em;padding:6px 0} header.nav nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--gold);transition:width .22s} header.nav nav a:hover{color:var(--fg)} header.nav nav a:hover::after{width:100%} /* kill inherited gradient bleed on section headers */ header.section-head{background:none!important;border:none;padding:0} /* ===== HERO (compact) ===== */ .hero-minimal{padding:24px 0 18px!important;position:relative;overflow:hidden} .hero-minimal-inner{position:relative;max-width:880px} .hero-minimal-rule{width:54px;height:3px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:999px;margin-bottom:12px} .eyebrow{font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:inline-block} .eyebrow-square{background:rgba(201,162,75,.08);border:1px solid var(--border);padding:7px 16px;border-radius:999px} h1{font-family:var(--font-display);font-size:clamp(29px,4.3vw,51px);line-height:1.05;margin:0 0 16px;font-weight:var(--h1-weight);letter-spacing:-.025em} h1 em,h1 .accent{font-style:italic;color:var(--gold);font-weight:500} .hero-sub{font-size:clamp(17px,2vw,20px);color:var(--fg-muted);max-width:620px;margin:0 0 34px;line-height:1.6} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hero-cta-inline{justify-content:flex-start} /* ===== BUTTONS ===== */ .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:var(--btn-radius);font-family:var(--font);font-weight:600;font-size:15px;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s,color .2s;white-space:nowrap;cursor:pointer;text-decoration:none;letter-spacing:.01em} .btn:hover{text-decoration:none;transform:translateY(-2px)} .btn-primary{background:linear-gradient(135deg,#e6c879 0%,#c9a24b 48%,#a9813a 100%);color:#1a1408;box-shadow:var(--shadow-btn);border:1px solid rgba(255,255,255,.18)} .btn-primary:hover{color:#140f04;box-shadow:0 16px 34px -12px rgba(201,162,75,.75);filter:brightness(1.05)} .btn-white{background:var(--fg);color:#14110a} .btn-white:hover{color:#14110a;filter:brightness(1.05)} .btn-ghost{background:rgba(236,230,216,.04);color:var(--fg);border:1px solid var(--border)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);background:rgba(201,162,75,.06)} .btn-link{background:transparent;color:var(--gold);padding-left:0;padding-right:0;border:none;box-shadow:none!important;font-weight:600} .btn-link:hover{color:var(--gold-bright);transform:none} .btn-link-muted{color:var(--fg-muted)} .btn-link-muted:hover{color:var(--fg)} .btn-block{width:100%;justify-content:center} .btn-lg{padding:16px 32px;font-size:16px} /* ===== BLUF (lead summary after H1) ===== */ .bluf{max-width:760px;margin:4px 0 4px;padding:18px 24px;background:linear-gradient(135deg,rgba(201,162,75,.08),rgba(201,162,75,.015));border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:14px;animation:noirUp .6s .16s ease both} .bluf-label{display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:11px} .bluf-label::before{content:"";width:14px;height:1.5px;background:var(--gold);display:inline-block} .bluf p{margin:0;font-size:17px;line-height:1.7;color:var(--fg)} .bluf p strong{color:var(--gold-bright);font-weight:600} .bluf-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px} .bluf-chip{font-size:12.5px;font-weight:600;color:var(--fg);background:rgba(236,230,216,.05);border:1px solid var(--border);border-radius:999px;padding:7px 14px;letter-spacing:.01em} .bluf-chip b{color:var(--gold);font-weight:700;margin-right:4px} @media(max-width:768px){ .bluf{padding:18px 20px;margin-bottom:24px} .bluf p{font-size:15.5px} } /* ===== TRUST BAR ===== */ .trust-bar{background:linear-gradient(180deg,rgba(201,162,75,.04),transparent);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:26px 0!important} .trust-bar ul{list-style:none;display:flex;gap:48px;flex-wrap:wrap;justify-content:center} .trust-bar li{text-align:center} .value{font-family:var(--font-display);font-size:32px;font-weight:600;color:var(--gold);letter-spacing:-.02em;line-height:1} .label{color:var(--fg-muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-top:6px;display:block} /* ===== SECTIONS ===== */ .section{padding:76px 0!important} .section-head{text-align:center;max-width:740px;margin:0 auto 48px} .section-head h2{display:inline-block} .section-sub{color:var(--fg-muted);font-size:17px;margin:14px 0 0;line-height:1.6} /* decorative h2 underline (inherited) — recolor to centered gold for section heads */ .section-head h2::after{left:50%!important;transform:translateX(-50%);width:54px!important;height:3px!important;background:linear-gradient(90deg,transparent,var(--gold),transparent)!important;bottom:-2px} /* ===== GRID ===== */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px} /* ===== FEATURES ===== */ .feature{background:var(--card-bg);border:1px solid var(--border-soft);border-radius:var(--radius);padding:30px 26px;text-align:center;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden} .feature::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.4),transparent);opacity:0;transition:opacity .25s} .feature:hover{transform:translateY(-4px);box-shadow:var(--card-shadow);border-color:var(--border)} .feature:hover::before{opacity:1} .feature h3{margin:14px 0 8px;font-size:17px} .feature p{color:var(--fg-muted);margin:0;font-size:14.5px;line-height:1.6} .bare-icon{color:var(--gold);display:flex;justify-content:center;align-items:center;margin-bottom:6px} .bare-icon svg{width:30px;height:30px;filter:drop-shadow(0 2px 8px rgba(201,162,75,.35))} .features-list{list-style:none;margin:8px 0;display:flex;flex-direction:column;gap:6px} .features-list li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-muted)} .features-list svg{color:var(--gold);flex-shrink:0} /* ===== PRODUCT CARDS ===== */ .product-grid{padding:76px 0!important} .product-grid-cards .grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:start} .product-card{background:var(--card-bg);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;box-shadow:var(--card-shadow)} .product-card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 26px 50px -24px rgba(0,0,0,.9),0 0 0 1px rgba(201,162,75,.25)} .product-card.featured{border-color:var(--gold);border-width:1px;box-shadow:0 0 0 1px rgba(201,162,75,.35),0 26px 50px -24px rgba(0,0,0,.9)} .product-body{padding:24px;display:flex;flex-direction:column;gap:9px;flex:1} .product-body .brand{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold)} .product-body h3{margin:0;font-size:20px;letter-spacing:-.01em;color:var(--fg)} .ribbon{position:absolute;top:16px;right:-36px;background:linear-gradient(135deg,#e6c879,#c9a24b);color:#1a1408;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 44px;transform:rotate(35deg);box-shadow:0 4px 12px rgba(0,0,0,.4)} .rating{display:flex;align-items:center;gap:2px;color:var(--gold)} .rating svg{display:block} .reviews{color:var(--fg-muted);font-size:13px;margin-left:6px} .desc{color:var(--fg-muted);font-size:14.5px;margin:0;line-height:1.6} .price-row{display:flex;align-items:baseline;gap:8px;margin-top:4px} .price{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--gold);letter-spacing:-.02em} /* ===== PROSE ===== */ .prose{max-width:760px;margin:0 auto;padding:56px 28px} .prose h1{font-size:clamp(30px,4vw,44px);margin:0 0 22px;letter-spacing:-.02em} .prose h2{font-size:clamp(24px,3vw,32px);margin:44px 0 16px} .prose h3{font-size:21px;margin:30px 0 10px;color:var(--gold)} .prose p{margin:0 0 18px;line-height:1.85;color:var(--fg-muted)} .prose p strong{color:var(--fg);font-weight:600} .prose ul,.prose ol{margin:0 0 18px 1.3em;color:var(--fg-muted)} .prose li{margin:7px 0;line-height:1.7} .prose li::marker{color:var(--gold)} .prose a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(201,162,75,.4);text-underline-offset:3px} .prose a:hover{color:var(--gold-bright)} .prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14.5px} .prose td,.prose th{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)!important;border-left:none!important;border-right:none!important;border-top:none!important} .prose th{background:rgba(201,162,75,.07);font-weight:600;color:var(--fg);font-family:var(--font-display)} .prose strong{font-weight:600;color:var(--fg)} .prose blockquote{border-left:3px solid var(--gold);margin:24px 0;padding:6px 0 6px 22px;color:var(--fg);font-style:italic;font-family:var(--font-display)} /* ===== FAQ ===== */ .faq{padding:76px 0!important} .faq-list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:12px} details{background:var(--card-bg);border:1px solid var(--border-soft);border-radius:var(--radius-sm);overflow:hidden;transition:box-shadow .15s,border-color .15s} details:hover{border-color:var(--border)} details summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;font-size:16px;color:var(--fg);font-family:var(--font-display)} details summary::-webkit-details-marker{display:none} details p{padding:0 22px 18px;color:var(--fg-muted);font-size:15px;line-height:1.7;margin:0} /* ===== FAQ ACCORDION (injected) ===== */ .faq-item{background:var(--card-bg);border:1px solid var(--border-soft);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .2s,box-shadow .2s} .faq-item+.faq-item{margin-top:0} .faq-item:hover{border-color:var(--border)} .faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;font-size:16.5px;color:var(--fg);user-select:none;font-family:var(--font-display);transition:color .18s} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--gold-bright)} .faq-item[open]{border-color:var(--border)} .faq-item[open] summary{color:var(--gold)} .faq-arrow{flex-shrink:0;color:var(--gold);transition:transform .3s cubic-bezier(.4,0,.2,1)} .faq-item[open] .faq-arrow{transform:rotate(180deg)} .faq-answer{padding:2px 24px 22px;color:var(--fg-muted);font-size:15px;line-height:1.75} /* ===== READER REVIEWS ===== */ .reviews-section{padding:64px 0!important;background:linear-gradient(180deg,rgba(201,162,75,.022),transparent)} .reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;max-width:1060px;margin:0 auto} .review-card{background:var(--card-bg);border:1px solid var(--border-soft);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s,transform .2s,box-shadow .2s} .review-card:hover{border-color:var(--border);transform:translateY(-3px);box-shadow:var(--card-shadow)} .rv-head{display:flex;align-items:flex-start;gap:14px} .rv-avatar{width:54px;height:54px;border-radius:999px;object-fit:cover;border:2px solid var(--border);flex-shrink:0;background:#fff} .rv-meta{flex:1;min-width:0} .rv-name{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--fg);line-height:1.2} .rv-sub{display:flex;align-items:center;gap:9px;margin-top:4px;flex-wrap:wrap} .rv-casino{font-size:12px;color:var(--gold);font-weight:600} .rv-dot{width:3px;height:3px;border-radius:999px;background:var(--fg-dim)} .rv-date{font-size:12px;color:var(--fg-dim)} .rv-verified{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--emerald);font-weight:600;margin-top:5px} .rv-stars{color:var(--gold);font-size:14px;letter-spacing:1.5px;flex-shrink:0;text-shadow:0 1px 6px rgba(201,162,75,.35)} .rv-body{color:var(--fg-muted);font-size:14.5px;line-height:1.7;margin:0;font-style:italic} .rv-body::before{content:"\201C";color:var(--gold);font-family:var(--font-display);font-size:20px;margin-right:2px} @media(max-width:768px){ .reviews-section{padding:44px 0!important} .reviews-grid{grid-template-columns:1fr} .review-card{padding:20px} } /* ===== PROSE FIGURES (thematic illustrations) ===== */ .prose-figure{margin:36px 0;text-align:center} .prose-figure img{width:100%;max-width:540px;height:auto;margin:0 auto;display:block;filter:drop-shadow(0 18px 42px rgba(0,0,0,.6))} .prose-figure figcaption{margin-top:12px;font-size:13px;color:var(--fg-dim);letter-spacing:.03em;font-style:italic} /* ===== SHIMMERING CTA PROMO BLOCKS ===== */ .cta-promo{position:relative;display:flex;align-items:center;gap:22px;margin:40px 0;padding:24px 28px;border-radius:18px;overflow:hidden;text-decoration:none;background:linear-gradient(120deg,#12160d,#1d2214 45%,#12160d);background-size:220% 100%;animation:promoShift 6.5s ease-in-out infinite;transition:transform .2s} @keyframes promoShift{0%{background-position:0 0}50%{background-position:100% 0}100%{background-position:0 0}} .cta-promo::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1.4px;background:linear-gradient(120deg,rgba(201,162,75,.12),rgba(247,226,173,.85),rgba(201,162,75,.12));background-size:220% 100%;animation:promoShift 6.5s ease-in-out infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .cta-promo::after{content:"";position:absolute;top:0;left:-65%;width:48%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,247,222,.16),transparent);transform:skewX(-22deg);animation:promoSheen 5s ease-in-out infinite;pointer-events:none} @keyframes promoSheen{0%{left:-65%}58%,100%{left:135%}} .cta-promo:hover{transform:translateY(-3px)} .cta-promo:hover::after{animation-duration:1.6s} .cp-logo{position:relative;z-index:1;width:78px;height:78px;border-radius:15px;object-fit:cover;background:#fff;border:1px solid var(--border);flex-shrink:0;box-shadow:0 10px 24px -8px rgba(0,0,0,.75)} .cp-info{position:relative;z-index:1;flex:1;min-width:0} .cp-badge{display:inline-block;font-family:var(--font);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#1a1408;background:linear-gradient(135deg,#f7e2ad,#c9a24b);padding:3px 11px;border-radius:999px;margin-bottom:8px} .cp-name{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--fg);line-height:1.12} .cp-bonus{font-size:14px;color:var(--gold);margin-top:4px;font-weight:600} .cp-btn{position:relative;z-index:1;flex-shrink:0;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#f7e2ad,#c9a24b 55%,#a9813a);color:#1a1408;font-family:var(--font);font-weight:700;font-size:15px;padding:14px 28px;border-radius:11px;border:1px solid rgba(255,255,255,.2);box-shadow:0 12px 26px -10px rgba(201,162,75,.75);white-space:nowrap;transition:filter .2s} .cta-promo:hover .cp-btn{filter:brightness(1.07)} @media(max-width:640px){ .cta-promo{flex-direction:column;text-align:center;gap:14px;padding:24px 20px} .cp-info{text-align:center} .cp-btn{width:100%;justify-content:center} } @media(prefers-reduced-motion:reduce){ .cta-promo,.cta-promo::before{animation:none} .cta-promo::after{display:none} } /* ===== CTA BAND ===== */ .cta-band{background:linear-gradient(135deg,#181c12 0%,#0d100b 100%);color:var(--fg);padding:64px 0!important;border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;overflow:hidden} .cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(50vw 60vh at 80% 50%,rgba(201,162,75,.12),transparent 60%);pointer-events:none} .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative} .cta-band h2{margin:0 0 8px;color:var(--fg)} .cta-band p{margin:0;color:var(--fg-muted)} /* ===== FOOTER ===== */ .site-footer{border-top:1px solid var(--border);padding:64px 0 28px;background:#080a09;color:var(--fg-muted);font-size:14px} .footer-top-3{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;margin-bottom:36px} .footer-brand .logo-text{color:var(--fg)} .tagline{color:var(--fg-muted);margin-top:14px;max-width:300px;font-size:14px;line-height:1.6} .footer-links h4{margin:0 0 14px;color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-family:var(--font)} .footer-links a{display:block;color:var(--fg-muted);margin-bottom:10px;transition:color .15s,padding-left .15s} .footer-links a:hover{color:var(--gold);padding-left:4px} .legal{font-size:12.5px;padding:20px 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);color:var(--fg-dim);line-height:1.6} .legal p{margin:0} .copyright{padding-top:18px;font-size:12px;color:var(--fg-dim);text-align:center} /* ===== COMPARISON TABLE ===== */ .ctable-section{padding:26px 0 64px!important;background:linear-gradient(180deg,rgba(201,162,75,.025),transparent)} .ctable-section .section-head{margin-bottom:26px} .ctable{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)} .ctable-head{display:grid;grid-template-columns:64px 2fr 1.5fr 120px 176px;gap:16px;padding:14px 24px;background:linear-gradient(135deg,#1a1e13,#12150d);color:var(--gold);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-family:var(--font);border-bottom:1px solid var(--border)} .ctable-row{display:grid;grid-template-columns:64px 2fr 1.5fr 120px 176px;gap:16px;padding:16px 24px;background:var(--card-bg);border-bottom:1px solid var(--border-soft);align-items:center;transition:background .18s} .ctable-row:last-child{border-bottom:none} .ctable-row:hover{background:var(--card-bg-hi)} .ctable-row.cr-top{background:linear-gradient(90deg,rgba(201,162,75,.10),rgba(201,162,75,.02));border-left:3px solid var(--gold)} .cr-rank{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--fg-dim);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px} .cr-top .cr-rank{color:var(--gold)} .cr-badge{background:linear-gradient(135deg,#e6c879,#c9a24b);color:#1a1408;font-size:9px;font-weight:800;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--font)} .cr-casino{display:flex;align-items:center;gap:14px} .cr-logo{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;color:#fff;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.4)} .cr-name{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--fg)} .cr-tag{font-size:11px;color:var(--fg-muted);margin-top:3px;letter-spacing:.02em} .cr-bonus-main{font-weight:700;font-size:15.5px;color:var(--fg)} .cr-bonus-sub{font-size:12px;color:var(--gold);margin-top:3px;font-weight:600} .cr-stars{color:var(--gold);font-size:15px;letter-spacing:2px;text-shadow:0 1px 6px rgba(201,162,75,.4)} .cr-score{font-size:12px;color:var(--fg-muted);margin-top:3px;font-weight:600} .cr-action{display:flex;flex-direction:column;align-items:stretch;gap:6px} .cr-action .btn{justify-content:center;font-size:14px;padding:11px 16px} .cr-note{font-size:10px;color:var(--fg-dim);text-align:center;letter-spacing:.04em;text-transform:uppercase} /* logo box in table — 2x larger */ .cr-logo-img{width:120px;height:120px;border-radius:16px;overflow:hidden;flex-shrink:0;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px -8px rgba(0,0,0,.7)} .cr-logo-img img{width:100%;height:100%;object-fit:cover;display:block} @media(max-width:1000px){ .ctable-head{grid-template-columns:54px 1.7fr 1.3fr 96px 156px;gap:12px;padding:12px 14px} .ctable-row,.ctable-row.cr-top{grid-template-columns:54px 1.7fr 1.3fr 96px 156px;gap:12px;padding:14px} .cr-logo-img{width:88px;height:88px;border-radius:14px} } @media(max-width:768px){ .ctable-head{display:none} .ctable-row,.ctable-row.cr-top{grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto;gap:10px 14px;padding:18px 16px;position:relative;align-items:center} .cr-rank{font-size:18px;grid-row:1;grid-column:1;align-self:center;flex-direction:row;gap:6px} .cr-casino{grid-row:1;grid-column:2;gap:14px} .cr-logo-img{width:96px;height:96px} .cr-bonus{grid-row:2;grid-column:1 / 3} .cr-rating{grid-row:3;grid-column:1 / 3;display:flex;align-items:center;gap:10px} .cr-score{margin-top:0;margin-left:4px} .cr-action{grid-row:4;grid-column:1 / 3} .cr-action .btn{width:100%;padding:15px} .cr-note{display:none} } @media(max-width:420px){ .cr-logo-img{width:76px;height:76px} .cr-name{font-size:15px} } /* ===== BURGER BUTTON ===== */ .burger-btn{display:none;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;background:none;border:none;padding:8px;color:var(--fg);flex-shrink:0;line-height:0} .burger-btn span{display:block;width:26px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .25s} .burger-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger-btn.active span:nth-child(2){opacity:0} .burger-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ===== MOBILE NAV OVERLAY ===== */ .mobile-nav{display:none;position:fixed;inset:0;background:rgba(8,10,9,.98);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:300;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:80px 24px 40px} .mobile-nav.open{display:flex} .mobile-nav nav{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:360px} .mobile-nav a{display:block;color:var(--fg);font-family:var(--font-display);font-size:22px;font-weight:600;padding:18px 24px;width:100%;text-align:center;border-bottom:1px solid var(--border-soft);transition:color .15s} .mobile-nav a::after{display:none!important} .mobile-nav a:hover{color:var(--gold)} .mobile-nav-close{position:absolute;top:22px;right:22px;background:none;border:1px solid var(--border);border-radius:999px;width:44px;height:44px;color:var(--fg);font-size:22px;cursor:pointer;line-height:1;opacity:.8;transition:opacity .15s,border-color .15s} .mobile-nav-close:hover{opacity:1;border-color:var(--gold);color:var(--gold)} /* keep sticky bar from covering page bottom */ body{padding-bottom:0} /* ===== FOCUS ===== */ :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px} /* ===== ON-LOAD STAGGER for hero ===== */ @keyframes noirUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}} .hero-minimal-rule{animation:noirUp .6s ease both} .eyebrow{animation:noirUp .6s .06s ease both} .hero-minimal h1{animation:noirUp .6s .12s ease both} .hero-sub{animation:noirUp .6s .2s ease both} .hero-cta{animation:noirUp .6s .28s ease both} /* ===== RESPONSIVE ===== */ @media(max-width:900px){ .footer-top-3{grid-template-columns:1fr 1fr} .product-grid-cards .grid{grid-template-columns:1fr 1fr} .trust-bar ul{gap:32px} } @media(max-width:768px){ header.nav nav{display:none} .burger-btn{display:flex} .container{padding:0 16px} .hero-minimal{padding:16px 0 12px!important} .section,.faq,.product-grid{padding:44px 0!important} .ctable-section{padding:18px 0 44px!important} .section-head{margin-bottom:30px} .grid{grid-template-columns:1fr 1fr} .feature{padding:22px 18px} .product-grid-cards .grid{grid-template-columns:1fr} .trust-bar ul{gap:18px;justify-content:space-between} .trust-bar li{min-width:70px} .value{font-size:24px} .footer-top-3{grid-template-columns:1fr;gap:28px} .site-footer{padding:40px 0 24px} .cta-inner{flex-direction:column;align-items:flex-start;gap:18px} .cta-band{padding:44px 0!important} .prose{padding:32px 18px} } @media(max-width:480px){ .grid{grid-template-columns:1fr} .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{justify-content:center} } /* ===== STATIC PAGE CONTENT (about/terms/privacy/contact/responsible-gaming) ===== */ .page-content{max-width:820px;margin:0 auto;padding:8px 0 8px} .page-content .lead{font-size:19px;line-height:1.7;color:var(--fg);margin:0 0 22px} .page-content h2{font-family:var(--font-display);color:var(--gold);font-size:clamp(22px,3vw,30px);margin:36px 0 14px;letter-spacing:-.01em} .page-content h3{font-family:var(--font-display);color:var(--fg);font-size:19px;margin:26px 0 10px} .page-content p{color:var(--fg-muted);line-height:1.85;margin:0 0 16px} .page-content strong{color:var(--fg);font-weight:600} .page-content ul{margin:0 0 18px 1.3em;color:var(--fg-muted)} .page-content li{margin:8px 0;line-height:1.7} .page-content li::marker{color:var(--gold)} .page-content a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(201,162,75,.45);text-underline-offset:3px} .page-content a:hover{color:var(--gold-bright)} @media(max-width:768px){.page-content .lead{font-size:17px}} /* =================================================================== COMPETITIVE EXPANSION COMPONENTS (author, logos, methodology, pros/cons, data tables, category lists) — Casino Noir style =================================================================== */ /* author / editor E-E-A-T box */ .author-box{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:18px 22px;background:var(--card-bg);border:1px solid var(--border-soft);border-left:3px solid var(--gold);border-radius:14px} .ab-avatar{width:62px;height:62px;border-radius:999px;object-fit:cover;border:2px solid var(--border);flex-shrink:0;background:#fff} .ab-main{flex:1;min-width:0} .ab-name{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--fg)} .ab-role{font-size:12.5px;color:var(--gold);font-weight:600;margin-top:1px} .ab-bio{font-size:13.5px;color:var(--fg-muted);margin-top:7px;line-height:1.55} .ab-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;font-size:11.5px;color:var(--fg-dim)} .ab-verified{color:var(--emerald);font-weight:600} @media(max-width:560px){.author-box{flex-direction:column;text-align:center;align-items:center}.ab-meta{justify-content:center}} /* payment + provider logo strips */ .strip-label{text-align:center;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 16px} .logo-strip{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;max-width:920px;margin:0 auto} .pay-badge{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#fff;border-radius:9px;padding:0 15px;height:42px;color:#15151a;box-shadow:0 5px 14px -5px rgba(0,0,0,.55);white-space:nowrap} .pay-badge svg{display:block;height:auto} .pay-badge .mc{position:relative;width:28px;height:18px;flex-shrink:0} .pay-badge .mc::before,.pay-badge .mc::after{content:"";position:absolute;top:0;width:18px;height:18px;border-radius:50%} .pay-badge .mc::before{left:0;background:#eb001b} .pay-badge .mc::after{right:0;background:#f79e1b;mix-blend-mode:multiply} .pay-badge .btc{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#f7931a;color:#fff;font-size:13px;font-weight:700} .prov-chip{display:inline-flex;align-items:center;background:rgba(236,230,216,.04);border:1px solid var(--border);border-radius:999px;padding:9px 17px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--fg);letter-spacing:.01em;transition:border-color .18s,color .18s} .prov-chip:hover{border-color:var(--gold);color:var(--gold-bright)} /* section intro paragraph */ .sec-intro{max-width:760px;margin:0 auto 30px;text-align:center;color:var(--fg-muted);font-size:16px;line-height:1.75} /* methodology criteria cards */ .crit-card{background:var(--card-bg);border:1px solid var(--border-soft);border-radius:16px;padding:24px;transition:border-color .2s,transform .2s} .crit-card:hover{border-color:var(--gold);transform:translateY(-3px)} .crit-num{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--gold);line-height:1} .crit-card h3{margin:12px 0 8px;font-size:17px} .crit-card p{color:var(--fg-muted);font-size:14px;margin:0;line-height:1.6} .crit-weight{margin-top:14px;height:5px;border-radius:999px;background:rgba(236,230,216,.07);overflow:hidden} .crit-weight i{display:block;height:100%;background:linear-gradient(90deg,#c9a24b,#f0d68f)} /* pros / cons cards */ .pc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;max-width:1060px;margin:0 auto} .pc-card{background:var(--card-bg);border:1px solid var(--border-soft);border-radius:16px;padding:22px 24px} .pc-head{display:flex;align-items:center;gap:13px;margin-bottom:18px} .pc-logo{width:46px;height:46px;border-radius:11px;object-fit:cover;background:#fff;border:1px solid var(--border);flex-shrink:0} .pc-name{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--fg)} .pc-score{font-size:12px;color:var(--gold);font-weight:600;margin-top:1px} .pc-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px} .pc-cols h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 9px;font-family:var(--font)} .pc-pros h4{color:var(--emerald)} .pc-cons h4{color:#cf8a6f} .pc-cols ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:8px} .pc-cols li{font-size:13px;color:var(--fg-muted);line-height:1.5;display:flex;gap:8px} .pc-pros li::before{content:"\2713";color:var(--emerald);font-weight:700;flex-shrink:0} .pc-cons li::before{content:"\2013";color:#cf8a6f;font-weight:700;flex-shrink:0} @media(max-width:480px){.pc-cols{grid-template-columns:1fr;gap:14px}} /* data tables (payments, tax) */ .data-table-wrap{max-width:900px;margin:0 auto;overflow-x:auto;border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 50px -30px rgba(0,0,0,.8)} .data-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px} .data-table th{background:linear-gradient(135deg,#1a1e13,#12150d);color:var(--gold);text-align:left;padding:14px 18px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-family:var(--font)} .data-table td{padding:14px 18px;border-top:1px solid var(--border-soft);color:var(--fg-muted)} .data-table tr:hover td{background:var(--card-bg-hi)} .data-table td:first-child{color:var(--fg);font-weight:600} .data-table .dt-ico{display:inline-flex;align-items:center;gap:9px} .data-table .dt-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex-shrink:0;box-shadow:0 0 8px rgba(201,162,75,.5)} /* category top-lists */ .cat-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;max-width:1060px;margin:0 auto} .cat-card{background:var(--card-bg);border:1px solid var(--border-soft);border-radius:16px;padding:22px 24px} .cat-card h3{font-size:16px;margin:0 0 4px;display:flex;align-items:center;gap:9px} .cat-ico{color:var(--gold);font-size:18px} .cat-sub{font-size:12.5px;color:var(--fg-dim);margin:0 0 14px} .cat-card ol{list-style:none;margin:0;counter-reset:c;display:flex;flex-direction:column} .cat-card li{counter-increment:c;display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--border-soft)} .cat-card li:first-child{border-top:none} .cat-card li::before{content:counter(c);width:23px;height:23px;border-radius:7px;background:rgba(201,162,75,.12);color:var(--gold);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .cat-card li a{color:var(--fg);font-weight:600;font-size:14px;text-decoration:none;flex:1} .cat-card li a:hover{color:var(--gold-bright)} .cat-tag{font-size:11px;color:var(--gold);white-space:nowrap} /* ===== CASINO REVIEW PAGE — logo hero ===== */ .review-hero{display:flex;align-items:center;gap:22px;max-width:820px;margin:0 auto 32px;padding:24px;background:var(--card-bg);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:18px;box-shadow:0 20px 50px -30px rgba(0,0,0,.8)} .review-logo{width:112px;height:112px;border-radius:16px;object-fit:cover;background:#fff;border:1px solid var(--border);flex-shrink:0;box-shadow:0 10px 26px -10px rgba(0,0,0,.7)} .review-hero-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .review-rating{color:var(--gold);font-size:18px;letter-spacing:2px;text-shadow:0 1px 6px rgba(201,162,75,.4)} .review-rating span{color:var(--fg-muted);font-size:13px;letter-spacing:0;margin-left:7px} .review-bonus{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--fg)} .review-tags{font-size:12.5px;color:var(--fg-muted)} .review-cta{align-self:flex-start;margin-top:5px;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#f7e2ad,#c9a24b 55%,#a9813a);color:#1a1408;font-family:var(--font);font-weight:700;font-size:15px;padding:12px 24px;border-radius:11px;text-decoration:none;border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 24px -10px rgba(201,162,75,.7);transition:transform .15s,filter .2s} .review-cta:hover{transform:translateY(-2px);filter:brightness(1.05)} @media(max-width:560px){.review-hero{flex-direction:column;text-align:center;align-items:center}.review-hero-info{align-items:center}.review-cta{align-self:center}} /* ===== CONTACT FORM ===== */ .contact-form{max-width:680px;margin:14px auto 0;display:flex;flex-direction:column;gap:16px} .cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cf-field{display:flex;flex-direction:column;gap:7px} .contact-form label{font-size:13px;font-weight:600;color:var(--fg);letter-spacing:.02em} .contact-form input,.contact-form textarea{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--fg);font-family:var(--font);font-size:15px;transition:border-color .15s,box-shadow .15s;width:100%} .contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--fg-dim)} .contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.15)} .contact-form textarea{resize:vertical;min-height:130px;font-family:var(--font)} .cf-submit{align-self:flex-start;background:linear-gradient(135deg,#f7e2ad,#c9a24b 55%,#a9813a);color:#1a1408;font-family:var(--font);font-weight:700;font-size:15px;padding:13px 30px;border-radius:11px;border:1px solid rgba(255,255,255,.2);cursor:pointer;box-shadow:0 10px 24px -10px rgba(201,162,75,.7);transition:transform .15s,filter .2s} .cf-submit:hover{transform:translateY(-2px);filter:brightness(1.05)} @media(max-width:560px){.cf-grid{grid-template-columns:1fr}} /* ===== BREADCRUMBS (visible) ===== */ .breadcrumb{max-width:1180px;margin:0 auto;padding:16px 28px 0;font-size:13px;display:flex;flex-wrap:wrap;gap:7px;align-items:center} .breadcrumb a{color:var(--fg-muted);text-decoration:none;transition:color .15s} .breadcrumb a:hover{color:var(--gold)} .breadcrumb span[aria-current]{color:var(--gold);font-weight:600} .breadcrumb .sep{color:var(--fg-dim);opacity:.7} @media(max-width:768px){.breadcrumb{padding:14px 16px 0;font-size:12.5px}} /* ===== INTERNAL RELATED LINKS ===== */ .related-links{margin:42px 0 0;padding:24px 26px;background:var(--card-bg);border:1px solid var(--border-soft);border-left:3px solid var(--gold);border-radius:16px} .related-links h3{font-family:var(--font-display);color:var(--gold);font-size:19px;margin:0 0 16px} .related-links ul{list-style:none;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px} .related-links li{margin:0} .related-links a{display:flex;align-items:center;gap:9px;color:var(--fg);text-decoration:none;padding:11px 15px;background:rgba(236,230,216,.04);border:1px solid var(--border-soft);border-radius:11px;font-size:14px;font-weight:600;transition:border-color .15s,color .15s,transform .15s} .related-links a:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateX(3px)} .related-links a::before{content:"\2192";color:var(--gold);flex-shrink:0} /* the template hero already shows a big casino logo -> avoid a duplicate inside the summary card */ .review-hero .review-logo{display:none} .review-hero{max-width:760px} /* ===== responsive tables: scroll inside their box instead of pushing the page wider than the viewport ===== */ .data-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} @media(max-width:768px){ /* unwrapped prose/content tables become their own horizontal scroll box */ .prose table,.page-content table,main table:not(.ctable){display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .data-table{min-width:480px} } /* hard stop: nothing may force a horizontal scrollbar on the whole document */ html,body{max-width:100%;overflow-x:hidden} /* category card subtitle + section subtitle (added for static→CMS parity) */ .cat-card .cat-sub{color:var(--fg-muted);font-size:12.5px;margin:0 0 14px;line-height:1.5} .categories-section .section-head p{color:var(--fg-muted);margin-top:8px} /* product_cards bonus + license badge (static->CMS parity) */ .pc-bonus{margin:12px 0 16px;font-size:15px;font-weight:600;color:var(--gold)} .pc-badge,.pc-license{display:inline-block;font-size:11px;font-weight:600;color:var(--gold);background:rgba(201,162,75,.1);border:1px solid rgba(201,162,75,.25);padding:3px 9px;border-radius:999px;margin-top:5px} /* ===== 2026-06-07: article figures, lightbox, centered hero/bluf, mobile ctable logos ===== */ /* centered hero + bluf */ .hero .container{text-align:center} .hero-sub{margin-left:auto;margin-right:auto} .hero-cta{justify-content:center} .bluf{margin-left:auto;margin-right:auto;text-align:center} .bluf-label{justify-content:center} .bluf-chips{justify-content:center} /* article inline figures: float left / right / center on desktop, stack on mobile */ .prose-figure--left{float:left;width:min(42%,360px);margin:6px 30px 16px 0} .prose-figure--right{float:right;width:min(42%,360px);margin:6px 0 16px 30px} .prose-figure--center{float:none;width:auto;max-width:560px;margin:34px auto} .prose-figure img{cursor:zoom-in} .prose h2{clear:both} @media(max-width:640px){.prose-figure--left,.prose-figure--right{float:none;width:auto;max-width:100%;margin:26px auto}} /* image lightbox */ .lightbox{display:none;position:fixed;inset:0;z-index:99998;background:rgba(4,6,5,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:32px;cursor:zoom-out} .lightbox img{max-width:92vw;max-height:88vh;width:auto;height:auto;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.75);cursor:default} .lightbox-close{position:absolute;top:18px;right:22px;width:48px;height:48px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid rgba(236,230,216,.3);color:#ece6d8;font-size:22px;line-height:1;cursor:pointer} .lightbox-close:hover{border-color:var(--gold);color:var(--gold)} /* mobile comparison table: single centered column, big clickable logo (fills most of the card) */ @media(max-width:768px){ .ctable-row,.ctable-row.cr-top{grid-template-columns:1fr;grid-template-rows:none;gap:12px;text-align:center;justify-items:center;padding:24px 16px} .cr-rank{grid-row:auto;grid-column:auto;flex-direction:row;justify-content:center} .cr-casino{grid-row:auto;grid-column:auto;flex-direction:column;align-items:center;text-align:center;gap:12px} .cr-logo-img{width:70vw;height:70vw;max-width:300px;max-height:300px;border-radius:20px} .cr-bonus,.cr-rating,.cr-action{grid-row:auto;grid-column:auto;width:100%} .cr-rating{justify-content:center} } /* mobile: reflow the data table into stacked label:value rows (no horizontal scroll / clipping) */ @media(max-width:600px){ .data-table-wrap{overflow-x:visible} .data-table{min-width:0;width:100%;display:block} .data-table thead{display:none} .data-table tbody{display:block;width:100%} .data-table tr{display:block;width:100%;padding:8px 2px;border-bottom:1px solid var(--border-soft)} .data-table tr:last-child{border-bottom:none} .data-table td{display:flex;justify-content:space-between;align-items:baseline;gap:18px;border:none!important;padding:8px 6px;text-align:right} .data-table td::before{content:attr(data-label);color:var(--gold);font-weight:600;text-align:left;white-space:nowrap} } /* payment-method brand SVG logos inside the white pill */ .pay-badge .pay-ico{width:34px;height:22px;display:block;flex-shrink:0} @media(max-width:480px){.pay-badge{height:38px;padding:0 12px}.pay-badge .pay-ico{width:30px;height:19px}} /* review-page links inside the comparison table */ .cr-name a{color:inherit;text-decoration:none;transition:color .15s} .cr-name a:hover{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px} .cr-review{display:inline-block;font-size:12px;font-weight:600;color:var(--gold);text-decoration:none;letter-spacing:.02em;text-align:center;transition:color .15s} .cr-review:hover{color:var(--gold-bright)} /* footer logo (same brand as header) + centered footer on mobile */ .footer-logo{display:inline-flex;margin-bottom:4px} .footer-logo .logo-text{font-size:22px} .footer-logo:hover .logo-text{color:var(--gold-bright)} @media(max-width:768px){ .footer-top-3{text-align:center} .footer-brand{display:flex;flex-direction:column;align-items:center} .footer-brand .tagline{margin-left:auto;margin-right:auto} .footer-logo{justify-content:center} .footer-links a:hover{padding-left:0} .legal{text-align:center} } /* brand emblem (poker-chip) before the wordmark in header + footer */ .brand-emblem{flex-shrink:0;display:block;filter:drop-shadow(0 2px 6px rgba(201,162,75,.35))} .brand:hover .brand-emblem{filter:drop-shadow(0 2px 8px rgba(240,214,143,.55))} /* ==== siticonprelievoimmediatononaams-com theme override ==== */ /* ============================================================ SKIN: siticonprelievoimmediatononaams-com Art-Deco geometric — gold linework, slate + electric blue. "Siti Con Prelievo Immediato" — DARK theme. Identity: symmetric deco frames, fan-rays, stepped chevrons, hairline gold rules over a deep slate-blue lacquer. ============================================================ */ :root { /* --- Electric blue primary scale --- */ --primary: #2f7dff; --primary-dark: #0f3f9e; --primary-600: #2667e6; --primary-tint: rgba(47, 125, 255, 0.14); /* --- Deco accents --- */ --accent: #58a6ff; --gold: #c9a25a; --gold-bright: #f2d398; --emerald: #3fb6a8; /* --- Slate lacquer backgrounds --- */ --bg: #0a0f1c; --bg-soft: #0e1626; --bg-panel: #121d33; /* --- Foreground --- */ --fg: #eef3fb; --fg-muted: #aebbd2; --fg-dim: #7d8aa6; --muted: #8a97b2; /* --- Borders / deco linework --- */ --border: rgba(201, 162, 90, 0.26); --border-soft: rgba(201, 162, 90, 0.14); --border-strong: rgba(201, 162, 90, 0.52); /* --- Cards --- */ --card-bg: linear-gradient(168deg, #131f37 0%, #0e1727 100%); --card-bg-hi: linear-gradient(168deg, #19294a 0%, #111b30 100%); --card-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(242, 211, 152, 0.08); --card-shadow-hover: 0 30px 64px -26px rgba(8, 22, 54, 0.9), 0 0 0 1px rgba(201, 162, 90, 0.45), inset 0 1px 0 rgba(242, 211, 152, 0.16); /* --- Geometry --- */ --radius: 4px; --radius-sm: 2px; --btn-radius: 2px; /* --- Type --- */ --h1-weight: 900; --font: "Epilogue", system-ui, sans-serif; --font-display: "Fraunces", Georgia, serif; --shadow-btn: 0 12px 30px -14px rgba(47, 125, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22); --success: #3fb6a8; --danger: #e2566a; } /* ============================================================ GLOBAL CANVAS — deco mesh + ray symmetry baked in via gradients ============================================================ */ body { background-color: var(--bg); background-image: radial-gradient(circle at 50% -8%, rgba(47, 125, 255, 0.16), transparent 46%), radial-gradient(circle at 12% 0%, rgba(201, 162, 90, 0.08), transparent 38%), radial-gradient(circle at 88% 4%, rgba(63, 182, 168, 0.07), transparent 40%), repeating-linear-gradient(135deg, rgba(201, 162, 90, 0.035) 0 1px, transparent 1px 16px), repeating-linear-gradient(45deg, rgba(47, 125, 255, 0.03) 0 1px, transparent 1px 16px), linear-gradient(180deg, #0a0f1c 0%, #0b1322 100%); background-attachment: fixed; color: var(--fg); font-family: var(--font); letter-spacing: 0.005em; } ::selection { background: var(--gold); color: #0a0f1c; } a { color: var(--accent); } a:hover { color: var(--gold-bright); } /* ============================================================ NAV — deco frieze with twin gold hairlines ============================================================ */ .nav-sticky { background: linear-gradient(180deg, rgba(10, 15, 28, 0.96), rgba(12, 22, 40, 0.82)); backdrop-filter: blur(14px) saturate(125%); border-bottom: 1px solid var(--border-strong); box-shadow: 0 1px 0 rgba(242, 211, 152, 0.12), 0 14px 40px -26px rgba(0, 0, 0, 0.9); position: sticky; top: 0; z-index: 50; } .nav-sticky::after { content: ""; display: block; height: 2px; background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-bright) 50%, var(--gold) 82%, transparent), repeating-linear-gradient(90deg, transparent 0 9px, rgba(10, 15, 28, 0.6) 9px 10px); opacity: 0.7; } .brand { display: inline-flex; align-items: center; gap: 0.62rem; font-family: var(--font-display); font-weight: 900; letter-spacing: 0.02em; color: var(--fg); } .logo { width: 38px; height: 38px; display: grid; place-items: center; position: relative; background: conic-gradient(from 0deg at 50% 100%, transparent 0deg, rgba(242, 211, 152, 0.22) 18deg, transparent 36deg, rgba(242, 211, 152, 0.22) 54deg, transparent 72deg, rgba(242, 211, 152, 0.22) 90deg, transparent 108deg), linear-gradient(160deg, #16294c, #0d1626); border: 1.5px solid var(--gold); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(10, 15, 28, 0.8), 0 6px 18px -8px rgba(47, 125, 255, 0.6); transform: rotate(45deg); } .logo::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--accent); border-radius: 1px; } .logo > * { transform: rotate(-45deg); color: var(--gold-bright); } .logo-text { font-family: var(--font-display); font-weight: 900; font-size: 1.18rem; letter-spacing: 0.06em; text-transform: uppercase; background: linear-gradient(95deg, var(--gold-bright), var(--gold) 55%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================ HERO — symmetric deco sunburst frame ============================================================ */ .hero-minimal { position: relative; background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(47, 125, 255, 0.22), transparent 60%), conic-gradient(from 180deg at 50% 0%, rgba(201, 162, 90, 0.06) 0deg, transparent 12deg, rgba(201, 162, 90, 0.06) 24deg, transparent 36deg, rgba(201, 162, 90, 0.06) 48deg, transparent 60deg, rgba(201, 162, 90, 0.06) 72deg, transparent 84deg, rgba(201, 162, 90, 0.06) 96deg, transparent 108deg, rgba(201, 162, 90, 0.06) 120deg, transparent 132deg), linear-gradient(180deg, #0c1428, #0a1120); border-bottom: 1px solid var(--border); overflow: hidden; } .hero-minimal::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(760px, 86%); height: 100%; border-left: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); pointer-events: none; } .hero-minimal::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.6; } .hero-minimal-inner { position: relative; text-align: center; z-index: 2; } .hero-minimal-inner h1 { font-family: var(--font-display); font-weight: var(--h1-weight); font-optical-sizing: auto; letter-spacing: -0.012em; line-height: 1.04; color: var(--fg); text-wrap: balance; } .hero-minimal-inner h1 em, .hero-minimal-inner h1 .accent { font-style: italic; color: var(--gold-bright); } .hero-minimal-rule { width: 132px; height: 18px; margin: 1.3rem auto; border: none; background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent), radial-gradient(circle at 50% 50%, var(--accent) 2px, transparent 2.5px); background-repeat: no-repeat; background-position: center 8px, center 8px; background-size: 100% 1px, 8px 8px; position: relative; } .hero-minimal-rule::before, .hero-minimal-rule::after { content: ""; position: absolute; top: 4px; width: 9px; height: 9px; border: 1px solid var(--gold); transform: rotate(45deg); } .hero-minimal-rule::before { left: 30px; } .hero-minimal-rule::after { right: 30px; } .hero-sub { font-family: var(--font); color: var(--fg-muted); font-size: 1.06rem; line-height: 1.7; max-width: 60ch; margin-inline: auto; } .hero-cta { margin-top: 1.8rem; display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; } .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-bright); } .eyebrow::before, .eyebrow::after { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); } .eyebrow::after { transform: scaleX(-1); } .eyebrow-square { width: 8px; height: 8px; background: var(--accent); border: 1px solid var(--gold); transform: rotate(45deg); box-shadow: 0 0 12px rgba(47, 125, 255, 0.8); } /* ============================================================ BUTTONS — stepped deco plates with chevron edges ============================================================ */ .btn { font-family: var(--font); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.82rem; border-radius: var(--btn-radius); padding: 0.82em 1.6em; position: relative; transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease; border: 1px solid transparent; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(180deg, var(--primary), var(--primary-600) 60%, var(--primary-dark)); color: #fff; border-color: rgba(242, 211, 152, 0.45); box-shadow: var(--shadow-btn); } .btn-primary::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 1px; pointer-events: none; } .btn-primary:hover { background: linear-gradient(180deg, #4a92ff, var(--primary) 60%, var(--primary-600)); box-shadow: 0 18px 40px -16px rgba(47, 125, 255, 0.85), 0 0 0 1px var(--gold); } .btn-white { background: linear-gradient(180deg, #f4f1e8, #e7dec9); color: #0d1729; border-color: var(--gold); box-shadow: 0 12px 28px -16px rgba(201, 162, 90, 0.7); } .btn-white:hover { background: linear-gradient(180deg, #fff, #efe7d4); box-shadow: 0 16px 34px -16px rgba(242, 211, 152, 0.85); } .btn-ghost { background: rgba(18, 29, 51, 0.5); color: var(--fg); border: 1px solid var(--border-strong); backdrop-filter: blur(6px); } .btn-ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright); background: rgba(24, 41, 74, 0.6); } .btn-link { background: none; color: var(--accent); padding: 0.4em 0; text-transform: none; letter-spacing: 0.01em; border: none; position: relative; } .btn-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: linear-gradient(90deg, var(--accent), var(--gold)); transform: scaleX(0.3); transform-origin: left; transition: transform 0.2s ease; } .btn-link:hover { color: var(--gold-bright); } .btn-link:hover::after { transform: scaleX(1); } /* ============================================================ BLUF — verdict panel framed in deco gold ============================================================ */ .bluf { background: linear-gradient(165deg, #142banner 0%, #0f1a30 100%); background: linear-gradient(165deg, #14233f 0%, #0f1a30 100%); border: 1px solid var(--border); border-radius: var(--radius); position: relative; box-shadow: var(--card-shadow), inset 0 0 60px -40px rgba(47, 125, 255, 0.6); padding: 1.6rem 1.7rem; } .bluf::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--border-soft); border-radius: 2px; pointer-events: none; } .bluf::after { content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); } .bluf-label { font-family: var(--font); font-weight: 800; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-bright); display: inline-flex; align-items: center; gap: 0.5rem; } .bluf-label::before { content: "◆"; color: var(--accent); font-size: 0.7em; } .bluf-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font); font-weight: 600; font-size: 0.8rem; color: var(--fg); background: rgba(47, 125, 255, 0.12); border: 1px solid var(--border-strong); border-radius: 2px; padding: 0.35em 0.8em; position: relative; } .bluf-chip::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); } /* ============================================================ TRUST BAR — symmetric deco strip ============================================================ */ .trust-bar { background: linear-gradient(180deg, rgba(14, 22, 38, 0.7), rgba(10, 15, 28, 0.5)); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); position: relative; } .trust-bar::before, .trust-bar::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 14px); opacity: 0.3; } .trust-bar::before { top: 0; } .trust-bar::after { bottom: 0; } .value { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--gold-bright); line-height: 1; } .label { font-family: var(--font); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); } /* ============================================================ SECTIONS + HEADINGS ============================================================ */ .section { position: relative; } .section > h2, .section h2, h2.section-title { font-family: var(--font-display); font-weight: 700; font-optical-sizing: auto; letter-spacing: -0.01em; color: var(--fg); position: relative; display: inline-block; } .section > h2::after, h2.section-title::after { content: ""; display: block; margin-top: 0.55rem; width: 64px; height: 3px; background: linear-gradient(90deg, var(--gold-bright), var(--gold) 50%, transparent); box-shadow: 0 0 12px -2px rgba(201, 162, 90, 0.6); } .section h3 { font-family: var(--font-display); font-weight: 600; color: var(--fg); letter-spacing: -0.005em; } /* ============================================================ CASINO CARDS — deco lacquer plates with corner pips ============================================================ */ .card-bg, .casino-card, .product-card, [class*="card"] { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); position: relative; transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .card-bg::before, .casino-card::before, .product-card::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--border-soft); border-radius: 2px; pointer-events: none; transition: border-color 0.25s ease; } .card-bg:hover, .casino-card:hover, .product-card:hover { transform: translateY(-4px); background: var(--card-bg-hi); border-color: var(--border-strong); box-shadow: var(--card-shadow-hover); } .card-bg:hover::before, .casino-card:hover::before, .product-card:hover::before { border-color: rgba(242, 211, 152, 0.3); } /* deco corner pips on cards */ .casino-card::after, .product-card::after { content: ""; position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 10px rgba(201, 162, 90, 0.7); opacity: 0.8; } /* bonus / price emphasis inside cards */ .casino-card .bonus, .product-card .bonus, [class*="bonus"] { font-family: var(--font-display); font-weight: 700; color: var(--gold-bright); } /* rank badges -> deco diamond */ .rank, .badge, [class*="rank"] { font-family: var(--font-display); font-weight: 900; color: var(--gold-bright); } /* ============================================================ TABLES — deco header band ============================================================ */ table { border-color: var(--border-soft); } thead th { font-family: var(--font); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; color: var(--gold-bright); background: linear-gradient(180deg, rgba(20, 35, 63, 0.8), rgba(14, 22, 38, 0.6)); border-bottom: 2px solid var(--gold); } tbody tr { border-bottom: 1px solid var(--border-soft); } tbody tr:hover { background: rgba(47, 125, 255, 0.06); } /* ============================================================ PROSE ============================================================ */ .prose, article, .content { color: var(--fg-muted); line-height: 1.78; } .prose strong, article strong { color: var(--fg); } .prose a, article a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; } .prose a:hover { color: var(--gold-bright); } blockquote { border-left: 3px solid var(--gold); background: rgba(18, 29, 51, 0.5); color: var(--fg-muted); font-family: var(--font-display); font-style: italic; border-radius: 0 var(--radius) var(--radius) 0; padding: 0.9rem 1.2rem; } /* ============================================================ FAQ / accordions / footer accents ============================================================ */ details { border: 1px solid var(--border-soft); border-radius: var(--radius); background: rgba(14, 22, 38, 0.5); } details summary { font-family: var(--font); font-weight: 600; color: var(--fg); } details[open] { border-color: var(--border-strong); } footer { border-top: 1px solid var(--border); background: linear-gradient(180deg, transparent, rgba(8, 12, 22, 0.6)); } footer::before { content: ""; display: block; height: 2px; background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-bright) 50%, var(--gold) 70%, transparent); opacity: 0.5; margin-bottom: 1.5rem; } /* focus visibility for accessibility */ :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; } /* ===== block: notfound ===== */ .notfound-section{padding:clamp(60px,12vh,120px) 0;text-align:center} .notfound-section .nf-inner{max-width:640px;margin:0 auto;padding:0 20px} .notfound-section .nf-code{font-size:clamp(110px,26vw,260px);line-height:.85;letter-spacing:.01em;margin:0 0 4px;color:var(--gold,currentColor);opacity:.92} .notfound-section .nf-title{font-size:clamp(24px,4vw,40px);margin:0 0 14px} .notfound-section .nf-text{font-size:17px;line-height:1.6;opacity:.72;margin:0 0 28px} .notfound-section .nf-inner .btn{margin:0 auto}