front/less/style-pages.less

/************
 * body.landing
 ************/

body.landing {
	header {
		max-width: 800px;
		margin: auto;
		margin-top: 30px;
		margin-bottom: 20px;
		text-align: center;
		img.logo {
			width: 178px;
		}
		.title {
			color: #222;
			font-weight: 600;
			font-size: 50px;
			margin-bottom: 10px;
		}
		.tagline {
			color: #9F9F9F;
			font-weight: 600;
			font-size: 26px;
			margin-bottom: 10px;
		}
	}
	
	.container {
		margin-left: auto;
		margin-right: auto;
		max-width: 560px;
	}
	
	div.section-models {
		margin-bottom: 50px;
		.description {
			a {
				color: inherit;
			}
		}
		.github-repo {
			text-align: center;
			margin-top: 20px;
			margin-bottom: 40px;
		}
		div.title-section {
			color: #222;
			font-weight: 600;
			font-size: 34px;
			margin-bottom: 10px;
			text-align: center;
		}
		.quote {
			color: #9F9F9F;
			font-weight: 600;
			font-size: 24px;
			margin-bottom: 10px;
			border-left: 4px solid #ec8cff;
			padding: 2px 14px;
			max-width: 380px;
			margin: auto;
			margin-top: 48px;
		}
	}
	
	div.section-footer {
		.clearfix();
		background-color: #f7fbfb;
		padding-top: 80px;
		padding-bottom: 90px;
		.title {
			font-size: 14px;
			letter-spacing: 0.3px;
			text-transform: uppercase;
			text-align: center;
		}
		ul.documents {
			list-style-type: none;
			padding: 0;
			a {
				color: #696969;
				font-size: 14px;
			}
		}
	}
	
	div.model {
		border-radius: 5px;
		box-shadow: 0 10px 25px 0 rgba(50,94,128,.2);
		padding: 18px 26px;
		border: 1px solid #e6e6e6;
		background-image: linear-gradient(136deg, #F8F8F8 29%, #ffffff 74%, #fafafa 100%);
		margin-top: 20px;
		margin-bottom: 72px;
		a {
			color: inherit;
		}
		.model-title {
			font-size: 20px;
			font-weight: 600;
			&::first-letter {
				font-size: 30px;
				vertical-align: middle;
			}
		}
		.model-details {
			color: #666;
			font-size: 15px;
		}
		.model-bottom {
			.clearfix();
		}
		a.btn {
			float: right;
			margin-left: 10px;
			border-radius: 6px;
			padding: 5px 10px;
			color: white;
			background-color: grey;
			&.btn-primary {
				background-color: #40bf0e;
			}
			&.btn-details {
				background-color: #c388ef;
			}
			position: relative;
			&:active {
				top: 1px;
			}
			&:hover {
				opacity: 0.7;
			}
		}
	}
}


/************
 * body.model
 ************/

body.model {
	header {
		padding-top: 80px;
		text-align: center;
		img.logo-collab {
			height: 100px;
			&.logo-uber {
				height: 50px;
				vertical-align: 20px;
			}
		}
		img.cross {
			height: 50px;
			margin: 0 32px;
			vertical-align: 20px;
		}
	}
	.container {
		margin-left: auto;
		margin-right: auto;
		max-width: 560px;
		padding-top: 100px;
		padding-bottom: 200px;
	}
	a.back {
		font-size: 15px;
		img {
			margin-right: 1px;
			width: 12px;
		}
	}
	.model-title {
		color: #222;
		font-weight: 600;
		font-size: 36px;
		&::first-letter {
			font-size: 42px;
			vertical-align: middle;
		}
	}
	.github-repo {
		margin-top: 6px;
		margin-bottom: 20px;
		transform: scale(0.7) translateX(-85px);
	}
	.model-bottom {
		.clearfix();
		margin-top: 52px;
		text-align: center;
	}
	a.btn {
		border-radius: 8px;
		padding: 10px 32px;
		font-size: 20px;
		color: white;
		background-color: grey;
		&.btn-primary {
			background-color: #40bf0e;
		}
		&.btn-details {
			background-color: #c388ef;
		}
		position: relative;
		&:active {
			top: 1px;
		}
		&:hover {
			opacity: 0.7;
		}
	}
}