PMFlow/frontend/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --font-sans: "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    --font-display: "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    --pmflow-brand: #2463eb;
    --pmflow-brand-soft: #eef4ff;
    --pmflow-brand-border: #cfe0ff;
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221 83% 53%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221 83% 53%;
    --radius: 0.75rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 221 83% 53%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 221 83% 53%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
    text-rendering: optimizeLegibility;
  }

  html {
    scroll-behavior: smooth;
  }
}

@layer utilities {
  .font-display {
    font-family: var(--font-display);
  }

  .pmflow-grid {
    background-image:
      linear-gradient(rgba(36, 99, 235, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(36, 99, 235, 0.05) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: radial-gradient(circle at center, black, transparent 84%);
  }
}

@keyframes pmflow-drift {
  0% {
    transform: translateX(-6%);
  }

  50% {
    transform: translateX(6%);
  }

  100% {
    transform: translateX(-6%);
  }
}

@keyframes pmflow-rise {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes slideRightIn {
  from {
    opacity: 0;
    filter: blur(20px);
    transform: translateX(36px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
}

@keyframes testimonialIn {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(24px) scale(0.96);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@layer utilities {
  .animate-element {
    opacity: 0;
    animation: fadeSlideIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .animate-slide-right {
    opacity: 0;
    animation: slideRightIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .animate-testimonial {
    opacity: 0;
    animation: testimonialIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .animate-delay-100 {
    animation-delay: 100ms;
  }

  .animate-delay-200 {
    animation-delay: 200ms;
  }

  .animate-delay-300 {
    animation-delay: 300ms;
  }

  .animate-delay-400 {
    animation-delay: 400ms;
  }

  .animate-delay-500 {
    animation-delay: 500ms;
  }

  .animate-delay-600 {
    animation-delay: 600ms;
  }

  .animate-delay-700 {
    animation-delay: 700ms;
  }

  .animate-delay-800 {
    animation-delay: 800ms;
  }

  .animate-delay-900 {
    animation-delay: 900ms;
  }

  .animate-delay-1000 {
    animation-delay: 1000ms;
  }

  .animate-delay-1200 {
    animation-delay: 1200ms;
  }

  .animate-delay-1400 {
    animation-delay: 1400ms;
  }

  .animate-delay-1600 {
    animation-delay: 1600ms;
  }

  .custom-checkbox {
    position: relative;
    height: 1.125rem;
    width: 1.125rem;
    appearance: none;
    border-radius: 0.45rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background));
    transition: all 0.2s ease;
  }

  .custom-checkbox:checked {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary));
    box-shadow: 0 0 0 4px hsl(var(--primary) / 0.14);
  }

  .custom-checkbox::after {
    content: "";
    position: absolute;
    left: 0.36rem;
    top: 0.14rem;
    height: 0.5rem;
    width: 0.24rem;
    border: solid transparent;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: border-color 0.2s ease;
  }

  .custom-checkbox:checked::after {
    border-color: white;
  }

  .font-geist {
    font-family: var(--font-sans);
  }
}