@scrippsproduct/entertainment-sites-css 0.0.1

package/src/index.scss

@@ -0,0 +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";
+

package/src/page-not-found.scss

@@ -0,0 +1,32 @@
+.page-not-found {
+    color: #444;
+}
+
+.page-not-found__header {
+    margin-block: 0 0.5rem;
+}
+
+.page-not-found__message {
+    margin-bottom: 1.5rem;
+    font-size: 1.25rem
+}
+
+.page-not-found__link {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin-block-end: 0.5rem;
+
+    > a {
+        color: var(--theme-color-200);
+
+        &:hover {
+            color: var(--theme-color-100);
+        }
+    }
+}
+
+.page-not-found__section {
+    background-color: #f2f2f2; 
+    padding: 2rem 2rem 3rem;
+    margin-bottom: 3rem;
+}

package/src/privacy-center.scss

@@ -0,0 +1,25 @@
+.ot-form__wrapper {
+    max-width: 46.875rem;
+    height: auto;
+    border: 1px solid #c0c2c7;
+    margin: auto auto 6rem;
+}
+.ot-form__wrapper > p {
+    padding: 3rem 6rem 2rem;
+}
+.ot-form__wrapper iframe {
+    width: 100%;
+    height: 100%;
+    min-height: 75rem;
+    border: none;
+}
+
+@media screen and (max-width: 605px) {
+    .ot-form__wrapper iframe {
+        min-height: 85rem;
+    }
+
+    .ot-form__wrapper > p {
+        padding: 2rem;
+    } 
+}

package/src/privacy-policy.scss

@@ -0,0 +1,75 @@
+h2 > a {
+    font-size: 1rem;
+    vertical-align: middle;
+}
+
+td {
+    padding: 0 1.4rem 1.4rem 0;
+}
+
+.privacy-policy__quick-links {
+    list-style: none;
+    padding: 0 0 0 2rem;
+}
+        
+.privacy-policy__quick-links > li {
+    padding: 0 0 0.7rem 0;
+}
+
+.page-content { 
+    li {
+        line-height: 1.6;
+        font-weight: 400;
+    }
+
+    strong, b {
+        font-weight: 600;
+    }
+    
+    a {
+        text-decoration: underline;
+        -moz-text-decoration-line: underline;
+        -moz-text-decoration-style: dotted;
+        -moz-text-decoration-color:#000;
+        -moz-text-decoration-skip: edges;
+        -webkit-text-decoration-line: underline;
+        -webkit-text-decoration-style: dotted;
+        -webkit-text-decoration-color: #000;
+        -webkit-text-decoration-skip-ink: all;
+        -webkit-text-decoration-skip: edges;
+        text-decoration-line: underline;
+        text-decoration-style: dotted;
+        text-decoration-color: #000;
+        text-decoration-skip-ink: all;
+        text-decoration-skip: edges;
+        color: var(--theme-color-500);
+        font-weight: 600;
+        transition: color 0.225s ease-in-out;
+
+        &:hover {
+            color: currentColor;
+        }
+    }
+
+    h2 {
+        color: var(--theme-color-400);
+    }
+}
+
+@supports selector(:has(+ *)) {
+    br:has(+ div),
+    br:has(+ br) {
+        display: none;
+    }
+
+    div {
+        scroll-margin-block-start: 4rem;
+    }
+}
+
+@media screen and (max-width: 37.5rem) {
+    .page-content ul, 
+    .page-content ol {
+        padding-left: 2rem;
+    }
+}

package/src/schedule.scss

@@ -0,0 +1,288 @@
+sticky-content-wrapper {
+    display: block;
+    position: sticky;
+    top: -3.1rem;
+    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%);
+    }
+}
+
+.schedule-list__airdate {
+    font-size: 2.25rem;
+    font-weight: 500;
+    color: var(--mono-color-400);
+    word-wrap: break-word;
+    text-wrap: balance;
+    
+    .airdate-formatter__date,
+    .airdate-formatter__day {
+        display: none;
+    }
+
+    .airdate-formatter__time-wrap {
+        br {
+            display: inline;
+        }   
+    }
+} 
+
+.schedule-list__item {
+    grid-column-gap: 2.5rem;
+    padding: 2rem 0 2.4rem;
+}
+
+.schedule-list__item .h4 {
+    margin-bottom: 0.5rem;
+    font-size: clamp(1.8rem, 1.5vw + 1rem, 2.625rem);
+    line-height: 1.2;
+    text-transform: uppercase;
+    color: var(--mono-color-400);
+}
+
+.schedule-list__item .string-list__pipe {
+    font-size: 1.1em;
+    vertical-align: baseline;
+    margin: 0 0.4em;
+    margin-inline: 0.4em;
+}
+
+.schedule-list__item .image-card__content{
+    font-size: 1.125rem;
+
+    > div {
+        margin: 0.5rem 0 1rem;
+
+        &:first-of-type:not(:last-of-type) {
+            font-size: 1.372rem;
+            font-weight: 400;
+            color: #444;
+        }
+
+        &:first-of-type,
+        ~ div {
+            line-height: 1.5;
+            color: #444;
+            max-inline-size: 80ch;
+            margin-top: 1.5rem;
+        }
+    }
+
+    > .string-list {
+        color: var(--mono-color-400);
+    }
+} 
+
+.schedule-list__item .image-card__img-wrapper {
+    flex: 0 0 clamp(330px, 47%, 580px);
+    align-self: flex-start;
+    padding-top: 0.75rem;
+}
+
+.schedule-list__item .image-card__cta {
+    color: #861D42;
+    font-weight: 500;
+}
+
+.schedule-list__on-now {
+    color: var(--mono-color-100);
+    width: max-content;
+    text-transform: uppercase;
+    background-image: var(--on-now-gradient);
+    padding: 0.5rem 1.75rem;
+    font-size: 1.125rem;
+    margin-bottom: 0.75rem;
+    margin-block-end: 0.75rem;
+}
+
+date-navigation {
+    padding-top: 2.5rem;
+    border-top: 1px solid var(--mono-color-100);
+}
+
+.date-navigation__control {
+    background: transparent;
+    scale: 1.5;
+    translate: 0 2rem;
+    color: var(--mono-color-100);
+}
+
+.date-navigation__control--next {
+    inset-inline-end: -5rem;
+}
+
+.date-navigation__control--previous {
+    inset-inline-start: -5rem;
+}
+
+.date-navigation__item {
+    border-right: 1px solid rgba(255,255,255, 0.4);
+    flex-basis: 14.285714%;
+    text-align: center;
+
+    &:last-child {
+        border-width: 0;
+    }
+}
+
+.date-navigation__list {
+    position: relative;
+    padding-bottom: 1.5rem;
+    --pointer-position: 0;
+
+    &:before {
+        content: '';
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 0 14px 14px;
+        border-color: transparent transparent var(--mono-color-100) transparent;
+        position: absolute;
+        bottom: -1px;
+        transform: translateX(calc(var(--pointer-position) - 100%));
+        transition: transform 0.325s ease-in-out;
+    }
+}
+
+.date-navigation__day {
+    transition: scale 0.325s ease-in-out, text-shadow 0.325s ease-out;
+    padding: 0;
+    box-sizing: border-box;
+    
+    &:hover {
+        scale: 1.1;
+
+        .date-navigation__weekday {
+            transform: translate3d(0, 0.2rem, 0);
+        }
+
+        .date-navigation__date {
+            transform: translate3d(0, -0.2rem, 0);
+        }
+    }
+
+    &[aria-selected="true"] {
+        cursor: default;
+
+        .date-navigation__weekday{
+            font-weight: 900;
+        }
+
+        &:hover {
+            scale: 1;
+
+            .date-navigation__weekday,
+            .date-navigation__date {
+                transform: none;
+            }
+        }
+    }
+}
+
+.date-navigation__weekday,
+.date-navigation__date {
+    color: var(--mono-color-100);
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    transition: transform 0.225s ease-out;
+}
+
+.date-navigation__weekday {
+    font-size: 2rem;
+}
+
+.schedule-list__no-schedule {
+    text-align: center;
+    padding: 2rem;
+}
+
+loading-wrapper {
+    min-height: 14rem;
+}
+
+// 1500px 
+@media screen and (max-width: 93.75rem) {
+    .schedule-list__airdate {
+        font-size: 2rem;
+    }
+}
+// 1280px
+@media screen and (max-width: 80rem) {
+    .date-navigation__control--previous {
+        inset-inline-start: -1.4rem;
+    }
+
+    .date-navigation__control--next {
+        inset-inline-end: -1.4rem;
+    }
+
+    .schedule-list__item {
+        display: block;
+    }
+
+    .schedule-list__airdate {
+        margin-block-end: 0.5rem;
+
+        .airdate-formatter__time-wrap {
+            br {
+                display: none;
+            }   
+        }
+    }
+
+    .schedule-content-constrainer {
+        padding-top: 0.01rem;
+    }
+}
+// 1144px 
+@media screen and (max-width: 71.5rem) {
+    .schedule-list__item {
+        grid-template-columns: 15% 1fr;
+    }
+
+    .date-navigation__weekday {
+        font-size: 1.4rem;
+    }
+
+    .date-navigation__date {
+        font-size: 1rem;
+    }
+    
+}
+// 960px
+@media screen and (max-width: 60rem) {
+    sticky-content-wrapper[data-pinned-state=pinned] {
+        padding-top: 4rem;
+    }
+}
+// 800px
+@media screen and (max-width: 50rem) {
+    .schedule-list__item { 
+        image-card {
+            flex-direction: column;
+            gap: 1.5rem;
+        }      
+
+        .image-card__content {
+            align-self: flex-start;
+        }
+    }
+}
+// 600px
+@media screen and (max-width: 46.875rem) {
+    .date-navigation__control {
+        scale: 0.7;
+        translate: 0 0.5rem;
+    }
+}
+// 500px 
+@media screen and (max-width: 31.15rem) {
+    .date-navigation__weekday {
+        font-size: 1rem;
+    }
+
+    .date-navigation__date {
+        font-size: 0.8rem;
+    }
+}