Viewing 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