wp-theme/assets/css/less/ascribe.less

@import "../vendor/normalize.less";
@import "../vendor/print.less";
@import "branding.less";
@import "../helpers/helpers.less";

// HEADER
@chevronOffsetHeader: 60px;
.page-template-template-tour header {
	height: 815px;
	margin-bottom: @chevronOffsetHeader;
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	nav {
		float: left;
		margin-top: 35px;
		margin-left: 20px;
		.tourNavText;
	}
	ul {
		list-style: none;
	}
	.description {
		clear: both;
		width: 80%;
		margin: 190px auto 0;
		text-align: center;
	}
	h1 {
		.heroText;
		margin-bottom: 160px;
	}

	.chevron-divider {
		position: absolute;
		bottom: -@chevronOffsetHeader;
		height: 150px;
	}
}
.logo {
	float:left;
	margin-top: 25px;
}
.app-links {
	float: right;
	margin-top: 25px;
	.signInUpText;

	a {
		.signInUpText;
	}
}


// SUBTEMPLATES
.feature-circles {
	padding: 75px 0 160px;

	.column-container {
		width: calc(~"100% + 100px");
	}

	.feature-circle {
		.ttl-columns.column-3;
		padding-right: 100px;
	}
	img {
		width: 105px;
		display: block;
		margin: 0 auto 26px;
	}
	h1 {
		.featureCircleH1;
		text-align: center;
	}
	.description {
		.copyTextSmall;
	}
}
.case-studies {
	height: 685px;
	background-color: #888;
	position: relative;

	.case-study {
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		.transition(all,0.3s);
		visibility: visible;
		opacity: 1;

		&.hidden {
			visibility: hidden;
			opacity: 0;
		}
	}
	.slide-container {
		width: 100%;
		height: 100%;
		position: relative;
		left: 0px;
	}
	.centered-header {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.description {
		white-space: normal;
		width: 60%;
		background: fade(@black,64);
		padding: 25px;
		position: absolute;
		bottom: 35px;
		right:0;
		.caseStudyText;
	}
	p {
		margin:0;
	}
	.slider-action {
		width: 80px;
		height: 80px;
		background-color: @white;
		background-position: center;
		background-repeat: no-repeat;
		cursor: pointer;
		position: absolute;
		top: calc(~"50% - 40px");
		z-index: 2;
	}
	#back {
		background-image: url(../../images/left.png);
		left:0;
	}
	#forward {
		background-image: url(../../images/right.png);
		right:0;
	}
}
.old-new {
	padding-top: 130px;
	padding-bottom: 175px;

	h1 {
		.h1;
		text-align: center;
	}

	th {
		.oldWayNewWayTH;
		text-transform: uppercase;
		padding-bottom: 15px;
	}

	table {
		border-collapse: collapse;
	}

	td {
		border: 1px solid @blueLight;
	}
	td {
		vertical-align: middle;
		.copyTextSmall;
		width: 50%;
		padding: 45px 0;
		p {
			width: 60%;
			margin: 0 auto;
		}
	}
	.new {
		border-bottom-color: @white;
		position: relative;
		background-color: @blueLight;

		&:before {
			position: absolute;
			left:-30px;
			top: calc(~"50% - 30px");
			content: '';
			display: block;
			width: 60px;
			height: 60px;
			background-image: url(../../images/ascribeicon-circles.png);
			background-size:60px;
			background-repeat: no-repeat;
		}
	}
	tr {
		&:last-of-type {
			.new {
				border-bottom-color: @blueLight;
			}
		}
	}
}
.product-overview {
	padding: 175px 0;
	border-top: 1px solid @greyHr;

	h1 {
		.h1;
	}
	p {
		.copyTextSmall;
	}

	&:nth-of-type(odd) {
		img {
			float: left;
		}
		.text-column {
			float: right;
		}
	}
	&:nth-of-type(even) {
		img {
			float: right;
		}
	}
	.text-column {
		width: 45%;
	}
}
.blue-box {
	padding: 175px 0;
	background-color: @greyBg;
	.blueBoxCopy;

	.blue-copy {
		background-color: @blueBright;
		padding: 70px 0 110px;

		div {
			width: 80%;
			margin: 0 auto;
			text-align: center;
		}
	}
	h1 {
		.blueBoxTitle;
	}
}
.sign-up {
	padding: 240px 0 210px;
	text-align: center;
	a {
		margin: 0 auto;
	}

}
.galleries-marketplaces {
	padding: 145px 0 130px;
	text-align: center;

	h1 {
		.galleriesPressTitle;
	}
	img {
		display:block;
		margin-bottom: 80px;
	}
}
.blog-features {
	background-color: @greyBg;
	padding: 75px 0;

	.blog {
		.ttl-columns.column-3;
		margin-bottom: 40px;

		div {
			background-color: white;
			padding-bottom: 15px;
			min-height: 225px;
		}
	}

	h2 {
		.featureBlogDesc;
		margin:10px 10px 0;
	}
	h1 {
		.featureBlogTitle;
		margin:0 10px;
	}
}
.team {
	background-color: @greyBg;
	padding: 70px 0;
	.copyTextSmall;

	.intro {
		margin-bottom: 60px;
	}
	p {
		margin:0;
	}
	.team-member {
		.ttl-columns.column-3;
		text-align: center;
	}
	img {
		border-radius: 100%;
		filter: grayscale(100%);

		&:hover {
			filter: none;
		}
	}
	h1 {
		.teamName;
		margin-top: 20px;
		margin-bottom:0;
	}
	h2 {
		.copyText;
		margin-top:2px;
	}
}