1824 lines
32 KiB
CSS
1824 lines
32 KiB
CSS
section > .container {
|
||
/* اینجا کنتیر عمومی تعریف شده برای سکشن ها */
|
||
|
||
/* چهل پیکسل اضافه برای پدینگ راست و چپ */
|
||
max-width: 1240px;
|
||
padding: 0 20px;
|
||
margin: 0 auto;
|
||
}
|
||
.about-section {
|
||
padding: 0 20px;
|
||
}
|
||
section[class*='-section'] {
|
||
margin-bottom: 100px;
|
||
}
|
||
.container-hero{
|
||
max-width: 1240px;
|
||
padding: 0 20px;
|
||
margin: 0 auto;
|
||
}
|
||
.hero-section {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 16 / 8;
|
||
max-height: 725px;
|
||
/* height: clamp(500px, 70vh, 725px); */
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: end;
|
||
justify-content: flex-start;
|
||
/* color: #fff; */
|
||
/* padding-right: 120px; */
|
||
padding-bottom: 88px;
|
||
margin-top: 80px;
|
||
}
|
||
.hero-section video,
|
||
.hero-section .bg-gif {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
.hero-section::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
background:
|
||
linear-gradient(
|
||
0deg,
|
||
rgba(0, 20, 31, 0.9) -11.31%,
|
||
rgba(0, 20, 31, 0.8) -3.78%,
|
||
rgba(0, 20, 31, 0.7) 1.84%,
|
||
rgba(0, 20, 31, 0.578084) 8.55%,
|
||
rgba(0, 20, 31, 0.493025) 13.23%,
|
||
rgba(0, 63, 97, 0) 41.93%
|
||
),
|
||
linear-gradient(106.84deg, rgba(0, 63, 97, 0) 0%, rgba(0, 20, 31, 0.6) 94.22%),
|
||
linear-gradient(0deg, rgba(0, 20, 31, 0.15), rgba(0, 20, 31, 0.15));
|
||
}
|
||
.desktop-file{
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
.mobile-file{
|
||
display: none;
|
||
}
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
text-align: right;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 1200px;
|
||
}
|
||
|
||
.hero-category {
|
||
/* position: relative;
|
||
display: inline-block; */
|
||
border-bottom: 1px solid #8898a3;
|
||
padding-bottom: 8px; /* فاصله متن تا خط */
|
||
width: fit-content;
|
||
}
|
||
.hero-category p {
|
||
color: #eaeef0;
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 36px;
|
||
line-height: 1.5;
|
||
font-weight: bold;
|
||
margin-bottom: 16px;
|
||
margin-top: 8px;
|
||
color: #eaeef0;
|
||
padding-left: 600px;
|
||
}
|
||
.hero-meta {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
.hero-meta-inner {
|
||
display: flex;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
color: var(--color-pastel-main);
|
||
}
|
||
.hero-scroll-down {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 2;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
opacity: 0.8;
|
||
}
|
||
.hero-scroll-down span {
|
||
font-size: 12px;
|
||
margin-top: 8px;
|
||
color: #ffffff;
|
||
}
|
||
.hero-scroll-down svg {
|
||
color: #777;
|
||
transition: fill 0.3s ease;
|
||
}
|
||
.icon-main * {
|
||
animation: mainStep 3s infinite;
|
||
}
|
||
.arrow-1 * {
|
||
animation: firstStep 3s infinite;
|
||
}
|
||
.arrow-2 * {
|
||
animation: secondStep 3s infinite;
|
||
}
|
||
@keyframes mainStep {
|
||
0% {
|
||
color: #777;
|
||
filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
|
||
}
|
||
|
||
10%,
|
||
85% {
|
||
color: #fff;
|
||
filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
|
||
}
|
||
|
||
100% {
|
||
color: #777;
|
||
filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
|
||
}
|
||
}
|
||
@keyframes firstStep {
|
||
0%,
|
||
40% {
|
||
color: #fff;
|
||
}
|
||
50%,
|
||
100% {
|
||
color: #777;
|
||
}
|
||
}
|
||
@keyframes secondStep {
|
||
0%,
|
||
40% {
|
||
color: #777;
|
||
}
|
||
50%,
|
||
90% {
|
||
color: #fff;
|
||
}
|
||
100% {
|
||
color: #777;
|
||
}
|
||
}
|
||
|
||
.portfolio-floating-nav {
|
||
position: fixed;
|
||
left: 50%;
|
||
bottom: -140px;
|
||
transform: translateX(-50%);
|
||
width: 668px;
|
||
z-index: 999;
|
||
transition: bottom 0.45s ease;
|
||
}
|
||
.portfolio-floating-nav.show {
|
||
bottom: 24px;
|
||
}
|
||
.portfolio-nav-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
background: #ffffff;
|
||
border: 1px solid #acacac;
|
||
border-radius: 32px;
|
||
padding: 8px 16px;
|
||
overflow: hidden;
|
||
}
|
||
.portfolio-nav-scroll::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.portfolio-nav-links {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-width: max-content;
|
||
padding: 8px;
|
||
background-color: #f0f4f8;
|
||
border-radius: 10px;
|
||
width: max-content;
|
||
|
||
}
|
||
.portfolio-nav-scroll-wrapper {
|
||
position: relative;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.portfolio-nav-scroll {
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
scrollbar-width: none;
|
||
direction: rtl;
|
||
flex: 1;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
cursor: grab;
|
||
}
|
||
.portfolio-nav-scroll::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.portfolio-nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
width: max-content;
|
||
}
|
||
.portfolio-scroll-track {
|
||
/* position: absolute; */
|
||
position: fixed;
|
||
bottom: 10px;
|
||
width: 56px;
|
||
height: 4px;
|
||
right: 460px;
|
||
border-radius: 999px;
|
||
background: #d9d9d9;
|
||
overflow: hidden;
|
||
}
|
||
.portfolio-scroll-thumb {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 28px;
|
||
height: 100%;
|
||
border-radius: 999px;
|
||
background: var(--color-primary);
|
||
transition: right 0.08s linear;
|
||
|
||
}
|
||
.portfolio-nav-btn {
|
||
border-radius: 10px;
|
||
border: 1px solid var(--color-body-text);
|
||
padding: 8px 12px;
|
||
flex-shrink: 0;
|
||
font-size: 13px;
|
||
font-weight: normal;
|
||
color: var(--color-body-text);
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.portfolio-nav-btn:hover,
|
||
.portfolio-nav-btn.active {
|
||
border-color: var(--color-primary);
|
||
color: var(--color-primary);
|
||
}
|
||
.portfolio-nav-project-btn {
|
||
border-radius: 10px;
|
||
background-color: var(--color-primary);
|
||
padding: 8px 12px;
|
||
flex-shrink: 0;
|
||
font-size: 13px;
|
||
font-weight: normal;
|
||
color: #ffffff;
|
||
display: flex;
|
||
text-align: center;
|
||
align-items: center;
|
||
gap: 4px;
|
||
min-width: 135px;
|
||
}
|
||
.portfolio-nav-project-btn svg {
|
||
align-items: center;
|
||
}
|
||
.portfolio-nav-project-btn:hover {
|
||
background: var(--color-primary);
|
||
}
|
||
.portfolio-nav-link-btn {
|
||
background: var(--color-primary);
|
||
color: white;
|
||
}
|
||
.portfolio-nav-link-btn:hover {
|
||
background-color: var(--color-primary);
|
||
}
|
||
.portfolio-nav-meeting {
|
||
background: #c5d7ec;
|
||
color: var(--color-primary);
|
||
font-size: 13px;
|
||
font-weight: normal;
|
||
padding: 8px 12px;
|
||
border-radius: 10px;
|
||
min-width: 111px;
|
||
}
|
||
.portfolio-nav-meeting:hover {
|
||
background: #c8ddf1;
|
||
}
|
||
|
||
.portfolio-preview-modal {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 2000;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: 0.35s ease;
|
||
}
|
||
.portfolio-preview-modal.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
.portfolio-preview-backdrop {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.72);
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
.portfolio-preview-content {
|
||
position: relative;
|
||
width: min(1000px, calc(100% - 32px));
|
||
max-height: calc(100vh - 40px);
|
||
overflow: auto;
|
||
background: white;
|
||
border-radius: 24px;
|
||
padding: 20px;
|
||
margin: 20px auto;
|
||
z-index: 2;
|
||
}
|
||
.portfolio-preview-content img {
|
||
width: 100%;
|
||
display: block;
|
||
border-radius: 18px;
|
||
}
|
||
.portfolio-preview-close {
|
||
position: sticky;
|
||
top: 0;
|
||
margin-right: auto;
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: #0f87ca;
|
||
color: white;
|
||
font-size: 22px;
|
||
cursor: pointer;
|
||
margin-bottom: 16px;
|
||
}
|
||
.portfolio-popup {
|
||
position: fixed;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: #04263b;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 9999;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: 0.35s ease;
|
||
}
|
||
.portfolio-popup.active {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
.portfolio-logo-wrapper {
|
||
position: relative;
|
||
top: 69px;
|
||
/* width: 794px; */
|
||
height: 892px;
|
||
overflow: hidden;
|
||
transition:
|
||
width 0.5s ease,
|
||
height 0.5s ease;
|
||
}
|
||
.portfolio-wrapper {
|
||
display: flex;
|
||
gap: 0;
|
||
position: relative;
|
||
}
|
||
.portfolio-modal {
|
||
width: 704px;
|
||
height: 684px;
|
||
background: #ffffff;
|
||
border-radius: 7px;
|
||
overflow: hidden;
|
||
padding: 6px 7px;
|
||
transition:
|
||
width 0.5s ease,
|
||
height 0.5s ease,
|
||
border-radius 0.5s ease,
|
||
transform 0.5s ease;
|
||
}
|
||
.portfolio-popup.active .portfolio-modal {
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
.portfolio-logo-wrapper.mobile-view {
|
||
width: 350px;
|
||
height: 820px;
|
||
}
|
||
.portfolio-logo-wrapper.mobile-view .logo-popup {
|
||
left: -50%;
|
||
}
|
||
.portfolio-logo-wrapper.mobile-view .portfolio-modal {
|
||
width: 360px;
|
||
height: 580px;
|
||
}
|
||
.portfolio-logo-wrapper.mobile-view .desktop-image {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.portfolio-logo-wrapper.mobile-view .mobile-image {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
.close-popup {
|
||
position: absolute;
|
||
top: 24px;
|
||
right: 20px;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
z-index: 99999;
|
||
pointer-events: auto;
|
||
}
|
||
.close-popup svg {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.close-popup:hover svg {
|
||
transform: rotate(90deg);
|
||
}
|
||
.next-popup {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 24px;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
.prev-popup {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 24px;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
transform: rotate(180deg);
|
||
}
|
||
.portfolio-scroll {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
border-radius: 7px;
|
||
scroll-behavior: smooth;
|
||
overscroll-behavior: contain;
|
||
scrollbar-width: none;
|
||
border: 1px solid var(--color-primary);
|
||
position: relative;
|
||
}
|
||
.portfolio-scroll::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.portfolio-scroll img {
|
||
width: 100%;
|
||
}
|
||
.portfolio-scroll::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.custom-scroll {
|
||
width: 39px;
|
||
height: 112px;
|
||
background: #ffffff;
|
||
border-radius: 0 7px 7px 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 10;
|
||
top: 125px;
|
||
}
|
||
.custom-scroll::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -40px;
|
||
left: 0;
|
||
width: 29px;
|
||
height: 40px;
|
||
background: transparent;
|
||
border-bottom-left-radius: 7px;
|
||
box-shadow: -6px 6px 0 #ffffff;
|
||
}
|
||
|
||
.custom-scroll::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -40px;
|
||
left: 0;
|
||
width: 35px;
|
||
height: 40px;
|
||
background: transparent;
|
||
border-top-left-radius: 7px;
|
||
box-shadow: -6px -6px 0 #ffffff;
|
||
}
|
||
.logo-popup::before {
|
||
content: '';
|
||
position: absolute;
|
||
right: -30px;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 30px;
|
||
height: 30px;
|
||
background: transparent;
|
||
border-bottom-left-radius: 7px;
|
||
box-shadow: -6px 6px 0 #ffffff;
|
||
}
|
||
|
||
.portfolio-modal-switch {
|
||
width: 90px;
|
||
padding: 14px 10px;
|
||
border-radius: 60px;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||
backdrop-filter: blur(10px);
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 18px;
|
||
|
||
position: relative;
|
||
}
|
||
.switch-btn {
|
||
width: 58px;
|
||
height: 58px;
|
||
border: none;
|
||
border-radius: 50%;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
transition: all 0.35s ease;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.switch-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #2563eb, #06b6d4);
|
||
opacity: 0;
|
||
transform: scale(0.7);
|
||
transition: all 0.35s ease;
|
||
z-index: -1;
|
||
}
|
||
|
||
.switch-btn.active::before {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.switch-btn:hover {
|
||
transform: scale(1.08);
|
||
}
|
||
.icon,
|
||
.arrow {
|
||
fill: white;
|
||
}
|
||
|
||
.portfolio-modal-switch::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 58px;
|
||
height: 58px;
|
||
border-radius: 50%;
|
||
background: white;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 14px;
|
||
transition: top 0.45s cubic-bezier(0.76, 0, 0.24, 1);
|
||
z-index: 1;
|
||
}
|
||
|
||
.portfolio-modal-switch.mobile-active::before {
|
||
top: 108px;
|
||
}
|
||
.rotate-overlay {
|
||
display: none;
|
||
}
|
||
|
||
.rotate-overlay.show {
|
||
display: flex;
|
||
}
|
||
|
||
.portfolio-logo-wrapper.mobile-view {
|
||
display: block;
|
||
}
|
||
|
||
.portfolio-logo-wrapper.rotated-desktop {
|
||
transform: rotate(90deg);
|
||
transform-origin: center;
|
||
}
|
||
|
||
.logo-popup::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: -26px;
|
||
width: 26px;
|
||
height: 30px;
|
||
background: transparent;
|
||
border-bottom-right-radius: 7px;
|
||
box-shadow: 6px 6px 0 #ffffff;
|
||
}
|
||
.scroll-track {
|
||
width: 5px;
|
||
height: 86px;
|
||
background: #dfdfdf;
|
||
border-radius: 26.6px;
|
||
position: relative;
|
||
}
|
||
.scroll-thumb {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
user-select: none;
|
||
touch-action: none;
|
||
border-radius: 50%;
|
||
background: var(--color-primary);
|
||
width: 16.62px;
|
||
height: 16.62px;
|
||
border: 5px solid #d9ecff;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 12px var(--color-pastel-main);
|
||
z-index: 100;
|
||
}
|
||
body.dragging-scroll {
|
||
user-select: none;
|
||
}
|
||
.side-buttons-wrapper {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 48px;
|
||
position: relative;
|
||
top: 69px;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.side-buttons {
|
||
position: relative;
|
||
top: 168px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
.logo-popup {
|
||
width: 151px;
|
||
padding: 4px 0;
|
||
background: #fff;
|
||
border-radius: 7px 7px 0 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
left: -70%;
|
||
top: 0;
|
||
align-items: center;
|
||
}
|
||
.logo-popup-img img {
|
||
width: 109px;
|
||
height: 32px;
|
||
}
|
||
/* پیشفرض دسکتاپ */
|
||
.desktop-image {
|
||
display: block;
|
||
}
|
||
|
||
.mobile-image {
|
||
display: none;
|
||
}
|
||
|
||
.portfolio-logo-wrapper.mobile-view .desktop-image {
|
||
display: none;
|
||
}
|
||
|
||
.portfolio-logo-wrapper.mobile-view .mobile-image {
|
||
display: block;
|
||
}
|
||
.desktop-image {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
z-index: 2;
|
||
}
|
||
.mobile-image {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
z-index: 1;
|
||
}
|
||
.desktop-image,
|
||
.mobile-image {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.4s ease;
|
||
backface-visibility: hidden;
|
||
}
|
||
.portfolio-logo-wrapper.mobile-view .desktop-image {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
.portfolio-logo-wrapper.mobile-view .mobile-image {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
.rotate-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(4, 38, 59, 0.92);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 9990;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: 0.35s ease;
|
||
}
|
||
.rotate-overlay.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
.rotate-message {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
color: #fff;
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
}
|
||
.portfolio-rotate-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
transition: transform 0.6s ease;
|
||
}
|
||
.portfolio-popup.is-rotated2 .next-popup,
|
||
.portfolio-popup.is-rotated2 .prev-popup {
|
||
display: none;
|
||
}
|
||
|
||
.side-buttons-wrapper.is-rotated {
|
||
top: 220px;
|
||
}
|
||
|
||
.portfolio-logo-wrapper.rotated-desktop .portfolio-scroll {
|
||
overflow-x: auto;
|
||
overflow-y: auto;
|
||
}
|
||
.next-popup.disabled,
|
||
.prev-popup.disabled {
|
||
opacity: 0.3;
|
||
pointer-events: none;
|
||
}
|
||
.img-popup-link {
|
||
text-decoration: none;
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.img-popup-link span {
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
line-height: 1.6;
|
||
}
|
||
.img-popup-link svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
.img-popup-img {
|
||
width: 720px;
|
||
height: 540px;
|
||
border-radius: 8px;
|
||
}
|
||
.video-popup-player {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
max-height: 80vh;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.img-popup-img {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
max-height: 80vh;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.about-section > .container {
|
||
position: relative;
|
||
justify-content: space-between;
|
||
display: flex;
|
||
max-width: 1200px;
|
||
border-radius: 10px;
|
||
background-color: #0b7fbf;
|
||
padding: 80px 48px 96px;
|
||
overflow: hidden;
|
||
}
|
||
.about-section-title {
|
||
flex-basis: 47%;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.about-section h2 {
|
||
color: #54a5d2;
|
||
font-size: 56px;
|
||
line-height: 1.2;
|
||
}
|
||
.about-section-uptitle {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
line-height: 1.5;
|
||
margin-bottom: 12px;
|
||
color: #fff;
|
||
}
|
||
.about-section-title svg {
|
||
width: 100%;
|
||
}
|
||
.about-section-p {
|
||
flex-basis: 47%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
z-index: 1;
|
||
margin-top: 24px;
|
||
}
|
||
.about-section-p p {
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
/* 28 % 16 = 1.75 */
|
||
line-height: 1.75;
|
||
color: #e6f2f8;
|
||
}
|
||
.about-section-p .bold {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
/* 34 % 22 ~= 1.5 */
|
||
line-height: 1.5;
|
||
margin-bottom: 16px;
|
||
}
|
||
.about-section-circleup {
|
||
position: absolute;
|
||
display: block;
|
||
width: 356px;
|
||
height: 356px;
|
||
border-radius: 50%;
|
||
top: -142px;
|
||
right: -142px;
|
||
background-color: #1e8ecb;
|
||
z-index: 0;
|
||
}
|
||
.about-section-circledown {
|
||
width: 356px;
|
||
height: 356px;
|
||
background-color: #1e8ecb;
|
||
border-radius: 50%;
|
||
display: block;
|
||
position: absolute;
|
||
z-index: 0;
|
||
bottom: -184px;
|
||
left: -94px;
|
||
}
|
||
|
||
.challenge-section {
|
||
padding: 0px 20px;
|
||
}
|
||
.challenge-section > .container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0;
|
||
}
|
||
.challenge-header {
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-bottom: 24px;
|
||
}
|
||
.challenge-header h2 {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.table-wrapper {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
overflow-x: hidden;
|
||
scroll-snap-type: x mandatory;
|
||
scroll-behavior: smooth;
|
||
max-width: 1200px;
|
||
}
|
||
|
||
.column {
|
||
flex-basis: 50%;
|
||
scroll-snap-align: start;
|
||
}
|
||
.scroll-pagination {
|
||
display: none;
|
||
justify-content: center;
|
||
margin-top: 16px;
|
||
}
|
||
.scroll-dots {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.scroll-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background-color: #d1d5db;
|
||
transition:
|
||
width 0.3s ease,
|
||
background 0.3s ease,
|
||
transform 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
.scroll-dot.active {
|
||
width: 24px;
|
||
border-radius: 8px;
|
||
background-color: var(--color-primary);
|
||
}
|
||
|
||
.column-titlec {
|
||
margin-bottom: 16px;
|
||
color: var(--color-body-text);
|
||
padding: 17px;
|
||
text-align: center;
|
||
}
|
||
.column-titler {
|
||
margin-bottom: 16px;
|
||
color: var(--blue-600);
|
||
padding: 17px;
|
||
text-align: center;
|
||
}
|
||
.items {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
/* max-width: 600px; */
|
||
}
|
||
.itemc,
|
||
.itemr {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
padding: 12px 16px 12px 24px;
|
||
border-radius: 8px;
|
||
/* max-height: 76px;
|
||
overflow: hidden; */
|
||
}
|
||
.itemc {
|
||
background-color: #f0f5fe;
|
||
background-image: url(/src/img/dot-pattrn.svg);
|
||
background-repeat: no-repeat;
|
||
background-position: bottom;
|
||
background-size: auto;
|
||
/* flex-basis: 100%; */
|
||
}
|
||
.itemr {
|
||
background-color: #e5efff;
|
||
position: relative;
|
||
max-width: 600px;
|
||
}
|
||
.itemr::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 20%;
|
||
right: 0;
|
||
width: 2px;
|
||
height: 60%;
|
||
border-radius: 16px;
|
||
background: var(--color-primary);
|
||
}
|
||
.item-textc {
|
||
color: var(--color-body-text);
|
||
}
|
||
.item-textr {
|
||
color: var(--blue-600);
|
||
}
|
||
.item-textc,
|
||
.item-textr {
|
||
display: -webkit-box;
|
||
/* -webkit-line-clamp: 2;
|
||
line-clamp: 2; */
|
||
-webkit-box-orient: vertical;
|
||
overflow:visible ;
|
||
|
||
}
|
||
.item-icon {
|
||
align-items: flex-start;
|
||
}
|
||
.vs {
|
||
position: absolute;
|
||
top: 35px;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 64px;
|
||
height: 64px;
|
||
background-color: var(--color-pastel-main);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.vs span {
|
||
font-size: 25.6px;
|
||
line-height: 38.4px;
|
||
font-weight: bold;
|
||
color: #0274b3;
|
||
}
|
||
.mobile-toggle {
|
||
display: none;
|
||
}
|
||
.toggle-btn {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
background-color: #e8f0ff;
|
||
padding: 10px 12px;
|
||
border-radius: 10px;
|
||
min-width: 100%;
|
||
}
|
||
.toggle-btn p {
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
line-height: 1.7;
|
||
color: var(--color-body-text);
|
||
}
|
||
.arr-icon {
|
||
display: flex;
|
||
align-self: center;
|
||
}
|
||
|
||
.process-section,
|
||
.result-section,
|
||
.form-section {
|
||
margin-top: 100px;
|
||
}
|
||
.process-title {
|
||
margin-bottom: 24px;
|
||
}
|
||
.process-title p {
|
||
margin-top: 8px;
|
||
}
|
||
.step {
|
||
border-top: 1px solid var(--color-pastel-main);
|
||
border-bottom: 1px solid var(--color-pastel-main);
|
||
padding: 24px 290px 24px 12px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.step-number-bg {
|
||
position: absolute;
|
||
right: 15px;
|
||
left: auto;
|
||
top: -51px;
|
||
font-size: 235px;
|
||
font-weight: bold;
|
||
letter-spacing: -30px;
|
||
color: #a4cde3;
|
||
transform: translateY(-10px);
|
||
transition: transform 0.3s ease;
|
||
z-index: 0;
|
||
}
|
||
.step.active .step-number-bg {
|
||
transform: translateY(0);
|
||
}
|
||
.step-header {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
background: none;
|
||
border: none;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
text-align: right;
|
||
}
|
||
.step-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
line-height: 34px;
|
||
color: var(--color-title);
|
||
flex-grow: 1;
|
||
}
|
||
.step.active .step-title {
|
||
color: var(--color-primary);
|
||
}
|
||
.step-list {
|
||
list-style: none;
|
||
margin-top: 8px;
|
||
}
|
||
.step-list li {
|
||
position: relative;
|
||
padding-right: 20px;
|
||
}
|
||
.step-list li::before {
|
||
content: '';
|
||
position: absolute;
|
||
right: 0;
|
||
top: 12px;
|
||
transform: translateY(-50%);
|
||
width: 6px;
|
||
height: 6px;
|
||
background-color: var(--color-primary);
|
||
border-radius: 50%;
|
||
}
|
||
.step-list li,
|
||
.step-intro {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
line-height: 1.8;
|
||
color: var(--color-body-text);
|
||
}
|
||
.step-body {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.4s ease;
|
||
margin-top: 0;
|
||
max-width: 812px;
|
||
}
|
||
.step.active .step-body {
|
||
max-height: 380px;
|
||
margin-top: 16px;
|
||
}
|
||
.toggle-icon {
|
||
font-size: 28px;
|
||
color: var(--color-primary);
|
||
background-color: var(--color-pastel-main);
|
||
border-radius: 50%;
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
.step.active .toggle-icon {
|
||
transform: none;
|
||
}
|
||
.step:not(.active) .toggle-icon::before {
|
||
content: '+';
|
||
}
|
||
.step.active .toggle-icon::before {
|
||
content: '-';
|
||
}
|
||
|
||
.result-section > .container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
.result-section-header h2 {
|
||
margin-bottom: 8px;
|
||
}
|
||
.result-section-box {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 16px;
|
||
align-items: stretch;
|
||
}
|
||
.result-card {
|
||
background-color: #f0f4fd;
|
||
background-image: url(/src/img/dot-pattrn.svg);
|
||
background-repeat: no-repeat;
|
||
background-position: bottom;
|
||
background-size: auto;
|
||
border-radius: 16px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
height: 100%;
|
||
}
|
||
.result-card__number {
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
line-height: 40px;
|
||
color: var(--color-primary);
|
||
margin-bottom: 8px;
|
||
}
|
||
.result-card__text {
|
||
font-size: 15px;
|
||
line-height: 26px;
|
||
color: var(--color-body-text);
|
||
}
|
||
|
||
.form-section > .container {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
}
|
||
.star-form {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 20px;
|
||
z-index: -1;
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
.form-section-left {
|
||
flex: 0 1 50%;
|
||
margin-top: 87px;
|
||
}
|
||
form {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
}
|
||
.form-input label,
|
||
.required-label {
|
||
font-size: 14px;
|
||
margin-bottom: 8px;
|
||
display: block;
|
||
color: #1a1a2e;
|
||
}
|
||
.required-label::after {
|
||
content: '*';
|
||
color: #ff0000;
|
||
margin-left: 4px;
|
||
}
|
||
input,
|
||
.select-box,
|
||
textarea {
|
||
width: 100%;
|
||
border: 1px solid #dbdbdb;
|
||
border-radius: 8px;
|
||
padding: 0px 12px;
|
||
height: 38px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 1.8;
|
||
color: var(--color-title);
|
||
background-color: #f9f9f9;
|
||
}
|
||
textarea {
|
||
min-height: 114px;
|
||
resize: vertical;
|
||
}
|
||
.form-input {
|
||
flex-basis: 48%;
|
||
position: relative;
|
||
}
|
||
.label {
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #222;
|
||
}
|
||
.custom-select {
|
||
position: relative;
|
||
width: 100%;
|
||
user-select: none;
|
||
}
|
||
.select-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
transition: 0.25s;
|
||
}
|
||
.selected-text {
|
||
font-size: 14px;
|
||
color: #222;
|
||
font-weight: 500;
|
||
}
|
||
.arrow {
|
||
display: flex;
|
||
transition: 0.25s;
|
||
}
|
||
.custom-select.active .arrow {
|
||
transform: rotate(180deg);
|
||
}
|
||
.options {
|
||
position: absolute;
|
||
right: 0;
|
||
width: 100%;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
list-style: none;
|
||
border: 1px solid #dbdbdb;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
z-index: 100;
|
||
}
|
||
.custom-select.active .options {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
.option {
|
||
padding: 0px 12px;
|
||
height: 38px;
|
||
font-size: 17px;
|
||
transition: 0.2s;
|
||
background-color: #f9f9f9;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.option.active {
|
||
background: var(--color-primary);
|
||
color: #fff;
|
||
}
|
||
.form-text {
|
||
flex-basis: 98%;
|
||
}
|
||
.form-btn {
|
||
background-color: var(--color-primary);
|
||
border: none;
|
||
border-radius: 10px;
|
||
padding: 10px 12px 10px 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
transition: 0.3s ease;
|
||
}
|
||
.form-btn-icon {
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #000;
|
||
}
|
||
.form-btn.loading .btn-icon-default {
|
||
display: none;
|
||
}
|
||
.form-btn.loading .btn-icon-loading {
|
||
display: flex;
|
||
}
|
||
.btn-icon-default {
|
||
display: flex;
|
||
}
|
||
.spinner {
|
||
width: 24px;
|
||
height: 24px;
|
||
border: 4px solid #c5d7ec;
|
||
border-top-color: transparent;
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
animation: spin 300ms linear infinite;
|
||
}
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
.btn-text {
|
||
color: #ffffff;
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
}
|
||
.form-section-right {
|
||
flex: 0 1 45%;
|
||
}
|
||
.form-section-text h2 {
|
||
margin-bottom: 16px;
|
||
}
|
||
.form-section-text p {
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
line-height: 1.7;
|
||
color: var(--color-body-text);
|
||
}
|
||
.form-img {
|
||
position: relative;
|
||
}
|
||
.form-img p {
|
||
position: absolute;
|
||
top: 28%;
|
||
right: 16%;
|
||
font-size: 56px;
|
||
font-weight: 700;
|
||
color: #c8dff9;
|
||
}
|
||
.form-img img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
.end-form-img {
|
||
left: 184px;
|
||
top: -28px;
|
||
}
|
||
.success-message {
|
||
display: none;
|
||
}
|
||
.success-message p {
|
||
margin-top: 16px;
|
||
}
|
||
.success-message h3 {
|
||
margin-top: 24px;
|
||
}
|
||
.success-btn {
|
||
margin-top: 24px;
|
||
border: none;
|
||
border-radius: 10px;
|
||
background-color: var(--color-primary);
|
||
color: #ffffff;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
padding: 10px 24px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.success-message.visible {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
.related-section > .container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.related-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 100px;
|
||
padding-bottom: 24px;
|
||
}
|
||
.related-title {
|
||
margin-bottom: 8px;
|
||
}
|
||
.related-button {
|
||
display: flex;
|
||
gap: 8px;
|
||
height: 40px;
|
||
align-self: center;
|
||
align-items: center;
|
||
}
|
||
.related-button span {
|
||
font-size: 15px;
|
||
font-weight: normal;
|
||
line-height: 1.6;
|
||
}
|
||
.related-button svg {
|
||
fill: var(--color-title);
|
||
}
|
||
.related-button span {
|
||
color: var(--color-title);
|
||
}
|
||
.related-button:hover svg {
|
||
fill: var(--color-primary);
|
||
}
|
||
.related-button:hover span {
|
||
color: var(--color-primary);
|
||
}
|
||
.related-button-mobile {
|
||
display: none;
|
||
}
|
||
.related-button:hover svg {
|
||
transform: translateX(-4px);
|
||
}
|
||
|
||
.related-boxes {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 389px));
|
||
gap: 16px;
|
||
margin-top: 24px;
|
||
justify-content: center;
|
||
}
|
||
.related-card {
|
||
width: 100%;
|
||
aspect-ratio: 4 / 3;
|
||
}
|
||
.related-image {
|
||
width: 100%;
|
||
height: 292px;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
object-fit: cover;
|
||
}
|
||
.media-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.related-image img,
|
||
.media-container video {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
transition: transform 0.5s ease;
|
||
}
|
||
.related-content {
|
||
margin-top: 16px;
|
||
}
|
||
.related-content h3 {
|
||
font-size: 15px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.related-content p {
|
||
font-size: 12px;
|
||
}
|
||
.down-txt {
|
||
display: none;
|
||
margin-top: 8px;
|
||
}
|
||
.down-txt span {
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
}
|
||
.overlay-layer {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
to top,
|
||
rgba(0, 0, 0, 1) 0%,
|
||
rgba(0, 0, 0, 0.4) 40%,
|
||
rgba(0, 0, 0, 0) 100%
|
||
);
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition:
|
||
opacity 0.35s ease,
|
||
visibility 0.35s ease;
|
||
z-index: 2;
|
||
}
|
||
.related-card:hover .overlay-layer {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
.button-overlay {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
z-index: 3;
|
||
padding: 12px 12px 16px 12px;
|
||
}
|
||
.button-overlay svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
fill: white;
|
||
transition: 0.3s;
|
||
}
|
||
.date {
|
||
color: #ffffff;
|
||
font-size: 13px;
|
||
font-weight: normal;
|
||
}
|
||
.namepopup {
|
||
color: #ffffff;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
line-height: 1.4;
|
||
}
|
||
.play-btn {
|
||
position: absolute;
|
||
top: 12px;
|
||
left: 12px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
opacity: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 10;
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
.progress-ring {
|
||
position: absolute;
|
||
top: 13px;
|
||
left: 13px;
|
||
overflow: visible;
|
||
z-index: 20;
|
||
transform: rotate(180deg);
|
||
}
|
||
.progress-circle {
|
||
fill: transparent;
|
||
stroke: white;
|
||
stroke-width: 2;
|
||
stroke-linecap: round;
|
||
}
|
||
.play-icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
fill: white;
|
||
position: absolute;
|
||
z-index: 3;
|
||
transition:
|
||
opacity 0.25s ease,
|
||
transform 0.25s ease;
|
||
}
|
||
.icon-play {
|
||
opacity: 1;
|
||
}
|
||
.icon-pause {
|
||
opacity: 0;
|
||
}
|
||
.related-card:hover .icon-pause {
|
||
opacity: 1;
|
||
}
|
||
.related-card:hover .icon-play {
|
||
opacity: 0;
|
||
}
|
||
.is-video .play-btn {
|
||
opacity: 1;
|
||
}
|
||
.is-image .play-btn {
|
||
display: none;
|
||
}
|
||
|
||
.media-section {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.media {
|
||
height: 100%;
|
||
width: 100%;
|
||
object-fit: cover;
|
||
object-position: center;
|
||
display: block;
|
||
}
|
||
.container-showcase {
|
||
max-width: 1240px;
|
||
padding: 0 20px;
|
||
margin: 0 auto;
|
||
}
|
||
.showcase-section > .container-showcase {
|
||
height: 200vh;
|
||
}
|
||
.showcase-sticky {
|
||
position: sticky;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100dvh;
|
||
overflow: hidden;
|
||
}
|
||
.showcase-inner {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 40px;
|
||
height: 100dvh;
|
||
}
|
||
.showcase-media-side {
|
||
flex-basis: 58%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.showcase-media-wrapper {
|
||
width: 100%;
|
||
max-width: 679px;
|
||
aspect-ratio: 1/1;
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 8px;
|
||
}
|
||
.media-item {
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0;
|
||
transition:
|
||
opacity 0.8s ease,
|
||
transform 1.4s ease;
|
||
will-change: opacity, transform;
|
||
}
|
||
.media-item.active {
|
||
opacity: 1;
|
||
z-index: 2;
|
||
}
|
||
.media-item img,
|
||
.media-item video {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
}
|
||
.showcase-text-side {
|
||
flex-basis: 40%;
|
||
height: 90%;
|
||
overflow: visible;
|
||
position: relative;
|
||
}
|
||
.text-track {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
|
||
}
|
||
.text-item {
|
||
height: 60dvh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
align-items: flex-start;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
filter: blur(0);
|
||
transition:
|
||
opacity 0.4s linear,
|
||
transform 0.4s linear,
|
||
filter 0.4s linear;
|
||
will-change: transform, opacity, filter;
|
||
}
|
||
.text-item span {
|
||
font-size: 20px;
|
||
color: var(--color-primary);
|
||
margin-bottom: 4px;
|
||
font-weight: bold;
|
||
}
|
||
.text-item h2 {
|
||
font-size: 22px;
|
||
color: var(--color-title);
|
||
line-height: 1.5;
|
||
margin-bottom: 16px;
|
||
}
|
||
.text-item p {
|
||
color: var(--color-body-text);
|
||
line-height: 1.7;
|
||
font-size: 15px;
|
||
}
|
||
.devidermedia {
|
||
margin-top: 100px;
|
||
margin-bottom: 100px;
|
||
}
|
||
.devidermedia > .container {
|
||
max-width: 1240px;
|
||
padding: 0 20px;
|
||
margin: 0 auto;
|
||
}
|
||
.devidermedia .media {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
object-fit: cover;
|
||
border-radius: 10px;
|
||
}
|
||
.devidermedia .sclae-in-view {
|
||
animation: scale-in-view linear;
|
||
animation-timeline: view();
|
||
animation-range: entry 0% cover 40%;
|
||
}
|
||
.devidermedia .media.ar16-9 {
|
||
aspect-ratio: 16 / 9;
|
||
}
|
||
.devidermedia .media.ar4-5 {
|
||
aspect-ratio: 4 / 5;
|
||
}
|
||
@keyframes scale-in-view {
|
||
from {
|
||
scale: 0.6;
|
||
}
|
||
to {
|
||
scale: 1;
|
||
}
|
||
}
|
||
.form-input input,
|
||
.form-text textarea {
|
||
border: 1px solid #ccc;
|
||
outline: none;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.form-input input:focus,
|
||
.form-text textarea:focus {
|
||
border-color: var(--color-primary);
|
||
background-color: #EAF7FF;
|
||
}
|
||
.error-message {
|
||
color: #DC2626;
|
||
font-size: 13px;
|
||
margin-top: 6px;
|
||
display: block;
|
||
}
|
||
|
||
.input-error {
|
||
background-color: #FFEBEB !important;
|
||
border-color: #ef4444 !important;
|
||
}
|