黑色电影

STYLE: Film Noir
TYPE: Dramatic high-contrast monochrome interface

MUST USE:
- Deep black background: bg-[#0a0a0a] or bg-neutral-950
- Grayscale palette: neutral-100 through neutral-950
- Serif italic headings: font-serif italic
- Extremely subtle layer separation: bg-neutral-900 vs bg-neutral-800
- Minimal crimson accent: text-[#c41e3a] / bg-[#c41e3a] (sparingly)
- Diagonal gradient light effects for drama
- Thin or no borders: border-neutral-800
- Uppercase small tracking labels: text-xs uppercase tracking-[0.2em]

MUST AVOID:
- Colorful backgrounds
- High saturation colors (crimson only as rare accent)
- Large rounded corners (rounded-2xl+)
- Cartoon/cute elements
- Glow effects (forbidden — breaks the noir darkness)
- Gradient buttons
- Emoji or playful iconography
- Buttons without active:scale-[0.98]
- focus:ring without focus:ring-offset-neutral-950
- Animation duration below 300ms (Noir is slow and dramatic, not snappy)

COLOR SYSTEM:
- Background: #0a0a0a (near black)
- Card: neutral-900
- Card border hover: neutral-600 (from neutral-800)
- Text primary: neutral-100 → white on group-hover
- Text secondary: neutral-400 → neutral-300 on group-hover
- Text muted: neutral-500
- Crimson accent: #c41e3a (very sparingly)
- Gold accent: #d4af37 (very sparingly)
- Borders: neutral-700 to neutral-800

## Animation & Interaction Rules

- Light Shaft Sweep: ALL buttons use group class. Inside, an absolute div with bg-gradient-to-r from-transparent via-white/30 to-transparent starts at -translate-x-[200%] skew-x-[-20deg] and sweeps to translate-x-[200%] on group-hover. Use transition-transform duration-700 ease-in-out. The skew creates a diagonal "flashlight beam" effect. The sweep is slow and deliberate — this is noir, not a sprint.
- Harsh Monochrome Swap: Primary button hover does hover:bg-neutral-100 hover:text-neutral-950 hover:border-neutral-100. This is a complete binary inversion (dark→light), not a gradual shade change. The abruptness reflects 40s film drama where scenes cut hard between shadow and light.
- Venetian Blinds Pattern: Cards have an absolute overlay with bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,#fff_4px,#fff_6px)] at opacity-0, transitioning to group-hover:opacity-[0.06]. This is barely perceptible — like light filtering through half-closed window blinds in a detective's office.
- Crimson Bleed: Cards include a horizontal line w-12 h-[2px] bg-[#c41e3a] that expands to group-hover:w-full over duration-700 ease-out. Simulates blood spreading, or a film title card's crimson underline unfurling.
- Text Reveal: Card headings and body text brighten on group-hover (neutral-100→white, neutral-400→neutral-300) using transition-colors duration-500. Combined with venetian blinds pattern, creates the effect of light falling on text.
- Tactile Confirmation: ALL buttons must use active:scale-[0.98].
- Focus Ring Dark: Always use focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 focus:ring-offset-neutral-950.
- Slow Easing: Buttons use duration-500. Cards use duration-700. The sweeping light shaft uses duration-700 ease-in-out. NEVER use duration below 300ms — slowness is inherent to noir's dramatic weight.

## Self-Check

After generating code, verify:
1. All buttons are wrapped in group, have the light shaft sweep div inside
2. All buttons have active:scale-[0.98]
3. All focusable elements have focus:ring-offset-neutral-950
4. Cards have venetian blinds overlay (opacity-0 → group-hover:opacity-[0.06])
5. Cards have crimson bleed line (w-12 → group-hover:w-full)
6. No animation duration below 300ms
7. No rounded-2xl or larger

/* Film Noir Global Styles */
@layer base {
  body {
    @apply bg-[#0a0a0a] text-neutral-300 antialiased;
  }

  h1, h2, h3 {
    @apply font-serif italic;
  }

  ::selection {
    @apply bg-neutral-300 text-neutral-950;
  }
}

@keyframes noir-spotlight {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.1; }
}

@keyframes noir-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Film Noir Design Tokens */
:root {
  --film-noir-primary: #1a1a1a;
  --film-noir-secondary: #f5f5f0;
  --film-noir-accent: #c41e3a;
  --film-noir-glow: rgba(26, 26, 26, 0.3);
}

.film-noir-card {
  position: relative;
  overflow: hidden;
}

.film-noir-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.05), transparent);
  pointer-events: none;
}

.film-noir-card:hover::before {
  opacity: 1;
}

.film-noir-gradient {
  background: linear-gradient(135deg, #1a1a1a, #c41e3a);
}

.film-noir-gradient-text {
  background: linear-gradient(135deg, #1a1a1a, #c41e3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.film-noir-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(26, 26, 26, 0.08);
}

.film-noir-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.film-noir-animate-in {
  animation: film-noir-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-neutral-800",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-sm",
    "md": "shadow-md",
    "lg": "shadow-lg",
    "none": "shadow-none",
    "hover": "shadow-lg",
    "focus": "ring-1 ring-neutral-600",
    "colored": {
      "crimson": "shadow-[0_4px_20px_rgba(196,30,58,0.2)]",
      "gold": "shadow-[0_4px_20px_rgba(212,175,55,0.15)]"
    }
  },
  "interaction": {
    "transition": "transition-colors duration-500",
    "active": "active:scale-95",
    "hoverScale": "hover:bg-neutral-800/80"
  },
  "typography": {
    "heading": "font-serif italic",
    "body": "font-sans",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-5xl md:text-7xl lg:text-8xl",
      "h1": "text-4xl md:text-5xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-20 md:py-32",
    "container": "px-8 md:px-12",
    "card": "p-8",
    "gap": {
      "sm": "gap-4",
      "md": "gap-6",
      "lg": "gap-10"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#0a0a0a]",
      "secondary": "bg-neutral-900",
      "accent": [
        "bg-neutral-800",
        "bg-[#c41e3a]"
      ]
    },
    "text": {
      "primary": "text-neutral-100",
      "secondary": "text-neutral-400",
      "muted": "text-neutral-600"
    },
    "button": {
      "primary": "bg-neutral-100 text-neutral-950",
      "secondary": "bg-transparent border border-neutral-500 text-neutral-300",
      "danger": "bg-[#c41e3a] text-white"
    }
  },
  "forbidden": {
    "classes": [
      "bg-blue-",
      "bg-green-",
      "bg-pink-",
      "bg-purple-",
      "bg-yellow-",
      "rounded-2xl",
      "rounded-3xl",
      "rounded-full",
      "shadow-[0_0_",
      "text-shadow",
      "bg-gradient-to-r from-pink",
      "bg-gradient-to-r from-blue",
      "animate-bounce",
      "animate-spin"
    ],
    "patterns": [
      "^bg-(?:blue|green|pink|purple|yellow|cyan|teal|indigo|violet|fuchsia)-",
      "^rounded-(?:2xl|3xl|full)",
      "^shadow-\\[0_0_",
      "^animate-(?:bounce|spin|wiggle)"
    ],
    "reasons": {
      "bg-blue-": "Film Noir uses grayscale only; no colored backgrounds",
      "rounded-2xl": "Film Noir uses sharp corners or minimal rounding",
      "shadow-[0_0_": "No glow effects; use directional shadows for drama",
      "animate-bounce": "Playful animations break the noir atmosphere"
    }
  },
  "required": {
    "button": [
      "font-serif",
      "italic",
      "tracking-wide",
      "transition-colors"
    ],
    "card": [
      "bg-neutral-900",
      "relative",
      "overflow-hidden"
    ],
    "input": [
      "bg-neutral-950",
      "border",
      "font-serif",
      "focus:outline-none"
    ]
  }
}