روند و فرایند شروع و پایان پروژه
+مسیر انجام هر پروژه از آغاز تا پایان
- در اینوا، کیفیت اتفاقی نیست؛ ما برای هر پروژه مسیری مهندسیشده و خلاقانه را طی - میکنیم. + کیفیت اتفاقی نیست؛ ما هر قدم را با دقت برمیداریم.
پروژه بعدی میتونه برای شما باشه، اگر آمادهاید وقتشه در موردش صحبت کنیم
-ما از ایدههای جدید همواره استقبال میکنیم.
+از همین امروز شروع کنید
+- با پرکردن فرم و ثبت درخواست، ما در کمتر از 24 ساعت باهاتون تماس میگیریم و آماده - شنیدن ایدهها و پروژههاتون هستیم. + اهداف و چالشهای رشد کسبوکارتان را به ما بسپارید. در کمتر از 24ساعت با شما تماس میگیریم تا بتوانیم شما را قهرمان داستان برندتان کنیم.
diff --git a/src/assets/css/portfolio-responsive.css b/src/assets/css/portfolio-responsive.css
index dc8297a..d0aadb0 100644
--- a/src/assets/css/portfolio-responsive.css
+++ b/src/assets/css/portfolio-responsive.css
@@ -69,10 +69,14 @@
.media {
width: auto;
}
+
+ .result-section-box[data-card-count='4'] {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
}
@media screen and (max-width: 992px) and (orientation: landscape) {
.portfolio-logo-wrapper {
- width: 660px !important;
+ width: 660px;
max-width: 660px !important;
}
}
@@ -113,12 +117,12 @@
}
.showcase-section > .container-showcase {
height: calc(var(--slides-count) * 100dvh);
- scroll-snap-align: start;
+ scroll-snap-align: start;
+ }
+ html {
+ scroll-snap-type: y proximity;
+ scroll-behavior: smooth;
}
- html {
- scroll-snap-type: y proximity;
- scroll-behavior: smooth;
-}
.showcase-sticky {
height: 100vh;
}
@@ -248,13 +252,24 @@
display: none;
}
.hero-section {
- padding: 0 19px;
+ aspect-ratio: 9 / 17;
+ height: auto;
+ padding: 19px;
padding-bottom: 122px;
- margin-top: 78px;
+ }
+
+ .hero-section .desktop-file {
+ display: none;
+ }
+
+ .hero-section .mobile-file {
+ display: block;
+ width: 100%;
}
.hero-section video,
- .hero-section .bg-gif {
+ .hero-section .bg-gif,
+ .hero-section .hero-bg-image {
position: absolute;
inset: 0;
width: 100%;
@@ -290,7 +305,7 @@
}
.portfolio-floating-nav {
- width: 390px;
+ width: fit-content;
max-width: calc(100vw - 16px);
bottom: -140px;
}
@@ -300,7 +315,8 @@
}
.portfolio-nav-inner {
- width: 100%;
+ width: fit-content;
+ max-width: 100%;
padding: 8px 10px;
gap: 8px;
border-radius: 24px;
@@ -330,6 +346,10 @@
padding: 7px 10px;
white-space: nowrap;
}
+ .portfolio-logo-wrapper {
+ /* width: 550px !important; */
+ max-width: 550px !important;
+ }
.portfolio-nav-meeting {
min-width: auto;
@@ -337,10 +357,6 @@
font-size: 12px;
padding: 7px 10px;
white-space: nowrap;
- }
- .portfolio-logo-wrapper {
- /* width: 550px !important; */
- max-width: 550px !important;
}
.portfolio-scroll-track {
transform: translateX(-50%);
@@ -444,19 +460,4 @@
padding: 0;
margin: 0 auto;
}
- .desktop-file {
- display: none;
- }
- .mobile-file {
- display: block;
- width: 100%;
- }
- .hero-section {
- aspect-ratio: 9 / 16;
- }
- .hero-meta {
- display: flex;
- flex-wrap: wrap;
- width: 30%;
- }
}
diff --git a/src/assets/css/portfolio.css b/src/assets/css/portfolio.css
index 9eaee33..f39062a 100644
--- a/src/assets/css/portfolio.css
+++ b/src/assets/css/portfolio.css
@@ -20,9 +20,9 @@ section[class*='-section'] {
.hero-section {
position: relative;
width: 100%;
- aspect-ratio: 16 / 8;
- max-height: 725px;
- /* height: clamp(500px, 70vh, 725px); */
+ aspect-ratio: 16 / 8;
+ max-height: 725px;
+ /* height: clamp(500px, 70vh, 725px); */
overflow: hidden;
display: flex;
align-items: end;
@@ -30,16 +30,23 @@ section[class*='-section'] {
/* color: #fff; */
/* padding-right: 120px; */
padding-bottom: 88px;
- margin-top: 80px;
+ /* margin-top: 80px; */
}
.hero-section video,
-.hero-section .bg-gif {
+.hero-section .bg-gif,
+.hero-section .hero-bg-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
+.hero-section .desktop-file {
+ display: block;
+}
+.hero-section .mobile-file {
+ display: none;
+}
.hero-section::before {
content: '';
position: absolute;
@@ -58,13 +65,6 @@ section[class*='-section'] {
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;
@@ -86,7 +86,6 @@ section[class*='-section'] {
font-size: 14px;
line-height: 1.8;
}
-
.hero-title {
font-size: 36px;
line-height: 1.5;
@@ -99,6 +98,8 @@ section[class*='-section'] {
.hero-meta {
display: flex;
gap: 12px;
+ flex-wrap: wrap;
+ width: 30%;
}
.hero-meta-inner {
display: flex;
@@ -183,8 +184,9 @@ section[class*='-section'] {
left: 50%;
bottom: -140px;
transform: translateX(-50%);
- width: 668px;
- z-index: 999;
+ width: fit-content;
+ max-width: min(668px, calc(100vw - 32px));
+ z-index: 9999;
transition: bottom 0.45s ease;
}
.portfolio-floating-nav.show {
@@ -194,6 +196,8 @@ section[class*='-section'] {
display: flex;
align-items: center;
gap: 12px;
+ width: fit-content;
+ max-width: 100%;
background: #ffffff;
border: 1px solid #acacac;
border-radius: 32px;
@@ -217,7 +221,7 @@ section[class*='-section'] {
}
.portfolio-nav-scroll-wrapper {
position: relative;
- flex: 1;
+ flex: 1 1 0;
min-width: 0;
}
.portfolio-nav-scroll {
@@ -225,10 +229,9 @@ section[class*='-section'] {
overflow-y: hidden;
scrollbar-width: none;
direction: rtl;
- flex: 1;
min-width: 0;
- max-width: 100%;
- cursor: grab;
+ max-width: 100%;
+ cursor: grab;
}
.portfolio-nav-scroll::-webkit-scrollbar {
display: none;
@@ -250,6 +253,9 @@ section[class*='-section'] {
background: #d9d9d9;
overflow: hidden;
}
+.portfolio-scroll-track[hidden] {
+ display: none !important;
+}
.portfolio-scroll-thumb {
position: absolute;
top: 0;
@@ -259,7 +265,6 @@ section[class*='-section'] {
border-radius: 999px;
background: var(--color-primary);
transition: right 0.08s linear;
-
}
.portfolio-nav-btn {
border-radius: 10px;
@@ -297,6 +302,12 @@ section[class*='-section'] {
.portfolio-nav-project-btn:hover {
background: var(--color-primary);
}
+a.portfolio-nav-project-btn {
+ text-decoration: none;
+}
+a.portfolio-nav-project-btn:hover {
+ color: #ffffff;
+}
.portfolio-nav-link-btn {
background: var(--color-primary);
color: white;
@@ -383,12 +394,32 @@ section[class*='-section'] {
opacity: 1;
visibility: visible;
}
+/* روی صفحههای کوتاه، خود پاپآپ اسکرول میشود تا انتهای فریم در دسترس بماند.
+ روی صفحههای بلند هیچ تغییری در چیدمان ایجاد نمیکند. */
+#portfolioOverlay {
+ overflow-y: hidden;
+ overflow-x: hidden;
+}
+#portfolioOverlay .side-buttons-wrapper {
+ margin-top: auto;
+ margin-bottom: auto;
+}
+#portfolioOverlay .close-popup,
+#portfolioOverlay .next-popup,
+#portfolioOverlay .prev-popup {
+ position: fixed;
+}
+@media (max-height: 900px) {
+ #portfolioOverlay {
+ padding-bottom: 80px;
+ }
+}
.portfolio-logo-wrapper {
position: relative;
- top: 69px;
+ /* top: 69px; */
/* width: 794px; */
height: 892px;
- overflow: hidden;
+ overflow: visible;
transition:
width 0.5s ease,
height 0.5s ease;
@@ -397,6 +428,8 @@ section[class*='-section'] {
display: flex;
gap: 0;
position: relative;
+ align-items: flex-start;
+ min-height: 0;
}
.portfolio-modal {
width: 704px;
@@ -405,6 +438,9 @@ section[class*='-section'] {
border-radius: 7px;
overflow: hidden;
padding: 6px 7px;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
transition:
width 0.5s ease,
height 0.5s ease,
@@ -420,20 +456,12 @@ section[class*='-section'] {
}
.portfolio-logo-wrapper.mobile-view .logo-popup {
left: -50%;
+ top: 12px;
}
.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;
@@ -468,22 +496,44 @@ section[class*='-section'] {
transform: rotate(180deg);
}
.portfolio-scroll {
+ position: relative;
width: 100%;
height: 100%;
+ flex: 1 1 0;
+ min-height: 0;
+ max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
+ -webkit-overflow-scrolling: touch;
+ touch-action: pan-y;
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 {
+ display: block;
width: 100%;
+ height: auto;
+ max-width: 100%;
+ image-rendering: auto;
+}
+.portfolio-scroll .desktop-image,
+.portfolio-scroll .mobile-image {
+ display: none;
+}
+.portfolio-scroll .desktop-image.is-active {
+ display: block;
+}
+.portfolio-logo-wrapper.mobile-view .portfolio-scroll .desktop-image.is-active {
+ display: none;
+}
+.portfolio-logo-wrapper.mobile-view .portfolio-scroll .mobile-image.is-active {
+ display: block;
}
.portfolio-scroll::-webkit-scrollbar {
display: none;
@@ -499,13 +549,15 @@ section[class*='-section'] {
position: relative;
z-index: 10;
top: 125px;
+ touch-action: none;
+ cursor: grab;
}
.custom-scroll::before {
content: '';
position: absolute;
top: -40px;
left: 0;
- width: 29px;
+ width: 35px;
height: 40px;
background: transparent;
border-bottom-left-radius: 7px;
@@ -517,7 +569,7 @@ section[class*='-section'] {
position: absolute;
bottom: -40px;
left: 0;
- width: 35px;
+ width: 29px;
height: 40px;
background: transparent;
border-top-left-radius: 7px;
@@ -529,7 +581,7 @@ section[class*='-section'] {
right: -30px;
left: 0;
bottom: 0;
- width: 30px;
+ width: 29px;
height: 30px;
background: transparent;
border-bottom-left-radius: 7px;
@@ -643,6 +695,9 @@ section[class*='-section'] {
background: #dfdfdf;
border-radius: 26.6px;
position: relative;
+ cursor: pointer;
+ touch-action: none;
+ pointer-events: auto;
}
.scroll-thumb {
position: absolute;
@@ -658,7 +713,6 @@ section[class*='-section'] {
border: 5px solid #d9ecff;
cursor: pointer;
box-shadow: 0 4px 12px var(--color-pastel-main);
- z-index: 100;
}
body.dragging-scroll {
user-select: none;
@@ -668,7 +722,8 @@ body.dragging-scroll {
align-items: flex-start;
gap: 48px;
position: relative;
- top: 69px;
+ /* top: 69px; */
+ top: 69px;
transition: transform 0.3s ease;
}
.side-buttons {
@@ -688,57 +743,15 @@ body.dragging-scroll {
flex-direction: column;
position: relative;
left: -70%;
- top: 0;
+ top: 12px;
align-items: center;
}
.logo-popup-img img {
+ /* border-radius: 7px; */
+ /* width: 109px; */
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;
@@ -765,8 +778,14 @@ body.dragging-scroll {
font-weight: 600;
}
.portfolio-rotate-container {
+ position: relative;
+ flex: 1 1 0;
width: 100%;
height: 100%;
+ min-height: 0;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
transition: transform 0.6s ease;
}
.portfolio-popup.is-rotated2 .next-popup,
@@ -866,6 +885,10 @@ body.dragging-scroll {
/* 28 % 16 = 1.75 */
line-height: 1.75;
color: #e6f2f8;
+ margin: 0;
+}
+.about-section-p p + p {
+ margin-top: 12px;
}
.about-section-p .bold {
font-size: 22px;
@@ -981,21 +1004,21 @@ body.dragging-scroll {
align-items: center;
padding: 12px 16px 12px 24px;
border-radius: 8px;
+ /* max-height: 76px; */
+ /* overflow: hidden; */
/* max-height: 76px;
overflow: hidden; */
}
.itemc {
background-color: #f0f5fe;
- background-image: url(/src/img/dot-pattrn.svg);
+ background-image: url(../../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: '';
@@ -1019,8 +1042,7 @@ body.dragging-scroll {
/* -webkit-line-clamp: 2;
line-clamp: 2; */
-webkit-box-orient: vertical;
- overflow:visible ;
-
+ overflow: visible ;
}
.item-icon {
align-items: flex-start;
@@ -1148,9 +1170,78 @@ body.dragging-scroll {
font-size: 16px;
font-weight: 400;
line-height: 1.8;
- color: var(--color-body-text);
+ color: #6a6a6a;
+}
+.step-body p,
+.step-body .step-intro {
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 1.8;
+ color: inherit;
+}
+.step-body strong,
+.step-body b {
+ font-weight: 700;
+ color: inherit;
+}
+.step-body a {
+ color: #0274b3;
+ text-decoration: underline;
+}
+.step-body a:hover {
+ color: #0274b3;
+ text-decoration: underline;
+}
+.step-body > ul,
+.step-body ul,
+.step-body .step-list {
+ list-style: none;
+ margin-top: 8px;
+ padding: 0;
+}
+.step-body > ol,
+.step-body ol {
+ list-style: decimal;
+ margin-top: 8px;
+ padding: 0 1.2em 0 0;
+}
+.step-body > ul li,
+.step-body ul li,
+.step-body .step-list li {
+ position: relative;
+ padding-right: 20px;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 1.8;
+ color: inherit;
+}
+.step-body > ol li,
+.step-body ol li {
+ padding-right: 0;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 1.8;
+ color: inherit;
+}
+.step-body > ol li::before,
+.step-body ol li::before {
+ display: none;
+}
+.step-body > ul li::before,
+.step-body ul li::before,
+.step-body .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-body {
+ color: #6a6a6a;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
@@ -1192,14 +1283,27 @@ body.dragging-scroll {
margin-bottom: 8px;
}
.result-section-box {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
- gap: 16px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
align-items: stretch;
+ gap: 16px;
+}
+.result-section-box[data-card-count='4'] {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.result-section-box[data-card-count='4'] .result-card {
+ flex: unset;
+ max-width: none;
+ width: auto;
}
.result-card {
+ flex: 0 1 220px;
+ width: 100%;
+ max-width: 280px;
background-color: #f0f4fd;
- background-image: url(/src/img/dot-pattrn.svg);
+ background-image: url(../../img/dot-pattrn.svg);
background-repeat: no-repeat;
background-position: bottom;
background-size: auto;
@@ -1209,7 +1313,7 @@ body.dragging-scroll {
display: flex;
flex-direction: column;
justify-content: center;
- height: 100%;
+ min-height: 120px;
}
.result-card__number {
font-size: 40px;
@@ -1497,16 +1601,54 @@ textarea {
}
.related-boxes {
+ margin-top: 24px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 389px));
gap: 16px;
-margin-top: 24px;
- justify-content: center;
+
+ justify-content: start;
}
.related-card {
width: 100%;
aspect-ratio: 4 / 3;
}
+.related-card.related-card--project {
+ aspect-ratio: auto;
+ display: block;
+}
+.related-card__media {
+ display: block;
+ color: inherit;
+ text-decoration: none;
+}
+.related-content h3 a {
+ color: inherit;
+ text-decoration: none;
+ font-weight: bold;
+}
+.related-content h3 a:hover {
+ color: #0274b3;
+ text-decoration: none;
+}
+.related-card-categories {
+ margin: 0;
+}
+.related-card-cat-link {
+ color: #000;
+ text-decoration: none;
+}
+.related-card-cat-link:hover {
+ color: #0274b3;
+ text-decoration: none;
+}
+.related-card-cat-sep {
+ opacity: 0.7;
+}
+.related-boxes-empty {
+ grid-column: 1 / -1;
+ text-align: center;
+ margin: 0;
+}
.related-image {
width: 100%;
height: 292px;
@@ -1532,6 +1674,7 @@ margin-top: 24px;
}
.related-content h3 {
font-size: 15px;
+ font-weight: 700;
margin-bottom: 8px;
}
.related-content p {
@@ -1548,12 +1691,7 @@ margin-top: 24px;
.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%
- );
+ background-image: url(../../img/overlay.svg);
border-radius: 10px;
display: flex;
align-items: flex-end;