terraform/website/source/assets/stylesheets/_home.scss

//
// Home
// --------------------------------------------------

body.page-home {

	h2{
		margin-bottom: 40px;
		font-size: 42px;
		line-height: 42px;
		letter-spacing: 2px;
		text-transform: uppercase;
		@include lato-light();
	}

	h3{
		margin-bottom: .3em;
		font-size: 18px;
		line-height: 1.2;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	p{
		font-size: 16px;
		line-height: 1.5em;
		font-weight: 300;
		letter-spacing: .5px;
	}

	p.lead{
		font-size: 24px;
	}

	#customer-logos {
		background: $black;
	}

	ul.customer-list{
		li {
			display: inline;
		}
	}

	.feature{
		padding: 240px 0;
		@include lato-light();

		.lead{
			max-width: 30em;
		}

		.icn{
			display: block;
			width: 186px;
			height: 272px;
			margin: 0 auto;
			background-position: center 0;
			background-repeat: no-repeat;
		}

	}

	.skew-item{
		>.container{
			position: relative;
			top: 0;
			z-index: 11;
		}

		.feature-skew{
			position: absolute;
			top: 0px;
			bottom: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
		}
	}

	#feature-overview{
		padding: 120px 0;
		border-bottom: 2px solid #E6E7E8;
	}

	.feature-card {
		height: 210px;
		border: 2px solid #E6E7E8;
		padding:20px;
		font-size: 18px;

		h3{
			margin:0;
			padding: 0;
			color: $purple;
			font-size: 16px;
			font-weight: 400;
			text-transform: uppercase;
		}

		p{
			font-weight: 400;
			text-transform: uppercase;
			letter-spacing: 1px;
		}

		&.feature-card-write{
			background: image-url("feature-card-write.svg") 20px 120px no-repeat;
			background-size: 289px 55px;
		}

		&.feature-card-plan{
			background: image-url("feature-card-plan.svg") 0px 137px no-repeat;
			background-size: 360px 21px;
		}

		&.feature-card-create{
			background: image-url("feature-card-create.svg") 0px 105px no-repeat;
			background-size: 275px 75px;
		}
	}

	#feature-write{
		position: relative;
		padding: 180px 0 200px;
		margin-top: -80px;

		>.container {
			z-index: 21;
		}

		#feature-write-bg{
			border-top: 2px solid white;
			border-bottom: 2px solid $purple;
			background: image-url("feature-write-bg.svg") 85% 100% no-repeat;
			background-size: 570px;
			z-index: 20;
		}
	}

	#feature-plan{
		position: relative;
		color: $white;
		background-size: 80%;
		position: relative;
		padding: 180px 0 180px;
		margin-top: -80px;

		>.container {
			z-index: 21;
			background: image-url("feature-plan-bg.svg") 0% 45% no-repeat;
			background-size: 100%;
		}

		p.lead {
			margin-bottom: 400px;
		}

		#feature-plan-bg{
			background: $purple;
			border-top: 2px solid white;
			border-bottom: 2px solid $purple;
			z-index: 20;
			@include skewY(3deg);
		}
	}

	#feature-create{
		position: relative;
		margin-top: -80px;
		padding: 240px 0 300px;

		>.container{
			z-index: 21;
		}

		#feature-create-bg{
			@include skewY(3deg);
			z-index: 20;
		}

	}

	#demos{
		position: relative;
		padding: 180px 0 60px;
		margin-top: -80px;

		>.container{
			z-index: 31;
		}

		#demo-bg{
			background-color: #E6E7E8;
			@include skewY(-3deg);
			z-index: 30;
		}

		h2{
			text-align: center;
		}

		p {
			margin-bottom: 20px;
		}

		.terminals{
			margin-bottom: 80px;

			.terminal-item{
				margin-bottom: 80px;

				&.last{
					border-bottom: none;
				}
				>header{
					.left{
						span.icn{
							display: inline-block;
							width: 83px;
							height: 74px;
						}
					}

					.right{
						padding-left: 25px;
					}
				}

				.terminal{
					border: 2px solid #1e1e1e;
					background: $black;
					//border-radius: 4px;

					header{
						position: relative;
						text-align: center;
						padding: 3px;
						//background-color: #1e1e1e;
						border-bottom: 2px solid #1e1e1e;

						h4{
							font-size: 14px;
							letter-spacing: 1px;
							color: white;
							font-family: $font-family-lato;
							font-weight: $font-weight-lato-xb;
						}

						ul.shell-dots{
							position: absolute;
							top: 10px;
							left: 8px;
							padding-left: 0;

							li{
								&.d1{
									background-color: #4a08a7;
								}
								&.d2{
									background-color: #6517cf;
								}
								&.d3{
									background-color: #7b29ee;
								}

								display: inline-block;
								width: 12px;
								height: 12px;
								border-radius: 6px;
								margin-left: 6px;
							}
						}
					}

					.terminal-window{
						min-height: 140px;
						padding: 20px;
						font-size: 15px;
						font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
						color: $white;
						background-color: transparent;
						overflow:auto;
						font-weight: 500;
						-webkit-font-smoothing: subpixel-antialiased;

						.txt-spe {
							color: lighten($blue, 5%);
							font-weight: 600;
						}

						.txt-var {
							color: lighten($purple, 8%);
							font-weight: 600;
						}

						.txt-str {
							color: lighten($green, 2%);
						}

						.txt-int {
							color: lighten($orange, 2%);
							font-weight: 600;
						}

						p{
							margin-bottom: 2px;
							white-space: pre-wrap;
						}
						.cursor {
							background-color: lighten($purple, 5%);
						}
					}
				}

				.feature-bullets{
					list-style-type: none;
					padding-left: 35px;

					li{
						padding: 5px 0 5px 45px;
					}
				}
			}
		}
	}

	.cta {
		text-align: center;

		.btn {
			position: relative;
			margin: 0 50%;
		}
	}

	#announcement{
		position: relative;
		margin-top: -80px;
		padding: 180px 220px;
		color: $white;
		text-align: center;

		>.container {
			z-index: 21;
		}
	}

	#announcement-bg{
		background-color: $purple;
		@include skewY(3deg);
		z-index: 20;
	}

	#enterprise-callout {
		position: relative;
		padding: 180px 220px;
		margin-top: -80px;
		color: #fff;
		background-color: #000;

		>.container {
			z-index: 31;
		}

		.lead {
			max-width: 30em;
		}

		#enterprise-callout-bg {
			background: #000 image-url("enterprise-callout-bg.svg") bottom right no-repeat;
			background-size: cover;
			@include skewY(3deg);
			z-index: 30;
		}
	}

	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
		#demos{
			.terminals{
				.terminal-item{
					.feature-bullets{
						li{
							background-size: 12px 12px;
						}
					}
				}
			}
		}
	}


	@media (min-width: 1500px) {

		#feature-auto{
			padding: 270px 0 400px;
		}

		#feature-iterate{
			margin-top: -180px;
			padding: 300px 0 410px;
		}

		#feature-clone{
			margin-top: -180px;
			padding: 270px 0 430px;
		}

		#demos{
			margin-top: -180px;
			padding-top: 240px;
		}
	}

	@media (min-width: 1200px) {
		#feature-auto{
			h2{
				font-size: 41px;
			}
			.terminal-text{
				background: black;
				color: white;
				line-height: 88px;
				text-align: center;
				margin: 60px 20px 0;
				font-size: 32px;
			}
		}
	}


	@media (max-width: 1200px) {
		#feature-iterate{
			h2{
				font-size: 40px;
			}

			.it-icon{
				margin-top: 52px;
			}

			.t-block{
				width: 73px;
				height: 73px;
				margin-right: 20px;
			}
		}
	}

	@media (min-width: 992px) and (max-width:1200px) {
		#cta a {
			margin-top: 15px;
			font-size: 18px;
		}
		#feature-clone{
			.clone-icon{
				padding-left: 0 !important;
			}
		}
	}

	@media (min-width: 768px) and (max-width:992px) {
		#cta a {
			margin-top: 10px;
		}
	}

	@media (max-width: 992px) {

		.feature{
			h2,p{
				text-align: center !important;
				padding-left: 0 !important;
			}
		}

		#feature-iterate{
			.it-icon{
				width: 372px;
				margin: 0 auto 40px;
				padding-left: 0 !important;
			}
		}


		#feature-clone{
			.clone-icon{
				width: 382px;
				margin: 40px auto 0;
				padding-left: 0 !important;
			}
		}

		#feature-auto{

			h2{
				font-size: 43px
			}

			p{
				text-align: right;
				padding-left: 100px;
			}

			.terminal-text{
				background: black;
				color: white;
				line-height: 88px;
				text-align: center;
				margin: 60px 20px 0;
				font-size: 32px;
			}
		}

		#demos{
			.terminals{
				.terminal-item{
					>header{
						.left{
							span.icn{
							}
						}

						.right{
							padding-left: 54px;
						}
					}
				}
			}
		}
	}

	@media (max-width: 768px) {

		.feature{
			h2,p{
				text-align: center;
			}
		}

		#demos{
			.explantion {
				margin: 40px 0 60px 0;
			}

			.terminals{
				.terminal-item{
					>header{
						.left{
							span.icn{
								padding-bottom: 15px;
							}
						}

						.right{
							padding-left: 15px;
						}
					}
				}
			}
		}

		#cta{
			.intro{
				text-align: center;
				p{
					text-align: center;
					margin-bottom: 15px;
				}
			}
		}
	}


	@media (max-width: 480px) {

		#demos .explantion {
			margin: 40px 0 60px 0;
		}

		#feature-auto .terminal-text {
			font-size: 24px;
		}

		.feature{
			h2{
				text-align: center;
				font-size: 28px !important;
				line-height: 34px;
				overflow: hidden;
			}
			p{
				text-align: center !important;
				padding: 0 !important;
			}
		}

		#features{
			text-align: center;
		}
	}


	@media (max-width: 320px) {


		#feature-iterate{
			margin-top: -80px;
			padding: 280px 0 360px;
			color: white;
			background: #fff image-url("feature-iterate-bg.png") center top no-repeat;
			border-top: 2px solid white;
			border-bottom: 2px solid $purple;
			background-size: cover;
			@include skewY(3deg);

			>.container{
				@include skewY(-3deg);
			}

			.it-icon{
				width: 245px;
				margin: 0 auto 40px 45px;
				padding-left: 0 !important;
			}

			.t-block{
				background-color: rgb(255, 255, 255);
				width: 40px;
				height: 40px;
				@include skewY(26deg);
				float: left;
				margin-right: 15px;
			}
		}

		#feature-clone{
			.clone-icon{
				width: 290px;
				margin: 40px auto 0;
				padding-left: 45px !important;
			}

			.c-group{
				&.cg2{
					opacity: .7;
				}

				&.cg3{
					opacity: .5;
				}

				.c-col{

					&.c1{
						padding-top: 8px;
					}

					&.c3{
						padding-top: 28px;
					}

					.c-block{
						background-color: white;
						width: 15px;
						height: 15px;
						@include skewY(30deg);
						margin: 3px 3px 0 0;
					}
				}
			}
		}

		#demos .explantion{
			border-left: 8px solid transparent;
		}

		#cta a {
			font-size: 14px;
			font-weight: 400;
		}
	}
}