{"id":6387,"date":"2025-06-27T15:34:10","date_gmt":"2025-06-27T21:34:10","guid":{"rendered":"https:\/\/wordpress.megaplextheatres.com\/?p=6387"},"modified":"2025-08-18T15:55:35","modified_gmt":"2025-08-18T21:55:35","slug":"megaeventgames","status":"publish","type":"post","link":"https:\/\/wordpress.megaplextheatres.com\/index.php\/2025\/06\/27\/megaeventgames\/","title":{"rendered":"MegaEventGames"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<style>\n  \/* Add application styles & imports to this file! *\/\n  :host {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100vh;\n  }\n\n  .cards-container {\n    display: flex;\n    gap: 3rem;\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .card {\n    width: 400px;\n    height: 600px;\n    perspective: 1000px;\n    position: relative;\n    @media screen and (max-width:420px){\n      width: 300px;\n      height: 400px;\n    }\n  }\n\n  .flip-checkbox {\n    display: none;\n  }\n\n  .card-inner {\n    width: 100%;\n    height: 100%;\n    transition: transform 0.6s;\n    transform-style: preserve-3d;\n    position: relative;\n  }\n\n  .flip-checkbox:checked+.card-inner {\n    transform: rotateY(180deg);\n  }\n\n  .card-front,\n  .card-back {\n    width: 100%;\n    height: 90%;\n    position: absolute;\n    backface-visibility: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    background: #FCECA1;\n    border: 6px solid #00E6F2;\n  }\n\n  .card-back {\n    padding: 2.5rem;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n\n    .card-back-container {\n      h2 {\n        font-family: 'Salo Bold';\n        font-size: 4rem;\n        color: white;\n      }\n\n      h3 {\n        font-family: 'Founders';\n          color: #A0E9EF;\n        font-weight:normal;\n      }\n\n      ul {\n        margin-top: 3rem;\n\n        li {\n          font-family: 'Founders';\n          color: #A0E9EF;\n          padding: 0rem;\n        }\n      }\n      p{\n          opacity:70%;\n          margin-bottom:3rem;\n          font-family:'Founders';\n          color: #A0E9EF;\n      }\n\n      label {\n        cursor: pointer;\n        font-size: 5rem;\n        padding-left: 90%;\n      }\n      @media screen and (max-width:420px){\n        h2{\n          font-size: 5rem;\n        }\n        h3{\n          font-size: 1.5rem;\n        }\n        ul{\n          margin-top: 1rem;\n        }\n        p{\n          font-size: 12px;\n          margin:0px;\n        }\n      }\n    }\n  }\n\n  .card-front {\n    .learn-more-btn {\n      display: block;\n      cursor: pointer;\n      transition: transform 0.3s ease;\n      width: 150px;\n      height: auto;\n      @media screen and (max-width:420px){\n        width: 250px;\n      }\n    }\n    \n    .learn-more-btn:hover {\n      transform: scale(1.05);\n    }\n  }\n\n  .card-image-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    .card-image-content {\n      height: 40rem;\n      width: 40rem;\n      @media screen and (max-width:420px){\n        width: 27rem;\n        height: 27rem;\n      }\n    }\n  }\n\n  .card-back {\n    transform: rotateY(180deg);\n    background-color: #00303b;\n  }\n\n  .plans-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    margin: 3rem 0rem 3rem 0rem;\n  }\n\n  .option-selector {\n    display: flex;\n    gap: 5px;\n    margin-bottom: 3rem;\n    border: 4px solid #00E6F2;\n    background-color: #00E6F2;\n    width: 50rem;\n\n    @media screen and (max-width:430px){\n      width: 30rem;\n    }\n\n    div {\n      display: flex;\n      justify-content: center;\n      width: 100%;\n      margin: 0.5rem;\n\n      &.active {\n        background: #00E6F2;\n      }\n    }\n\n    button {\n      color: white;\n      padding: 1rem;\n      border: none;\n      background: #00E6F2;\n  background-color: #00E6F2; \n      cursor: pointer;\n      font-size: 2.5rem;\n      font-family: 'Salo Bold';\n    }\n  }\n\n  .variation-container {\n    display: flex;\n    gap: 10px;\n    justify-content: center;\n\n    @media screen and (max-width:768px){\n      flex-direction: column;\n    }\n\n    .variation {\n      width: 60rem;\n      height: 25rem;\n      border: 4px solid #00E6F2;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-around;\n      background-color: #FCECA1;\n\n      @media screen and (max-width:768px){\n        width: 35rem;\n        height: 35rem;\n        flex-direction: column;\n      }\n\n      .header {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n        border-bottom: 4px solid #00E6F2;\n\n        .container {\n          padding: 1rem;\n\n          h1 {\n            margin-top: 0.3rem;\n            margin-bottom: 0px;\n            font-family: 'Salo Regular';\n            color: white;\n            font-weight: normal;\n          }\n\n          h3 {\n            font-family: 'Salo Bold';\n            margin-top: 0px;\n            color: #863eff;\n\n            s {\n              font-family: 'Salo Bold';\n            }\n          }\n        }\n\n        .join-button {\n          padding: 1rem;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font-family: 'Salo Regular';\n          width: 30rem;\n\n          a {\n            width: 100%;\n            height: 100%;\n            font-size: 5rem;\n            color: black;\n            @media screen and (max-width:768px){\n              font-size: 3rem;\n            }\n          }\n        }\n      }\n\n      .content {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n\n        h2 {\n          text-transform: uppercase;\n          margin-bottom: 0.5rem;\n          font-family: 'Salo Bold';\n          color: #00E6F2;\n        }\n\n        h4 {\n          font-family: 'Founders';\n          margin: 0px;\n          padding: 0px 5rem 1rem 5rem;\n          text-align: center;\n          color: #A0E9EF;\n          font-weight: normal;\n        }\n      }\n    }\n\n    .hidden {\n      display: none;\n    }\n  }\n  \/* Enhanced Banner Style with Mobile Responsive Images *\/\n  .megaplex-banner {\n    width: 100%;\n    max-width: 1800px;\n    margin: 0 auto 2rem auto;\n    position: relative;\n  }\n\n  .megaplex-banner img {\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  \/* Desktop banner - visible by default *\/\n  .megaplex-banner .desktop-banner {\n    display: block;\n  }\n\n  \/* Mobile banner - hidden by default *\/\n  .megaplex-banner .mobile-banner {\n    display: none;\n  }\n\n  \/* Show mobile banner on mobile devices *\/\n  @media (max-width: 768px) {\n    .megaplex-banner .desktop-banner {\n      display: none;\n    }\n    \n    .megaplex-banner .mobile-banner {\n      display: block;\n    }\n  }\n\n  \/* Main Premium Container *\/\n  .premium-container {\n    width: 100%;\n    font-family: 'Salo Regular', sans-serif;\n    font-weight: normal; \n    line-height: 0;\n    background: #003F4E;\n    overflow-x: hidden;\n  }\n\n  \/* EVENT FORM STYLES *\/\n  \/* Form Container Styles *\/\n  .event-request-form {\n    max-width: 800px;\n    margin: 0 auto;\n    padding: 20px;\n    font-family: Arial, sans-serif;\n    box-sizing: border-box;\n    color: #00E6F2;\n  }\n  \n  \/* Form Grid Layout *\/\n  .form-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n  }\n  \n  \/* Full Width Field *\/\n  .full-width {\n    grid-column: 1 \/ -1;\n  }\n  \n  \/* Input Field Styles *\/\n  .form-field {\n    position: relative;\n    margin-bottom: 0;\n  }\n  \n  .form-field input,\n  .form-field textarea,\n  .form-field select {\n    width: 100%;\n    padding: 12px 15px;\n    background-color: transparent;\n    border: 5px solid #00E6F2;\n    border-radius: 2px;\n    color: #00E6F2;\n    font-size: 16px;\n    box-sizing: border-box;\n    outline: none;\n    transition: all 0.3s ease;\n  }\n  \n  \/* Custom Dropdown Styling *\/\n  .form-field select {\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300E6F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 15px center;\n    background-size: 16px;\n    padding-right: 40px;\n  }\n  \n  .form-field select:focus {\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300E6F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C\/polyline%3E%3C\/svg%3E\");\n  }\n  \n  \/* Date Field *\/\n  .form-field input[type=\"date\"] {\n    position: relative;\n  }\n  \n  .form-field input[type=\"date\"]::-webkit-calendar-picker-indicator {\n    position: absolute;\n    right: 15px;\n    top: 50%;\n    transform: translateY(-50%);\n    filter: invert(42%) sepia(97%) saturate(354%) hue-rotate(155deg) brightness(94%) contrast(94%);\n    opacity: 1;\n    cursor: pointer;\n  }\n  \n  \/* Textarea Style *\/\n  .form-field textarea {\n    min-height: 120px;\n    resize: vertical;\n  }\n  \n  \/* Placeholder Styles *\/\n  ::placeholder {\n    color: #00E6F2;\n    opacity: 1;\n  }\n  \n  :-ms-input-placeholder {\n    color: #00E6F2;\n  }\n  \n  ::-ms-input-placeholder {\n    color: #00E6F2;\n  }\n  \n  \/* Focus States *\/\n  .form-field input:focus,\n  .form-field select:focus,\n  .form-field textarea:focus {\n    border-color: #00E6F2;\n    box-shadow: 0 0 0 1px rgba(128, 91, 0, 0.2);\n  }\n  \n  \/* Submit Button Container *\/\n  .submit-container {\n    text-align: center;\n    margin-top: 30px;\n    position: relative;\n  }\n  \n  \/* Submit Button Styles *\/\n  .submit-button {\n    background: url('https:\/\/media.megaplextheatres.com\/wp-content\/uploads\/Submit Button3 Gmaes.png') no-repeat center center;\n    background-size: contain;\n    width: 300px;\n    height: 90px;\n    border: none;\n    cursor: pointer;\n    transition: transform 0.3s ease, opacity 0.3s ease;\n    color: transparent;\n    font-size: 0;\n  }\n  \n  .submit-button:hover {\n    transform: scale(1.05);\n  }\n  \n  \/* Message Styles *\/\n  .error-message {\n    color: #00E6F2;\n    font-size: 14px;\n    text-align: center;\n    margin-top: 15px;\n    display: none;\n  }\n  \n  .thank-you-message {\n    text-align: center;\n    color: #00E6F2;\n    font-size: 22px;\n    margin: 50px 0;\n    display: none;\n  }\n  \n\n  .form-heading {\n    text-align: center;\nfont-size: 10rem !important;\n    font-family: 'Salo Bold', sans-serif !important;\n    margin: 2rem auto;\n    color: #fff !important;\n    width: 100%;\n    display: block;\n    text-transform: uppercase;\n  }\n  \n  \/* Dark Blue Background *\/\n  .form-background {\n    background-color: #003F4E;\n    padding: 20px;\n    border-radius: 5px;\n    margin-top: 3rem;\n  }\n  \n  \/* Responsive Form Design *\/\n  @media screen and (max-width: 768px) {\n    .form-grid {\n      grid-template-columns: 1fr;\n      gap: 15px;\n    }\n    \n    .submit-button {\n      width: 180px;\n      height: 100px;\n    }\n    \n    \/* Mobile form heading size *\/\n    .form-heading {\n      font-size: var(--mobile-form-heading-size, var(--form-heading-size, 40px));\n    }\n  }\n  \/* Content section *\/\n  .megaplex-content {\n    width: 100%;\n    max-width: 1200px;\n    margin: 0 auto 3rem;\n    padding: 0 15px;\n  }\n  \n  \/* Info section with image and text *\/\n  .megaplex-info {\n    display: flex;\n    align-items: center;\n    gap: 30px;\n    margin-bottom: 3rem;\n  }\n  \n  .megaplex-info-image {\n    flex: 0 0 45%;\n  }\n  \n  .megaplex-info-image img {\n    width: 100%;\n    height: auto;\n  }\n  \n  .megaplex-info-text {\n    flex: 0 0 50%;\n  }\n  \n  \/* Text size customization classes *\/\n  .megaplex-info-text h2 {\n    font-size: var(--heading-size, 5rem);\nfont-family: 'Salo Bold', sans-serif !important;\n  }\n  \n  .megaplex-info-text p {\n    font-size: var(--paragraph-size, 5rem);\n    line-height: 1.5;\nfont-family: 'Founders', sans-serif !important;          \ncolor: #A0E9EF;\n  }\n  \n  \/* Optional predefined text size classes *\/\n  .text-small h2 { --heading-size: 2rem; }\n  .text-small p { --paragraph-size: 0.9rem; }\n  .text-small h3.secondary-heading { --secondary-heading-size: 1.4rem; }\n  \n  .text-medium h2 { --heading-size: 6rem; }\n  .text-medium p { --paragraph-size: 2rem; }\n  .text-medium h3.secondary-heading { --secondary-heading-size: 3rem; }\n  \n  .text-large h2 { --heading-size: 3rem; }\n  .text-large p { --paragraph-size: 1.2rem; }\n  .text-large h3.secondary-heading { --secondary-heading-size: 2.2rem; }\n  \n  \/* Movie poster grid *\/\n  .megaplex-movies {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 20px;\n  }\n  \n  .megaplex-movie-item {\n    flex: 0 0 265px;\n    margin-bottom: 20px;\n    text-align: center;\n  }\n  \n  .megaplex-movie-poster {\n    width: 100%;\n    height: auto;\n    max-width: 265px;\n  }\n  \n  .megaplex-ticket-button {\n    width: 100%;\n    max-width: 265px;\n    height: auto;\n    margin-top: 10px;\n    transition: transform 0.2s;\n  }\n  \n  .megaplex-ticket-button:hover {\n    transform: scale(1.05);\n  }\n  \n  \/* Responsive adjustments with separate mobile text sizes *\/\n  @media (max-width: 992px) {\n  .megaplex-info {\n    flex-direction: column;\n  }\n@font-face {\n  font-family: 'Salo Bold';\n  src: url('https:\/\/media.megaplextheatres.com\/wp-content\/uploads\/Salo-Bold.woff2') format('woff2');\n}\n\n@font-face {\n  font-family: 'Founders';\n  src: url('https:\/\/media.megaplextheatres.com\/wp-content\/uploads\/FoundersGrotesk-Regular.woff2') format('woff2');\n}\n\n.megaplex-info-text h2 {\n  font-family: 'Salo Bold', sans-serif !important;\n}\n\n.megaplex-info-text p {\n  font-family: 'Founders', sans-serif !important;\n}\n<\/style>\n\n<div class=\"premium-container\">\n\t<!-- Enhanced Banner Section with Mobile\/Desktop Images -->\n\t<div class=\"megaplex-banner\">\n\t\t<!-- Desktop Banner -->\n\t\t<img decoding=\"async\" src=\"https:\/\/media.megaplextheatres.com\/wp-content\/uploads\/megaeventsgames-banner-web.png\" alt=\"Spark Premium Banner Desktop\" class=\"desktop-banner\" \/>\n\t\t<!-- Mobile Banner - Replace with your mobile banner URL -->\n\t\t<img decoding=\"async\" src=\"https:\/\/media.megaplextheatres.com\/wp-content\/uploads\/megaeventsgames-banner-mobile.png\" alt=\"Spark Premium Banner Mobile\" class=\"mobile-banner\" \/>\n\t<\/div>\n\t<section id=\"standard\">\n\t\t<br><br>\n\n\t\t<!-- Main Content Section -->\n\t\t<div class=\"megaplex-content\">\n\t\t<!-- Info Section with Image and Text (Original layout) -->\n\t\t\t<div class=\"megaplex-info\">\n\t\t\t\t<div class=\"megaplex-info-image\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/media.megaplextheatres.com\/wp-content\/uploads\/Games Events Photo.png\" alt=\"Private Screening Image\">\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"megaplex-info-text text-medium\">\n\t\t\t\t\t<h2>GAME ROOM EVENTS<\/h2>\n\t\t\t\t\t<p>Level up your party just steps from the arcade. Perfect for birthdays and celebrations of all kinds, Game Room Events include 1.5 Hours of private space, game cards, pizza and unlimited soda. Plus, your own event host to keep everything on track while the fun goes off the rails (in the best way).<\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t<br>\n\t<\/section>\n<\/div>\n<div style=\"display: none\">#{{event_contact_form:MegaEventsGames}}<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<p><!-- \/wp:post-content --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p><!-- \/wp:paragraph --><\/p>","protected":false},"excerpt":{"rendered":"<p>GAME ROOM EVENTS Level up your party just steps from the arcade. Perfect for birthdays and celebrations of all kinds, Game Room Events include 1.5 Hours of private space, game cards, pizza and unlimited soda. Plus, your own event host to keep everything on track while the fun goes off the rails (in the best [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6387","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\/6387","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/comments?post=6387"}],"version-history":[{"count":18,"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/posts\/6387\/revisions"}],"predecessor-version":[{"id":6761,"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/posts\/6387\/revisions\/6761"}],"wp:attachment":[{"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/media?parent=6387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/categories?post=6387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.megaplextheatres.com\/index.php\/wp-json\/wp\/v2\/tags?post=6387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}