Add portfolio, blog, customer login, and Meshkee SEO.
Wire CMS routes and account UI, match the original header icons, and publish sitemap-config with unique page metadata. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
d2a82849ef
commit
6cd85e7e59
+473
-27
@@ -237,23 +237,28 @@ textarea {
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.hamburger span {
|
||||
.hamburger:hover,
|
||||
.user-menu-icon:hover,
|
||||
.user-menu-trigger:hover {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.hamburger svg,
|
||||
.user-menu-icon svg {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: #fff;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-overlay {
|
||||
@@ -261,12 +266,17 @@ textarea {
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
background: #191919 url("/images/brand/vertical-line-bg.svg") center top / cover;
|
||||
display: none;
|
||||
overflow: auto;
|
||||
top: -100%;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: top 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-overlay.open {
|
||||
display: block;
|
||||
top: 0;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.menu-close {
|
||||
@@ -281,6 +291,15 @@ textarea {
|
||||
color: #191919;
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transform: scale(0.6);
|
||||
transition: transform 0.4s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.4s cubic-bezier(0.37, 0, 0.63, 1);
|
||||
}
|
||||
|
||||
.menu-overlay.open .menu-close {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
@@ -292,6 +311,34 @@ textarea {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-logo,
|
||||
.menu-address,
|
||||
.menu-social {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
transition:
|
||||
transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99),
|
||||
opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
|
||||
}
|
||||
|
||||
.menu-overlay.open .menu-logo {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
.menu-overlay.open .menu-address {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
|
||||
.menu-overlay.open .menu-social {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition-delay: 0.8s;
|
||||
}
|
||||
|
||||
.menu-nav a {
|
||||
display: block;
|
||||
font-family: var(--alt-font);
|
||||
@@ -299,8 +346,26 @@ textarea {
|
||||
line-height: 1.05;
|
||||
color: #fff;
|
||||
letter-spacing: -0.03em;
|
||||
opacity: 0;
|
||||
transform: scale(1.15) translateY(-30px);
|
||||
transition:
|
||||
transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99),
|
||||
opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99),
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-overlay.open .menu-nav a {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.menu-overlay.open .menu-nav a:nth-child(1) { transition-delay: 0.27s; }
|
||||
.menu-overlay.open .menu-nav a:nth-child(2) { transition-delay: 0.34s; }
|
||||
.menu-overlay.open .menu-nav a:nth-child(3) { transition-delay: 0.41s; }
|
||||
.menu-overlay.open .menu-nav a:nth-child(4) { transition-delay: 0.48s; }
|
||||
.menu-overlay.open .menu-nav a:nth-child(5) { transition-delay: 0.55s; }
|
||||
.menu-overlay.open .menu-nav a:nth-child(6) { transition-delay: 0.62s; }
|
||||
|
||||
.menu-nav a:hover,
|
||||
.menu-nav a.active {
|
||||
color: var(--base-color);
|
||||
@@ -578,18 +643,29 @@ textarea {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
padding: 28px 28px 90px;
|
||||
background: linear-gradient(to top, #101010 18%, transparent 100%);
|
||||
transform: translateY(60px);
|
||||
padding: 30px 28px 32px;
|
||||
background: linear-gradient(to top, #101010 22%, transparent 100%);
|
||||
transform: translateY(calc(100% - 90px));
|
||||
transition: transform 550ms cubic-bezier(0.12, 0, 0.1, 0);
|
||||
}
|
||||
|
||||
.portfolio-card .copy h3 {
|
||||
margin: 0;
|
||||
margin: 0 0 10px;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.portfolio-card .copy p {
|
||||
margin: 0;
|
||||
color: #d4d4d4;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
text-align: justify;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 8;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portfolio-card:hover img {
|
||||
@@ -907,9 +983,36 @@ textarea {
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.menu-overlay,
|
||||
.menu-close,
|
||||
.menu-logo,
|
||||
.menu-address,
|
||||
.menu-social,
|
||||
.menu-nav a,
|
||||
.marquee {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.menu-overlay {
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.menu-overlay.open {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.menu-logo,
|
||||
.menu-address,
|
||||
.menu-social,
|
||||
.menu-nav a,
|
||||
.menu-close {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.marquee {
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -922,18 +1025,20 @@ textarea {
|
||||
.news-section {
|
||||
position: relative;
|
||||
padding-top: 0;
|
||||
padding-bottom: 120px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.news-watermark {
|
||||
margin-top: 48px;
|
||||
position: relative;
|
||||
margin: 32px 0 0;
|
||||
text-align: center;
|
||||
font-family: var(--alt-font);
|
||||
font-size: clamp(5.5rem, 14vw, 12.5rem);
|
||||
line-height: 1;
|
||||
font-size: clamp(3rem, 8vw, 7.5rem);
|
||||
line-height: 0.72;
|
||||
font-weight: 600;
|
||||
letter-spacing: -4px;
|
||||
letter-spacing: -0.04em;
|
||||
color: var(--nero-grey);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -1000,11 +1105,103 @@ textarea {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.about-visual {
|
||||
.about-intro {
|
||||
display: grid;
|
||||
grid-template-columns: 0.7fr 1fr;
|
||||
gap: 18px;
|
||||
grid-template-columns: 7fr 5fr;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-visual {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.about-pic-a,
|
||||
.about-pic-b,
|
||||
.about-pic-c {
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.about-pic-a {
|
||||
width: 41.666%;
|
||||
padding: 0 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.about-pic-b {
|
||||
width: 50%;
|
||||
padding: 0 15px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.about-pic-c {
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
bottom: -50px;
|
||||
width: 40%;
|
||||
z-index: 2;
|
||||
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.reveal > * {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition:
|
||||
transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||||
opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.reveal > *:nth-child(1) { transition-delay: 0s; }
|
||||
.reveal > *:nth-child(2) { transition-delay: 0.3s; }
|
||||
.reveal > *:nth-child(3) { transition-delay: 0.6s; }
|
||||
.reveal > *:nth-child(4) { transition-delay: 0.9s; }
|
||||
.reveal > *:nth-child(5) { transition-delay: 1.2s; }
|
||||
.reveal > *:nth-child(6) { transition-delay: 1.5s; }
|
||||
.reveal > *:nth-child(7) { transition-delay: 1.8s; }
|
||||
.reveal > *:nth-child(8) { transition-delay: 2.1s; }
|
||||
|
||||
.reveal.is-in > * {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.about-visual.is-in .about-pic-c { transition-delay: 0.1s; }
|
||||
.about-visual.is-in .about-pic-b { transition-delay: 0.2s; }
|
||||
.about-visual.is-in .about-pic-a { transition-delay: 0.5s; }
|
||||
|
||||
.reveal-self {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition:
|
||||
transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||||
opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.reveal-self.is-in {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.reveal-self > *,
|
||||
.reveal-self.is-in > * {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal > *,
|
||||
.reveal-self,
|
||||
.reveal-self.is-in > * {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.about-copy p {
|
||||
@@ -1074,7 +1271,7 @@ textarea {
|
||||
|
||||
.site-footer {
|
||||
background: var(--nero-grey);
|
||||
padding: 96px 0 0;
|
||||
padding: 72px 0 0;
|
||||
}
|
||||
|
||||
.footer-cols {
|
||||
@@ -1284,6 +1481,7 @@ textarea {
|
||||
@media (max-width: 991px) {
|
||||
.menu-grid,
|
||||
.intro-grid,
|
||||
.about-intro,
|
||||
.years-wrap,
|
||||
.video-split,
|
||||
.feature-grid,
|
||||
@@ -1296,6 +1494,10 @@ textarea {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.about-intro {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.years-wrap {
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
@@ -1350,6 +1552,7 @@ textarea {
|
||||
|
||||
.menu-grid,
|
||||
.intro-grid,
|
||||
.about-intro,
|
||||
.years-wrap,
|
||||
.video-split,
|
||||
.feature-grid,
|
||||
@@ -1432,6 +1635,29 @@ textarea {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about-intro {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-visual {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.about-pic-a,
|
||||
.about-pic-b,
|
||||
.about-pic-c {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
left: auto;
|
||||
right: auto;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.marquee {
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
@@ -1455,3 +1681,223 @@ textarea {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
position: relative;
|
||||
min-width: 42px;
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.user-menu-icon,
|
||||
.user-menu-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
min-width: 42px;
|
||||
height: 42px;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.user-menu-icon {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.user-menu-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
min-width: 180px;
|
||||
background: #111;
|
||||
border: 1px solid var(--charcoal-grey);
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.user-menu-dropdown a,
|
||||
.user-menu-dropdown button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding: 12px 16px;
|
||||
color: #fff;
|
||||
background: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.user-menu-dropdown a:hover,
|
||||
.user-menu-dropdown button:hover {
|
||||
background: var(--nero-grey);
|
||||
color: var(--base-color);
|
||||
}
|
||||
|
||||
.catalog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.catalog-card {
|
||||
display: grid;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.catalog-card .zoom-frame {
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.catalog-copy {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.catalog-copy strong {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.catalog-copy span:last-child {
|
||||
color: var(--medium-gray);
|
||||
}
|
||||
|
||||
.catalog-fallback {
|
||||
display: block;
|
||||
min-height: 280px;
|
||||
background: var(--nero-grey);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
.zoom-frame {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background: var(--nero-grey);
|
||||
}
|
||||
|
||||
.zoom-frame img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
min-height: 280px;
|
||||
transition: transform 0.7s ease;
|
||||
}
|
||||
|
||||
.zoom-frame:hover img {
|
||||
transform: scale(1.12);
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.gallery-grid .zoom-frame:first-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 80;
|
||||
background: rgba(0, 0, 0, 0.92);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.lightbox img {
|
||||
max-width: min(92vw, 1200px);
|
||||
max-height: 88vh;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.lightbox-close,
|
||||
.lightbox-nav {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lightbox-close {
|
||||
top: 20px;
|
||||
right: 28px;
|
||||
}
|
||||
|
||||
.lightbox-nav.prev {
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
.lightbox-nav.next {
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
.detail-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: 48px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.article-wrap {
|
||||
max-width: 860px;
|
||||
}
|
||||
|
||||
.article-cover {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.rich-content {
|
||||
color: var(--medium-gray);
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.rich-content h2,
|
||||
.rich-content h3,
|
||||
.rich-content strong {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rich-content p {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.catalog-grid,
|
||||
.detail-layout,
|
||||
.gallery-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.catalog-grid,
|
||||
.detail-layout,
|
||||
.gallery-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.user-menu-trigger span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user