DigiPen Institute of Technology

.homepage-hero-slideshow{ --bg-overlay-color: var(--true-black); --callout-bg-color: var(--red); } .overlay.custom-overlay{ background-image: linear-gradient(0deg, rgba(var(--bg-overlay-color), 0.6), rgba(var(--bg-overlay-color), 0.4), rgba(var(--bg-overlay-color), 0.2)); backdrop-filter: blur(2px); } body.front #homepage-hero-slideshow figure.focus-right .hero-slide-image img { -o-object-position: 60%; object-position: 60%; } div.hero-huge-callout{ display: flex; flex-direction: column; justify-content: center; width: 100%; top: 50% !important; background-image: radial-gradient(rgba(var(--black), 0.3), rgba(var(--black), 0.1), rgba(var(--black), 0), rgba(var(--black), 0)); -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); max-width: 21rem; --easy-ease: cubic-bezier(0.135, 0.40, 0.54, 1.000); } div.hero-huge-callout .heading{ font-size: 2.25rem; } div.hero-huge-callout p.lead-in{ max-width: 19rem; } body.front #homepage-hero-slideshow .section-inset{ position: relative; height: 100%; } /* 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, #fafafa, #f1f3f5); -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; } .similar-articles .article-aside img{ max-width: 3.25rem; -webkit-transition: filter 220ms ease; -moz-transition: filter 220ms ease; -ms-transition: filter 220ms ease; -o-transition: filter 220ms ease; transition: filter 220ms ease; } /* 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 .event-details { display: flex; margin-left: 0.5rem; flex-direction: column; } .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 .article-aside:hover .article-overlay, .similar-articles .article-aside:focus .article-overlay{ background-color:rgba(201,36,66,1); } .similar-articles .article-aside:hover img, .similar-articles .article-aside:focus img{ filter:invert(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; text-align: left; top: 50% !important; width: 100%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } /* Content Animations */ @media screen and (min-width: 30em){ div.hero-huge-callout{ max-width: 22rem; } div.hero-huge-callout p.lead-in{ max-width: none; } } @media screen and (min-width: 40em){ .overlay.custom-overlay{ backdrop-filter: none; } body.front #homepage-hero-slideshow figure.focus-right .hero-slide-image img { -o-object-position: 10% 30%; object-position: 10% 30%; } div.hero-huge-callout .heading{ font-size: 2.75rem; } div.hero-huge-callout .lead-in{ line-height: 1.6; } 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 #D1D3D5; justify-content: center; } .similar-articles .article-aside:nth-of-type(1){ border-left: none; } } @media screen and (min-width: 54em){ .overlay.custom-overlay{ background-image: none; } div.hero-huge-callout{ max-width: 30rem; padding: 4rem; margin-left: -4rem; background-image: radial-gradient( rgba(var(--callout-bg-color),0.8),rgba(var(--callout-bg-color),0.5), rgba(var(--callout-bg-color),0), rgba(var(--callout-bg-color),0)); } body.front #homepage-hero-slideshow figure.focus-right .hero-slide-image img { -o-object-position: 30% 30%; object-position: 30% 30%; } .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: 64vh; min-height: 32rem; } 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 .similar-articles{ width: 15rem; height: 100%; padding: 3rem 0 5rem 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: 6rem; border-radius: 5px; border: 0; box-shadow: 0 0 4px rgba(218,85,48,.15); } .similar-articles .article-aside img{ max-width: 5rem; position: relative; right: 5px; } .similar-articles .article-content { justify-content: flex-start; } .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(45deg, rgba(201,36,66,1), rgba(230,71,74,1)); } .similar-articles .article-aside:hover .article-content div, .similar-articles .article-aside:focus .article-content div{ opacity: 0; } .similar-articles .article-aside:hover img, .similar-articles .article-aside:focus img{ filter: none; } .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.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; } @media screen and (min-height: 62em){ body.front #homepage-hero-slideshow .similar-articles{ padding: 7rem 0 9rem 0; } } @media screen and (min-height: 72em){ body.front #homepage-hero-slideshow .similar-articles{ padding: 10rem 0 12rem 0; } } } @media screen and (min-width: 68em){ div.hero-huge-callout{ max-width: 33rem; } div.hero-huge-callout .heading{ font-size: 3.25rem; } body.front #homepage-hero-slideshow .similar-articles{ width: 16rem; } } @media screen and (min-width: 85.5em){ body.front #homepage-hero-slideshow .similar-articles{ margin-right: calc((100vw - 72rem)/2); } } }