Initial Mashinify homepage rebuild in Next.js.
FA/RTL marketplace home with search-first hero, categories, and stock data from mashinify.com. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
@@ -0,0 +1,220 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@font-face {
|
||||
font-family: "iran-yekan";
|
||||
src: url("https://cdn.meshkee.com/web-builder/fonts/iran-yekan/iran-yekan-regular.ttf");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "iran-yekan";
|
||||
src: url("https://cdn.meshkee.com/web-builder/fonts/iran-yekan/iran-yekan-medium.ttf");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "iran-yekan";
|
||||
src: url("https://cdn.meshkee.com/web-builder/fonts/iran-yekan/iran-yekan-bold.ttf");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "iran-yekan";
|
||||
src: url("https://cdn.meshkee.com/web-builder/fonts/iran-yekan/iran-yekan-extrabold.ttf");
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: #f2f5f8;
|
||||
--foreground: #0f1720;
|
||||
--muted: #5b6775;
|
||||
--line: #d7e0ea;
|
||||
--surface: #ffffff;
|
||||
--brand: #006dd4;
|
||||
--brand-deep: #004f9a;
|
||||
--brand-ink: #06233f;
|
||||
--steel: #8fa3b8;
|
||||
--container: 1180px;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-line: var(--line);
|
||||
--color-surface: var(--surface);
|
||||
--color-brand: var(--brand);
|
||||
--color-brand-deep: var(--brand-deep);
|
||||
--color-brand-ink: var(--brand-ink);
|
||||
--color-steel: var(--steel);
|
||||
--font-sans: "iran-yekan", Tahoma, sans-serif;
|
||||
--font-display: var(--font-industrial), "Oswald", Impact, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: "iran-yekan", Tahoma, sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.latin-digits {
|
||||
font-family: Tahoma, Arial, "iran-yekan", sans-serif;
|
||||
unicode-bidi: isolate;
|
||||
font-variant-numeric: lining-nums;
|
||||
}
|
||||
|
||||
.font-industrial {
|
||||
font-family: var(--font-industrial), "Oswald", Impact, sans-serif;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container-page {
|
||||
width: min(var(--container), calc(100% - 2rem));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-block: 4.5rem;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.section-kicker {
|
||||
font-family: var(--font-industrial), "Oswald", Impact, sans-serif;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--brand);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0.35rem 0 0.5rem;
|
||||
font-size: clamp(1.55rem, 2.4vw, 2.15rem);
|
||||
font-weight: 800;
|
||||
color: var(--brand-ink);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
margin: 0;
|
||||
max-width: 36rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 3rem;
|
||||
padding: 0.7rem 1.35rem;
|
||||
background: var(--brand);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
transition: background 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--brand-deep);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 3rem;
|
||||
padding: 0.7rem 1.35rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.45);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
transition: background 0.25s ease, border-color 0.25s ease;
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
@keyframes rise-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes search-glow {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(0, 109, 212, 0.18);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 10px rgba(0, 109, 212, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-rise {
|
||||
animation: rise-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.animate-rise-delay-1 {
|
||||
animation-delay: 0.12s;
|
||||
}
|
||||
|
||||
.animate-rise-delay-2 {
|
||||
animation-delay: 0.24s;
|
||||
}
|
||||
|
||||
.animate-rise-delay-3 {
|
||||
animation-delay: 0.36s;
|
||||
}
|
||||
|
||||
.search-shell:focus-within {
|
||||
animation: search-glow 1.6s ease infinite;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-rise,
|
||||
.animate-rise-delay-1,
|
||||
.animate-rise-delay-2,
|
||||
.animate-rise-delay-3,
|
||||
.search-shell:focus-within {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user