<div class="theatre-hero">
<div class="theatre-hero__archway">
<svg fill="none" viewBox="0 0 2164 128" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 128C341.38 45.725 704.885 2.667 1082 2.667c377.12 0 740.62 43.058 1082 125.333V0H0v128z" fill="#13294B"/>
</svg>
</div>
<div class="theatre-hero__carousel">
<section class="hero-carousel" aria-labelledby="carousel-title-1976049314" data-carousel>
<h2 class="hero-carousel__title" id="carousel-title-1976049314"></h2>
<div class="hero-carousel__circle hero-carousel__circle--one">
<svg class="spotlight-circle__container spotlight-circle spotlight-circle--illini-orange" data-spotlight-circle xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1424">
<path class="spotlight-circle__path" id="path--hero1"
fill="none" stroke="none"
stroke-miterlimit="10" stroke-width="4" stroke-dasharray="10 20.1" data-spotlight-circle-path
/>
<circle class="spotlight-circle__shape" id="hero1"
cx="0" cy="0" r="750" stroke="#FF552E" stroke-width="4"
data-spotlight-circle-id="hero1"
data-spotlight-circle-animation="animation6"
data-spotlight-circle-duration="3s"
data-spotlight-circle-show-path="false"
>
</circle>
</svg>
</div>
<div class="hero-carousel__circle hero-carousel__circle--two">
<svg class="spotlight-circle__container spotlight-circle spotlight-circle--heritage-orange" data-spotlight-circle xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1424">
<path class="spotlight-circle__path" id="path--hero2"
fill="none" stroke="none"
stroke-miterlimit="10" stroke-width="4" stroke-dasharray="10 20.1" data-spotlight-circle-path
/>
<circle class="spotlight-circle__shape" id="hero2"
cx="0" cy="0" r="750" stroke="#FF552E" stroke-width="4"
data-spotlight-circle-id="hero2"
data-spotlight-circle-animation="animation5"
data-spotlight-circle-duration="3s"
data-spotlight-circle-show-path="false"
>
</circle>
</svg>
</div>
<ul class="hero-carousel__slides" data-slides-wrapper-element>
</ul>
<div class="hero-carousel__navigation">
<button class="hero-carousel__controls-previous" data-carousel-controls-previous>
<span class="hero-carousel__controls-label">Go to previous slide</span>
<span class="hero-carousel__controls-icon-previous"><svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
</span>
</button>
<ul class="hero-carousel__indicators">
</ul>
<button class="hero-carousel__controls-next" data-carousel-controls-next>
<span class="hero-carousel__controls-label">Go to next slide</span>
<span class="hero-carousel__controls-icon-next"><svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</button>
</div>
</section>
</div>
</div>
<div class="theatre-hero">
<div class="theatre-hero__archway">
{% include 'bits/archway/archway.twig' %}
</div>
<div class="theatre-hero__carousel">
{% include 'partials/carousel/carousel.twig' with {
classNamePrefix: 'hero-carousel',
title: hero.title,
slides: hero.slides,
} %}
</div>
</div>
{
"siteUnit": "theatre",
"departmentName": "Theatre",
"background": "light",
"classNamePrefix": "hero-carousel",
"title": "Onstage and beyond.",
"slides": [
{
"image": {
"src": "https://picsum.photos/2560/1200?random=0.9093121053563524",
"altText": "Two actors engage onstage in Roman costumes. One gestures toward the audience.",
"caption": "The coolest movie"
},
"description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit (2019)"
},
{
"image": {
"src": "https://picsum.photos/2560/1200?random=0.4927944849820205",
"altText": "Two actors engage onstage in Roman costumes. One gestures toward the audience.",
"caption": "A Funny Thing Happened on the Way to the Forum"
},
"description": "Cool"
},
{
"image": {
"src": "https://picsum.photos/2560/1200?random=0.6888553624794096",
"altText": "Two actors engage onstage in Roman costumes. One gestures toward the audience.",
"caption": "A Funny Thing Happened on the Way to the Forum"
},
"description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit (2019)"
},
{
"image": {
"src": "https://picsum.photos/2560/1200?random=0.5816452925096702",
"altText": "Two actors engage onstage in Roman costumes. One gestures toward the audience.",
"caption": "A Funny Thing Happened on the Way to the Forum"
},
"description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit (2019)"
},
{
"image": {
"src": "https://picsum.photos/2560/1200?random=0.8490697135618177",
"altText": "Two actors engage onstage in Roman costumes. One gestures toward the audience.",
"caption": "A Funny Thing Happened on the Way to the Forum"
},
"description": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit (2019)"
}
]
}
$circleBreakpoint = 1810px
$breakpointXl = 2560px
$breakpointLarge = 1648px
$breakpointMedium = 1000px
$breakpointSmall = 600px
@keyframes appearUp
0%
opacity 0
transform translateY(10px)
100%
opacity 1
transform translateY(0)
@keyframes fadeIn
0%
opacity 0
100%
opacity 1
.theatre-hero
position relative
border-top 16px solid illiniBlue
border-bottom 220px solid illiniBlueDark
+above($breakpointSmall)
border-top 32px solid illiniBlue
border-bottom 200px solid illiniBlueDark
+above($breakpointLarge)
border-top 64px solid illiniBlue
border-bottom none
&__archway
width 100vw
position absolute
top 0
left 0
z-index 1
& svg
height 100%
max-height 128px
width 100%
.hero-carousel
width 100%
position relative
background-color illiniBlueDark
padding-top min(calc(1200 / 2560 * 100%), 272px)
+above($breakpointSmall)
padding-top min(calc(max(1200) / max(2560) * 100%), 560px)
+above($breakpointMedium)
padding-top min(calc(max(1200) / max(2560) * 100%), 784px)
+above($breakpointLarge)
padding-top min(calc(max(1200) / max(2560) * 100%), 1072px)
+above($breakpointXl)
padding-top min(calc(max(1200) / max(2560) * 100%), 1200px)
&__circle
animation fadeIn 1000ms ease-in-out forwards
bottom 0
left 0
position absolute
right 0
top 7%
z-index 1
+above($breakpointSmall)
top 12%
+above($breakpointMedium)
top 7%
+above($breakpointLarge)
top 0
+above(1920px)
top 5%
& circle
r 920px
+above($breakpointSmall)
r 850px
+above($breakpointMedium)
r 800px
+above(1300px)
r 750px
+above(1920px)
r 739px
&__title
@extends $billboardMedium
animation appearUp 1000ms ease-in-out forwards
position absolute
color white
left 0
z-index 2
text-align center
width 100%
padding 0 16px
top 37%
+above($breakpointSmall)
top 38%
+above($breakpointMedium)
top 40%
&__navigation
animation appearUp 1000ms ease-in-out forwards
animation-delay 200ms
position absolute
display flex
z-index 2
justify-content center
align-items center
width 100%
margin-left auto
margin-right auto
opacity 0
bottom -88px
transform translateY(0)
+above($breakpointSmall)
bottom -96px
+above($breakpointLarge)
bottom 280px
&__mobile-navigation
display block
+above($breakpointSmall)
display none
&__controls-previous
&__controls-next
cursor pointer
width 48px
height 48px
transition background-color 300ms ease-in-out
border-radius 100%
& svg path
transition fill 300ms ease-in-out
fill white
&:hover
background-color white
& svg path
fill illiniBlue
+below($breakpointSmall + 1)
border solid 2px illiniOrange
&:hover
&:focus
background-color illiniOrange
& svg path
fill illiniBlue
&__controls-previous
margin-right 12px
&__controls-next
margin-left 12px
&__controls-label
@extends $visuallyHidden
&__controls-icon-previous
margin-right 2px
margin-top 2px
display block
&__controls-icon-next
margin-left 2px
margin-top 2px
display block
&__indicators
display none
gap 8px
+above($breakpointSmall)
display flex
&__indicator-text
@extends $visuallyHidden
pointer-events none
&__indicator-wrap
cursor pointer
display inline-block
margin-bottom 15px
padding-bottom 15px
&__indicator-wrap:focus &__indicator
&__indicator-wrap:active &__indicator
&__indicator-wrap:hover &__indicator
[data-is-indicator-active="true"] &__indicator
transform scaleY(9.5)
cursor pointer
&__indicator
transform-origin top
transition transform 300ms ease-in-out
width 80px
height 2px
cursor pointer
&__indicator-wrap:nth-of-type(1) &__indicator
background-color illiniOrange
&__indicator-wrap:nth-of-type(2) &__indicator
background-color heritageOrange
&__indicator-wrap:nth-of-type(3) &__indicator
background-color archesBlueLighter
&__indicator-wrap:nth-of-type(4) &__indicator
background-color archesBlue
&__indicator-wrap:nth-of-type(5) &__indicator
background-color industrialBlue
.hero-carousel-slide
position absolute
transition opacity 550ms ease-in-out
opacity 0
top 0
&[data-is-current-slide="true"]
opacity 1
&__image
object-fit cover
object-position center
width 100vw
pointer-events none
mix-blend-mode lighten
height 272px
& .captioned-image__caption
display none
+above($breakpointSmall)
height 560px
+above($breakpointMedium)
height 784px
+above($breakpointLarge)
height 1072px
+above($breakpointXl)
height 1200px
&__content
display flex
background linear-gradient(180deg, #13294B 0%, #0A1B34 100%)
&__info
animation appearUp 1000ms ease-in-out forwards
animation-delay 300ms
opacity 0
transform translateY(0)
text-align center
width 100%
position absolute
left 0
padding-left 24px
padding-right 24px
margin-top 0
bottom 0
z-index 2
+below($breakpointSmall + 1)
top 380px
+above($breakpointSmall)
animation-delay 500ms
bottom -148px
+above($breakpointLarge)
bottom 225px
&[data-is-current-slide="true"] &__info
transform translate3d(0,0,0)
&__title
@extends $headline4
opacity 0
transition all 1000ms ease-in-out
transform translate3d(0,10px,0)
& em
font-style italic
& *
letter-spacing 2px
line-height 1.5
color white
&__description
@extends $detail
animation-delay 100ms
opacity 0
transition all 1000ms ease-in-out
transition-delay 150ms
transform translate3d(0,10px,0)
& em
font-style italic
& *
line-height 1.5
color white
&[data-is-current-slide="true"] &__title
&[data-is-current-slide="true"] &__description
opacity 1
transform translate3d(0,0,0)
&__gradient:after
content ''
position absolute
bottom 0
left 0
width 100vw
height 75%
background linear-gradient(180deg, rgba(10, 27, 52, 0) 0%, #0A1B34 100%)
There are no notes for this item.