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 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! Are You Smarter Than a CSEP? Play below 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 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 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; } .quiz-show-container { font-family: 'Montserrat', sans-serif !important; background: linear-gradient(135deg, #f0f0f8 0%, #e0e0f0 100%) !important; color: #333 !important; padding: 3rem 1rem !important; overflow: hidden !important; position: relative !important; border: none !important; /* Prevent border inheritance */ margin: 0 !important; /* Prevent margin inheritance */ } /* Title Section (Full Width) */ .quiz-show-container .title-section { position: relative; max-width: 1200px; /* Match the width of the game elements */ margin: 0 auto 2.5rem; /* Reduced from 4rem */ } .quiz-show-container .tv-frame { background: #222; border-radius: 20px; padding: 15px; /* Reduced from 20px */ box-shadow: 0 0 0 5px #333, /* Reduced from 10px */ 0 0 30px rgba(106, 38, 205, 0.4), inset 0 0 30px rgba(0,0,0,0.6); position: relative; z-index: 1; } .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.8); } .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(106, 38, 205, 0.7) 0%, rgba(58, 18, 128, 0.8) 70%); /* Made more transparent */ overflow: hidden; } .quiz-show-container .logo-pulse { position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(128,0,255,0.3) 0%, rgba(64,0,128,0.1) 40%, rgba(0,0,0,0) 70%); border-radius: 50%; animation: pulse 4s infinite ease-in-out; z-index: 1; } .quiz-show-container .game-title { font-family: 'Permanent Marker', cursive; font-size: 5rem; font-weight: 900; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 20px rgba(128,0,255,0.6), 0 0 30px rgba(128,0,255,0.4), 0 0 40px rgba(128,0,255,0.2); margin-bottom: 1rem; position: relative; z-index: 2; letter-spacing: 2px; } .quiz-show-container .tagline { font-size: 1.2rem; font-weight: 700; color: #f0f0f0; letter-spacing: 2px; margin-bottom: 1rem; position: relative; z-index: 2; } /* TV Description Styles */ .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: #ffcc00; letter-spacing: 1px; margin-bottom: 0.5rem; text-shadow: 0 0 10px rgba(255, 204, 0, 0.5); } .quiz-show-container .value-prop { font-size: 0.9rem; color: #fff; max-width: 80%; margin: 0 auto 0.5rem; line-height: 1.4; } .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(128,0,255,0.3); border: 2px solid rgba(255,255,255,0.3); padding: 8px 16px; border-radius: 30px; font-size: 0.9rem; font-weight: 700; letter-spacing: 1px; color: #fff; box-shadow: 0 0 10px rgba(128,0,255,0.5); } /* TV Controls */ .quiz-show-container .tv-controls { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 20px 0; } .quiz-show-container .control-button { width: 40px; height: 40px; background: #444; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 0 5px #333, 0 5px 10px rgba(0,0,0,0.5); cursor: pointer; } .quiz-show-container .control-button i { color: #ff3860; font-size: 1.2rem; } .quiz-show-container .control-knob { width: 50px; height: 50px; background: linear-gradient(135deg, #444 0%, #222 100%); border-radius: 50%; position: relative; box-shadow: 0 0 0 5px #333, 0 5px 10px rgba(0,0,0,0.5); cursor: pointer; } .quiz-show-container .knob-indicator { position: absolute; top: 50%; left: 10px; width: 30%; height: 4px; background: #ddd; transform-origin: left center; transform: translateY(-50%); } .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; /* Further reduce outer columns, increase center */ gap: 2rem; max-width: 1200px; margin: 0 auto 4rem; } /* Column Styling */ .quiz-show-container .column { display: flex; flex-direction: column; height: auto; /* Changed from 100% to auto to reduce unnecessary white space */ } .quiz-show-container .column-header { margin-bottom: 2rem; text-align: center; min-height: 80px; /* Ensure equal height for headers */ display: flex; flex-direction: column; justify-content: center; } .quiz-show-container .column-header h3 { font-size: 1.8rem; font-weight: 700; color: #3a1280; } .quiz-show-container .column-content { flex: 1; display: flex; flex-direction: column; } /* Game Title Banner (Full Width) */ .quiz-show-container .game-title-banner-container { max-width: 1200px; margin: 0 auto 3rem; text-align: center; position: relative; } .quiz-show-container .game-title-banner { animation: pulse 3s infinite; background: rgba(255, 255, 255, 0.9); padding: 1.5rem 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(106, 38, 205, 0.2); border: 2px solid rgba(106, 38, 205, 0.1); position: relative; overflow: hidden; } .quiz-show-container .game-title-banner::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( to bottom right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100% ); transform: rotate(45deg); animation: shine 3s infinite; pointer-events: none; } @keyframes shine { 0% { left: -50%; top: -50%; } 100% { left: 150%; top: 150%; } } .quiz-show-container .game-title-banner h3 { font-size: 2rem; font-weight: 800; color: #6a26cd; margin-bottom: 0.8rem; text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .quiz-show-container .game-title-banner p { font-size: 1.6rem; font-weight: 700; color: #ff3860; margin-bottom: 1rem; } .quiz-show-container .play-hint { display: inline-block; background: #ffcc00; color: #333; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 700; font-size: 1.1rem; box-shadow: 0 4px 8px rgba(0,0,0,0.2); animation: bounce 2s infinite; } .quiz-show-container .play-hint i { margin-right: 5px; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* iPad Frame for Game Board */ .quiz-show-container .ipad-container { margin-bottom: 2rem; } .quiz-show-container .ipad-frame { background: #222; border-radius: 30px; padding: 15px; position: relative; box-shadow: 0 0 0 2px #333, 0 10px 30px rgba(0,0,0,0.5); width: 100%; max-width: 700px; margin: 0 auto; transition: transform 0.3s ease, box-shadow 0.3s ease; } .quiz-show-container .ipad-frame:hover { transform: translateY(-5px); box-shadow: 0 0 0 2px #333, 0 15px 40px rgba(106, 38, 205, 0.4); } .quiz-show-container .ipad-screen { background: #000; border-radius: 20px; overflow: hidden; position: relative; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); aspect-ratio: 16/9; width: 100%; } .quiz-show-container .ipad-screen::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 20px; background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent); border-radius: 20px 20px 0 0; z-index: 2; } .quiz-show-container .ipad-screen iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .quiz-show-container .ipad-home-button { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; background: #444; border-radius: 3px; } /* Buzzer Section */ .quiz-show-container .buzzer-section .column-content { display: flex; flex-direction: column; align-items: center; text-align: center; } .quiz-show-container .big-buzzer { position: relative; width: 120px; height: 150px; margin-bottom: 2rem; } .quiz-show-container .buzzer-light { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 15px; background: #ff3860; border-radius: 5px; box-shadow: 0 0 15px rgba(255,56,96,0.8); animation: blink 2s infinite; } /* Buzzer Section Enhancement */ .quiz-show-container .buzzer-button { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 100px; height: 100px; background: linear-gradient(135deg, #ff3860 0%, #d81944 100%); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 900; letter-spacing: 1px; font-size: 1.5rem; color: white; box-shadow: 0 0 0 10px #333, 0 10px 20px rgba(0,0,0,0.4); animation: pulse 3s infinite; cursor: pointer; transition: all 0.2s ease; } .quiz-show-container .buzzer-button:hover { transform: translateX(-50%) scale(1.05); box-shadow: 0 0 0 10px #333, 0 15px 25px rgba(0,0,0,0.5); } .quiz-show-container .buzzer-button:active { transform: translateX(-50%) scale(0.95); box-shadow: 0 0 0 10px #333, 0 5px 15px rgba(0,0,0,0.4); } .quiz-show-container .buzzer-base { position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: #333; border-radius: 5px; box-shadow: 0 5px 10px rgba(0,0,0,0.4); } .quiz-show-container .feature-list { list-style: none; text-align: left; width: 100%; } .quiz-show-container .feature-list li { margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; color: #333; font-size: 1.3rem; } .quiz-show-container .feature-list i { color: #3a1280; font-size: 1.3rem; min-width: 24px; } /* Video Section */ .quiz-show-container .video-section .column-content { display: flex; flex-direction: column; gap: 2rem; } .quiz-show-container .direct-game-link { display: block; text-align: center; background: linear-gradient(90deg, #ff3860, #ff8f3f); color: white; text-decoration: none; font-size: 1.4rem; font-weight: 700; padding: 1.2rem 2rem; border-radius: 12px; margin: 0 auto 1.5rem; box-shadow: 0 8px 15px rgba(255,56,96,0.3); transition: all 0.3s; width: 80%; max-width: 500px; } .quiz-show-container .direct-game-link i { margin-right: 0.8rem; } .quiz-show-container .direct-game-link:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(255,56,96,0.4); color: white; } .quiz-show-container .video-player { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .quiz-show-container .video-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* Play Button Enhancement */ .quiz-show-container .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; background: rgba(255,56,96,0.8); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 0 20px rgba(255,56,96,0.6); transition: all 0.3s ease; animation: glow 2s infinite alternate; } @keyframes glow { 0% { box-shadow: 0 0 20px rgba(255,56,96,0.6); } 100% { box-shadow: 0 0 30px rgba(255,56,96,1); } } .quiz-show-container .play-button i { color: white; font-size: 2rem; } .quiz-show-container .play-button:hover { background: rgba(255,56,96,1); transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 30px rgba(255,56,96,0.8); } /* Customization Section */ .quiz-show-container .custom-section .column-content { display: flex; justify-content: flex-start; /* Changed from center to flex-start */ align-items: flex-start; height: auto; /* Changed from 100% to auto */ } .quiz-show-container .customize-panel { background: #ffffff; border-radius: 15px; overflow: hidden; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid rgba(106, 38, 205, 0.2); height: auto; /* Changed from 100% to auto to eliminate extra white space */ } .quiz-show-container .customize-options { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; /* Reduced from 1.2rem */ } .quiz-show-container .option { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem; /* Reduced from 1.8rem 1.2rem */ margin-bottom: 0.5rem; /* Reduced from 1rem */ background: rgba(106, 38, 205, 0.05); border-radius: 10px; cursor: pointer; transition: all 0.3s ease; } /* Modified Book Now button to link directly to contact page */ .quiz-show-container .book-now-option { margin-top: 0.5rem; margin-bottom: 0; background: transparent; padding: 0; justify-content: center; } .quiz-show-container .book-now-button { width: 100%; padding: 1.2rem; background: linear-gradient(90deg, #ff3860, #ff8f3f); color: white; font-weight: 700; font-size: 1.1rem; border-radius: 10px; text-align: center; box-shadow: 0 8px 15px rgba(255,56,96,0.3); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.8rem; cursor: pointer; text-decoration: none; } .quiz-show-container .book-now-button:hover { transform: translateY(-5px); box-shadow: 0 12px 20px rgba(255,56,96,0.4); color: white; } .quiz-show-container .option-icon { width: 60px; height: 60px; background: rgba(106, 38, 205, 0.3); border-radius: 15px; display: flex; justify-content: center; align-items: center; } .quiz-show-container .option-icon i { color: #fff; font-size: 1.8rem; } .quiz-show-container .option:hover { background: rgba(106, 38, 205, 0.1); transform: translateX(5px); } .quiz-show-container .option-text { font-weight: 600; font-size: 1.4rem; color: #333; } /* Value Proposition Cards */ .quiz-show-container .value-props { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto 4rem; perspective: 1000px; } .quiz-show-container .value-card { background: linear-gradient(135deg, #ffffff 0%, #f0f0f8 100%); border-radius: 15px; padding: 2rem; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transform-style: preserve-3d; transform: rotateY(5deg); transition: all 0.5s ease; border: 1px solid rgba(106, 38, 205, 0.2); } .quiz-show-container .value-card:hover { transform: rotateY(0) translateY(-10px); box-shadow: 0 20px 30px rgba(106, 38, 205, 0.2); } .quiz-show-container .value-card:nth-child(odd) { transform: rotateY(-5deg); } .quiz-show-container .value-card:nth-child(odd):hover { transform: rotateY(0) translateY(-10px); } .quiz-show-container .card-icon { font-size: 2.5rem; margin-bottom: 1.5rem; color: #6a26cd; } .quiz-show-container .value-card h3 { font-size: 1.3rem; margin-bottom: 1rem; font-weight: 700; letter-spacing: 1px; color: #3a1280; } .quiz-show-container .value-card p { font-size: 0.95rem; line-height: 1.5; color: #555; } /* Call to Action */ .quiz-show-container .cta-container { position: relative; max-width: 1000px; margin: 0 auto; background: #6a26cd; border-radius: 20px; overflow: hidden; padding: 4rem 2rem; box-shadow: 0 0 0 5px rgba(106, 38, 205, 0.3), 0 20px 50px rgba(0,0,0,0.2); } .quiz-show-container .tv-static { position: absolute; inset: 0; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); pointer-events: none; } .quiz-show-container .cta-content { position: relative; z-index: 1; text-align: center; } .quiz-show-container .cta-content h2 { font-size: 2.5rem; font-weight: 900; margin-bottom: 1.5rem; color: #fff; text-shadow: 0 0 15px rgba(0,0,0,0.3); } .quiz-show-container .cta-content p { font-size: 1.2rem; margin-bottom: 2.5rem; color: #fff; } .quiz-show-container .cta-button { display: inline-flex; align-items: center; gap: 0.8rem; background: linear-gradient(90deg, #ff3860 0%, #ff8f3f 100%); color: white; font-size: 1.2rem; font-weight: 700; padding: 1rem 2.5rem; border-radius: 50px; text-decoration: none; box-shadow: 0 10px 20px rgba(255,56,96,0.4); transition: all 0.3s ease; border: none; cursor: pointer; } /* CTA Button Enhancement */ .quiz-show-container .pulse-effect { animation: pulse-light 2s infinite; } @keyframes pulse-light { 0% { box-shadow: 0 0 0 0 rgba(255, 56, 96, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 56, 96, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 56, 96, 0); } } .quiz-show-container .cta-button:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(255,56,96,0.6); color: white; } /* Sticky Bottom CTA Bar */ .quiz-show-container .sticky-cta-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: linear-gradient(90deg, #3a1280, #6a26cd); padding: 0; z-index: 9990; box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2); transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); font-family: 'Montserrat', sans-serif !important; } .quiz-show-container .sticky-cta-bar.active { transform: translateY(0); } .quiz-show-container .sticky-cta-content { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1200px; margin: 0 auto; } .quiz-show-container .sticky-cta-text { color: white; display: flex; flex-direction: column; } .quiz-show-container .sticky-cta-text strong { font-size: 1.2rem; margin-bottom: 0.3rem; } .quiz-show-container .sticky-cta-text span { font-size: 0.9rem; opacity: 0.9; } .quiz-show-container .sticky-cta-buttons { display: flex; align-items: center; gap: 1rem; } .quiz-show-container .sticky-cta-button { background: linear-gradient(90deg, #ff3860, #ff8f3f); color: white; font-weight: 700; font-size: 1.1rem; padding: 0.8rem 1.8rem; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; border: none; cursor: pointer; box-shadow: 0 5px 15px rgba(255, 56, 96, 0.3); display: inline-block; } .quiz-show-container .sticky-cta-button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 56, 96, 0.4); color: white; } .quiz-show-container .sticky-cta-close { background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 36px; height: 36px; border-radius: 50%; font-size: 1.5rem; line-height: 1; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s; } .quiz-show-container .sticky-cta-close:hover { background: rgba(255, 255, 255, 0.3); transform: rotate(90deg); } /* Animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes blink { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } } /* Responsive Design */ @media (max-width: 1200px) { .quiz-show-container .value-props { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } @media (max-width: 992px) { .quiz-show-container .game-elements { grid-template-columns: 1fr; gap: 3rem; } .quiz-show-container .column { max-width: 600px; /* Increased from 500px to allow for larger game board */ margin: 0 auto; } .quiz-show-container .ipad-frame { max-width: 500px; /* Increased from 400px */ } /* Ensure game board is fully visible on mobile */ .quiz-show-container .ipad-screen { min-height: 650px; /* Increased to ensure content is visible */ } /* Fix for iOS touch handling */ .quiz-show-container .buzzer-button, .quiz-show-container .play-button, .quiz-show-container .cta-button { cursor: pointer; -webkit-tap-highlight-color: transparent; /* Removes tap highlight on iOS */ } /* Disable pointer events on some animations to improve performance on mobile */ .quiz-show-container .game-title-banner::before, .quiz-show-container .logo-pulse { animation-duration: 5s; /* Slower animations for better performance */ } } @media (max-width: 768px) { .quiz-show-container .sticky-cta-content { flex-direction: column; padding: 0.8rem; gap: 0.8rem; } .quiz-show-container .sticky-cta-text { text-align: center; margin-bottom: 0.5rem; } .quiz-show-container .sticky-cta-text strong { font-size: 1rem; } .quiz-show-container .sticky-cta-text span { font-size: 0.8rem; } .quiz-show-container .sticky-cta-button { font-size: 0.9rem; padding: 0.7rem 1.5rem; } .quiz-show-container .game-title { font-size: 3.5rem; } .quiz-show-container .value-props { grid-template-columns: 1fr; } .quiz-show-container .category { font-size: 0.8rem; padding: 6px 12px; } .quiz-show-container .cta-content h2 { font-size: 2rem; } .quiz-show-container .tv-description { margin-bottom: 0.5rem; } .quiz-show-container .description-text { font-size: 1.1rem; } .quiz-show-container .value-prop { font-size: 0.8rem; } .quiz-show-container .column-header h3 { font-size: 1.5rem; } .quiz-show-container .feature-list li { font-size: 1rem; } } @media (max-width: 576px) { /* Ensure direct game link is visible and bigger */ .quiz-show-container .direct-game-link { display: block !important; width: 90% !important; margin: 1rem auto 2rem !important; font-size: 1.2rem !important; padding: 1rem !important; } /* Hide only the video player on smallest screens, keep value props and CTA visible */ .quiz-show-container .video-player { display: none !important; } /* Adjust value props for better mobile display */ .quiz-show-container .value-props { grid-template-columns: 1fr !important; gap: 1rem !important; margin: 2rem 0.5rem !important; } .quiz-show-container .value-card { padding: 1.5rem !important; transform: none !important; } .quiz-show-container .value-card:hover { transform: translateY(-5px) !important; } .quiz-show-container .cta-container { margin: 0 0.5rem 2rem !important; padding: 2rem 1rem !important; } /* Increase iframe height on small screens */ .quiz-show-container .mobile-game-container iframe { height: 550px !important; } /* Adjust container padding on small screens */ .quiz-show-container { padding: 1.5rem 0 0 0 !important; /* Only keep top padding */ } /* Keep title visible */ .quiz-show-container .game-title { font-size: 2.2rem !important; margin-top: 20px !important; margin-bottom: 10px !important; } /* Reset game elements container */ .quiz-show-container .game-elements { margin: 0 !important; padding: 0 !important; width: 100% !important; } /* Ensure video section takes full width */ .quiz-show-container .video-section { width: 100% !important; max-width: none !important; } /* Center the game container */ .quiz-show-container .column-content { width: 100% !important; } .quiz-show-container .tagline { font-size: 0.9rem !important; margin-bottom: 0.5rem !important; /* Reduced margin */ } .quiz-show-container .tv-categories { display: none !important; } .quiz-show-container .description-text { font-size: 0.9rem !important; } .quiz-show-container .value-prop { font-size: 0.7rem !important; max-width: 90% !important; } .quiz-show-container .feature-list li { font-size: 0.9rem !important; margin-bottom: 0.7rem !important; } .quiz-show-container .option { padding: 0.8rem !important; } .quiz-show-container .option-icon { width: 40px !important; height: 40px !important; } .quiz-show-container .option-text { font-size: 1rem !important; } .quiz-show-container .book-now-button { padding: 0.8rem !important; font-size: 0.9rem !important; } /* Make game title banner more compact on mobile */ .quiz-show-container .game-title-banner { padding: 1rem !important; } .quiz-show-container .game-title-banner h3 { font-size: 1.3rem !important; } .quiz-show-container .game-title-banner p { font-size: 1.1rem !important; } .quiz-show-container .play-hint { font-size: 0.9rem !important; padding: 0.4rem 0.8rem !important; } /* Reduce padding on main container */ .quiz-show-container { padding: 1.5rem 0.8rem !important; } /* Make TV frame more compact */ .quiz-show-container .tv-frame { padding: 8px !important; box-shadow: 0 0 0 3px #333 !important, 0 0 20px rgba(106, 38, 205, 0.4) !important, inset 0 0 30px rgba(0,0,0,0.6) !important; } } /* ============= IMPORTANT: Prevent Footer Color Inheritance ============= */ /* This ensures our Quiz Show module does not affect site-wide styling */ .quiz-show-wrapper { /* These styles are strictly scoped to this module only */ --quiz-footer-override: initial; /* No impact outside this module */ } /* Add JavaScript for sticky CTA functionality */ document.addEventListener('DOMContentLoaded', function() { // Sticky CTA Bar functionality const stickyCta = document.getElementById('sticky-cta-bar'); const stickyCtaClose = document.getElementById('sticky-cta-close'); if (stickyCta && stickyCtaClose) { // Show sticky CTA after slight delay setTimeout(function() { stickyCta.classList.add('active'); }, 1500); // Close sticky CTA stickyCtaClose.addEventListener('click', function() { stickyCta.classList.remove('active'); // Set a cookie to remember that the user closed it const d = new Date(); d.setTime(d.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days document.cookie = "fusionCtaClosed=1; expires=" + d.toUTCString() + "; path=/"; }); // Check if user has previously closed the CTA function getCookie(name) { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); if (parts.length === 2) return parts.pop().split(';').shift(); } // Don't show if already closed if (getCookie('fusionCtaClosed')) { stickyCta.style.display = 'none'; } } });

INTERACTIVE GAME SHOW

QUIZ SHOW

TEST YOUR EVENT PLANNING KNOWLEDGE!

INTERACTIVE TEAM PLAY

CUSTOMIZE YOUR SHOW

INCREASE RETENTION

BUILD CONNECTIONS

REINFORCE MESSAGING

DRIVE RESULTS

BOOK YOUR QUIZ SHOW EXPERIENCE

uREQUEST LIVE

CHRIS TURNER

YAN MARKSON