/* Sala Secreta global banner — carregado no para evitar repaint após o HTML */ html:not(.ss-banner-ready) #sala-secreta-banner { visibility: hidden; } html.ss-banner-ready #sala-secreta-banner { visibility: visible; } .sala-secreta-banner { background: linear-gradient(135deg, #0a1628 0%, #1e3a8a 45%, #2563eb 100%); border-bottom: 1px solid rgba(96, 165, 250, 0.45); box-shadow: 0 2px 12px rgba(37, 99, 235, 0.2); position: relative; z-index: 1000; overflow: hidden; padding: 13px 0; } .sala-secreta-banner.is-countdown-active, html.ss-banner-countdown:not(.ss-banner-expired) #sala-secreta-banner { background: linear-gradient(135deg, #1a0a0a 0%, #7f1d1d 38%, #991b1b 100%); border-bottom-color: rgba(248, 113, 113, 0.4); } .sala-secreta-banner.is-expired, html.ss-banner-expired #sala-secreta-banner, #sala-secreta-banner.is-expired, #sala-secreta-banner[data-ss-static="expired"] { background: linear-gradient(135deg, #0c1929 0%, #1e3a8a 55%, #1d4ed8 100%) !important; border-bottom-color: rgba(125, 211, 252, 0.4) !important; } .sala-secreta-banner.is-expired .banner-pulse, .sala-secreta-banner.is-expired .banner-label, .sala-secreta-banner.is-expired .banner-countdown, .sala-secreta-banner.is-expired .banner-text, .sala-secreta-banner.is-expired .banner-mobile-line, html.ss-banner-expired #sala-secreta-banner .banner-pulse, html.ss-banner-expired #sala-secreta-banner .banner-label, html.ss-banner-expired #sala-secreta-banner .banner-countdown, html.ss-banner-expired #sala-secreta-banner .banner-text, html.ss-banner-expired #sala-secreta-banner .banner-mobile-line { display: none !important; } .sala-secreta-banner.is-expired .banner-thanks, html.ss-banner-expired #sala-secreta-banner .banner-thanks { display: inline-flex; align-items: center; gap: 0.45rem; color: #f8fafc; font-weight: 600; font-size: 0.98rem; line-height: 1.35; } .banner-thanks-copy { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 0; } .banner-thanks-stat { display: none; font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: #e2e8f0; } .banner-thanks-stat strong { color: #f3dca0; font-weight: 800; } .sala-secreta-banner.is-expired .banner-thanks-stat, html.ss-banner-expired #sala-secreta-banner .banner-thanks-stat { display: block; } .sala-secreta-banner.is-expired .banner-thanks-emoji { font-size: 1.15rem; line-height: 1; flex-shrink: 0; } .sala-secreta-banner-inner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: nowrap; min-height: 2.35rem; } .sala-secreta-banner-main { display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none !important; color: #f1f5ff; font-size: 0.95rem; font-weight: 600; flex-wrap: nowrap; } .sala-secreta-banner-main:hover { color: #fff; } .banner-pulse { width: 8px; height: 8px; background: #fbbf24; border-radius: 50%; flex-shrink: 0; } .sala-secreta-banner.is-countdown-active .banner-pulse, html.ss-banner-countdown #sala-secreta-banner .banner-pulse { background: #f87171; } .banner-label { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1a1a; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; flex-shrink: 0; } .sala-secreta-banner.is-countdown-active .banner-label, html.ss-banner-countdown #sala-secreta-banner .banner-label { background: linear-gradient(135deg, #fecaca, #ef4444); color: #450a0a; } .banner-countdown { display: none; align-items: center; justify-content: center; min-width: 7.5rem; padding: 5px 14px; border-radius: 8px; font-family: 'Inter', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 900; letter-spacing: 0.08em; line-height: 1; color: #fff; background: rgba(69, 10, 10, 0.55); border: 1px solid rgba(252, 165, 165, 0.6); flex-shrink: 0; } .banner-mobile-line { display: none; color: #f8fafc; font-weight: 600; font-variant-numeric: tabular-nums; } .sala-secreta-banner.is-countdown-active .banner-countdown, html.ss-banner-countdown #sala-secreta-banner .banner-countdown { display: inline-flex; } html.ss-banner-countdown:not(.ss-banner-cd-ready) #sala-secreta-banner .banner-countdown { visibility: hidden; } html.ss-banner-countdown.ss-banner-cd-ready #sala-secreta-banner .banner-countdown { visibility: visible; } .sala-secreta-banner.is-countdown-critical .banner-countdown { border-color: #fff; } .banner-text { color: #f8fafc; font-weight: 600; } .sala-secreta-banner.is-countdown-active .banner-text, html.ss-banner-countdown:not(.ss-banner-expired) #sala-secreta-banner .banner-text { color: #fecaca; } .banner-thanks { display: none; } .sala-secreta-banner.is-countdown-active .banner-mobile-line, html.ss-banner-countdown #sala-secreta-banner .banner-mobile-line { color: #fecaca; } .banner-cta-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none !important; color: #fbbf24; font-weight: 800; font-size: 0.95rem; white-space: nowrap; flex-shrink: 0; } .banner-cta-link:hover { color: #fff; } .sala-secreta-banner.is-countdown-active .banner-cta-link, html.ss-banner-countdown:not(.ss-banner-expired) #sala-secreta-banner .banner-cta-link { color: #fecaca; } .sala-secreta-banner.is-expired .banner-cta-link, html.ss-banner-expired #sala-secreta-banner .banner-cta-link, #sala-secreta-banner.is-expired .banner-cta-link, #sala-secreta-banner[data-ss-static="expired"] .banner-cta-link { color: #ecfdf5 !important; background: rgba(4, 120, 87, 0.45) !important; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(52, 211, 153, 0.5) !important; } .banner-cta-arrow { display: inline-block; } .sala-secreta-banner.is-expired .banner-cta-arrow, html.ss-banner-expired #sala-secreta-banner .banner-cta-arrow { display: none; } @media (max-width: 768px) { .sala-secreta-banner { padding: 10px 0; } .sala-secreta-banner-inner { gap: 8px; min-height: 2.1rem; } .sala-secreta-banner-main { font-size: 0.85rem; gap: 8px; } .sala-secreta-banner:not(.is-expired) .banner-text, html:not(.ss-banner-expired) #sala-secreta-banner .banner-text { display: none; } .sala-secreta-banner.is-countdown-active .banner-mobile-line, html.ss-banner-countdown:not(.ss-banner-expired) #sala-secreta-banner .banner-mobile-line, .banner-mobile-line.is-visible { display: inline; } .sala-secreta-banner.is-expired .banner-thanks, html.ss-banner-expired #sala-secreta-banner .banner-thanks { font-size: 0.88rem; max-width: min(100%, 18rem); text-align: left; } .sala-secreta-banner.is-expired .banner-thanks-copy, html.ss-banner-expired #sala-secreta-banner .banner-thanks-copy { align-items: center; text-align: center; } .banner-cta-link { font-size: 0.82rem; } }