DigiPen Institute of Technology

.homepage-hero-slideshow{ --callout-bg-color: var(--true-black); } .overlay.custom-overlay { background:radial-gradient(rgba(var(--true-black),0.8), rgba(var(--true-black),0.5), rgba(var(--true-black),0.15), rgba(var(--true-black),0.5)); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); } #homepage-hero-slideshow div.ctas a.extended-background-gradient-red{ background-image: linear-gradient(var(--dir), rgba(186, 17, 36, var(--alpha1)) var(--pos1), rgba(231, 27, 43, var(--alpha2)) var(--pos2), rgba(var(--gradient-color-hover), var(--alpha3)) var(--pos4)); } #homepage-hero-slideshow div.ctas a.button-clear{ border-width: 0px; padding:0.25rem 0.25rem 0.25rem 0.5rem; letter-spacing: 0.2rem; justify-content: center; } #homepage-hero-slideshow div.ctas a.button-clear::after{ content: ''; width: 100%; height: 2px; position: absolute; display: flex; bottom: 0; max-width: 10rem; background-color: rgba(var(--light-red),1); -webkit-animation-name: animateWidthRevert; animation-name: animateWidthRevert; animation-duration: 500ms; animation-timing-function: var(--easy-ease); animation-fill-mode: both; --animate-width-start: 0rem; --animate-width-end: 10rem; } #homepage-hero-slideshow div.ctas a.button-clear:hover, #homepage-hero-slideshow div.ctas a.button-clear:focus{ background-color: transparent !important; } #homepage-hero-slideshow div.ctas a.button-clear:hover::after, #homepage-hero-slideshow div.ctas a.button-clear:focus::after{ -webkit-animation-name: animateWidth; animation-name: animateWidth; animation-duration: 500ms; animation-timing-function: var(--easy-ease); animation-fill-mode: both; } /* Hero Callout Alterations */ #homepage-hero-slideshow .hero-huge-callout{ display:block; position:relative; margin:0 auto; top:50% !important; width:100%; max-width:17rem; -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{ background-image: linear-gradient(45deg, rgba(var(--black),0.5), rgba(var(--black),0.2), rgba(var(--black),0), rgba(var(--black),0.3)); -webkit-backdrop-filter:none; backdrop-filter:none; } #homepage-hero-slideshow figure.focus-right.custom-focus .hero-slide-image img { -o-object-position:55% 35%; object-position:55% 35%; } #homepage-hero-slideshow .hero-huge-callout:before{ content: ''; position:absolute; width: 200%; height: 200%; top: -50%; left: -50%; background-image: radial-gradient(rgba(var(--callout-bg-color),0.3), rgba(var(--callout-bg-color),0.15), 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; } #homepage-hero-slideshow .hero-huge-callout{ position:absolute; max-width:28rem; } #homepage-hero-slideshow .subhead{ max-width: 16rem; } #homepage-hero-slideshow .lead-in{ max-width: 28rem; } #homepage-hero-slideshow div.ctas a.button-clear{ font-size: 1.1rem; letter-spacing: 0.1rem; background-image: linear-gradient(var(--dir), rgba(186, 17, 36, var(--alpha1)) 0%, rgba(231, 27, 43, var(--alpha2)) 50%, rgba(var(--light-red-tint), var(--alpha3)) 100%); background-size: 200% auto; background-position: left; border: 0; position: relative; padding: 0.75rem 1.25rem; } #homepage-hero-slideshow div.ctas a.button-clear:after{ content: none; } #homepage-hero-slideshow div.ctas a.button-clear:hover, #homepage-hero-slideshow div.ctas a.button-clear:focus{ background-position: right center; background-color: #fff; } } @media screen and (min-width:42em){ #homepage-hero-slideshow .hero-huge-callout{ max-width: 29rem; } #homepage-hero-slideshow .heading{ font-size: 2rem; } #homepage-hero-slideshow .subhead{ max-width: none; } } @media screen and (min-width:54em){ #homepage-hero-slideshow figure .figure-title{ -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.2s; animation-delay:1.2s; --animation-opacity:0; } #homepage-hero-slideshow .hero-huge-callout{ top:45% !important; max-width: 35rem; } #homepage-hero-slideshow .heading{ font-size: 2.5rem; } #homepage-hero-slideshow .lead-in{ max-width:25rem; } #homepage-hero-slideshow div.ctas a.button{ padding: 1rem 1.5rem; } #homepage-hero-slideshow div.ctas a.button-clear{ padding: 1.09rem 1.5rem; } } @media screen and (min-width:68em){ #homepage-hero-slideshow .hero-huge-callout:before{ width: 175%; height: 250%; left: -50%; } .overlay.custom-overlay{ background-image: linear-gradient(45deg, rgba(var(--black),0.6), rgba(var(--black),0.4), rgba(var(--black),0.2), rgba(var(--black),0.2), rgba(var(--black),0), rgba(var(--black),0.2)); } #homepage-hero-slideshow figure.custom-focus-right .hero-slide-image img { -o-object-position:60% 20%; object-position:60% 20%; } #homepage-hero-slideshow .heading{ font-size: 3rem; } #homepage-hero-slideshow .subhead{ font-size: 1.5rem; } #homepage-hero-slideshow .lead-in{ font-size: 1.2rem; max-width: 27rem; } } @-webkit-keyframes animateWidth { from { max-width: var(--animate-width-start); } to { max-width: var(--animate-width-end); } } @-webkit-keyframes animateWidthRevert { to { max-width: var(--animate-width-start); } from { max-width: var(--animate-width-end); } } @keyframes animateWidth { from { max-width: var(--animate-width-start); } to { max-width: var(--animate-width-end); } } @keyframes animateWidthRevert { to { width: var(--animate-width-start); } from { width: var(--animate-width-end); } }