File: /var/www/html/wpkoopkj/wp-content/themes/ohio/assets/sass/components/portfolio/_grid.scss
.portfolio-item {
.title {
@include fluid-typo(1.25rem, 1.55rem);
}
// Grid Only
&:not(.-with-slider) {
// Video button
.video-button {
z-index: 1;
@include centered;
}
}
// Lightbox trigger button
.overlay-details {
&.-top {
top: 0;
bottom: auto;
}
}
// Show project
.show-project {
font-size: $font-size-small;
// Remove divider
&-link {
&::before {
display: none;
}
}
}
// Sliders
&.-with-slider {
min-width: 100%;
overflow: hidden;
.project-content {
position: relative;
min-height: 100%;
padding-left: 0;
padding-right: 0;
@include flex;
@include align-items(flex-start);
@include flex-direction(column);
@include sm-screen {
padding-right: 3rem;
padding-left: 0;
}
.headline {
margin-bottom: 0;
}
h2 {
@include headings-typo(h1);
}
h3 {
@include headings-typo(h3);
@include sm-screen {
&.headline {
font-size: $font-size-h1-mobile;
}
}
}
}
// Image
.portfolio-item-image {
background-size: cover;
background-position: center;
position: absolute;
}
// With tilt effect
&:not(.-with-gradient) {
.portfolio-item-image {
&[data-tilt="true"] {
min-width: calc(100vw + 5vw);
min-height: calc(100vh + 5vh);
left: -2.5vw;
top: -2.5vh;
}
}
}
// Image overlay
.overlay {
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
// Headline decoration
.headline-decor {
position: absolute;
z-index: 1;
bottom: -0.5rem;
.title {
z-index: -1;
line-height: .5;
white-space: nowrap;
letter-spacing: -.06em;
font-size: 16vw;
font-weight: bold;
font-family: $font-headlines;
color: rgba($color_neutral, 0.04);
@include transition;
}
@include sm-screen {
transform: rotate(-90deg);
transform-origin: left bottom;
left: calc(100% - 3rem);
bottom: 1rem;
top: auto;
.title {
font-size: 25vw;
}
}
}
}
// With Gradient
&.-with-gradient {
.portfolio-item-image {
@include sm-screen {
height: 45vh;
position: relative;
overflow: hidden;
+ .project {
min-height: 55vh;
}
}
// Gradient overlay
&::before {
content: "";
position: absolute;
width: 75%;
top: 0;
bottom: 0;
@include gradient(270deg, .85, $color-white);
@include sm-screen {
top: 35%;
width: 100%;
@include gradient(360deg, 1, $color-white);
}
}
}
@include sm-screen {
.project-content {
top: -10vh;
}
}
}
// Layout Type 2 - Minimal
&.-layout2 {
.overlay-details {
.heading {
width: 100%;
}
&:not(.-top) {
@include gradient;
}
.title {
color: $color-white;
}
}
.portfolio-item-headline {
+ .show-project {
position: relative;
left: 0;
bottom: 0 !important;
}
}
// Color overlay effect
&.-img-overlay {
// Hide standard overlay
.image-holder {
&::after {
display: none;
}
}
}
}
// Layout Type 1, 2
&.-layout1,
&.-layout2,
&.-layout13 {
// Show project
.show-project {
overflow: hidden;
position: relative;
margin-top: 0.4rem;
a {
color: inherit;
}
&-link {
position: absolute;
font-weight: 600;
opacity: 0;
left: 0;
@include transition;
a {
position: relative;
&::after {
content: "";
width: 3rem;
height: 2px;
background-color: currentColor;
position: absolute;
right: -0.5rem;
top: 48%;
transform: translate(100%, 50%);
}
}
}
.category-holder {
display: block;
@include transition;
}
}
// Hover
&:hover {
.show-project {
&-link {
transform: translate(0, -100%);
opacity: 1;
}
.category-holder {
transform: translate(0, -100%);
opacity: 0;
}
}
}
}
// Layout Type 3, 5, 6
&.-layout3,
&.-layout5,
&.-layout6 {
.overlay {
&::after {
background-color: rgba($color-white, 0.98);
}
}
.project-content {
padding-left: 0;
padding-right: 0;
padding-top: $header-height;
min-height: 65vh;
@include spacer4x(padding-bottom);
@include note-screen {
min-height: 70vh;
}
@include md-screen {
@include flex-just(flex-end);
}
}
}
// Layout Type 4
&.-layout4 {
.overlay {
&::after {
background-color: rgba($color-white, 0.5);
}
}
.project-content {
@include flex-just(center);
@include note-screen {
padding-right: 12vw;
}
}
@include lg-screen {
.project-details {
margin-right: 35%;
}
}
}
// Layout Type 5
&.-layout5 {
@include md-screen {
.overlay {
width: 50%;
height: 100%;
}
}
.headline-decor {
top: 100%;
left: 15%;
transform-origin: left center;
transform: translateY(0%) rotate(-90deg);
}
.project-content {
@include spacer(padding-bottom);
@include spacer(padding-right);
@include flex-just(flex-end);
&::before {
height: 25%;
}
}
// Slider effects
&.active {
.portfolio-item-image {
transform: none !important;
@include transition(transform .5s );
}
}
&.prev-slide {
.portfolio-item-image {
transform: translateY(-100%) !important;
@include transition(transform .5s);
}
&.last-slide {
.portfolio-item-image {
transform: translateY(-20%) !important;
@include transition(transform .5s);
}
}
}
&.next-slide {
.portfolio-item-image {
transform: translateY(100%);
@include transition(transform .5s);
}
&.last-slide {
.portfolio-item-image {
transform: translateY(20%) !important;
@include transition(transform .5s);
}
}
}
}
// Layout Type 6
&.-layout6 {
.portfolio-item-image {
background-position: left bottom;
}
@include sm-screen {
.project-content {
padding-left: $grid-spacer;
}
}
@include md-screen {
.overlay {
padding: 0 6.75vw;
}
}
@include note-screen {
.overlay {
padding-right: 3.8vw;
}
}
}
// Layout Type 7
&.-layout7 {
.portfolio-item-image {
@include md-screen {
width: 50vw;
height: auto;
z-index: 2;
top: 20vh;
bottom: 20vh;
}
// Gradient overlay
&::before {
right: 0;
}
}
.project-content {
&::before {
height: $header-height;
}
@include flex-just(center);
}
@include md-screen {
.overlay {
height: 100%;
}
}
.headline-decor {
left: calc(100% / 3);
bottom: 20vh;
}
}
// Layout Type 7, 9
&.-layout7,
&.-layout9 {
.video-button {
@include centered;
}
}
// Layout Type 9
&.-layout9 {
.portfolio-item-image {
position: relative;
z-index: 1;
// Hide image overlay
@include md-screen {
&::before {
display: none;
}
}
}
.project-content {
@include flex-just(space-around);
@include spacer(padding-bottom);
&::before {
height: 25%;
}
@include md-screen {
.project-details {
font-weight: 600;
font-size: $font-size-large;
}
}
}
.headline-decor {
top: 50%;
bottom: auto;
transform: translateY(-50%);
left: 25px;
opacity: 0;
@include transition(.45s);
}
// Next slide
.next-slide-preview {
position: absolute;
top: 50%;
left: 0;
transform: translate(-60%, -50%);
width: 16.5rem;
height: 16.5rem;
background-size: cover;
background-position: center;
z-index: 1;
@include transition;
@include border-radius;
&:hover {
transform: translate(-55%, -50%);
}
@include note-screen {
transform: translate(-65%, -50%);
}
@include tablet-screen {
display: none;
}
}
// Slider effects
.image-holder {
opacity: 0;
z-index: 1;
padding: 0;
+ .vc_col-md-5 {
position: relative;
padding-left: $grid-spacer;
padding-right: $grid-spacer;
}
}
&.active {
.image-holder {
opacity: 1;
@include transition(.45s);
}
.headline-decor,
.next-project-img-box {
opacity: 1;
}
}
@include sm-screen {
.project-content {
@include flex-just(flex-end);
@include flex-direction(column-reverse);
.project-details {
padding-top: 1rem;
}
}
.page-container {
padding: 0;
}
}
}
// Layout Type 10
&.-layout10 {
.overlay {
&,
&-image {
background-size: cover;
background-position: center;
}
&-image {
.headline-decor {
z-index: initial;
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($color-white, 0.98);
}
}
}
.preview {
top: 18vh;
bottom: 18vh;
position: absolute;
@include sm-screen {
padding: 0;
top: 0;
left: -$grid-spacer;
right: $grid-spacer;
}
}
.portfolio-item-image {
right: $grid-spacer;
left: $grid-spacer;
@include md-screen {
transform: scale(.9);
}
@include transition;
&::before {
left: 0;
@include gradient(90deg, .85, $color-white);
}
}
.project-content {
@include md-screen {
@include flex-just(center);
}
@include sm-screen {
@include flex-just(flex-end);
}
}
.headline-decor {
top: 50%;
transform: translateY(-50%);
bottom: auto;
opacity: 0;
@include transition;
}
// Slider effects
&.active {
.page-container {
.portfolio-item-image {
transform: none;
}
}
.headline-decor {
opacity: 1;
}
}
}
// Layout Type 11 - Caption Cursor Grid
&.-layout11 {
.portfolio-item-details {
opacity: 0;
visibility: hidden;
position: fixed;
top: 1rem;
left: 1rem;
z-index: 10;
will-change: transform;
&.-center {
.category-holder {
align-self: center;
}
}
&.-right {
.category-holder {
align-self: flex-end;
}
}
}
.title,
.category-holder {
background-color: rgba($color-black, .5);
margin: 0;
padding: 0.2rem 0.75rem;
width: fit-content;
color: $color-white;
}
&:hover {
.portfolio-item-details {
opacity: 1;
visibility: visible;
.category-holder {
transform: translateY(0px) !important;
opacity: 1 !important;
}
}
}
}
// Layout Type 11 - Sticky Grid
&.-layout13 {
@include flex;
.card-details {
flex-grow: 2;
.holder {
@include spacer(padding-top);
}
.category-holder {
.category {
font-weight: 600;
}
}
.project-details {
padding-top: $grid-spacer;
}
}
&:not(.-contained) {
.card-details {
padding-top: 0;
padding-left: 2.5rem;
}
}
&.-contained {
.card-image {
.image-holder {
@include border-radius;
}
}
.card-details {
margin-left: 2.5rem;
padding-top: 0;
@include border-radius;
@include spacer(padding-left);
@include spacer(padding-right);
@include spacer(padding-bottom);
}
}
// Mobile
@include sm-screen {
@include flex-direction(column);
&:not(.-contained) {
.card-details {
padding-left: 0;
padding-top: 2.5rem;
}
}
&.-contained {
.card-details {
margin-left: 0;
margin-top: $grid-spacer;
}
}
}
}
}
// Dots decor
.portfolio-links,
.-with-slider {
.project-content {
&::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 50%;
background-image: radial-gradient(circle at 1px 1px, lighten($color-black, 70%) 1px, transparent 0);
background-size: 20px 20px;
}
}
}
.portfolio-grid {
&.is-loading {
max-height: 0px !important;
.portfolio-item {
&:not(.-with-slider) {
visibility: hidden;
opacity: 0;
}
}
}
}
.portfolio-links {
// Layout Type 8 - Interactive Links
&.grid_8 {
position: relative;
@include flex;
@include flex-just(center);
@include flex-direction(column);
&.-with-sorting.-with-pagination {
@include flex-just(space-between);
}
// Dots decor
.project-content {
padding: 0;
&::before {
height: 25%;
left: 50%;
}
}
.portfolio-grid {
z-index: 2;
height: auto !important;
@include spacer4x(padding-top);
@include spacer4x(padding-bottom);
@include sm-screen {
@include flex;
@include flex-direction(column);
}
}
.grid-item {
position: relative !important;
top: auto !important;
left: auto !important;
padding: 0 $grid-spacer !important;
@include inline-flex;
@include transition;
.portfolio-item {
padding: 0.4rem 0;
flex-wrap: wrap;
@include flex;
@include align-items(flex-end);
.headline {
margin: 0;
line-height: 100%;
}
.category-holder {
margin-left: 0.5rem;
@include md-screen {
transform: translateY(-0.25rem);
}
}
&.active {
transform: scale(2.5);
}
&.invisible {
opacity: .05 !important;
visibility: visible !important;
}
}
.project-title {
&:hover {
.headline {
color: inherit;
}
}
}
}
// Project images
.portfolio-grid-images {
position: absolute;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.thumbnail {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
z-index: 1;
transform: scale(1);
@include transition;
// Overlay
&::after {
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
@include pseudo;
}
&.scale {
opacity: 1;
animation: imageScale 12s 1;
animation-fill-mode: forwards;
}
}
}
// Grid Type 12 - Interactive Links Horizontal
&.grid_12 {
position: relative;
counter-reset: portfolio-number;
.portfolio-item {
overflow: visible;
white-space: nowrap;
counter-increment: portfolio-number;
height: 100%;
@include flex;
@include align-items(center);
&-details {
@include inline-flex;
@include align-items(flex-start);
.category-holder {
opacity: 0;
transform: translateX(1.75rem);
@include transition;
a {
font-weight: 600;
}
}
&-headline {
position: relative;
&::after {
content: '0'counter(portfolio-number);
opacity: .65;
font-weight: bold;
top: 0;
right: 0;
transform: translateX(110%);
position: absolute;
@include transition;
@include sm-screen {
font-size: .9em;
}
}
> a {
position: relative;
display: block;
.title {
font-size: 6vw;
@include transition;
@include sm-screen {
font-size: 14vw;
}
&:hover {
-webkit-text-stroke: 1px currentColor;
-webkit-text-fill-color: transparent;
}
}
}
}
}
.portfolio-item-image {
opacity: 0;
height: 0;
width: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
padding: 0;
z-index: -1;
> img {
mix-blend-mode: multiply;
opacity: .3;
}
}
&:hover {
.portfolio-item-details {
.portfolio-item-details-headline {
&::after {
transform: translateX(-0.75rem);
opacity: 0;
}
}
.category-holder {
opacity: 1;
transform: translateX(0px);
}
}
}
@include sm-screen {
white-space: normal;
.portfolio-item-details {
> a {
display: block;
}
.category-holder {
display: none;
}
}
}
}
.portfolio-grid-images {
height: 0;
width: 0;
z-index: 10;
position: relative;
.portfolio-item-image {
position: fixed;
left: 0.75rem;
top: 0.75rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
will-change: transform;
.card {
width: 35vh;
height: 35vh;
padding: 1rem;
will-change: transform;
@include transition(all, linear, 2s);
img {
transform: scale(.8);
@include transition;
}
}
&.transition {
@include transition(all, linear, 0.25s);
}
&.visible {
img {
transform: scale(1);
}
}
}
}
.portfolio-grid-holder {
position: relative;
flex-grow: 2;
overflow-x: hidden;
.portfolio-grid {
margin-top: 0;
margin-bottom: 0;
transform-origin: bottom left;
transform: rotate(-90deg) translateY(100%);
overflow: hidden;
left: $grid-spacer;
bottom: 0;
right: 0;
width: max-content;
top: auto !important;
position: absolute !important;
border-left: 1px solid rgba($color_neutral, .25);
&::-webkit-scrollbar,
&::-webkit-scrollbar-thumb {
visibility: hidden;
}
@include sm-screen {
transform: none;
overflow: visible;
position: relative !important;
top: auto !important;
height: auto !important;
left: $grid-spacer;
max-width: 100%;
.grid-item {
padding: 0 0 0.25rem 1.25rem !important;
}
}
}
.grid-item {
position: static !important;
left: auto !important;
top: auto !important;
padding: 0 0 0 2rem !important;
min-height: calc(100% / 10);
@include flex;
@include note-screen {
padding: 0 0 0 1.5625rem !important;
}
}
&-underline {
position: absolute;
bottom: 0;
height: 1px;
width: 1px;
background-color: $color_grey;
@include transition;
}
}
&.-full-vh {
@include flex;
@include align-items(stretch);
@include flex-direction(column);
}
@include sm-screen {
.portfolio-grid-holder {
height: auto !important;
&-underline {
bottom: auto;
top: 0;
}
}
}
}
// Pagination
.portfolio-filter,
.pagination,
.lazy-load {
z-index: 3;
position: relative;
padding-top: 2rem;
padding-bottom: 2rem;
}
// Decor
.project-content {
&::before {
display: none;
}
}
}
// Grid Type 13
@include md-screen {
.grid_13 {
&.-reversed {
.grid-item {
&:nth-child(2n) {
.-layout13 {
@include flex-direction(row-reverse);
&:not(.-contained) {
.card-details {
padding-left: 0;
padding-right: 2.5rem;
}
}
&.-contained {
.card-details {
margin-left: 0;
margin-right: 2.5rem;
}
}
}
}
}
}
.grid-item {
// Set image width for 1 column layout
&.vc_col-lg-12 {
.-layout13 {
.card-image {
min-width: calc(((100% / 3) * 2) - 1.25rem);
width: calc(((100% / 3) * 2) - 1.25rem);
}
}
}
// Set image width for 2 columns layout
&.vc_col-lg-6 {
.-layout13 {
.card-image {
min-width: calc((100% / 2) - 1.25rem);
width: calc((100% / 2) - 1.25rem);
}
}
}
}
}
}
.ohio-recent-projects-sc {
// WPBakery styles override (Sliders visibility issue)
.vc_row[data-vc-full-width] {
&.vc_hidden {
opacity: 1;
}
}
}
// Animation
@keyframes imageScale {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}