Alap v3 — Tailwind CSS

Page layout uses Tailwind utilities. Alap menus are styled with plain CSS using Tailwind's design tokens (colors, radii, shadows).

Default Menu

My favorite cars — base styles using Tailwind color values.

.alapelem {
  background: #ffffff;
  border: 1px solid #e5e7eb;      /* gray-200 */
  border-radius: 0.5rem;          /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); /* shadow-lg */
}
.alapelem a:hover {
  background: #eff6ff;             /* blue-50 */
  color: #2563eb;                  /* blue-600 */
}

Green Accent (Bridges)

Famous bridges — green tint with bigger top offset.

.alap_bridges {
  margin-top: 1rem;
  background: #f0fdf4;            /* green-50 */
  border-color: #86efac;          /* green-300 */
}
.alap_bridges a:hover {
  background: #dcfce7;            /* green-100 */
  color: #166534;                 /* green-800 */
}

Warm Tones + Left Offset (Coffee)

Find some coffee — amber palette, shifted right with margin-left: 2rem.

.alap_coffee {
  margin-left: 2rem;
  background: #fffbeb;            /* amber-50 */
  border-color: #fcd34d;          /* amber-300 */
}
.alap_coffee a:hover {
  background: #fef3c7;            /* amber-100 */
  color: #92400e;                 /* amber-900 */
}

Dark Theme (NYC)

Explore NYC spots — slate background, light text.

.alap_nycspots {
  background: #1e293b;            /* slate-800 */
  border-color: #334155;          /* slate-700 */
}
.alap_nycspots a {
  color: #e2e8f0;                 /* slate-200 */
}
.alap_nycspots a:hover {
  background: #334155;            /* slate-700 */
  color: #60a5fa;                 /* blue-400 */
}

Pill Style (SF)

Check out SF spots — rounded pill shape with indigo accent.

.alap_sfspots {
  border-radius: 1rem;            /* rounded-2xl */
  border: 2px solid #c7d2fe;      /* indigo-200 */
  background: #eef2ff;            /* indigo-50 */
}
.alap_sfspots li:first-child a { border-radius: 1rem 1rem 0 0; }
.alap_sfspots li:last-child a  { border-radius: 0 0 1rem 1rem; }

The Pattern

/* 1. Base — all menus */
.alapelem { ... }

/* 2. Per-anchor — menu gets alap_{anchorId} */
.alap_bridges { ... }

/* 3. Per-item — li gets cssClass from config */
.highlight { ... }