.homepage-hero-slideshow{ --bg-overlay-color: var(--true-black); --callout-bg-color: var(--true-black); --aside-color: var(--light-red);
}
#homepage-hero-slideshow figure.video figcaption .figure-inner{ position: absolute; max-width:none; width: 100vw;
}
figure.video figcaption .figure-inner video { position: absolute; width: 100vw; top: 0; left: 0; vertical-align: middle; display: block; height: 100%; min-height: 25rem; -o-object-fit: cover; object-fit: cover;
}
#homepage-hero-slideshow figure.video figcaption .figure-inner .section-inset{ position: relative; height: 100%;
}
#homepage-hero-slideshow .view-content .views-row.views-row-first{ overflow: hidden;
}
#homepage-hero-slideshow .overlay.custom-overlay{ background-image: linear-gradient(350deg, rgba(var(--bg-overlay-color),0.5), rgba(var(--bg-overlay-color),0.3), rgba(var(--bg-overlay-color),0.4), rgba(var(--bg-overlay-color),0.2)); width: 100vw; -webkit-animation: animate 3s both; animation: animate 3s both; -webkit-animation-timing-function: var(--animation-ease); animation-timing-function: var(--animation-ease); --animation-opacity: 0;
} /* Custom Grid Layout Alterations */
/* Custom Grid Layout Alterations */ body.front #homepage-hero-slideshow .view-content{ height: 64vh; min-height: 32rem; } body.front #homepage-hero-slideshow .view-content .views-row{ height: 64vh; min-height: 32rem; } body.front #homepage-hero-slideshow figure .hero-slide-image img{ height: 40vh; min-height: 20rem; } body.front #homepage-hero-slideshow figure figcaption .figure-inner{ max-width: 100%; width: 100vw !important; } .similar-articles{ bottom: -60%; display: flex; flex-direction: column; position: absolute; height: 60%; right: 0; width: 100%; } .similar-articles .article-aside{ display: flex; position: relative; height: 33.33%; overflow: hidden; width: 100%; border-top: 1px solid #D1D3D5; background-image: linear-gradient(to right, rgba(var(--snowflake-grey),1), rgba(var(--light-grey),1)); -webkit-transition: background-color 300ms ease; -moz-transition: background-color 300ms ease; -ms-transition: background-color 300ms ease; -o-transition: background-color 300ms ease; transition: background-color 300ms ease; } .similar-articles .article-aside .article-overlay{ display: block; height: 100%; width: 100%; z-index: 1; background-color: transparent; -webkit-transition: height 300ms ease, background-color 300ms ease; -moz-transition: height 300ms ease, background-color 300ms ease; -ms-transition: height 300ms ease, background-color 300ms ease; -o-transition: height 300ms ease, background-color 300ms ease; transition: height 300ms ease, background-color 300ms ease; } /* only needed with images .similar-articles .article-aside img{ max-width: 3.25rem; } */ /* Article Content and Image Positioning */ .similar-articles .article-content { align-self: center; display: flex; position: absolute; width: 100%; z-index: 2; position: absolute; } .similar-articles .article-content div{ -webkit-transition: opacity 220ms ease, color 300ms ease; -moz-transition: opacity 220ms ease, color 300ms ease; -ms-transition: opacity 220ms ease, color 300ms ease; -o-transition: opacity 220ms ease, color 300ms ease; transition: opacity 220ms ease, color 300ms ease; } .similar-articles .article-content .content-reveal{ display: none; } /* Hover and Focus Effects */ .similar-articles a.article-aside:hover .article-overlay, .similar-articles a.article-aside:focus .article-overlay{ background-color:rgba(var(--aside-color),1); } .similar-articles a.article-aside:hover .article-content p, .similar-articles a.article-aside:focus .article-content p{ color:rgba(var(--white),1); } #homepage-hero-slideshow figure figcaption .figure-inner{ max-width: 100%; width: 100vw !important; } /* Hero Callout Alterations */ #homepage-hero-slideshow .hero-huge-callout{ display: block; top: 50% !important; width: 100%; height: 100%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } #homepage-hero-slideshow .callout-container{ text-align:center; margin: 0 auto; position: relative; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } #homepage-hero-slideshow .callout-container:before { content: ''; position: absolute; height: 200%; width: 200%; left: -50%; top: -50%; background: radial-gradient(rgba(var(--callout-bg-color),0.4), rgba(var(--callout-bg-color),0.2), rgba(var(--callout-bg-color),0), rgba(var(--callout-bg-color),0)); -webkit-animation: animate 3s both; animation: animate 3s both; -webkit-animation-timing-function: var(--animation-ease); animation-timing-function: var(--animation-ease); --animation-opacity: 0; } div.hero-huge-callout p.lead-in{ max-width: 19rem; margin-left: auto; margin-right: auto; } #homepage-hero-slideshow .ctas a{ font-size: 0.85rem; text-shadow: 1px 1px 1px rgba(var(--black),0.4); } /* Media Queries - Responsive Behavior */ @media screen and (min-width: 30em){ div.hero-huge-callout div.font-size-xxl{ font-size: 2.75rem; } div.hero-huge-callout p.lead-in{ max-width: 30rem; font-size: 1.3rem; line-height: 1.5; } body.front #homepage-hero-slideshow .view-content{ height: 52vh; min-height: 32rem; } body.front #homepage-hero-slideshow .view-content .views-row{ height: 52vh; min-height: 32rem; } body.front #homepage-hero-slideshow figure .hero-slide-image img{ min-height: 25rem; } body.front #homepage-hero-slideshow .similar-articles{ width: 100%; height: 30%; bottom: -30%; flex-direction: row; } .similar-articles .article-aside{ width: 33.33%; height: 100%; border-left: 1px solid rgba(var(--medium-grey), 1); } .similar-articles .article-aside:nth-of-type(1){ border-left: none; } } @media screen and (min-width: 54em){ #homepage-hero-slideshow .callout-container:before { background:radial-gradient(rgba(var(--callout-bg-color),0.6), rgba(var(--callout-bg-color),0.25), rgba(var(--callout-bg-color),0), rgba(var(--callout-bg-color),0)); background-position-x: -5rem; } figure.video figcaption .figure-inner video { position: absolute; height: 65vh; min-height: 32rem; } #homepage-hero-slideshow figure .figure-title{ left: 5vw; display: block; -webkit-animation: animate 2s both; animation: animate 2s both; -webkit-animation-timing-function: var(--animation-ease); animation-timing-function: var(--animation-ease); -webkit-animation-delay: 2s; animation-delay: 2s; --animation-opacity: 0; } #homepage-hero-slideshow .callout-container{ margin: 0; text-align: left; max-width: none; top: 42%; } div.hero-huge-callout p.lead-in{ margin-left: 0; } #homepage-hero-slideshow .ctas a.button{ padding: 1rem 1.5rem; } #homepage-hero-slideshow .overlay.custom-overlay{ background-image: linear-gradient(120deg, rgba(var(--bg-overlay-color),0.5), rgba(var(--bg-overlay-color),0.2), rgba(var(--bg-overlay-color),0.15), rgba(var(--bg-overlay-color),0)); } .similar-articles .article-overlay { background-color: none; } body.front #homepage-hero-slideshow figure .hero-slide-image img{ height: 65vh; min-height: 32rem; } body.front #homepage-hero-slideshow .view-content{ height: 65vh; min-height: 32rem; } body.front #homepage-hero-slideshow .view-content .views-row{ height: 65vh; min-height: 32rem; } body.front #homepage-hero-slideshow .similar-articles{ width: 17rem; height: 100%; padding: 6rem 0 8rem 0; margin-right: 5vw; flex-direction: column; bottom: 0; align-items: stretch; justify-content: space-around; } .similar-articles .article-aside{ width: 100%; height: 20%; min-height: 4.5rem; max-height: 5rem; border-radius: 5px; border: 0; box-shadow: 0 0 4px rgba(218,85,48,.15); background-image: linear-gradient(to right, rgba(var(--snowflake-grey),0.9), rgba(var(--light-grey),0.8)); } .similar-articles .article-content div{ top: 0.25rem; position: relative; } .similar-articles .article-aside .article-overlay{ height: 10%; } .similar-articles .article-aside:hover .article-overlay, .similar-articles .article-aside:focus .article-overlay{ height: 100%; } .similar-articles .article-aside .article-overlay{ background-image: linear-gradient(var(--direction-ne), rgba(var(--aside-color),1), rgba(var(--aside-color),1)); } .similar-articles a.article-aside:hover .article-content p, .similar-articles a.article-aside:focus .article-content p{ color: revert; } .similar-articles .article-aside:hover .article-content div, .similar-articles .article-aside:focus .article-content div{ opacity: 0; } .similar-articles .article-aside .article-content .content-reveal{ text-align: center; width: 100%; left: 0; } .similar-articles .article-aside:hover .article-content .content-reveal, .similar-articles .article-aside:focus .article-content .content-reveal{ align-self: center; display: flex; position: absolute; max-width: 27rem; -webkit-animation: animate 0.5s both; animation: animate 0.5s both; -webkit-animation-timing-function: var(--animation-ease); animation-timing-function: var(--animation-ease); --animation-opacity: 0; --animation-translate-x: 0; --animation-translate-y: -1rem; } #homepage-hero-slideshow .similar-articles a.article-aside, #homepage-hero-slideshow .similar-articles p.aside-heading{ -webkit-animation: animate 1s both; animation: animate 1s both; -webkit-animation-timing-function: var(--animation-ease); animation-timing-function: var(--animation-ease); --animation-opacity: 0; --animation-translate-x: 2rem; --animation-translate-y: 0; } #homepage-hero-slideshow .similar-articles p.aside-heading{ -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(1){ -webkit-animation-delay: 1.25s; animation-delay: 1.25s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(2){ -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(3){ -webkit-animation-delay: 1.55s; animation-delay: 1.55s; } @media screen and (min-height: 55em){ body.front #homepage-hero-slideshow .similar-articles{ padding: 9rem 0 11rem 0; } } @media screen and (min-height: 62em){ body.front #homepage-hero-slideshow .similar-articles{ padding: 11rem 0 13rem 0; } } @media screen and (min-height: 68em){ body.front #homepage-hero-slideshow .similar-articles{ padding: 13rem 0 15rem 0; } } } @media screen and (min-width: 68em){ #homepage-hero-slideshow .callout-container{ width: 62rem; } #homepage-hero-slideshow figure .figure-title{ left: 8vw; } div.hero-huge-callout div.font-size-xxl{ font-size: 3.25rem; } div.hero-huge-callout p.lead-in{ max-width: 36rem; font-size: 1.5rem; } #homepage-hero-slideshow .ctas a{ font-size: 1.1rem; } } @media screen and (min-width: 72em){ body.front #homepage-hero-slideshow .similar-articles{ margin-right: 8vw; width: 18rem; } } @media screen and (min-width: 85.5em){ #homepage-hero-slideshow figure .figure-title{ left: calc((100vw - 72rem) / 2); } } @media screen and (min-width: 90em){ div.hero-huge-callout div.font-size-xxl{ font-size: 3.5rem; } body.front #homepage-hero-slideshow .similar-articles{ margin-right: 12vw } } @media screen and (min-width: 110em){ body.front #homepage-hero-slideshow .similar-articles{ margin-right: 15vw; } }
var heroVideoWrapper = document.querySelector ("#hero-video-wrapper");
if (heroVideoWrapper) { var v = document.createElement ("video"); v.setAttribute ("width", "100%"); v.setAttribute ("height", "auto"); v.setAttribute ("preload", "auto"); v.setAttribute ("autoplay", "autoplay"); v.setAttribute ("playsinline", ""); v.setAttribute ("id", "hero-video"); v.muted = true; v.setAttribute ("poster", "/sites/default/files/public/img/home/01-hero/digipen-student-3d-environment-by-juthapat-limpattanakul-poster.webp"); var s = document.createElement ("source"); s.setAttribute ("src", "/sites/default/files/public/img/home/01-hero/digipen-student-3d-environment-by-juthapat-limpattanakul.mp4"); s.setAttribute ("type", "video/mp4"); v.appendChild (s); heroVideoWrapper.appendChild (v); window.setTimeout( function() { v.play ();}, "100");
}