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;
		font-weight: regular;
	}

	h3{
		margin-bottom: 10px;
		font-size: 18px;
		line-height: 1.2;
		letter-spacing: 1px;
		text-transform: uppercase;
		font-weight: bold;
	}

	p{
		font-size: 15px;
		line-height: 1.4;
		font-weight: 300;
		letter-spacing: .3px;
	}

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

	#primary-cta{
		padding-bottom: 160px;
		color: $white;
		background: $black;

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

	#customer-logos{
		position: relative;
		width: 100%;
		margin-top: -100px;
		padding: 60px 0;
		color: $white;

		>.container {
			z-index: 91;
		}

		p {
			display: inline-block;
			float: left;
			margin-right: 6%;
			padding-top: 30px;
		}

		#customer-logos-bg{
			z-index: 30;
			background: $black;
			background-size: 100%;
			@include skewY(-3deg);
			-webkit-backface-visibility: hidden;
		}
	}

	ul.customer-list{
		display: inline;
		width: 100%;
		text-align: justify;

		li{
			display: inline-block;
			width: 80px;
			height: 80px;
			margin-right: 6%;
			text-indent: 100%;
	    white-space: nowrap;
	    overflow: hidden;
		}

		#nike {
			background: transparent image-url("customer-logos/nike.svg") center no-repeat;
			background-size: 100%;
		}

		#hbo {
			background: transparent image-url("customer-logos/hbo.svg") center no-repeat;
			background-size: 80%;
		}

		#target {
			background: transparent image-url("customer-logos/target.svg") center no-repeat;
			background-size: 60%;
		}

		#capital-one {
			background: transparent image-url("customer-logos/capital-one.svg") center no-repeat;
			background-size: 100%;
		}

		#home-depot {
			background: transparent image-url("customer-logos/home-depot.svg") center no-repeat;
			background-size: 70%;
		}

		#hotels-dot-com {
			background: transparent image-url("customer-logos/hotels-dot-com.svg") center no-repeat;
			background-size: 100%;
		}
	}

	#feature-overview{
		position: relative;
		padding: 120px 0;
		border-bottom: 2px solid #E6E7E8;
		z-index: 80;
	}

	.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{

		p.lead{
			max-width: 30em;
		}
	}

	.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-write{
		position: relative;
		padding: 180px 0 200px;
		margin-top: -80px;


		>.container {
			z-index: 71;
		}

		#feature-write-bg{
			background: $white;
			background-size: 570px;
			z-index: 70;
			@include skewY(3deg);
			-webkit-backface-visibility: hidden;
			overflow: hidden;

			.feature-image {
				position: absolute;
				bottom: 0;
				right:10%;
				width: 560px;
				@include skewY(-3deg);
			}
		}
	}

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

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

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

		#feature-plan-bg{
			background: $purple;
			z-index: 60;
			@include skewY(-3deg);
			-webkit-backface-visibility: hidden;
		}
	}

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

		>.container{
			z-index: 51;
		}

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

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

		#feature-create-img{
			position: absolute;
			width: 420px;
			top: 200px;
			right: 100px;
			@include skewY(-3deg);
		}
	}

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

		>.container{
			z-index: 41;
		}

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

		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%;
		}
	}

	#latest-announcement{
		position: relative;
		margin-top: -80px;
		padding: 240px 0 160px;
		color: $white;
		text-align: center;

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

	#latest-announcement-bg{
		@include skewY(-3deg);
		z-index: 30;
		background: $purple image-url("latest-announce-bg.svg") bottom left no-repeat;
		background-size: cover;
	}

	#enterprise-intro{
		position: relative;
		padding: 220px 0 180px;
		margin-top: -80px;
		color: #fff;

		>.container{
			z-index: 31;
		}

		h2{
			position: relative;
			left: -5px;
			margin-bottom: 20px;
			background: image-url("terraform-enterprise-logo.svg") top left no-repeat;
			background-size: 320px;
			overflow: hidden;

			span {margin-left: -200%}
		}

		.lead{
			max-width: 30em;
			margin-bottom: 40px;
		}

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

	@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) {

	}

	@media (min-width: 1200px) {

	}


	@media (max-width: 1200px) {

	}

	@media (min-width: 992px) and (max-width:1200px) {

	}

	@media (min-width: 768px) and (max-width:992px) {

	}

	@media (max-width: 992px) {


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

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

	@media (max-width: 768px) {
		h2{
			margin-bottom: 40px;
			font-size: 32px;
			line-height: 32px;
			letter-spacing: 2px;
			text-transform: uppercase;
			font-weight: regular;
		}

		h3{
			margin-bottom: 10px;
			font-size: 16px;
			line-height: 1.2;
			letter-spacing: 1px;
			text-transform: uppercase;
			font-weight: bold;
		}

		p{
			font-size: 14px;
			line-height: 1.4;
			font-weight: 300;
			letter-spacing: .3px;
			margin-bottom: 20px;
		}

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

		#primary-cta{
			padding-bottom: 100px;
		}

		#customer-logos{
			padding: 40px 0;

			p {
				display: block;
				position: relative;
				width: 100%;
				text-align: center;
			}

			#customer-logos-bg{
				z-index: 30;
				background: $black;
				background-size: 100%;
				@include skewY(-3deg);
				-webkit-backface-visibility: hidden;
			}

			ul.customer-list{
				 display: block;
				 position: relative;
				 width: 100%;
				 margin: 0 auto;
				 padding: 0;
				 text-align: center;

				li{
					display: inline-block;
					position: relative;
					width: 40px;
					height: 40px;
					margin: 0 2%;
					text-indent: 100%;
			    white-space: nowrap;
			    overflow: hidden;
				}
			}
		}

		#demos{

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

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


	@media (max-width: 480px) {

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

	}


	@media (max-width: 320px) {

	}
}