DigiPen Institute of Technology

body.front #homepage-hero-slideshow{ --callout-bg-color: var(--black); --overlay-bg-color: var(--black); --aside-bg-color: var(--green); } .overlay.custom-overlay { background: linear-gradient(var(--dir), rgba(var(--overlay-bg-color),0.2), rgba(var(--overlay-bg-color),0.3), rgba(var(--overlay-bg-color),0.5)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-animation: animate 2s both; animation: animate 2s both; -webkit-animation-timing-function: var(--animation-ease); animation-timing-function: var(--animation-ease); --animation-opacity: 0; } body.front #homepage-hero-slideshow div.ctas a{ padding: 1.2rem 1.6rem; text-shadow: 1px 1px 1px rgba(var(--black),0.4); } body.front #homepage-hero-slideshow .section-inset{ position: relative; height: 100%; margin: 0 auto; } body.front #homepage-hero-slideshow .view-content{ height: 69vh; min-height: 35rem; max-height: 35rem; } body.front #homepage-hero-slideshow .view-content .views-row{ height: 69vh; min-height: 35rem; max-height: 35rem; } body.front #homepage-hero-slideshow figure .hero-slide-image img{ height: 50vh; min-height: 19rem; max-height: 19rem; } body.front #homepage-hero-slideshow figure figcaption .figure-inner{ max-width: 100%; width: 100vw !important; } .similar-articles{ top: 100%; display: flex; flex-direction: column; position: absolute; height: 36.5vh; min-height: 20rem; max-height: 20rem; right: 0; width: 100%; } .similar-articles .article-aside{ display: flex; position: relative; height: 16%; overflow: hidden; width: 100%; background-size: cover; -o-background-position: 50% 50%; background-position: 50% 50%; -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(var(--aside-bg-color),0.5); } .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 .article-content { align-self: center; position: absolute; width: 100%; z-index: 2; } .similar-articles .article-content span{ opacity: 1; text-align: center; } .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:nth-of-type(2){ display: none; } .similar-articles .article-content div p span { -webkit-transform: translateY(3px); transform: translateY(3px); } /* Hover and Focus Effects */ .similar-articles .article-aside:nth-of-type(1){ -o-background-position: 50% 0%; background-position: 50% 0%; background-image:url(/sites/default/files/public/img/games/04-social/digipen-student-game-ascension-tw.jpg); } .similar-articles .article-aside:nth-of-type(2){ background-image:url(/sites/default/files/public/img/academics/04-social/digipen-student-game-metamorphos-tw.jpg); } .similar-articles .article-aside:nth-of-type(3){ background-image:url(/sites/default/files/public/img/games/04-social/digipen-student-game-ccp-tw.jpg); } .similar-articles .article-aside:nth-of-type(4){ background-image:url(/sites/default/files/public/img/academics/04-social/digipen-student-game-green-reaper-og.webp); } .similar-articles .article-aside:nth-of-type(5){ -o-background-position: 50% 25%; background-position: 50% 25%; background-image:url(/sites/default/files/public/img/games/04-social/digipen-student-game-aegis-tw.jpg); } .similar-articles .article-aside:nth-of-type(6){ -o-background-position: 50% 25%; background-position: 50% 25%; background-image:url(/sites/default/files/public/img/landing-pages/explore/04-social/digipen-students-during-club-fair-tw.jpg); } .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:hover .article-overlay, .similar-articles .article-aside:focus .article-overlay{ background-color:rgba(var(--aside-bg-color),1); } .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 .hero-huge-callout{ display: block; margin: 0 auto; top: 50% !important; width: 100%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } /* Media Queries - Responsive Behavior */ @media screen and (min-width: 30em){ .overlay.custom-overlay{ -webkit-backdrop-filter: none; backdrop-filter: none; } body.front #homepage-hero-slideshow figure.focus-right .hero-slide-image img { -o-object-position: 75%; object-position: 75%; } div.hero-huge-callout p.lead-in{ max-width: 26rem; } } @media screen and (min-width: 40em){ body.front #homepage-hero-slideshow .view-content{ height: 52vh; min-height: 32rem; max-height: 32rem; } body.front #homepage-hero-slideshow .view-content .views-row{ height: 52vh; min-height: 32rem; max-height: 32rem; } body.front #homepage-hero-slideshow figure .hero-slide-image img{ min-height: 25rem; max-height: 25rem; } body.front #homepage-hero-slideshow .similar-articles{ width: 100%; height: 30%; bottom: -30%; flex-direction: row; min-height: inherit; } .similar-articles .article-aside{ width: 33.33%; height: 100%; border-left: 1px solid #D1D3D5; } .similar-articles .article-aside:nth-of-type(1){ border-left: none; } .similar-articles span.hide-md{ display:none; } body.front #homepage-hero-slideshow .hero-huge-callout{ background-image: radial-gradient(rgba(var(--black),0.2), rgba(var(--black),0.1), rgba(var(--black),0), rgba(var(--black),0)); background-repeat: no-repeat; } div.hero-huge-callout div.font-size-xxl{ font-size: 2.25rem; } } @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: 2s; animation-delay: 2s; --animation-opacity: 0; } .overlay.custom-overlay{ background-image: linear-gradient(var(--dir), rgba(var(--overlay-bg-color),0.3), rgba(var(--overlay-bg-color),0), rgba(var(--overlay-bg-color),0.3), rgba(var(--overlay-bg-color),0.7), rgba(var(--overlay-bg-color),0)) } body.front #homepage-hero-slideshow .hero-huge-callout{ top: 45% !important; max-width: 45rem; } body.front #homepage-hero-slideshow .hero-huge-callout:before { content: ''; position: absolute; height: 120%; width: 100%; left: -8rem; top: -3rem; background: radial-gradient(rgba(var(--callout-bg-color),0.5), rgba(var(--callout-bg-color),0.3), rgba(var(--callout-bg-color),0), rgba(var(--callout-bg-color),0)); -webkit-animation: animate 2s both; animation: animate 2s both; -webkit-animation-timing-function: var(--animation-ease); animation-timing-function: var(--animation-ease); --animation-opacity: 0; } body.front #homepage-hero-slideshow figure.focus-right .hero-slide-image img { -webkit-transform: scale(1.25) translateX(-10%); transform: scale(1.25) translateX(-10%); } .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; } body.front #homepage-hero-slideshow figure .hero-slide-image img{ height: 65vh; min-height: 32rem; max-height: none; } body.front #homepage-hero-slideshow .view-content{ height: 65vh; min-height: 32rem; max-height: none; } body.front #homepage-hero-slideshow .view-content .views-row{ height: 65vh; min-height: 32rem; max-height: none; } div.hero-huge-callout div.heading, body.front #homepage-hero-slideshow figure .figure-title p{ max-width: none; } body.front #homepage-hero-slideshow .similar-articles{ width: 17rem; height: 100%; max-height: none; margin-right: 5vw; padding: 3rem 0 5rem 0; flex-direction: column; top: 0; align-items: stretch; justify-content: space-around; } .similar-articles .article-aside{ display: flex; justify-content: center; width: 100%; max-height: none; height: 15%; min-height: 3.5rem; border-radius: 5px; border: 0; box-shadow: 0 0 4px rgba(var(--red-orange),.15); } .similar-articles .article-content { justify-content: center; display: flex; } .similar-articles .article-aside .article-overlay{ height: 0%; } .similar-articles .article-aside:hover .article-overlay, .similar-articles .article-aside:focus .article-overlay{ height: 100%; } .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{ justify-content: 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.4s; animation-delay: 1.4s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(1){ -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(2){ -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(3){ -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(4){ -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(5){ -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(6){ -webkit-animation-delay: 2s; animation-delay: 2s; } @media screen and (min-height: 60em){ body.front #homepage-hero-slideshow .similar-articles{ padding: 5rem 0 7rem 0; } @media screen and (min-height: 72em){ body.front #homepage-hero-slideshow .similar-articles{ padding: 8rem 0 10rem 0; } } } @media screen and (min-width: 68em){ div.hero-huge-callout div.font-size-xxl{ font-size: 2.5rem; } div.hero-huge-callout p.lead-in{ max-width: 27rem; } 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; } } @media screen and (min-width: 85.5em){ body.front #homepage-hero-slideshow figure .figure-title{ margin-left: calc((100vw - 72rem) / 2); } } @media screen and (min-width: 90em){ div.hero-huge-callout div.font-size-xxl{ font-size: 3rem; } div.hero-huge-callout p.lead-in{ font-size: 1.3rem; } body.front #homepage-hero-slideshow .similar-articles{ width: 20%; max-width: 20rem; } 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; } }