.video-series-main {
--wp--style--global--content-size: 1200px;
margin-inline: auto;
max-width: 1200px;
} .video-series-main {
margin-bottom: 1.2rem;
} @media ( max-width: 1231px ) {
.video-series-main:not( .has-global-padding, .container ) {
--vs-main-gutter: 16px;
padding-inline: var( --vs-main-gutter );
}
}
.video-series-series-episodes,
.video-series-latest-episodes,
.video-series-series-share,
.video-series-episode-player,
.video-series-watch {
--vs-accent: #f5a623;
--vs-surface: #ffffff;
--vs-surface-deep: #f2f0f4;
--vs-ink: #07070f;
--vs-text: var( --c-primary, #f0501e );
--vs-text-muted: #5c5a68;
--vs-text-dim: #9a97a6;
--vs-border: rgba( 10, 10, 20, 0.08 );
--vs-radius-sm: 5px;
--vs-radius-md: 10px;
--vs-radius-lg: 16px;
--vs-gap: 12px;
}  .video-series-series-episodes,
.video-series-latest-episodes {
display: grid;
gap: 24px;
grid-template-columns: repeat( 1, 1fr );
list-style: none;
margin: 0;
padding: 0;
}
@media ( min-width: 600px ) {
.video-series-series-episodes,
.video-series-latest-episodes {
grid-template-columns: repeat( 2, 1fr );
}
}
@media ( min-width: 900px ) {
.video-series-series-episodes,
.video-series-latest-episodes {
grid-template-columns: repeat( 3, 1fr );
}
}
.video-series-episode {
margin: 0;
}
.video-series-episode__link {
color: inherit;
display: block;
text-decoration: none;
}
.video-series-episode__thumbnail {
background-color: var( --vs-surface-deep );
border-radius: var( --vs-radius-md );
display: block;
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.video-series-episode__thumbnail img {
height: 100%;
inset: 0;
object-fit: cover;
position: absolute;
width: 100%;
} .video-series-poster {
display: contents;
}
.video-series-episode__badge {
background-color: rgba( 245, 166, 35, 0.13 );
border: 1px solid rgba( 245, 166, 35, 0.3 );
border-radius: var( --vs-radius-sm );
color: var( --vs-accent );
font-size: 0.5625rem;
font-weight: 700;
inset-inline-start: 10px;
letter-spacing: 1.26px;
line-height: 1.5;
padding: 3px 8px;
position: absolute;
text-transform: uppercase;
top: 10px;
z-index: 2;
}
.video-series-episode__play {
background-color: var( --vs-accent );
border-radius: 50%;
display: block;
height: 42px;
left: 50%;
position: absolute;
top: 50%;
transform: translate( -50%, -50% );
width: 42px;
z-index: 2;
}
.video-series-episode__play::before {
border-color: transparent transparent transparent var( --vs-ink );
border-style: solid;
border-width: 7px 0 7px 11px;
content: "";
display: block;
left: 55%;
position: absolute;
top: 50%;
transform: translate( -50%, -50% );
}
.video-series-episode__body {
display: block;
padding-top: 8px;
}
.video-series-episode__title {
display: block;
font-weight: 700;
}
.video-series-episode__meta {
color: var( --vs-text-muted );
display: block;
font-size: 0.8125rem;
} .video-series-series-episodes .video-series-episode__thumbnail::after,
.video-series-latest-episodes .video-series-episode__thumbnail::after {
background: linear-gradient( to top, rgba( 7, 7, 15, 0.45 ) 0%, rgba( 7, 7, 15, 0 ) 30% );
content: "";
inset: 0;
pointer-events: none;
position: absolute;
z-index: 1;
} .video-series-series-episodes .video-series-episode__play,
.video-series-latest-episodes .video-series-episode__play {
display: none;
}
.video-series-series-episodes .video-series-episode__body,
.video-series-latest-episodes .video-series-episode__body {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 12px;
}
.video-series-series-episodes .video-series-episode__title,
.video-series-latest-episodes .video-series-episode__title {
color: var( --vs-text );
font-size: 0.9375rem;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.video-series-series-episodes .video-series-episode__meta,
.video-series-latest-episodes .video-series-episode__meta {
color: var( --vs-text-muted );
font-size: 0.8125rem;
} .video-series-episode-player {
margin: 0;
} .video-series-episode-player video-player {
display: contents;
}
.video-series-episode-player__video,
.video-series-episode-player iframe {
aspect-ratio: 16 / 9;
border: 0;
border-radius: var( --vs-radius-lg );
display: block;
height: auto;
width: 100%;
} .video-series-episode-player media-seek-button:not( :defined ) {
display: none;
}
.video-series-episode-player__seek {
align-items: center;
background: none;
border: 0;
border-radius: 999px;
bottom: 4.5rem; color: #fff;
cursor: pointer;
display: flex;
height: 2.5rem;
justify-content: center;
opacity: 0;
position: absolute;
transition: opacity 0.15s ease;
width: 2.5rem;
}
.video-series-episode-player video-minimal-skin:hover .video-series-episode-player__seek,
.video-series-episode-player__seek:focus-visible {
opacity: 1;
} .video-series-episode-player__seek--backward {
left: min( 42%, calc( 50% - 3rem ) );
}
.video-series-episode-player__seek--backward svg {
transform: scaleX( -1 );
}
.video-series-episode-player__seek--forward {
right: min( 42%, calc( 50% - 3rem ) );
} .video-series-episode-player__seek svg {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.video-series-episode-player__seek-label {
font-size: 0.625rem;
font-weight: 600;
pointer-events: none;
} @media ( max-width: 599px ) {
.video-series-episode-player {
--media-border-radius: 0;
margin-inline: calc( var( --wp--style--root--padding-left, var( --vs-main-gutter, 0px ) ) * -1 )
calc( var( --wp--style--root--padding-right, var( --vs-main-gutter, 0px ) ) * -1 );
}
.video-series-episode-player__video,
.video-series-episode-player iframe {
border-radius: 0;
}
}  .video-series-series-share {
align-items: center;
background-color: var( --vs-surface );
border: 1px solid var( --vs-border );
border-radius: var( --vs-radius-lg );
color: var( --vs-text );
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 20px;
} .video-series-series > .video-series-series-share {
margin: 1.2rem 0;
}
@media ( min-width: 600px ) {
.video-series-series-share {
align-items: flex-start;
flex-direction: column;
} .video-series-series-share.video-series-series-share { margin-inline-start: max(
0px,
calc( ( 100% - var( --wp--style--global--content-size, 1200px ) ) / 2 )
) !important;
max-width: calc( var( --wp--style--global--content-size, 1200px ) / 2 );
}
}
.video-series-series-share__icon {
align-items: center;
background-image: linear-gradient( 135deg, #fdeee6 0%, #fbdccb 100% );
border-radius: 12px;
display: flex;
flex-shrink: 0;
height: 48px;
justify-content: center;
order: 1;
width: 48px;
}
.video-series-series-share__icon svg {
height: 20px;
width: 20px;
}
.video-series-series-share__body {
display: flex;
flex: 1 1 0%;
flex-direction: column;
gap: 8px;
min-width: 0;
order: 2;
}
.video-series-series-share__heading {
color: var( --vs-text );
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
margin: 0;
}
.video-series-series-share__description {
color: var( --vs-text-dim );
font-size: 0.8125rem;
line-height: 1.4;
margin: 0;
} .video-series-series-share__controls {
display: flex;
flex: 1 1 100%;
flex-wrap: wrap;
gap: 8px;
order: 4;
}
.video-series-series-share__url {
background-color: var( --vs-surface-deep );
border: 1px solid var( --vs-border );
border-radius: 8px;
color: var( --vs-text-muted );
flex: 1 1 12rem;
min-width: 0;
padding: 10px 12px;
}
.video-series-series-share__button {
background-color: rgba( 245, 166, 35, 0.1 );
border: 1px solid rgba( 245, 166, 35, 0.22 );
border-radius: 8px;
color: var( --vs-accent );
cursor: pointer;
font-weight: 700;
padding: 10px 16px;
white-space: nowrap;
} .video-series-series-share__share-button {
flex-shrink: 0;
margin-inline-start: 20px;
order: 3;
}
@media ( min-width: 600px ) {
.video-series-series-share__share-button {
margin-inline-start: 0;
margin-top: 20px;
}
}  .video-series-countdown {
align-items: center;
display: flex;
gap: 6px;
justify-content: center;
}
.video-series-countdown__unit {
align-items: baseline;
background-color: rgba( 13, 13, 26, 0.72 );
border: 1px solid rgba( 245, 166, 35, 0.28 );
border-radius: var( --vs-radius-sm );
display: flex;
gap: 2px;
padding: 6px 8px;
}
.video-series-countdown__value {
color: var( --vs-accent );
font-variant-numeric: tabular-nums;
font-weight: 700;
line-height: 1.1; min-width: 1.6ch;
text-align: end;
}
.video-series-countdown__symbol {
color: var( --vs-text-muted );
font-size: 0.6875rem;
letter-spacing: 0.06em;
line-height: 1.1;
text-transform: uppercase;
} .video-series-countdown--thumbnail {
left: 50%;
position: absolute;
top: 50%;
transform: translate( -50%, -50% );
} .video-series-countdown--player,
.video-series-countdown--stage {
gap: var( --vs-gap );
left: 50%;
position: absolute;
top: 75%;
transform: translate( -50%, -50% );
z-index: 2;
} .video-series-countdown--player .video-series-countdown__unit,
.video-series-countdown--stage .video-series-countdown__unit {
align-items: center;
flex-direction: column;
gap: 4px;
padding: 12px 18px;
}
.video-series-countdown--player .video-series-countdown__value,
.video-series-countdown--stage .video-series-countdown__value {
font-size: 2rem;
min-width: 2.2ch;
text-align: center;
}
.video-series-countdown--player .video-series-countdown__symbol,
.video-series-countdown--stage .video-series-countdown__symbol {
font-size: 0.8125rem;
} .video-series-episode-player__poster {
aspect-ratio: 16 / 9;
background-color: var( --vs-surface-deep );
border-radius: var( --vs-radius-lg );
display: block;
height: auto;
object-fit: cover;
width: 100%;
} .video-series-episode-player.is-upcoming {
border-radius: var( --vs-radius-lg );
overflow: hidden;
position: relative;
}
.video-series-episode-player.is-upcoming::after {
background: linear-gradient( to top, rgba( 7, 7, 15, 0.92 ) 0%, rgba( 7, 7, 15, 0.55 ) 45%, rgba( 7, 7, 15, 0 ) 85% );
content: "";
inset: 0;
pointer-events: none;
position: absolute;
z-index: 1;
}
@media ( max-width: 599px ) {
.video-series-episode-player__poster,
.video-series-episode-player.is-upcoming {
border-radius: 0;
}
} .video-series-episode.is-upcoming .video-series-episode__badge {
background-color: rgba( 40, 40, 70, 0.35 );
border-color: rgba( 40, 40, 70, 0.4 );
color: #3e3e5c;
} .video-series-countdown .screen-reader-text {
border: 0;
clip-path: inset( 50% );
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}  .single-series .wp-block-post-title,
.single-series .video-series-series__title {
color: #9a97a6;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.1em;
margin: 0 0 4px;
text-transform: uppercase;
} .single-series .wp-block-post-title + .video-series-series-slider,
.single-series .video-series-series__title + .video-series-series-slider {
margin-top: 4px;
}
.video-series-series-slider {
--vs-accent: #f5a623;
--vs-surface: #ffffff;
--vs-surface-deep: #f2f0f4;
--vs-ink: #07070f;
--vs-text: var( --c-primary, #f0501e );
--vs-text-muted: #5c5a68;
--vs-text-dim: #9a97a6;
--vs-border: rgba( 10, 10, 20, 0.08 );
--vs-radius-sm: 5px;
--vs-radius-md: 10px;
--vs-radius-lg: 16px;
--vs-gap: 12px;
}
.video-series-series-slider__header {
margin-bottom: 20px;
}
.video-series-series-slider__kicker {
color: var( --vs-text-dim );
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.1em;
margin: 0 0 4px;
text-transform: uppercase;
}
.video-series-series-slider__heading {
color: var( --vs-ink );
font-size: 1.5rem;
font-weight: 800;
margin: 0;
} .video-series-series-slider .swiper {
overflow: hidden;
position: relative;
width: 100%;
}
.video-series-series-slider .swiper-wrapper {
box-sizing: content-box;
display: flex;
height: 100%;
position: relative;
width: 100%;
z-index: 1;
}
.video-series-series-slider .swiper-slide { box-sizing: border-box;
flex-shrink: 0;
height: auto;
position: relative;
width: 100%;
}
.video-series-series-slider__stage {
margin-bottom: var( --vs-gap );
}
.video-series-series-slider__card {
border: 2px solid transparent;
border-radius: var( --vs-radius-lg );
color: inherit;
display: block;
overflow: hidden;
position: relative;
text-decoration: none;
}
.video-series-series-slider__card--stage {
border-color: var( --vs-accent );
box-shadow: 0 0 48px rgba( 245, 166, 35, 0.15 );
}
.video-series-series-slider__card--thumb {
border-color: var( --vs-border );
border-radius: var( --vs-radius-md );
}
.video-series-series-slider__thumbs .swiper-slide-thumb-active.video-series-series-slider__card--thumb {
border: 2px solid rgb( 245, 166, 35 );
box-shadow: 0 0 20px rgba( 245, 166, 35, 0.25 );
transition: border-color 0.22s;
} @media ( min-width: 600px ) {
.video-series-series-slider__thumbs .swiper-slide:not( .swiper-slide-thumb-active ).video-series-series-slider__card--thumb:hover {
border: 2px solid rgba( 245, 166, 35, 0.3 );
transition: border-color 0.22s;
}
} .video-series-series-slider__card .video-series-episode__thumbnail {
border-radius: 0;
overflow: visible;
} .video-series-series-slider__card.is-upcoming .video-series-episode__thumbnail img {
filter: grayscale( 0.35 );
} .video-series-series-slider__pagination {
align-items: center;
display: flex;
gap: 6px;
justify-content: center;
margin-top: var( --vs-gap );
}
.video-series-series-slider__pagination:empty {
display: none;
}
.video-series-series-slider__pagination .swiper-pagination-bullet {
background-color: rgba( 10, 10, 20, 0.15 );
border-radius: 3px;
cursor: pointer;
display: block;
height: 6px;
padding: 0;
width: 6px;
}
.video-series-series-slider__pagination .swiper-pagination-bullet-active {
background-color: var( --vs-accent );
width: 20px;
} .video-series-series-slider__card .video-series-episode__thumbnail::after {
background: linear-gradient( to top, rgba( 7, 7, 15, 0.92 ) 0%, rgba( 7, 7, 15, 0.55 ) 45%, rgba( 7, 7, 15, 0 ) 85% );
content: "";
inset: 0;
pointer-events: none;
position: absolute;
z-index: 1;
}
.video-series-series-slider__card .video-series-episode__body {
bottom: 10px;
display: flex;
flex-direction: column;
gap: 2px;
inset-inline: 12px;
padding-top: 0;
position: absolute;
z-index: 2;
}
.video-series-series-slider__card .video-series-episode__title-row {
align-items: flex-end;
display: flex;
gap: 8px;
justify-content: space-between;
}
.video-series-series-slider__card .video-series-episode__title {
color: #ffffff;
flex: 1 1 auto;
min-width: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.video-series-series-slider__card--stage .video-series-episode__title {
font-size: 1.25rem;
font-weight: 800;
line-height: 23px;
}
.video-series-series-slider__card--stage .video-series-episode__meta {
color: #a0a0c0;
font-size: 0.625rem;
line-height: 15px;
}
.video-series-series-slider__card--thumb .video-series-episode__title {
font-size: 0.6875rem;
font-weight: 800;
line-height: 13px;
}
.video-series-series-slider__card--thumb .video-series-episode__meta {
color: #5a5a78;
font-size: 0.5625rem;
line-height: 13px;
} @media ( min-width: 600px ) {
.video-series-series-slider__thumbs .video-series-episode__meta {
visibility: hidden;
}
.video-series-series-slider__thumbs .swiper-slide-thumb-active .video-series-episode__meta {
visibility: visible;
}
} .video-series-series-slider__card--thumb.is-upcoming .video-series-episode__title {
color: #5a5a78;
} .video-series-series-slider__card--stage .video-series-episode__play {
box-shadow: 0 0 20px rgba( 245, 166, 35, 0.55 );
height: 52px;
width: 52px;
}
.video-series-series-slider__card--stage .video-series-episode__play::before {
border-width: 8px 0 8px 13px;
} .video-series-series-slider__card .video-series-countdown:not( .video-series-countdown--stage ) {
align-items: flex-end;
flex-shrink: 0;
gap: 3px;
position: static;
transform: none;
}
.video-series-series-slider__card .video-series-countdown:not( .video-series-countdown--stage ) .video-series-countdown__unit {
align-items: center;
background: none;
border: 0;
flex-direction: column;
gap: 1px;
padding: 0;
}
.video-series-series-slider__card .video-series-countdown:not( .video-series-countdown--stage ) .video-series-countdown__value {
background-color: rgba( 245, 166, 35, 0.13 );
border: 1px solid rgba( 245, 166, 35, 0.28 );
border-radius: 4px;
box-sizing: border-box;
font-size: 0.6875rem;
font-weight: 800;
line-height: 1;
padding: 3px 0;
text-align: center;
width: 24px;
}
.video-series-series-slider__card .video-series-countdown:not( .video-series-countdown--stage ) .video-series-countdown__symbol {
color: #6b6b8a;
font-size: 0.4375rem;
line-height: 1.5;
} @media ( min-width: 600px ) {
.video-series-series-slider__thumbs .swiper-slide-thumb-active .video-series-countdown {
gap: 4px;
}
.video-series-series-slider__thumbs .swiper-slide-thumb-active .video-series-countdown__unit {
gap: 1px;
}
.video-series-series-slider__thumbs .swiper-slide-thumb-active .video-series-countdown__value {
font-size: 0.976rem;
padding: 4px 0;
width: 34px;
}
.video-series-series-slider__thumbs .swiper-slide-thumb-active .video-series-countdown__symbol {
font-size: 0.621rem;
}
} @media ( max-width: 599px ) {
.video-series-series-slider__stage {
display: none;
}
.video-series-series-slider__thumbs {
margin-bottom: 0; height: 280px;
} .video-series-series-slider__thumbs .swiper-wrapper {
align-items: center;
}
.video-series-series-slider__thumbs .video-series-episode__thumbnail {
display: flex;
flex-direction: column;
height: 100%;
padding: 0 12px;
}
.video-series-series-slider__thumbs .video-series-series-slider__card--thumb {
border-radius: 14px;
height: 200px;
width: 140px;
} .video-series-series-slider__thumbs .swiper-slide-active.video-series-series-slider__card--thumb:not( .is-upcoming ) {
border-color: var( --vs-accent );
box-shadow: 0 0 32px rgba( 245, 166, 35, 0.18 );
height: 280px;
width: 200px;
}
.video-series-series-slider__thumbs .swiper-slide-active .video-series-episode__play {
box-shadow: 0 0 12px rgba( 245, 166, 35, 0.5 );
height: 48px;
width: 48px;
} .video-series-series-slider__thumbs .video-series-episode__body {
bottom: auto;
inset-inline: auto;
margin-top: auto;
position: static;
}
.video-series-series-slider__thumbs .video-series-episode__title-row {
display: contents;
}
.video-series-series-slider__thumbs .video-series-episode__title {
font-size: 0.8125rem;
line-height: 1.2;
order: 1;
}
.video-series-series-slider__thumbs .video-series-episode__meta {
font-size: 0.5625rem;
line-height: 1.5;
order: 2;
}
.video-series-series-slider__thumbs .video-series-countdown {
gap: 6px;
order: 3;
padding-bottom: 10px;
}
.video-series-series-slider__thumbs .video-series-countdown__value {
font-size: 1.125rem;
padding: 4px 0;
width: 36px;
}
.video-series-series-slider__thumbs .video-series-countdown__symbol {
font-size: 0.5rem;
}
.video-series-series-slider__thumbs .swiper-slide-active.video-series-series-slider__card--thumb:not( .is-upcoming ) .video-series-episode__title {
color: #ffffff;
font-size: 1.125rem;
font-weight: 800;
line-height: 1.1;
}
.video-series-series-slider__thumbs .swiper-slide-active.video-series-series-slider__card--thumb:not( .is-upcoming ) .video-series-episode__meta {
color: #a0a0c0;
font-size: 0.625rem;
}
.video-series-series-slider__thumbs .swiper-slide-active:not( .is-upcoming ) .video-series-episode__body {
gap: 4px;
}
}  .video-series-section-heading {
color: #ef501e;
font-size: 1.5rem;
font-weight: 800;
margin: 0 0 20px;
}  .single-episode .wp-block-post-title,
.single-episode .video-series-episode-single__title {
color: var( --vs-ink );
font-size: 1.75rem;
font-weight: 800;
line-height: 1.3;
margin: 32px 0 16px;
}
@media ( min-width: 782px ) {
.single-episode .wp-block-post-title,
.single-episode .video-series-episode-single__title {
font-size: 2rem;
}
} .video-series-episode-single__series-link {
margin: 0 0 6px;
}
.video-series-episode-single__series-link a {
align-items: center;
color: #5c5a68;
display: inline-flex;
font-size: 0.8125rem;
font-weight: 600;
gap: 6px;
text-decoration: none;
}
.video-series-episode-single__series-link a:hover,
.video-series-episode-single__series-link a:focus-visible {
color: #f5a623;
}
.video-series-episode-single__series-arrow {
font-size: 0.75rem;
} .rtl .video-series-episode-single__series-arrow {
display: inline-block;
transform: scaleX( -1 );
}  .video-series-watch {
display: block;
}
.video-series-watch__main {
min-width: 0;
}
@media ( min-width: 1024px ) {
.video-series-watch {
align-items: start;
display: grid;
gap: 28px;
grid-template-columns: minmax( 0, 7fr ) minmax( 295px, 3fr );
}
.video-series-watch__aside {
position: sticky;
top: 20px;
}
} .video-series-episode-meta {
color: var( --vs-text-muted );
font-size: 0.875rem;
font-weight: 500;
margin: 0 0 16px;
}
.video-series-episode-meta__separator {
margin: 0 6px;
}   .video-series-action-row {
display: flex;
gap: 10px;
margin: 0 0 20px;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
}
.video-series-action-row::-webkit-scrollbar {
display: none;
}
.video-series-action-row > * {
flex-shrink: 0;
}
.video-series-episode-actions {
display: flex;
gap: 10px;
}
.video-series-episode-actions__button,
.video-series-series-share--compact .video-series-series-share__button {
align-items: center;
background-color: var( --vs-surface-deep );
border: 1px solid var( --vs-border );
border-radius: 999px;
color: var( --vs-text );
display: inline-flex;
font-size: 0.875rem;
font-weight: 700;
gap: 8px;
min-height: 44px;
padding: 0 16px;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
white-space: nowrap;
}
.video-series-episode-actions__button:hover,
.video-series-episode-actions__button:focus-visible,
.video-series-series-share--compact .video-series-series-share__button:hover,
.video-series-series-share--compact .video-series-series-share__button:focus-visible {
border-color: var( --vs-accent );
outline-style: none;
}
.video-series-episode-actions__button.is-active {
background-color: rgba( 245, 166, 35, 0.14 );
border-color: var( --vs-accent );
color: var( --vs-accent );
}
.video-series-episode-actions__icon,
.video-series-series-share--compact .video-series-series-share__icon {
align-items: center;
display: inline-flex;
height: 18px;
width: 18px;
}
.video-series-episode-actions__icon svg,
.video-series-series-share--compact .video-series-series-share__icon svg {
height: 18px;
width: 18px;
}
.video-series-episode-actions__count {
color: var( --vs-text-muted );
font-weight: 600;
} .video-series-series-share--compact {
background: none;
border: 0;
display: contents;
padding: 0;
} .video-series-series-share--compact .video-series-series-share__share-button {
margin: 0;
order: initial;
}  .video-series-series-info {
align-items: center;
background-color: var( --vs-surface );
border: 1px solid var( --vs-border );
border-radius: var( --vs-radius-lg );
display: flex;
gap: 12px;
margin: 0 0 20px;
padding: 14px 16px;
}
.video-series-series-info__avatar {
border-radius: 50%;
display: block;
flex-shrink: 0;
height: 48px;
overflow: hidden;
width: 48px;
}
.video-series-series-info__avatar img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.video-series-series-info__avatar-fallback {
align-items: center;
background-color: var( --vs-surface-deep );
color: var( --vs-accent );
display: flex;
font-weight: 800;
height: 100%;
justify-content: center;
width: 100%;
}
.video-series-series-info__body {
flex: 1 1 0%;
min-width: 0;
}
.video-series-series-info__name {
color: var( --vs-text );
display: block;
font-weight: 700;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.video-series-series-info__followers {
color: var( --vs-text-muted );
font-size: 0.8125rem;
margin: 2px 0 0;
}
.video-series-series-info__follow {
background-color: var( --vs-text );
border: 0;
border-radius: 999px;
color: #ffffff;
flex-shrink: 0;
font-size: 0.875rem;
font-weight: 700;
min-height: 44px;
padding: 0 18px;
}
.video-series-series-info__follow.is-active {
background-color: var( --vs-surface-deep );
color: var( --vs-text );
} .video-series-episode-description {
background-color: var( --vs-surface );
border: 1px solid var( --vs-border );
border-radius: var( --vs-radius-lg );
margin: 0 0 20px;
padding: 18px 20px;
} .video-series-episode-description__body {
color: var( --vs-text-muted );
font-size: 0.9375rem;
line-height: 1.6;
max-height: 104px;
overflow: hidden;
transition: max-height 0.35s ease;
}
.video-series-episode-description.is-open .video-series-episode-description__body {
max-height: 2000px;
}
.video-series-episode-description__toggle {
background: none;
border: 0;
color: var( --vs-accent );
font-weight: 700;
margin-top: 10px;
min-height: 44px;
padding: 0;
text-decoration: underline;
text-underline-offset: 3px;
} .video-series-recommendations__heading {
color: var( --vs-text );
font-size: 1.125rem;
font-weight: 800;
margin: 0 0 12px;
}
.video-series-recommendations__filters {
display: flex;
gap: 8px;
margin: 0 0 16px;
}
.video-series-recommendations__filter {
background-color: var( --vs-surface-deep );
border-radius: 999px;
color: var( --vs-text-muted );
display: inline-block;
font-size: 0.8125rem;
font-weight: 700;
padding: 8px 14px;
}
.video-series-recommendations__filter.is-active {
background-color: var( --vs-text );
color: #ffffff;
}
.video-series-recommendations__list {
display: flex;
flex-direction: column;
gap: 14px;
list-style: none;
margin: 0;
padding: 0;
}
.video-series-recommendations__list .video-series-episode__link {
display: grid;
gap: 10px; grid-template-columns: minmax( 130px, 46% ) 1fr;
}
.video-series-recommendations__list .video-series-episode__thumbnail::after {
background: linear-gradient( to top, rgba( 7, 7, 15, 0.45 ) 0%, rgba( 7, 7, 15, 0 ) 30% );
content: "";
inset: 0;
pointer-events: none;
position: absolute;
z-index: 1;
}
.video-series-recommendations__list .video-series-episode__play {
display: block;
}
.video-series-recommendations__list .video-series-episode__body {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 0;
}
.video-series-recommendations__list .video-series-episode__title {
color: var( --vs-text );
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 0.875rem;
font-weight: 700;
overflow: hidden;
} .video-series-recommendations__list .video-series-countdown {
gap: 4px;
}
.video-series-recommendations__list .video-series-countdown__unit {
padding: 3px 4px;
}
.video-series-recommendations__list .video-series-countdown__value {
font-size: 0.75rem;
min-width: 1.1ch;
}
.video-series-recommendations__list .video-series-countdown__symbol {
font-size: 0.5rem;
} html.wp-dark-mode-active .video-series-series-episodes,
html.wp-dark-mode-active .video-series-latest-episodes,
html.wp-dark-mode-active .video-series-series-share,
html.wp-dark-mode-active .video-series-episode-player,
html.wp-dark-mode-active .video-series-watch {
--vs-surface: #0f0f1a;
--vs-surface-deep: #0d0d1a;
--vs-text: #ffffff;
--vs-text-muted: #a0a0c0;
--vs-text-dim: #5a5a78;
--vs-border: rgba( 255, 255, 255, 0.06 );
}
html.wp-dark-mode-active .video-series-series-slider {
--vs-surface: #0f0f1a;
--vs-surface-deep: #0d0d1a;
--vs-text: #ffffff;
--vs-text-muted: #a0a0c0;
--vs-text-dim: #5a5a78;
--vs-border: rgba( 255, 255, 255, 0.06 );
} html.wp-dark-mode-active .video-series-main {
background-color: transparent;
}
html.wp-dark-mode-active .single-series .wp-block-post-title,
html.wp-dark-mode-active .single-series .video-series-series__title {
color: #5a5a78;
}
html.wp-dark-mode-active .video-series-section-heading {
color: #ffffff;
}
html.wp-dark-mode-active .single-episode .wp-block-post-title,
html.wp-dark-mode-active .single-episode .video-series-episode-single__title {
color: #ffffff;
}
html.wp-dark-mode-active .video-series-episode-single__series-link a {
color: #a0a0c0;
}
html.wp-dark-mode-active .video-series-series-share__icon {
background-image: linear-gradient( 135deg, #1a1a2e 0%, #2a2a42 100% );
}
html.wp-dark-mode-active .video-series-series-slider__pagination .swiper-pagination-bullet {
background-color: rgba( 255, 255, 255, 0.15 );
}