{"id":8100,"date":"2026-09-09T15:36:13","date_gmt":"2026-09-09T21:36:13","guid":{"rendered":"https:\/\/wordpress.megaplextheatres.com\/?p=8100"},"modified":"2026-09-09T16:32:27","modified_gmt":"2026-09-09T22:32:27","slug":"alondra-megapass-draft","status":"publish","type":"post","link":"https:\/\/wordpress.megaplextheatres.com\/index.php\/2026\/09\/09\/alondra-megapass-draft\/","title":{"rendered":"alondra megapass DRAFT"},"content":{"rendered":"<div id=\"megapass-marketing-page\">\n<style>\n    \/* --- CSS VARIABLES & BASE STYLES --- *\/\n    :root {\n      --mp-bg-color: #0b0118; \/* Deep purple background *\/\n      --mp-primary-color: #8b3dff; \/* Bright purple *\/\n      --mp-primary-hover: #7224e6;\n      --mp-text-light: #ffffff;\n      --mp-text-muted: #bda6d9;\n      --mp-border-color: #4a2080;\n      --mp-font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    }<\/p>\n<p>    #megapass-marketing-page {\n      background-color: var(--mp-bg-color);\n      color: var(--mp-text-light);\n      font-family: var(--mp-font-family);\n      width: 100%;\n      margin: 0;\n      padding: 0 0 60px 0;\n      box-sizing: border-box;\n    }<\/p>\n<p>    #megapass-marketing-page * {\n      box-sizing: border-box;\n    }<\/p>\n<p>    .mp-container {\n      max-width: 1440px;\n      margin: 0 auto;\n      padding: 0 20px;\n    }<\/p>\n<p>    \/* --- 1. BANNER --- *\/\n    .mp-banner {\n      width: 100%;\n      max-width: 1440px;\n      margin: 0 auto 40px auto;\n      display: block;\n    }\n    .mp-banner img {\n      width: 100%;\n      height: auto;\n      display: block;\n    }<\/p>\n<p>    \/* --- 2. BENEFITS SECTION --- *\/\n    .mp-benefits-section {\n      margin-bottom: 60px;\n    }\n    .mp-benefits-grid {\n      display: flex;\n      flex-direction: row;\n      gap: 30px;<\/p>\n<p>      margin: 0px 20px 20px;\n    }\n    .mp-benefit-card {\n      background: transparent;\n      border: 2px solid var(--mp-border-color);\n      border-radius: 8px;\n      padding: 40px 20px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      transition: all 0.3s ease;\n    }\n    .mp-benefit-card img {\n      max-width: 150px;\n      height: auto;\n    }\n    .mp-benefits-disclaimer {\n      text-align: center;\n      font-size: 14px;\n      color: var(--mp-text-muted);\n      margin-top: 10px;\n    }<\/p>\n<p>    \/* Mobile Carousel Controls *\/\n    .mp-carousel-dots {\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      gap: 10px;\n      margin-bottom: 15px;\n    }\n    .mp-dot {\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n      background-color: var(--mp-border-color);\n      cursor: pointer;\n      transition: background-color 0.3s;\n    }\n    .mp-dot.active {\n      background-color: var(--mp-primary-color);\n    }<\/p>\n<p>    \/* --- 3. PLAN SELECTOR --- *\/\n    .mp-plans-section {\n      margin-bottom: 60px;\n    }\n    .mp-toggle-wrapper {\n      display: flex;\n      border: 2px solid var(--mp-border-color);\n      border-radius: 8px;\n      overflow: hidden;\n      margin-bottom: 30px;\n    }\n    .mp-toggle-btn {\n      flex: 1;\n      background: transparent;\n      color: var(--mp-text-light);\n      border: none;\n      padding: 15px;\n      font-size: 16px;\n      font-weight: bold;\n      cursor: pointer;\n      text-align: center;\n      transition: background 0.3s;\n      position: relative;\n    }\n    .mp-toggle-btn.active {\n      background: var(--mp-primary-color);\n    }\n    .mp-save-badge {\n      background: var(--mp-text-light);\n      color: var(--mp-primary-color);\n      font-size: 10px;\n      padding: 2px 6px;\n      border-radius: 4px;\n      margin-left: 8px;\n      vertical-align: middle;\n    }<\/p>\n<p>    .mp-plans-grid {\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: 20px;\n    }\n    .mp-plan-card {\n      border: 2px solid var(--mp-border-color);\n      border-radius: 8px;\n      padding: 30px;\n      display: flex;\n      flex-direction: column;\n    }\n    .mp-plan-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 15px;\n      border-bottom: 1px solid var(--mp-border-color);\n      padding-bottom: 15px;\n    }\n    .mp-plan-title {\n      font-size: 24px;\n      font-weight: 900;\n      margin: 0;\n      text-transform: uppercase;\n    }\n    .mp-plan-price {\n      font-size: 18px;\n      font-weight: bold;\n    }\n    .mp-plan-desc {\n      font-size: 16px;\n      margin-bottom: 10px;\n      font-weight: bold;\n    }\n    .mp-plan-subdesc {\n      font-size: 14px;\n      color: var(--mp-text-muted);\n      margin-bottom: 30px;\n    }\n    .mp-btn-join {\n      background: var(--mp-primary-color);\n      color: white;\n      border: none;\n      padding: 15px 30px;\n      border-radius: 4px;\n      font-size: 16px;\n      font-weight: bold;\n      cursor: pointer;\n      align-self: flex-start;\n      text-transform: uppercase;\n    }<\/p>\n<p>    \/* --- 4. SAVINGS CALCULATOR --- *\/\n    .mp-calculator-section {\n      background: linear-gradient(145deg, #180336 0%, #0b0118 100%);\n      border: 2px solid var(--mp-border-color);\n      border-radius: 16px;\n      padding: 40px;\n      margin-bottom: 80px;\n      display: flex;\n      flex-direction: column;\n      gap: 30px;\n      align-items: center;\n      text-align: center;\n    }\n    .mp-calc-left h2 {\n      font-size: 32px;\n      margin: 0 0 15px 0;\n      text-transform: uppercase;\n    }\n    .mp-calc-left p {\n      font-size: 16px;\n      color: var(--mp-text-muted);\n      margin: 0;\n      line-height: 1.5;\n    }\n    .mp-calc-right {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 20px;\n    }\n    .mp-calc-graphic img {\n      max-width: 200px;\n      height: auto;\n    }\n    .mp-btn-calc {\n      background: var(--mp-primary-color);\n      color: white;\n      border: none;\n      padding: 15px 30px;\n      border-radius: 4px;\n      font-size: 16px;\n      font-weight: bold;\n      cursor: pointer;\n      text-transform: uppercase;\n    }<\/p>\n<p>    \/* --- 5. FAQ SECTION --- *\/\n    .mp-faq-section {\n      display: flex;\n      flex-direction: column;\n      gap: 40px;\n    }\n    .mp-faq-left h2 {\n      font-size: 24px;\n      margin: 0 0 15px 0;\n    }\n    .mp-faq-left p {\n      font-size: 14px;\n      color: var(--mp-text-muted);\n      line-height: 1.6;\n    }\n    .mp-faq-left a {\n      color: var(--mp-text-light);\n      text-decoration: underline;\n    }\n    .mp-faq-right {\n      flex: 1;\n    }\n    .mp-expand-wrapper {\n      display: flex;\n      justify-content: flex-end;\n      margin-bottom: 10px;\n    }\n    .mp-btn-expand {\n      background: transparent;\n      border: none;\n      color: var(--mp-text-light);\n      font-size: 12px;\n      cursor: pointer;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n    }\n    .mp-faq-item {\n      border: 2px solid var(--mp-border-color);\n      border-radius: 4px;\n      margin-bottom: 10px;\n      overflow: hidden;\n    }\n    .mp-faq-question {\n      padding: 20px;\n      background: transparent;\n      color: white;\n      font-size: 16px;\n      font-weight: bold;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      cursor: pointer;\n      user-select: none;\n    }\n    .mp-faq-icon {\n      font-size: 20px;\n      font-weight: normal;\n      transition: transform 0.3s ease;\n    }\n    .mp-faq-answer {\n      max-height: 0;\n      padding: 0 20px;\n      background: transparent;\n      color: var(--mp-text-muted);\n      font-size: 14px;\n      line-height: 1.6;\n      transition: all 0.3s ease;\n      opacity: 0;\n    }\n    .mp-faq-item.active .mp-faq-icon {\n      transform: rotate(45deg);\n    }\n    .mp-faq-item.active .mp-faq-answer {\n      max-height: 500px;\n      padding: 0 20px 20px 20px;\n      opacity: 1;\n    }<\/p>\n<p>    \/* --- RESPONSIVE BREAKPOINTS --- *\/<\/p>\n<p>    \/* TABLET (768px to 1023px) *\/\n    @media (min-width: 768px) {\n      .mp-benefits-grid {\n        flex-direction: row;\n        flex-wrap: wrap;\n        justify-content: center;\n      }\n      .mp-benefit-card {\n        flex: 1 1 calc(50% - 15px); \/* 2 columns on tablet *\/\n      }\n      .mp-carousel-dots {\n        display: none !important; \/* Hide dots on tablet\/desktop *\/\n      }\n      .mp-plans-grid {\n        grid-template-columns: 1fr 1fr;\n      }\n    }<\/p>\n<p>    \/* DESKTOP (1024px and up) *\/\n    @media (min-width: 1024px) {\n      .mp-benefits-grid {\n        flex-wrap: nowrap;\n      }\n      .mp-benefit-card {\n        flex: 1; \/* 3 columns on desktop *\/\n      }<\/p>\n<p>      .mp-calculator-section {\n        flex-direction: row;\n        justify-content: space-between;\n        text-align: left;\n        padding: 60px;\n      }\n      .mp-calc-left {\n        max-width: 50%;\n      }\n      .mp-calc-right {\n        flex-direction: row;\n        justify-content: flex-end;\n        width: 50%;\n      }<\/p>\n<p>      .mp-faq-section {\n        flex-direction: row;\n        align-items: flex-start;\n      }\n      .mp-faq-left {\n        width: 30%;\n        position: sticky;\n        top: 40px;\n      }\n      .mp-faq-right {\n        width: 70%;\n      }\n    }\n  <\/style>\n<p>  <!-- BANNER --><\/p>\n<div class=\"mp-banner\">\n    <img decoding=\"async\" src=\"https:\/\/media.megaplextheatres.com\/wp-content\/uploads\/megapass-banner-web.png\" alt=\"MegaPass\">\n  <\/div>\n<div class=\"mp-container\">\n<p>    <!-- BENEFITS SECTION --><\/p>\n<section class=\"mp-benefits-section\">\n<div class=\"mp-benefits-grid\" id=\"mp-benefits-track\">\n<div class=\"mp-benefit-card mp-card-slide\" style=\"display: flex;\">\n          <img decoding=\"async\" src=\"https:\/\/wordpress.megaplex.io\/wp-content\/uploads\/2-tickets-month-text.png\" alt=\"Up to 2 tickets a month\">\n        <\/div>\n<div class=\"mp-benefit-card mp-card-slide\">\n          <img decoding=\"async\" src=\"https:\/\/wordpress.megaplex.io\/wp-content\/uploads\/no-fees-ticket.png\" alt=\"No online fees\">\n        <\/div>\n<div class=\"mp-benefit-card mp-card-slide\">\n          <img decoding=\"async\" src=\"https:\/\/wordpress.megaplex.io\/wp-content\/uploads\/concessions-discount.png\" alt=\"20% off concessions\">\n        <\/div>\n<\/p><\/div>\n<p>      <!-- Mobile Carousel Dots --><\/p>\n<div class=\"mp-carousel-dots\" id=\"mp-carousel-dots\">\n<div class=\"mp-dot active\" data-index=\"0\"><\/div>\n<div class=\"mp-dot\" data-index=\"1\"><\/div>\n<div class=\"mp-dot\" data-index=\"2\"><\/div>\n<\/p><\/div>\n<div class=\"mp-benefits-disclaimer\">\n        *Exceptions apply. See FAQ section below.\n      <\/div>\n<\/section>\n<p>    <!-- PLAN SELECTOR SECTION --><\/p>\n<section class=\"mp-plans-section\">\n<div class=\"mp-toggle-wrapper\">\n        <button class=\"mp-toggle-btn active\" id=\"btn-monthly\">MONTHLY<\/button><br \/>\n        <button class=\"mp-toggle-btn\" id=\"btn-annually\">ANNUALLY <span class=\"mp-save-badge\">SAVE 15%<\/span><\/button>\n      <\/div>\n<div class=\"mp-plans-grid\">\n        <!-- Plan 1 --><\/p>\n<div class=\"mp-plan-card\">\n<div class=\"mp-plan-header\">\n<h3 class=\"mp-plan-title\">Movie Lover<\/h3>\n<p>            <span class=\"mp-plan-price\" id=\"price-lover\">$9.99\/MONTH<\/span>\n          <\/div>\n<div class=\"mp-plan-desc\">1 MOVIE TICKET EVERY MONTH<\/div>\n<div class=\"mp-plan-subdesc\">For the regulars.<\/div>\n<p>          <button class=\"mp-btn-join\">JOIN<\/button>\n        <\/div>\n<p>        <!-- Plan 2 --><\/p>\n<div class=\"mp-plan-card\">\n<div class=\"mp-plan-header\">\n<h3 class=\"mp-plan-title\">Movie Fanatic<\/h3>\n<p>            <span class=\"mp-plan-price\" id=\"price-fanatic\">$19.99\/MONTH<\/span>\n          <\/div>\n<div class=\"mp-plan-desc\">2 MOVIE TICKETS EVERY MONTH<\/div>\n<div class=\"mp-plan-subdesc\">For the cinephiles.<\/div>\n<p>          <button class=\"mp-btn-join\">JOIN<\/button>\n        <\/div>\n<\/p><\/div>\n<\/section>\n<p>    <!-- SAVINGS CALCULATOR SECTION --><\/p>\n<section class=\"mp-calculator-section\">\n<div class=\"mp-calc-left\">\n<h2>Calculate Your Savings With MegaPass<\/h2>\n<p>Enjoy unlimited movies, exclusive discounts, and priority seating \u2014 all in one pass.<\/p>\n<\/p><\/div>\n<div class=\"mp-calc-right\">\n<div class=\"mp-calc-graphic\">\n          <img decoding=\"async\" src=\"https:\/\/wordpress.megaplex.io\/wp-content\/uploads\/concessions-discount.png\" alt=\"Savings Graphic\">\n        <\/div>\n<p>        <button class=\"mp-btn-calc\">CALCULATE YOUR SAVINGS<\/button>\n      <\/div>\n<\/section>\n<p>    <!-- FAQ SECTION --><\/p>\n<section class=\"mp-faq-section\">\n<div class=\"mp-faq-left\">\n<h2>FAQ<\/h2>\n<p>See MegaPass <a href=\"#\">Terms and Conditions<\/a> for more information.<\/p>\n<p>For further questions, please reach out to <a href=\"#\">Guest Services<\/a>.<\/p>\n<\/p><\/div>\n<div class=\"mp-faq-right\">\n<div class=\"mp-expand-wrapper\">\n          <button class=\"mp-btn-expand\" id=\"btn-expand-all\">EXPAND ALL<\/button>\n        <\/div>\n<div class=\"mp-faq-list\">\n<div class=\"mp-faq-item\">\n<div class=\"mp-faq-question\">\n              Do my monthly tickets apply to all premium formats?<br \/>\n              <span class=\"mp-faq-icon\">+<\/span>\n            <\/div>\n<div class=\"mp-faq-answer\">\n              Yes, MegaPass tickets can be redeemed for premium formats. However, you may be required to pay a small upgrade fee depending on the format.\n            <\/div>\n<\/p><\/div>\n<div class=\"mp-faq-item\">\n<div class=\"mp-faq-question\">\n              How much does MegaPass cost?<br \/>\n              <span class=\"mp-faq-icon\">+<\/span>\n            <\/div>\n<div class=\"mp-faq-answer\">\n              The cost depends on the plan you choose. The Movie Lover plan starts at $9.99\/month, and the Movie Fanatic plan starts at $19.99\/month. Annual options are available at a discount.\n            <\/div>\n<\/p><\/div>\n<div class=\"mp-faq-item\">\n<div class=\"mp-faq-question\">\n              What does my 20% concessions discount apply to?<br \/>\n              <span class=\"mp-faq-icon\">+<\/span>\n            <\/div>\n<div class=\"mp-faq-answer\">\n              Your 20% discount applies to most standard food and beverage items at the concession stand. Exclusions apply to alcohol and specialized merchandise.\n            <\/div>\n<\/p><\/div>\n<div class=\"mp-faq-item\">\n<div class=\"mp-faq-question\">\n              What happens if I don&#8217;t use my free MegaPass tickets every month?<br \/>\n              <span class=\"mp-faq-icon\">+<\/span>\n            <\/div>\n<div class=\"mp-faq-answer\">\n              Unused tickets roll over as long as your subscription remains active. If you cancel, you will lose access to any unused accumulated tickets.\n            <\/div>\n<\/p><\/div>\n<div class=\"mp-faq-item\">\n<div class=\"mp-faq-question\">\n              What other exclusions apply to my MegaPass tickets?<br \/>\n              <span class=\"mp-faq-icon\">+<\/span>\n            <\/div>\n<div class=\"mp-faq-answer\">\n              MegaPass tickets may not be valid for special events, marathons, or private screenings. Please check the specific event details prior to booking.\n            <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section><\/div>\n<p>  <script>\n    document.addEventListener('DOMContentLoaded', function() {<\/p>\n<p>      \/* --- 1. MOBILE CAROUSEL LOGIC --- *\/\n      const slides = document.querySelectorAll('.mp-card-slide');\n      const dots = document.querySelectorAll('.mp-dot');\n      let currentSlideIndex = 0;<\/p>\n<p>      function updateCarouselDisplay() {\n        const isMobile = window.innerWidth < 768;\n        \n        slides.forEach((slide, index) => {\n          if (isMobile) {\n            \/\/ On mobile, only show the active slide\n            slide.style.display = index === currentSlideIndex ? 'flex' : 'none';\n          } else {\n            \/\/ On tablet\/desktop, show all slides\n            slide.style.display = 'flex';\n          }\n        });<\/p>\n<p>        if (isMobile) {\n          dots.forEach((dot, index) => {\n            dot.classList.toggle('active', index === currentSlideIndex);\n          });\n        }\n      }<\/p>\n<p>      \/\/ Add click events to dots for mobile navigation\n      dots.forEach((dot, index) => {\n        dot.addEventListener('click', () => {\n          currentSlideIndex = index;\n          updateCarouselDisplay();\n        });\n      });<\/p>\n<p>      \/\/ Handle window resizing\n      window.addEventListener('resize', updateCarouselDisplay);<\/p>\n<p>      \/\/ Initialize on load\n      updateCarouselDisplay();<\/p>\n<p>      \/* --- 2. PLAN SELECTOR TOGGLE LOGIC --- *\/\n      const btnMonthly = document.getElementById('btn-monthly');\n      const btnAnnually = document.getElementById('btn-annually');\n      const priceLover = document.getElementById('price-lover');\n      const priceFanatic = document.getElementById('price-fanatic');<\/p>\n<p>      btnMonthly.addEventListener('click', () => {\n        btnMonthly.classList.add('active');\n        btnAnnually.classList.remove('active');\n        priceLover.innerText = '$9.99\/MONTH';\n        priceFanatic.innerText = '$19.99\/MONTH';\n      });<\/p>\n<p>      btnAnnually.addEventListener('click', () => {\n        btnAnnually.classList.add('active');\n        btnMonthly.classList.remove('active');\n        priceLover.innerText = '$101.90\/YEAR'; \/\/ Calculated approx with 15% discount\n        priceFanatic.innerText = '$203.90\/YEAR';\n      });<\/p>\n<p>      \/* --- 3. FAQ ACCORDION LOGIC --- *\/\n      const faqItems = document.querySelectorAll('.mp-faq-item');\n      const btnExpandAll = document.getElementById('btn-expand-all');<\/p>\n<p>      \/\/ Individual FAQ Toggle\n      faqItems.forEach(item => {\n        const question = item.querySelector('.mp-faq-question');\n        question.addEventListener('click', () => {\n          item.classList.toggle('active');\n          updateExpandAllButtonState();\n        });\n      });<\/p>\n<p>      \/\/ Expand\/Collapse All Button\n      btnExpandAll.addEventListener('click', () => {\n        const allActive = document.querySelectorAll('.mp-faq-item.active').length === faqItems.length;<\/p>\n<p>        faqItems.forEach(item => {\n          if (allActive) {\n            item.classList.remove('active');\n          } else {\n            item.classList.add('active');\n          }\n        });<\/p>\n<p>        btnExpandAll.innerText = allActive ? 'EXPAND ALL' : 'COLLAPSE ALL';\n      });<\/p>\n<p>      function updateExpandAllButtonState() {\n        const activeCount = document.querySelectorAll('.mp-faq-item.active').length;\n        if (activeCount === faqItems.length) {\n          btnExpandAll.innerText = 'COLLAPSE ALL';\n        } else {\n          btnExpandAll.innerText = 'EXPAND ALL';\n        }\n      }<\/p>\n<p>    });\n  <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>*Exceptions apply. See FAQ section below. MONTHLY ANNUALLY SAVE 15% Movie Lover $9.99\/MONTH 1 MOVIE TICKET EVERY MONTH For the regulars. JOIN Movie Fanatic $19.99\/MONTH 2 MOVIE TICKETS EVERY MONTH For the cinephiles. JOIN Calculate Your Savings With MegaPass Enjoy unlimited movies, exclusive discounts, and priority seating \u2014 all in one pass. CALCULATE YOUR SAVINGS [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8100","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/posts\/8100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/comments?post=8100"}],"version-history":[{"count":11,"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/posts\/8100\/revisions"}],"predecessor-version":[{"id":8111,"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/posts\/8100\/revisions\/8111"}],"wp:attachment":[{"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/media?parent=8100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/categories?post=8100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/tags?post=8100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}