Initial commit

2018-06-29 00:00:48 -07:00
commit f72587d80e
59 changed files with 10681 additions and 0 deletions
@@ -0,0 +1,152 @@
+/* Banner */
+
+	#banner {
+		-ms-flex-align: center;
+		-ms-flex-pack: center;
+		@include color(accent2);
+		@include vendor('align-items', 'center');
+		@include vendor('display', 'flex');
+		@include vendor('justify-content', 'center');
+		background-image: url('../../images/banner.jpg');
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: cover;
+		border-top: 0;
+		display: -ms-flexbox;
+		height: 35rem !important;
+		min-height: 35rem;
+		overflow: hidden;
+		position: relative;
+		text-align: center;
+		width: 100%;
+
+		> .inner {
+			@include vendor('transform', 'scale(1.0)');
+			@include vendor('transition', (
+				'opacity #{_duration(banner)} ease',
+				'transform #{_duration(banner)} ease'
+			));
+			opacity: 1;
+			position: relative;
+			z-index: 3;
+
+			> :last-child { 
+				margin-bottom: 0; 
+			}
+		}
+
+		h1 {
+			font-size: 4rem;
+			margin-bottom: 1rem;
+		}
+
+		p {
+			font-size: 1.5rem;
+		}
+
+		a {
+			color: _palette(accent2, fg);
+			text-decoration: none;
+
+			&:hover {
+				color: _palette(accent2, fg-bold);
+			}
+		}
+
+		video {
+			@include vendor('transform', 'translateX(50%) translateY(50%)');
+			bottom: 50%;
+			height: auto;
+			min-height: 100%;
+			min-width: 100%;
+			overflow: hidden;
+			position: absolute;
+			right: 50%;
+			width: auto;
+		}
+
+		&:before {
+			@include vendor('transition', 'opacity 3s ease');
+			@include vendor('transition-delay', '#{_duration(banner) * 1.25}');
+			background: _palette(accent2,bg);
+			content: '';
+			display: block;
+			height: 100%;
+			left: 0;
+			opacity: 0.45;
+			position: absolute;
+			top: 0;
+			width: 100%;
+			z-index: 1;
+		}
+
+		&:after {
+			background: linear-gradient(135deg, _palette(accent1,bg) 0%,_palette(accent2,bg) 74%);
+			content: ' ';
+			display: block;
+			height: 100%;
+			left: 0;
+			opacity: 0.6;
+			position: absolute;
+			top: 0;
+			webkit-linear-gradientidth: 100%;
+			width: 100%;
+			z-index: 1;
+		}
+
+		&.small {
+			height: 30vh !important;
+			min-height: 30vh;
+		}
+
+		@include breakpoint('<=large') {
+			video {
+				display: none;
+			}
+		}
+
+		@include breakpoint('<=small') {
+			height: auto !important;
+			min-height: 0;
+			padding: 4rem 2rem 4rem 2rem;
+
+			.inner {
+				width: 100%;
+			}
+
+			h1 {
+				font-size: 1.75rem;
+				margin-bottom: 0.5rem;
+				padding-bottom: 0;
+			}
+
+			p {
+				font-size: 1.25rem;
+			}
+
+			br {
+				display: none;
+			}
+
+			.button {
+				width: 100%;
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			p {
+				font-size: 1rem;
+			}
+		}
+
+		body.is-preload & {
+			.inner {
+				@include vendor('transform', 'scale(0.99)');
+				opacity: 0;
+			}
+
+			&:before {
+				opacity: 1;
+			}
+		}
+	}