josh
e48038c399
Some checks failed
Build and Deploy / Build & Push (push) Failing after 22s
Visual overhaul: - Warmer color system with amber accent for Today, better text hierarchy - Row hover highlighting, sticky column shadow on horizontal scroll - Closed cells replaced with dot (·) instead of "Closed" text - Regional grouping (Northeast/Southeast/Midwest/Texas & South/West) - Two-row header with park count badge and WeekNav on separate lines - Amber "Today" button in WeekNav when off current week - Mobile card layout (< 1024px) with 7-day grid per park; table on desktop - Skeleton loading state via app/loading.tsx Park detail pages (/park/[id]): - Month calendar view with ← → navigation via ?month= param - Live ride status fetched from Six Flags API (cached 1h) - Ride hours only shown when they differ from park operating hours - Fallback to nearest upcoming open day when today is dropped by API, including cross-month fallback for end-of-month edge case Data layer: - Park type gains region field; parks.ts exports groupByRegion() - db.ts gains getParkMonthData() for single-park month queries - sixflags.ts gains scrapeRidesForDay() returning RidesFetchResult with rides, dataDate, isExact, and parkHoursLabel Removed: CalendarGrid.tsx, MonthNav.tsx (dead code) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
109 lines
4.1 KiB
CSS
109 lines
4.1 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* ── Backgrounds ─────────────────────────────────────────────────────────── */
|
|
--color-bg: #0c1220;
|
|
--color-surface: #141c2e;
|
|
--color-surface-2: #1c2640;
|
|
--color-surface-hover: #222e4a;
|
|
--color-border: #1f2d45;
|
|
--color-border-subtle: #172035;
|
|
|
|
/* ── Text ────────────────────────────────────────────────────────────────── */
|
|
--color-text: #f1f5f9;
|
|
--color-text-secondary: #94a3b8;
|
|
--color-text-muted: #64748b;
|
|
--color-text-dim: #475569;
|
|
|
|
/* ── Warm accent (Today / active states) ─────────────────────────────────── */
|
|
--color-accent: #f59e0b;
|
|
--color-accent-hover: #d97706;
|
|
--color-accent-text: #fef3c7;
|
|
--color-accent-muted: #78350f;
|
|
|
|
/* ── Open (green) ────────────────────────────────────────────────────────── */
|
|
--color-open-bg: #052e16;
|
|
--color-open-border: #16a34a;
|
|
--color-open-text: #4ade80;
|
|
--color-open-hours: #dcfce7;
|
|
|
|
/* ── Passholder preview (purple) ─────────────────────────────────────────── */
|
|
--color-ph-bg: #1e0f2e;
|
|
--color-ph-border: #7e22ce;
|
|
--color-ph-hours: #e9d5ff;
|
|
--color-ph-label: #c084fc;
|
|
|
|
/* ── Today column (amber instead of cold blue) ───────────────────────────── */
|
|
--color-today-bg: #1c1a0e;
|
|
--color-today-border: #f59e0b;
|
|
--color-today-text: #fde68a;
|
|
|
|
/* ── Weekend header ──────────────────────────────────────────────────────── */
|
|
--color-weekend-header: #141f35;
|
|
|
|
/* ── Region header ───────────────────────────────────────────────────────── */
|
|
--color-region-bg: #0e1628;
|
|
--color-region-accent: #334155;
|
|
}
|
|
|
|
:root {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ── Scrollbar ───────────────────────────────────────────────────────────── */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-bg);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-border);
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-text-muted);
|
|
}
|
|
|
|
/* ── Sticky column shadow when scrolling ─────────────────────────────────── */
|
|
.sticky-shadow {
|
|
box-shadow: 4px 0 16px -2px rgba(0, 0, 0, 0.5);
|
|
clip-path: inset(0 -16px 0 0);
|
|
}
|
|
|
|
/* ── Park row hover (group/group-hover via Tailwind not enough across sticky cols) */
|
|
.park-row:hover td,
|
|
.park-row:hover th {
|
|
background-color: var(--color-surface-hover) !important;
|
|
}
|
|
|
|
/* ── Park name link hover ────────────────────────────────────────────────── */
|
|
.park-name-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: color 120ms ease;
|
|
}
|
|
.park-name-link:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* ── Pulse animation for skeleton ───────────────────────────────────────── */
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
.skeleton {
|
|
animation: pulse 1.8s ease-in-out infinite;
|
|
background-color: var(--color-surface);
|
|
border-radius: 4px;
|
|
}
|