@shift72/core-template 0.5.1 → 1.0.0-alpha.0

package/site/styles/_buttons.scss

@@ -108,40 +108,39 @@
   }
 }
 
-.s72-btn-play.s72-btn-trailer {
+.s72-btn-trailer .s72-btn-play {
   background: transparent;
   border: 0 none;
+
   @include hover-focus {
     background: transparent;
 
-    .s72-icon-play circle {
+    circle {
       fill: var(--primary);
       stroke: var(--primary);
       stroke-width: 3px;
     }
 
-    .s72-icon-play path {
+    path {
       fill: #000;
       stroke: #000;
     }
   }
 
-  &.s72-btn-trailer {
+  .verb {
     background: transparent;
-    border: 0 none;
-
-    @include media-breakpoint-up(md) {
-      margin-right: 10px;
-    }
+    color: var(--primary);
+  }
 
-    .verb {
-      background: transparent;
-      color:var(--primary);
-    }
+  circle {
+    fill: transparent;
+    stroke: var(--primary);
+    stroke-width: 3px;
   }
 
-  .verb {
-    color: $trailer-button-text-color;
+  path {
+    fill: var(--body-color);
+    stroke: var(--body-color);
   }
 
   .s72-btn-play-icon {
@@ -149,17 +148,6 @@
     height: 32px;
     margin-right: 0;
     width: 32px;
-
-    circle {
-      fill: transparent;
-      stroke: var(--primary);
-      stroke-width: 3px;
-    }
-
-    path {
-      fill: var(--body-color);
-      stroke: var(--body-color);
-    }
   }
 
   .s72-btn-play-label {
@@ -181,7 +169,8 @@
 }
 
 .s72-btn-rent,
-.s72-btn-purchase {
+.s72-btn-purchase,
+.s72-btn-subscribe {
   background: $button-background;
   border: 3px solid $button-background;
   min-width: 140px;
@@ -200,6 +189,15 @@
   }
 }
 
+.s72-btn.s72-btn-unsubscribe,
+.s72-btn.s72-btn-updatecreditcard {
+  @extend .btn-secondary;
+}
+
+.s72-btn.s72-btn-explore-subs {
+  @extend .btn-primary;
+}
+
 .btn-wishlist {
   p {
     margin: 0;
@@ -246,7 +244,10 @@
 }
 
 s72-donate-button:not(:empty) {
-   &:hover a {
+  :hover {
+    background-color: $button-background-hover;
+  }
+  &:hover a {
     background-color: $button-background-hover;
     color: $button-text-color-hover;
     /* stylelint-disable selector-max-compound-selectors */
@@ -258,8 +259,8 @@ s72-donate-button:not(:empty) {
     /* stylelint-enable selector-max-compound-selectors */
   }
   a {
-    color: $button-text-color;
     background-color: $button-background;
+    color: $button-text-color;
   }
   svg {
     g {
@@ -267,3 +268,19 @@ s72-donate-button:not(:empty) {
     }
   }
 }
+
+// sitewide we changed primary btn text to black, but these btns had no bg color, rendering text invisible
+.s72-btn-show-saved-cards,
+.s72-btn-submit-pin,
+.s72-btn-reset-pin {
+  color: var(--link-color) !important;
+}
+
+// Empty relish components sometimes have structural CSS so hide them.
+s72-play-button,
+can-be-watched-button,
+s72-userwishlist-button {
+  &:empty {
+    display: none;
+  }
+}

package/site/styles/_can-be-watched-button.scss

@@ -22,26 +22,6 @@
   }
 }
 
-.meta-detail-content .meta-detail-buttons,
-.meta-item-buttons {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  .owned-custom-container {
-    display: none;
-
-    &.s72-show {
-      display: block;
-    }
-  }
-
-  .s72-btn-play {
-    margin-right: 8px;
-  }
-}
-
 /* stylelint-disable selector-max-compound-selectors */
 .s72-userwishlist-items .partial > a,
 .s72-userlibrary-items .partial > a,

package/site/styles/_carousel.scss

@@ -1,71 +1,47 @@
-.carousel,
 s72-carousel {
-  display: block;
-  margin: 0 auto;
-  position: relative;
-}
-
-.s72-carousel-slides {
-  background: $carousel-bg-color;
-  height: var(--carousel-height) !important;
-  position: relative;
+  display: flex;
+  height: var(--carousel-height);
+  margin-bottom: 30px;
   width: 100%;
+
   @include media-breakpoint-up(sm) {
-    height: var(--carousel-height-sm) !important;
-  }
-  @include media-breakpoint-up(md) {
-    height: var(--carousel-height-md) !important;
+    height: var(--carousel-height-sm);
   }
 
-  s72-image {
-    float: right;
-    height: var(--carousel-height);
-    max-width: 1600px;
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-    @include media-breakpoint-up(sm) {
-      height: var(--carousel-height-sm);
-    }
-    @include media-breakpoint-up(md) {
-      height: var(--carousel-height-md);
-    }
+  @include media-breakpoint-up(lg) {
+    height: var(--carousel-height-lg);
+  }
+}
 
-    &::before {
-      @extend .left-gradient-bg;
-      bottom: 0;
-      content: '';
-      height: 100%;
-      left: 0;
-      position: absolute;
-      top: 0;
-      width: 60%;
-      z-index: 8;
-      @include media-breakpoint-up(lg) {
-        width: 100%;
-      }
-      @include media-breakpoint-up(xl) {
-        display: block;
-      }
-    }
+.page-collection-carousel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
 
-    img {
-      height: var(--carousel-height);
-      margin-left: 50%;
-      transform: translateX(-50%);
+.s72-carousel-slides {
+  background: $carousel-bg-color;
+  height: 100% !important;
+  margin-bottom: 10px;
+  overflow: hidden;
+  width: 100%;
 
-      @include media-breakpoint-up(sm) {
-        height: var(--carousel-height-sm);
-      }
-      @include media-breakpoint-up(md) {
-        height: var(--carousel-height-md);
-        width: auto;
-      }
-    }
+  @include media-breakpoint-up(sm) {
+    margin-bottom: 40px;
   }
+}
+
+.carousel-item-link > s72-image {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: 100%;
 
-  .s72-pricing-button-container {
-    white-space: nowrap;
+  img {
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+    z-index: -1;
   }
 }
 
@@ -77,9 +53,6 @@ s72-carousel {
   transition: opacity 0.7s linear;
   width: 100%;
   z-index: 1;
-  @include media-breakpoint-up(lg) {
-    position: absolute;
-  }
 
   &.in {
     display: block;
@@ -97,301 +70,143 @@ s72-carousel {
 
   .carousel-item-link {
     display: block;
-    height: 500px;
+    height: 100%;
+
+    &:focus-visible {
+      outline: none;
+
+      .meta-item-content {
+        border-radius: 4px;
+        outline: 1px solid var(--body-color);
+      }
+    }
   }
 }
 
 .carousel-item-caption {
+  @extend .carousel-bottom-gradient;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
   left: 0;
-  padding: 0 20px;
+  padding: var(--carousel-bottom-gradient-height) 20px 1px;
   position: absolute;
-  top: var(--carousel-caption-top);
+  width: 100%;
   z-index: 999;
-  @include media-breakpoint-up(xs) {
-    left: 60px;
-    top: var(--carousel-caption-top-xs);
-    width: 70%;
-  }
-  @include media-breakpoint-up(md) {
-    left: 60px;
-    top: var(--carousel-caption-top-md);
-    width: 70%;
-  }
+
   @include media-breakpoint-up(lg) {
-    left: 70px;
-    top: var(--carousel-caption-top-md);
-    width: 70%;
-  }
-  @include media-breakpoint-up(xl) {
-    left: 120px;
-    top: var(--carousel-caption-top-md);
-    width: 50%;
-  }
-  @include media-breakpoint-up(xxxl) {
-    top: var(--carousel-caption-top-md);
-    width: 50%;
+    flex-direction: row;
+    padding: var(--carousel-bottom-gradient-height) 50px 1px;
   }
 
-  s72-availability-status,
-  s72-availability-label {
-    position: relative;
-
-    .availability-bg {
-      background: transparent;
-      display: inline-block;
-      padding: 10px 0;
-    }
-
-    .availability-state {
-      color: var(--body-color);
-      font-size: 12px;
-      text-transform: none;
+  .sponsor {
+    @include media-breakpoint-up(lg) {
+      align-self: flex-end;
+      margin-bottom: 8px;
+      margin-left: auto;
+      order: 1;
     }
   }
 
-  .meta-item-content {
-    color: #fff;
-
-    h3 {
-      color: var(--body-color);
-      font-size: 28px;
-      font-weight: $font-weight-bold;
-      margin-bottom: 0;
-      padding-bottom: 0;
-      @include media-breakpoint-up(md) {
-        font-size: 38px;
-      }
-      @include media-breakpoint-up(lg) {
-        font-size: 48px;
-      }
-      @include media-breakpoint-up(xxxl) {
-        font-size: 54px;
-      }
-    }
-
-    h4 {
-      background: var(--primary);
-      color: #000;
-      display: inline-block;
-      font-size: 6px;
-      font-weight: $font-weight-bold;
-      padding: 2px 4px;
-      text-transform: uppercase;
-      @include media-breakpoint-up(md) {
-        font-size: 12px;
-      }
-    }
-
-    .meta-item-tagline-and-classification {
-      @extend .d-flex;
-      align-items: center;
-      padding-bottom: 8px;
-      padding-top: 8px;
-    }
-
-    .s72-classification {
-      margin-right: 5px;
-    }
-
-    .meta-item-tagline {
-      color: rgba(var(--body-color-rgb), 0.8);
-      font-size: 14px;
-      font-weight: $font-weight-normal;
-      @include media-breakpoint-up(xxxl) {
-        font-size: 18px;
-      }
-    }
-
-    .meta-item-synopsis {
-      display: block;
-      font-size: 12px;
-      font-weight: $font-weight-normal;
-      padding-top: 10px;
-      @include media-breakpoint-up(md) {
-        font-size: 16px;
-      }
-      @include media-breakpoint-up(xxxl) {
-        font-size: 16px;
-      }
-      @include media-breakpoint-up(xxxl) {
-        font-size: 18px;
-      }
-    }
-
-    .meta-item-extras {
-      @extend .d-flex;
-    }
-
-    .btn-wishlist {
-      position: relative;
-    }
+  .availability-bg {
+    margin-bottom: 10px;
   }
 
-  // Purchase, play, trailer, wishlist and share are all in one group now
-  // Need similar bootstrap approach of handling/wrapping rows and columns via negative margin
-  .meta-item-buttons {
-    margin-left: -0.5rem;
-    margin-right: -0.5rem;
-
-    /* stylelint-disable selector-max-compound-selectors */
-    s72-pricing-buttons .s72-btn,
-    .meta-detail-extras,
-    .meta-item-extras,
-    s72-play-button,
-    can-be-watched-button:not(:empty) {
-      margin-bottom: 10px;
-      margin-left: 0.5rem;
-      margin-right: 0.5rem;
-    }
-
-    // Handles spacing when there is only rent, only buy, or only play button
-    s72-pricing-buttons .s72-btn,
-    s72-play-button {
-      &:nth-child(1) {
-        margin-right: 0;
-      }
-      &:only-child {
-        margin-right: 0.5rem;
-      }
-    }
-    /* stylelint-enable selector-max-compound-selectors */
+  .availability-state {
+    color: var(--body-color);
+    font-size: 12px;
+    margin-bottom: 0 !important; // >:(
+    text-transform: none;
   }
 
-  .s72-btn-play {
-    circle {
-      fill: transparent;
-    }
+  .meta-item-content {
+    color: var(--body-color);
   }
-}
 
-.s72-carousel-pagination {
-  @extend .d-flex;
-  bottom: 2px;
-  height: 60px;
-  left: 50%;
-  line-height: 60px;
-  position: absolute;
-  transform: translateX(-50%);
+  h3 {
+    color: var(--body-color);
+    font-size: 28px;
+    font-weight: $font-weight-normal;
+    margin-bottom: 8px;
+    max-width: 930px;
+    padding-bottom: 0;
 
-  .s72-carousel-page {
-    color: rgba(var(--body-color-rgb), 0.2);
     @include media-breakpoint-up(md) {
-      margin: 0 5px;
+      font-size: 38px;
     }
 
-    &.current {
-      color: var(--primary);
+    @include media-breakpoint-up(lg) {
+      font-size: 46px;
     }
 
-    .fa {
-      @extend .fa-circle;
-      font-size: 12px;
-      padding: 0 3px;
-      @include media-breakpoint-up(md) {
-        font-size: 14px;
-      }
+    @include media-breakpoint-up(xxxl) {
+      font-size: 46px;
     }
   }
-}
 
-.s72-carousel-control {
-  @extend .d-flex;
-  bottom: 0;
-  flex-direction: column;
-  height: 60px;
-  justify-content: center;
-  line-height: 60px;
-  position: absolute;
-  text-align: center;
-  top: auto;
-  width: 50px;
-  z-index: 6;
-  @include media-breakpoint-down(sm) {
-    :hover {
-      color: var(--primary);
-    }
+  h4 {
+    background: var(--primary);
+    color: #000;
+    display: inline-block;
+    font-size: 6px;
+    font-weight: $font-weight-bold;
+    padding: 2px 4px;
+    text-transform: uppercase;
 
-    :active {
-      opacity: 0.8;
+    @include media-breakpoint-up(md) {
+      font-size: 12px;
     }
   }
-  @include media-breakpoint-up(md) {
-    background: none;
-    top: 53%;
-  }
 
-  &.left {
-    left: 0;
-    right: auto;
+  .meta-item-tagline-and-classification {
+    display: flex;
+    margin-bottom: 8px;
   }
 
-  &.right {
-    left: auto;
-    right: 0;
+  .meta-item-tagline {
+    color: rgba(var(--body-color-rgb), 0.8);
+    font-size: 14px;
+    font-weight: $font-weight-normal;
   }
 
-  &:hover,
-  &:active {
-    text-decoration: none;
-  }
+  .meta-item-synopsis {
+    display: none;
+    font-size: 16px;
+    font-weight: $font-weight-normal;
+    margin-bottom: 8px;
+    max-width: 600px;
+    padding-top: 0;
 
-  span {
-    font-size: 32px;
-    text-align: center;
-    width: 100%;
-    @include media-breakpoint-up(md) {
-      font-size: inherit;
+    @include media-breakpoint-up(xs) {
+      display: block;
     }
   }
-}
 
-.right-gradient {
-  @extend .right-gradient-bg;
-  bottom: 0;
-  display: none;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  width: 500px;
-  z-index: 9;
-  @include media-breakpoint-up(lg) {
-    display: none;
+  .meta-item-synopsis p {
+    margin-bottom: 0;
   }
 }
 
-.bottom-gradient {
-  @extend .bottom-gradient-bg;
-  bottom: 0;
-  height: 350px;
-  left: 0;
-  position: absolute;
-  width: 100%;
-  z-index: 8;
-  @include media-breakpoint-up(lg) {
-    display: block;
-    height: 500px;
-    width: 100%;
-  }
+.s72-carousel-pagination {
+  display: flex;
+  justify-content: center;
+  padding: 0 16px;
 }
 
-.left-gradient {
-  @extend .left-gradient-bg;
-  bottom: 0;
-  display: none;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 60%;
-  z-index: 8;
-  @include media-breakpoint-up(md) {
-    display: block;
-  }
-  @include media-breakpoint-up(lg) {
-    width: 100%;
+.s72-carousel-page {
+  background: none;
+  border: 0;
+  max-width: 60px;
+  padding: 10px 4px;
+  width: 100%;
+
+  .s72-carousel-line {
+    background-color: rgba(var(--body-color-rgb), 0.2);
+    border-radius: 6px;
+    height: 6px;
   }
-  @include media-breakpoint-up(xl) {
-    display: none;
-    width: 100%;
+
+  &.current .s72-carousel-line {
+    background-color: var(--primary);
   }
 }

package/site/styles/_collections.scss

@@ -1,7 +1,3 @@
-.page-collection-carousel {
-  position: relative;
-}
-
 .page-collection {
   @extend .clearfix;
 }
@@ -176,13 +172,8 @@
             flex-wrap: wrap;
             justify-content: center;
             padding-top: 10px;
-
-            .s72-classification {
-              margin-right: 5px;
-
-              .s72-classification-label {
-                font-size: 12px;
-              }
+            .s72-classification-label {
+              font-size: 12px;
             }
           }
 
@@ -242,6 +233,10 @@
           }
         }
       }
+
+      .s72-subscribe-trial-label {
+        display: none;
+      }
     }
 
     &:hover {