Shadows & Depth

Box shadow, drop shadow, text shadow, glassmorphism, and hover/focus shadow effects.

Container Shadow

--alap-shadow sets the box-shadow on the whole menu. Use bold, colored shadows on dark backgrounds — subtle rgba(0,0,0,...) shadows are invisible on dark.

Subtle

coffee

Purple glow

coffee

Hard offset

coffee

/* Subtle tint */
--alap-shadow: 0 2px 8px #6366f1;

/* Purple glow */
--alap-shadow: 0 0 20px 4px rgba(99, 102, 241, 0.5);

/* Hard offset (brutalist) */
--alap-shadow: 8px 8px 0 #fbbf24;

Per-Item Shadow (hover)

--alap-hover-shadow adds a box-shadow to the individual menu item on hover.

No container shadow — only hovered item gets a glow: coffee spots

--alap-shadow: none;          /* remove container shadow */
--alap-hover-shadow: 0 0 12px 2px rgba(99, 102, 241, 0.5);
--alap-transition: box-shadow 0.2s ease;

Container + Per-Item Shadow

Combine container glow with per-item hover lift for a layered depth effect.

Glow + hover lift

coffee

Hard offset + hover inset

coffee

/* Glow + hover lift */
--alap-shadow: 0 0 30px 5px rgba(99, 102, 241, 0.3);
--alap-hover-shadow: 0 4px 16px rgba(251, 191, 36, 0.5);

/* Hard offset + subtle item drop shadow */
--alap-shadow: 6px 6px 0 #fbbf24;
--alap-hover-shadow: 0 3px 8px rgba(251, 191, 36, 0.4);

Drop Shadow (filter)

--alap-drop-shadow uses filter: drop-shadow() instead of box-shadow. Disable --alap-shadow so both don't render at once.

coffee

--alap-drop-shadow: drop-shadow(0 4px 8px #06b6d4);
--alap-shadow: none;  /* disable box-shadow */

Text Shadow

Subtle emboss

bridges

Neon glow

bridges

/* Subtle emboss — light text on dark background */
--alap-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

/* Neon glow */
--alap-text-shadow: 0 0 8px rgba(56, 189, 248, 0.6),
                    0 0 20px rgba(56, 189, 248, 0.3);

Hover Text Shadow

Text glow appears only on hover: coffee spots

Base text has no shadow. Hover adds a glow effect.

.hover-glow alap-link {
  --alap-hover-text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  --alap-transition: text-shadow 0.2s ease;
}

Item Hover Shadow

Box shadow lifts the hovered item: bridges

--alap-hover-shadow adds depth to the individual menu item on hover.

--alap-hover-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
--alap-transition: box-shadow 0.2s ease, background 0.15s ease;

Menu Hover Shadow

--alap-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
--alap-menu-hover-shadow: 0 16px 40px rgba(99, 102, 241, 0.5);
--alap-menu-transition: box-shadow 0.3s ease;

Focus Shadow

Keyboard focus ring + shadow: bridges

Tab into the menu and use arrow keys. --alap-focus-shadow adds a soft glow around the focused item beyond the outline ring.

--alap-focus-shadow: 0 0 0 4px rgba(99, 102, 241, 0.4);
--alap-focus-ring: #6366f1;

Glassmorphism

Frosted glass menu: coffee spots

--alap-backdrop applies backdrop-filter for frosted glass. Semi-transparent --alap-bg lets the background show through.

--alap-bg: rgba(255, 255, 255, 0.12);
--alap-backdrop: blur(12px) saturate(180%);
--alap-border: rgba(255, 255, 255, 0.2);
--alap-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
--alap-radius: 16px;
--alap-corner-shape: squircle;

Menu Opacity

Semi-transparent menu: bridges

--alap-opacity affects the entire menu including text. For transparent backgrounds with opaque text, use --alap-bg with rgba() instead.

--alap-opacity: 0.85;