@shift72/core-template 1.1.0 → 1.3.0-alpha.0

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/_carousel.scss

@@ -94,6 +94,7 @@ s72-carousel {
 
 .carousel-item-caption {
   @extend .carousel-bottom-gradient;
+
   bottom: 0;
   display: flex;
   flex-direction: column;
@@ -112,22 +113,36 @@ s72-carousel {
     padding: var(--carousel-bottom-gradient-height-lg) 50px 1px;
   }
 
-  .sponsor {
-    margin-bottom: 8px;
+  .meta-awards {
+    @include media-breakpoint-up(lg) {
+      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;
   }
@@ -137,12 +152,8 @@ 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;
 
     /* stylelint-disable */
     display: -webkit-box;
@@ -150,18 +161,6 @@ s72-carousel {
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     /* stylelint-enable */
-
-    @include media-breakpoint-up(md) {
-      font-size: 38px;
-    }
-
-    @include media-breakpoint-up(lg) {
-      font-size: 46px;
-    }
-
-    @include media-breakpoint-up(xxxl) {
-      font-size: 46px;
-    }
   }
 
   h4 {
@@ -191,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;
@@ -201,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

@@ -185,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

@@ -6,6 +6,7 @@
 }
 
 .fa {
+  display: inline-block;
   font-family: 'fa-s72' !important;
   font-style: normal !important;
   font-variant: normal !important;
@@ -212,3 +213,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';
+}

package/site/styles/_meta-detail.scss

@@ -182,36 +182,16 @@ s72-element-switcher,
 
   h1 {
     animation: fadein 2s;
-    font-size: 28px;
-    font-weight: $font-weight-bold;
     margin-bottom: 0;
     max-width: 728px;
     text-shadow: none;
 
-    @include media-breakpoint-up(md) {
-      font-size: 34px;
-    }
-    @include media-breakpoint-up(lg) {
-      font-size: 38px;
-    }
     @include media-breakpoint-up(xxxl) {
-      font-size: 54px;
       max-width: 1100px;
     }
-
-    small {
-      font-size: 24px;
-    }
   }
 
   .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-tagline-item,
     .meta-item-tagline-divider {
       animation: fadein 2s;
@@ -231,14 +211,6 @@ s72-element-switcher,
 
     p {
       animation: fadein 2s;
-      font-size: 12px;
-      font-weight: $font-weight-normal;
-      @include media-breakpoint-up(lg) {
-        font-size: 14px;
-      }
-      @include media-breakpoint-up(xxxl) {
-        font-size: 18px;
-      }
     }
 
     a {
@@ -257,30 +229,15 @@ s72-element-switcher,
     h4 {
       animation: fadein 2s;
       color: var(--body-color);
-      font-size: 8px;
-      font-weight: $font-weight-bold;
-      margin-bottom: 0;
-      padding-bottom: 0;
-      @include media-breakpoint-up(md) {
-        font-size: 12px;
-      }
     }
 
     p {
       animation: fadein 2s;
       color: var(--body-color);
-      font-size: 12px;
-      font-weight: $font-weight-light;
-      margin-bottom: 0;
-      @include media-breakpoint-up(md) {
-        font-size: 12px;
-      }
     }
 
     a {
-      @include a;
       animation: fadein 2s;
-      font-size: 12px;
     }
   }
 }
@@ -417,12 +374,15 @@ s72-element-switcher,
   margin-bottom: 40px;
 
   h2 {
-    font-size: 18px;
-    margin-bottom: 15px;
+    @include heading-3-style;
+  }
 
-    @include media-breakpoint-up(sm) {
-      font-size: 22px;
-    }
+  h3 {
+    @include subtitle-1-style;
+  }
+
+  .runtime {
+    @include subtitle-2-style;
   }
 }
 
@@ -442,8 +402,13 @@ s72-element-switcher,
 }
 
 .sponsor {
-  margin-bottom: 25px;
+  @include body-1-style();
+  margin-bottom: 24px;
   max-width: 250px;
+
+  div {
+    margin-bottom: 4px;
+  }
 }
 
 .meta-detail-content .sponsor {
@@ -452,7 +417,10 @@ s72-element-switcher,
 }
 
 s72-element-switcher {
-  margin-bottom: 50px;
+  margin-bottom: 60px;
+  @include media-breakpoint-up(sm) {
+    margin-bottom: 100px;
+  }
 }
 
 .meta-detail-info {
@@ -463,4 +431,12 @@ s72-element-switcher {
   @include media-breakpoint-up(lg) {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  h2 {
+    @include caption-1-style;
+  }
 }

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

@@ -1,10 +1,6 @@
 .meta-item-tagline {
   @extend .list-inline;
-  font-size: 12px;
-  @include media-breakpoint-up(md) {
-    font-size: 14px;
-  }
-
+  @include overline-style;
   .meta-item-tagline-item,
   .meta-item-tagline-divider {
     @extend .d-inline;
@@ -57,5 +53,5 @@
   align-items: center;
   display: flex !important;
   padding-bottom: 14px;
-  padding-top: 8px;
+  padding-top: 5px;
 }

package/site/styles/_meta-item.scss

@@ -83,14 +83,10 @@
 }
 
 .meta-item-synopsis {
-  color: $meta-item-body-color;
   display: none;
-  font-size: 12px;
-  font-weight: $font-weight-normal;
 
   @include media-breakpoint-up(lg) {
     display: block;
-    font-size: 12px;
     padding-top: 10px;
   }
 }

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

@@ -13,9 +13,6 @@
 
   h3 {
     color: var(--body-color);
-    font-size: 16px;
-    font-weight: $font-weight-normal;
-    letter-spacing: 0.4px;
     margin-bottom: 15px;
 
     @include media-breakpoint-up(sm) {
@@ -59,7 +56,6 @@
   }
 
   .runtime {
-    font-size: 14px;
     line-height: 14px;
   }