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

package/site/styles/_awards.scss

@@ -1,27 +1,33 @@
 .meta-awards {
-  @extend .d-flex;
-  @extend .align-items-center;
-  margin-left: -25px;
-  margin-right: -25px;
+  margin-bottom: 24px;
 
   &.meta-awards-all {
-    @extend .align-items-start;
+    display: grid;
+    gap: 30px 104px;
+    grid-auto-rows: 1fr;
+    margin-bottom: 51px;
+
+    @include media-breakpoint-up(md) {
+      grid-template-columns: repeat(2, minmax(0, 320px));
+    }
+
+    @include media-breakpoint-up(lg) {
+      margin-bottom: 69px;
+    }
   }
 
   .meta-award-nomination {
-    @extend .d-flex;
+    display: flex;
     max-width: 370px;
-    padding-left: 25px;
-    padding-right: 25px;
   }
 
   .meta-award-nomination-icon {
     @extend .fa;
     @extend .fa-star; // for now
 
-    font-size: 1.25rem;
+    font-size: 1.5rem;
     line-height: 1.5rem;
-    padding-right: 0.5rem;
+    margin-right: 0.75rem;
   }
 }
 

package/site/styles/_buttons.scss

@@ -65,9 +65,6 @@
   background: $button-background;
   border: 3px solid $button-background;
   justify-content: center;
-  padding-bottom: 3px;
-  padding-left: 0;
-  padding-top: 3px;
   @include hover-focus {
     background: $button-background-hover;
     border: 3px solid $button-background-hover;
@@ -108,66 +105,6 @@
   }
 }
 
-.s72-btn-trailer .s72-btn-play {
-  background: transparent;
-  border: 0 none;
-
-  @include hover-focus {
-    background: transparent;
-
-    circle {
-      fill: var(--primary);
-      stroke: var(--primary);
-      stroke-width: 3px;
-    }
-
-    path {
-      fill: #000;
-      stroke: #000;
-    }
-  }
-
-  .verb {
-    background: transparent;
-    color: var(--primary);
-  }
-
-  circle {
-    fill: transparent;
-    stroke: var(--primary);
-    stroke-width: 3px;
-  }
-
-  path {
-    fill: var(--body-color);
-    stroke: var(--body-color);
-  }
-
-  .s72-btn-play-icon {
-    display: inline-block;
-    height: 32px;
-    margin-right: 0;
-    width: 32px;
-  }
-
-  .s72-btn-play-label {
-    background: transparent;
-    border-width: 0;
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-    font-size: 12px;
-    font-weight: $font-weight-bold;
-    margin-left: 0;
-    padding-bottom: 0;
-    padding-left: 8px;
-    padding-top: 0;
-
-    &::before {
-      display: none;
-    }
-  }
-}
-
 .s72-btn-rent,
 .s72-btn-purchase,
 .s72-btn-subscribe {
@@ -198,38 +135,6 @@
   @extend .btn-primary;
 }
 
-.btn-wishlist {
-  p {
-    margin: 0;
-  }
-
-  .btn-wishlist-quick {
-    left: 10px;
-    position: absolute;
-    top: 0;
-    // One more than the availability label
-    z-index: 100;
-  }
-
-  .s72-btn-wishlist {
-    background: transparent;
-    border: 0 none;
-    color: var(--body-color);
-    font-size: 14px;
-
-    .s72-icon-loading,
-    .s72-icon-errored {
-      display: none;
-    }
-  }
-
-  .s72-icon {
-    font-size: 16px !important;
-    margin-left: 0;
-    margin-right: 5px;
-  }
-}
-
 .btn-block .s72-btn {
   @extend .btn-block;
 }
@@ -284,3 +189,22 @@ s72-userwishlist-button {
     display: none;
   }
 }
+
+.extra-buttons {
+  .s72-btn-trailer,
+  s72-share-modal .s72-btn,
+  .s72-btn-wishlist {
+    height: 42px;
+    padding: 0;
+    width: 42px;
+    &:hover {
+      color: var(--main-content-icon-hover);
+    }
+
+    /* stylelint-disable selector-max-compound-selectors, max-nesting-depth */
+    i {
+      margin: 0;
+    }
+    /* stylelint-enable selector-max-compound-selectors, max-nesting-depth */
+  }
+}

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

@@ -18,7 +18,7 @@
   .verb {
     color: $button-text-color;
     font-size: 18px;
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-normal;
   }
 }
 

package/site/styles/_carousel.scss

@@ -2,6 +2,8 @@ s72-carousel {
   display: flex;
   height: var(--carousel-height);
   margin-bottom: 30px;
+  max-height: 800px;
+  min-height: 530px;
   width: 100%;
 
   @include media-breakpoint-up(sm) {
@@ -32,7 +34,7 @@ s72-carousel {
 }
 
 .carousel-item-link > s72-image {
-  height: 100%;
+  height: 90%;
   position: absolute;
   top: 0;
   width: 100%;
@@ -40,8 +42,15 @@ s72-carousel {
   img {
     height: 100%;
     object-fit: cover;
+    object-position: var(--carousel-image-object-position);
     width: 100%;
     z-index: -1;
+    @include media-breakpoint-up(sm) {
+      object-position: var(--carousel-image-object-position-sm);
+    }
+    @include media-breakpoint-up(lg) {
+      object-position: var(--carousel-image-object-position-lg);
+    }
   }
 }
 
@@ -85,6 +94,7 @@ s72-carousel {
 
 .carousel-item-caption {
   @extend .carousel-bottom-gradient;
+
   bottom: 0;
   display: flex;
   flex-direction: column;
@@ -94,27 +104,45 @@ s72-carousel {
   width: 100%;
   z-index: 999;
 
+  @include media-breakpoint-up(sm) {
+    padding: var(--carousel-bottom-gradient-height-sm) 20px 1px;
+  }
+
   @include media-breakpoint-up(lg) {
     flex-direction: row;
-    padding: var(--carousel-bottom-gradient-height) 50px 1px;
+    padding: var(--carousel-bottom-gradient-height-lg) 50px 1px;
   }
 
-  .sponsor {
+  .meta-awards {
     @include media-breakpoint-up(lg) {
-      align-self: flex-end;
+      justify-content: end;
       margin-bottom: 8px;
+    }
+  }
+
+  .sponsor-awards-wrapper {
+    color: var(--body-color);
+
+    @include media-breakpoint-up(lg) {
+      align-self: flex-end;
+      flex-shrink: 0;
       margin-left: auto;
       order: 1;
     }
   }
 
+  .sponsor {
+    @include media-breakpoint-up(lg) {
+      text-align: right;
+    }
+  }
+
   .availability-bg {
-    margin-bottom: 10px;
+    margin-bottom: 8px;
   }
 
   .availability-state {
     color: var(--body-color);
-    font-size: 12px;
     margin-bottom: 0 !important; // >:(
     text-transform: none;
   }
@@ -124,24 +152,15 @@ s72-carousel {
   }
 
   h3 {
-    color: var(--body-color);
-    font-size: 28px;
-    font-weight: $font-weight-normal;
-    margin-bottom: 8px;
+    @include heading-1-style;
     max-width: 930px;
-    padding-bottom: 0;
-
-    @include media-breakpoint-up(md) {
-      font-size: 38px;
-    }
-
-    @include media-breakpoint-up(lg) {
-      font-size: 46px;
-    }
 
-    @include media-breakpoint-up(xxxl) {
-      font-size: 46px;
-    }
+    /* stylelint-disable */
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    /* stylelint-enable */
   }
 
   h4 {
@@ -171,8 +190,6 @@ s72-carousel {
 
   .meta-item-synopsis {
     display: none;
-    font-size: 16px;
-    font-weight: $font-weight-normal;
     margin-bottom: 8px;
     max-width: 600px;
     padding-top: 0;
@@ -181,10 +198,6 @@ s72-carousel {
       display: block;
     }
   }
-
-  .meta-item-synopsis p {
-    margin-bottom: 0;
-  }
 }
 
 .s72-carousel-pagination {

package/site/styles/_collections.scss

@@ -1,5 +1,9 @@
 .page-collection {
   @extend .clearfix;
+
+  h2 {
+    @include heading-3-style;
+  }
 }
 
 .page-collection-slider {
@@ -21,21 +25,8 @@
   position: relative;
   z-index: 8;
   @include media-breakpoint-up(md) {
-    padding-bottom: $grid-gutter-width / 4;
     padding-left: 0;
   }
-
-  h2,
-  h3 {
-    font-size: 16px;
-    font-weight: $font-weight-bold;
-    @include media-breakpoint-up(md) {
-      font-size: 18px;
-    }
-    @include media-breakpoint-up(lg) {
-      font-size: 20px;
-    }
-  }
 }
 
 .page-collection-list-title {
@@ -56,6 +47,16 @@
   &:first-child {
     margin-left: -5px;
   }
+
+  h2 {
+    @include subtitle-1-style;
+  }
+
+  .title {
+    @include subtitle-1-style;
+    line-height: 1.2;
+  }
+
   > a {
     .poster {
       .hover {
@@ -253,18 +254,6 @@
 
   .caption {
     padding: 4px 0;
-    @include media-breakpoint-up(md) {
-      padding: 8px 0;
-    }
-
-    .title,
-    .runtime {
-      font-size: 12px;
-      font-weight: $font-weight-bold;
-      @include media-breakpoint-up(md) {
-        font-size: 14px;
-      }
-    }
 
     .crumb {
       @extend .d-flex;
@@ -283,12 +272,7 @@
 
     .meta-item-tagline {
       .meta-item-tagline-item {
-        font-size: 12px;
-        font-weight: $font-weight-normal;
         text-transform: uppercase;
-        @include media-breakpoint-up(md) {
-          font-size: 12px;
-        }
       }
     }
   }
@@ -320,7 +304,7 @@
       @extend .col-6;
       @extend .col-md-4;
       @extend .col-lg-3;
-      padding: 0 5px;
+      padding: 5px 5px 10px;
     }
 
     .page-collection-list-item-landscape {
@@ -328,7 +312,7 @@
         @extend .col-6;
         @extend .col-md-4;
         @extend .col-lg-3;
-        padding: 0 5px;
+        padding: 5px 5px 10px;
       }
     }
 
@@ -338,7 +322,7 @@
         @extend .col-md-3;
         @extend .col-lg-3;
         @extend .col-xl-2;
-        padding: 0 5px;
+        padding: 5px 5px 10px;
       }
     }
   }

package/site/styles/_cta-buttons.scss

@@ -10,14 +10,13 @@
   }
 
   > * {
-    &:not(.extra-buttons) {
-      animation: fadein 2s;
-    }
-
     @include media-breakpoint-up(xs) {
       grid-column: auto;
       grid-row: 1;
     }
+    &:not(.extra-buttons) {
+      animation: fadein 2s;
+    }
   }
 
   .s72-pricing-button-container {
@@ -186,77 +185,6 @@
       grid-column: auto;
       grid-row: 1;
     }
-
-    /*#region ICON HACKS.  TODO: CLEAN THIS MESS UP! */
-    // This region exists to override styles for the trailer button, wishlist button, and share modal button.
-    // Once the new icons have been committed to core-template, this region should be deleted from this file,
-    // and the new CSS for these icons should live in _buttons.scss (probably).
-    .s72-btn-play {
-      background: transparent;
-      border: 0;
-      height: 42px;
-      margin: 0;
-      padding: 0;
-      width: 42px;
-
-      @include hover-focus {
-        background: transparent;
-
-        circle {
-          fill: var(--primary);
-          stroke: var(--primary);
-          stroke-width: 3px;
-        }
-
-        path {
-          fill: #000;
-          stroke: #000;
-        }
-      }
-
-      circle {
-        fill: transparent;
-        stroke: var(--primary);
-        stroke-width: 3px;
-      }
-
-      path {
-        fill: var(--body-color);
-        stroke: var(--body-color);
-      }
-
-      .verb {
-        display: none;
-      }
-    }
-
-    .s72-userwishlist-buttons {
-      .s72-btn-wishlist {
-        height: 42px;
-        margin: 0;
-        padding: 0;
-        width: 42px;
-      }
-
-      i {
-        margin: 0;
-        padding: 0;
-      }
-
-      span {
-        font-size: 0;
-      }
-    }
-
-    .social-media-buttons {
-      .s72-btn {
-        border: 0;
-        height: 42px;
-        padding: 0;
-        width: 42px;
-      }
-    }
-    /*#endregion */
   }
 }
 /* stylelint-enable selector-max-compound-selectors, max-nesting-depth */

package/site/styles/_footer.scss

@@ -62,9 +62,8 @@ footer {
 }
 
 .copyright-statement {
-  font-size: 12px;
+  @include body-2-style;
   margin: 0 0 7px;
-  opacity: 0.8;
   text-align: center;
 
   @include media-breakpoint-up(xl) {
@@ -73,14 +72,12 @@ footer {
 }
 
 .powered-by {
-  color: rgba(var(--body-color-rgb), 0.8);
-  font-size: 12px;
-  font-weight: $font-weight-normal;
+  @include body-2-style;
   margin: 0;
   text-align: center;
 
   a {
-    font-weight: $font-weight-bold;
+    @include caption-1-style;
   }
 }
 
@@ -98,9 +95,8 @@ footer {
   }
 
   .app-badge-title {
-    font-size: 16px;
-    font-weight: $font-weight-normal;
-    margin-bottom: 12px;
+    @include body-1-style;
+    margin-bottom: 20px;
     text-align: center;
   }
 

package/site/styles/_forms.scss

@@ -1,5 +1,5 @@
 label {
-  font-size: 1rem;
+  @include subtitle-1-style;
   margin-bottom: 0.25rem;
 }
 
@@ -61,11 +61,10 @@ s72-activatedevice-form,
 }
 // Error Messaging
 .s72-error-message {
+  @include body-2-style;
   background: $error-background;
   border-radius: $border-radius;
   color: $error-color;
-  font-size: 0.875rem;
-  letter-spacing: 0.02em;
   margin-top: 10px;
   padding: 4px 8px;
   position: relative;
@@ -98,7 +97,6 @@ s72-activatedevice-form,
 }
 // Form Control Default
 .s72-form-control {
-  font-weight: $font-weight-normal;
   height: var(--input-height);
 
   /* stylelint-disable-next-line */
@@ -266,3 +264,8 @@ s72-signup-form {
     /* stylelint-enable selector-no-qualifying-type */
   }
 }
+
+.s72-form-check-label,
+.s72-form-control {
+  @include body-1-style;
+}

package/site/styles/_icons.scss

@@ -50,35 +50,35 @@
 }
 
 .fa-cc-visa::before {
-  content: '\e000';
+  content: '\e027';
 }
 
 .fa-cc-stripe::before {
-  content: '\e001';
+  content: '\e026';
 }
 
 .fa-cc-paypal::before {
-  content: '\e002';
+  content: '\e025';
 }
 
 .fa-cc-mastercard::before {
-  content: '\e003';
+  content: '\e024';
 }
 
 .fa-cc-jcb::before {
-  content: '\e004';
+  content: '\e023';
 }
 
 .fa-cc-discover::before {
-  content: '\e005';
+  content: '\e022';
 }
 
 .fa-cc-diners-club::before {
-  content: '\e006';
+  content: '\e000';
 }
 
 .fa-cc-amex::before {
-  content: '\e007';
+  content: '\e002';
 }
 
 .fa-twitter::before {
@@ -154,7 +154,7 @@
 }
 
 .fa-circle::before {
-  content: '\e01c';
+  content: '\e001';
 }
 
 .fa-warning::before,
@@ -163,6 +163,10 @@
   content: '\e01b';
 }
 
+.existing-card-icon {
+  font-size: 1.2rem;
+}
+
 s72-availability-label .availability-state::before {
   content: '\e01b';
 }
@@ -208,3 +212,12 @@ s72-availability-label .availability-state::before {
 .alert svg {
   fill: var(--primary);
 }
+
+.fa-play-trailer::before,
+.fa-share-alt::before {
+  font-size: 23px;
+}
+
+.fa-play-trailer::before {
+  content: '\e01d';
+}