DigiPen Institute of Technology

/* Custom Grid Layout Alterations */ .overlay.custom-overlay{ background-image: linear-gradient(45deg, rgba(32, 32, 32, 0.5), rgba(32, 32, 32, 0.5)); } 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 a.article-aside{ border-top: 2px solid #e6474a; display: flex; position: relative; height: 33.33%; overflow: hidden; width: 100%; } /* Article Content and Image Positioning */ .similar-articles .article-content { align-self: center; display: flex; position: absolute; justify-content: center; width: 100%; z-index: 2; } .similar-articles .article-content span{ opacity: 1; text-align: center; } .similar-articles .article-content span:first-of-type{ -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 .article-content span:nth-of-type(2){ display: none; } .similar-articles a.article-aside img{ bottom: 0; height: 100%; left: 0; object-fit: cover; position: absolute; width: 100%; -webkit-transition: transform 300ms ease; -moz-transition: transform 300ms ease; -ms-transition: transform 300ms ease; -o-transition: transform 300ms ease; transition: transform 300ms ease; } .similar-articles .article-overlay{ height: 100%; width: 100%; z-index: 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:nth-of-type(1) .article-overlay{ background-color:rgba(70,70,109,0.4); } .similar-articles .article-aside:nth-of-type(2) .article-overlay{ background-color:rgba(117,157,51,0.4); } .similar-articles .article-aside:nth-of-type(3) .article-overlay{ background-color:rgba(238,166,32,0.4); } /* Hover and Focus Effects */ .similar-articles a.article-aside:hover:nth-of-type(1) .article-overlay, .similar-articles a.article-aside:focus:nth-of-type(1) .article-overlay{ background-color: rgba(70,70,109,0.8); } .similar-articles a.article-aside:hover:nth-of-type(2) .article-overlay, .similar-articles a.article-aside:focus:nth-of-type(2) .article-overlay{ background-color: rgba(117,157,51,0.8); } .similar-articles a.article-aside:hover:nth-of-type(3) .article-overlay, .similar-articles a.article-aside:focus:nth-of-type(3) .article-overlay{ background-color: rgba(238,166,32,0.8); } .similar-articles a.article-aside:hover img, .similar-articles a.article-aside:focus img{ transform: scale(1.1); } /* Hero Callout Alterations */ body.front #homepage-hero-slideshow .hero-huge-callout{ display: block; margin: 0 auto; max-width: 40rem; padding: 0 1rem; right: 0; text-align: center; top: 60% !important; width: 100%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } /* Content Animations */ div.hero-huge-callout div.font-size-xxl{ animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; } div.hero-huge-callout p.lead-in{ animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } div.hero-huge-callout div.ctas{ animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation-delay: 1s; animation-delay: 1s; } @-webkit-keyframes animDown{ from { -webkit-transform: translate3d(0,-1rem,0); opacity: 0; transform: translate3d(0,-1rem,0); opacity: 0;} } @keyframes animDown{ from { -webkit-transform: translate3d(0,-1rem,0); transform: translate3d(0,-1rem,0); opacity: 0;} } /* Media Queries - Responsive Behavior */ @media screen and (min-width: 30em){ 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 a.article-aside{ width: 33.33%; height: 100%; border-left: 2px solid #e6474a; } .similar-articles a.article-aside:first-of-type{ border-left: none; } body.front #homepage-hero-slideshow .hero-huge-callout{ background-image: radial-gradient(rgba(32, 32, 32, 0.6), rgba(32, 32, 32, 0.5), rgba(32, 32, 32, 0), rgba(32, 32, 32, 0)); } } @media screen and (min-width: 54em){ body.front #homepage-hero-slideshow figure.focus-left .hero-slide-image img { -o-object-position: 35%; object-position: 35%; } body.front #homepage-hero-slideshow figure .hero-slide-image img{ width: 70%; 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; } .overlay.custom-overlay{ width: 70%; border-right: 2px solid #e6474a; background-image: linear-gradient(45deg, rgba(32, 32, 32, 0), rgba(32, 32, 32, 0.25), rgba(32, 32, 32, 0.4)); } body.front #homepage-hero-slideshow .hero-huge-callout{ top: 50% !important; right: 20vw; padding: 5rem 8rem; max-width: 43rem; } div.hero-huge-callout div.font-size-xxl{ font-size: 3rem; } div.hero-huge-callout p.lead-in{ font-size: 1.4rem; max-width: 22rem; margin-left: auto; margin-right: auto; } body.front #homepage-hero-slideshow .similar-articles{ width: 30%; height: 100%; flex-direction: column; bottom: 0; } .similar-articles a.article-aside{ width: 100%; height: 33.33%; border-top: 2px solid #e6474a; border-left: 0px; } .similar-articles a.article-aside:first-of-type{ border-top: none; } .similar-articles a.article-aside:hover .article-content span:nth-of-type(1), .similar-articles a.article-aside:focus .article-content span:nth-of-type(1){ opacity: 0; } .similar-articles a.article-aside:hover .article-content span:nth-of-type(2), .similar-articles a.article-aside:focus .article-content span:nth-of-type(2){ align-self: center; display: flex; position: absolute; max-width: 25rem; animation: animDown 0.5s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation: animDown 0.5s cubic-bezier(0.25,0.1,0.25,1) both; } /* Aside Button Styling */ .similar-articles .article-overlay{ background-color: rgba(32,32,32,0); } .similar-articles .article-aside span:nth-of-type(1){ border-radius: 3px; padding: 1rem; } .similar-articles .article-aside:nth-of-type(1) .article-overlay{ background-color:rgba(70,70,109,0.2); } .similar-articles .article-aside:nth-of-type(2) .article-overlay{ background-color:rgba(117,157,51,0.2); } .similar-articles .article-aside:nth-of-type(3) .article-overlay{ background-color:rgba(238,166,32,0.2); } .similar-articles .article-aside:nth-of-type(1) span:nth-of-type(1){ background-color: rgba(32,32,32,0.3); border: 2px solid rgba(70,70,109,1); } .similar-articles .article-aside:nth-of-type(2) span:nth-of-type(1){ background-color: rgba(32,32,32,0.3); border: 2px solid rgba(117,157,51,1); } .similar-articles .article-aside:nth-of-type(3) span:nth-of-type(1){ background-color: rgba(32,32,32,0.3); border: 2px solid rgba(238,166,32,1); } } @media screen and (min-width: 68em){ body.front #homepage-hero-slideshow .hero-huge-callout{ max-width: 47rem; } div.hero-huge-callout p.lead-in{ font-size: 1.5rem; line-height: 1.5; max-width: 32rem; } div.hero-huge-callout div.ctas a{ font-size: 1.1rem; } } @media screen and (min-width: 90em){ body.front #homepage-hero-slideshow figure .hero-slide-image img{ width: 66%; } .overlay.custom-overlay{ width: 66%; } body.front #homepage-hero-slideshow .similar-articles{ width: 34%; } body.front #homepage-hero-slideshow .hero-huge-callout{ max-width: 55rem; } div.hero-huge-callout div.font-size-xxl{ font-size: 3.25rem; } div.hero-huge-callout p.lead-in{ font-size: 1.6rem; } }