53297a7cff
All checks were successful
Build and Deploy / Build & Push (push) Successful in 2m22s
Parks in the 1-hour buffer after scheduled close now show amber instead of green: the dot on the desktop calendar turns yellow, and the mobile card badge changes from "Open today" (green) to "Closing" (amber). - getOperatingStatus() replaces isWithinOperatingWindow's inline logic, returning "open" | "closing" | "closed"; isWithinOperatingWindow now delegates to it so all callers are unchanged - closingParkIds[] is computed server-side and threaded through HomePageClient → WeekCalendar/MobileCardList → ParkRow/ParkCard - New --color-closing-* CSS variables mirror the green palette in amber Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
117 lines
4.3 KiB
CSS
117 lines
4.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* ── Backgrounds — deep neutral dark, no purple tint ─────────────────────── */
|
|
--color-bg: #111111;
|
|
--color-surface: #1c1c1c;
|
|
--color-surface-2: #242424;
|
|
--color-surface-hover: #2c2c2c;
|
|
--color-border: #333333;
|
|
--color-border-subtle: #272727;
|
|
|
|
/* ── Text — clean white, no tint ─────────────────────────────────────────── */
|
|
--color-text: #f5f5f5;
|
|
--color-text-secondary: #b0b0b0;
|
|
--color-text-muted: #737373;
|
|
--color-text-dim: #4a4a4a;
|
|
|
|
/* ── Hot pink accent — neon sign energy ──────────────────────────────────── */
|
|
--color-accent: #ff4d8d;
|
|
--color-accent-hover: #e6006e;
|
|
--color-accent-text: #fff0f7;
|
|
--color-accent-muted: #3d0f22;
|
|
|
|
/* ── Open — electric lime green (go!) ────────────────────────────────────── */
|
|
--color-open-bg: #0a1a0d;
|
|
--color-open-border: #22c55e;
|
|
--color-open-text: #4ade80;
|
|
--color-open-hours: #bbf7d0;
|
|
|
|
/* ── Closing — amber (post-close buffer, rides still winding down) ───────── */
|
|
--color-closing-bg: #1a1100;
|
|
--color-closing-border: #d97706;
|
|
--color-closing-text: #fbbf24;
|
|
--color-closing-hours: #fde68a;
|
|
|
|
/* ── Passholder preview — vivid cyan ─────────────────────────────────────── */
|
|
--color-ph-bg: #051518;
|
|
--color-ph-border: #22d3ee;
|
|
--color-ph-hours: #cffafe;
|
|
--color-ph-label: #67e8f9;
|
|
|
|
/* ── Today — vivid yellow, unmissable ────────────────────────────────────── */
|
|
--color-today-bg: #1a1800;
|
|
--color-today-border: #facc15;
|
|
--color-today-text: #fef08a;
|
|
|
|
/* ── Weekend — barely-there dark tint ───────────────────────────────────────*/
|
|
--color-weekend-header: #181818;
|
|
|
|
/* ── Region header ───────────────────────────────────────────────────────── */
|
|
--color-region-bg: #161616;
|
|
--color-region-accent: #ff4d8d;
|
|
}
|
|
|
|
: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-surface-2);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-border);
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
/* ── 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 name link hover ────────────────────────────────────────────────── */
|
|
.park-name-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: background 150ms ease;
|
|
}
|
|
.park-name-link:hover {
|
|
background: var(--color-surface-hover);
|
|
}
|
|
|
|
/* ── Mobile park card hover ─────────────────────────────────────────────── */
|
|
.park-card {
|
|
transition: background 150ms ease;
|
|
}
|
|
.park-card:hover {
|
|
background: var(--color-surface-hover) !important;
|
|
}
|
|
|
|
/* ── 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;
|
|
}
|