From 259837622adc2953ed0ff1463195aa728622c949 Mon Sep 17 00:00:00 2001 From: kbe Date: Mon, 8 Sep 2025 17:31:19 +0200 Subject: [PATCH] Update design system to match Aperonight design guidelines - Replace gradient buttons with solid color buttons Co-authored-by: Qwen-Coder --- app/assets/stylesheets/theme.css | 918 ++++++------------------------- 1 file changed, 172 insertions(+), 746 deletions(-) diff --git a/app/assets/stylesheets/theme.css b/app/assets/stylesheets/theme.css index 3b9c25c..119ec50 100755 --- a/app/assets/stylesheets/theme.css +++ b/app/assets/stylesheets/theme.css @@ -1,749 +1,3 @@ -:root { - /* Colors */ - --color-primary-50: #f5f3ff; - --color-primary-100: #ede9fe; - --color-primary-200: #ddd6fe; - --color-primary-300: #c4b5fd; - --color-primary-400: #a78bfa; - --color-primary-500: #8b5cf6; - --color-primary-600: #7c3aed; - --color-primary-700: #6d28d9; - --color-primary-800: #5b21b6; - --color-primary-900: #4c1d95; - - --color-accent-50: #fdf2f8; - --color-accent-100: #fce7f3; - --color-accent-200: #fbcfe8; - --color-accent-300: #f9a8d4; - --color-accent-400: #f472b6; - --color-accent-500: #ec4899; - --color-accent-600: #db2777; - --color-accent-700: #be185d; - --color-accent-800: #9d174d; - --color-accent-900: #831843; - - --color-neutral-50: #fafafa; - --color-neutral-100: #f5f5f5; - --color-neutral-200: #e5e5e5; - --color-neutral-300: #d4d4d4; - --color-neutral-400: #a3a3a3; - --color-neutral-500: #737373; - --color-neutral-600: #525252; - --color-neutral-700: #404040; - --color-neutral-800: #262626; - --color-neutral-900: #171717; - - --color-success: #10b981; - --color-success-light: #d1fae5; - --color-success-dark: #047857; - - --color-warning: #f59e0b; - --color-warning-light: #fef3c7; - --color-warning-dark: #b45309; - - --color-danger: #ef4444; - --color-danger-light: #fee2e2; - --color-danger-dark: #b91c1c; - - /* Typography */ - --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - --font-display: 'Outfit', var(--font-sans); - - --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 */ - - /* Spacing */ - --space-1: 0.25rem; /* 4px */ - --space-2: 0.5rem; /* 8px */ - --space-3: 0.75rem; /* 12px */ - --space-4: 1rem; /* 16px */ - --space-5: 1.25rem; /* 20px */ - --space-6: 1.5rem; /* 24px */ - --space-8: 2rem; /* 32px */ - --space-10: 2.5rem; /* 40px */ - --space-12: 3rem; /* 48px */ - --space-16: 4rem; /* 64px */ - --space-20: 5rem; /* 80px */ - - /* Radius */ - --radius: 0.25rem; /* 4px */ - --radius-md: 0.5rem; /* 8px */ - --radius-lg: 0.75rem; /* 12px */ - --radius-xl: 1rem; /* 16px */ - --radius-2xl: 1.5rem; /* 24px */ - --radius-full: 9999px; - - /* Shadows */ - --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); - - --shadow-purple-sm: 0 1px 3px 0 rgba(168, 85, 247, 0.1), 0 1px 2px 0 rgba(168, 85, 247, 0.06); - --shadow-purple-md: 0 4px 6px -1px rgba(168, 85, 247, 0.1), 0 2px 4px -1px rgba(168, 85, 247, 0.06); - --shadow-purple-lg: 0 10px 15px -3px rgba(168, 85, 247, 0.1), 0 4px 6px -2px rgba(168, 85, 247, 0.05); - - /* Transitions */ - --duration-fast: 150ms; - --duration-normal: 300ms; - --duration-slow: 500ms; - - --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); -} - -/* Base styles */ - -body { - font-family: var(--font-sans); - line-height: 1.6; - color: var(--color-neutral-900); - background: var(--color-neutral-50); -} - -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 var(--space-4); -} - -/* Typography */ -h1, h2, h3, h4, h5, h6 { - font-family: var(--font-display); - font-weight: 700; - line-height: 1.2; - margin-bottom: var(--space-2); -} - -h1 { - font-size: var(--text-4xl); - font-weight: 900; -} - -h2 { - font-size: var(--text-3xl); - font-weight: 800; -} - -h3 { - font-size: var(--text-2xl); - font-weight: 700; -} - -h4 { - font-size: var(--text-xl); - font-weight: 700; -} - -p { - margin-bottom: var(--space-4); -} - -/* Buttons */ -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: var(--space-2); - font-family: var(--font-display); - font-weight: 700; - border: none; - cursor: pointer; - border-radius: var(--radius-lg); - transition: all var(--duration-normal) var(--ease-out); - text-transform: uppercase; - letter-spacing: 0.05em; - white-space: nowrap; -} - -.btn-sm { - padding: var(--space-2) var(--space-4); - font-size: var(--text-sm); -} - -.btn-md { - padding: var(--space-3) var(--space-6); - font-size: var(--text-base); -} - -.btn-lg { - padding: var(--space-4) var(--space-8); - font-size: var(--text-lg); -} - -.btn-primary { - background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%); - color: white; - box-shadow: var(--shadow-purple-md); -} - -.btn-primary:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-purple-lg); -} - -.btn-secondary { - background: var(--color-neutral-800); - color: white; -} - -.btn-secondary:hover { - background: var(--color-neutral-900); - transform: translateY(-2px); -} - -.btn-outline { - background: transparent; - border: 2px solid var(--color-primary-600); - color: var(--color-primary-600); -} - -.btn-outline:hover { - background: var(--color-primary-50); - transform: translateY(-2px); -} - -.btn-ghost { - background: transparent; - color: var(--color-neutral-700); -} - -.btn-ghost:hover { - background: var(--color-neutral-100); -} - -/* Form elements */ -.form-group { - margin-bottom: var(--space-4); -} - -.form-label { - font-family: var(--font-display); - font-size: var(--text-sm); - font-weight: 700; - color: var(--color-neutral-700); - margin-bottom: var(--space-2); - text-transform: uppercase; - letter-spacing: 0.05em; - display: block; -} - -.form-input, -.form-select, -.form-textarea { - background: var(--color-neutral-50); - border: 2px solid var(--color-neutral-200); - border-radius: var(--radius-lg); - padding: var(--space-4); - font-size: var(--text-base); - font-weight: 500; - color: var(--color-neutral-900); - transition: all var(--duration-normal) var(--ease-out); - font-family: var(--font-sans); - width: 100%; -} - -.form-input:focus, -.form-select:focus, -.form-textarea:focus { - outline: none; - border-color: var(--color-primary-500); - background: white; - box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.1); -} - -.form-input::placeholder { - color: var(--color-neutral-500); -} - -.form-select { - cursor: pointer; - appearance: none; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); - background-position: right 12px center; - background-repeat: no-repeat; - background-size: 16px; - padding-right: var(--space-12); -} - -.form-textarea { - min-height: 100px; - resize: vertical; -} - -.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); -} - -.focus-ring { - transition: all var(--duration-normal) var(--ease-out); -} - -.focus-ring:focus { - outline: none; - border-color: var(--color-primary-500); - background: white; - box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.1); -} - -/* Badges */ -.badge { - display: inline-flex; - align-items: center; - padding: var(--space-1) var(--space-3); - border-radius: var(--radius-full); - font-size: var(--text-xs); - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.badge-available { - background: var(--color-success-light); - color: var(--color-success-dark); - border: 1px solid var(--color-success); -} - -.badge-limited { - background: var(--color-warning-light); - color: var(--color-warning-dark); - border: 1px solid var(--color-warning); -} - -.badge-sold-out { - background: var(--color-danger-light); - color: var(--color-danger-dark); - border: 1px solid var(--color-danger); -} - -.badge-featured { - background: var(--color-accent-100); - color: var(--color-accent-700); - border: 1px solid var(--color-accent-300); -} - -.badge-vip { - background: var(--color-primary-100); - color: var(--color-primary-800); - border: 1px solid var(--color-primary-300); -} - -/* Cards */ -.card { - background: white; - border-radius: var(--radius-xl); - padding: var(--space-6); - border: 1px solid var(--color-neutral-200); - box-shadow: var(--shadow-sm); - transition: all var(--duration-slow) var(--ease-out); -} - -.card.hover-lift:hover { - transform: translateY(-8px) scale(1.02); - box-shadow: var(--shadow-2xl); - border-color: var(--color-primary-200); -} - -.card-header { - margin-bottom: var(--space-4); -} - -.card-body { - margin-bottom: var(--space-4); -} - -.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; -} - -.event-card.hover-glow:hover { - transform: translateY(-8px) scale(1.02); - box-shadow: var(--shadow-2xl); - border-color: var(--color-primary-200); -} - -/* Navigation */ -.nav { - background: white; - box-shadow: var(--shadow-sm); - position: sticky; - top: 0; - z-index: 100; -} - -.nav-link { - color: var(--color-neutral-700); - text-decoration: none; - font-weight: 600; - padding: var(--space-3) var(--space-2); - border-radius: var(--radius); - transition: all var(--duration-normal); -} - -.nav-link:hover { - color: var(--color-primary-600); - background: var(--color-primary-50); -} - -/* Search box */ -.search-box { - position: relative; - max-width: 400px; -} - -.search-input { - padding-left: var(--space-12); -} - -.search-icon { - position: absolute; - left: var(--space-4); - top: 50%; - transform: translateY(-50%); - color: var(--color-neutral-400); -} - -/* Price tags */ -.price-tag { - display: inline-flex; - align-items: center; - gap: var(--space-1); - font-family: var(--font-display); - font-weight: 800; -} - -.price-tag-sm { - font-size: var(--text-sm); -} - -.price-tag-md { - font-size: var(--text-lg); -} - -.price-tag-lg { - font-size: var(--text-2xl); -} - -/* Avatars */ -.avatar-group { - display: flex; - align-items: center; - gap: var(--space-2); -} - -.avatar { - width: 40px; - height: 40px; - border-radius: var(--radius-full); - background: var(--color-primary-100); - display: flex; - align-items: center; - justify-content: center; - font-weight: 600; - color: var(--color-primary-600); - border: 2px solid white; - box-shadow: var(--shadow-sm); - position: relative; -} - -.avatar-lg { - width: 60px; - height: 60px; -} - -.avatar-sm { - width: 32px; - height: 32px; - font-size: var(--text-xs); -} - -.avatar-image { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: var(--radius-full); -} - -.avatar-status { - position: absolute; - bottom: 0; - right: 0; - width: 12px; - height: 12px; - border-radius: var(--radius-full); - border: 2px solid white; -} - -.status-online { background: var(--color-success); } -.status-offline { background: var(--color-neutral-400); } -.status-busy { background: var(--color-danger); } - -/* Progress bars */ -.progress-bar { - width: 100%; - height: 8px; - background: var(--color-neutral-200); - border-radius: var(--radius-full); - overflow: hidden; - margin-bottom: var(--space-3); -} - -.progress-fill { - height: 100%; - background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-accent-400) 100%); - border-radius: var(--radius-full); - transition: width var(--duration-slow) var(--ease-out); -} - -/* Rating stars */ -.rating { - display: flex; - gap: var(--space-1); - align-items: center; -} - -.rating-star { - width: 16px; - height: 16px; - color: var(--color-warning); -} - -.rating-star.filled { - fill: currentColor; -} - -.rating-star.empty { - fill: none; - stroke: currentColor; - stroke-width: 2; -} - -/* Notifications */ -.notification { - display: flex; - align-items: center; - gap: var(--space-3); - padding: var(--space-4); - border-radius: var(--radius-lg); - margin-bottom: var(--space-3); - font-weight: 500; -} - -.notification-success { - background: var(--color-success-light); - color: var(--color-success-dark); - border: 1px solid var(--color-success); -} - -.notification-warning { - background: var(--color-warning-light); - color: var(--color-warning-dark); - border: 1px solid var(--color-warning); -} - -.notification-error { - background: var(--color-danger-light); - color: var(--color-danger-dark); - border: 1px solid var(--color-danger); -} - -.notification-info { - background: var(--color-primary-50); - color: var(--color-primary-800); - border: 1px solid var(--color-primary-200); -} - -/* Tabs */ -.tabs { - border-bottom: 1px solid var(--color-neutral-200); - margin-bottom: var(--space-6); -} - -.tab-list { - display: flex; - gap: var(--space-1); -} - -.tab-button { - background: none; - border: none; - padding: var(--space-3) var(--space-4); - font-weight: 500; - color: var(--color-neutral-600); - cursor: pointer; - border-bottom: 2px solid transparent; - transition: all var(--duration-normal); - font-family: var(--font-display); -} - -.tab-button:hover { - color: var(--color-primary-600); - background: var(--color-primary-50); - border-radius: var(--radius-md) var(--radius-md) 0 0; -} - -.tab-button.active { - color: var(--color-primary-600); - border-bottom-color: var(--color-primary-600); -} - -.tab-content { - display: none; - padding: var(--space-4) 0; -} - -.tab-content.active { - display: block; -} - -/* Tooltips */ -.tooltip { - position: relative; - display: inline-block; -} - -.tooltip-content { - position: absolute; - bottom: 125%; - left: 50%; - transform: translateX(-50%); - background: var(--color-neutral-900); - color: white; - padding: var(--space-2) var(--space-3); - border-radius: var(--radius); - font-size: var(--text-sm); - white-space: nowrap; - opacity: 0; - visibility: hidden; - transition: all var(--duration-normal); - z-index: 100; -} - -.tooltip-content::after { - content: ''; - position: absolute; - top: 100%; - left: 50%; - transform: translateX(-50%); - border: 5px solid transparent; - border-top-color: var(--color-neutral-900); -} - -.tooltip:hover .tooltip-content { - opacity: 1; - visibility: visible; -} - -/* Loading states */ -.loading-spinner { - width: 40px; - height: 40px; - border: 3px solid var(--color-neutral-200); - border-top-color: var(--color-primary-600); - border-radius: var(--radius-full); - animation: spin 1s linear infinite; -} - -.loading-dots { - display: flex; - gap: var(--space-1); -} - -.loading-dot { - width: 8px; - height: 8px; - background: var(--color-primary-600); - border-radius: var(--radius-full); - animation: bounce 1.4s infinite both; -} - -.loading-dot:nth-child(2) { animation-delay: 0.2s; } -.loading-dot:nth-child(3) { animation-delay: 0.4s; } - -@keyframes spin { - to { transform: rotate(360deg); } -} - -@keyframes bounce { - 0%, 80%, 100% { transform: scale(0); } - 40% { transform: scale(1); } -} - -/* Breadcrumbs */ -.breadcrumb { - display: flex; - align-items: center; - gap: var(--space-2); - font-size: var(--text-sm); -} - -.breadcrumb-item { - color: var(--color-neutral-600); - text-decoration: none; -} - -.breadcrumb-item:hover { - color: var(--color-primary-600); -} - -.breadcrumb-item.current { - color: var(--color-neutral-900); - font-weight: 600; -} - -.breadcrumb-separator { - color: var(--color-neutral-400); -} - -/* Responsive adjustments */ -@media (max-width: 768px) { - .container { - padding: 0 var(--space-3); - } - - h1 { - font-size: var(--text-3xl); - } - - h2 { - font-size: var(--text-2xl); - } - - .btn-lg { - padding: var(--space-3) var(--space-6); - font-size: var(--text-base); - } - - .btn-md { - padding: var(--space-2) var(--space-4); - font-size: var(--text-sm); - } - - .form-input, - .form-select, - .form-textarea { - padding: var(--space-3); - } -} - /* Additional styles for enhanced Aperonight design */ .event-card.hover-glow:hover { transform: translateY(-8px) scale(1.02); @@ -788,3 +42,175 @@ p { color: var(--color-neutral-400); } +/* Hero section */ +.hero { + background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%); + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.2); +} + +.hero-content { + position: relative; + z-index: 2; + color: white; + padding: var(--space-16) 0; +} + +.hero-title { + font-size: var(--text-5xl); + font-weight: 900; + line-height: 1.1; + margin-bottom: var(--space-4); + text-align: center; +} + +.hero-accent { + color: var(--color-accent-400); +} + +.hero-subtitle { + font-size: var(--text-xl); + font-weight: 500; + line-height: 1.5; + margin-bottom: var(--space-8); + text-align: center; + max-width: 36rem; + margin-left: auto; + margin-right: auto; +} + +/* Metrics grid */ +.metrics-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: var(--space-6); + margin: var(--space-8) 0; +} + +.metric-item { + text-align: center; + padding: var(--space-4); +} + +.metric-number { + font-size: var(--text-3xl); + font-weight: 800; + color: var(--color-primary-600); + margin-bottom: var(--space-2); +} + +.metric-label { + font-size: var(--text-sm); + font-weight: 600; + color: var(--color-neutral-600); +} + +/* Cards */ +.card { + background: white; + border-radius: var(--radius-xl); + padding: var(--space-6); + border: 1px solid var(--color-neutral-200); + box-shadow: var(--shadow-sm); + transition: all var(--duration-slow) var(--ease-out); +} + +.card.hover-lift:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: var(--shadow-2xl); + border-color: var(--color-primary-200); +} + +.card-header { + margin-bottom: var(--space-4); +} + +.card-body { + margin-bottom: var(--space-4); +} + +.card-event { + 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; +} + +.card-event.hover-glow:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: var(--shadow-2xl); + border-color: var(--color-primary-200); +} + +.card-event-image { + position: relative; + overflow: hidden; + aspect-ratio: 4/3; +} + +.card-event-image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.card-event-badge { + position: absolute; + top: var(--space-4); + left: var(--space-4); + background: var(--color-accent-400); + color: var(--color-neutral-900); + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-full); + font-size: var(--text-sm); + font-weight: 700; + box-shadow: var(--shadow-md); +} + +.card-event-price { + position: absolute; + bottom: var(--space-4); + right: var(--space-4); + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(4px); + color: var(--color-neutral-900); + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-full); + font-size: var(--text-sm); + font-weight: 700; + box-shadow: var(--shadow-sm); +} + +.card-event-content { + padding: var(--space-6); +} + +.card-event-title { + font-size: var(--text-2xl); + font-weight: 700; + color: var(--color-neutral-900); + margin-bottom: var(--space-2); +} + +.card-event-meta { + color: var(--color-neutral-600); + margin-bottom: var(--space-4); +} + +.card-event-description { + color: var(--color-neutral-500); + line-height: 1.5; +} \ No newline at end of file