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.
171 lines
3.5 KiB
CSS
Executable File
171 lines
3.5 KiB
CSS
Executable File
/* Updated Featured Events Grid - 3 Cards Side by Side */
|
|
.featured-events-grid {
|
|
display: grid;
|
|
gap: var(--space-8);
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.featured-events-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.featured-events-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
.featured-event-card {
|
|
background: white;
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-md);
|
|
transition: all var(--duration-slow) var(--ease-out);
|
|
border: 1px solid var(--color-neutral-200);
|
|
position: relative;
|
|
}
|
|
|
|
.featured-event-card:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: var(--shadow-2xl);
|
|
border-color: var(--color-primary-200);
|
|
}
|
|
|
|
.featured-event-image {
|
|
width: 100%;
|
|
height: 240px;
|
|
object-fit: cover;
|
|
transition: transform var(--duration-slow) var(--ease-out);
|
|
}
|
|
|
|
.featured-event-card:hover .featured-event-image {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.featured-event-content {
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.featured-event-badges {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.featured-event-title {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-xl);
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-3);
|
|
color: var(--color-neutral-900);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.featured-event-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.featured-event-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--color-neutral-600);
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.featured-event-description {
|
|
color: var(--color-neutral-700);
|
|
margin-bottom: var(--space-6);
|
|
line-height: 1.6;
|
|
font-size: var(--text-sm);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.featured-event-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.featured-event-price {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-xl);
|
|
font-weight: 800;
|
|
color: var(--color-primary-600);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.featured-event-image {
|
|
height: 200px;
|
|
}
|
|
|
|
.featured-event-content {
|
|
padding: var(--space-4);
|
|
}
|
|
}
|
|
|
|
/* Enhanced animations */
|
|
.animate-slideInLeft {
|
|
opacity: 0;
|
|
transform: translateX(-30px);
|
|
transition: all 0.5s var(--ease-out);
|
|
}
|
|
|
|
.animate-slideInLeft.visible {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.animate-slideInRight {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
transition: all 0.5s var(--ease-out);
|
|
}
|
|
|
|
.animate-slideInRight.visible {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Added missing animation for fadeInUp */
|
|
.animate-fadeInUp {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.5s var(--ease-out);
|
|
}
|
|
|
|
.animate-fadeInUp.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Feature Stats Styling */
|
|
.feature-stat {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-4);
|
|
}
|
|
|
|
.stat-number {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-2xl);
|
|
font-weight: 700;
|
|
color: var(--color-primary-600);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: var(--text-sm);
|
|
color: var(--color-neutral-600);
|
|
font-weight: 500;
|
|
} |