@scrippsproduct/entertainment-sites-css 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- show-details-page{display:block}show-details-page:has(loading-wrapper){min-height:100vh}tabbed-content{display:block;padding-top:1.8rem;--tabbed-content-border-color:#ddd}tabbed-content .social-share__icon{display:block;width:1.5rem;height:1.5rem}tabbed-content .social-share__icon>svg{stroke:transparent;fill:var(--share-btn-color);transition:stroke 325ms ease-out,fill 325ms ease-out}tabbed-content .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 325ms ease-out,border-color 325ms ease-out}tabbed-content .social-share__button:first-of-type .social-share__icon{padding:0 .6rem 0 .5rem}tabbed-content .social-share__button:hover{background-color:var(--share-btn-color);color:#fff}tabbed-content .social-share__button:hover svg{stroke:transparent;fill:#fff}tab-content{margin-top:3.4rem;display:block}tab-content .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}tab-content basic-grid-module{margin-top:0;padding-top:0}tab-content .info-panel__back-btn{color:var(--tabbed-content-border-color);font-size:1.4rem;font-weight:600}tab-content .info-panel__back-btn:last-of-type{display:none}tab-content sectioned-content .h2{margin-top:0;margin-bottom:.5rem;font-size:2rem;font-weight:500}tab-content sectioned-content .h3{margin-bottom:0;font-size:1.5rem}tab-content sectioned-content .h3:first-of-type{margin-top:2rem}tab-content sectioned-content .h3+p{margin-top:.5rem}tab-content sectioned-content div{font-size:1.125rem;margin-bottom:1.5rem}tab-content sectioned-content p{font-size:1.125rem;line-height:1.7}tab-content sectioned-content a:not(class){color:var(--theme-color-500);text-decoration:none;position:relative}tab-content sectioned-content a:not(class):before{content:"";height:0;width:100%;position:absolute;bottom:-.02em;border-top:1px solid var(--theme-color-200);transform:translateY(.25rem);opacity:0;transition:transform 225ms ease-out,opacity 225ms ease-out}tab-content sectioned-content a:not(class):hover:before{transform:translateY(0);opacity:1}tab-content .cast-details-panel image-card{padding-bottom:3rem}tab-content.cast-list-tab .image-card__content .h4,tab-content.episodes-guide-tab .image-card__content .h4{margin-bottom:0;font-size:1.5rem}tab-content.cast-list-tab .image-card__content div,tab-content.episodes-guide-tab .image-card__content div{margin:0;font-size:1.125rem;font-weight:300}tab-content.cast-list-tab .image-card__img-wrapper>img,tab-content.episodes-guide-tab .image-card__img-wrapper>img{-o-object-position:top;object-position:top}tab-content.cast-list-tab .image-card__cta,tab-content.episodes-guide-tab .image-card__cta{font-size:1.125rem;color:var(--cta-button-color);padding-left:0;padding-inline-start:0}tab-content.episodes-guide-tab .image-card__content{font-size:1.125rem}tab-content.episodes-guide-tab .image-card__content>p{margin-block-start:0.5rem}.show-about-tab adjustable-two-column-layout{--atcl-gap-size:3.2rem!important;font-size:1.125rem}.show-about-tab adjustable-two-column-layout .image-card__content{padding-block:1rem}.show-about-tab adjustable-two-column-layout .image-card__content .string-list{padding-block-start:0.5rem}.cast-details-panel adjustable-two-column-layout{padding-bottom:3rem;--atcl-gap-size:2.5rem!important}.cast-details-panel sectioned-content{font-size:1.125rem;line-height:1.6}.cast-details-panel sectioned-content .h3{margin-bottom:.5rem}.cast-details-panel .cast__follow-platform{margin-right:1rem}tab-navigation{padding-bottom:2rem;border-bottom:1px solid var(--tabbed-content-border-color)}tab-navigation>div{margin-left:auto;margin-top:0}tab-navigation .btn,tab-navigation .gradient-btn{padding:.5em clamp(.65em,1.9vw + .1em,2em);font-size:clamp(.75rem, 2.7vw + .1rem, 1.125rem)}.image-card__play-icon{scale:1.2}.image-card__play-icon: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 + .1rem, 1.5em);padding-left:1rem;padding-bottom:0;bottom:clamp(2rem,3.1vw + .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 + .1em, 1.4em);text-transform:uppercase;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.8);margin-top:-.75em}.show-hero__airdate .airdate-formatter__pipe,.show-hero__airdate .string-list__pipe{vertical-align:bottom;font-size:1.5em;font-weight:100}.show-hero__airdate .airdate-formatter__central-time,.show-hero__airdate .airdate-formatter__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, .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}.upcoming-tab .h2{margin-block-end:1rem;font-size:2rem;font-weight:500}.upcoming-tab ul{margin:0;padding:0 0 3rem;animation-name:enter;animation-duration:625ms;animation-delay:50ms;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.21,0.815,0.625,1.015)}.upcoming-tab ul li{padding:2rem 0;border-color:#d4d4d4}.upcoming-tab ul li:first-child{padding-top:1.5rem}.upcoming-tab .upcoming-list__item image-card{align-items:flex-start}.upcoming-tab .upcoming-list__item .image-card__content>div:nth-of-type(2){max-inline-size:80ch}.upcoming-tab .upcoming-list__airdate{padding:0;color:#444;align-items:flex-start}.upcoming-tab .airdate-formatter__day{font-size:1.125rem}.upcoming-tab .airdate-formatter__date{font-size:1.5rem;font-weight:600;color:var(--mono-color-400)}.upcoming-tab .airdate-formatter__time-wrap{font-size:1.125rem;font-weight:500;color:var(--theme-color-300)}.upcoming-tab .upcoming-list__airdate-bg{padding:0 2.5rem}.upcoming-tab .image-card__content{color:#444}.upcoming-tab .image-card__content>div{font-size:1.125rem}.upcoming-tab .image-card__content>div:first-child{font-size:1.5rem;color:var(--mono-color-400)}@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}}@media screen and (max-width:55rem){.upcoming-tab .upcoming-list__item{flex-direction:column}.upcoming-tab .upcoming-list__airdate{display:block}.upcoming-tab .upcoming-list__airdate-bg{height:auto;padding:1rem}.upcoming-tab .upcoming-list__airdate-bg airdate-formatter{display:flex;align-items:center;gap:.5rem}.upcoming-tab image-card{flex-direction:column}.upcoming-tab .image-card__content{align-self:flex-start}.upcoming-tab .airdate-formatter__day,.upcoming-tab .airdate-formatter__time-wrap{font-size:1.5rem}.upcoming-tab .airdate-formatter__time-wrap{font-weight:600}.upcoming-tab .airdate-formatter__central-time,.upcoming-tab .airdate-formatter__meridian{font-size:.8em}.upcoming-tab .airdate-formatter__date{margin-bottom:0;margin-block-end:0}.upcoming-tab .upcoming-list__item image-card{align-items:stretch}}@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}}@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}tab-navigation>div{margin-left:0;margin-top:1rem}}@media screen and (max-width:40rem){.show-hero-constrainer{aspect-ratio:388/594}.page-hero{text-align:center}.page-hero .show-hero__content{left:0;right:0;justify-self:center;padding-left:1rem;padding-right:1rem}.page-hero .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}}@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:.5rem;padding-block-end:0.5rem;padding-top:.5rem;padding-block-start:0.5rem}.cast__follow-platform{display:block;margin-bottom:.5rem}}@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:.1;transform:translate3d(0,10rem,0)}50%{opacity:.2}100%{opacity:1;transform:translate3d(0,0,0)}}
1
+ show-details-page{display:block}show-details-page:has(loading-wrapper){min-height:100vh}tabbed-content{display:block;padding-top:1.8rem;--tabbed-content-border-color:hsl(0, 0%, 87%)}tabbed-content .social-share__icon{display:block;width:1.5rem;height:1.5rem}tabbed-content .social-share__icon>svg{stroke:transparent;fill:var(--share-btn-color);transition:stroke 325ms ease-out,fill 325ms ease-out}tabbed-content .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 325ms ease-out,border-color 325ms ease-out}tabbed-content .social-share__button:first-of-type .social-share__icon{padding:0 .6rem 0 .5rem}tabbed-content .social-share__button:hover{background-color:var(--share-btn-color);color:#fff}tabbed-content .social-share__button:hover svg{stroke:transparent;fill:#fff}tab-content{margin-top:3.4rem;display:block}tab-content .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}tab-content basic-grid-module{margin-top:0;padding-top:0}tab-content .info-panel__back-btn{color:var(--tabbed-content-border-color);font-size:1.4rem;font-weight:600}tab-content .info-panel__back-btn:last-of-type{display:none}tab-content sectioned-content .h2{margin-top:0;margin-bottom:.5rem;font-size:2rem;font-weight:500}tab-content sectioned-content .h3{margin-bottom:0;font-size:1.5rem}tab-content sectioned-content .h3:first-of-type{margin-top:2rem}tab-content sectioned-content .h3+p{margin-top:.5rem}tab-content sectioned-content div{font-size:1.125rem;margin-bottom:1.5rem}tab-content sectioned-content p{font-size:1.125rem;line-height:1.7}tab-content sectioned-content a:not(class){color:var(--theme-color-500);text-decoration:none;position:relative}tab-content sectioned-content a:not(class):before{content:"";height:0;width:100%;position:absolute;bottom:-.02em;border-top:1px solid var(--theme-color-200);transform:translateY(.25rem);opacity:0;transition:transform 225ms ease-out,opacity 225ms ease-out}tab-content sectioned-content a:not(class):hover:before{transform:translateY(0);opacity:1}tab-content .cast-details-panel image-card{padding-bottom:3rem}tab-content.cast-list-tab .image-card__content .h4,tab-content.episodes-guide-tab .image-card__content .h4{margin-bottom:0;font-size:1.5rem}tab-content.cast-list-tab .image-card__content div,tab-content.episodes-guide-tab .image-card__content div{margin:0;font-size:1.125rem;font-weight:300}tab-content.cast-list-tab .image-card__img-wrapper>img,tab-content.episodes-guide-tab .image-card__img-wrapper>img{-o-object-position:top;object-position:top}tab-content.cast-list-tab .image-card__cta,tab-content.episodes-guide-tab .image-card__cta{font-size:1.125rem;color:var(--cta-button-color);padding-left:0;padding-inline-start:0}tab-content.episodes-guide-tab .image-card__content{font-size:1.125rem}tab-content.episodes-guide-tab .image-card__content>p{margin-block-start:0.5rem}.show-about-tab adjustable-two-column-layout{--atcl-gap-size:3.2rem!important;font-size:1.125rem}.show-about-tab adjustable-two-column-layout .image-card__content{padding-block:1rem}.show-about-tab adjustable-two-column-layout .image-card__content .string-list{padding-block-start:0.5rem}.cast-details-panel adjustable-two-column-layout{padding-bottom:3rem;--atcl-gap-size:2.5rem!important}.cast-details-panel sectioned-content{font-size:1.125rem;line-height:1.6}.cast-details-panel sectioned-content .h3{margin-bottom:.5rem}.cast-details-panel .cast__follow-platform{margin-right:1rem}tab-navigation{padding-bottom:2rem;border-bottom:1px solid var(--tabbed-content-border-color)}tab-navigation>div{margin-left:auto;margin-top:0}tab-navigation .btn,tab-navigation .gradient-btn{padding:.5em clamp(.65em,1.9vw + .1em,2em);font-size:clamp(.75rem, 2.7vw + .1rem, 1.125rem)}.image-card__play-icon{scale:1.2}.image-card__play-icon: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 + .1rem, 1.5em);padding-left:1rem;padding-bottom:0;bottom:clamp(2rem,3.1vw + .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 + .1em, 1.4em);text-transform:uppercase;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.8);margin-top:-.75em}.show-hero__airdate .airdate-formatter__pipe,.show-hero__airdate .string-list__pipe{vertical-align:bottom;font-size:1.5em;font-weight:100}.show-hero__airdate .airdate-formatter__central-time,.show-hero__airdate .airdate-formatter__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, .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}.upcoming-tab .h2{margin-block-end:1rem;font-size:2rem;font-weight:500}.upcoming-tab ul{margin:0;padding:0 0 3rem;animation-name:enter;animation-duration:625ms;animation-delay:50ms;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.21,0.815,0.625,1.015)}.upcoming-tab ul li{padding:2rem 0;border-color:#d4d4d4}.upcoming-tab ul li:first-child{padding-top:1.5rem}.upcoming-tab .upcoming-list__item image-card{align-items:flex-start}.upcoming-tab .upcoming-list__item .image-card__content>div:nth-of-type(2){max-inline-size:80ch}.upcoming-tab .upcoming-list__airdate{padding:0;color:#444;align-items:flex-start}.upcoming-tab .airdate-formatter__day{font-size:1.125rem}.upcoming-tab .airdate-formatter__date{font-size:1.5rem;font-weight:600;color:var(--mono-color-400)}.upcoming-tab .airdate-formatter__time-wrap{font-size:1.125rem;font-weight:500;color:var(--theme-color-300)}.upcoming-tab .upcoming-list__airdate-bg{padding:0 2.5rem}.upcoming-tab .image-card__content{color:#444}.upcoming-tab .image-card__content>div{font-size:1.125rem}.upcoming-tab .image-card__content>div:first-child{font-size:1.5rem;color:var(--mono-color-400)}@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}}@media screen and (max-width:55rem){.upcoming-tab .upcoming-list__item{flex-direction:column}.upcoming-tab .upcoming-list__airdate{display:block}.upcoming-tab .upcoming-list__airdate-bg{height:auto;padding:1rem}.upcoming-tab .upcoming-list__airdate-bg airdate-formatter{display:flex;align-items:center;gap:.5rem}.upcoming-tab image-card{flex-direction:column}.upcoming-tab .image-card__content{align-self:flex-start}.upcoming-tab .airdate-formatter__day,.upcoming-tab .airdate-formatter__time-wrap{font-size:1.5rem}.upcoming-tab .airdate-formatter__time-wrap{font-weight:600}.upcoming-tab .airdate-formatter__central-time,.upcoming-tab .airdate-formatter__meridian{font-size:.8em}.upcoming-tab .airdate-formatter__date{margin-bottom:0;margin-block-end:0}.upcoming-tab .upcoming-list__item image-card{align-items:stretch}}@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}}@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}tab-navigation>div{margin-left:0;margin-top:1rem}}@media screen and (max-width:40rem){.show-hero-constrainer{aspect-ratio:388/594}.page-hero{text-align:center}.page-hero .show-hero__content{left:0;right:0;justify-self:center;padding-left:1rem;padding-right:1rem}.page-hero .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}}@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:.5rem;padding-block-end:0.5rem;padding-top:.5rem;padding-block-start:0.5rem}.cast__follow-platform{display:block;margin-bottom:.5rem}}@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:.1;transform:translate3d(0,10rem,0)}50%{opacity:.2}100%{opacity:1;transform:translate3d(0,0,0)}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scrippsproduct/entertainment-sites-css",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "Universal CSS files for entertainment sites",
5
5
  "main": "src/index.scss",
6
6
  "scripts": {
package/src/base.scss CHANGED
@@ -1,45 +1,4 @@
1
- @import 'Reset';
2
-
3
- :root {
4
- /* theme colors */
5
- --theme-color-100: hsl(44, 98%, 52%);
6
- --theme-color-200: hsl(33, 100%, 50%);
7
- --theme-color-300: hsl(33, 100%, 50%);
8
- --theme-color-400: hsl(24, 81%, 55%);
9
- --theme-color-500: hsl(24, 92%, 48%);
10
- /* monotones */
11
- --mono-color-100: #fff;
12
- --mono-color-200: #0000002B;
13
- --mono-color-400: #666;
14
- --mono-color-500: #777;
15
- /* form colors */
16
- --form-valid-color: hsl(150, 55%, 38%);
17
- --form-invalid-color: hsl(0, 51%, 50%);
18
- /* gradients */
19
- --on-now-gradient: linear-gradient(to bottom, var(--theme-color-100) 0%, var(--theme-color-300) 100%); //linear-gradient(to bottom, var(--form-valid-color) 0%, hsl(150, 54%, 27%) 100%);
20
- --body-radial-gradient: radial-gradient(ellipse at top left, var(--theme-color-200) 0%, var(--theme-color-100) 90%);
21
- --footer-gradient: linear-gradient(180deg,hsl(29.65deg 100% 50% / 64%),transparent); //linear-gradient(180deg, #D54804 0%, #EB660A 50%);
22
- --menu-gradient: linear-gradient(90deg, hsl(39, 100%, 41%) 0%, hsl(30, 82%, 58%) 50%, hsl(28, 82%, 55%) 90%);
23
- /* other */
24
- --cta-button-color: var(--theme-color-200);
25
- --main-font-family: 'Montserrat', sans-serif;
26
- --body-background-url: url(https://ewscripps-brightspot-lower.s3.amazonaws.com/24/3f/b693fd3a4f709740eae431187e55/backgroundimage-bw.png);
27
- --body-background-blend-mode: soft-light;
28
- --body-background-repeat: no-repeat;
29
- --body-background-size: cover;
30
- --body-background-position: center;
31
- --body-background-attachment: fixed;
32
- --paragraph-font-family: 'Open Sans', sans-serif;
33
- --anchor-color: var(--theme-color-200);
34
- --anchor-hover-color: var(--theme-color-100);
35
- --headers-color: var(--mono-color-400);
36
- --error-handler-background-color: var(--mono-color-100);
37
- --error-handler-outline-color: var(--theme-color-200);
38
- --modals-close-btn-color: var(--mono-color-100);
39
- --modals-close-btn-outline-color: var(--theme-color-300);
40
- --inline-anchor-color: var(--theme-color-400);
41
- }
42
-
1
+ @import 'reset';
43
2
 
44
3
  html {
45
4
  font-family: var(--main-font-family);
@@ -61,7 +20,7 @@ html {
61
20
 
62
21
  body {
63
22
  margin: 0;
64
- background-image: var(--body-background-url),var(--body-radial-gradient);
23
+ background-image: var(--body-background-url),var(--body-gradient);
65
24
  background-blend-mode: var(--body-background-blend-mode);
66
25
  background-repeat: var(--body-background-repeat);
67
26
  background-size: var(--body-background-size);
@@ -131,12 +90,8 @@ site-wrapper {
131
90
  100% { opacity: 1; }
132
91
  }
133
92
 
134
- .main-content {
135
- //background-color: #fff;
136
- }
137
-
138
93
  .page-section {
139
- background-color: #fff;
94
+ background-color: var(--mono-color-100);
140
95
  }
141
96
 
142
97
  .page-section--gradient-bkgd {
@@ -144,11 +99,6 @@ site-wrapper {
144
99
  min-height: 200px;
145
100
  }
146
101
 
147
- // .page-section--gradient-bkgd {
148
- // background-image: unset;
149
- // background-color: transparent;
150
- // }
151
-
152
102
  .page-section--extra-margin {
153
103
  margin-top: 1.5rem;
154
104
  }
@@ -249,6 +199,7 @@ error-handler {
249
199
  color: var(--mono-color-100);
250
200
  text-transform: uppercase;
251
201
  text-align: center;
202
+ text-wrap: balance;
252
203
  border-top: 1px solid var(--mono-color-100);
253
204
  padding-top: 2.5rem;
254
205
  margin-top: 0.5rem;
@@ -287,7 +238,7 @@ error-handler {
287
238
  max-width: 64rem;
288
239
  padding-left: 2.5rem;
289
240
  padding-right: 2.5rem;
290
- background-color: #fff;
241
+ background-color: var(--mono-color-100);
291
242
  }
292
243
 
293
244
  @media screen and (max-width: 37.5rem) {
@@ -304,6 +255,27 @@ footer > content-constrainer {
304
255
  border: none;
305
256
  }
306
257
 
258
+ featured-list .image-card__content {
259
+ text-align: center;
260
+ color: var(--mono-color-400);
261
+ font-size: clamp(1rem, 2vw, 1.5rem);
262
+ font-weight: 400;
263
+ text-decoration: none;
264
+ text-wrap: pretty;
265
+
266
+ @media screen and (max-width: 48rem) {
267
+ font-size: clamp(1rem, 2.5vw, 1.5rem);
268
+ }
269
+
270
+ @media screen and (max-width: 25rem) {
271
+ font-size: clamp(1rem, 6vw, 1.5rem);
272
+ }
273
+
274
+ .airdate-formatter__time > br {
275
+ display: none;
276
+ }
277
+ }
278
+
307
279
  .modal__close-btn {
308
280
  background: transparent;
309
281
  border: none;
@@ -69,12 +69,10 @@ label[for="season-selector"] {
69
69
  }
70
70
 
71
71
  .custom-select__item--highlighted {
72
- //color: #fff;
73
72
  background-color: #efefef;
74
73
  }
75
74
 
76
75
  .custom-select__choices li:hover {
77
- // color: #fff;
78
76
  background-color: #efefef;
79
77
  }
80
78
 
package/src/find-us.scss CHANGED
@@ -41,8 +41,8 @@ channel-search__wrapper {
41
41
  .channel-search__submit-btn {
42
42
  --button-bg-color: var(--theme-color-200);
43
43
  --button-hover-bg-color: var(--theme-color-500);
44
- --button-color: #fff;
45
- --button-hover-color: #fff;
44
+ --button-color: var(--mono-color-100);
45
+ --button-hover-color: var(--mono-color-100);
46
46
  --button-border-color: var(--theme-color-200);
47
47
  --button-hover-border-color: var(--theme-color-500);
48
48
  background-image: linear-gradient(180deg, var(--theme-color-200), var(--theme-color-100), var(--theme-color-100),var(--theme-color-200));
@@ -185,7 +185,7 @@ promotion-block {
185
185
  }
186
186
 
187
187
  img {
188
- filter: contrast(200%) invert(1);
188
+ filter: grayscale(1) brightness(0) invert(1);
189
189
  transition: transform 0.35s cubic-bezier(0.215, 0.715, 0.465, 0.955);
190
190
  }
191
191
  }
@@ -195,12 +195,6 @@ promotion-block {
195
195
  border-color: #ddd;
196
196
  }
197
197
 
198
- // .findus__column {
199
- // @media screen and (max-width: 37.5rem) {
200
- // padding-inline: 2rem 1rem;
201
- // }
202
- // }
203
-
204
198
  .instructions-list__list {
205
199
  color: #444;
206
200
  }
@@ -304,5 +298,4 @@ promotion-block {
304
298
  text-align: left;
305
299
  }
306
300
  }
307
- }
308
- // 500px
301
+ }
package/src/footer.scss CHANGED
@@ -38,7 +38,7 @@
38
38
  padding: 0.5rem;
39
39
  margin-bottom: 1rem;
40
40
  margin-block-end: 1rem;
41
- border: 1px solid #fff;
41
+ border: 1px solid var(--mono-color-100);
42
42
  transition: scale 0.255s ease-in-out, border-radius 0.225s ease-out;
43
43
 
44
44
  &:first-of-type {
@@ -87,7 +87,7 @@
87
87
  }
88
88
  }
89
89
  }
90
- //
90
+ // 1100px
91
91
  @media screen and (max-width: 68.75rem) {
92
92
  .footer-nav-wrapper {
93
93
  grid-template-columns: 1fr;
@@ -178,7 +178,6 @@
178
178
  font-weight: 600;
179
179
  text-align: center;
180
180
  color: var(--mono-color-100);
181
- //background-color: hsl(33deg 82.48% 50.51% / 82%);
182
181
  }
183
182
 
184
183
  @media screen and (max-width: 68.75rem) {
package/src/header.scss CHANGED
@@ -1,9 +1,5 @@
1
1
  header {
2
2
  padding-top: 2.5rem;
3
- // position:sticky;
4
- // top: 0;
5
- // z-index: 20;
6
- // background-image: linear-gradient(to bottom, rgba(0,0,0, 0.4) 0%, rgba(0,0,0, 0.1));
7
3
  transition: padding 0.325s ease-out;
8
4
 
9
5
  &.header--shrink {
@@ -52,7 +48,7 @@ header logo-navigation {
52
48
  .main-navigation__nav-link {
53
49
  --transition-length: 0.175s;
54
50
  display: inline-block;
55
- color: #fff;
51
+ color: var(--mono-color-100);
56
52
  font-weight: 600;
57
53
  font-size: 1.15rem;
58
54
  text-transform: uppercase;
package/src/home.scss CHANGED
@@ -9,7 +9,6 @@
9
9
 
10
10
  & > * {
11
11
  place-items: unset;
12
- // padding: 2.5rem;
13
12
  }
14
13
  }
15
14
 
@@ -111,7 +110,7 @@
111
110
  .brand-promotion-carousel {
112
111
  overflow: hidden;
113
112
  background-color: rgba(235, 100, 10, 0.1);
114
- background-image: linear-gradient(to bottom, rgb(255 126 0), transparent);
113
+ background-image: var(--footer-gradient);
115
114
  }
116
115
 
117
116
  #carousel-brand-promotion {
@@ -152,9 +151,7 @@
152
151
  }
153
152
  }
154
153
 
155
- .cta-block__cta {
156
- transition: scale 0.325s ease-out;
157
-
154
+ .cta-block__cta {
158
155
  &:hover {
159
156
  scale: 1.05;
160
157
  }
@@ -203,11 +200,6 @@
203
200
  padding-inline-end: var(--_padding-inline-start);
204
201
  }
205
202
 
206
- // .program-airdate__image-wrapper {
207
- // display: grid;
208
- // place-items: center;
209
- // }
210
-
211
203
  .program-airdate__logo[data-style="gradient"] {
212
204
  margin: 1rem 0 2rem;
213
205
  mask-size: contain;
@@ -225,6 +217,60 @@
225
217
  letter-spacing: 0.6px;
226
218
  }
227
219
 
220
+ featured-list {
221
+ gap: 3rem;
222
+
223
+ img { border-radius: var(--border-radius); }
224
+
225
+ .image-card__img-wrapper {
226
+ position: relative;
227
+ border-radius: 0.95rem;
228
+
229
+ &::after {
230
+ content: "";
231
+ position: absolute;
232
+ inset: 0;
233
+ box-shadow:
234
+ 0px 1px 1px rgba(3, 7, 18, 0.02),
235
+ 0px 4px 4px rgba(3, 7, 18, 0.04),
236
+ 0px 9px 10px rgba(3, 7, 18, 0.07),
237
+ 0px 16px 17px rgba(3, 7, 18, 0.09),
238
+ inset 0 0 0 0 var(--theme-color-400);
239
+ opacity: 0;
240
+ transition: opacity 0.325s ease-in, box-shadow 0.325s ease-out;
241
+ border-radius: 0.65rem;
242
+ }
243
+ }
244
+
245
+ image-card:hover {
246
+ .image-card__img-wrapper {
247
+
248
+
249
+ &::after {
250
+ opacity: 1;
251
+ box-shadow:
252
+ 0px 1px 1px rgba(3, 7, 18, 0.02),
253
+ 0px 4px 4px rgba(3, 7, 18, 0.04),
254
+ 0px 9px 10px rgba(3, 7, 18, 0.07),
255
+ 0px 16px 17px rgba(3, 7, 18, 0.09),
256
+ inset 0 0 0 0.75rem var(--theme-color-400);
257
+ }
258
+ }
259
+ }
260
+
261
+ .airdate-formatter__pipe {
262
+ font-size: 1em;
263
+ vertical-align: baseline;
264
+ margin-inline: 0.5em;
265
+ }
266
+ }
267
+
268
+ .featured-show-list-section {
269
+ loading-wrapper {
270
+ aspect-ratio: 1695/751;
271
+ }
272
+ }
273
+
228
274
  .promotions-row {
229
275
  equal-size-flex-row {
230
276
  gap: 2.75rem;
package/src/schedule.scss CHANGED
@@ -165,7 +165,7 @@ date-navigation {
165
165
  &[aria-selected="true"] {
166
166
  cursor: default;
167
167
 
168
- .date-navigation__weekday{
168
+ .date-navigation__weekday {
169
169
  font-weight: 900;
170
170
  }
171
171
 
@@ -9,7 +9,7 @@ show-details-page {
9
9
  tabbed-content {
10
10
  display: block;
11
11
  padding-top: 1.8rem;
12
- --tabbed-content-border-color: #ddd;
12
+ --tabbed-content-border-color: hsl(0, 0%, 87%);
13
13
 
14
14
  .social-share__icon {
15
15
  display: block;