/* AquaSpins — dark brown sands meet aqua tide. 3D sea-vibe palette. */ :root { --bg: #1a0f08; --bg-2: #251609; --bg-3: #2f1d10; --accent: #22d3ee; /* aqua cyan CTA */ --accent-2: #0891b2; /* deeper sea */ --accent-3: #67e8f9; /* foam highlight */ --sand: #d4a373; --surface: rgba(255,255,255,0.04); --surface-2: rgba(34,211,238,0.08); --text: #f5ead8; --muted: rgba(245,234,216,0.7); --line: rgba(212,163,115,0.18); } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); } /* Layered ocean-floor backdrop, applied to via class .ocean-bg */ .ocean-bg { background: radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,0.10), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(8,145,178,0.12), transparent 65%), radial-gradient(700px 400px at 50% 110%, rgba(103,232,249,0.08), transparent 70%), linear-gradient(180deg, #1a0f08 0%, #20140a 40%, #2a190c 100%); background-attachment: fixed; } /* Wavy section separator */ .wave-sep { position: relative; height: 60px; background: linear-gradient(180deg, transparent 0%, rgba(34,211,238,0.06) 100%); -webkit-mask: radial-gradient(40px 30px at 20px 0, transparent 98%, #000 100%) 0 0 / 40px 30px repeat-x; mask: radial-gradient(40px 30px at 20px 0, transparent 98%, #000 100%) 0 0 / 40px 30px repeat-x; } /* ----- Prose ----- */ .prose, .prose-invert { line-height: 1.75; color: var(--text); } .prose h1, .prose-invert h1 { font-size: 2.5rem; font-weight: 800; margin: 1rem 0 1.25rem; line-height: 1.15; color: var(--accent-3); } .prose h2, .prose-invert h2 { font-size: 1.6rem; font-weight: 700; margin: 2.25rem 0 0.75rem; line-height: 1.3; color: var(--accent-3); } .prose h3, .prose-invert h3 { font-size: 1.2rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: var(--sand); } .prose p, .prose-invert p { margin: 0.85rem 0; color: var(--text); } .prose ul, .prose-invert ul { list-style: disc; padding-left: 1.4rem; margin: 0.85rem 0; } .prose ol, .prose-invert ol { list-style: decimal; padding-left: 1.4rem; margin: 0.85rem 0; } .prose li, .prose-invert li { margin: 0.3rem 0; } .prose a, .prose-invert a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .prose strong, .prose-invert strong { font-weight: 700; color: var(--accent-3); } .prose table, .prose-invert table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.92rem; overflow: hidden; border-radius: 0.75rem; } .prose th, .prose td, .prose-invert th, .prose-invert td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); text-align: left; } .prose th, .prose-invert th { background: var(--surface-2); color: var(--accent-3); font-weight: 600; } .prose details { background: var(--surface); border: 1px solid var(--line); border-radius: 0.85rem; padding: 0.85rem 1rem; margin: 0.6rem 0; } .prose summary { cursor: pointer; font-weight: 600; color: var(--accent-3); } /* ----- Responsible-gambling quiz ----- */ .rg-quiz { background: linear-gradient(180deg, rgba(34,211,238,0.06), rgba(8,145,178,0.04)); border: 1px solid var(--line); border-radius: 1.75rem; padding: 1.75rem; box-shadow: 0 20px 50px -20px rgba(8,145,178,0.4); } .rg-quiz fieldset { border: 0; padding: 0; } .rg-quiz label { cursor: pointer; color: var(--text); } /* ----- Slot / live card ----- */ .slot-card { position: relative; border-radius: 1.25rem; overflow: hidden; aspect-ratio: 1; background: var(--bg-3); border: 1px solid var(--line); } .slot-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .slot-card:hover img { transform: scale(1.08); } .slot-card .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.6rem 0.7rem; background: linear-gradient(180deg, transparent, rgba(26,15,8,0.92)); color: var(--text); } .slot-card .meta h3 { font-size: 0.85rem; font-weight: 700; line-height: 1.15; margin: 0; color: var(--accent-3); } .slot-card .meta p { font-size: 0.7rem; opacity: 0.75; margin: 2px 0 0; } .slot-card .badge { position: absolute; top: 0.55rem; left: 0.55rem; background: var(--accent); color: #07212b; font-size: 0.62rem; font-weight: 800; padding: 0.2rem 0.55rem; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 4px 14px -4px rgba(34,211,238,0.6); } /* ----- Bubble pop on hover for nav pills ----- */ .pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 0.85rem; transition: all 0.25s ease; } .pill:hover { background: var(--surface-2); border-color: var(--accent); transform: translateY(-2px); } /* ----- 3D aqua CTA button ----- */ .cta-aqua { position: relative; display: inline-block; background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); color: #07212b; font-weight: 800; padding: 0.85rem 1.75rem; border-radius: 999px; box-shadow: inset 0 -3px 0 rgba(7,33,43,0.25), inset 0 2px 0 rgba(255,255,255,0.35), 0 12px 30px -8px rgba(34,211,238,0.55), 0 2px 0 #0e7490; transition: transform 0.2s ease, box-shadow 0.2s ease; text-shadow: 0 1px 0 rgba(255,255,255,0.2); } .cta-aqua:hover { transform: translateY(-2px); box-shadow: inset 0 -3px 0 rgba(7,33,43,0.25), inset 0 2px 0 rgba(255,255,255,0.4), 0 18px 40px -8px rgba(34,211,238,0.75), 0 2px 0 #0e7490; } .cta-aqua:active { transform: translateY(1px); } /* 3D panel — like a porthole or shell */ .panel-3d { background: linear-gradient(180deg, rgba(47,29,16,0.95), rgba(26,15,8,0.95)); border: 1px solid var(--line); border-radius: 2rem; box-shadow: inset 0 1px 0 rgba(212,163,115,0.18), inset 0 -2px 0 rgba(0,0,0,0.5), 0 30px 60px -20px rgba(0,0,0,0.7); } .glass-panel { background: rgba(15,9,4,0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(34,211,238,0.18); border-radius: 1.5rem; } /* ===== ANIMATIONS — chosen: float, shimmer ===== */ @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(0.3deg); } } .float { animation: float 5s ease-in-out infinite; } .float-slow { animation: float 8s ease-in-out infinite; } .float-delay-1 { animation-delay: -1.5s; } .float-delay-2 { animation-delay: -3s; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .shimmer-text { background: linear-gradient(110deg, var(--accent) 0%, #ffffff 45%, var(--accent-3) 55%, var(--accent) 100%); background-size: 200% 100%; animation: shimmer 4s linear infinite; -webkit-background-clip: text; background-clip: text; color: transparent; } .shimmer-edge { position: relative; overflow: hidden; } .shimmer-edge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%); background-size: 200% 100%; animation: shimmer 3.5s linear infinite; pointer-events: none; } /* Bubbles — pure CSS, sea decoration */ .bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .bubble { position: absolute; bottom: -40px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), rgba(34,211,238,0.25) 60%, transparent 70%); animation: rise 14s linear infinite; } .bubble.b2 { left: 12%; width: 26px; height: 26px; animation-duration: 18s; animation-delay: -3s; } .bubble.b3 { left: 30%; width: 10px; height: 10px; animation-duration: 11s; animation-delay: -7s; } .bubble.b4 { left: 55%; width: 30px; height: 30px; animation-duration: 22s; animation-delay: -1s; } .bubble.b5 { left: 72%; width: 14px; height: 14px; animation-duration: 13s; animation-delay: -9s; } .bubble.b6 { left: 88%; width: 22px; height: 22px; animation-duration: 19s; animation-delay: -5s; } @keyframes rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.8; } 100% { transform: translateY(-700px) translateX(20px); opacity: 0; } } /* Big-winner overlay */ .big-winner { position: relative; } .big-winner__overlay { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; background: rgba(7,33,43,0.78); backdrop-filter: blur(10px); padding: 0.85rem 1.1rem; border-radius: 1rem; font-size: 0.95rem; color: var(--text); border: 1px solid rgba(34,211,238,0.3); } /* Latest bets table */ .latest-bets { background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; padding: 1.25rem; } .latest-bets th { color: var(--accent-3); } .latest-bets td { padding: 0.45rem 0.5rem; } /* Feature emoji tiles */ .feature-tile { background: linear-gradient(160deg, rgba(34,211,238,0.08), rgba(8,145,178,0.04)); border: 1px solid var(--line); border-radius: 1.5rem; padding: 1.5rem; position: relative; overflow: hidden; } .feature-tile .emoji { font-size: 2rem; display: inline-block; } /* Bento card */ .bento { background: var(--surface); border: 1px solid var(--line); border-radius: 1.5rem; padding: 1.5rem; position: relative; } .bento.accent { background: linear-gradient(135deg, rgba(34,211,238,0.10), rgba(8,145,178,0.05)); border-color: rgba(34,211,238,0.25); } /* Tabs */ .tab-btn { padding: 0.6rem 1.2rem; border-radius: 999px; background: var(--surface); color: var(--text); border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: 0.9rem; } .tab-btn.active { background: var(--accent); color: #07212b; border-color: var(--accent); } /* Review card */ .review-card { background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; padding: 1.25rem; } .review-card header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; } .review-card .stars { color: var(--accent-3); } .review-card footer { font-size: 0.75rem; opacity: 0.6; margin-top: 0.6rem; } /* CTA card on inner pages */ .cta-card { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #07212b; } .cta-card h2 { color: #07212b; } .cta-card .btn-dark { display: inline-block; background: #0a0501; color: var(--accent-3); font-weight: 700; padding: 0.85rem 2rem; border-radius: 999px; } /* Hide scrollbar for marquee-style rows */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }