@scrippsproduct/entertainment-sites-css 1.0.4 → 1.1.1-7.alpha.1

package/src/base.scss

@@ -1,4 +1,4 @@
-@import 'reset';
+@use 'reset';
 
 html {
     font-family: var(--main-font-family);
@@ -83,6 +83,18 @@ site-wrapper {
     animation-timing-function: ease-in;
     animation-fill-mode: forwards;
     opacity: 0;
+
+    &:has(hr.header-divider) {
+        grid-template-rows: auto auto 1fr auto;
+    }
+
+    @media screen and (max-width: 60rem) {
+        padding-block-start: 6.5rem;
+    }
+}
+
+.main-content:empty {
+    min-height: 100dvh;
 }
 
 @keyframes pageFadeIn {
@@ -115,8 +127,9 @@ content-constrainer {
 hr { 
     width: min(calc(100% - 13.125rem), 125rem);
     margin: auto;
-    border: none;
-    border-bottom: 1px solid var(--theme-color-500);
+    border-color: var(--theme-color-500);
+    border-style: solid;
+    border-width: 0 0 1px;
 }
 
 error-handler {
@@ -160,8 +173,8 @@ error-handler {
 
 .content-constrainer--lead-container {
     border-bottom: none;
-    padding-top: 1.5rem;
-    padding-block-start: 1.5rem;
+    padding-top: 0;
+    padding-block-start: 0;
 }
 
 @media screen and (max-width: 60rem) {
@@ -175,16 +188,15 @@ error-handler {
     margin-block-end: 2rem;
 }
 
-.main-content > .content-constrainer--no-padding:first-child {
-    padding-top: 0;
-    margin-top: 2rem;
-}
-
 .main-content {
     margin-top: 0;
 
     &.info-page {
-        margin-top: 1.5rem;
+        margin-top: 2rem;
+
+        @media screen and (max-width: 60rem) {
+            margin-top: 0;
+        }
     }
 }
 
@@ -200,9 +212,7 @@ error-handler {
     text-transform: uppercase;
     text-align: center;
     text-wrap: balance;
-    border-top: 1px solid var(--mono-color-100); 
-    padding-top: 2.5rem;
-    margin-top: 0.5rem;
+    margin-block: 0 2rem;
 }
 // 500px
 @media screen and (max-width: 31.15rem) {

package/src/find-us.scss

@@ -1,11 +1,4 @@
 .find-us-page {
-    .page-content-header {
-        margin: 0;
-        padding-block-start: 2.4rem;
-        text-wrap: balance;
-        line-height: 1;
-    }
-
     content-constarainer {
         margin-block-start: 2rem;
         padding-block-end: 9rem;
@@ -233,12 +226,19 @@ promotion-block {
 
     .results-table__header-row { display: none;}
 
+    .search-results-header~div:not(.ad-wrapper) {
+        border-bottom: none;
+    }
+
     .results-table__row {
         flex-direction: column;
         justify-content: flex-start;
         padding: 0.7em 0;
-        border-bottom: 1px dotted;
         text-align: left;
+        border-radius: 4px;
+        border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
+        margin-block-end: 1.25rem;
+        background-color: #f2f2f2;
 
         &:nth-of-type(2) {
             padding-top: 0.8rem;
@@ -272,7 +272,6 @@ promotion-block {
     .find-us-page .page-content-header {
         line-height: 1.1;
         margin-bottom: 0.5rem;
-        padding-top: 3rem;
     }
 }
 // 600px 

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,68 @@ header logo-navigation {
     display: none;
 }
 
+.header-divider {
+    margin-block: 2rem 2.5rem;
+    transition: border-color 0.325s ease-out;
+}
+
+.sroll-sentinel {
+    display: none;
+}
+
 @media screen and (max-width: 60rem) {
+    .scroll-sentinel {
+        position: absolute;
+        top: 10px; // Equivalent to your scrollY > 10 check
+        height: 1px;
+        width: 1px;
+        pointer-events: none;
+        visibility: hidden;
+    }
 
-    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;
+        top: 0;
+        left: 0;
         width: 100%;
+        z-index: 30;
+        padding-top: 0;
+        
+        > .desktop-nav {
+            display: none;
+        }
+    }
+    
+    .mobile-nav {
+        z-index: 1;
+        display: block;
+        position: sticky;
         top: 0;
         left: 0;
         width: 100%;
-        height: 4.375rem;
+        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));
 
-        // 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;
+        &.mobile-nav--shadow {
+            background-image:  linear-gradient(180deg,rgba(0,0,0,0.9) 0,rgba(0,0,0,0.5));
         }
     }
 
-    .mobile-nav--shadow::before {
-        opacity: 1;
+    html.scrolled .mobile-nav {
+        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 +156,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

@@ -90,7 +90,7 @@
     }
 
     img {
-        transition: all 0.325s ease-in-out; 
+        transition: transform 0.525s cubic-bezier(0.707, 1.081, 0.910, 0.998), filter 0.325s cubic-bezier(0.707, 1.081, 0.910, 0.998);
         transform-origin: bottom;      
     }
 
@@ -102,7 +102,16 @@
     .image-card-slide:hover { 
         a picture > img,
         [data-cursor="pointer"] picture > img {
-            transform: scale(1.005);  
+            transform: scale(1.01);  
+            filter: brightness(1.05) contrast(1.05);
+        }
+    }
+
+    .show-slide,
+    .image-card-slide {
+        a:focus picture > img,
+        [data-cursor="pointer"] a:focus picture > img {
+            transform: scale(1.01);  
             filter: brightness(1.05) contrast(1.05);
         }
     }
@@ -135,6 +144,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 +547,10 @@ featured-list {
             filter: unset;
         }
     }
+
+    #carousel-promotions-row {
+        --_control-btns-offset-x: -2rem !important;
+    }
 }
 // 1170px
 @media screen and (max-width: 73.125rem) {
@@ -597,7 +614,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 +672,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 +710,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/index.scss

@@ -1,17 +1,17 @@
-@import "_reset";
-@import "base";
-@import "episode-guide";
-@import "find-us";
-@import "footer";
-@import "header";
-@import "home";
-@import "page-not-found";
-@import "privacy-center";
-@import "privacy-policy";
-@import "schedule";
-@import "settings";
-@import "show-details";
-@import "shows";
-@import "special-lander";
-@import "sweeps";
+@use "_reset";
+@use "base";
+@use "episode-guide";
+@use "find-us";
+@use "footer";
+@use "header";
+@use "home";
+@use "page-not-found";
+@use "privacy-center";
+@use "privacy-policy";
+@use "schedule";
+@use "settings";
+@use "show-details";
+@use "shows";
+@use "special-lander";
+@use "sweeps";
 

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;
@@ -67,6 +72,12 @@ sticky-content-wrapper {
             max-inline-size: 80ch;
             margin-top: 1.5rem;
         }
+
+        &:first-of-type {
+           @media screen and (max-width: 50rem){
+                margin-block-start: 0;
+           }
+        }
     }
 
     > .string-list {
@@ -94,40 +105,47 @@ sticky-content-wrapper {
     font-size: 1.125rem;
     margin-bottom: 0.75rem;
     margin-block-end: 0.75rem;
+    word-wrap: normal;
+    text-wrap: nowrap;
+    white-space: nowrap;
 }
 
 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 +236,7 @@ loading-wrapper {
     }
 
     .date-navigation__control--next {
-        inset-inline-end: -1.4rem;
+        inset-inline-end: -1.2rem;
     }
 
     .schedule-list__item {
@@ -256,8 +274,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 +295,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;