@scrippsproduct/entertainment-sites-css 1.0.4 → 1.1.1

package/src/header.scss

@@ -10,6 +10,7 @@ header {
 header-menu-wrapper {
     display: flex;
     justify-content: flex-end;
+    align-items: flex-end;
     margin-left: auto;
 }
 
@@ -86,73 +87,52 @@ header logo-navigation {
     display: none;
 }
 
+.header-divider {
+    margin-block: 2rem 2.5rem;
+    transition: border-color 0.325s ease-out;
+}
+
 @media screen and (max-width: 60rem) {
 
-    header {
-        padding-top: 4.375rem; // height of mobile nav
+    site-wrapper:has(.mobile-nav--shadow) .header-divider {
+        border-color: transparent;
     }
-    
-    // hide desktop nav
-    header > content-constrainer {
-        display: none;
+
+    .header-divider {
+        margin: 0 auto 2.5rem;
     }
 
-    .mobile-nav {
-        z-index: 50;
-        display: block;
+    header {
         position: fixed;
-        width: 100%;
         top: 0;
         left: 0;
         width: 100%;
-        height: 4.375rem;
-
-        // Gradient transition hack for mobile-nav--shadow
-        &:before {
-            position: absolute;
-            content: "";
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            background: linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,0.3));
-            z-index: -1;
-            transition: opacity 0.2s linear;
-            opacity: 0;
+        z-index: 30;
+        padding-top: 4.375rem;
+        
+        > .desktop-nav {
+            display: none;
         }
     }
+    
+    .mobile-nav {
+        z-index: 1;
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 6.5rem;
+        transition: background-image 0.325s ease-out;
+        background-image:  linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0));
 
-    .mobile-nav--shadow::before {
-        opacity: 1;
+        &.mobile-nav--shadow {
+            background-image:  linear-gradient(180deg,rgba(0,0,0,0.9) 0,rgba(0,0,0,0.5));
+        }
     }
 
     .drawer-navigation__nav-bar {
         background: transparent;
-
-        // Gradient transition hack for nav-bar
-        &:before {
-            position: absolute;
-            content: "";
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            background: var(--theme-color-100);
-            z-index: -1;
-            transition: opacity 0.2s linear;
-            opacity: 0;
-        }
-    }
-
-    // Make the gradient appear immediately in the navbar when it gets opened
-    .drawer-navigation__nav-bar--expanded {
-        background: var(--theme-color-100);
-    }
-
-    // transition the nav bar gradient out gracefully when the nav menu closes
-    .drawer-navigation__nav-bar--expanded::before,
-    .drawer-navigation__nav-bar--closing::before {
-        opacity: 1;
     }
 
     .drawer-navigation__primary-navigation {
@@ -160,20 +140,12 @@ header logo-navigation {
     }
 
     .mobile-nav .main-navigation {
-        margin: 0 1rem 2rem;
+        margin: 0 0 2rem;
     }
 
     .mobile-nav .main-navigation__nav-item {
         margin-bottom: 1rem;
     }
-
-    .drawer-navigation__nav-bar .image-replacement-anchor {
-        margin-left: 1rem;
-    }
-
-    .drawer-navigation__menu-toggle {
-        padding: 1em;
-    }
     
     .drawer-navigation__separator {
         margin: 1.5rem auto;

package/src/home.scss

@@ -135,6 +135,10 @@
         align-items: center;
         grid-template-columns: 1fr 1fr;
         padding-block: 5rem;
+
+        @media  screen and (max-width: 43.75rem) {
+            padding-block: 2rem 5rem;
+        }
     }
     
     .program-airdate {
@@ -534,6 +538,10 @@ featured-list {
             filter: unset;
         }
     }
+
+    #carousel-promotions-row {
+        --_control-btns-offset-x: -2rem !important;
+    }
 }
 // 1170px
 @media screen and (max-width: 73.125rem) {
@@ -597,7 +605,7 @@ featured-list {
         --_slide-aspect-ratio: 1/1.1 !important;
 
         cta-block {
-            padding-left: 1.5rem;
+            padding-left: 0.5rem;
 
             > div {
                 font-size: 1.5em;
@@ -655,7 +663,7 @@ featured-list {
 @media screen and (max-width: 60rem) {
     .on-now-section > content-constrainer {
         grid-template-columns: 1fr;
-        gap: 2rem;
+        gap: 0;
     }
 
     .program-on-now__image-wrapper {
@@ -693,6 +701,12 @@ featured-list {
     .brand-promotion__item:last-child {
         margin-block-end: 2rem;
     }
+
+    .brand-promotion__item {
+        cta-block {
+            padding-left: 0rem;
+        }
+    }
 }
 // 700px
 @media screen and (max-width: 43.75rem) {

package/src/privacy-center.scss

@@ -2,7 +2,7 @@
     max-width: 46.875rem;
     height: auto;
     border: 1px solid #c0c2c7;
-    margin: auto auto 6rem;
+    margin: auto;
 }
 .ot-form__wrapper > p {
     padding: 3rem 6rem 2rem;

package/src/schedule.scss

@@ -1,14 +1,20 @@
 sticky-content-wrapper {
     display: block;
     position: sticky;
-    top: -3.1rem;
+    top: -1px;
     z-index: 10;
+}
 
-    &[data-pinned-state="pinned"] {
-        background-image: radial-gradient(ellipse at top left,var(--theme-color-200) 0,var(--theme-color-200) 50%,var(--theme-color-100) 90%);
+@media screen and (max-width: 60rem) {
+    sticky-content-wrapper {
+        top: 6.3rem;
     }
 }
 
+sticky-content-wrapper[data-pinned-state=pinned] {
+    background-image: radial-gradient(ellipse at top left,var(--theme-color-200) 0,var(--theme-color-200) 50%,var(--theme-color-100) 90%);
+}
+
 .schedule-list__airdate {
     font-size: 2.25rem;
     font-weight: 500;
@@ -52,7 +58,6 @@ sticky-content-wrapper {
     font-size: 1.125rem;
 
     > div {
-        margin: 0.5rem 0 1rem;
 
         &:first-of-type:not(:last-of-type) {
             font-size: 1.372rem;
@@ -97,37 +102,41 @@ sticky-content-wrapper {
 }
 
 date-navigation {
-    padding-top: 2.5rem;
-    transition: border-top 0.325s ease-in-out;
-}
+    padding-block-start: 1rem;
 
-sticky-content-wrapper[data-pinned-state="unpinned"]  date-navigation {
-    border-top: 1px solid var(--mono-color-100);
+    @media screen and (max-width: 60rem) {
+        padding-block-start: 0;
+    }
 }
 
 .date-navigation__control {
     background: transparent;
     scale: 1.5;
-    translate: 0 2rem;
+    translate: 0 1rem;
     color: var(--mono-color-100);
 }
 
 .date-navigation__control--next {
-    inset-inline-end: -5rem;
+    inset-inline-end: -2rem;
 }
 
 .date-navigation__control--previous {
-    inset-inline-start: -5rem;
+    inset-inline-start: -2rem;
 }
 
 .date-navigation__item {
+    --flex-basis: 14.285714%; 
     border-right: 1px solid rgba(255,255,255, 0.4);
-    flex-basis: 14.285714%;
+    flex-basis: var(--flex-basis);
     text-align: center;
 
     &:last-child {
         border-width: 0;
     }
+
+    @media screen and (max-width: 37.5rem) {
+        --flex-basis: 25%;
+    }
 }
 
 .date-navigation__list {
@@ -218,7 +227,7 @@ loading-wrapper {
     }
 
     .date-navigation__control--next {
-        inset-inline-end: -1.4rem;
+        inset-inline-end: -1.2rem;
     }
 
     .schedule-list__item {
@@ -256,8 +265,8 @@ loading-wrapper {
 }
 // 960px
 @media screen and (max-width: 60rem) {
-    sticky-content-wrapper[data-pinned-state=pinned] {
-        padding-top: 4rem;
+    .date-navigation__control {
+        translate: 0 0.6rem;
     }
 }
 // 800px
@@ -277,16 +286,25 @@ loading-wrapper {
 @media screen and (max-width: 46.875rem) {
     .date-navigation__control {
         scale: 0.7;
-        translate: 0 0.5rem;
+        translate: 0 -1rem;
+    }
+
+    .date-navigation__control--previous {
+        inset-inline-start: -1.6rem;
+    }
+
+    .date-navigation__control--next {
+        inset-inline-end: -1.5rem;
     }
 }
 // 500px 
-@media screen and (max-width: 31.15rem) {
+@media screen and (max-width: 31.25rem) {
     .date-navigation__weekday {
         font-size: 1rem;
     }
 
     .date-navigation__date {
         font-size: 0.8rem;
+        white-space: nowrap;
     }
 }

package/src/show-details.scss

@@ -1,3 +1,9 @@
+.show-details-page {
+    .header-divider {
+        display: none;
+    }
+}
+
 show-details-page {
     display:block;