INTERACTIVE GAME SHOW

Interactive Game Corporate Game Show /* Your existing CSS remains the same */ .hero-section { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: #000; transform-style: flat; will-change: transform; z-index: 1; } .video-container { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; } .video-wrapper { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; min-width: 177.77777778vh; /* 16:9 aspect ratio */ min-height: 56.25vw; /* 16:9 aspect ratio */ transform: translate(-50%, -50%); } .video-wrapper iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1.2); border: none; pointer-events: none; } .overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100% ); z-index: 1; } .content { position: relative; z-index: 2; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; } .title { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: clamp(3rem, 8vw, 6rem); line-height: 1.1; margin-bottom: 1rem; background: linear-gradient( 270deg, #4B0082 0%, #6A0DAD 20%, #9400D3 40%, #800080 60%, #ff1361 75%, #4B0082 100% ); background-size: 300% 100%; animation: gradientFlow 8s ease infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(255,255,255,0.1); } .subtitle { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(1rem, 3vw, 1.5rem); color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: 4px; text-shadow: 0 2px 5px rgba(0,0,0,0.5); } .audio-toggle { position: absolute; top: 2rem; right: 2rem; z-index: 10; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; width: 3.5rem; height: 3.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; backdrop-filter: blur(5px); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .audio-toggle:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.05); } @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (max-width: 768px) { .hero-section { height: 100vh; height: 100dvh; min-height: -webkit-fill-available; overflow: hidden; } .video-wrapper { width: 100vw; height: 100vh; height: 100dvh; } .video-wrapper iframe { transform: translate(-50%, -50%) scale(1.5); } .content { height: 100vh; height: 100dvh; } .video-container { height: 100vh; height: 100dvh; } } INTERACTIVE GAME SHOW the quiz show to end all quiz shows let player; let isMuted = true; // YouTube iframe API callback function onYouTubeIframeAPIReady() { player = new YT.Player('heroVideo', { events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event) { // Set up audio toggle button const audioToggle = document.querySelector('.audio-toggle'); const audioIcon = audioToggle.querySelector('i'); audioToggle.addEventListener('click', () => { if (isMuted) { player.unMute(); audioIcon.className = 'fas fa-volume-up'; } else { player.mute(); audioIcon.className = 'fas fa-volume-mute'; } isMuted = !isMuted; }); } // Ensure video always starts muted document.addEventListener('DOMContentLoaded', () => { const audioToggle = document.querySelector('.audio-toggle'); const audioIcon = audioToggle.querySelector('i'); audioIcon.className = 'fas fa-volume-mute'; }); QUIZ SHOW QUIZ SHOW TURN ANY EVENT INTO A HIT GAME SHOW The Ultimate Interactive Experience Boost Engagement by 300% • Create Lasting Memories • Guarantee Event Success EVENT ENGAGEMENT TEAM BUILDING BRANDED EXPERIENCES CORPORATE TRAINING FUNDRAISING TEST YOUR EVENT PLANNING KNOWLEDGE! TEST YOUR EVENT PLANNING KNOWLEDGE! Are You Smarter Than a CSEP? Play below INTERACTIVE TEAM PLAY INTERACTIVE TEAM PLAY BUZZ Up to 10 teams competing head-to-head Web-based buzzer system for 1000+ players Real-time scoreboard keeps energy high Instant response verification system Custom sound effects for right/wrong answers Open Game in New Tab CUSTOMIZE YOUR SHOW CUSTOMIZE YOUR SHOW Your Logo Your Questions Your Branding Your Sound FX Your Background BOOK NOW INCREASE RETENTION Turn boring content into memorable experiences that stick with participants long after the event BUILD CONNECTIONS Foster team bonding and networking through engaging collaborative competition REINFORCE MESSAGING Ensure your key points are remembered by embedding them within exciting gameplay DRIVE RESULTS Increase event ROI with measurable engagement and participant satisfaction BOOK YOUR QUIZ SHOW EXPERIENCE BOOK YOUR QUIZ SHOW EXPERIENCE Perfect for corporate events, team building, training, fundraising & more GET STARTED Ready to book your interactive event experience? Limited dates available for 2025! Get a Quote × /* Reset and Base Styles - Strictly Scoped */ .quiz-show-wrapper { isolation: isolate; /* Create a new stacking context */ display: block; width: 100%; max-width: 100%; } .quiz-show-wrapper * { box-sizing: border-box; margin: 0; padding: 0; } /* Define CSS Variables */ .quiz-show-wrapper :root, .quiz-show-wrapper { --primary-purple: #6A0DAD; --secondary-purple: #4B0082; --vibrant-purple: #8A2BE2; --deep-purple: #2a004b; --accent-gold: #FFD700; --gold-light: #FFF8E1; --gold-medium: #F4D589; --gold-dark: #B38728; --accent-pink: #ff1361; --text-light: #F5F5F5; --text-dark: #333333; --bg-dark: #0F0F0F; --bg-light-accent: rgba(255, 255, 255, 0.05); --border-gold-subtle: rgba(255, 215, 0, 0.3); } .quiz-show-container { font-family: 'Poppins', sans-serif !important; /* Changed font */ background: linear-gradient(135deg, #000000 0%, #1a0029 20%, #2d0940 40%, #1a0029 80%, #000000 100%) !important; /* New background */ color: var(--text-light) !important; /* Changed text color */ padding: 3rem 1rem !important; overflow: hidden !important; position: relative !important; border: none !important; margin: 0 !important; } /* Radial Gradient Overlay */ .quiz-show-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 25% 25%, rgba(106, 13, 173, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 75% 75%, rgba(138, 43, 226, 0.1) 0%, transparent 50%); pointer-events: none; z-index: 1; } /* Title Section (Full Width) */ .quiz-show-container .title-section { position: relative; max-width: 1200px; margin: 0 auto 2.5rem; z-index: 2; /* Ensure title section is above overlay */ } .quiz-show-container .tv-frame { background: #111; /* Darker frame */ border-radius: 20px; padding: 15px; box-shadow: 0 0 0 5px #222, 0 0 30px rgba(138, 43, 226, 0.4), /* Vibrant purple glow */ inset 0 0 30px rgba(0,0,0,0.8); position: relative; z-index: 1; border: 1px solid var(--border-gold-subtle); } .quiz-show-container .tv-screen { background-image: url('https://www.fusion-events.ca/wp-content/uploads/2025/03/Untitled-design-2025-03-05T182637.112.png'); background-size: cover; background-position: center; aspect-ratio: 16/9; position: relative; overflow: hidden; border-radius: 10px; box-shadow: inset 0 0 20px rgba(0,0,0,0.9); } .quiz-show-container .tv-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: radial-gradient(circle, rgba(42, 0, 75, 0.7) 0%, rgba(26, 0, 41, 0.8) 70%); /* Darker purple gradient */ overflow: hidden; } .quiz-show-container .logo-pulse { position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(138, 43, 226, 0.2) 0%, rgba(75, 0, 130, 0.1) 40%, rgba(0,0,0,0) 70%); /* Adjusted pulse color */ border-radius: 50%; animation: pulse 4s infinite ease-in-out; z-index: 1; } /* Metallic Title Styling (Adapted from Majority Rules) */ .quiz-show-container .section-title { display: grid; grid-template-areas: 'overlap'; place-content: center; text-transform: uppercase; margin: 0 auto 1rem auto; padding: 0; width: fit-content; max-width: 90%; position: relative; filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.2)) drop-shadow(0 0 15px rgba(138, 43, 226, 0.2)); /* Gold/Purple shadow */ animation: title-glow-quiz 3s ease-in-out infinite alternate; z-index: 2; } .quiz-show-container .section-title::before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.1) 0%, rgba(138, 43, 226, 0.08) 30%, rgba(255, 215, 0, 0.03) 60%, transparent 75%); /* Gold/Purple pulse */ filter: blur(20px); opacity: 0.7; z-index: -1; border-radius: 50%; animation: neon-pulse-quiz 4s ease-in-out infinite alternate; } .quiz-show-container .section-title > div { background-clip: text; -webkit-background-clip: text; font-family: 'Poppins', sans-serif; /* Changed font */ font-weight: 800; /* Reduced from 900 for better legibility */ grid-area: overlap; letter-spacing: 2px; /* Reduced from 2.5px */ -webkit-text-stroke: 2px transparent; /* Reduced from 3.5px for thinner appearance */ animation: main-text-reveal-quiz 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards; opacity: 0; line-height: 1.2; text-align: center; } /* Specific Title Sizes */ .quiz-show-container .quiz-main-title > div { font-size: clamp(3rem, 6vw, 5rem); /* Adjusted size */ } .quiz-show-container .banner-sub-title > div { font-size: clamp(1.5rem, 3vw, 2rem); } .quiz-show-container .column-sub-title > div { font-size: clamp(1.4rem, 2.5vw, 1.8rem); } .quiz-show-container .cta-main-title > div { font-size: clamp(2rem, 4vw, 3rem); } .quiz-show-container .section-title .bg { background-image: repeating-linear-gradient(105deg, var(--gold-medium) 0%, var(--gold-dark) 5%, var(--gold-medium) 12%); /* Gold gradient */ color: transparent; filter: drop-shadow(3px 8px 8px black); transform: scaleY(1.03); transform-origin: top; z-index: 1; } .quiz-show-container .section-title .fg { background-image: repeating-linear-gradient(5deg, var(--gold-medium) 0%, var(--gold-dark) 23%, var(--gold-medium) 31%); /* Gold gradient */ color: transparent; z-index: 2; position: relative; } .quiz-show-container .section-title .fg::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-clip: text; -webkit-background-clip: text; background-image: linear-gradient(135deg, #1e1e1e 0%, var(--secondary-purple) 20%, var(--primary-purple) 50%, var(--secondary-purple) 80%, #1e1e1e 100%); /* Purple metallic */ color: transparent; z-index: -1; transform: scale(0.99); filter: brightness(1.1) contrast(1.2); } .quiz-show-container .section-title .fg::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-clip: text; -webkit-background-clip: text; background-image: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.2) 40%, transparent 60%); background-size: 200% 100%; color: transparent; z-index: 1; transform: scale(0.99); filter: contrast(1.8) brightness(1.5); animation: light-sweep-quiz 3.9s linear infinite, main-text-reveal-quiz 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards; } /* Animations (Adapted) */ @keyframes main-text-reveal-quiz { 0% { transform: scale(0.9); opacity: 0; filter: blur(10px); } 100% { transform: scale(1); opacity: 1; filter: blur(0); } } @keyframes light-sweep-quiz { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes neon-pulse-quiz { 0% { opacity: 0.4; filter: blur(20px); transform: translate(-50%, -50%) scale(0.95); } 100% { opacity: 0.7; filter: blur(25px); transform: translate(-50%, -50%) scale(1.05); } } @keyframes title-glow-quiz { 0% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.2)) drop-shadow(0 0 15px rgba(138, 43, 226, 0.2)); } 100% { filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.3)) drop-shadow(0 0 25px rgba(138, 43, 226, 0.3)); } } @keyframes pulse { 0% { transform: scale(0.95); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.7; } } /* Tagline and Description */ .quiz-show-container .tagline { font-size: 1.2rem; font-weight: 600; /* Adjusted weight */ color: var(--gold-light); letter-spacing: 2px; margin-bottom: 1rem; position: relative; z-index: 2; text-shadow: 0 0 8px rgba(255, 215, 0, 0.3); } .quiz-show-container .tv-description { position: relative; z-index: 2; margin-bottom: 1rem; } .quiz-show-container .description-text { font-size: 1.3rem; font-weight: 700; color: var(--accent-gold); letter-spacing: 1px; margin-bottom: 0.5rem; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } .quiz-show-container .value-prop { font-size: 0.9rem; color: var(--text-light); max-width: 80%; margin: 0 auto 0.5rem; line-height: 1.4; } .quiz-show-container .value-prop i { color: var(--accent-gold); margin: 0 5px; } .quiz-show-container .tv-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; position: relative; z-index: 2; } .quiz-show-container .category { background: rgba(138, 43, 226, 0.3); /* Vibrant purple bg */ border: 1px solid var(--border-gold-subtle); padding: 8px 16px; border-radius: 30px; font-size: 0.9rem; font-weight: 600; letter-spacing: 1px; color: var(--gold-light); box-shadow: 0 0 10px rgba(138, 43, 226, 0.5); transition: all 0.3s ease; } .quiz-show-container .category:hover { background: rgba(138, 43, 226, 0.5); border-color: var(--accent-gold); color: var(--accent-gold); transform: scale(1.05); } /* TV Controls */ .quiz-show-container .tv-controls { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 20px 0; z-index: 2; position: relative; } .quiz-show-container .control-button { width: 40px; height: 40px; background: #222; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 0 5px #111, 0 5px 10px rgba(0,0,0,0.5); cursor: pointer; border: 1px solid var(--border-gold-subtle); } .quiz-show-container .control-button i { color: var(--accent-pink); /* Keep pink for power */ font-size: 1.2rem; } .quiz-show-container .control-knob { width: 50px; height: 50px; background: linear-gradient(135deg, #333 0%, #111 100%); border-radius: 50%; position: relative; box-shadow: 0 0 0 5px #111, 0 5px 10px rgba(0,0,0,0.5); cursor: pointer; border: 1px solid var(--border-gold-subtle); } .quiz-show-container .knob-indicator { position: absolute; top: 50%; left: 10px; width: 30%; height: 4px; background: var(--gold-medium); transform-origin: left center; transform: translateY(-50%); border-radius: 2px; } .quiz-show-container .volume-knob .knob-indicator { transform: translateY(-50%) rotate(30deg); } .quiz-show-container .channel-knob .knob-indicator { transform: translateY(-50%) rotate(-30deg); } /* Game Elements Section with Aligned Columns */ .quiz-show-container .game-elements { display: grid; grid-template-columns: 0.6fr 3.5fr 0.6fr; /* Desktop layout */ gap: 2rem; max-width: 1200px; margin: 0 auto 4rem; position: relative; z-index: 2; } /* Column Styling */ .quiz-show-container .column { display: flex; flex-direction: column; height: auto; } .quiz-show-container .column-header { margin-bottom: 1rem; /* Reduced margin */ text-align: center; min-height: 60px; /* Adjusted height */ display: flex; flex-direction: column; justify-content: center; } /* Column Title handled by .section-title */ .quiz-show-container .column-content { flex: 1; display: flex; flex-direction: column; } /* Card Styling (Applied to column content and value cards) */ .quiz-show-container .card-style { background: var(--bg-light-accent); backdrop-filter: blur(10px); border-radius: 15px; padding: 2rem; transition: all 0.3s ease; position: relative; overflow: hidden; border: 1px solid var(--border-gold-subtle); height: 100%; /* Ensure cards fill column height */ } .quiz-show-container .card-style:hover { transform: translateY(-5px); /* Subtle lift */ box-shadow: 0 15px 25px rgba(255, 215, 0, 0.15); /* Gold shadow */ border-color: var(--accent-gold); background: rgba(255, 255, 255, 0.08); } /* Game Title Banner (Full Width) */ .quiz-show-container .game-title-banner-container { max-width: 1200px; margin: 0 auto 3rem; text-align: center; position: relative; z-index: 2; } .quiz-show-container .game-title-banner { background: var(--bg-light-accent); backdrop-filter: blur(10px); padding: 1.5rem 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(138, 43, 226, 0.2); /* Purple shadow */ border: 1px solid var(--border-gold-subtle); position: relative; overflow: hidden; transition: all 0.3s ease; } .quiz-show-container .game-title-banner:hover { transform: scale(1.02); box-shadow: 0 15px 35px rgba(138, 43, 226, 0.3); border-color: var(--accent-gold); } /* Removed shine animation as it might clash */ .quiz-show-container .game-title-banner p { font-size: 1.4rem; /* Adjusted size */ font-weight: 600; color: var(--accent-pink); margin-bottom: 0.5rem; margin-top: 1rem; /* Space below title */ text-shadow: 0 0 8px rgba(255, 19, 97, 0.4); } .quiz-show-container .game-title-banner .play-hint { color: var(--accent-gold); font-size: 1rem; font-weight: 600; } .quiz-show-container .game-title-banner .play-hint i { margin-right: 5px; animation: bounce 1.5s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-8px);} 60% {transform: translateY(-4px);} } /* Left Buzzer Section */ .quiz-show-container .buzzer-section .column-content { align-items: center; /* Center buzzer */ } .quiz-show-container .big-buzzer { width: 150px; height: 150px; position: relative; margin-bottom: 2rem; cursor: pointer; } .quiz-show-container .buzzer-light { width: 60px; height: 60px; background: radial-gradient(circle, #ff4d4d, #cc0000); border-radius: 50%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); box-shadow: 0 0 15px #ff4d4d, inset 0 0 10px rgba(255,255,255,0.3); animation: pulse-light 2s infinite alternate; } @keyframes pulse-light { from { box-shadow: 0 0 10px #ff4d4d, inset 0 0 8px rgba(255,255,255,0.3); } to { box-shadow: 0 0 25px #ff4d4d, 0 0 10px #ff1a1a, inset 0 0 12px rgba(255,255,255,0.4); } } .quiz-show-container .buzzer-button { width: 100%; height: 100px; background: linear-gradient(180deg, var(--vibrant-purple), var(--primary-purple)); border-radius: 50%; position: absolute; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: 900; color: var(--accent-gold); text-shadow: 0 2px 4px rgba(0,0,0,0.5); box-shadow: 0 10px 15px rgba(0,0,0,0.3), inset 0 -5px 10px rgba(0,0,0,0.4); transition: all 0.1s ease; border: 2px solid var(--border-gold-subtle); } .quiz-show-container .big-buzzer:active .buzzer-button { transform: translateY(5px); box-shadow: 0 5px 10px rgba(0,0,0,0.4), inset 0 -3px 8px rgba(0,0,0,0.5); background: linear-gradient(180deg, var(--primary-purple), var(--secondary-purple)); } .quiz-show-container .buzzer-base { width: 180px; height: 30px; background: #222; border-radius: 10px; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); box-shadow: 0 5px 10px rgba(0,0,0,0.5); border: 1px solid var(--border-gold-subtle); } .quiz-show-container .feature-list { list-style: none; padding: 0; text-align: left; width: 100%; color: var(--text-light); } .quiz-show-container .feature-list li { margin-bottom: 0.8rem; display: flex; align-items: flex-start; font-size: 0.95rem; line-height: 1.4; } .quiz-show-container .feature-icon { color: var(--accent-gold); margin-right: 10px; margin-top: 3px; min-width: 16px; /* Ensure alignment */ } /* Middle Video Section */ .quiz-show-container .video-section .column-content { padding: 0; /* Remove padding for video */ background: none; /* Remove card style */ backdrop-filter: none; border: none; } .quiz-show-container .video-section .column-content:hover { transform: none; box-shadow: none; } .quiz-show-container .ipad-container { display: block; /* Show on desktop */ margin-bottom: 1.5rem; } .quiz-show-container .ipad-frame { background: #111; border-radius: 20px; padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.7); position: relative; border: 1px solid var(--border-gold-subtle); } .quiz-show-container .ipad-notch { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 80px; height: 10px; background: #000; border-radius: 0 0 5px 5px; z-index: 2; } .quiz-show-container .ipad-screen { background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; /* Adjust aspect ratio if needed */ } .quiz-show-container .ipad-screen iframe { display: block; border: none; width: 100%; height: 100%; } .quiz-show-container .ipad-home-button { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; background: #333; border-radius: 50%; display: none; /* Typically hidden */ } .quiz-show-container .direct-game-link { display: none; /* Hide on desktop if iPad frame is shown */ background: var(--primary-purple); color: var(--accent-gold); padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; margin-bottom: 1.5rem; transition: all 0.3s ease; border: 1px solid var(--accent-gold); } .quiz-show-container .direct-game-link:hover { background: var(--vibrant-purple); color: #fff; transform: scale(1.05); } .quiz-show-container .direct-game-link i { margin-right: 8px; } .quiz-show-container .video-player { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 10px; box-shadow: 0 10px 20px rgba(0,0,0,0.4); border: 1px solid var(--border-gold-subtle); } .quiz-show-container .video-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .quiz-show-container .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(0, 0, 0, 0.7); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; z-index: 1; /* Ensure it's above iframe initially */ border: 2px solid var(--accent-gold); } .quiz-show-container .play-button:hover { background: rgba(138, 43, 226, 0.8); transform: translate(-50%, -50%) scale(1.1); } .quiz-show-container .play-button i { color: var(--accent-gold); font-size: 2.5rem; margin-left: 5px; /* Center play icon */ } /* Right Customization Section */ .quiz-show-container .custom-section .column-content { align-items: center; } .quiz-show-container .customize-panel { width: 100%; } .quiz-show-container .customize-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 1.5rem; width: 100%; } .quiz-show-container .option { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text-light); transition: transform 0.3s ease; } .quiz-show-container .option:hover { transform: scale(1.1); } .quiz-show-container .option-icon { font-size: 2.5rem; color: var(--accent-gold); margin-bottom: 0.8rem; width: 60px; height: 60px; background: rgba(138, 43, 226, 0.2); border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 1px solid var(--border-gold-subtle); } .quiz-show-container .option-text { font-size: 0.9rem; font-weight: 600; } .quiz-show-container .book-now-option { grid-column: 1 / -1; /* Span full width */ margin-top: 1rem !important; } .quiz-show-container .book-now-button { background: linear-gradient(135deg, var(--accent-gold), var(--gold-medium)); color: var(--deep-purple); padding: 12px 25px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3); } .quiz-show-container .book-now-button:hover { background: linear-gradient(135deg, var(--gold-medium), var(--accent-gold)); color: #000; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5); } .quiz-show-container .book-now-button i { font-size: 1.1rem; } /* Value Proposition Cards */ .quiz-show-container .value-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; max-width: 1200px; margin: 4rem auto; position: relative; z-index: 2; } .quiz-show-container .value-card { text-align: center; /* Card style applied via .card-style */ } .quiz-show-container .card-icon { font-size: 3rem; color: var(--accent-gold); margin-bottom: 1rem; } .quiz-show-container .value-card h3 { font-size: 1.4rem; font-weight: 700; color: var(--gold-light); margin-bottom: 0.8rem; text-shadow: 0 0 5px rgba(255, 215, 0, 0.3); } .quiz-show-container .value-card p { font-size: 0.95rem; color: rgba(245, 245, 245, 0.8); /* Lighter text */ line-height: 1.6; } /* Call to Action */ .quiz-show-container .cta-container { max-width: 1200px; margin: 4rem auto 2rem; padding: 4rem 2rem; background: linear-gradient(135deg, var(--secondary-purple), var(--deep-purple)); border-radius: 20px; text-align: center; position: relative; overflow: hidden; z-index: 2; border: 1px solid var(--border-gold-subtle); box-shadow: 0 10px 30px rgba(75, 0, 130, 0.4); } .quiz-show-container .tv-static { position: absolute; inset: 0; background: url('data:image/svg+xml;utf8,'); opacity: 0.5; z-index: 1; pointer-events: none; } .quiz-show-container .cta-content { position: relative; z-index: 2; } /* CTA Title handled by .section-title */ .quiz-show-container .cta-content p { font-size: 1.1rem; color: var(--gold-light); margin-bottom: 2rem; margin-top: 1rem; /* Space below title */ max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.6; } .quiz-show-container .cta-button { background: var(--accent-gold); color: var(--deep-purple); padding: 15px 35px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4); border: none; } .quiz-show-container .cta-button:hover { background: var(--gold-medium); color: #000; transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 25px rgba(255, 215, 0, 0.6); } .quiz-show-container .cta-button i { transition: transform 0.3s ease; } .quiz-show-container .cta-button:hover i { transform: translateX(5px); } .quiz-show-container .pulse-effect { animation: pulse-cta 2s infinite; } @keyframes pulse-cta { 0% { transform: scale(1); box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4); } 50% { transform: scale(1.05); box-shadow: 0 10px 25px rgba(255, 215, 0, 0.6); } 100% { transform: scale(1); box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4); } } /* Sticky Bottom CTA Bar */ .quiz-show-container .sticky-cta-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: linear-gradient(to right, var(--deep-purple), var(--secondary-purple)); padding: 10px 20px; box-shadow: 0 -5px 15px rgba(0,0,0,0.3); z-index: 1000; display: flex; justify-content: center; align-items: center; border-top: 1px solid var(--border-gold-subtle); transition: transform 0.3s ease; transform: translateY(100%); /* Initially hidden */ } .quiz-show-container .sticky-cta-bar.visible { transform: translateY(0); } .quiz-show-container .sticky-cta-content { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1200px; gap: 15px; flex-wrap: wrap; } .quiz-show-container .sticky-cta-text { color: var(--text-light); text-align: left; } .quiz-show-container .sticky-cta-text strong { display: block; font-size: 1rem; font-weight: 700; color: var(--gold-light); } .quiz-show-container .sticky-cta-text span { font-size: 0.9rem; opacity: 0.8; } .quiz-show-container .sticky-cta-buttons { display: flex; gap: 10px; align-items: center; } .quiz-show-container .sticky-cta-button { background: var(--accent-gold); color: var(--deep-purple); padding: 8px 18px; border-radius: 5px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease; border: none; } .quiz-show-container .sticky-cta-button:hover { background: var(--gold-medium); color: #000; transform: scale(1.05); } .quiz-show-container .sticky-cta-close { background: none; border: none; color: var(--gold-light); font-size: 1.5rem; cursor: pointer; padding: 0 5px; opacity: 0.7; transition: opacity 0.3s ease; } .quiz-show-container .sticky-cta-close:hover { opacity: 1; } /* Responsive Adjustments */ @media (max-width: 992px) { .quiz-show-container .game-elements { grid-template-columns: 1fr; /* Stack columns */ gap: 3rem; } .quiz-show-container .video-section { order: -1; /* Move video to top on mobile */ } .quiz-show-container .ipad-container { display: none; /* Hide iPad frame on smaller screens */ } .quiz-show-container .direct-game-link { display: inline-block; /* Show direct link */ margin: 0 auto 1.5rem auto; /* Center link */ } .quiz-show-container .column-content.card-style { padding: 1.5rem; } .quiz-show-container .customize-options { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 1rem; } .quiz-show-container .option-icon { font-size: 2rem; width: 50px; height: 50px; } .quiz-show-container .value-props { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .quiz-show-container .sticky-cta-content { justify-content: center; text-align: center; } .quiz-show-container .sticky-cta-text { text-align: center; margin-bottom: 10px; } } @media (max-width: 768px) { .quiz-show-container { padding: 2rem 0.5rem !important; } .quiz-show-container .section-title > div { font-weight: 700; /* Further reduced for mobile */ letter-spacing: 1.5px; /* Tighter spacing on mobile */ -webkit-text-stroke: 1.5px transparent; /* Even thinner stroke on mobile */ } .quiz-show-container .quiz-main-title > div { font-size: clamp(2.5rem, 8vw, 3.5rem); } .quiz-show-container .banner-sub-title > div { font-size: clamp(1.3rem, 4vw, 1.8rem); } .quiz-show-container .column-sub-title > div { font-size: clamp(1.2rem, 3.5vw, 1.6rem); } .quiz-show-container .cta-main-title > div { font-size: clamp(1.8rem, 5vw, 2.5rem); } .quiz-show-container .tagline { font-size: 1rem; } .quiz-show-container .tv-frame { padding: 10px; } .quiz-show-container .tv-controls { gap: 15px; padding: 15px 0; } .quiz-show-container .control-button { width: 35px; height: 35px; } .quiz-show-container .control-knob { width: 45px; height: 45px; } .quiz-show-container .cta-container { padding: 3rem 1rem; } .quiz-show-container .cta-button { padding: 12px 25px; font-size: 1rem; } .quiz-show-container .sticky-cta-bar { padding: 8px 15px; } .quiz-show-container .sticky-cta-button { padding: 7px 15px; } } /* Script for Sticky CTA */ /* Note: This script should ideally be placed outside the style tag or in a separate JS file */ /* Adding it here for self-contained example */ document.addEventListener('DOMContentLoaded', function() { const stickyBar = document.getElementById('sticky-cta-bar'); const closeButton = document.getElementById('sticky-cta-close'); let lastScrollTop = 0; // Function to show the bar function showStickyBar() { if (stickyBar) { stickyBar.classList.add('visible'); } } // Function to hide the bar function hideStickyBar() { if (stickyBar) { stickyBar.classList.remove('visible'); } } // Show bar after a delay setTimeout(showStickyBar, 3000); // Show after 3 seconds // Close button functionality if (closeButton) { closeButton.addEventListener('click', function() { hideStickyBar(); // Optional: Set a cookie/localStorage to keep it closed }); } // Optional: Hide bar on scroll down, show on scroll up window.addEventListener('scroll', function() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > lastScrollTop && scrollTop > 200) { // Scrolling Down // hideStickyBar(); // Uncomment to hide on scroll down } else { // Scrolling Up or near top // showStickyBar(); // Uncomment to show on scroll up } lastScrollTop = scrollTop

INTERACTIVE GAME SHOW

INCREASE RETENTION

BUILD CONNECTIONS

REINFORCE MESSAGING

DRIVE RESULTS

uREQUEST LIVE

CHRIS TURNER

YAN MARKSON