Build Meshkee marketing site with service pages and shared layout.
Add home and service routes (website, app, CMS, SEO, graphic), brand assets, and components aligned with the live meshkee.com design. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
045d507cbe
commit
47bee1ce66
+244
-12
@@ -1,26 +1,258 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--ink: #0e1116;
|
||||
--ink-soft: #2a313c;
|
||||
--muted: #5c6672;
|
||||
--line: #d5dbe3;
|
||||
--paper: #eef1f4;
|
||||
--paper-deep: #e2e7ee;
|
||||
--surface: #fafafa;
|
||||
--accent-from: #ff5a7a;
|
||||
--accent-to: #9c4dff;
|
||||
--accent: #c44db8;
|
||||
--accent-deep: #8b3adb;
|
||||
--glow: rgba(196, 77, 184, 0.16);
|
||||
--brand-gradient: linear-gradient(135deg, var(--accent-from), var(--accent-to));
|
||||
--background: var(--paper);
|
||||
--foreground: var(--ink);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-ink: var(--ink);
|
||||
--color-ink-soft: var(--ink-soft);
|
||||
--color-muted: var(--muted);
|
||||
--color-line: var(--line);
|
||||
--color-paper: var(--paper);
|
||||
--color-paper-deep: var(--paper-deep);
|
||||
--color-surface: var(--surface);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-deep: var(--accent-deep);
|
||||
--color-accent-from: var(--accent-from);
|
||||
--color-accent-to: var(--accent-to);
|
||||
--font-sans: var(--font-vazirmatn);
|
||||
--font-display: var(--font-montserrat);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Rule: all interactive elements animate smoothly on hover */
|
||||
button,
|
||||
a {
|
||||
transition:
|
||||
background 0.25s ease,
|
||||
background-color 0.25s ease,
|
||||
color 0.25s ease,
|
||||
border-color 0.25s ease,
|
||||
box-shadow 0.25s ease,
|
||||
transform 0.2s ease,
|
||||
opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* Headings: consistent weight matching hero h1 — titles stay on one row */
|
||||
h1,
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: color-mix(in srgb, var(--accent) 28%, white);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.latin {
|
||||
font-family: var(--font-montserrat), var(--font-vazirmatn), sans-serif;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.text-body {
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
}
|
||||
|
||||
/* Gradient hover utilities */
|
||||
.btn-primary {
|
||||
background: var(--ink);
|
||||
color: var(--surface);
|
||||
transition:
|
||||
background 0.25s ease,
|
||||
color 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--brand-gradient);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.link-hover {
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
|
||||
.link-hover:hover {
|
||||
color: var(--accent);
|
||||
background: var(--brand-gradient);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.border-hover {
|
||||
transition:
|
||||
border-color 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
.border-hover:hover,
|
||||
.group:hover .border-hover {
|
||||
border-color: transparent;
|
||||
background:
|
||||
linear-gradient(#fff, #fff) padding-box,
|
||||
var(--brand-gradient) border-box;
|
||||
box-shadow: 0 0 0 1px transparent;
|
||||
}
|
||||
|
||||
.group-border-hover {
|
||||
transition:
|
||||
border-color 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
.group-border-hover:hover,
|
||||
.group:hover.group-border-hover,
|
||||
.group:hover .group-border-hover,
|
||||
a.group-border-hover:hover {
|
||||
border-color: color-mix(in srgb, var(--accent) 55%, white);
|
||||
}
|
||||
|
||||
.group-text-hover {
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
|
||||
.group:hover .group-text-hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.carousel-mask {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.carousel-mask::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.carousel-track {
|
||||
animation: carousel-scroll 48s linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.carousel-track:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes carousel-scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
.mesh-grid {
|
||||
background-image:
|
||||
linear-gradient(rgba(14, 17, 22, 0.035) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(14, 17, 22, 0.035) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 75%);
|
||||
}
|
||||
|
||||
.mesh-glow {
|
||||
background:
|
||||
radial-gradient(ellipse 55% 45% at 78% 35%, var(--glow), transparent 70%),
|
||||
radial-gradient(ellipse 40% 35% at 12% 70%, rgba(42, 49, 60, 0.08), transparent 65%),
|
||||
linear-gradient(165deg, #f5f7fa 0%, #e8edf3 48%, #eef2f6 100%);
|
||||
}
|
||||
|
||||
@keyframes float-y {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rise-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float-y 7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
transition:
|
||||
opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.reveal.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.reveal-delay-1 {
|
||||
transition-delay: 0.12s;
|
||||
}
|
||||
.reveal-delay-2 {
|
||||
transition-delay: 0.24s;
|
||||
}
|
||||
.reveal-delay-3 {
|
||||
transition-delay: 0.36s;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-float,
|
||||
.reveal,
|
||||
.carousel-track {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user