DigiPen Institute of Technology

.homepage-hero-slideshow{ --aside-count: 4; --view-content-height: 64vh; --view-content-min-height: 36rem; --view-content-img-height: 40vh; --view-content-img-min-height: 20rem; --bg-overlay-color: var(--true-black); --callout-bg-color: var(--true-black); /* Aside 1 Variables */ --aside-color-1: var(--light-red); --aside-img-1: url(/sites/default/files/public/img/home/01-hero/ark-survival-ascended-courtesy-image.webp); --aside-img-pos-1: 50% 25%; /* Aside 2 Variables */ --aside-color-2: var(--golden-yellow); --aside-img-2: url(/sites/default/files/public/img/home/01-hero/adobe-substance-painter-courtesy-image.webp); --aside-img-pos-2: 50% 25%; /* Aside 3 Variables */ --aside-color-3: var(--red-orange); --aside-img-3: url(/sites/default/files/public/img/home/01-hero/forza-motorsport-courtesy-image.webp); --aside-img-pos-3: 50% 50%; /* Aside 4 Variables */ --aside-color-4: var(--green); --aside-img-4: url(/sites/default/files/public/img/home/01-hero/spotify-wrapped-courtesy-image.webp); --aside-img-pos-4: 50% 50%; } body.front #homepage-hero-slideshow div.ctas a{ padding: 1.2rem 1.6rem; text-shadow: 1px 1px 1px rgba(32,19,10,0.4); /*background-image:linear-gradient(to right, #eea520 0%, #efb859 51%, #ffda8c 100%);*/ } /* Custom Grid Layout Alterations */ body.front #homepage-hero-slideshow .view-content{ height: var(--view-content-height); min-height: var(--view-content-min-height); } body.front #homepage-hero-slideshow .view-content .views-row{ height: var(--view-content-height); min-height: var(--view-content-min-height); } body.front #homepage-hero-slideshow figure .hero-slide-image img{ height: var(--view-content-img-height); min-height: var(--view-content-img-min-height); } body.front #homepage-hero-slideshow figure figcaption .figure-inner{ max-width: 100%; width: 100vw !important; } .similar-articles{ bottom: calc(var(--view-content-img-min-height) - var(--view-content-min-height)); bottom: 0; display: flex; flex-direction: column; position: relative; height: calc(var(--view-content-min-height) - var(--view-content-img-min-height)); right: 0; width: 100%; } /* calc(var(--view-content-min-height) * 100 / var(--view-content-height) */ @media screen and (min-height: 56.25rem){ .similar-articles{ /*bottom: calc(var(--view-content-img-height) - var(--view-content-height)); */ height: calc(var(--view-content-height) - var(--view-content-img-height)); } } .similar-articles .article-aside{ display: flex; position: relative; height: calc(100% / var(--aside-count)); overflow: hidden; width: 100%; background-size: cover; -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:after{ content: ''; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(32,32,32,0.2); } .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; } /* Article Content and Image Positioning */ .similar-articles img.alumni { position: absolute; bottom: 0; left: 0; height: 100%; -webkit-transition: opacity 300ms ease; -moz-transition: opacity 300ms ease; -ms-transition: opacity 300ms ease; -o-transition: opacity 300ms ease; transition: opacity 300ms ease; } .similar-articles .grid-wrapper { position: relative; width: 100%; height: 100%; z-index: 3; } .similar-articles .article-content { align-self: center; position: absolute; width: 100%; height: 100%; z-index: 2; } .similar-articles .article-content div{ -webkit-transition: opacity 300ms ease, color 300ms ease; -moz-transition: opacity 300ms ease, color 300ms ease; -ms-transition: opacity 300ms ease, color 300ms ease; -o-transition: opacity 300ms ease, color 300ms ease; transition: opacity 300ms ease, color 300ms ease; } .similar-articles .article-content span{ opacity: 1; text-align: center; -webkit-transition: color 300ms ease; -moz-transition: color 300ms ease; -ms-transition: color 300ms ease; -o-transition: color 300ms ease; transition: color 300ms ease; } .similar-articles .article-content .content-reveal{ display: none; } /* Hover and Focus Effects */ .similar-articles .article-aside:nth-of-type(1){ background-image: var(--aside-img-1); background-position: var(--aside-img-pos-1); } .similar-articles .article-aside:nth-of-type(2){ background-image: var(--aside-img-2); background-position: var(--aside-img-pos-2); } .similar-articles .article-aside:nth-of-type(3){ background-image: var(--aside-img-3); background-position: var(--aside-img-pos-3); } .similar-articles .article-aside:nth-of-type(4){ background-image: var(--aside-img-4); background-position: var(--aside-img-pos-4); } .similar-articles .article-aside:hover span, .similar-articles .article-aside:focus span, .similar-articles .article-aside:hover p, .similar-articles .article-aside:focus p{ color: #ffffff; } .similar-articles .article-aside:nth-of-type(1):hover .article-overlay, .similar-articles .article-aside:nth-of-type(1):focus .article-overlay{ background-color:rgba(var(--aside-color-1),0.8); } .similar-articles .article-aside:nth-of-type(2):hover .article-overlay, .similar-articles .article-aside:nth-of-type(2):focus .article-overlay{ background-color:rgba(var(--aside-color-2),0.8); } .similar-articles .article-aside:nth-of-type(3):hover .article-overlay, .similar-articles .article-aside:nth-of-type(3):focus .article-overlay{ background-color:rgba(var(--aside-color-3),0.8); } .similar-articles .article-aside:nth-of-type(4):hover .article-overlay, .similar-articles .article-aside:nth-of-type(4):focus .article-overlay{ background-color:rgba(var(--aside-color-4),0.8); } .similar-articles .article-aside:hover span, .similar-articles .article-aside:focus span, .similar-articles .article-aside:hover p, .similar-articles .article-aside:focus p{ color: #ffffff; } /* Hero Callout Alterations */ body.front #homepage-hero-slideshow .section-inset{ position: relative; height: 100%; margin: 0 auto; } body.front #homepage-hero-slideshow .hero-huge-callout{ display: block; margin: 0 auto; top: 50% !important; width: 100%; max-width: 15rem; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } /* Media Queries - Responsive Behavior */ @media screen and (min-width: 30em){ .homepage-hero-slideshow{ --view-content-height: 52vh; --view-content-min-height: 32rem; --view-content-img-min-height: 25rem; } /* 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{ height: 100%; border-left: 1px solid #D1D3D5; } .similar-articles .article-aside:nth-of-type(1){ border-left: none; } body.front #homepage-hero-slideshow .hero-huge-callout{ max-width: 19rem; background-image: radial-gradient(rgba(35,31,32,0.2), rgba(35,31,32,0.1), rgba(35,31,32,0), rgba(35,31,32,0)); background-repeat: no-repeat; } div.hero-huge-callout div.font-size-xxl{ font-size: 2.8rem; } div.hero-huge-callout p.lead-in{ font-size: 1.3rem; } div.hero-huge-callout .ctas a{ font-size: 1rem; } } @media screen and (min-width: 54em){ body.front #homepage-hero-slideshow figure .figure-title{ right: inherit; margin-left: 5vw; -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: 1.6s; animation-delay: 1.6s; --animation-opacity: 0; } .overlay.custom-overlay{ background-image: linear-gradient(250deg, rgba(35,31,32,0.8), rgba(35,31,32,0.5), rgba(35,31,32,0), rgba(35,31,32,0), rgba(70,70,109,0.35), rgba(70,70,109,0.35)); } body.front #homepage-hero-slideshow figure .hero-slide-image img { -o-object-position: 60% 30%; object-position: 60% 30%; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* .similar-articles .article-overlay:nth-of-type(1), .similar-articles .article-overlay:nth-of-type(2), .similar-articles .article-overlay:nth-of-type(3) { background-color: none; } */ .homepage-hero-slideshow{ --view-content-height: 65vh; --view-content-min-height: 32rem; --view-content-img-height: 65vh; --view-content-img-min-height: 32rem; } /* 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 .hero-huge-callout{ top: 45% !important; padding: 5rem; left: -5rem; max-width: 40rem; } div.hero-huge-callout p.lead-in{ max-width: 20rem; } body.front #homepage-hero-slideshow .similar-articles{ position: absolute; width: 20rem; height: 100%; padding: 1.5rem 0 2rem 0; margin-right: 5vw; flex-direction: column; bottom: 0; align-items: stretch; justify-content: space-around; } /* body.front #homepage-hero-slideshow .similar-articles:before{ content: ''; position: absolute; display: block; right: -5vw; height: 110%; width: 100%; background: linear-gradient(270deg, rgba(35,31,32,0.75), transparent); } */ .similar-articles .article-aside{ height: 20%; min-height: 6.25rem; border-radius: 5px; border: 0; box-shadow: 0 0 4px rgba(218,85,48,.15); } .similar-articles .article-content { justify-content: center; display: flex; } .similar-articles .article-content span:nth-of-type(1), .similar-articles .article-content div:nth-of-type(1){ 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:nth-of-type(1) .article-overlay{ background-color: rgba(var(--aside-color-1),0.9); } .similar-articles .article-aside:nth-of-type(2) .article-overlay{ background-color: rgba(var(--aside-color-2),0.9); } .similar-articles .article-aside:nth-of-type(3) .article-overlay{ background-color: rgba(var(--aside-color-3),0.9); } .similar-articles .article-aside:nth-of-type(4) .article-overlay{ background-color: rgba(var(--aside-color-4),0.9); } .similar-articles .article-aside:hover .article-content span:nth-of-type(1), .similar-articles .article-aside:focus .article-content span:nth-of-type(1), .similar-articles .article-aside:hover .article-content div:nth-of-type(1), .similar-articles .article-aside:focus .article-content div:nth-of-type(1){ opacity: 0; } .similar-articles .article-aside:hover img.alumni, .similar-articles .article-aside:focus img.alumni{ opacity: 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.2s; animation-delay: 1.2s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(1){ -webkit-animation-delay: 1.35s; animation-delay: 1.35s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(2){ -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(3){ -webkit-animation-delay: 1.65s; animation-delay: 1.65s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(4){ -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } #homepage-hero-slideshow .figure-title{ -webkit-animation: fadeIn 2.5s cubic-bezier(0.25,0.1,0.25,1) both; animation-name: fadeIn; animation-duration: 2.5s; animation-timing-function: cubic-bezier(0.25,0.1,0.25,1); animation-fill-mode: both; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } @media screen and (min-height: 58em){ body.front #homepage-hero-slideshow .similar-articles{ padding: 3rem 0 5rem 0; } } @media screen and (min-height: 72em){ body.front #homepage-hero-slideshow .similar-articles{ padding: 5rem 0 7rem 0; } } } @media screen and (min-width: 68em){ body.front #homepage-hero-slideshow .hero-huge-callout{ max-width: 50rem; } div.hero-huge-callout div.font-size-xxl{ font-size: 3.25rem; } div.hero-huge-callout .ctas a{ font-size: 1.1rem; } body.front #homepage-hero-slideshow figure .figure-title{ margin-left: 8vw; } } @media screen and (min-width: 72em){ body.front #homepage-hero-slideshow .similar-articles{ margin-right: 8vw; } body.front #homepage-hero-slideshow .similar-articles:before{ right: -8vw; } } @media screen and (min-width: 85.5em){ body.front #homepage-hero-slideshow figure .figure-title{ margin-left: calc((100vw - 72rem) / 2); } body.front #homepage-hero-slideshow .similar-articles{ width: 22rem; } body.front #homepage-hero-slideshow .similar-articles p.font-size-md{ font-size: 1.5rem; } } @media screen and (min-width: 90em){ body.front #homepage-hero-slideshow .similar-articles{ margin-right: calc((100vw - 72rem) / 2); } body.front #homepage-hero-slideshow .similar-articles:before{ right: calc(-1 * ((100vw - 72rem) / 2)); } } @media screen and (min-width: 110em){ div.hero-huge-callout div.font-size-xxl{ font-size: 4rem; } div.hero-huge-callout p.lead-in{ font-size: 1.4rem; max-width: 28rem; } body.front #homepage-hero-slideshow .similar-articles{ margin-right: 15vw; } body.front #homepage-hero-slideshow .similar-articles:before{ right: -15vw; } }