@import "setting";
// @import "edge/helpers";
@import "../../../assets/sass/edge/no-output";

// COLOR
$hero-bg    : #EFEDDF;
$feature-bg : #E4E3D5;

.block-hero {
	position   : relative;
	background : $hero-bg;
	overflow   : hidden;

	.logo {
		position   : relative;
		top        : 20%;
		max-height : em(300px);

		@include small {
			min-height : 0;
		}
	}

	.logo-letter,
	.logo-shape {
		@extend %transition;
		opacity : 0.6;
		&:hover {
			opacity : 1;
		}
	}

	.pitch-intro {
		padding : em(20px 10px 20px);
		z-index : 2;

		@include small {
			padding-top: 0;
		}
		
		h1, h2 {
			font-family : $body-font-family;
			font-weight : 300;
		}

		h1 {
			font-size     : em(56px);
			margin-bottom : em(20px, 56px);
		}

		h2 {
			font-size     : em(30px);
			margin-bottom : em(20px, 30px);
		}

		code {
			background : white;
			font-size  : em(20px);
			padding    : em(5px 10px);
			border     : 1px solid rgba(black, 0.1);
			margin-bottom : em(20px, 20px);
		}

		.hero-button {
			@include button(#1D7886);
			text-transform : uppercase;
			font-size      : em(20px);
		}

		&.has-logo {
			background : $hero-bg url('../img/logo/edge-logo-transparent.svg') center right no-repeat;
			background-size: auto 125%;
			@include small {
				background: none;
			}
		}
	}

	.ruby-install {
		margin-top: 1.29em;
		@include small {
			margin-top: 0;
		}
	}

	@include small {
		font-size: 12px;

		background : $hero-bg url('../img/logo/edge-logo-transparent.svg') center right no-repeat;
		background-size: auto 125%;
	}
}

@mixin feature-button($button-color: $main-color) {
	border-top: 2px solid $button-color;
	&:hover {
		background: $button-color;
	}
} 

.block-feature {
	background : $feature-bg;
	padding    : em(20px 10px 20px);
	margin-bottom: em(15px);
	
	.feature-button {
		@extend %transition;
		display  : block;
		padding  : em(20px 0);
		color    : inherit;
		text-align : center;
		&:hover {
			color: white;
		}
		&:active {
			@include box-shadow(
				em( inset 1px 1px 12px rgba(black, 0.1) ),
				em( inset -1px -1px 12px rgba(black, 0.1) )
			);
		}
	}

	.feature-list {
		> li {
			margin-bottom : em(15px);

			&:nth-child(1) {
				.feature-button {
					@include feature-button($main-color);
				}
			}
			&:nth-child(2) {
				.feature-button {
					@include feature-button($sub-color);
				}
			}
			&:nth-child(3) {
				.feature-button {
					@include feature-button($alert-color);
				}
			}
			&:nth-child(4) {
				.feature-button {
					@include feature-button($success-color);
				}
			}
		}
	}

	.feature-item {
		position         : relative;
		background-color : white;
		@include box-shadow(em(0 1px 2px rgba(black, 0.2) ) );
	}
	
	.feature-description,
	.feature-title {
		text-align: center;
	}

	.feature-description {
		padding: em(0 15px 15px);
	}

	.feature-title {
		padding   : em(15px, 25px);
		font-size : em(25px);
	}
}

#footer {
	background: #3F4944;
	color: #BBB;
	padding: em(40px 10px 20px);

	.footer-nav-title {
		margin-bottom  : em(10px, 18px);
	}

	.footer-nav {
		a {
			padding-bottom: em(8px);
			color: inherit;
		}
	}

	.copyright {
		text-align: center;
		padding: em(20px 0);
	}
}

.demo-grid {
	p {
		text-align : center;
		margin     : 0;
	}
	.column,
	.columns {
		p {
			margin-bottom  : em(15px);
			padding-top    : em(10px);
			padding-bottom : em(10px);
			background     : em(#eee);
			text-align     : center;
		}

		.column,
		.columns {
			p {
				background    : #ddd;
			}
			
			.column,
			.columns {
				p {
					background    : #ccc;
				}
		 	}
		}
	}
}

.demo-block {
	[class*="block-grid"] {
		li {
			margin-bottom  : 15px;
			padding-top    : 10px;
			padding-bottom : 10px;
			background     : #eee;
			text-align     : center;
		}
	}
}

.demo-em {
	@include box-shadow(em(inset 1px 0 1px rgba(black, 0.2) ) );
	padding : em(10px 15px 25px);
}

@include sprite-retina("icons", "ic");