@scrippsproduct/entertainment-sites-css 0.0.1

package/src/show-details.scss

@@ -0,0 +1,578 @@
+show-details-page {
+    display:block;
+
+    &:has(loading-wrapper) {
+        min-height: 100vh;
+    }
+}
+
+tabbed-content {
+    display: block;
+    padding-top: 1.8rem;
+    --tabbed-content-border-color: #ddd;
+
+    .social-share__icon {
+        display: block;
+        width: 1.5rem;
+        height: 1.5rem;
+
+        > svg {
+            stroke: transparent;
+            fill: var(--share-btn-color);
+            transition: stroke 0.325s ease-out, fill 0.325s ease-out;
+        }
+    }
+
+    .social-share__button {
+        display: inline-grid;
+        width: 2.5rem;
+        height: 2.5rem;
+        padding: 0;
+        margin-inline-end: 1rem;
+        align-items: center;
+        justify-content: center;
+        background-color: transparent;
+        border: 1px solid var(--share-btn-color);
+        cursor: pointer;transition: background-color 0.325s ease-out, border-color 0.325s ease-out;
+
+        &:first-of-type .social-share__icon {
+            padding: 0 0.6rem 0 0.5rem;
+        }
+
+        &:hover {
+            background-color: var(--share-btn-color);
+            color: #fff;
+
+            svg {
+                stroke: transparent;
+                fill: #fff;
+            }
+        }
+    }
+}
+
+tab-content {
+    margin-top: 3.4rem;
+    display: block;
+
+    .basic-grid-module__header.h4 {
+        color: var(--mono-color-400);
+        font-size: 2rem;
+        font-weight: 500;
+        text-align: left;
+        text-transform: none;
+        margin-block-end: 1rem;
+    }
+
+    basic-grid-module {
+        margin-top: 0;
+        padding-top: 0;
+    }
+
+    .info-panel__back-btn {
+        color: var(--tabbed-content-border-color);
+        font-size: 1.4rem;
+        font-weight: 600;
+    }
+
+    .info-panel__back-btn:last-of-type {
+        display: none;
+    }
+
+    sectioned-content {
+        .h2 {
+            margin-top: 0;
+            margin-bottom: 0.5rem;
+            font-size: 2rem;
+            font-weight: 500;
+        }
+
+        .h3 {
+            margin-bottom: 0;
+            font-size: 1.5rem;
+
+            &:first-of-type {
+                margin-top: 2rem;
+            }
+
+            + p {
+                margin-top: 0.5rem;
+            }
+        }
+
+        div {
+            font-size: 1.125rem;
+            margin-bottom: 1.5rem; 
+        }
+
+        p {
+            font-size: 1.125rem;
+            line-height: 1.7;
+        }
+
+        a:not(class) {
+            color: var(--theme-color-500);
+            text-decoration: none;
+            position: relative;
+        
+            &:before {
+                content: '';
+                height: 0;
+                width: 100%;
+                position: absolute;
+                bottom: -0.02em;
+                border-top: 1px solid var(--theme-color-200);
+                transform: translateY(0.25rem);
+                opacity: 0;
+                transition: transform 0.225s ease-out, opacity 0.225s ease-out;
+            }
+        
+            &:hover:before {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+        
+    }
+
+    .cast-details-panel {
+        image-card {
+            padding-bottom: 3rem;
+        }
+    }
+
+    &.cast-list-tab,
+    &.episodes-guide-tab {
+        .image-card__content {
+            .h4 {
+                margin-bottom: 0;
+                font-size: 1.5rem;
+            }
+
+            div {
+                margin: 0;
+                font-size: 1.125rem;
+                font-weight: 300;
+            }
+        }
+
+        .image-card__img-wrapper {
+            > img {
+                object-position: top;
+            } 
+        }
+
+        .image-card__cta {
+            font-size: 1.125rem;
+            color: var(--cta-button-color);
+            padding-left: 0;
+            padding-inline-start: 0;
+        }
+    }
+
+    &.episodes-guide-tab {
+        .image-card__content {
+            font-size: 1.125rem;
+
+            > p {
+                margin-block-start: 0.5rem;
+            }
+        }
+    }
+}
+
+.show-about-tab adjustable-two-column-layout {
+    --atcl-gap-size: 3.2rem !important;
+    font-size: 1.125rem;
+
+    .image-card__content {
+        padding-block: 1rem;
+
+        .string-list {
+            padding-block-start: 0.5rem;
+        }
+    }
+}
+
+.cast-details-panel {
+    adjustable-two-column-layout {
+        padding-bottom: 3rem;
+        --atcl-gap-size: 2.5rem !important;
+    }
+
+    sectioned-content {
+        font-size: 1.125rem;
+        line-height: 1.6;
+
+        .h3 {
+            margin-bottom: 0.5rem;
+        }
+    }
+
+    .cast__follow-platform {
+        margin-right: 1rem;
+    }
+}
+
+tab-navigation {
+    padding-bottom: 2rem;
+    border-bottom: 1px solid var(--tabbed-content-border-color);
+
+    > div {
+        margin-left: auto;
+        margin-top: 0;
+    }
+
+    .btn,
+    .gradient-btn {
+        padding: 0.5em clamp(0.65em, 1.9vw + 0.1em, 2em);
+        font-size: clamp(0.75rem, 2.7vw + 0.1rem, 1.125rem);
+    }
+}
+
+.image-card__play-icon {
+    scale: 1.2;
+
+    &:hover {
+        scale: 1.35;
+    }
+}
+
+.show-hero__show-title.h1 {
+    font-size: clamp(1.1rem, 2.5vw + 1rem, 3.8rem);
+    text-transform: uppercase;
+    line-height: 1.2;
+    margin-bottom: 1.25rem
+}
+
+.show-hero__logo-wrapper { margin-block-end: 1rem; }
+
+.page-hero .show-hero__content {
+    font-size: 1.5em;
+    font-size: clamp(1.2rem, 1vw + 0.1rem, 1.5em);
+    padding-left: 1rem;
+    padding-bottom: 0;
+    bottom: clamp(2rem, 3.1vw + 0.1rem, 3.6rem);
+}
+
+.page-hero .show-hero__content--right {
+    padding-right: 1rem;
+    padding-left: 0;
+}
+
+.show-hero__airdate {
+    font-size: 1em;
+    font-size: clamp(1.1em, 1.2vw + 0.1em, 1.4em);
+    text-transform: uppercase;
+    font-weight: 500;
+    text-shadow: 0px 1px 2px rgba(0,0,0, 0.8);
+    margin-top: -0.75em;
+
+    .airdate-formatter__pipe,
+    .string-list__pipe {
+        vertical-align: bottom;
+        font-size: 1.5em;
+        font-weight: 100;
+    }
+
+    .airdate-formatter__time,
+    .airdate-formatter__central-time {
+        font-size: 1em;
+        text-transform: none;
+    }
+}
+
+.page-hero .show-hero__logo-wrapper {
+    > img {
+        max-width: clamp(12rem, 30vw + 1rem, 30rem);
+        max-height: clamp(4rem, 4.6vw + 1rem, 6rem);
+        filter: grayscale(1) brightness(0) invert(1) drop-shadow(0px 2px 2px rgba(0,0,0, 0.8));
+        margin-bottom: 3rem;
+    }
+}
+
+.page-hero:has(airdate-formatter) .show-hero__logo-wrapper {
+    > img {
+        margin-bottom: 1.6rem;
+    }
+}
+
+basic-grid-module {
+    display: block;
+    padding-bottom: 3rem;
+}
+
+.upcoming-tab { 
+    min-height: 20rem;
+
+    .h2 {
+        margin-block-end: 1rem;
+        font-size: 2rem;
+        font-weight: 500;
+    }
+
+    ul { 
+        margin: 0; 
+        padding: 0 0 3rem;
+        animation-name: enter;
+        animation-duration: 0.625s;
+        animation-delay: 0.05s;
+        animation-fill-mode: both;
+        animation-timing-function: cubic-bezier(0.210, 0.815, 0.625, 1.015);
+        
+        li {
+            padding: 2rem 0;
+            border-color: #d4d4d4;
+
+            &:first-child {
+                padding-top: 1.5rem;
+            }
+        }
+    }
+
+    .upcoming-list__item {
+        image-card {
+            align-items: flex-start;
+        }
+        
+        .image-card__content > div:nth-of-type(2) {
+            max-inline-size: 80ch;
+        }
+    }
+
+    .upcoming-list__airdate {
+        padding: 0;
+        color: #444;
+        align-items: flex-start;
+    }
+
+    .airdate-formatter__day {
+        font-size: 1.125rem;
+    }
+
+    .airdate-formatter__date {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: var(--mono-color-400);
+    }
+
+    .airdate-formatter__time-wrap {
+        font-size: 1.125rem;
+        font-weight: 500;
+        color: var(--theme-color-300);
+    }
+
+    .upcoming-list__airdate-bg {
+        padding: 0 2.5rem;
+    }
+
+    .image-card__content {
+        color: #444;
+
+        > div {
+            font-size: 1.125rem;
+        }
+
+        > div:first-child {
+            font-size: 1.5rem;
+            color: var(--mono-color-400);
+        }
+    }
+}
+// 1144px
+@media screen and (max-width: 71.5rem) {
+    .page-hero .show-hero__content {
+        bottom: 2rem;
+        left: 2rem;
+    }
+
+    .page-hero .show-hero__content--right {
+        left: auto;
+        right: 2rem;
+    }
+}
+// 880px 
+@media screen and (max-width: 55rem) {
+    .upcoming-tab {
+        .upcoming-list__item {
+            flex-direction: column;
+        }
+
+        .upcoming-list__airdate {
+            display: block;
+        }
+
+        .upcoming-list__airdate-bg {
+            height: auto;
+            padding: 1rem;
+
+            airdate-formatter {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
+        }
+
+        image-card {
+            flex-direction: column;
+        }
+
+        .image-card__content {
+            align-self: flex-start;
+        }
+
+        .airdate-formatter__day,
+        .airdate-formatter__time-wrap {
+            font-size: 1.5rem;
+        }
+
+        .airdate-formatter__time-wrap {
+            font-weight: 600;
+        }
+
+        .airdate-formatter__central-time,
+        .airdate-formatter__meridian {
+            font-size: 0.8em;
+        }
+
+        .airdate-formatter__date {
+            margin-bottom: 0;
+            margin-block-end: 0;
+        }
+
+        .upcoming-list__item {
+            image-card {
+                align-items: stretch;
+            }
+        }
+    }
+}
+// 800px
+@media screen and (max-width:50rem ) {
+    .series-about-tab {
+        display: block;
+    }
+
+    .cast-details-panel {
+        adjustable-two-column-layout {
+            display: block;
+        }
+    }
+
+    .series-about-tab {
+        font-size: 1.125rem;
+    }
+
+    tab-content .info-panel__back-btn:last-of-type {
+        display: inline-flex;
+    }
+}
+// 700px
+@media screen and (max-width: 43.75rem) {
+    .page-hero .show-hero__content {
+        bottom: 3rem;
+        left: 2rem;
+    }
+
+    .page-hero .show-hero__content--right {
+        left: auto;
+    }
+
+    tab-navigation {
+        flex-wrap: wrap;
+        
+        > div {
+            margin-left: 0;
+            margin-top: 1rem;
+        }
+    }
+}
+// 640px
+@media screen and (max-width: 40rem) {
+    .show-hero-constrainer {
+        aspect-ratio: 388/594;
+    }
+
+    .page-hero {
+        text-align: center;
+        
+        .show-hero__content {
+            left: 0;
+            right: 0;
+            justify-self: center;
+            padding-left: 1rem;
+            padding-right: 1rem;
+        }
+
+        .show-hero__content--right .show-hero__airdate {
+            text-align: center;
+        }
+    }
+
+    .page-hero > div > img {
+        aspect-ratio: 388/594;
+    }
+
+    .show-hero__show-title.h1 {
+        font-size: clamp(1.1rem, 5vw + 1rem, 3.8rem);
+    }
+
+    .show-hero__airdate .string-list__pipe {
+        display: none;
+    }
+
+    airdate-formatter {
+        display: block;
+    }
+
+    .page-hero .show-hero__logo-wrapper {
+        > img {
+            margin-left: auto;
+            margin-right: auto;
+            max-width: clamp(20rem, 30vw + 1rem, 30rem);
+            max-height: 6rem;
+        }
+    }
+}
+// 600px
+@media screen and (max-width: 37.5rem) {
+    .tab-navigation__list {
+        flex-wrap: wrap;
+    }
+
+    .episodes-guide-tab equal-size-grid > div {
+        border-bottom: 1px solid #d4d4d4;
+        padding-bottom: 0.5rem;
+        padding-block-end: 0.5rem;
+        padding-top: 0.5rem;
+        padding-block-start: 0.5rem;
+    }
+
+    .cast__follow-platform {
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+}
+// 400px
+@media screen and (max-width: 28.75rem) {
+    .page-hero .show-hero__logo-wrapper {
+        > img {
+            max-width: clamp(12rem, 48vw + 1rem, 18rem);
+            max-height: 6rem;
+        }
+    }
+}
+
+@keyframes enter {
+    0% {        
+        opacity: 0.1;
+        transform: translate3d(0, 10rem, 0);
+    }
+    50% {
+        opacity: 0.2;  
+    }
+    100% {
+        opacity: 1;
+        transform: translate3d(0,0,0)
+    }
+}

package/src/shows.scss

@@ -0,0 +1,98 @@
+basic-grid-module {
+    display: block;
+    padding-bottom: 3rem;
+}
+
+.h4.basic-grid-module__header {
+    font-size: 2.875rem;
+    font-weight: 600;
+    color: var(--mono-color-100);
+    text-transform: uppercase;
+    text-align: center;
+    margin-top: 0;
+}
+
+.programs-list {
+    .image-card__img-wrapper > img {
+        transition: scale 0.255s ease-out;
+    }
+
+    image-card:hover .image-card__img-wrapper > img {
+        scale: 0.97;
+    }
+
+    .airdate-formatter__pipe {
+        margin-inline: 0.2em;
+        font-weight: 100;
+    }
+}
+
+.programs-list .image-card__content .no-airdate {
+    font-size: 1.4rem;
+    margin-top: 1.05rem;
+    display: block;
+}
+
+.programs-list {
+    .image-card__content {
+        font-size: 1.4rem;
+        font-weight: 400;
+        color: var(--mono-color-400);
+        text-align: center;
+        padding: 0.5rem 0;
+    }
+    
+    a {
+        color: currentColor;
+        text-decoration: none;
+
+        img {
+            display: block;
+            transition: scale 0.325s ease-in-out, filter 0.325s ease-in-out;
+            transform-origin: bottom;
+        }
+
+        .image-card__img-wrapper {
+            overflow: hidden;
+        }
+
+        &:hover {
+            img {
+                scale: 1.03;
+                filter: brightness(1.15); 
+            }
+        }
+    } 
+}
+// 1440px
+@media screen and (max-width: 90rem) {
+    .programs-list .image-card__content {
+        font-size: 1.2rem;
+    }
+}
+// 1170px
+@media screen and (max-width: 73.125rem) {
+    .programs-list .image-card__content {
+        font-size: 1rem;
+        padding-top: 1rem;
+    }
+}
+// 860px
+@media screen and (max-width: 53.75rem) {
+    .programs-list .image-card__content {
+        font-size: 1.3rem;
+    }
+}
+// 600px 
+@media screen and (max-width: 37.5rem) {
+    .programs-list image-card {
+        padding: 0 5rem;
+    }
+}
+// 500px
+@media screen and (max-width: 31.25rem) {
+    .programs-list image-card {
+        padding: 0 3rem;
+    }
+    
+}