init
This commit is contained in:
272
src/assets/css/portfolio-gallery.css
Normal file
272
src/assets/css/portfolio-gallery.css
Normal file
@@ -0,0 +1,272 @@
|
||||
.gallery-section {
|
||||
margin: 100px 0;
|
||||
}
|
||||
.gallery-section .tabs {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.gallery-section .tabs button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 36px;
|
||||
padding: 0 13px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #505068;
|
||||
color: #505068;
|
||||
}
|
||||
.gallery-section .tabs button .txt {
|
||||
font-size: 14px;
|
||||
color: inherit;
|
||||
}
|
||||
.gallery-section .tabs button:hover {
|
||||
border-color: #0274b3;
|
||||
color: #0274b3;
|
||||
}
|
||||
.gallery-section .tabs button.current {
|
||||
border-color: #0274b3;
|
||||
background-color: #0274b3;
|
||||
color: #fff;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail {
|
||||
margin: 24px 0 32px;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail p {
|
||||
display: none;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail .thumbnail {
|
||||
position: relative;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail .thumbnail::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image: linear-gradient(#00000000, #000000);
|
||||
opacity: 0;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail .thumbnail:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail .thumbnail img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail .thumbnail .expand-icon {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(50%);
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail .thumbnail .expand-icon svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transition: scale 200ms;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail .thumbnail .cta {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
transform: translate(50%, 50%);
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 4px 12px 4px 10px;
|
||||
background-color: #eaf7ff;
|
||||
border-radius: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail .thumbnail .cta .txt {
|
||||
font-size: 14px;
|
||||
color: #0274b3;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail .thumbnail .cta svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: #0274b3;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail .thumbnail:hover .expand-icon svg {
|
||||
scale: 1.15;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail .thumbnail:hover .cta {
|
||||
opacity: 1;
|
||||
height: 40px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.gallery-section .gallery-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px 16px;
|
||||
list-style-type: none;
|
||||
}
|
||||
.gallery-section .gallery-items li {
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
.gallery-section .gallery-items li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(#00141f00, #00141f);
|
||||
opacity: 0;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
.gallery-section .gallery-items li img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 4 / 3;
|
||||
object-fit: cover;
|
||||
}
|
||||
.gallery-section .gallery-items li .title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 0px 12px 16px;
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
.gallery-section .gallery-items li .title .txt {
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
.gallery-section .gallery-items li .title svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: #fff;
|
||||
margin-right: auto;
|
||||
}
|
||||
.gallery-section .gallery-items li:hover .title {
|
||||
opacity: 1;
|
||||
}
|
||||
.gallery-section .gallery-items li:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
.gallery-section .b-cta {
|
||||
height: 40px;
|
||||
background-color: var(--color-primary);
|
||||
border-radius: 10px;
|
||||
padding: 0 12px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
width: fit-content;
|
||||
margin: 32px auto 0;
|
||||
}
|
||||
.gallery-section .b-cta .txt {
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
}
|
||||
.gallery-section .b-cta svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: #fff;
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 32px;
|
||||
}
|
||||
.pagination ul {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin: initial;
|
||||
}
|
||||
.pagination ul a {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
border: none;
|
||||
color: #000;
|
||||
transform: none;
|
||||
line-height: normal;
|
||||
transition: none;
|
||||
box-shadow: 2px 10px 20px 0 #595c6018;
|
||||
}
|
||||
.pagination ul a svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
stroke: #505068;
|
||||
}
|
||||
.pagination ul li:hover a {
|
||||
background-color: #e5efff;
|
||||
}
|
||||
.pagination ul li:hover a svg {
|
||||
stroke: var(--color-primary);
|
||||
}
|
||||
.pagination ul .current a {
|
||||
background-color: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.gallery-section .gallery-items {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
.gallery-section .gallery-thumbnail .thumbnail {
|
||||
margin: 0 -20px;
|
||||
border-radius: 0;
|
||||
}
|
||||
.gallery-section .gallery-thumbnail p {
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
margin-top: 16px;
|
||||
color: var(--color-title);
|
||||
}
|
||||
.gallery-section .gallery-items li:hover::before,
|
||||
.gallery-section .gallery-items li .title svg {
|
||||
display: none;
|
||||
}
|
||||
.gallery-section .gallery-items li .title {
|
||||
position: static;
|
||||
padding: initial;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.gallery-section .gallery-items li .title .txt {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
margin-top: 8px;
|
||||
color: var(--color-title);
|
||||
}
|
||||
.gallery-section .gallery-items li {
|
||||
overflow: visible;
|
||||
}
|
||||
.gallery-section .gallery-items li img {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
444
src/assets/css/portfolio-responsive.css
Normal file
444
src/assets/css/portfolio-responsive.css
Normal file
@@ -0,0 +1,444 @@
|
||||
@media screen and (max-width: 1400px) {
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
.about-section > .container {
|
||||
flex-direction: column;
|
||||
padding: 48px 20px 78px;
|
||||
gap: 24px;
|
||||
}
|
||||
.about-section-title,
|
||||
.about-section-p {
|
||||
flex-basis: initial;
|
||||
}
|
||||
.about-section-uptitle,
|
||||
.about-section-title svg {
|
||||
display: none;
|
||||
}
|
||||
.vs,
|
||||
.column-titlec,
|
||||
.column-titler {
|
||||
display: none;
|
||||
}
|
||||
.challenge-header {
|
||||
text-align: right;
|
||||
}
|
||||
.challenge-header p {
|
||||
font-size: 14px;
|
||||
}
|
||||
.mobile-toggle {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.toggle-btn {
|
||||
display: none;
|
||||
}
|
||||
.toggle-btn.is-active {
|
||||
display: flex;
|
||||
}
|
||||
.scroll-pagination {
|
||||
display: flex;
|
||||
}
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.column {
|
||||
min-width: 100%;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
.form-section-left {
|
||||
flex: 0 1 100%;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.form-section-right {
|
||||
flex: 0 1 100%;
|
||||
}
|
||||
|
||||
.form-img p {
|
||||
font-size: 36px;
|
||||
}
|
||||
.form-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.media {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 992px) and (orientation: landscape) {
|
||||
.portfolio-logo-wrapper {
|
||||
width: 660px !important;
|
||||
max-width: 660px !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.about-section {
|
||||
padding: initial;
|
||||
}
|
||||
.about-section > .container {
|
||||
border-radius: initial;
|
||||
}
|
||||
.about-section-title {
|
||||
font-size: 48px;
|
||||
}
|
||||
.about-section-p .bold {
|
||||
font-size: 20px;
|
||||
}
|
||||
.related-boxes {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.related-button {
|
||||
display: none;
|
||||
}
|
||||
.related-button-mobile {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
height: 40px;
|
||||
padding: 0px 12px 0px 10px;
|
||||
background-color: var(--color-primary);
|
||||
border-radius: 10px;
|
||||
color: #ffffff;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.related-button-mobile span {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.showcase-section > .container-showcase {
|
||||
height: calc(var(--slides-count) * 100dvh);
|
||||
}
|
||||
.showcase-sticky {
|
||||
height: 100vh;
|
||||
}
|
||||
.showcase-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: block;
|
||||
}
|
||||
.showcase-media-side,
|
||||
.showcase-text-side {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.showcase-media-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: unset;
|
||||
border-radius: 0;
|
||||
}
|
||||
.media-item {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
transform: translateY(80px);
|
||||
transition:
|
||||
opacity 0.9s ease,
|
||||
transform 0.9s ease;
|
||||
}
|
||||
.media-item.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
z-index: 2;
|
||||
}
|
||||
.mobile-pos-one img,
|
||||
.mobile-pos-one video,
|
||||
.mobile-pos-two img,
|
||||
.mobile-pos-two video,
|
||||
.mobile-pos-three img,
|
||||
.mobile-pos-three video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.media-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.gradient-one::after,
|
||||
.gradient-two::after,
|
||||
.gradient-three::after {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 20, 31, 0.9) 6.09%,
|
||||
rgba(0, 20, 31, 0.8) 17.54%,
|
||||
rgba(0, 20, 31, 0.7) 26.09%,
|
||||
rgba(0, 20, 31, 0.6) 36.3%,
|
||||
rgba(0, 20, 31, 0.5) 43.43%,
|
||||
rgba(0, 63, 97, 0) 87.09%
|
||||
);
|
||||
}
|
||||
.showcase-text-side {
|
||||
z-index: 5;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.text-track {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.text-item {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
padding: 0 24px calc(env(safe-area-inset-bottom) + 48px);
|
||||
|
||||
color: white;
|
||||
|
||||
opacity: 0;
|
||||
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
|
||||
transform: translateY(60px);
|
||||
|
||||
transition:
|
||||
transform 0.6s ease,
|
||||
opacity 0.6s ease,
|
||||
visibility 0.6s ease;
|
||||
}
|
||||
.text-item.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
z-index: 5;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.text-item span {
|
||||
color: #aebcc5;
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.text-item h2 {
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.text-item p {
|
||||
color: #e9ecee;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.container-showcase {
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.showcase-text-side::after {
|
||||
display: none;
|
||||
}
|
||||
.hero-section {
|
||||
padding-right: 19px;
|
||||
padding-bottom: 122px;
|
||||
margin-top: 78px;
|
||||
}
|
||||
|
||||
.hero-section video,
|
||||
.hero-section .bg-gif {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.hero-category {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.hero-category p {
|
||||
font-size: 13px;
|
||||
}
|
||||
.hero-category::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 225px;
|
||||
height: 1px;
|
||||
background: #8898a3;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 24px;
|
||||
padding-left: 850px;
|
||||
}
|
||||
.hero-meta-inner {
|
||||
font-size: 13px;
|
||||
}
|
||||
.hero-scroll-down span {
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.portfolio-floating-nav {
|
||||
width: 390px;
|
||||
max-width: calc(100vw - 16px);
|
||||
bottom: -140px;
|
||||
}
|
||||
|
||||
.portfolio-floating-nav.show {
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
.portfolio-nav-inner {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
gap: 8px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
.portfolio-nav-action {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.portfolio-nav-scroll-wrapper,
|
||||
.portfolio-nav-scroll {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.portfolio-nav-scroll {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.portfolio-nav-links {
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.portfolio-nav-btn {
|
||||
font-size: 12px;
|
||||
padding: 7px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.portfolio-nav-meeting {
|
||||
min-width: auto;
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
padding: 7px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.portfolio-scroll-track {
|
||||
transform: translateX(-50%);
|
||||
bottom: 6px;
|
||||
right: 187px;
|
||||
width: 56px;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: #d9d9d9;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portfolio-scroll-thumb {
|
||||
width: 28px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.next-popup,
|
||||
.prev-popup {
|
||||
display: none;
|
||||
}
|
||||
.down-txt {
|
||||
display: block;
|
||||
}
|
||||
.img-popup-img {
|
||||
width: 390px;
|
||||
height: 292px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
.about-section-circleup {
|
||||
top: -192px;
|
||||
right: -210px;
|
||||
}
|
||||
.about-section-circledown {
|
||||
bottom: -240px;
|
||||
left: -220px;
|
||||
}
|
||||
.process-section > .container {
|
||||
padding: 0;
|
||||
}
|
||||
.process-title {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.step {
|
||||
padding: 24px 67px 24px 20px;
|
||||
}
|
||||
.step-title {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.step.active .step-title {
|
||||
font-size: 18px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.toggle-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.step-number-bg {
|
||||
right: 15px;
|
||||
top: 6px;
|
||||
font-size: 40px;
|
||||
font-weight: normal;
|
||||
letter-spacing: -5px;
|
||||
transform: initial;
|
||||
}
|
||||
.step-list li,
|
||||
.step-intro {
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
color: var(--color-body-text);
|
||||
}
|
||||
.star-form {
|
||||
top: 35px;
|
||||
left: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
.form-section-text h2 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.form-section-text p,
|
||||
.result-section-header p,
|
||||
.process-title p,
|
||||
.related-titlep {
|
||||
font-size: 14px;
|
||||
}
|
||||
.form-input,
|
||||
.form-text {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.side-buttons {
|
||||
display: none;
|
||||
}
|
||||
.container-hero {
|
||||
max-width: 1240px;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
1807
src/assets/css/portfolio.css
Normal file
1807
src/assets/css/portfolio.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user