File Manager

Editing File: /home/maglabs/lacentraleit/wp-content/themes/mlab/assets/less/_project.less

/* ============================================================ 
    12. PROJECT
=============================================================*/
[class*="projects-style"] {
	.project-inner {
		position: relative;
		&:hover {
			.project-thumbnail a > img {
				transform: scale(1.1) rotate(3deg);
			}
		}
	}
	.project-title {
		margin: 0;
		font-size: 30px;
	}
	.project-summary {
		line-height: 1.375;
		font-size: 15px;
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			gap: 40px;
			li {
				strong {
					display: block;
				}
			}
		}
	}
	.project-thumbnail {
		margin: 0 0 30px 0;
		a {
			display: block;
			overflow: hidden;
			position: relative;
			img {
				.transition(0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s);
			}
		}
	}
}
.projects-filter {
	margin-bottom: 55px;
	&.projects-filter-center {
		ul {
			justify-content: center;
			li a {
				align-items: center;
			}
		}
	}
	&.projects-filter-right {
		ul {
			justify-content: flex-end;
			li a {
				align-items: flex-end;
			}
		}
	}
	ul {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
		gap: 15px;
		align-items: flex-end;
		flex-wrap: wrap;
		li {
			width: ~"calc(33.333333% - 20px)";
			a {
				display: flex;
				flex-direction: column;
				gap: 10px;
				position: relative;
				font-size: 12px;
			    font-weight: 700;
			    text-transform: uppercase;
			    line-height: 15px;
			    letter-spacing: 1px;
			    border: 1px solid rgba(0,0,60,.12);
				text-align: center;
				padding: 10px 0;
				.rounded(8px);
			}
			&:not(.active) {
				a {
					color: inherit;
					.opacity(.7);
				}
			}
			&.active,&:hover {
				a {
					border-color: rgba(0,0,60,.3);
				}
			}
		}
		@media only screen and (min-width: 769px) {
			gap: 40px;
			li {
				width: auto;
				a {
					border: none;
					padding: 0;
				}
			}
		}
	}
}
.project-meta {
	a {
		font-size: 11px;
		letter-spacing: 1px;
		line-height: 16px;
		text-transform: uppercase;
		margin-bottom: 25px;
		font-weight: 700;
		&:before {
			content: ",";
			margin: 0 3px 0 2px;
		}
		&:first-child {
			&:before {
				display: none;
			}
		}
	}
}
.project-tags {
	display: flex;
	gap: 8px;
	clear: both;
	flex-wrap: wrap;
	a {
		font-size: 14px;
		line-height: 19px;
		padding: 8px 20px;
		color: inherit;
		.rounded(10px);
		&:before {
			content: "#";
			margin-right: 2px;
			.opacity(.5);
		}
		&.gallery {
			margin: 0;
		}
	}
	&:empty {
		display: none;
	}
}

.projects-style1 {
	.project-inner {
		position: relative;
		padding-bottom: 30px;
		&:hover {
			.project-thumbnail a {
				&:after,.client-thumb {
					.opacity(1);
				}
			}
			.project-thumbnail a > img {
				transform: none;
			}
		}
	}
	.project-thumbnail {
		margin: 0 0 25px 0 !important;
		overflow: hidden;
		.rounded(15px);
		a {
			&:after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				border: 1px solid rgba(255,255,255,.15);
				.rounded(15px);
				.opacity(0);
				&:extend(.transition);
			}
		}
	}
	.client-thumb {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index: 2;
		.opacity(0);
		&:extend(.transition);
	}
	.project-title {
		font-size: 20px;
		line-height: 1.4;
		margin: 0;
		font-weight: 300;
		padding: 0 20px 0 0;
	}
	.project-tags {
		margin-top: 30px;
		a {
			position: relative;
			z-index: 1;
			&:after {
				content:"";
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				border: 1px solid;
				z-index: -1;
				.opacity(.45);
				.rounded(10px);
				&:extend(.transition);
			}
			&:hover:after {
				.opacity(1);
			}
		}
	}
	a.project-readmore,.project-client-info,.project-summary,.project-meta {
		display: none;
	}
}

.projects-style2 {
	.project-inner {
		position: relative;
		overflow: hidden;
		.rounded(15px);
		&:hover {
			.project-info {
				transform: translateX(0);
			}
		}
	}
	.project-thumbnail {
		overflow: hidden;
		margin: 0;
		a {
			display: block;
			position: relative;
		}
	}
	.project-info {
		padding: 30px 30px 25px 30px;
		position: absolute;
		top: 15px;
		right: 15px;
		left: 15px;
		bottom: 15px;
		background: @white;
		display: flex;
		flex-direction: column;
		transform: translateX(~"calc(-100% - 15px)");
		.rounded(15px);
    	&:extend(.transition);
	}
	.project-client-info {
		img {
			width: auto;
			max-height: 50px;
			position: relative;
			z-index: 3;
		}
		.project-client-color {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			text-indent: -9999px;
			.rounded(15px);
		}
	}
	.project-info-inner {
		position: relative;
	    display: flex;
	    flex-direction: column;
	    height: 100%;
	    justify-content: flex-end;
	}
	.project-meta {
		margin-bottom: 2px;
		a {
			color: @white;
		}
	}
	.project-title {
		font-size: 20px;
		line-height: 1.4;
		margin: 0;
		font-weight: 300;
		a {
			color: @white;
		}
	}
	a.project-readmore,.project-summary,.client-thumb,.project-tags {
		display: none;
	}
}

.projects-style3 {
	div[data-columns="1"],
	div[data-columns="2"] {
		.project-title {
			@media only screen and (min-width: 1025px) {
				font-size: 36px;
				width: 60%;
			}
		}
	}
 	.project-inner {
		position: relative;
		overflow: hidden;
		.rounded(15px);
		&:hover {
			.project-info {
				background-color: rgba(0,0,60,.75);
			}
			.project-thumbnail img {
				transform: scale(1.2) rotate(5deg);
			}
			a.project-readmore {
				&:after {
					background: @white;
				}
				&:hover {
					&:after {
						transform: translate(-50%,-50%) scale(1.2);
					}
				}
			}
		}
	}
	.project-thumbnail {
		overflow: hidden;
		margin: 0;
		a {
			display: block;
			position: relative;
		}
		img {
			.transition(0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s);
		}
	}
	.project-client-info {
		position: absolute;
		bottom: 30px;
		right: 10%;
		z-index: 2;
		img {
			width: auto;
			max-height: 50px;
			position: relative;
			z-index: 3;
		}
		.project-client-color {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			text-indent: -9999px;
			.rounded(5px);
			+ img {
				padding: 10px;
				max-height: 70px;
			}
		}
	}
	.project-info {
		padding: 30px 10%;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		color: @white;
		text-shadow: 0 1px 2px rgba(0,0,60,.15);
		&:extend(.transition);
		&:after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			.opacity(.3);
		}
		a {
			color: @white;
		}
	}
	.project-info-inner {
		position: relative;
		z-index: 3;
		display: flex;
		flex-direction: column;
		border-top: 2px solid;
		padding-top: 20px;
		height: 100%;
	}
	.project-meta {
		order: 2;
		flex-grow: 1;
	}
	.project-title {
		margin: 0 0 10px 0;
		font-size: 24px;
		line-height: 1.2;
		order: 1;
	}
	.project-summary {
		font-size: 13px;
		order: 3;
		width: 70%;
	}
	a.project-readmore,.client-thumb,.project-tags {
		display: none;
	}
}

.projects-related {
	border-top: 1px solid rgba(0,0,60,.12);
	padding-top: 20px;
	margin-top: 70px;
	.projects-related-title {
		margin-bottom: 40px;
	}
}
.projects-related-wrap {
	margin: 0 -15px;
	.project {
		padding: 0 15px;
		margin-bottom: 30px;
		&:last-child {
			margin-bottom: 0;
			.project-inner {
				padding-bottom: 0;
			}
		}
		@media only screen and (min-width: 1025px) {
			margin-bottom: 0;
			.project-inner {
				padding-bottom: 0;
			}
		}
	}
}

.single-nproject {
	&.elementor-page {
		.content-body-inner.wrap {
			width: 100%;
			max-width: 100%;
		}
		.site-content .content-header {
			margin-bottom: 0;
		}
	}
	&:not(.elementor-page) {
		.project-tags,.projects-related {
			&.wrap {
				max-width: 100%;
			}
		}
	}
	.content-header-left {
		&.content-header-featured {
			.page-title-wrap {
				display: block;
			}
		}
	}
	.hentry {
		position: relative;
		z-index: 4;
		.sticky-element-placeholder {
			height: 0 !important;
		}
		.share {
			padding-bottom: 80px;
			&:empty {
				display: none;
			}
		}
	}
	.project-meta {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.project-content {
		+ .project-tags {
			margin-top: 80px;
			justify-content: center;
		}
	}
	.wp-block-columns {
		.wp-block-column {
			margin-bottom: 10px;
		}
		> h6 {
			border-top: 1px solid;
			padding-top: 20px;
			margin: 0;
		}
	}
}
.projects-shortcode {
	.projects-wrap {
		position: relative;
	}
	.widget-title {
		margin: 0 0 35px 0;
		//text-align: center;
		font-size: 19px;
		line-height: 24px;
		&:before {
			content: "";
			position: absolute;
			height: 1px;
			left: 0;
			right: 0;
			top: 114px;
			background: rgba(2,6,38,.1);
		}
		@media only screen and (min-width: 1025px) {
			text-align: inherit;
			margin: 0;
			float: left;
			max-width: 30%;
			&:before {
				top: 55px;
			}
			+ .projects-filter {
				float: right;
				width: 70%;
				ul {
					justify-content: flex-end;
				}
			}
		}
	}
	.projects-items {
		margin: 0 -15px;
		clear: both;
		.project {
			padding: 0 15px;
			margin-bottom: 30px;
		}
	}
}

.projects {
	.navigation {
		padding-top: 30px;
	}
}

Back to Directory File Manager