Alireza HassaniandCursor
1a2b62463e
Hide page content behind the menu with a near-solid blur panel. Co-authored-by: Cursor <cursoragent@cursor.com>
140 lines
3.5 KiB
CSS
140 lines
3.5 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--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-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);
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
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.42);
|
|
backdrop-filter: blur(36px);
|
|
-webkit-backdrop-filter: blur(36px);
|
|
border: 1px solid rgb(255 255 255 / 0.55);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|