Feat/recipe dropdown paper

[Eric-Zhang-Developer]

Summary

Revamps the RecipeCard UI with a Minecraft book aesthetic and improves mobile responsiveness.

Changes

Visual Overhaul

• Replaced paper.png background with pure CSS "Minecraft book" style
  • Parchment gradient background (#e8dcc4 to #d4c4a8)
  • CSS-generated lined paper effect
  • Dark leather binding strip on the left edge
• Added reusable Badge component with two variants (time/macro) for visual differentiation
• Added SectionDivider component with gradient line between sections
• Styled ingredient bullets with diamond (◆) markers
• Styled instruction steps with numbered badge boxes

Mobile Responsiveness

• Collapsed cards now use minHeight: unset to remove forced 140px height
• Reduced padding on mobile (p-3 sm:p-4 for collapsed, p-4 sm:p-10 for expanded)
• Titles wrap naturally instead of truncating
• Responsive text sizes and gaps throughout

Button & Badge Consistency

• Unified button styles with dark leather primary (#5c3d2e) for Copy and Detailed Instructions
• Cost Breakdown button uses secondary parchment style (#d4c4a8)
• Cost breakdown badges themed to match paper aesthetic
• "You Save" badge uses greenish parchment (#a8c9a8) accent

Other

• Added pb-16 to results section for footer breathing room
• Added StepNumber component in InstructionsSection
• Added additionalButtons prop support to InstructionsSection

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
mealcraft	Ready	Preview, Comment	Jan 25, 2026 9:41am