@scrippsproduct/entertainment-sites-css 0.0.1

package/src/home.scss

@@ -0,0 +1,760 @@
+#carousel-homepage-banner {
+    > ol {
+        box-shadow: 10px 10px 26px rgba(0, 0, 0, 0.3), -2px -2px 10px rgba(0,0,0, 0.2);
+    }
+
+    .slide {
+        align-items: stretch;
+        display: block; // because display:flex causes extra space inside the element in Firefox & Safari
+
+        & > * {
+            place-items: unset;
+            // padding: 2.5rem;
+        }
+    } 
+
+    image-card {
+        height: unset;
+        padding-bottom: 0;
+        
+        a {
+            text-decoration: none;
+        }
+    }
+
+    .image-card__overlay-content {
+        text-transform: uppercase;
+        font-size: 1.5em;
+        font-weight: 600;
+        padding: 0 5rem 5rem;
+        line-height: 1.25;
+
+        > h1 {
+            font-size: clamp(1em, 3vw + 1em, 3em);
+            font-weight: 600;
+            margin-bottom: 0; 
+        }
+
+        .airdate-formatter__pipe {
+            vertical-align: bottom;
+            font-size: 1.5em;
+            font-weight: 300;
+        }
+
+        .airdate-formatter__time {
+            font-size: 1.125em;
+            text-transform: none;
+        }
+
+        .airdate-formatter__central-time {
+            text-transform: none;
+        }
+    }
+
+    .carousel-controls__previous,
+    .carousel-controls__next {
+        color: #fff;
+        top: calc(50% - 0.5rem);
+    }
+
+    .carousel-nav {
+        padding: 1rem 0 0;
+
+        > ol {
+            gap: 1.5rem; 
+        }
+    }
+
+    .carousel-nav__item {
+        border: 2px solid #fff;
+        transition: scale 0.325s ease-out;
+        flex-basis: 0.8rem;
+        min-width: 0.8rem;
+        max-width: 0.8rem;
+        height: 0.8rem;
+    }
+
+    .carousel-nav__item[data-current=true] {
+        background-color: #fff;
+        scale: 1.3;
+    }
+
+    .slide[inert] {
+        opacity: 1;
+    }
+
+    .show-slide__logo-wrapper {            
+        > img {
+            max-width: clamp(18rem, 30vw + 1rem, 30rem);
+            max-height: clamp(3.2rem, 4.6vw + 1rem, 8rem);
+        }
+    }
+
+    img {
+        transition: all 0.325s ease-in-out; 
+        transform-origin: bottom;      
+    }
+
+    .image-card__img-wrapper {
+        overflow: hidden;
+    }
+
+    .show-slide:hover,
+    .image-card-slide:hover { 
+        a picture > img {
+            transform: scale(1.02);  
+            filter: brightness(1.15) contrast(1.15);
+        }
+    }
+}
+
+.brand-promotion-carousel { 
+    overflow: hidden; 
+    background-color: rgba(235, 100, 10, 0.1); 
+    background-image: linear-gradient(to bottom, rgb(255 126 0), transparent); 
+}
+
+#carousel-brand-promotion {
+    .carousel-controls__previous,
+    .carousel-controls__next {
+        color: #fff;
+    }
+}
+
+.carousel-controls__previous,
+.carousel-controls__next {
+    background-color: transparent;
+    color: var(--theme-color-400);
+}
+
+.on-now-section {
+    --_padding-inline-start: 33%;
+    > content-constrainer {
+        gap: 4rem;
+        display: grid;
+        align-items: center;
+        grid-template-columns: 1fr 1fr;
+        padding-block: 5rem;
+    }
+    
+    .program-airdate {
+        padding-inline-start: var(--_padding-inline-start);
+        font-size: 1.5rem;
+        color: var(--mono-color-400);
+        align-self: flex-start;
+
+        strong {
+            font-weight: 600;
+        }
+
+        > div:first-of-type {
+            font-weight: 700;
+        }
+    }
+
+    .cta-block__cta {
+        transition: scale 0.325s ease-out;
+        
+        &:hover {
+            scale: 1.05;
+        }
+    }
+
+    loading-wrapper {
+        grid-column: -1/1;
+    }
+
+    loading-wrapper,
+    error-handler {
+        min-height: 24rem;
+    }
+
+    .string-list__pipe {
+        vertical-align: baseline;
+    }
+
+    @media screen and (max-width: 2250px) {
+        --_padding-inline-start: 25%;
+    }
+
+    @media screen and (max-width: 1360px) {
+        --_padding-inline-start: 10%;
+    }
+
+    @media screen and (max-width: 1240px) {
+        --_padding-inline-start: 0;
+    }
+}
+
+.on-now__series-img {
+    aspect-ratio: 1548/864;
+    object-fit: cover;
+    object-position: center;
+    // needs to be removed for Safari
+    // not needed unless we go back to the croped image layout with
+    // equal padding on the top and bottom
+    //height: 100%;
+}
+
+.program-on-now__image-wrapper {
+    display: grid;
+    justify-self: flex-end;
+    align-self: start;
+    padding-inline-end: var(--_padding-inline-start);
+}
+
+// .program-airdate__image-wrapper {
+//     display: grid;
+//     place-items: center;
+// }
+
+.program-airdate__logo[data-style="gradient"] {
+    margin: 1rem 0 2rem;
+    mask-size: contain;
+    mask-position: left center;
+    max-width: 23rem;
+}
+
+.program-airdate__logo[class*="missing-logo"] {
+    aspect-ratio: unset;
+    max-width: unset;
+    font-size: 2.4rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    line-height: 1.2;
+    letter-spacing: 0.6px;
+}
+
+.promotions-row {
+    equal-size-flex-row {
+        gap: 2.75rem;
+        padding-block-end: 1.5rem;
+    }
+}
+
+.promotions-row__header { font-weight: 700; }
+
+.promotion-section {
+    .image-card__content {
+        .h4 {
+            font-size: 1.5rem;
+            margin-block-end: 0.5rem;
+
+            ~ div {
+                font-size: 1.125rem;
+                margin: 0;
+            }
+        }
+    }
+
+    .image-card__cta {
+        font-size: 1.125rem;
+        font-weight: 400;
+        color: var(--theme-color-300);
+    }
+
+    equal-size-flex-row[data-item-count="2"] {
+        .image-card__play-icon {
+            border-style: solid;
+            scale: 1.2;
+
+            &:hover {
+                scale: 1.35;
+            }
+        }
+    }
+}
+
+#carousel-brand-promotion {
+    column-two {
+        width: 100%;
+        height: 77%;
+    }
+
+    cta-block {
+        > div {
+            color: var(--mono-color-100);
+            font-size: 1.5rem;
+            width: 80%;
+            text-shadow: 1px 1px 3px rgba(0,0,0, 0.2);
+            line-height: 1.3;
+        }
+
+        > .h2 {
+            filter: drop-shadow(1px 1px 3px rgba(0,0,0, 0.2));
+            width: min(66%, 435px);
+            margin-block-end: 2.4rem;
+        }
+
+        cta-wrapper {
+            margin-block-start: 2.4rem; 
+        }
+    }
+
+    li[data-index="1"] cta-block {
+        .h2 {
+            transform: translate(-1rem, 0.5rem);
+        }
+    }
+
+    .image-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+    
+    .image-container img {
+        object-fit: cover;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        object-position: var(--image-position);
+    }
+
+    .cta-block__cta {
+        font-size: 1.2rem;
+    }
+
+    .carousel-nav {
+        padding: 1rem 0 0;
+
+        > ol {
+            gap: 1.5rem;
+            width: calc(100% + 4.8rem);
+            transform: translateX(-2.4rem); 
+        }
+    }
+
+    .carousel-nav__item {
+        border: 2px solid #fff;
+        transition: scale 0.325s ease-out;
+        flex-basis: 0.8rem;
+        min-width: 0.8rem;
+        max-width: 0.8rem;
+        height: 0.8rem;
+    }
+
+    .carousel-nav__item[data-current=true] {
+        background-color: #fff;
+        scale: 1.3;
+    }
+}
+
+#carousel-featured-shows {
+    color: currentColor;
+    text-decoration: none;
+
+    image-card { width: 100%; }
+
+    .image-card__content {
+        text-align: center;
+        font-size: 1.4rem;
+        font-weight: 400;
+
+        > div {
+            margin-top: 0;
+            padding-top: 1.2rem;
+        }
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    .image-card-slide {
+        a {
+            cursor: pointer;
+        }
+    }
+
+    img {
+        transition: all 0.325s ease-in-out; 
+        transform-origin: bottom;      
+    }
+
+    .image-card__img-wrapper {
+        overflow: hidden;
+    }
+
+    .image-card-slide:hover { 
+        a img {
+            transform: scale(1.02);  
+            filter: contrast(1.15) brightness(1.15); 
+        }
+    }
+
+    image-card a {
+        color: currentColor;
+        text-decoration: none;
+    }
+
+    .carousel-controls__previous {
+        inset-inline-start: calc(var(--_control-btns-offset-x) - var(--_slide-gap));
+    }
+
+    .slide {
+        align-items: flex-start;
+        
+        &:only-child {
+            .image-card-slide {
+                flex-basis: var(--_slide-cell-size);
+            }
+        }
+    }
+}
+
+.brand-promotion-section {
+    .ion-plus-promo {
+        cta-block > .h2 {
+            width: min(100%, 320px);
+            transform: translate(-0.9rem, 1rem);
+        }
+    }
+    .image-card__overlay-content {
+        padding-bottom: 0 1rem 2.5rem;
+        font-size: 1.2rem;
+    }
+}
+
+.brand-promotion__list {
+    list-style: none;
+    padding: 3rem 0 0;
+    margin: 0 auto;
+    max-width: 37.5rem;
+}
+
+.brand-promotion__item {
+    color: var(--mono-color-100);
+    font-size: 1.5rem;
+    text-shadow: 1px 1px 3px rgba(0,0,0, 0.4);
+    margin-bottom: 6rem;
+    margin-block-end: 6rem;
+    text-wrap: balance;
+
+    .image-container img {
+        width: 100%
+    }
+
+    cta-block {
+        padding-left: 1rem;
+
+        .h2 {
+            filter: drop-shadow(1px 1px 3px rgba(0,0,0, 0.4));
+            width: min(66%, 250px);
+        }
+        
+        a {
+            font-size: 1.2rem;
+        }
+    }
+}
+
+// 1440px
+@media screen and (max-width: 90rem) {
+    .brand-promotion-section {
+        image-card {
+            img {
+                aspect-ratio: 1/0.75;
+            }
+        }
+    }
+}
+// 1280px
+@media screen and (max-width: 80rem) {
+    #carousel-homepage-banner {
+        --_control-btns-offset-x: 1rem !important;
+    }
+    #carousel-featured-shows {
+        --_control-btns-offset-x: -0.75rem !important;
+
+        .carousel-controls__previous,
+        .carousel-controls__next {
+            filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
+        }
+    }
+    #carousel-brand-promotion {
+        --_control-btns-offset-x: -2rem !important;
+
+        .carousel-controls__previous,
+        .carousel-controls__next {
+            filter: unset;
+        }
+    }
+}
+// 1170px
+@media screen and (max-width: 73.125rem) {
+    #carousel-featured-shows,
+    .programs-list a {
+
+        .image-card__content {
+            font-size: 1.125rem;
+        }
+    }
+
+    #carousel-homepage-banner {
+        .image-card__overlay-content { 
+            font-size: 1.125rem;
+            padding: 0 1rem 2rem;
+        }
+    }
+}
+// 1100px
+@media screen and (max-width: 68.75rem) {
+    .brand-promotion-section {
+        equal-size-flex-row {
+            display: block;
+        }
+
+        image-card {
+            img {
+                aspect-ratio: unset;
+            }
+        }
+    }
+
+    .promotion-section { 
+        .image-card__content { 
+            .h4 {
+                font-size: 1.125rem;
+
+                ~ div {
+                    font-size: 1rem;
+                }
+            }
+        }
+
+        .image-card__cta {
+            font-size: 1rem;
+        }
+    }
+
+    #carousel-brand-promotion {
+        cta-block {
+            > div {
+                font-size: 1.25em;
+            }
+        }
+    }
+}
+// 1024px
+@media screen and (max-width: 64rem) {  
+    #carousel-brand-promotion {
+        --_cell-aspect-ratio: 1/1.1 !important;
+        --_slide-aspect-ratio: 1/1.1 !important;
+
+        cta-block {
+            padding-left: 1.5rem;
+
+            > div {
+                font-size: 1.5em;
+            }
+            
+            > .h2 {
+                width: min(100%, 365px);
+                margin-block-start: -1.5rem;
+            }
+        }
+
+        .two-column-slide {
+            display: flex;
+            flex-direction: column-reverse;
+            justify-content: flex-start;
+            align-items: flex-start;
+        }
+
+        column-two {
+            height: 50%;
+        }
+    }
+
+    #carousel-homepage-banner {
+        --_slide-gap: 0 !important;
+        
+        > ol {
+            box-shadow: none;
+        }
+    
+        .slide {
+            align-items: center;
+            padding: 0.75rem;
+        }
+
+        image-card {
+            position: relative;
+
+            &:before {
+                content: '';
+                position: absolute;
+                z-index: -1;
+                width: 100%;
+                inset: 0;
+                box-shadow: 2px 2px 20px rgba(0,0,0,0.25);
+            }
+        }
+    }
+
+    .banner-carousel-constrainer {
+        width: 100%;
+    }
+}
+// 960px
+@media screen and (max-width: 60rem) {
+    .on-now-section > content-constrainer {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+
+    .program-on-now__image-wrapper {
+        grid-row: 1/2;
+        display: block;
+        aspect-ratio: 169/105;
+        padding-inline-end: 0;
+        justify-self: normal;
+
+        > img {
+            width: 100%;
+            object-position: center;
+        }
+    }
+
+    .on-now-section .program-airdate {
+        padding: 0;
+    }
+
+    content-constrainer .h2 { margin-block-start: 0; } 
+}
+// 800px
+@media screen and (max-width: 50rem) {
+    #carousel-homepage-banner {
+        .image-card__overlay-content { 
+            padding: 0 1rem 2rem;
+            font-size: 1.125rem;
+
+            > h1 {
+                font-size: 2rem; 
+            }
+        }
+    }
+
+    .brand-promotion__item:last-child {
+        margin-block-end: 2rem;
+    }
+}
+// 700px
+@media screen and (max-width: 43.75rem) {
+    #carousel-homepage-banner {
+        --_slide-aspect-ratio: 388/594 !important;
+        --_cell-aspect-ratio: 388/594 !important;
+
+        image-card {
+            --image-aspect-ratio: 388/594 !important;
+        }
+
+        .image-card__overlay-content { 
+            width: 100%;
+            padding: 0 0 2.2rem;
+            font-size: 1.125rem;
+            text-align: center;
+
+            > h1 {
+                font-size: 2.5rem; 
+            }
+        }
+
+        .show-slide__logo-wrapper {    
+
+            > img {
+               margin-left: auto;
+               margin-right: auto;
+            }
+        }
+
+    }
+}
+// 600px 
+@media screen and (max-width: 37.5rem) {
+    .featured-shows-section content-constrainer {
+        width: calc(100% - (3.8rem / 2));
+        padding-left: calc(3.8rem / 2);
+    }
+
+    #carousel-featured-shows {
+        --_carousel-gutters: 0 25% !important;
+    }
+
+    .promotions-row equal-size-flex-row {
+        gap: 3.5rem;
+    }
+}
+// 580px
+@media screen and (max-width: 36.25rem) {
+    #carousel-homepage-banner {
+        .image-card__overlay-content { 
+
+            > h1 {
+                font-size: 2.07rem;
+            }
+
+            .airdate-formatter__time {
+                font-size: 1.61em;
+            }
+
+            airdate-formatter {
+                font-size: 1.035rem;
+                padding: 0 0.5rem;
+                margin-block-start: 0.5rem;
+            }
+        }
+    }
+}
+// 480px 
+@media screen and (max-width: 30rem) {
+    #carousel-homepage-banner .show-slide__logo-wrapper {            
+        > img {
+            max-width: clamp(13rem, 30vw + 1rem, 30rem);
+            max-height: clamp(3.5rem, 4.6vw + 1rem, 6rem);
+        }
+    }
+
+    .on-now-section .program-airdate > div:first-of-type {
+        font-size: 1.15em;
+    }
+}
+// 400px
+@media screen and (max-width: 25rem) {
+    .featured-shows-section content-constrainer {
+        width: calc(100% - (1.5rem / 2));
+        padding-left: calc(1.5rem / 2);
+    }
+
+    #carousel-homepage-banner .show-slide__logo-wrapper > img {
+        margin-bottom: 1.25rem;
+    } 
+
+    #carousel-homepage-banner .image-card__overlay-content {
+        padding-bottom: 1.5rem;
+
+        airdate-formatter {
+            .airdate-formatter__date,
+            .airdate-formatter__time-wrap {
+                display: block;
+            }
+
+            .airdate-formatter__pipe { display: none; }
+        }
+    }
+
+    .on-now-section .program-airdate > div:first-of-type {
+        font-size: 1em;
+        margin-block-end: 1rem;
+    }
+}
+// 320px
+@media screen and (max-width: 20rem) {
+    #carousel-homepage-banner .show-slide__logo-wrapper > img {
+        max-width: 11rem;
+    } 
+}