/* * ============================================================ * CLOUD649 THEME - Shared Design System * Copyright (c) 2024-2026 10015075 Canada Inc. * ============================================================ * * This file contains all shared styles for Cloud649 pages: * - CSS Variables (colors, gradients) * - Cosmic background elements * - Bullseye ring colors * - Ball convergence/hit/miss colors * - Common components (stats-banner, buttons, cards) * - Animations * - Typography * * Usage: Add to any page's : * * ============================================================ */ /* ============================================================ CSS VARIABLES - The Core Color Palette ============================================================ */ :root { /* Background Colors */ --bg-deep: #030a15; --bg-section: #061428; --bg-card: #0a1e3d; --bg-card-light: #0d2545; /* Accent Colors */ --accent-cyan: #4dd7ff; --accent-teal: #0891b2; --accent-green: #22c55e; --accent-gold: #fbbf24; --accent-purple: #8b5cf6; --accent-red: #ef4444; /* Text Colors */ --text-primary: #ffffff; --text-muted: #b9d4ff; --text-dim: #6b8cba; /* Border Colors */ --border-subtle: rgba(77, 215, 255, 0.15); --border-glow: rgba(77, 215, 255, 0.3); /* Bullseye Ring Colors */ --ring-5-bg: radial-gradient(circle at 30% 30%, #1a3a5c, #0a1628 60%, #050d18 100%); --ring-5-border: #0a1628; --ring-4-bg: radial-gradient(circle at 30% 30%, #6ee0ff, #4dd7ff 40%, #3ecaf0 100%); --ring-4-border: #2a5a7a; --ring-3-bg: radial-gradient(circle at 30% 30%, #5ed4c8, #3ecac0 40%, #2ab5a8 100%); --ring-3-border: #1a8a7a; --ring-2-bg: radial-gradient(circle at 30% 30%, #7eeaa0, #4CAF75 40%, #3d9960 100%); --ring-2-border: #2d7a4a; --ring-1-bg: radial-gradient(circle at 35% 35%, #ffed4d, #ffd700 40%, #e6b800 100%); --ring-1-border: #fff; /* Ball Convergence Colors */ --ball-conv-5: radial-gradient(circle at 30% 30%, #ffed4d, #ffd700 40%, #e6b800 100%); --ball-conv-4: radial-gradient(circle at 30% 30%, #7eeaa0, #4CAF75 40%, #3d9960 100%); --ball-conv-3: radial-gradient(circle at 30% 30%, #5ed4c8, #3ecac0 40%, #2ab5a8 100%); --ball-conv-2: radial-gradient(circle at 30% 30%, #6ee0ff, #4dd7ff 40%, #3ecaf0 100%); --ball-conv-1: radial-gradient(circle at 30% 30%, #2a4a6c, #1a3a5c 40%, #0a1628 100%); /* Hit/Miss Colors */ --ball-hit: radial-gradient(circle at 30% 30%, #4ade80, #22c55e 40%, #16a34a 100%); --ball-bonus-hit: radial-gradient(circle at 30% 30%, #7eeaa0, #4CAF75 40%, #3d9960 100%); --ball-miss: radial-gradient(circle at 30% 30%, #b8c4d4, #94a3b8 40%, #64748b 100%); --ball-not-predicted: radial-gradient(circle at 30% 30%, #e2e8f0, #cbd5e1 40%, #94a3b8 100%); } /* ============================================================ BASE STYLES ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-deep); min-height: 100vh; color: var(--text-primary); position: relative; overflow-x: hidden; } /* Ensure content appears above cosmic background, but exclude fixed-position overlays and modals */ body > *:not(.cosmic-background):not(.jackpot-banner):not(.confetti-container):not(.screen-flash):not([class*="overlay"]):not([class*="modal"]):not(.library-drawer):not(.back-link) { position: relative; z-index: 1; } /* ============================================================ COSMIC BACKGROUND - Pure CSS Galaxy ============================================================ */ .cosmic-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #000000 0%, #030a15 10%, #061428 35%, #0a1e3d 65%, #061428 100% ); overflow: hidden; z-index: 0; pointer-events: none; /* Allow clicks through */ } /* Override for jackpot banners to ensure they appear above everything */ .jackpot-banner { position: fixed !important; z-index: 99999 !important; } /* Nebula Glows */ .nebula { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.4; animation: nebulaPulse 8s ease-in-out infinite; } .nebula-1 { width: 600px; height: 400px; background: radial-gradient(ellipse, rgba(30, 64, 175, 0.5), transparent 70%); top: 5%; left: -10%; } .nebula-2 { width: 500px; height: 300px; background: radial-gradient(ellipse, rgba(6, 95, 120, 0.4), transparent 70%); top: 40%; right: -5%; animation-delay: -3s; } .nebula-3 { width: 400px; height: 250px; background: radial-gradient(ellipse, rgba(77, 215, 255, 0.15), transparent 70%); bottom: 30%; left: 30%; animation-delay: -5s; } @keyframes nebulaPulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } } /* Stars */ .stars-container { position: absolute; width: 100%; height: 100%; } .bg-star { position: absolute; background: #fff; border-radius: 50%; animation: twinkleStar ease-in-out infinite; } .bg-star.cyan { background: var(--accent-cyan); box-shadow: 0 0 6px var(--accent-cyan); } .bg-star.gold { background: var(--accent-gold); box-shadow: 0 0 4px var(--accent-gold); } @keyframes twinkleStar { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } } /* Cosmic Light Swirls */ .swirl-container { position: absolute; width: 100%; height: 100%; overflow: hidden; } .swirl { position: absolute; border-radius: 50%; animation: swirlMove 12s ease-in-out infinite; } .swirl-1 { width: 200%; height: 800px; bottom: -400px; left: -50%; border: 2px solid rgba(77, 215, 255, 0.25); box-shadow: 0 0 30px rgba(77, 215, 255, 0.15), 0 0 60px rgba(77, 215, 255, 0.08), inset 0 0 30px rgba(77, 215, 255, 0.05); } .swirl-2 { width: 180%; height: 600px; bottom: -300px; left: -40%; border: 1px solid rgba(77, 215, 255, 0.15); box-shadow: 0 0 20px rgba(77, 215, 255, 0.1); animation-delay: -4s; } .swirl-3 { width: 160%; height: 500px; bottom: -250px; left: -30%; border: 1px solid rgba(62, 202, 192, 0.12); animation-delay: -8s; } @keyframes swirlMove { 0%, 100% { opacity: 0.5; transform: translateX(0) rotate(-5deg); } 50% { opacity: 0.8; transform: translateX(30px) rotate(0deg); } } /* Shooting Stars */ .streak { position: absolute; height: 2px; background: linear-gradient(90deg, transparent, rgba(77, 215, 255, 0.8), transparent); border-radius: 2px; opacity: 0; animation: shootingStar 8s ease-in-out infinite; } .streak-1 { width: 150px; top: 12%; left: 10%; transform: rotate(-15deg); } .streak-2 { width: 100px; top: 22%; left: 75%; transform: rotate(-20deg); animation-delay: -2s; } .streak-3 { width: 80px; top: 45%; left: 5%; transform: rotate(-10deg); animation-delay: -5s; } .streak-4 { width: 120px; top: 65%; left: 85%; transform: rotate(-25deg); animation-delay: -3s; background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent); } @keyframes shootingStar { 0%, 85%, 100% { opacity: 0; transform: translateX(0) rotate(-15deg); } 5% { opacity: 1; } 15% { opacity: 0; transform: translateX(100px) rotate(-15deg); } } /* Bright Glow Points */ .glow-point { position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px 5px rgba(77, 215, 255, 0.5), 0 0 20px 10px rgba(77, 215, 255, 0.3), 0 0 40px 20px rgba(77, 215, 255, 0.1); animation: glowPulse 4s ease-in-out infinite; } .glow-point-1 { top: 15%; left: 12%; } .glow-point-2 { top: 25%; right: 18%; animation-delay: -1.5s; } .glow-point-3 { top: 55%; left: 8%; animation-delay: -2.5s; } .glow-point-4 { top: 70%; right: 12%; animation-delay: -3s; box-shadow: 0 0 10px 5px rgba(255, 215, 0, 0.4), 0 0 20px 10px rgba(255, 215, 0, 0.2); } @keyframes glowPulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } } /* ============================================================ BULLSEYE RINGS - The Core Target Design ============================================================ */ .ring { position: absolute; border-radius: 50%; transition: all 0.3s ease; } .ring-5 { width: 100%; height: 100%; background: var(--ring-5-bg); border: 6px solid var(--ring-5-border); top: 0; left: 0; box-shadow: inset 0 0 40px rgba(0,0,0,0.5); } .ring-4 { width: 80%; height: 80%; background: var(--ring-4-bg); border: 5px solid var(--ring-4-border); top: 10%; left: 10%; box-shadow: inset 0 -8px 20px rgba(0,0,0,0.3), inset 0 8px 20px rgba(255,255,255,0.2), 0 0 20px rgba(77, 215, 255, 0.3); } .ring-3 { width: 60%; height: 60%; background: var(--ring-3-bg); border: 4px solid var(--ring-3-border); top: 20%; left: 20%; box-shadow: inset 0 -6px 15px rgba(0,0,0,0.25), inset 0 6px 15px rgba(255,255,255,0.2); } .ring-2 { width: 40%; height: 40%; background: var(--ring-2-bg); border: 4px solid var(--ring-2-border); top: 30%; left: 30%; box-shadow: inset 0 -5px 12px rgba(0,0,0,0.2), inset 0 5px 12px rgba(255,255,255,0.25); } .ring-1 { width: 20%; height: 20%; background: var(--ring-1-bg); border: 4px solid var(--ring-1-border); top: 40%; left: 40%; box-shadow: 0 0 40px rgba(255, 215, 0, 0.6), 0 0 80px rgba(255, 215, 0, 0.3), inset 0 -4px 10px rgba(0,0,0,0.2), inset 0 4px 10px rgba(255,255,255,0.4); } /* ============================================================ NUMBER BALLS - Convergence & Hit/Miss Styles ============================================================ */ .number-ball { position: absolute; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9em; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 -4px 8px rgba(0,0,0,0.3), inset 0 4px 8px rgba(255,255,255,0.3); z-index: 10; } .number-ball::before { content: ''; position: absolute; top: 4px; left: 8px; width: 12px; height: 8px; background: rgba(255,255,255,0.5); border-radius: 50%; transform: rotate(-30deg); } .number-ball:hover { transform: scale(1.35); z-index: 100; box-shadow: 0 8px 35px rgba(0,0,0,0.5), inset 0 -4px 8px rgba(0,0,0,0.3), inset 0 4px 8px rgba(255,255,255,0.3); } /* Convergence Levels */ .convergence-5 { background: var(--ball-conv-5); color: #000; border: 3px solid #fff; animation: pulse 2s infinite; box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); } .convergence-4 { background: var(--ball-conv-4); color: #fff; border: 2px solid #a0f0b8; } .convergence-3 { background: var(--ball-conv-3); color: #fff; border: 2px solid #7ee8dc; } .convergence-2 { background: var(--ball-conv-2); color: #000; border: 2px solid #9eecff; } .convergence-1 { background: var(--ball-conv-1); color: #fff; border: 2px solid #3a5a7c; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); } 50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.9); } } /* Hit State */ .number-ball.hit { background: var(--ball-hit) !important; color: #fff !important; border: 3px solid #FFFFFF !important; animation: hitPulse 1s ease-in-out infinite !important; z-index: 50; } @keyframes hitPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(34, 197, 94, 0.6), 0 0 30px rgba(34, 197, 94, 0.4); } 50% { transform: scale(1.15); box-shadow: 0 0 25px rgba(34, 197, 94, 0.9), 0 0 50px rgba(34, 197, 94, 0.7); } } .number-ball.hit::after { content: '✓'; position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; background: linear-gradient(135deg, #4ade80, #22c55e); border-radius: 50%; font-size: 11px; display: flex; align-items: center; justify-content: center; color: var(--bg-deep); font-weight: bold; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(34, 197, 94, 0.6); } /* Bonus Hit State */ .number-ball.bonus-hit { background: var(--ball-bonus-hit) !important; color: var(--bg-deep) !important; border: 3px solid #FFFFFF !important; animation: bonusHitPulse 1s ease-in-out infinite !important; z-index: 50; } @keyframes bonusHitPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(76, 175, 117, 0.6), 0 0 30px rgba(76, 175, 117, 0.4); } 50% { transform: scale(1.15); box-shadow: 0 0 25px rgba(76, 175, 117, 0.9), 0 0 50px rgba(76, 175, 117, 0.7); } } .number-ball.bonus-hit::after { content: 'B'; position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; background: linear-gradient(135deg, #7eeaa0, #4CAF75); border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; color: var(--bg-deep); font-weight: bold; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(76, 175, 117, 0.6); } /* Miss State */ .number-ball.miss { background: var(--ball-miss) !important; color: #fff !important; opacity: 0.5; } /* Not Predicted but Hit */ .number-ball.not-predicted.hit { background: var(--ball-not-predicted) !important; color: var(--bg-deep) !important; border: 3px dashed #64748b !important; animation: missedGlow 1.5s ease infinite !important; } @keyframes missedGlow { 0%, 100% { box-shadow: 0 0 15px rgba(148, 163, 184, 0.5), inset 0 -4px 8px rgba(0,0,0,0.2), inset 0 4px 8px rgba(255,255,255,0.2); } 50% { box-shadow: 0 0 25px rgba(148, 163, 184, 0.7); } } .number-ball.not-predicted.hit::after { content: '✗'; background: #64748b; color: #fff; } /* ============================================================ COMMON COMPONENTS ============================================================ */ /* Stats Banner */ .stats-banner { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; padding: 15px 30px; background: linear-gradient(135deg, var(--bg-card), var(--bg-section)); border-radius: 15px; border: 1px solid var(--border-subtle); box-shadow: 0 4px 15px rgba(0,0,0,0.3); } .stat-item { text-align: center; } .stat-number { font-size: 2em; font-weight: bold; color: var(--accent-cyan); } .stat-label { font-size: 0.8em; color: var(--text-muted); } /* Cosmic Cards */ .cosmic-card { background: linear-gradient(135deg, var(--bg-card), var(--bg-section)); border-radius: 15px; border: 1px solid var(--border-subtle); box-shadow: 0 4px 15px rgba(0,0,0,0.3); padding: 20px; } .cosmic-card-solid { background: var(--bg-card); border-radius: 15px; border: 1px solid var(--border-subtle); box-shadow: 0 4px 15px rgba(0,0,0,0.3); padding: 20px; } /* CTA Button */ .cta-button { display: inline-block; padding: 15px 40px; font-size: 1.2em; font-weight: bold; color: #fff; background: linear-gradient(145deg, var(--accent-teal), #065f78); border: none; border-radius: 30px; cursor: pointer; text-decoration: none; margin: 15px 0; box-shadow: 0 5px 25px rgba(8, 145, 178, 0.4); transition: all 0.3s ease; animation: ctaPulse 2s infinite; } .cta-button:hover { transform: scale(1.05); box-shadow: 0 8px 35px rgba(8, 145, 178, 0.6); } @keyframes ctaPulse { 0%, 100% { box-shadow: 0 5px 25px rgba(8, 145, 178, 0.4); } 50% { box-shadow: 0 5px 40px rgba(77, 215, 255, 0.7); } } /* Primary Button (Green) */ .btn-primary { background: linear-gradient(135deg, var(--accent-green), #16a34a); color: white; border: none; padding: 14px 28px; border-radius: 12px; font-size: 1.1em; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4); transition: all 0.3s ease; } .btn-primary:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(34, 197, 94, 0.6); } /* Secondary Button (Cyan) */ .btn-secondary { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-teal)); color: white; border: none; padding: 14px 28px; border-radius: 12px; font-size: 1.1em; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(77, 215, 255, 0.4); transition: all 0.3s ease; text-decoration: none; } .btn-secondary:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(77, 215, 255, 0.6); } /* Nav Button (Circle) */ .nav-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--accent-cyan); background: var(--bg-section); color: var(--accent-cyan); font-size: 1.3em; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .nav-btn:hover:not(:disabled) { background: var(--accent-cyan); color: var(--bg-deep); } .nav-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Spinner */ .spinner { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--bg-card); border-top-color: var(--accent-cyan); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; margin-right: 8px; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ UTILITY ANIMATIONS ============================================================ */ /* Prize Flash */ @keyframes prizeFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .prize-flash { animation: prizeFlash 1.5s ease-in-out infinite; } /* Flash (for celebrations) */ @keyframes flash { 0% { opacity: 0.8; } 100% { opacity: 0; } } /* Glow Animation */ @keyframes glow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4)); } 50% { filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8)); } } .lift-badge { animation: glow 2s ease-in-out infinite; } /* ============================================================ MOBILE RESPONSIVENESS - Common Breakpoints ============================================================ */ @media (max-width: 768px) { .stats-banner { gap: 10px; padding: 12px 10px; } .stat-number { font-size: 1.5em; } .number-ball { width: 32px; height: 32px; font-size: 0.8em; } } @media (max-width: 480px) { .stats-banner { padding: 10px 8px; } .stat-number { font-size: 1.3em; } .number-ball { width: 28px; height: 28px; font-size: 0.75em; } } /* ============================================================ MOBILE-FRIENDLY TOOLTIPS ============================================================ */ @media (max-width: 768px) { .stat-tooltip { position: fixed !important; left: 50% !important; right: auto !important; bottom: auto !important; top: 120px !important; transform: translateX(-50%) !important; width: 90vw !important; max-width: 340px !important; z-index: 1000 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important; } .tooltip-arrow { display: none !important; } } /* ============================================================ MONTE CARLO CHART TEXT - Responsive Sizing ============================================================ */ .mc-badge-text { font-size: 14px; } .mc-value-text { font-size: 14px; } .mc-arrow-text { font-size: 13px; } .mc-axis-text { font-size: 12px; } @media (max-width: 768px) { .mc-badge-text { font-size: 22px !important; } .mc-value-text { font-size: 22px !important; } .mc-arrow-text { font-size: 20px !important; } .mc-axis-text { font-size: 18px !important; } }