Shadows

Y3NKO uses warm-tinted shadows instead of neutral gray shadows for a cohesive, inviting feel.

Shadow Scale

:root {
  --shadow-warm-sm: 0 1px 3px rgba(44, 24, 16, 0.08);
  --shadow-warm-md: 0 4px 12px rgba(44, 24, 16, 0.12);
  --shadow-warm-lg: 0 8px 24px rgba(44, 24, 16, 0.16);
  --shadow-warm-xl: 0 16px 40px rgba(44, 24, 16, 0.2);
  --shadow-warm-glow: 0 4px 20px rgba(212, 168, 83, 0.2);
}

Shadow Types

Small Shadow

Subtle elevation for inputs, badges, and small components.

<div className="shadow-warm-sm">
  {/* Subtle elevation */}
</div>

Medium Shadow

Cards at rest, dropdowns, popovers.

<Card className="shadow-warm-md">
  {/* Card content */}
</Card>

Large Shadow

Cards on hover, modals, elevated content.

<Card className="hover:shadow-warm-lg transition-shadow duration-300">
  {/* Card with hover elevation */}
</Card>

Extra Large Shadow

Hero elements, full-screen modals.

<div className="shadow-warm-xl">
  {/* Prominent element */}
</div>

Gold Glow

Accent highlight for featured elements and focus states.

<div className="shadow-warm-glow">
  {/* Featured/highlighted element */}
</div>

Utility Classes

Add these to globals.css:

.shadow-warm-sm {
  box-shadow: var(--shadow-warm-sm);
}
.shadow-warm-md {
  box-shadow: var(--shadow-warm-md);
}
.shadow-warm-lg {
  box-shadow: var(--shadow-warm-lg);
}
.shadow-warm-xl {
  box-shadow: var(--shadow-warm-xl);
}
.shadow-warm-glow {
  box-shadow: var(--shadow-warm-glow);
}

Usage Patterns

Card Elevation

{/* Card at rest */}
<Card className="border border-gray-100">
  {/* No shadow at rest for cleaner look */}
</Card>
 
{/* Card with hover elevation */}
<Card className="border border-gray-100 hover:shadow-warm-lg transition-shadow duration-300">
  {/* Lifts on hover */}
</Card>

Sticky Header

<header className="sticky top-0 bg-white/95 backdrop-blur-sm shadow-warm-sm">
  {/* Header content */}
</header>

Booking Card (Sticky)

<aside className="sticky top-24 shadow-warm-lg rounded-xl border border-gray-100 overflow-hidden">
  {/* Red top accent bar */}
  <div className="h-1 bg-[#CE1126]" />
  <div className="p-6">
    {/* Booking form */}
  </div>
</aside>

<DropdownMenu>
  <DropdownMenuContent className="shadow-warm-lg border border-gray-100">
    {/* Menu items */}
  </DropdownMenuContent>
</DropdownMenu>

Modal/Dialog

<Dialog>
  <DialogContent className="shadow-warm-xl">
    {/* Modal content */}
  </DialogContent>
</Dialog>

Featured Badge

<span className="inline-flex px-3 py-1 bg-[#D4A853] text-white rounded-full shadow-warm-glow">
  Featured
</span>

Hover Interactions

Lift Effect

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-warm-lg);
}

<Card className="hover-lift">
  {/* Card lifts and gains shadow on hover */}
</Card>

Glow Effect

.hover-glow {
  transition: box-shadow 0.3s ease;
}
.hover-glow:hover {
  box-shadow: var(--shadow-warm-glow);
}

<Button className="hover-glow">
  {/* Button glows on hover */}
</Button>

Why Warm Shadows?

Standard gray shadows (rgba(0,0,0,0.1)) feel cold and clinical. Our warm shadows use the coffee color base (rgb(44, 24, 16)) to:

Maintain warmth - Shadows feel part of the design, not an afterthought
Add depth - Warm shadows create a richer sense of elevation
Brand cohesion - Every element feels intentionally designed

Comparison

/* Cold (avoid) */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 
/* Warm (preferred) */
box-shadow: 0 4px 12px rgba(44, 24, 16, 0.12);

Shadows with Borders

For a more defined edge, combine shadows with subtle borders:

<Card className="border border-gray-100 hover:shadow-warm-lg">
  {/* Clean edge + soft shadow */}
</Card>

Accessibility

Shadows are decorative and don’t affect accessibility. However, ensure:

Focus states use outlines, not just shadows
Contrast ratios aren’t affected by shadow overlays
Interactive elements remain clearly distinguishable

Spacing Motion