Heading into Smallville Season 8, Clark faced new adversaries and deepened his relationship with Lois, while the series adapted to major cast changes and a fresh creative direction. In Season 9, Clark embraced his destiny further, confronting Zod's threat and solidifying his role as Metropolis's protector amidst evolving alliances. :host { --media-font-family: Roboto, helvetica neue, segoe ui, arial, sans-serif; --media-control-background: transparent; --media-control-hover-background: transparent; --media-tooltip-display: none; display: block; width: 100%; height: 100%; } media-controller { --base: 20px; --media-range-track-height: calc(0.125 * var(--base)); --media-control-height: calc(2 * var(--base)); -webkit-font-smoothing: antialiased; border-radius: 16px; overflow: hidden; background: var(--media-secondary-color, #17507B); font-size: calc(0.75 * var(--base)); font-family: Roboto, Arial, sans-serif; } media-controller[breakpointmd] { --base: 20px; min-height: 84px; } .info, media-control-bar { transition: opacity 0.3s ease-in-out; } media-controller:has(media-time-range[dragging]) :is(.info, media-control-bar) { opacity: 0.4; } .media-button { --media-control-hover-background: rgba(255, 255, 255, 0.12); border-radius: 8px; position: relative; padding: 0; } .media-button svg { fill: none; stroke: var(--media-primary-color, #fff); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; } .bg-shape1, .bg-shape2 { position: absolute; width: 50%; height: 100%; max-height: 132px; position: absolute; top: 50%; transform: translateY(-50%); filter: blur(80px); mix-blend-mode: plus-lighter; opacity: 0.24; } .bg-shape2 { right: 0; } .controls { position: relative; z-index: 1; box-sizing: border-box; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 16px 6px; } [breakpointmd] .controls { min-height: 84px; display: grid; align-items: center; grid-template-columns: repeat(3, 1fr); padding: 16px; } .info { display: grid; align-items: end; margin-bottom: 16px; } .info div { grid-area: 1 / 1; } [breakpointmd] .info { display: flex; align-items: center; margin-bottom: 0; } .info-text { position: relative; padding: 16px; } .info h1, .info h2 { font-family: var(--media-font-family); line-height: 1.2; margin: 0; font-weight: 400; color: var(--media-primary-color, #fff); } .title { font-size: 14px; } .byline { font-size: 14px; opacity: 0.6; } .info-poster { position: relative; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px; } [breakpointmd] .info-poster { width: 52px; } slot[name='poster']::slotted(*) { object-fit: cover; aspect-ratio: 1; } .poster-gradient { --gradient-steps: hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%, hsl(0 0% 0% / 0.104) 22.5%, hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%, hsl(0 0% 0% / 0.45) 47.1%, hsl(0 0% 0% / 0.55) 52.9%, hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%, hsl(0 0% 0% / 0.825) 71%, hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%, hsl(0 0% 0%) 100%; position: absolute; bottom: 0; width: 100%; height: 100px; background: linear-gradient(to bottom, var(--gradient-steps)); } [breakpointmd] .poster-gradient { display: none; } {{mediatitle}} {{mediabyline}} media-control-bar { margin: auto; } @keyframes bounce-scale-play { 0% { transform: scale(0.75, 0.75); } 50% { transform: scale(115%, 115%); } 100% { transform: scale(1, 1); } } media-play-button #icon-play { opacity: 0; transform-box: view-box; transform-origin: center center; transform: scale(0.5, 0.5); transition: all 0.5s; } media-play-button[mediapaused] #icon-play { opacity: 1; transform: scale(1, 1); animation: 0.35s bounce-scale-play ease-in-out; } @keyframes bounce-pause-left { 0% { font-size: 10px; } 50% { font-size: 3px; } 100% { font-size: 4px; } } @keyframes bounce-pause-right { 0% { font-size: 10px; transform: translateX(-8px); } 50% { font-size: 3px; transform: translateX(1px); } 100% { font-size: 4px; transform: translateX(0); } } media-play-button #pause-left, media-play-button #pause-right { /* Using font-size to animate height because using scale was resulting in unexpected positioning */ font-size: 4px; opacity: 1; transform: translateX(0); transform-box: view-box; } media-play-button:not([mediapaused]) #pause-left { animation: 0.3s bounce-pause-left ease-out; } media-play-button:not([mediapaused]) #pause-right { animation: 0.3s bounce-pause-right ease-out; } media-play-button[mediapaused] #pause-left, media-play-button[mediapaused] #pause-right { opacity: 0; font-size: 10px; } media-play-button[mediapaused] #pause-right { transform-origin: right center; transform: translateX(-8px); } media-mute-button { position: relative; z-index: 1; } media-mute-button .muted-path { transition: clip-path 0.2s ease-out; } media-mute-button #muted-path-2 { transition-delay: 0.2s; } media-mute-button .muted-path { clip-path: inset(0); } media-mute-button:not([mediavolumelevel='off']) #muted-path-1 { clip-path: inset(0 0 100% 0); } media-mute-button:not([mediavolumelevel='off']) #muted-path-2 { clip-path: inset(0 0 100% 0); } media-mute-button .muted-path { opacity: 0; } media-mute-button[mediavolumelevel='off'] .muted-path { opacity: 1; } media-mute-button .vol-path { opacity: 1; transition: opacity 0.4s; } media-mute-button[mediavolumelevel='off'] .vol-path { opacity: 0; } media-mute-button[mediavolumelevel='low'] #vol-high-path, media-mute-button[mediavolumelevel='medium'] #vol-high-path { opacity: 0; } .times { display: flex; gap: 3px; font-size: calc(0.7 * var(--base)); } .time-display { padding: 0; line-height: 1; } [breakpointmd] .times { display: block; } [breakpointmd] .time-display { display: block; text-align: right; line-height: 1.2; } [breakpointmd] media-duration-display { opacity: 0.6; } .small-time-range { width: 100%; height: calc(2 * var(--base)); border-radius: calc(0.25 * var(--base)); --media-range-track-backdrop-filter: invert(10%) blur(5px) brightness(110%); --media-range-track-background: rgba(255, 255, 255, 0.2); --media-range-track-pointer-background: rgba(255, 255, 255, 0.5); --media-range-track-border-radius: calc(0.25 * var(--base)); --media-time-range-buffered-color: rgba(255, 255, 255, 0.4); --media-range-bar-color: rgb(255, 255, 255); --media-range-thumb-background: #fff; --media-range-thumb-transition: opacity 0.1s linear; --media-range-thumb-height: 12px; --media-ra
