/* ==========================================================================
STU Live Stream — frontend styles
========================================================================== */
/* Live preview block (shown when current event is upcoming) */
.stu-live-preview {
color: #fff;
}
.stu-live-preview__text {
max-width: 60ch;
}
.stu-live-preview__eyebrow {
font-size: 1.5rem;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0 0 0.5rem;
opacity: 0.85;
}
.stu-live-preview__title {
font-size: clamp( 1.75rem, 4vw, 3rem );
line-height: 1.15;
margin: 0 0 1rem;
}
.stu-live-preview__meta {
font-size: 1.125rem;
margin: 0;
}
.stu-live-preview__meta a {
color: inherit;
text-decoration: underline;
}
/* Two-column layout when there are other upcoming events. */
.stu-live-preview--with-sidebar {
display: grid;
grid-template-columns: minmax( 0, 1.6fr ) minmax( 0, 1fr );
gap: 2rem;
align-items: start;
}
.stu-live-preview__sidebar {
color: inherit;
}
.stu-live-preview__sidebar-label {
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.7;
margin: 0 0 0.6rem;
}
.stu-live-upcoming {
list-style: none;
margin: 0;
padding: 0;
padding-inline-start: 0;
}
.stu-live-upcoming__item {
display: grid;
grid-template-columns: 56px 1fr;
gap: 0.75rem;
padding: 0.6rem 0;
border-top: 1px solid rgba( 255, 255, 255, 0.15 );
align-items: baseline;
}
.stu-live-upcoming__item:first-child {
border-top: 0;
}
.stu-live-upcoming__date-stack {
text-align: center;
}
.stu-live-upcoming__month {
display: block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.75;
}
.stu-live-upcoming__day {
display: block;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
}
.stu-live-upcoming__title {
margin: 0 0 0.15rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.25;
}
.stu-live-upcoming__when {
display: block;
font-size: 0.8rem;
opacity: 0.75;
white-space: nowrap;
}
@media ( max-width: 767px ) {
.stu-live-preview--with-sidebar {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* Live video block (shown when current event is live) */
.stu-live-video {
width: 100%;
}
.stu-live-video__wrapper {
position: relative;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
}
.stu-live-video__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.stu-live-video__unmute-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba( 0, 0, 0, 0.35 );
transition: opacity 600ms ease;
}
.stu-live-video__unmute-overlay.is-fading {
opacity: 0;
pointer-events: none;
}
.stu-live-video__unmute-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
font-size: 1rem;
font-weight: 600;
color: #fff;
background: #741a27;
border: 0;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.35 );
}
.stu-live-video__unmute-button:hover,
.stu-live-video__unmute-button:focus-visible {
background: #5e1320;
outline: 2px solid #fff;
outline-offset: 2px;
}
.stu-live-video__unmute-icon {
width: 1rem;
height: 1rem;
background-color: currentColor;
-webkit-mask: url( "data:image/svg+xml;utf8," ) center/contain no-repeat;
mask: url( "data:image/svg+xml;utf8," ) center/contain no-repeat;
}
/* Replays grid */
.stu-replays {
width: 100%;
}
ul.stu-replays__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1.5rem;
grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) );
}
ul.stu-replays__grid > .stu-replay-card {
list-style: none;
}
.stu-replay-card {
margin: 0;
}
.stu-replay-card__link {
display: block;
color: inherit;
text-decoration: none;
}
.stu-replay-card__thumbnail {
display: block;
width: 100%;
height: auto;
aspect-ratio: 2 / 1;
object-fit: cover;
}
.stu-replay-card__heading {
margin: 0.75rem 0 0.25rem;
font-size: 1.25rem;
line-height: 1.25;
}
.stu-replay-card__date {
display: block;
opacity: 0.75;
font-size: 0.95rem;
}
/* Section overlay swap when the live video is streaming.
Targets the class JS adds to the section (Enfold lowercases section IDs at
render time, so a #stuLive selector would not match). */
.stu-live-streaming .av-section-color-overlay {
transition: background-color 600ms ease, opacity 600ms ease;
background-color: #212121 !important;
opacity: 1 !important;
}
/* Mobile CTA — replaces the embedded video on phones.
Enfold's mobile breakpoint is 768px; below that, swap embed for the link. */
.stu-live-video__mobile-cta {
display: none;
}
@media ( max-width: 767px ) {
.stu-live-video {
display: none;
}
.stu-live-video__mobile-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
background: #741a27;
color: #fff;
text-decoration: none;
border-radius: 8px;
box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.35 );
}
.stu-live-video__mobile-cta:hover,
.stu-live-video__mobile-cta:focus-visible {
background: #5e1320;
color: #fff;
outline: none;
}
.stu-live-video__mobile-cta-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.stu-live-video__mobile-cta-label {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.25;
}
.stu-live-video__mobile-cta-sublabel {
font-size: 0.875rem;
opacity: 0.85;
}
.stu-live-video__mobile-cta-icon {
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: rgba( 255, 255, 255, 0.18 );
display: inline-flex;
align-items: center;
justify-content: center;
}
.stu-live-video__mobile-cta-icon svg {
margin-left: 0.15rem; /* nudge the play triangle visually centered */
}
}