nini-naderi/src/app/globals.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: 1680px;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .container-nn {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .container-nn {
    padding-inline: 2rem;
  }
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 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;
}

.rich-content {
  font-size: 0.95rem;
  line-height: 1.95;
  color: var(--muted);
}

.rich-content p,
.rich-content ul,
.rich-content ol,
.rich-content blockquote {
  margin-bottom: 1rem;
}

.rich-content h2,
.rich-content h3,
.rich-content h4 {
  color: var(--ink);
  font-weight: 700;
  margin: 1.5rem 0 0.75rem;
}

.rich-content ul,
.rich-content ol {
  padding-right: 1.25rem;
}

.rich-content a {
  color: var(--purple-700);
}

.rich-content img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
}

.slider-fade {
  animation: slider-in 520ms ease;
}

@keyframes slider-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.meshkee-credit {
  position: relative;
}

.meshkee-credit__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.meshkee-credit__line {
  position: absolute;
  background: #c8c8c8;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.meshkee-credit__line--l {
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  transition-delay: 0s;
}

.meshkee-credit__line--b {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition-delay: 0.14s;
}

.meshkee-credit__line--r {
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom;
  transition-delay: 0.28s;
}

.meshkee-credit__line--t {
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  transition-delay: 0.42s;
}

.meshkee-credit:hover .meshkee-credit__line--l,
.meshkee-credit:hover .meshkee-credit__line--r {
  transform: scaleY(1);
}

.meshkee-credit:hover .meshkee-credit__line--t,
.meshkee-credit:hover .meshkee-credit__line--b {
  transform: scaleX(1);
}

.meshkee-credit:not(:hover) .meshkee-credit__line--l {
  transition-delay: 0.42s;
}

.meshkee-credit:not(:hover) .meshkee-credit__line--b {
  transition-delay: 0.28s;
}

.meshkee-credit:not(:hover) .meshkee-credit__line--r {
  transition-delay: 0.14s;
}

.meshkee-credit:not(:hover) .meshkee-credit__line--t {
  transition-delay: 0s;
}