30f3ecc6ad
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> This commit refactors the entire application to replace the 'parties' concept with 'events'. All controllers, models, views, and related files have been updated to reflect this change. The parties table has been replaced with an events table, and all related functionality has been updated accordingly.
618 lines
15 KiB
CSS
Executable File
618 lines
15 KiB
CSS
Executable File
/* Enhanced Aperonight Design System - Event Booking Optimized */
|
|
:root {
|
|
/* Enhanced Purple gradient system with more depth */
|
|
--color-primary-50: #faf5ff;
|
|
--color-primary-100: #f3e8ff;
|
|
--color-primary-200: #e9d5ff;
|
|
--color-primary-300: #d8b4fe;
|
|
--color-primary-400: #c084fc;
|
|
--color-primary-500: #a855f7;
|
|
--color-primary-600: #9333ea;
|
|
--color-primary-700: #7e22ce;
|
|
--color-primary-800: #6b21a8;
|
|
--color-primary-900: #581c87;
|
|
--color-primary-950: #3b0764; /* Added for deeper contrast */
|
|
|
|
/* Enhanced Pink gradient for event highlights */
|
|
--color-accent-300: #f9a8d4;
|
|
--color-accent-400: #f472b6;
|
|
--color-accent-500: #ec4899;
|
|
--color-accent-600: #db2777;
|
|
--color-accent-700: #be185d; /* Added for better hierarchy */
|
|
|
|
/* Enhanced Neutral system with warmer tones */
|
|
--color-neutral-50: #f8fafc;
|
|
--color-neutral-100: #f1f5f9;
|
|
--color-neutral-200: #e2e8f0;
|
|
--color-neutral-300: #cbd5e1;
|
|
--color-neutral-400: #94a3b8;
|
|
--color-neutral-500: #64748b;
|
|
--color-neutral-600: #475569;
|
|
--color-neutral-700: #334155;
|
|
--color-neutral-800: #1e293b;
|
|
--color-neutral-900: #0f172a;
|
|
--color-neutral-950: #020617; /* Added for deeper backgrounds */
|
|
|
|
/* Event-specific semantic colors */
|
|
--color-success-light: #dcfce7;
|
|
--color-success: #16a34a;
|
|
--color-success-dark: #15803d;
|
|
--color-warning-light: #fef3c7;
|
|
--color-warning: #f59e0b;
|
|
--color-warning-dark: #d97706;
|
|
--color-danger-light: #fee2e2;
|
|
--color-danger: #dc2626;
|
|
--color-danger-dark: #b91c1c;
|
|
|
|
/* Event status colors */
|
|
--color-event-featured: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%);
|
|
--color-event-available: var(--color-success);
|
|
--color-event-limited: var(--color-warning);
|
|
--color-event-sold-out: var(--color-danger);
|
|
--color-event-vip: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
|
|
|
|
/* Enhanced Typography with better hierarchy */
|
|
--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-display: 'Outfit', var(--font-sans); /* For headings and key content */
|
|
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', monospace;
|
|
|
|
/* Enhanced font sizes with golden ratio scaling */
|
|
--text-xs: 0.75rem; /* 12px */
|
|
--text-sm: 0.875rem; /* 14px */
|
|
--text-base: 1rem; /* 16px */
|
|
--text-lg: 1.125rem; /* 18px */
|
|
--text-xl: 1.25rem; /* 20px */
|
|
--text-2xl: 1.5rem; /* 24px */
|
|
--text-3xl: 1.875rem; /* 30px */
|
|
--text-4xl: 2.25rem; /* 36px */
|
|
--text-5xl: 3rem; /* 48px - for hero sections */
|
|
--text-6xl: 3.75rem; /* 60px - for major headings */
|
|
|
|
/* Enhanced spacing system */
|
|
--space-px: 1px;
|
|
--space-0-5: 0.125rem; /* 2px */
|
|
--space-1: 0.25rem; /* 4px */
|
|
--space-1-5: 0.375rem; /* 6px */
|
|
--space-2: 0.5rem; /* 8px */
|
|
--space-2-5: 0.625rem; /* 10px */
|
|
--space-3: 0.75rem; /* 12px */
|
|
--space-3-5: 0.875rem; /* 14px */
|
|
--space-4: 1rem; /* 16px */
|
|
--space-5: 1.25rem; /* 20px */
|
|
--space-6: 1.5rem; /* 24px */
|
|
--space-7: 1.75rem; /* 28px */
|
|
--space-8: 2rem; /* 32px */
|
|
--space-9: 2.25rem; /* 36px */
|
|
--space-10: 2.5rem; /* 40px */
|
|
--space-11: 2.75rem; /* 44px */
|
|
--space-12: 3rem; /* 48px */
|
|
--space-14: 3.5rem; /* 56px */
|
|
--space-16: 4rem; /* 64px */
|
|
--space-20: 5rem; /* 80px */
|
|
--space-24: 6rem; /* 96px */
|
|
|
|
/* Enhanced border radius system */
|
|
--radius-none: 0px;
|
|
--radius-sm: 0.25rem; /* 4px */
|
|
--radius-md: 0.375rem; /* 6px */
|
|
--radius: 0.5rem; /* 8px */
|
|
--radius-lg: 0.75rem; /* 12px */
|
|
--radius-xl: 1rem; /* 16px */
|
|
--radius-2xl: 1.5rem; /* 24px */
|
|
--radius-3xl: 2rem; /* 32px */
|
|
--radius-full: 9999px;
|
|
|
|
/* Enhanced shadow system with color variations */
|
|
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
|
|
|
/* Purple-tinted shadows for premium feel */
|
|
--shadow-purple-sm: 0 1px 3px 0 rgb(147 51 234 / 0.1), 0 1px 2px -1px rgb(147 51 234 / 0.1);
|
|
--shadow-purple-md: 0 4px 6px -1px rgb(147 51 234 / 0.1), 0 2px 4px -2px rgb(147 51 234 / 0.1);
|
|
--shadow-purple-lg: 0 10px 15px -3px rgb(147 51 234 / 0.15), 0 4px 6px -4px rgb(147 51 234 / 0.1);
|
|
|
|
/* Pink-tinted shadows for event highlights */
|
|
--shadow-pink-sm: 0 1px 3px 0 rgb(236 72 153 / 0.1), 0 1px 2px -1px rgb(236 72 153 / 0.1);
|
|
--shadow-pink-md: 0 4px 6px -1px rgb(236 72 153 / 0.1), 0 2px 4px -2px rgb(236 72 153 / 0.1);
|
|
|
|
/* Animation durations */
|
|
--duration-fast: 0.15s;
|
|
--duration-normal: 0.2s;
|
|
--duration-slow: 0.3s;
|
|
--duration-slower: 0.5s;
|
|
|
|
/* Easing functions */
|
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
/* Enhanced Component Styles */
|
|
|
|
/* Buttons with improved hierarchy */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
font-family: var(--font-display);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
transition: all var(--duration-normal) var(--ease-in-out);
|
|
cursor: pointer;
|
|
border: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: var(--space-2) var(--space-3);
|
|
font-size: var(--text-sm);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.btn-md {
|
|
padding: var(--space-3) var(--space-4);
|
|
font-size: var(--text-base);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: var(--space-4) var(--space-6);
|
|
font-size: var(--text-lg);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%);
|
|
color: white;
|
|
box-shadow: var(--shadow-purple-sm);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-accent-600) 100%);
|
|
box-shadow: var(--shadow-purple-md);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(0);
|
|
box-shadow: var(--shadow-purple-sm);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: white;
|
|
color: var(--color-primary-600);
|
|
border: 1px solid var(--color-neutral-200);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--color-primary-50);
|
|
border-color: var(--color-primary-300);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
color: var(--color-primary-600);
|
|
border: 2px solid var(--color-primary-600);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: var(--color-primary-600);
|
|
color: white;
|
|
box-shadow: var(--shadow-purple-sm);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--color-neutral-600);
|
|
border: none;
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
background: var(--color-neutral-100);
|
|
color: var(--color-primary-600);
|
|
}
|
|
|
|
/* Enhanced Cards */
|
|
.card {
|
|
background: white;
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--color-neutral-200);
|
|
overflow: hidden;
|
|
transition: all var(--duration-normal) var(--ease-in-out);
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: var(--shadow-lg);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.card-interactive {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card-interactive:hover {
|
|
box-shadow: var(--shadow-xl);
|
|
transform: translateY(-4px);
|
|
border-color: var(--color-primary-200);
|
|
}
|
|
|
|
.card-header {
|
|
padding: var(--space-6);
|
|
border-bottom: 1px solid var(--color-neutral-200);
|
|
}
|
|
|
|
.card-body {
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.card-footer {
|
|
padding: var(--space-4) var(--space-6);
|
|
background: var(--color-neutral-50);
|
|
border-top: 1px solid var(--color-neutral-200);
|
|
}
|
|
|
|
/* Event-specific cards */
|
|
.event-card {
|
|
position: relative;
|
|
background: white;
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-md);
|
|
overflow: hidden;
|
|
transition: all var(--duration-slow) var(--ease-out);
|
|
border: 1px solid var(--color-neutral-200);
|
|
}
|
|
|
|
.event-card:hover {
|
|
box-shadow: var(--shadow-2xl);
|
|
transform: translateY(-6px) scale(1.02);
|
|
}
|
|
|
|
.event-card-featured {
|
|
border: 2px solid transparent;
|
|
background: linear-gradient(white, white) padding-box,
|
|
linear-gradient(135deg, var(--color-primary-600), var(--color-accent-500)) border-box;
|
|
box-shadow: var(--shadow-purple-lg);
|
|
}
|
|
|
|
.event-card-featured::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: var(--color-event-featured);
|
|
}
|
|
|
|
.event-card-image {
|
|
aspect-ratio: 16/9;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.event-card-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform var(--duration-slow) var(--ease-out);
|
|
}
|
|
|
|
.event-card:hover .event-card-image img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Enhanced Forms */
|
|
.form-group {
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
color: var(--color-neutral-700);
|
|
margin-bottom: var(--space-2);
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
width: 100%;
|
|
padding: var(--space-3) var(--space-4);
|
|
font-size: var(--text-base);
|
|
color: var(--color-neutral-900);
|
|
background: white;
|
|
border: 1px solid var(--color-neutral-300);
|
|
border-radius: var(--radius-lg);
|
|
transition: all var(--duration-normal) var(--ease-in-out);
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-select:focus,
|
|
.form-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary-500);
|
|
box-shadow: 0 0 0 3px rgb(168 85 247 / 0.1);
|
|
background: var(--color-primary-50);
|
|
}
|
|
|
|
.form-error {
|
|
color: var(--color-danger);
|
|
font-size: var(--text-sm);
|
|
margin-top: var(--space-1);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
/* Enhanced Badges */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: var(--space-1-5) var(--space-3);
|
|
font-size: var(--text-xs);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
border-radius: var(--radius-full);
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
.badge-available {
|
|
background: var(--color-success-light);
|
|
color: var(--color-success-dark);
|
|
}
|
|
|
|
.badge-limited {
|
|
background: var(--color-warning-light);
|
|
color: var(--color-warning-dark);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.badge-sold-out {
|
|
background: var(--color-danger-light);
|
|
color: var(--color-danger-dark);
|
|
}
|
|
|
|
.badge-featured {
|
|
background: linear-gradient(135deg, var(--color-primary-100), var(--color-accent-100));
|
|
color: var(--color-primary-800);
|
|
border: 1px solid var(--color-primary-200);
|
|
}
|
|
|
|
.badge-vip {
|
|
background: linear-gradient(135deg, #fef3c7, #fde68a);
|
|
color: #92400e;
|
|
border: 1px solid #fbbf24;
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
|
|
/* Enhanced Navigation */
|
|
.nav {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid var(--color-neutral-200);
|
|
box-shadow: var(--shadow-sm);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
}
|
|
|
|
.nav-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-3) var(--space-4);
|
|
font-weight: 500;
|
|
color: var(--color-neutral-600);
|
|
text-decoration: none;
|
|
border-radius: var(--radius-lg);
|
|
transition: all var(--duration-normal) var(--ease-in-out);
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
.nav-link:hover,
|
|
.nav-link.active {
|
|
color: var(--color-primary-600);
|
|
background: var(--color-primary-50);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* Enhanced Layout */
|
|
.container {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--space-4);
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.container { padding: 0 var(--space-6); }
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.container { padding: 0 var(--space-8); }
|
|
}
|
|
|
|
.grid-responsive {
|
|
display: grid;
|
|
gap: var(--space-6);
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.grid-responsive { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.grid-responsive { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
|
|
.grid-events {
|
|
display: grid;
|
|
gap: var(--space-8);
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.grid-events { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.grid-events { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.grid-events { grid-template-columns: repeat(4, 1fr); }
|
|
}
|
|
|
|
/* Enhanced animations */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
.animate-fadeInUp {
|
|
animation: fadeInUp 0.6s var(--ease-out);
|
|
}
|
|
|
|
.animate-slideInRight {
|
|
animation: slideInRight 0.4s var(--ease-out);
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.loading-shimmer {
|
|
background: linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
/* Enhanced hover effects */
|
|
.hover-lift {
|
|
transition: transform var(--duration-normal) var(--ease-out);
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.hover-glow {
|
|
transition: all var(--duration-normal) var(--ease-out);
|
|
}
|
|
|
|
.hover-glow:hover {
|
|
box-shadow: var(--shadow-purple-lg);
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
/* Focus states with better accessibility */
|
|
.focus-ring {
|
|
transition: all var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.focus-ring:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgb(168 85 247 / 0.2);
|
|
}
|
|
|
|
/* Dark mode enhancements */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-background: var(--color-neutral-900);
|
|
--color-surface: var(--color-neutral-800);
|
|
--color-border: var(--color-neutral-700);
|
|
--color-text-primary: var(--color-neutral-50);
|
|
--color-text-secondary: var(--color-neutral-300);
|
|
--color-text-muted: var(--color-neutral-500);
|
|
}
|
|
|
|
.card {
|
|
background: var(--color-neutral-800);
|
|
border-color: var(--color-neutral-700);
|
|
}
|
|
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
background: var(--color-neutral-700);
|
|
border-color: var(--color-neutral-600);
|
|
color: var(--color-neutral-100);
|
|
}
|
|
|
|
.nav {
|
|
background: rgba(30, 41, 59, 0.95);
|
|
border-bottom-color: var(--color-neutral-700);
|
|
}
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
.btn,
|
|
.nav,
|
|
.card:hover {
|
|
box-shadow: none !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.event-card {
|
|
break-inside: avoid;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
} |