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.
417 lines
8.8 KiB
CSS
Executable File
417 lines
8.8 KiB
CSS
Executable File
/* Neo-Brutalist Design System for Event Booking */
|
|
:root {
|
|
/* Colors - Bold and high contrast */
|
|
--background: #ffffff;
|
|
--foreground: #000000;
|
|
--card: #ffffff;
|
|
--card-foreground: #000000;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #000000;
|
|
--primary: #ff6b35;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #00f5ff;
|
|
--secondary-foreground: #000000;
|
|
--muted: #f0f0f0;
|
|
--muted-foreground: #333333;
|
|
--accent: #ff1744;
|
|
--accent-foreground: #ffffff;
|
|
--destructive: #000000;
|
|
--destructive-foreground: #ffffff;
|
|
--border: #000000;
|
|
--input: #ffffff;
|
|
--ring: #ff6b35;
|
|
|
|
/* Event-specific colors - Bold and vibrant */
|
|
--event-featured: #7c4dff;
|
|
--event-sold-out: #000000;
|
|
--event-available: #00c853;
|
|
--ticket-premium: #ffc107;
|
|
--ticket-standard: #9e9e9e;
|
|
|
|
/* Typography - Bold and impactful */
|
|
--font-sans: 'Space Grotesk', 'Arial Black', sans-serif;
|
|
--font-mono: 'Space Mono', 'Courier New', monospace;
|
|
|
|
/* Font sizes - Exaggerated scale */
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.875rem;
|
|
--text-base: 1rem;
|
|
--text-lg: 1.25rem;
|
|
--text-xl: 1.5rem;
|
|
--text-2xl: 2rem;
|
|
--text-3xl: 2.5rem;
|
|
--text-4xl: 3.5rem;
|
|
|
|
/* Spacing - Generous */
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-12: 3rem;
|
|
--space-16: 4rem;
|
|
--space-20: 5rem;
|
|
|
|
/* Border radius - Sharp edges */
|
|
--radius: 0px;
|
|
--radius-sm: 0px;
|
|
--radius-md: 0px;
|
|
--radius-lg: 0px;
|
|
--radius-xl: 0px;
|
|
|
|
/* Shadows - Bold and offset */
|
|
--shadow-brutal: 8px 8px 0px 0px #000000;
|
|
--shadow-brutal-lg: 12px 12px 0px 0px #000000;
|
|
--shadow-brutal-xl: 16px 16px 0px 0px #000000;
|
|
--shadow-brutal-color: 8px 8px 0px 0px var(--accent);
|
|
--shadow-inset: inset 4px 4px 0px 0px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
/* Typography overrides */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-sans) !important;
|
|
font-weight: 900 !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: -0.02em !important;
|
|
}
|
|
|
|
h1 { font-size: var(--text-4xl) !important; }
|
|
h2 { font-size: var(--text-3xl) !important; }
|
|
h3 { font-size: var(--text-2xl) !important; }
|
|
|
|
/* Component styles */
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
color: var(--primary-foreground);
|
|
padding: 16px 32px;
|
|
border-radius: var(--radius);
|
|
font-weight: 900;
|
|
border: 3px solid var(--border);
|
|
cursor: pointer;
|
|
transition: all 0.1s ease;
|
|
box-shadow: var(--shadow-brutal);
|
|
font-family: var(--font-sans);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translate(4px, 4px);
|
|
box-shadow: 4px 4px 0px 0px #000000;
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translate(8px, 8px);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--secondary);
|
|
color: var(--secondary-foreground);
|
|
padding: 16px 32px;
|
|
border-radius: var(--radius);
|
|
font-weight: 900;
|
|
border: 3px solid var(--border);
|
|
cursor: pointer;
|
|
transition: all 0.1s ease;
|
|
box-shadow: var(--shadow-brutal);
|
|
font-family: var(--font-sans);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
transform: translate(4px, 4px);
|
|
box-shadow: 4px 4px 0px 0px #000000;
|
|
}
|
|
|
|
.btn-destructive {
|
|
background: var(--destructive);
|
|
color: var(--destructive-foreground);
|
|
padding: 16px 32px;
|
|
border-radius: var(--radius);
|
|
font-weight: 900;
|
|
border: 3px solid var(--border);
|
|
cursor: pointer;
|
|
transition: all 0.1s ease;
|
|
box-shadow: var(--shadow-brutal-color);
|
|
font-family: var(--font-sans);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.card {
|
|
background: var(--card);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow-brutal-lg);
|
|
padding: var(--space-8);
|
|
border: 4px solid var(--border);
|
|
transition: all 0.1s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -4px;
|
|
left: -4px;
|
|
right: -16px;
|
|
bottom: -16px;
|
|
background: var(--accent);
|
|
z-index: -1;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translate(4px, 4px);
|
|
box-shadow: 8px 8px 0px 0px #000000;
|
|
}
|
|
|
|
.event-card {
|
|
background: var(--card);
|
|
border-radius: var(--radius);
|
|
overflow: visible;
|
|
box-shadow: var(--shadow-brutal-xl);
|
|
transition: all 0.1s ease;
|
|
border: 4px solid var(--border);
|
|
position: relative;
|
|
}
|
|
|
|
.event-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -8px;
|
|
left: -8px;
|
|
right: -24px;
|
|
bottom: -24px;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 10px,
|
|
var(--secondary) 10px,
|
|
var(--secondary) 20px
|
|
);
|
|
z-index: -1;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.event-card:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.event-card:hover {
|
|
transform: translate(8px, 8px);
|
|
box-shadow: 8px 8px 0px 0px #000000;
|
|
}
|
|
|
|
.ticket-card {
|
|
background: var(--muted);
|
|
border-radius: var(--radius);
|
|
padding: var(--space-6);
|
|
border: 3px solid var(--border);
|
|
transition: all 0.1s ease;
|
|
box-shadow: var(--shadow-brutal);
|
|
position: relative;
|
|
}
|
|
|
|
.ticket-card.selected {
|
|
background: var(--primary);
|
|
color: var(--primary-foreground);
|
|
transform: translate(4px, 4px);
|
|
box-shadow: 4px 4px 0px 0px #000000;
|
|
}
|
|
|
|
.ticket-card.selected::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: -10px;
|
|
right: -10px;
|
|
background: var(--accent);
|
|
color: white;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 900;
|
|
border: 3px solid var(--border);
|
|
box-shadow: 4px 4px 0px 0px #000000;
|
|
}
|
|
|
|
.form-input {
|
|
background: var(--input);
|
|
border: 3px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 16px 20px;
|
|
font-size: var(--text-lg);
|
|
font-weight: 700;
|
|
transition: all 0.1s ease;
|
|
box-shadow: var(--shadow-inset);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
box-shadow: var(--shadow-brutal-color);
|
|
transform: translate(-2px, -2px);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 8px 16px;
|
|
border-radius: var(--radius);
|
|
font-size: var(--text-sm);
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
border: 2px solid var(--border);
|
|
box-shadow: 4px 4px 0px 0px #000000;
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.badge-available {
|
|
background: var(--event-available);
|
|
color: #000000;
|
|
}
|
|
|
|
.badge-sold-out {
|
|
background: var(--event-sold-out);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.badge-featured {
|
|
background: var(--event-featured);
|
|
color: #ffffff;
|
|
animation: pulse-brutal 2s infinite;
|
|
}
|
|
|
|
.badge-premium {
|
|
background: var(--ticket-premium);
|
|
color: #000000;
|
|
position: relative;
|
|
}
|
|
|
|
.badge-premium::after {
|
|
content: '★';
|
|
margin-left: 8px;
|
|
animation: rotate 3s linear infinite;
|
|
}
|
|
|
|
/* Navigation */
|
|
.nav {
|
|
background: var(--background);
|
|
border-bottom: 6px solid var(--border);
|
|
box-shadow: 0 6px 0px 0px var(--accent);
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--foreground);
|
|
font-weight: 900;
|
|
padding: 12px 20px;
|
|
border-radius: var(--radius);
|
|
transition: all 0.1s ease;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
border: 3px solid transparent;
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.nav-link:hover, .nav-link.active {
|
|
background: var(--primary);
|
|
color: var(--primary-foreground);
|
|
border-color: var(--border);
|
|
box-shadow: 4px 4px 0px 0px #000000;
|
|
transform: translate(-2px, -2px);
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes pulse-brutal {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
box-shadow: 4px 4px 0px 0px #000000;
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
box-shadow: 6px 6px 0px 0px #000000;
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes shake-brutal {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-8px); }
|
|
75% { transform: translateX(8px); }
|
|
}
|
|
|
|
.animate-shake {
|
|
animation: shake-brutal 0.5s ease-in-out;
|
|
}
|
|
|
|
/* Special effects */
|
|
.glitch-text {
|
|
position: relative;
|
|
color: var(--primary);
|
|
font-weight: 900;
|
|
}
|
|
|
|
.glitch-text::before,
|
|
.glitch-text::after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
|
|
}
|
|
|
|
.glitch-text::before {
|
|
color: var(--accent);
|
|
animation: glitch-1 2s infinite;
|
|
}
|
|
|
|
.glitch-text::after {
|
|
color: var(--secondary);
|
|
animation: glitch-2 2s infinite;
|
|
}
|
|
|
|
@keyframes glitch-1 {
|
|
0%, 100% { transform: translateX(0); }
|
|
20% { transform: translateX(-2px); }
|
|
}
|
|
|
|
@keyframes glitch-2 {
|
|
0%, 100% { transform: translateX(0); }
|
|
20% { transform: translateX(2px); }
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
--space-4: 0.75rem;
|
|
--space-6: 1rem;
|
|
--space-8: 1.5rem;
|
|
--text-4xl: 2.5rem;
|
|
--text-3xl: 2rem;
|
|
}
|
|
|
|
.btn-primary, .btn-secondary, .btn-destructive {
|
|
padding: 12px 24px;
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.card {
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.shadow-brutal, .shadow-brutal-lg, .shadow-brutal-xl {
|
|
box-shadow: 4px 4px 0px 0px #000000;
|
|
}
|
|
} |