Add Nini Naderi Persian RTL homepage.
Build the kids clothing store landing page with sample content, placeholders, and the purple-cyan-red light theme. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
4b3d9dede8
commit
78ef438f9d
+127
-14
@@ -1,26 +1,139 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--purple-50: #f6f1ff;
|
||||
--purple-100: #ede4ff;
|
||||
--purple-200: #d8c6ff;
|
||||
--purple-300: #c4a5ff;
|
||||
--purple-500: #8b5cf6;
|
||||
--purple-600: #7c3aed;
|
||||
--purple-700: #6d28d9;
|
||||
--purple-800: #5b21b6;
|
||||
--purple-900: #3b0764;
|
||||
--cyan-50: #ecfeff;
|
||||
--cyan-100: #cffafe;
|
||||
--cyan-200: #a5f3fc;
|
||||
--cyan-300: #67e8f9;
|
||||
--cyan-400: #22d3ee;
|
||||
--cyan-500: #06b6d4;
|
||||
--cyan-600: #0891b2;
|
||||
--rose-50: #fff1f2;
|
||||
--rose-100: #ffe4e6;
|
||||
--rose-200: #fecdd3;
|
||||
--rose-300: #fda4af;
|
||||
--rose-500: #f43f5e;
|
||||
--rose-600: #e11d48;
|
||||
--ink: #2a1838;
|
||||
--muted: #6d5b78;
|
||||
--line: #efe6f5;
|
||||
--paper: #fffafd;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-purple-50: var(--purple-50);
|
||||
--color-purple-100: var(--purple-100);
|
||||
--color-purple-200: var(--purple-200);
|
||||
--color-purple-300: var(--purple-300);
|
||||
--color-purple-500: var(--purple-500);
|
||||
--color-purple-600: var(--purple-600);
|
||||
--color-purple-700: var(--purple-700);
|
||||
--color-purple-800: var(--purple-800);
|
||||
--color-purple-900: var(--purple-900);
|
||||
--color-cyan-50: var(--cyan-50);
|
||||
--color-cyan-100: var(--cyan-100);
|
||||
--color-cyan-200: var(--cyan-200);
|
||||
--color-cyan-300: var(--cyan-300);
|
||||
--color-cyan-400: var(--cyan-400);
|
||||
--color-cyan-500: var(--cyan-500);
|
||||
--color-cyan-600: var(--cyan-600);
|
||||
--color-rose-50: var(--rose-50);
|
||||
--color-rose-100: var(--rose-100);
|
||||
--color-rose-200: var(--rose-200);
|
||||
--color-rose-300: var(--rose-300);
|
||||
--color-rose-500: var(--rose-500);
|
||||
--color-rose-600: var(--rose-600);
|
||||
--color-ink: var(--ink);
|
||||
--color-muted: var(--muted);
|
||||
--color-line: var(--line);
|
||||
--color-paper: var(--paper);
|
||||
--font-sans: var(--font-vazirmatn), "IranYekan", "IRANSans", Tahoma, sans-serif;
|
||||
--font-display: var(--font-fredoka), "Fredoka", "Comic Sans MS", cursive;
|
||||
--shadow-card: 0 10px 30px -18px rgb(91 33 182 / 0.28);
|
||||
--shadow-soft: 0 8px 24px -16px rgb(42 24 56 / 0.18);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background-color: var(--paper);
|
||||
background-image:
|
||||
radial-gradient(ellipse 90% 42% at 10% 8%, rgb(237 228 255 / 0.9), transparent 70%),
|
||||
radial-gradient(ellipse 80% 38% at 92% 6%, rgb(207 250 254 / 0.85), transparent 68%),
|
||||
radial-gradient(ellipse 85% 40% at 78% 28%, rgb(255 228 230 / 0.8), transparent 70%),
|
||||
radial-gradient(ellipse 70% 28% at 18% 36%, rgb(237 228 255 / 0.55), transparent 72%),
|
||||
linear-gradient(to bottom, transparent 0%, transparent 62%, var(--paper) 100%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 2200px;
|
||||
background-position: top center;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.glass-box {
|
||||
background: rgb(255 255 255 / 0.58);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
border: 1px solid rgb(255 255 255 / 0.72);
|
||||
}
|
||||
|
||||
.font-display {
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.font-count {
|
||||
font-family: var(--font-count), var(--font-vazirmatn), sans-serif;
|
||||
}
|
||||
|
||||
.container-nn {
|
||||
margin-inline: auto;
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container-nn {
|
||||
padding-inline: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-grid {
|
||||
background-image: linear-gradient(135deg, rgb(255 255 255 / 0.22) 0%, transparent 48%);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.slider-fade {
|
||||
animation: slider-in 520ms ease;
|
||||
}
|
||||
|
||||
@keyframes slider-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(18px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user