754 lines
22 KiB
SCSS
754 lines
22 KiB
SCSS
@use "../utils" as *;
|
|
|
|
/*=============================
|
|
09. Project
|
|
===============================*/
|
|
.project {
|
|
&-area {
|
|
padding: 120px 0 120px;
|
|
position: relative;
|
|
@media #{$xs} {
|
|
padding: 100px 0;
|
|
}
|
|
}
|
|
&__area {
|
|
&-two {
|
|
background: var(--tg-color-yellow-light-2);
|
|
padding: 120px 0 90px;
|
|
position: relative;
|
|
z-index: 1;
|
|
@media #{$xs} {
|
|
padding: 100px 0 70px;
|
|
}
|
|
}
|
|
&-three {
|
|
background-size: cover;
|
|
background-position: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 40px 0;
|
|
@media #{$xs} {
|
|
padding: 50px 0;
|
|
}
|
|
}
|
|
}
|
|
&-item {
|
|
border: 1px solid var(--tg-border-1);
|
|
@include border-radius(10px);
|
|
margin-bottom: 30px;
|
|
background: var(--tg-color-white-default);
|
|
&-wrap {
|
|
& .row {
|
|
--bs-gutter-x: 24px;
|
|
}
|
|
}
|
|
&:hover {
|
|
& .project-thumb {
|
|
&::before {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__item {
|
|
&-two {
|
|
position: relative;
|
|
margin-bottom: 30px;
|
|
overflow: hidden;
|
|
&:hover {
|
|
& .project__thumb-two {
|
|
&::before {
|
|
height: 100%;
|
|
}
|
|
}
|
|
& .project__content-two {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
&-three {
|
|
position: relative;
|
|
padding: 0 105px;
|
|
@media #{$lg} {
|
|
padding: 0 80px;
|
|
}
|
|
@media #{$md} {
|
|
padding: 0 50px;
|
|
}
|
|
@media #{$xs} {
|
|
padding: 0;
|
|
}
|
|
}
|
|
&-four {
|
|
position: relative;
|
|
&:hover {
|
|
& .project__thumb-four {
|
|
& img {
|
|
filter: grayscale(0);
|
|
}
|
|
}
|
|
& .project__content-four {
|
|
& .right-arrow {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-thumb {
|
|
@include border-radius(10px 10px 0 120px);
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin: -1px -1px 0;
|
|
& img {
|
|
width: 100%;
|
|
height: 400px;
|
|
object-fit: cover;
|
|
@media #{$xl} {
|
|
height: 330px;
|
|
}
|
|
}
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 0;
|
|
background: #af7400;
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
@include transition(0.3s);
|
|
}
|
|
}
|
|
&__thumb {
|
|
&-two {
|
|
position: relative;
|
|
overflow: hidden;
|
|
& img {
|
|
border-radius: 15px;
|
|
height: 300px;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
}
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 0%;
|
|
background: var(--tg-color-dark-blue);
|
|
opacity: 0.9;
|
|
border-radius: 15px;
|
|
@include transition(0.4s);
|
|
}
|
|
}
|
|
&-three {
|
|
width: 782px;
|
|
margin-left: auto;
|
|
@media #{$lg} {
|
|
width: 580px;
|
|
}
|
|
@media #{$md} {
|
|
width: 450px;
|
|
}
|
|
@media #{$xs} {
|
|
display: none;
|
|
}
|
|
& img {
|
|
max-height: 478px;
|
|
max-width: 783px;
|
|
object-fit: cover;
|
|
@include border-radius(15px);
|
|
@media #{$lg} {
|
|
max-height: 430px;
|
|
max-width: 705px;
|
|
}
|
|
}
|
|
}
|
|
&-four {
|
|
position: relative;
|
|
overflow: hidden;
|
|
& img {
|
|
width: 100%;
|
|
height: 570px;
|
|
object-fit: cover;
|
|
filter: grayscale(1);
|
|
@media #{$lg} {
|
|
height: 480px;
|
|
}
|
|
}
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, rgba(11, 12, 57, 0) 0%, rgba(0, 1, 38, 0.9) 100%);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
&-content {
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 30px 30px;
|
|
gap: 10px;
|
|
@media #{$xl} {
|
|
padding: 30px 20px;
|
|
}
|
|
@media #{$lg} {
|
|
padding: 30px 30px;
|
|
}
|
|
@media #{$md} {
|
|
padding: 30px 20px;
|
|
}
|
|
& .title {
|
|
margin-bottom: 8px;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
@media #{$xl} {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
& span {
|
|
display: block;
|
|
line-height: 1;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: var(--tg-theme-primary);
|
|
}
|
|
&-bottom {
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
margin-top: 40px;
|
|
@media #{$xs} {
|
|
gap: 30px;
|
|
flex-wrap: wrap;
|
|
text-align: center;
|
|
}
|
|
& p {
|
|
margin-bottom: 0;
|
|
font-weight: 500;
|
|
color: var(--tg-heading-color);
|
|
}
|
|
}
|
|
}
|
|
&__content {
|
|
&-two {
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 30px;
|
|
right: 30px;
|
|
top: 50%;
|
|
@include transform(translateY(-50%));
|
|
padding: 30px 0;
|
|
@include transition(0.5s);
|
|
margin-top: 100px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
& .title {
|
|
font-size: 24px;
|
|
font-weight: var(--tg-fw-semi-bold);
|
|
color: var(--tg-color-white-default);
|
|
margin-bottom: 5px;
|
|
}
|
|
& span {
|
|
display: block;
|
|
font-size: 15px;
|
|
font-weight: var(--tg-fw-medium);
|
|
color: var(--tg-theme-primary);
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
&-three {
|
|
width: 392px;
|
|
background: var(--tg-theme-secondary);
|
|
border-radius: 15px;
|
|
padding: 60px 60px;
|
|
position: absolute;
|
|
left: 105px;
|
|
top: 50%;
|
|
z-index: 2;
|
|
@include transform(translateY(-50%));
|
|
@media #{$lg} {
|
|
width: 360px;
|
|
padding: 40px 40px;
|
|
left: 80px;
|
|
}
|
|
@media #{$md} {
|
|
left: 50px;
|
|
}
|
|
@media #{$xs} {
|
|
width: 100%;
|
|
position: unset;
|
|
@include transform(translateY(0));
|
|
}
|
|
& span {
|
|
font-weight: 500;
|
|
color: var(--tg-theme-primary);
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
& .title {
|
|
font-size: 24px;
|
|
margin-bottom: 18px;
|
|
color: var(--tg-color-white-default);
|
|
}
|
|
& p {
|
|
margin-bottom: 25px;
|
|
color: var(--tg-color-gray-3);
|
|
}
|
|
& .btn {
|
|
background: var(--tg-color-white-default);
|
|
color: var(--tg-heading-color);
|
|
&:hover {
|
|
color: var(--tg-color-white-default);
|
|
}
|
|
}
|
|
}
|
|
&-four {
|
|
@include flexbox();
|
|
align-items: center;
|
|
gap: 20px;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
left: 50px;
|
|
right: 50px;
|
|
bottom: 50px;
|
|
@media #{$xl} {
|
|
left: 25px;
|
|
right: 25px;
|
|
bottom: 30px;
|
|
}
|
|
& .left-content {
|
|
& .title {
|
|
margin-bottom: 10px;
|
|
font-size: 30px;
|
|
color: var(--tg-color-white-default);
|
|
@media #{$xl} {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
& span {
|
|
display: block;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: var(--tg-theme-primary);
|
|
line-height: 1;
|
|
}
|
|
}
|
|
& .right-arrow {
|
|
width: 50px;
|
|
height: 50px;
|
|
flex: 0 0 auto;
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--tg-theme-secondary);
|
|
color: var(--tg-color-white-default);
|
|
line-height: 0;
|
|
font-size: 32px;
|
|
@include border-radius(50%);
|
|
opacity: 0;
|
|
@include transition(0.3s);
|
|
&:hover {
|
|
background: var(--tg-theme-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-shape-wrap {
|
|
& img {
|
|
position: absolute;
|
|
z-index: -1;
|
|
&:nth-child(1) {
|
|
left: 0;
|
|
bottom: 10%;
|
|
}
|
|
&:nth-child(2) {
|
|
right: 2%;
|
|
top: 22%;
|
|
@media #{$lg} {
|
|
top: 16%;
|
|
}
|
|
@media #{$xs} {
|
|
top: 10.7%;
|
|
width: 80px;
|
|
right: 0;
|
|
}
|
|
@media #{$sm} {
|
|
top: 9.7%;
|
|
width: 80px;
|
|
right: 2%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__shape-wrap {
|
|
&-two {
|
|
& img {
|
|
position: absolute;
|
|
z-index: -1;
|
|
right: 0;
|
|
top: 0;
|
|
@media #{$xs} {
|
|
width: 250px;
|
|
}
|
|
}
|
|
}
|
|
&-three {
|
|
& img {
|
|
position: absolute;
|
|
z-index: -1;
|
|
&:nth-child(1) {
|
|
right: 0;
|
|
top: 0;
|
|
@media #{$md} {
|
|
width: 200px;
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
left: 20%;
|
|
bottom: 13%;
|
|
@media #{$lg} {
|
|
left: 6%;
|
|
bottom: 12%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__nav {
|
|
&-wrap {
|
|
@media #{$xs} {
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
}
|
|
& .project-button-prev {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
@include transform(translateY(-50%) rotate(180deg));
|
|
width: 60px;
|
|
height: 60px;
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--tg-color-white-default);
|
|
line-height: 0;
|
|
@include border-radius(50%);
|
|
z-index: 3;
|
|
font-size: 28px;
|
|
color: var(--tg-theme-secondary);
|
|
@include transition(0.3s);
|
|
@media #{$md} {
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 25px;
|
|
}
|
|
@media #{$xs} {
|
|
visibility: hidden;
|
|
}
|
|
&:hover {
|
|
background: var(--tg-theme-secondary);
|
|
color: var(--tg-color-white-default);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
& .project-button-next {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
@include transform(translateY(-50%));
|
|
width: 60px;
|
|
height: 60px;
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--tg-color-white-default);
|
|
line-height: 0;
|
|
@include border-radius(50%);
|
|
z-index: 3;
|
|
font-size: 28px;
|
|
color: var(--tg-theme-secondary);
|
|
@include transition(0.3s);
|
|
@media #{$md} {
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 25px;
|
|
}
|
|
@media #{$xs} {
|
|
visibility: hidden;
|
|
}
|
|
&:hover {
|
|
background: var(--tg-theme-secondary);
|
|
color: var(--tg-color-white-default);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__details {
|
|
&-area {
|
|
padding: 40px 0;
|
|
@media #{$xs} {
|
|
padding: 100px 0;
|
|
}
|
|
&-one {
|
|
padding: 0 0 100px;
|
|
@media #{$xs} {
|
|
padding: 100px 0;
|
|
}
|
|
}
|
|
}
|
|
&-top {
|
|
& .row {
|
|
& .col-70 {
|
|
width: 70.4%;
|
|
flex: 0 0 auto;
|
|
@media #{$lg} {
|
|
width: 64.4%;
|
|
}
|
|
@media #{$md} {
|
|
width: 100%;
|
|
}
|
|
}
|
|
& .col-30 {
|
|
width: 29.6%;
|
|
flex: 0 0 auto;
|
|
@media #{$lg} {
|
|
width: 35.6%;
|
|
}
|
|
@media #{$md} {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-thumb {
|
|
height: 100%;
|
|
padding-bottom: 30px;
|
|
& img {
|
|
@include border-radius(10px);
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
min-height: 250px;
|
|
}
|
|
& video {
|
|
@include border-radius(10px);
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
min-height: 250px;
|
|
}
|
|
}
|
|
&-info {
|
|
background: var(--tg-heading-color);
|
|
padding: 25px 30px 30px;
|
|
@include border-radius(10px);
|
|
margin-bottom: 30px;
|
|
margin-left: 20px;
|
|
@media #{$lg} {
|
|
margin-left: 0;
|
|
padding: 25px 20px 30px;
|
|
}
|
|
@media #{$md} {
|
|
padding: 25px 30px 30px;
|
|
}
|
|
& .title {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: var(--tg-color-white-default);
|
|
margin-bottom: 22px;
|
|
position: relative;
|
|
padding-bottom: 15px;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 30px;
|
|
height: 4px;
|
|
background: var(--tg-theme-primary);
|
|
@include border-radius(4px);
|
|
}
|
|
}
|
|
& > .list-wrap {
|
|
& > li {
|
|
@include flexbox();
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
font-family: var(--tg-heading-font-family);
|
|
color: var(--tg-color-white-default);
|
|
border-bottom: 1px solid #292c7c;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 15px;
|
|
& span {
|
|
font-weight: 400;
|
|
color: #aaacdf;
|
|
width: 80px;
|
|
margin-right: 10px;
|
|
}
|
|
&:last-child {
|
|
border-bottom: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
& .project-social {
|
|
@include flexbox();
|
|
align-items: center;
|
|
gap: 15px;
|
|
& li {
|
|
& a {
|
|
font-size: 18px;
|
|
color: var(--tg-color-white-default);
|
|
&:hover {
|
|
color: var(--tg-theme-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-content {
|
|
& > .title {
|
|
font-size: 36px;
|
|
margin-bottom: 20px;
|
|
@media #{$xs} {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
& > p {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
&-inner {
|
|
margin-top: 70px;
|
|
@media #{$xs} {
|
|
margin-top: 40px;
|
|
}
|
|
&-content {
|
|
& .title {
|
|
font-size: 36px;
|
|
margin-bottom: 20px;
|
|
font-weight: 600;
|
|
@media #{$xs} {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
& p {
|
|
margin-bottom: 0;
|
|
&.last-info {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
& .content-inner {
|
|
gap: 30px 0;
|
|
margin: 30px 0;
|
|
}
|
|
}
|
|
&-img {
|
|
text-align: right;
|
|
@media #{$md} {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
& img {
|
|
@include border-radius(10px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.link-arrow {
|
|
& a {
|
|
width: 50px;
|
|
height: 50px;
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--tg-color-gray-3);
|
|
border: 1px solid var(--tg-border-1);
|
|
@include border-radius(50%);
|
|
color: var(--tg-theme-secondary);
|
|
font-size: 18px;
|
|
line-height: 0;
|
|
--arrow-hover-move-x: 110%;
|
|
--arrow-hover-move-y: 100%;
|
|
& svg {
|
|
width: 20px;
|
|
& path {
|
|
transition: transform 0.38s cubic-bezier(0.37, 0.08, 0.02, 0.93), opacity 0.18s ease-out;
|
|
&:nth-of-type(1) {
|
|
@include transform(translateX(0) translateY(0));
|
|
opacity: 1;
|
|
transition-delay: 0.15s, 0.15s;
|
|
}
|
|
&:nth-of-type(2) {
|
|
@include transform(
|
|
translateX(calc(-1 * var(--arrow-hover-move-x))) translateY(var(--arrow-hover-move-y))
|
|
);
|
|
opacity: 0.5;
|
|
transition-delay: 0s, 0s;
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
background: var(--tg-theme-secondary);
|
|
border-color: var(--tg-theme-secondary);
|
|
color: var(--tg-color-white-default);
|
|
& svg {
|
|
& path {
|
|
&:nth-of-type(1) {
|
|
@include transform(
|
|
translateX(var(--arrow-hover-move-x)) translateY(calc(-1 * var(--arrow-hover-move-y)))
|
|
);
|
|
opacity: 0;
|
|
transition-delay: 0s, 0s;
|
|
}
|
|
&:nth-of-type(2) {
|
|
@include transform(translateX(0) translateY(0));
|
|
opacity: 1;
|
|
transition-delay: 0.15s, 0.15s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&-two {
|
|
& a {
|
|
width: 50px;
|
|
height: 50px;
|
|
@include flexbox();
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--tg-theme-primary);
|
|
color: var(--tg-color-white-default);
|
|
border: none;
|
|
@include border-radius(50%);
|
|
margin: 0 auto;
|
|
&:hover {
|
|
color: var(--tg-color-white-default);
|
|
background: var(--tg-theme-secondary);
|
|
}
|
|
}
|
|
}
|
|
}
|