@shift72/core-template 0.5.0 → 0.6.0

package/site/styles/_icons.scss

@@ -1,16 +1,187 @@
-// These icons mostly build off fontawesome
-// to help with common UX class combinations.
-//--------------------------------------------------
+@font-face {
+  font-family: 'fa-s72';
+  font-style: normal;
+  font-weight: normal;
+  src: url('/fonts/fa-s72.woff') format('woff');
+}
 
-.icon-navbar-toggler {
-  @extend .fa;
-  @extend .fa-bars;
+.fa {
+  font-family: 'fa-s72' !important;
+  font-style: normal !important;
+  font-variant: normal !important;
+  font-weight: normal !important;
+  line-height: 1;
+  text-transform: none !important;
+  vertical-align: middle;
+}
+
+.fa-credit-card::before,
+.fa-trash::before {
+  font-size: 18px;
+}
+
+.fa-ellipsis-v {
+  font-size: 26px;
+}
+
+.fa-credit-card {
+  line-height: 0;
+}
+
+.fa-angle-down,
+.fa-angle-left,
+.fa-angle-right,
+.fa-angle-up {
+  &::before {
+    content: '\e017';
+  }
+}
+
+.fa-angle-left {
+  transform: rotate(90deg);
+}
+
+.fa-angle-up {
+  transform: rotate(180deg);
+}
+
+.fa-angle-right {
+  transform: rotate(270deg);
+}
+
+.fa-cc-visa::before {
+  content: '\e000';
+}
+
+.fa-cc-stripe::before {
+  content: '\e001';
+}
+
+.fa-cc-paypal::before {
+  content: '\e002';
+}
+
+.fa-cc-mastercard::before {
+  content: '\e003';
+}
+
+.fa-cc-jcb::before {
+  content: '\e004';
+}
+
+.fa-cc-discover::before {
+  content: '\e005';
+}
+
+.fa-cc-diners-club::before {
+  content: '\e006';
+}
+
+.fa-cc-amex::before {
+  content: '\e007';
+}
+
+.fa-twitter::before {
+  content: '\e008';
+}
+
+.fa-star::before {
+  content: '\e009';
+}
+
+.fa-error::before {
+  content: '\e00a';
+}
+
+.fa-circle-o::before {
+  content: '\e00b';
+}
+
+.fa-check::before {
+  content: '\e00c';
+}
+
+.fa-times::before {
+  content: '\e00d';
+}
+
+.fa-trash::before {
+  content: '\e00e';
+}
+
+.fa-facebook::before {
+  content: '\e00f';
+}
+
+.fa-link::before {
+  content: '\e010';
+}
+
+.fa-linkedin::before {
+  content: '\e011';
+}
+
+.fa-envelope::before {
+  content: '\e012';
+}
+
+.fa-ellipsis-v::before {
+  content: '\e013';
+}
+
+.fa-check-circle::before {
+  content: '\e015';
+}
+
+.fa-search::before {
+  content: '\e016';
+}
 
-  &.toggled {
-    @extend .fa-close;
+.fa-angle-down::before {
+  content: '\e017';
+}
+
+.fa-credit-card::before {
+  content: '\e018';
+}
+
+.fa-globe::before {
+  content: '\e019';
+}
+
+.fa-share-alt::before {
+  content: '\e01a';
+}
+
+.fa-circle::before {
+  content: '\e01c';
+}
+
+.fa-warning::before, .fa-exclamation-circle::before, .fa-exclamation-triangle::before {
+  content: '\e01b';
+}
+
+s72-availability-label .availability-state::before {
+  content: '\e01b';
+}
+
+.fa-spinner::before {
+  content: '\e014';
+}
+
+@keyframes fa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
   }
 }
 
+.fa-spin {
+  animation: fa-spin 2s linear infinite;
+}
+
 .icon-loading {
   @extend .fa;
   @extend .fa-spinner;
@@ -19,7 +190,7 @@
 
 .icon-errored {
   @extend .fa;
-  @extend .fa-exclamation-circle;
+  @extend .fa-warning;
 }
 
 .icon-warning {

package/site/styles/_legacy.scss

@@ -159,13 +159,6 @@ s72-classification-label {
   margin-right: 5px;
 }
 
-.meta-detail-content .meta-detail-tagline-and-classification .meta-item-tagline {
-  align-self: center;
-  color: rgba(var(--body-color-rgb), 0.8);
-  font-weight: $font-weight-normal;
-  margin-bottom: 0;
-}
-
 .wishlist-page-landscape .s72-userwishlist-items {
   @extend .d-flex;
   flex-wrap: wrap;

package/site/styles/_meta-detail.scss

@@ -120,7 +120,9 @@
 .meta-detail-main {
   @extend .d-flex;
   flex-direction: column;
+  gap: 0 20px;
   padding: var(--page-detail-padding-top) 20px 0 20px;
+
   @include media-breakpoint-up(md) {
     flex-direction: row;
     padding-bottom: 0;
@@ -135,23 +137,39 @@
   .poster {
     animation: fadein 2s;
     display: block;
-    width: 70%;
+    width: 110px;
+
+    @include media-breakpoint-up(xs) {
+      width: 155px;
+    }
+
     @include media-breakpoint-up(md) {
-      width: 200px;
+      width: 208px;
     }
   }
-  > .poster {
-    padding-right: 20px;
+
+  .poster-wrapper .sponsor {
+    @include media-breakpoint-up(xl) {
+      display: none;
+    }
   }
 }
 
-.meta-detail-content {
+s72-element-switcher,
+.meta-detail-bonus-content,
+.meta-detail-episodes-content {
+  flex: 1 1 100%;
+
   @include media-breakpoint-up(md) {
-    width: 563px;
+    max-width: 563px;
   }
   @include media-breakpoint-up(xl) {
-    width: 1100px;
+    max-width: 1100px;
   }
+}
+
+.meta-detail-content {
+  width: 100%;
 
   h1 {
     animation: fadein 2s;
@@ -175,7 +193,7 @@
   }
 
   .meta-item-tagline {
-    color: var(--body-color);
+    color: rgba(var(--body-color-rgb), 0.8);
     font-size: 14px;
     font-weight: $font-weight-normal;
     @include media-breakpoint-up(xxxl) {
@@ -228,22 +246,6 @@
     /* stylelint-enable selector-max-compound-selectors */
   }
 
-  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;
-    }
-  }
-
   .meta-detail-synopsis,
   .meta-detail-switcher-tagline {
     padding-top: 10px;
@@ -286,8 +288,6 @@
   .meta-detail-studio,
   .meta-detail-country,
   .meta-detail-subtitle {
-    padding-bottom: 20px;
-
     h2,
     h3,
     h4 {
@@ -319,25 +319,11 @@
       font-size: 12px;
     }
   }
-
-  .meta-detail-crew {
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding: 0;
-
-    .crew-member {
-      padding-bottom: 20px;
-      padding-right: 20px;
-    }
-  }
 }
 
 /* stylelint-disable selector-max-compound-selectors, max-nesting-depth */
 .meta-detail-bonus-content,
 .meta-detail-episodes-content {
-  padding: 0;
-  padding-top: 20px;
-
   h2,
   h4 {
     align-self: stretch;
@@ -600,3 +586,42 @@
     font-size: 12px;
   }
 }
+
+.element-switcher-wrapper {
+  display: flex;
+  gap: 50px;
+  justify-content: space-between;
+  width: 100%;
+
+  .sponsor {
+    display: none;
+    padding-top: 10px;
+    @include media-breakpoint-up(xl) {
+      display: block;
+    }
+  }
+}
+
+.sponsor {
+  margin-bottom: 25px;
+  max-width: 250px;
+}
+
+.meta-detail-content .sponsor {
+  flex: 0 0 auto;
+  text-align: right;
+}
+
+s72-element-switcher {
+  margin-bottom: 50px;
+}
+
+.meta-detail-info {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(1, 1fr);
+
+  @include media-breakpoint-up(lg) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

package/site/styles/_nav.scss

@@ -165,7 +165,7 @@
 }
 
 .navbar-toggler {
-  height: 16px;
+  height: 19px;
   padding: 0;
   position: relative;
   width: 24px;
@@ -383,7 +383,7 @@
 
   .search-icon {
     color: var(--body-color);
-    font-size: 18px;
+    font-size: 24px;
     left: 5px;
     pointer-events: none;
     position: absolute;
@@ -397,7 +397,8 @@
     border: 0;
     border-radius: 50%;
     color: rgba(var(--body-color-rgb), 0.7);
-    height: 32px;
+    font-size: 24px;
+    line-height: 0;
     opacity: 0;
     pointer-events: none;
     position: absolute;
@@ -891,9 +892,9 @@ s72-dropdown,
   display: flex;
   justify-content: center;
   min-height: 26px;
+  padding: 8px 0;
   text-align: center;
   z-index: 10;
-
   .header-banner-message {
     font-size: 12px;
     margin-bottom: 0;

package/site/styles/_plans.scss

@@ -32,21 +32,13 @@ s72-plan-label {
           }
         }
 
-        .poster {
-          s72-plan-label {
-            @extend .position-absolute;
-            @extend .mx-auto;
-            left: 5px !important;
-            top: 5px;
+        s72-plan-label {
+          @extend .position-absolute;
+          @extend .mx-auto;
 
-            z-index: 99;
-
-            .s72-plan-owned {
-              @extend .availability-bg;
-
-              background-color: $button-background;
-            }
-          }
+          left: 0;
+          top: 0;
+          z-index: 99;
         }
 
         s72-pricing-buttons:not(.s72-show) {
@@ -55,10 +47,11 @@ s72-plan-label {
 
         .plan-caption-details .s72-plan-owned {
           @extend .d-inline-block;
-          @extend .availability-bg;
-          @extend .mb-p5;
 
-          background-color: $button-background;
+          background-color: var(--primary);
+          border-radius: $border-radius 0 $border-radius 0;
+          line-height: 20px;
+          padding: 0 5px;
         }
 
         s72-user-anon a {

package/site/styles/_poster.scss

@@ -6,14 +6,9 @@
   width: 100%;
   z-index: 1;
 
-  s72-availability-status {
-    left: $meta-item-availability-tag-margin;
-    top: $meta-item-availability-tag-margin;
-  }
-
-  s72-availability-label {
-    bottom: $meta-item-availability-tag-margin;
-    left: $meta-item-availability-tag-margin;
+  s72-availability-status,
+  s72-plan-label {
+    color: $button-text-color;
   }
 
   .poster-overlay-top {
@@ -21,7 +16,6 @@
     @extend .justify-content-between;
     @extend .position-absolute;
 
-    @extend .p-p5;
     @extend .mw-100;
     width: 100%;
 

package/site/styles/_share-modal.scss

@@ -0,0 +1,86 @@
+s72-share-modal .fa-share-alt {
+  font-size: 20px;
+}
+
+.s72-share-modal {
+  .s72-modal-dialog {
+    @extend .p-0;
+    max-width: 320px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    @include media-breakpoint-up(sm) {
+      top: 90px;
+      transform: none;
+    }
+    .s72-modal-content {
+      @extend .p-0;
+    }
+  }
+
+  .modal-header {
+    border-bottom: 1px solid rgba(var(--body-color-rgb), 0.2);
+  }
+
+  .modal-title {
+    color: var(--body-color);
+    word-break: break-word;
+  }
+
+  .s72-modal-content {
+    background: none;
+  }
+
+  .modal-content {
+    background-color: var(--body-bg);
+    border: 0;
+  }
+
+  ul {
+    @extend .mb-0;
+  }
+
+  li {
+    @extend .list-unstyled;
+    @extend .position-relative;
+    i {
+      @extend .position-absolute;
+      font-size: 20px;
+      left: -30px;
+    }
+  }
+
+  a {
+    @extend .d-flex;
+    @extend .align-items-center;
+    color: var(--body-color);
+    padding: 0.7rem 0;
+    text-decoration: inherit;
+    word-break: break-word;
+
+    &:hover {
+      color: var(--link-color-hover);
+    }
+  }
+
+  [type='button'] {
+    // for testers on their ipod touch
+    appearance: none;
+  }
+
+  .close {
+    align-self: center;
+    color: var(--body-color);
+    opacity: 1;
+    text-shadow: none;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+// Close gap if wishlist button isn't present
+s72-userwishlist-button:empty + .social-media-buttons {
+  margin-left: -10px;
+}

package/site/styles/_shift72.scss

@@ -9,10 +9,17 @@
   .s72-icon {
     margin-left: 0.3em;
   }
+
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
 }
 
+// exists once in <s72-searchresults/>
 .s72-btn-search {
   @extend .btn-primary-override;
+  font-size: 24px;
+  line-height: 0;
 }
 
 .s72-btn-purchase {

package/site/styles/_shopping.scss

@@ -17,7 +17,6 @@
       display: block;
       height: 30px;
       line-height: 30px;
-      opacity: 1;
       position: absolute;
       right: 0;
       text-shadow: none;

package/site/styles/_skip-link.scss

@@ -16,4 +16,4 @@
     left: 0;
     position: fixed;
   }
-}
+}

package/site/styles/_tooltips.scss

@@ -0,0 +1,7 @@
+.s72-tooltip {
+  display: none;
+
+  @include media-breakpoint-up(lg) {
+    display: block;
+  }
+}

package/site/styles/_variables.scss

@@ -1,11 +1,11 @@
-@use "sass:math";
+@use 'sass:math';
 
 // This file contains any variables used by the site.
 // These variables should be reasonably generic so that overrides are placed in main.scss.
 
 :root {
-  --primary-rgb: 53, 160, 168;
-  --secondary-rgb: 76, 211, 221;
+  --primary-rgb: 0, 163, 255;
+  --secondary-rgb: 102, 199, 255;
   --body-color-rgb: 255, 255, 255;
   --body-bg-rgb: 15, 15, 15;
   --body-bg-accent-rgb: 25, 25, 25; // darken(body-bg, 10%) OR lighten(body-bg, 10%)
@@ -98,6 +98,8 @@ $spacers: (
   // 7.5px
   '1': $spacer,
   // 10px
+  '1p5': $spacer * 1.5,
+  // 15px
   '2': $spacer * 2,
   // 20px
   '2p5': $spacer * 2.5,
@@ -108,7 +110,7 @@ $spacers: (
   // 40px
   '5': $spacer * 5,
   // 50px
-  '1rem': 1rem
+  '1rem': 1rem,
 );
 
 // Cookie Consent
@@ -137,8 +139,8 @@ $subnav-nav-item-active-background-color: var(--primary) !default;
 $subnav-dropdown-background: var(--body-bg-accent) !default;
 
 // Buttons
-$button-text-color: var(--body-color) !default;
-$button-text-color-hover: var(--body-color) !default;
+$button-text-color: var(--body-bg) !default;
+$button-text-color-hover: var(--body-bg) !default;
 $button-background: var(--primary) !default;
 $button-background-hover: var(--secondary) !default;
 $trailer-button-text-color: var(--body-color) !default;
@@ -190,11 +192,10 @@ $letterboxd-color: var(--body-color) !default;
 
 // Meta Items
 // ------------------------------------
-$meta-item-border-radius: 3px !default;
+$meta-item-border-radius: 4px !default;
 $featured-meta-item-body-padding: 10px !default;
 $meta-item-body-color: var(--body-color) !default;
 $meta-item-tagline-classification-border-radius: $meta-item-border-radius !default;
-$meta-item-availability-tag-margin: 5px !default;
 
 // Posters
 // ------------------------------------

package/site/styles/_wishlist.scss

@@ -28,10 +28,10 @@
     @extend .btn;
     padding-left: 0;
 
-
     .s72-icon {
-      font-size: 32px !important;
+      font-size: 28px !important;
       opacity: 0.8;
+      padding: 2px 0;
     }
   }
 }

package/site/styles/main.scss

@@ -4,7 +4,6 @@
 @import '_mixins';
 @import '_globals';
 @import '_shift72';
-@import 'font-awesome/scss/font-awesome';
 
 @import '_icons';
 @import '_buttons';
@@ -37,7 +36,7 @@
 @import '_devices';
 @import '_gradients';
 
-@import '_social-media-buttons';
+@import '_share-modal';
 @import '_cookie-consent';
 @import '_pin-codes';
 @import '_language-selector';
@@ -47,6 +46,8 @@
 
 @import '_awards';
 
+@import '_tooltips';
+
 @import '_legacy';
 
 // @import local must be last in this file.