style.scss

@import url('https://fonts.googleapis.com/css?family=Quicksand:300,500');


/*
TODO:
match ICV colour scheme
*/

$orig_bg: #333;
$orig_txt: #fff;
$orig_btn: #ED6565;


// $bg: #f7f7f7;
// $hilight: #51ab75;
// $text: #545454;
// $dk_red: #ED6565;

// $main-max-width: 644px;
// $main-margin: 0 auto;
// $main-padding: 8px;


// VASS styles
$bg: #d7f0f6;
$bg: #ffffff;
$hilight: #00a4ca;
$text: #333333;
$dk_red: #ED6565;

$main-max-width: 644px;
$main-margin: 0;
$main-padding: 2rem 8px;

html{
	margin: 0;
	padding: 0;
	body{
		margin: 0;
		padding: 0;
		-webkit-font-smoothing: antialiased;
  		-moz-osx-font-smoothing: grayscale;
		background-color: $bg;
		color: $text;
		font-family: 'Quicksand', sans-serif;
		main{
			max-width: $main-max-width;
			height: auto;
			padding: $main-padding;
			margin: $main-margin;
			img.f_left{
				float: left;
				padding-right: 8px;
			}
			img.f_right{
				float: right;
				padding-left: 8px;
			}
			h1{
				font-weight: 300;
				font-size: 24px;
				margin: 0 0 8px;
			}
			p{
				font-size: 14px;
				margin-bottom: 0;
				&.intro{
					margin-bottom: 8px
				}
				&.submitted{
					font-size: 20px;
					font-weight: 300;
					display: none;
					&.show{
						display: block;
					}
				}
				&.failed{
					display: none;
					color: $dk_red;
				}
			}
			header, .what_info{
				max-height: 200px;
				overflow: hidden;
				transition: max-height 0.2s;
				&.hidden{
					max-height:0px;
				}
			}
			.what_info{
				margin-top:0;
			}
			form{
				//max-height: 60px;
				overflow: hidden;
				label{
					display: block;
					width: 100%;
					height: 30px;
					margin-top: 14px;
					font-size: 18px;
					font-weight: 300;
					position: relative;
					perspective: 100px;
    				perspective-origin: left;
					span.label{
						position: absolute;
						transition: transform 0.1s;	
						transform: translate3d(0,0,0);					
					}
					span.label.focus{
						transition: transform 0.1s;	
						transform: translate3d(0,-100%,-50px);
					}
					&.checkbox{
						position: relative;
						margin-left:20px;
						font-size: 1rem;
						width: calc(100% - 20px);
						line-height: 30px;
						input{
							margin-left: -18px;
						}
					}
				}
				input[type="text"],
				input[type="email"],
				textarea{
					position: absolute;
					top: 0;
					left: 0;
					margin: 0;
					padding: 0;
					background-color: transparent;
					width: 100%;
					height: 30px;
					border: none;
					border-bottom: 1px solid $text;
					color: $text;
					font-family: 'Quicksand', sans-serif;
					font-size: 18px;
					font-weight: 300;
					outline: none;
					background: url('./pen.svg') no-repeat right 5px;
					&.error{
						border-bottom: 1px solid $dk_red;
					}
				}
				textarea{
					transition: height .2s;
					position: relative;
					border-top: 1px solid $text;
					font-size: 14px;
					font-weight: 500;
					padding: 5px 0;
					height: 21px;
					&.error{
						border-top: 1px solid $dk_red;
						top:0;
					}
				}

				textarea:focus{
					height: 200px;
				}
				button{
					position: relative;
					z-index: 10;
					transition: background 0.2s;
					background: transparent;
					border-radius: 8px;
					border: 1px solid $hilight;
					color: $text;
					font-family: 'Quicksand', sans-serif;
					font-size: 18px;
					font-weight: 300;
					margin-top: 8px;
					padding: 2px 14px;
				}
				button:hover{
					color: #fff;
					background-color: $hilight;
				}
				fieldset{
					margin: 0;
					padding: 0;
					border: none;
				}
				.error{
					color: $dk_red;
					font-size: 0.8rem;
					position: relative;
					margin-top: 0;
					top: 30px;
				}
				#what-error{
					top:0;
					height:10px;
				}
			}
			.light{
				font-weight: 300;
			}
		}
	}
}