/* Shared site shell: sticky activity ticker + bottom navigation */ :root { /* Total fixed-top inset (ticker + donor strip when visible). The 52px * here is only the pre-JS fallback: app.js measures the rendered bars * and republishes --site-shell-top as an inline style on (and * adds html.shell-top-measured) so every consumer clears BOTH bars. */ --site-shell-top: 52px; /* Static height of the ticker bar ONLY. Used for the ticker's own * min-height and the donor strip's top offset — must NOT reference * --site-shell-top or the JS measurement would feed back into the * bars' own geometry and grow them. */ --site-ticker-height: 52px; --site-donor-strip-height: 30px; --site-shell-bottom: 110px; /* ── Site-shell stacking scale ────────────────────────────────────────── * One ordered ladder, lowest rung first. Every fixed part of the shell * MUST take its z-index from a rung here rather than an ad-hoc literal — * that is what makes "the overlay covers all chrome" checkable by reading * this block instead of by grepping the file. * * --site-nav-z baseline for fixed shell chrome (the bottom nav). * --site-donor-z fixed top chrome, above the nav bar. * --site-ticker-z fixed top chrome, above the donor strip. * --site-overlay-z the OVERLAY rung: an open drawer + its scrim. Must * stay strictly above EVERY chrome rung above, because * a scrim that something can out-rank is not a scrim. * Deliberately left below the modal families (>=1200: * promo/nudges/chat/casino-nav) so a modal opened from * the drawer still lands on top. * * --site-drawer-z is NOT a rung on this ladder: it only orders the drawer * above the scrim *inside* the .site-bottom-nav wrapper (which is its own * stacking context), so it is never compared against page-level chrome. * Treating it as the overlay rung is exactly the bug fixed further down. */ --site-nav-z: 1080; --site-drawer-z: 1088; --site-donor-z: calc(var(--site-nav-z) + 18); --site-ticker-z: calc(var(--site-nav-z) + 20); --site-overlay-z: calc(var(--site-nav-z) + 30); --site-safe-area-bottom: env(safe-area-inset-bottom, 0px); } /* When the donor strip is rendered (server-side; controlled by `hidden` * attribute on .site-donor-strip), the body needs extra top padding so the * strip doesn't overlap page content. The strip self-removes via the * `hidden` attribute when the donor list is empty, so the .has-donor-strip * class is what actually triggers the padding bump. */ body.has-donor-strip { padding-top: calc(var(--site-ticker-height) + var(--site-donor-strip-height)) !important; } /* Once app.js has measured the real combined fixed-top height, * --site-shell-top already includes the donor strip — use it directly * (adding the strip height again would double-count it). */ html.shell-top-measured body, html.shell-top-measured body.has-donor-strip { padding-top: var(--site-shell-top) !important; } .navbar, #mobileInfoStrip, #mobileBottomNav { display: none !important; } body { padding-top: var(--site-shell-top) !important; padding-bottom: calc(var(--site-shell-bottom) + var(--site-safe-area-bottom)) !important; min-height: 100vh; min-height: 100dvh; } .site-bottom-nav-shell, .site-nav-drawer, .site-nav-backdrop, .site-bottom-nav-item { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .main-content { padding-top: 1.25rem; } .site-ticker-shell { position: fixed; top: 0; left: 0; right: 0; z-index: var(--site-ticker-z); display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.75rem; min-height: var(--site-ticker-height, 52px); padding: 0.5rem 0.9rem; background: linear-gradient(90deg, rgba(9, 20, 31, 0.98), rgba(17, 34, 48, 0.96) 36%, rgba(11, 18, 30, 0.98)), radial-gradient(circle at top left, rgba(255, 140, 0, 0.14), transparent 42%); border-bottom: 1px solid rgba(158, 179, 199, 0.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); } .site-ticker-brand { min-width: 0; } .ticker-brand-link { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: #f8fafc; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; } .ticker-brand-link img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.25)); } /* ── Ticker Constants Zone ─────────────────────────────────── */ .site-ticker-constants { display: flex; align-items: center; gap: 0.45rem; min-width: 0; flex-shrink: 0; border-left: 1px solid rgba(148, 163, 184, 0.12); padding-left: 0.65rem; } .ticker-const-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; font-family: 'Rajdhani', sans-serif; letter-spacing: 0.03em; white-space: nowrap; text-decoration: none; transition: opacity 0.2s, background 0.2s; min-width: 0; overflow: hidden; } .ticker-const-pill i { font-size: 0.8125rem; flex-shrink: 0; } .ticker-const-pill span { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ticker-const-hidden { display: none !important; } /* Entrance animation when pills become visible */ @keyframes ticker-pill-enter { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } .ticker-const-pill:not(.ticker-const-hidden) { animation: ticker-pill-enter 0.3s ease-out; } /* Discord pill */ .ticker-const-discord { background: rgba(88, 101, 242, 0.25); border: 1px solid rgba(88, 101, 242, 0.4); color: #bdc3f9; } .ticker-const-discord:hover { background: rgba(88, 101, 242, 0.45); color: #fff; } .ticker-const-vote { background: rgba(34, 197, 94, 0.22); border: 1px solid rgba(74, 222, 128, 0.52); color: #bbf7d0; } .ticker-const-vote:hover { background: rgba(34, 197, 94, 0.42); color: #fff; } /* Boss pill */ .ticker-const-boss { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; cursor: default; } .ticker-const-boss[data-state="active"] { background: rgba(239, 68, 68, 0.3); border-color: rgba(239, 68, 68, 0.55); color: #fef2f2; animation: ticker-pulse-boss 2s ease-in-out infinite; } @keyframes ticker-pulse-boss { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } 50% { box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.3); } } .ticker-const-boss[data-state="waiting"] { background: rgba(251, 191, 36, 0.15); border-color: rgba(251, 191, 36, 0.3); color: #fde68a; } .ticker-const-boss[data-state="waiting"].is-soon { background: rgba(251, 191, 36, 0.25); border-color: rgba(251, 191, 36, 0.5); color: #fbbf24; animation: ticker-boss-soon-pulse 1.5s ease-in-out infinite; } @keyframes ticker-boss-soon-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* Story pill */ .ticker-const-story { background: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.3); color: #c4b5fd; cursor: default; } .ticker-const-story[data-state="active"] { background: rgba(139, 92, 246, 0.3); border-color: rgba(139, 92, 246, 0.55); color: #f5f3ff; animation: ticker-pulse-story 3s ease-in-out infinite; } .ticker-const-story[data-state="holding"] { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.4); color: #ddd6fe; } .ticker-const-story[data-state="warming_up"] { background: rgba(251, 146, 60, 0.2); border-color: rgba(251, 146, 60, 0.4); color: #fed7aa; animation: ticker-pulse-story-warmup 3.5s ease-in-out infinite; } @keyframes ticker-pulse-story { 0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); } 50% { box-shadow: 0 0 8px 2px rgba(139, 92, 246, 0.3); } } @keyframes ticker-pulse-story-warmup { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0); } 50% { box-shadow: 0 0 8px 2px rgba(251, 146, 60, 0.25); } } /* Live event pill */ .ticker-const-boost { background: rgba(34, 197, 94, 0.16); border: 1px solid rgba(34, 197, 94, 0.34); color: #bbf7d0; cursor: default; } .ticker-const-boost[data-state="active"] { background: rgba(34, 197, 94, 0.28); border-color: rgba(34, 197, 94, 0.52); color: #f0fdf4; animation: ticker-pulse-boost 2.1s ease-in-out infinite; } .ticker-const-boost[data-state="ending"] { background: rgba(245, 158, 11, 0.22); border-color: rgba(245, 158, 11, 0.48); color: #fef3c7; animation: ticker-pulse-boost-ending 1.8s ease-in-out infinite; } .ticker-const-boost[data-state="pending"] { background: rgba(255, 215, 0, 0.16); border-color: rgba(255, 215, 0, 0.4); color: #fde68a; } @keyframes ticker-pulse-boost { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } 50% { box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.28); } } @keyframes ticker-pulse-boost-ending { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } 50% { box-shadow: 0 0 9px 2px rgba(245, 158, 11, 0.3); } } /* Live event pill */ .ticker-const-event { background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(16, 185, 129, 0.34); color: #a7f3d0; cursor: default; } .ticker-const-event[data-state="active"] { background: rgba(16, 185, 129, 0.28); border-color: rgba(16, 185, 129, 0.52); color: #ecfdf5; animation: ticker-pulse-event 2.2s ease-in-out infinite; } .ticker-const-event[data-state="ending"] { background: rgba(245, 158, 11, 0.22); border-color: rgba(245, 158, 11, 0.48); color: #fef3c7; animation: ticker-pulse-event-ending 1.8s ease-in-out infinite; } @keyframes ticker-pulse-event { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } 50% { box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.28); } } @keyframes ticker-pulse-event-ending { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } 50% { box-shadow: 0 0 9px 2px rgba(245, 158, 11, 0.3); } } .site-ticker-viewport { min-width: 0; overflow: hidden; position: relative; border-left: 1px solid rgba(148, 163, 184, 0.12); padding-left: 0.75rem; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .site-ticker-track { display: inline-flex; align-items: center; gap: 1.5rem; white-space: nowrap; will-change: transform; width: max-content; min-width: 100%; flex-wrap: nowrap; padding-right: 1.5rem; } .site-ticker-track.is-paused { transition: none; } .site-ticker-item { display: inline-flex; align-items: center; gap: 0.5rem; color: #f2e8d0; font-size: 0.88rem; font-weight: 500; } .site-ticker-item strong { color: #f8fafc; } .site-ticker-meta { color: rgba(240, 233, 216, 0.78); font-size: 0.8125rem; } .site-ticker-dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: linear-gradient(135deg, #ff6b4a, #ffaa00); box-shadow: 0 0 12px rgba(255, 170, 0, 0.35); flex-shrink: 0; } /* Ticker highlight: Gold — jackpots, big wins, giveaway */ .site-ticker-item.ticker-gold { color: #ffd700; } .site-ticker-item.ticker-gold strong { color: #ffdf40; text-shadow: 0 0 6px rgba(255, 215, 0, 0.5); } .site-ticker-item.ticker-gold .site-ticker-dot { background: linear-gradient(135deg, #ffd700, #ffaa00); box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); } .site-ticker-item.ticker-gold .site-ticker-meta { color: rgba(255, 223, 100, 0.7); } /* Ticker category: Casino wins */ .site-ticker-item.ticker-casino { color: #c4b5fd; } .site-ticker-item.ticker-casino strong { color: #ddd6fe; } .site-ticker-item.ticker-casino .site-ticker-dot { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 0 10px rgba(139, 92, 246, 0.4); } /* Ticker category: Premium shop */ .site-ticker-item.ticker-premium { color: #fbcfe8; } .site-ticker-item.ticker-premium strong { color: #fce7f3; } .site-ticker-item.ticker-premium .site-ticker-dot { background: linear-gradient(135deg, #f472b6, #db2777); box-shadow: 0 0 10px rgba(236, 72, 153, 0.4); } /* Ticker category: Purchases */ .site-ticker-item.ticker-purchase { color: #bbf7d0; } .site-ticker-item.ticker-purchase strong { color: #dcfce7; } .site-ticker-item.ticker-purchase .site-ticker-dot { background: linear-gradient(135deg, #4ade80, #16a34a); box-shadow: 0 0 10px rgba(74, 222, 128, 0.4); } /* Ticker category: Giveaway */ .site-ticker-item.ticker-giveaway { color: #fde68a; } .site-ticker-item.ticker-giveaway strong { color: #fef3c7; } /* Ticker category: Boss kills & rewards */ .site-ticker-item.ticker-boss { color: #fca5a5; } .site-ticker-item.ticker-boss strong { color: #fecaca; } .site-ticker-item.ticker-boss .site-ticker-dot { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 0 10px rgba(248, 113, 113, 0.4); } /* Ticker category: Gift/reward claims */ .site-ticker-item.ticker-reward { color: #ff9d5c; } .site-ticker-item.ticker-reward strong { color: #ffc7a3; } .site-ticker-item.ticker-reward .site-ticker-dot { background: linear-gradient(135deg, #ff8a50, #ff4500); box-shadow: 0 0 10px rgba(255, 138, 80, 0.4); } /* Gold highlight overrides category colors (highest priority) */ .site-ticker-item.ticker-gold.ticker-casino, .site-ticker-item.ticker-gold.ticker-giveaway { color: #ffd700; } .site-ticker-item.ticker-gold.ticker-casino strong, .site-ticker-item.ticker-gold.ticker-giveaway strong { color: #ffdf40; text-shadow: 0 0 6px rgba(255, 215, 0, 0.5); } .site-ticker-loading { color: rgba(226, 232, 240, 0.8); font-size: 0.84rem; } /* ---------------- Recent-donor scroller ---------------- * Sits directly below the activity-ticker shell, fixed at the top of the * viewport. Auto-scrolling marquee of recent Stripe-paid donations within * the last 90 days. The aside is hidden (via the `hidden` attribute) until * the JS hydrates it with at least one entry; on hydration the JS also * adds the `has-donor-strip` class to so the body padding-top * compensates for the strip height. */ .site-donor-strip { position: fixed; /* Sits directly below the ticker bar — pinned to the ticker's own * height, NOT --site-shell-top (which, once measured by app.js, * includes this strip and would push it below itself). */ top: var(--site-ticker-height, 52px); left: 0; right: 0; z-index: var(--site-donor-z); display: grid; /* THREE cells, not two: [TOP DONATOR] [Recent Donors] [marquee viewport]. This used to be `auto 1fr` here and was corrected to `auto auto 1fr` by an inline