@shift72/core-template 1.9.25 → 1.9.26

package/site/styles/_legacy.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 html {
   height: 100%;
 }
@@ -18,21 +20,21 @@ body {
   .page-collection-items {
     .page-collection-list-item-portrait {
       &.page-collection-item-6 {
-        flex-basis: (100% / 3);
-        max-width: (100% / 3);
+        flex-basis: math.div(100%, 3);
+        max-width: math.div(100%, 3);
         @include media-breakpoint-up(sm) {
-          flex-basis: (100% / 4);
-          max-width: (100% / 4);
+          flex-basis: (100% * 0.25);
+          max-width: (100% * 0.25);
         }
         @include media-breakpoint-up(lg) {
-          flex-basis: (100% / 5);
-          max-width: (100% / 5);
+          flex-basis: (100% * 0.2);
+          max-width: (100% * 0.2);
         }
         @include media-breakpoint-up(xl) {
-          max-width: (100% / 6);
+          max-width: math.div(100%, 6);
         }
         @include media-breakpoint-up(xxxl) {
-          max-width: (100% / 8);
+          max-width: (100% * 0.125);
         }
 
         .meta-item-link {
@@ -44,18 +46,18 @@ body {
         flex-basis: 50%;
         max-width: 50%;
         @include media-breakpoint-up(sm) {
-          flex-basis: (100% / 3);
-          max-width: (100% / 3);
+          flex-basis: math.div(100%, 3);
+          max-width: math.div(100%, 3);
         }
         @include media-breakpoint-up(lg) {
-          flex-basis: (100% / 4);
-          max-width: (100% / 4);
+          flex-basis: (100% * 0.25);
+          max-width: (100% * 0.25);
         }
         @include media-breakpoint-up(xl) {
-          max-width: (100% / 5);
+          max-width: (100% * 0.2);
         }
         @include media-breakpoint-up(xxxl) {
-          max-width: (100% / 6);
+          max-width: math.div(100%, 6);
         }
 
         .meta-item-link {
@@ -69,18 +71,18 @@ body {
         flex-basis: 50%;
         max-width: 50%;
         @include media-breakpoint-up(sm) {
-          flex-basis: (100% / 3);
-          max-width: (100% / 3);
+          flex-basis: math.div(100%, 3);
+          max-width: math.div(100%, 3);
         }
         @include media-breakpoint-up(lg) {
-          flex-basis: (100% / 3);
-          max-width: (100% / 3);
+          flex-basis: math.div(100%, 3);
+          max-width: math.div(100%, 3);
         }
         @include media-breakpoint-up(xl) {
-          max-width: (100% / 4);
+          max-width: (100% * 0.25);
         }
         @include media-breakpoint-up(xxxl) {
-          max-width: (100% / 5);
+          max-width: (100% * 0.2);
         }
 
         .meta-item-link {
@@ -92,15 +94,15 @@ body {
         flex-basis: 50%;
         max-width: 50%;
         @include media-breakpoint-up(lg) {
-          flex-basis: (100% / 3);
-          max-width: (100% / 3);
+          flex-basis: math.div(100%, 3);
+          max-width: math.div(100%, 3);
         }
         @include media-breakpoint-up(xl) {
-          flex-basis: (100% / 3);
-          max-width: (100% / 3);
+          flex-basis: math.div(100%, 3);
+          max-width: math.div(100%, 3);
         }
         @include media-breakpoint-up(xxxl) {
-          max-width: (100% / 4);
+          max-width: (100% * 0.25);
         }
 
         .meta-item-link {
@@ -121,23 +123,23 @@ s72-classification-label {
   flex-wrap: wrap;
 
   .partial {
-    flex-basis: (100% / 2);
-    max-width: (100% / 2);
+    flex-basis: (100% * 0.5);
+    max-width: (100% * 0.5);
     @include media-breakpoint-up(md) {
-      flex-basis: (100% / 3);
-      max-width: (100% / 3);
+      flex-basis: math.div(100%, 3);
+      max-width: math.div(100%, 3);
     }
     @include media-breakpoint-up(lg) {
-      flex-basis: (100% / 3);
-      max-width: (100% / 3);
+      flex-basis: math.div(100%, 3);
+      max-width: math.div(100%, 3);
     }
     @include media-breakpoint-up(xl) {
-      flex-basis: (100% / 4);
-      max-width: (100% / 4);
+      flex-basis: (100% * 0.25);
+      max-width: (100% * 0.25);
     }
     @include media-breakpoint-up(xxxl) {
-      flex-basis: (100% / 4);
-      max-width: (100% / 4);
+      flex-basis: (100% * 0.25);
+      max-width: (100% * 0.25);
     }
   }
 }
@@ -147,23 +149,23 @@ s72-classification-label {
   flex-wrap: wrap;
 
   .partial {
-    flex-basis: (100% / 2);
-    max-width: (100% / 2);
+    flex-basis: (100% * 0.5);
+    max-width: (100% * 0.5);
     @include media-breakpoint-up(md) {
-      flex-basis: (100% / 3);
-      max-width: (100% / 3);
+      flex-basis: math.div(100%, 3);
+      max-width: math.div(100%, 3);
     }
     @include media-breakpoint-up(lg) {
-      flex-basis: (100% / 3);
-      max-width: (100% / 3);
+      flex-basis: math.div(100%, 3);
+      max-width: math.div(100%, 3);
     }
     @include media-breakpoint-up(xl) {
-      flex-basis: (100% / 4);
-      max-width: (100% / 4);
+      flex-basis: (100% * 0.25);
+      max-width: (100% * 0.25);
     }
     @include media-breakpoint-up(xxxl) {
-      flex-basis: (100% / 4);
-      max-width: (100% / 4);
+      flex-basis: (100% * 0.25);
+      max-width: (100% * 0.25);
     }
   }
 }
@@ -173,23 +175,23 @@ s72-classification-label {
   flex-wrap: wrap;
 
   .partial {
-    flex-basis: (100% / 2);
-    max-width: (100% / 2);
+    flex-basis: (100% * 0.5);
+    max-width: (100% * 0.5);
     @include media-breakpoint-up(md) {
-      flex-basis: (100% / 3);
-      max-width: (100% / 3);
+      flex-basis: math.div(100%, 3);
+      max-width: math.div(100%, 3);
     }
     @include media-breakpoint-up(lg) {
-      flex-basis: (100% / 3);
-      max-width: (100% / 3);
+      flex-basis: math.div(100%, 3);
+      max-width: math.div(100%, 3);
     }
     @include media-breakpoint-up(xl) {
-      flex-basis: (100% / 4);
-      max-width: (100% / 4);
+      flex-basis: (100% * 0.25);
+      max-width: (100% * 0.25);
     }
     @include media-breakpoint-up(xxxl) {
-      flex-basis: (100% / 4);
-      max-width: (100% / 4);
+      flex-basis: (100% * 0.25);
+      max-width: (100% * 0.25);
     }
   }
 }

package/site/styles/_meta-detail-creator.scss

@@ -0,0 +1,82 @@
+.meta-detail-creator {
+  .meta-detail-bg {
+    filter: blur(50px) saturate(1.4) opacity(0.4);
+    max-height: unset;
+    opacity: 1;
+    transition: 0.5s;
+
+    @include media-breakpoint-down(md) {
+      opacity: 0;
+    }
+
+    &--lights-out {
+      opacity: 0;
+    }
+  }
+
+  .meta-detail-main {
+    padding-top: 0;
+    .poster-wrapper {
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+    }
+  }
+}
+
+.detail-player-container {
+  padding: var(--page-detail-player-padding-top) var(--page-detail-padding-hz)
+    var(--page-detail-player-padding-bottom) var(--page-detail-padding-hz);
+  transition: 0.5s;
+  width: 100%;
+
+  @include media-breakpoint-down(md) {
+    padding: var(--page-detail-player-padding-top) 0
+      var(--page-detail-player-padding-bottom-theatre) 0;
+  }
+
+  @include media-breakpoint-up(lg) {
+    padding: var(--page-detail-player-padding-top-lg) var(--page-detail-padding-hz-lg)
+      var(--page-detail-player-padding-bottom) var(--page-detail-padding-hz-lg);
+  }
+
+  &.detail-player-theatre-mode {
+    padding: var(--page-detail-player-padding-top) 0
+      var(--page-detail-player-padding-bottom-theatre) 0;
+
+    @include media-breakpoint-up(lg) {
+      padding: var(--page-detail-player-padding-top-lg) 0
+        var(--page-detail-player-padding-bottom-theatre) 0;
+    }
+
+    detail-player {
+      border-radius: 0;
+      @include media-breakpoint-up(lg) {
+        height: calc(100vh - 105px);
+        max-width: 100%;
+        width: 100%;
+      }
+    }
+  }
+}
+
+detail-player {
+  aspect-ratio: 16 / 9;
+  border: solid 1px #ffffff20;
+  border-radius: 12px;
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  transition: 0.5s;
+  width: 100%;
+
+  @include media-breakpoint-down(md) {
+    border-radius: 0;
+    height: 100%;
+  }
+
+  @include media-breakpoint-up(lg) {
+    max-width: 1700px;
+    width: 65%;
+  }
+}

package/site/styles/_meta-detail.scss

@@ -103,7 +103,8 @@
 
 .meta-detail-main {
   display: grid;
-  padding: var(--page-detail-padding-top) 20px 0 20px;
+  padding: var(--page-detail-padding-top) var(--page-detail-padding-hz) 0
+    var(--page-detail-padding-hz);
 
   @include media-breakpoint-up(xs) {
     padding-top: var(--page-detail-padding-top-md);
@@ -111,7 +112,8 @@
 
   @include media-breakpoint-up(lg) {
     grid-template-columns: auto 1fr;
-    padding: var(--page-detail-padding-top-lg) 50px 0 50px;
+    padding: var(--page-detail-padding-top-lg) var(--page-detail-padding-hz-lg) 0
+      var(--page-detail-padding-hz-lg);
     padding-bottom: 0;
   }
 
@@ -481,3 +483,18 @@ s72-element-switcher {
     @include caption-1-style;
   }
 }
+
+
+comment-section {
+  display: block;
+  margin-bottom: 3rem;
+
+  padding-left: var(--page-detail-padding-hz);
+  padding-right: var(--page-detail-padding-hz);
+
+  @include media-breakpoint-up(lg) {
+    padding-left: var(--page-detail-padding-hz-lg);
+    padding-right: var(--page-detail-padding-hz-lg);
+  }
+
+}

package/site/styles/_meta-item-tagline.scss

@@ -54,3 +54,10 @@
   display: flex !important;
   padding: 5px 0 16px;
 }
+
+.caption .meta-item-tagline {
+  opacity: var(--collection-item-tagline-opacity);
+  font-size: var(--collection-item-tagline-font-size);
+  line-height: var(--collection-item-tagline-line-height);
+  letter-spacing: var(--collection-item-tagline-letter-spacing);
+}

package/site/styles/_meta-item-title.scss

@@ -1,6 +1,6 @@
 .item-title-image {
-  max-height: var(--title-image-max-height);
   margin-left: var(--title-image-left-margin);
+  max-height: var(--title-image-max-height);
   object-fit: contain;
   object-position: left;
   width: var(--title-image-width);

package/site/styles/_meta-item.scss

@@ -1,4 +1,7 @@
 .meta-item {
+  display: flex;
+  flex-direction: column;
+
   a {
     display: inline-block;
   }

package/site/styles/_nav.scss

@@ -881,6 +881,7 @@ s72-dropdown,
   z-index: 10;
   .header-banner-message {
     font-size: 12px;
+    font-weight: 400;
     margin-bottom: 0;
     @include media-breakpoint-up(sm) {
       font-size: 14px;

package/site/styles/_poster.scss

@@ -6,6 +6,8 @@
   width: 100%;
   z-index: 1;
 
+  background-color: var(--poster-skeleton-background-color);
+
   s72-availability-status,
   s72-plan-label {
     color: $button-text-color;
@@ -41,4 +43,31 @@
   max-width: 100%;
   position: relative;
   width: 100%;
+
+  // setting aspect ratios for posters helps prevent layout shift as images load
+  // in and improves the effectiveness of image lazy-loading because the images
+  // don't all collapse down to zero height.
+  &.poster-image-portrait {
+    aspect-ratio: var(--poster-portrait-aspect-ratio);
+  }
+
+  &.poster-image-landscape {
+    aspect-ratio: var(--poster-landscape-aspect-ratio);
+  }
+
+  &.s72-image--loaded {
+    // once poster images load in, let them be their intrinsic dimensions. This
+    // handles cases where the actual image size doesn't match the configured
+    // size in the css a bit better, while still keeping layouts stable in nor
+    aspect-ratio: unset;
+  }
+}
+
+s72-image .poster-image {
+  opacity: 0;
+  transition: opacity 0.25s ease;
+
+  &.s72-image--loaded {
+    opacity: 1;
+  }
 }

package/site/styles/_search.scss

@@ -29,6 +29,8 @@
 
     .partial {
       @extend .slider-item;
+      display: flex;
+      flex-direction: column;
     }
   }
 }

package/site/styles/_slider.scss

@@ -5,14 +5,14 @@ s72-userwishlist .s72-slider-control {
   border-radius: 50%;
   font-family: $font-family-base;
   height: $slider-control-height;
-  left: -$slider-control-width / 2;
+  left: -$slider-control-width * 0.5;
   margin-top: 0;
   width: $slider-control-width;
   z-index: 10;
 
   &.right {
     left: auto;
-    right: -$slider-control-width / 2;
+    right: -$slider-control-width * 0.5;
   }
 
   .s72-icon {
@@ -39,11 +39,11 @@ s72-userwishlist .s72-slider-control {
   $child-width: $width - ($page-collection-item-padding-horizontal * 2);
   .slider-#{$i} {
     &.slider-landscape .s72-slider-control {
-      top: ($child-width * $poster-landscape-size-ratio) / 2 - ($slider-control-height / 2);
+      top: ($child-width * $poster-landscape-size-ratio) * 0.5 - ($slider-control-height * 0.5);
     }
 
     &.slider-portrait .s72-slider-control {
-      top: ($child-width * $poster-portrait-size-ratio) / 2 - ($slider-control-height / 2);
+      top: ($child-width * $poster-portrait-size-ratio) * 0.5 - ($slider-control-height * 0.5);
     }
   }
 }

package/site/styles/_swiper.scss

@@ -68,3 +68,20 @@
     padding-left: 25px;
   }
 }
+
+// this helps to cover up wonky layouts before the Swiper components are
+// mounted. Items get sized dynamically and this can mean poster images
+// momentarily become huge
+.swiper-container {
+  opacity: 1;
+  transition: opacity 0.1s ease;
+
+  &:not(.swiper-container-initialized) {
+    opacity: 0;
+    pointer-events: none;
+
+    // bit of a hack to keep the length of the page from getting mad during init
+    // this isn't accurate
+    max-height: 500px;
+  }
+}

package/site/styles/_typography.scss

@@ -4,7 +4,8 @@
   $font-weight: null,
   $margin-bottom: null,
   $font-color: null,
-  $line-height: null
+  $line-height: null,
+  $opacity: null
 ) {
   color: $font-color;
   font-size: $font-size;
@@ -12,6 +13,7 @@
   letter-spacing: $letter-spacing;
   line-height: $line-height;
   margin-bottom: $margin-bottom;
+  opacity: $opacity;
 }
 
 @mixin heading-1-style() {
@@ -119,8 +121,9 @@
   @include typography-style(
     $font-size: var(--overline-style-font-size),
     $letter-spacing: var(--overline-style-letter-spacing),
-    $font-weight: $font-weight-normal,
-    $line-height: 18px
+    $font-weight: var(--overline-style-font-weight),
+    $opacity: var(--overline-style-opacity),
+    $line-height: var(--overline-style-line-height)
   );
 }
 

package/site/styles/_variables.scss

@@ -126,7 +126,7 @@
   --title-image-width-sm: 350px;
   --title-image-width-lg: 400px;
   --title-image-max-height: 180px;
-  --title-image-left-margin: 0px;
+  --title-image-left-margin: 0;
 
   // Pages
   --collection-padding-bottom: 40px;
@@ -137,6 +137,8 @@
   --page-detail-padding-top: 160px;
   --page-detail-padding-top-md: 248px;
   --page-detail-padding-top-lg: 400px;
+  --page-detail-padding-hz: 20px;
+  --page-detail-padding-hz-lg: 50px;
 
   --heading-1-style-letter-spacing: normal;
   --heading-2-style-letter-spacing: normal;
@@ -148,7 +150,6 @@
   --subtitle-1-style-letter-spacing: normal;
   --subtitle-2-style-letter-spacing: normal;
   --caption-1-style-letter-spacing: normal;
-  --overline-style-letter-spacing: normal;
 
   --heading-1-style-font-size: 32px;
   --heading-1-style-font-size-xs: 46px;
@@ -163,7 +164,37 @@
   --subtitle-1-style-font-size: 16px;
   --subtitle-2-style-font-size: 14px;
   --caption-1-style-font-size: 16px;
+
   --overline-style-font-size: 14px;
+  --overline-style-font-weight: 400;
+  --overline-style-line-height: 18px;
+  --overline-style-letter-spacing: 0;
+  --overline-style-opacity: 0.8;
+
+  --collection-item-tagline-opacity: 0.6;
+  --collection-item-tagline-font-size: 13px;
+  --collection-item-tagline-line-height: 1.2;
+  --collection-item-tagline-letter-spacing: -0.2px;
+
+  // Posters
+  --poster-portrait-aspect-ratio: 282 / 422;
+  --poster-landscape-aspect-ratio: 585 / 330;
+
+  --poster-skeleton-background-color: #3335;
+
+  // Detail player
+  --page-detail-player-padding-top: 140px;
+  --page-detail-player-padding-top-lg: 200px;
+  --page-detail-player-padding-bottom: 30px;
+  --page-detail-player-padding-bottom-theatre: 15px;
+
+  --detail-player-fallback-color: var(--body-bg-accent);
+  --detail-player-overlay-color: rgba(var(--body-bg-rgb), 0);
+  --detail-player-message-font-size: 20px;
+  --detail-player-messsage-bg-color: var(--body-bg-rgb);
+  --detail-player-messsage-font-color: var(--body-color);
+  --detail-player-lock-icon-color: var(--body-color);
+  --detail-player-play-icon-color: var(--body-color);
 
   /* Alert component dark theme colours */
 

package/site/styles/main.scss

@@ -30,6 +30,8 @@
 @import '_poster';
 
 @import '_meta-detail';
+@import '_meta-detail-creator';
+@import '_detail-player';
 @import '_footer';
 
 @import '_shopping';

package/site/templates/application/application.jet

@@ -5,8 +5,8 @@
 {{import "./pixel.jet"}}
 {{import "./footer/footer.jet" }}
 
-{{useLocalDevRelish := false }}
-{{useLocalDevCheckout := false}}
+{{useLocalDevRelish := false}}
+{{useLocalDevCheckout :=  false}}
 
 {{CDN := useLocalDevRelish ? "//localhost:3000" : "//cdn.shift72.com/" + config("s72_web_version", "1.4")}}
 
@@ -58,6 +58,12 @@
 
     <script src="{{CDN}}/s72.transactional.js" defer></script>
 
+    {{if isEnabled("commenting")}}
+      {{commentLibVersion := config("comments_version", "test")}}
+      <script src="//cdn.shift72.com/comments/{{commentLibVersion}}/s72.comments.js" defer></script>
+      <link rel="stylesheet" href="//cdn.shift72.com/comments/{{commentLibVersion}}/s72.comments.css">
+    {{end}}
+
     <script src="https://js.stripe.com/v3/" defer></script>
 
     {* get default language from site record or kibble.json depening on if db translations is enabled *}

package/site/templates/application/google.jet

@@ -1,4 +1,6 @@
 {{block googleScripts(tagManagerId=config("google_tag_manager_id"), analyticsId=config("google_analytics_id"))}}
+
+  {{useGoogleDebugMode := site.Toggles["google_analytics_debug"] || false}}
   <!-- Google integration scripts -->
   
     {{if len(tagManagerId) > 0}}
@@ -19,7 +21,7 @@
           window.dataLayer = window.dataLayer || [];
           window.gtag = function(){dataLayer.push(arguments);}
           window.gtag('js', new Date());
-          window.gtag('config', '{{analyticsId}}');
+          window.gtag('config', '{{analyticsId}}', {'debug_mode':{{useGoogleDebugMode}}});
 
           (function(d, googleId){var f = d.getElementsByTagName('script')[0];var s = d.createElement('script');
           s.src = 'https://www.googletagmanager.com/gtag/js?id=' + googleId;s.async = true;f.parentNode.insertBefore(s,f);

package/site/templates/application/head/seo.jet

@@ -56,6 +56,9 @@
     <meta name="keywords" content="{{.Seo.Keywords}}">
   {{end}}
 
+
+  {* override default setting allowing search robots to index the page if seo_meta_robots_no_index is set for private sites *}
+  {{index := site.Toggles["seo_meta_robots_no_index"] ? false : index}}
   {{if !index}}
     <meta name="robots" content="noindex, nofollow">
   {{end}}

package/site/templates/application/pixel.jet

@@ -39,7 +39,7 @@
 
 {{block pixelNoScript(pixelID=config("meta_pixel_id"))}}
   {{if len(pixelID) > 0}}
-    {{if !isEnabled("frontend_cookie_consent")}};
+    {{if !isEnabled("frontend_cookie_consent")}}
       <!-- Start Pixel (noscript) -->
       <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id={{pixelID}}&ev=PageView&noscript=1"/></noscript> 
       <!-- End Pixel (noscript) -->

package/site/templates/collection/carousel/item/video.jet

@@ -1,6 +1,6 @@
-{{block carouselItemVideo()}} 
-  <video autoplay muted loop playsInline class="carousel-item-video" data-src="{{trailerURL}}" poster="{{.Images.Carousel}}">
+{{block carouselItemVideo()}}
+  <video autoplay muted loop playsInline disablePictureInPicture class="carousel-item-video" data-src="{{trailerURL}}" poster="{{.Images.Carousel}}">
     <s72-image src="{{.Images.Carousel}}" alt="{{.Title}}" class="carousel-item-image {{focusClass}}"></s72-image>
     <source src="" type="video/mp4">
   </video>
-{{end}}
+{{end}}

package/site/templates/common/cta_buttons.jet

@@ -12,7 +12,9 @@
 
   {{showPricingButtons := isFilm || isSeason || isBundle}}
 
-  {{showPlayButton := isFilm || isSeason || isEpisode}}
+  {{useDetailPlayer := config("use_detail_page_player", "false") == "true"}}
+
+  {{showPlayButton := (isFilm || isSeason || isEpisode) && (isCarousel || !useDetailPlayer) }}
   {{showTrailerButton := trailerURL != ""}}
   {{showWishlistButton := isFilm || isSeason || isEpisode}}
   {{showShareButton := isFilm || isSeason || isEpisode || isBundle}}