mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 09:11:08 -05:00
- Implemented park card component with image, status badge, favorite button, and quick stats overlay. - Developed ride card component featuring thrill level badge, status badge, favorite button, and detailed stats. - Created advanced search page with filters for parks and rides, including location, type, status, and thrill level. - Added dynamic quick search functionality with results display. - Enhanced user experience with JavaScript for filter toggling, range slider updates, and view switching. - Included custom CSS for improved styling of checkboxes and search results layout.
829 lines
20 KiB
CSS
829 lines
20 KiB
CSS
/* ThrillWiki Design System CSS */
|
|
/* Last Updated: 2025-01-15 */
|
|
|
|
/* ===== CSS CUSTOM PROPERTIES ===== */
|
|
:root {
|
|
/* Thrill Colors - Excitement & Adventure */
|
|
--thrill-primary: #6366f1;
|
|
--thrill-primary-dark: #4f46e5;
|
|
--thrill-primary-light: #818cf8;
|
|
|
|
/* Adventure Colors - Energy & Fun */
|
|
--thrill-secondary: #f59e0b;
|
|
--thrill-secondary-dark: #d97706;
|
|
--thrill-secondary-light: #fbbf24;
|
|
|
|
/* Status Colors - Clear Communication */
|
|
--thrill-success: #10b981;
|
|
--thrill-warning: #f59e0b;
|
|
--thrill-danger: #ef4444;
|
|
--thrill-info: #3b82f6;
|
|
|
|
/* Neutral Palette - Light Mode */
|
|
--neutral-50: #f8fafc;
|
|
--neutral-100: #f1f5f9;
|
|
--neutral-200: #e2e8f0;
|
|
--neutral-300: #cbd5e1;
|
|
--neutral-400: #94a3b8;
|
|
--neutral-500: #64748b;
|
|
--neutral-600: #475569;
|
|
--neutral-700: #334155;
|
|
--neutral-800: #1e293b;
|
|
--neutral-900: #0f172a;
|
|
|
|
/* Gradients */
|
|
--gradient-hero: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
|
|
--gradient-hero-dark: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #db2777 100%);
|
|
--gradient-bg-light: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 50%, #ede9fe 100%);
|
|
--gradient-bg-dark: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #581c87 100%);
|
|
--gradient-card: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
|
|
--gradient-card-hover: linear-gradient(145deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
|
|
|
|
/* Typography */
|
|
--font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
|
/* Spacing */
|
|
--space-0: 0;
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.25rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-10: 2.5rem;
|
|
--space-12: 3rem;
|
|
--space-16: 4rem;
|
|
--space-20: 5rem;
|
|
--space-24: 6rem;
|
|
--space-32: 8rem;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--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);
|
|
|
|
/* Border Radius */
|
|
--radius-sm: 0.375rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius-2xl: 1.5rem;
|
|
--radius-full: 9999px;
|
|
}
|
|
|
|
/* Dark mode color adjustments */
|
|
.dark {
|
|
--neutral-50: #0f172a;
|
|
--neutral-100: #1e293b;
|
|
--neutral-200: #334155;
|
|
--neutral-300: #475569;
|
|
--neutral-400: #64748b;
|
|
--neutral-500: #94a3b8;
|
|
--neutral-600: #cbd5e1;
|
|
--neutral-700: #e2e8f0;
|
|
--neutral-800: #f1f5f9;
|
|
--neutral-900: #f8fafc;
|
|
}
|
|
|
|
/* ===== BASE STYLES ===== */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-primary);
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* ===== BUTTON COMPONENTS ===== */
|
|
.btn {
|
|
@apply inline-flex items-center justify-center font-semibold transition-all duration-200 ease-out;
|
|
@apply focus:outline-none focus:ring-4 disabled:opacity-50 disabled:cursor-not-allowed;
|
|
@apply select-none whitespace-nowrap;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply btn px-6 py-3 text-white rounded-xl shadow-lg;
|
|
background: var(--gradient-hero);
|
|
@apply hover:shadow-xl hover:scale-105 active:scale-95;
|
|
@apply focus:ring-4;
|
|
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3);
|
|
}
|
|
|
|
.btn-primary:focus {
|
|
box-shadow: var(--shadow-lg), 0 0 0 4px rgba(99, 102, 241, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply btn px-6 py-3 bg-white dark:bg-neutral-800 rounded-xl shadow-md;
|
|
@apply text-thrill-primary dark:text-thrill-primary-light;
|
|
@apply border border-thrill-primary/20 hover:bg-thrill-primary/5;
|
|
@apply hover:shadow-lg hover:scale-105 active:scale-95;
|
|
@apply focus:ring-thrill-primary/30;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply btn px-4 py-2 text-neutral-600 dark:text-neutral-400;
|
|
@apply font-medium rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800;
|
|
@apply hover:text-neutral-900 dark:hover:text-neutral-100;
|
|
@apply focus:ring-neutral-300 dark:focus:ring-neutral-600;
|
|
}
|
|
|
|
.btn-sm {
|
|
@apply px-3 py-1.5 text-sm;
|
|
}
|
|
|
|
.btn-lg {
|
|
@apply px-8 py-4 text-lg;
|
|
}
|
|
|
|
/* ===== CARD COMPONENTS ===== */
|
|
.card {
|
|
@apply bg-white/80 dark:bg-neutral-800/80 backdrop-blur-lg;
|
|
@apply border border-neutral-200/50 dark:border-neutral-700/50;
|
|
@apply rounded-2xl shadow-lg transition-all duration-300 ease-out;
|
|
}
|
|
|
|
.card:hover {
|
|
@apply shadow-xl;
|
|
transform: translateY(-4px) scale(1.02);
|
|
}
|
|
|
|
.card-feature {
|
|
@apply card p-8 relative overflow-hidden;
|
|
}
|
|
|
|
.card-feature::before {
|
|
content: '';
|
|
@apply absolute inset-0 transition-all duration-300;
|
|
background: var(--gradient-card);
|
|
}
|
|
|
|
.card-feature:hover::before {
|
|
background: var(--gradient-card-hover);
|
|
}
|
|
|
|
.card-park {
|
|
@apply card group cursor-pointer;
|
|
@apply hover:ring-2 hover:ring-thrill-primary/30;
|
|
}
|
|
|
|
.card-park-image {
|
|
@apply aspect-video w-full object-cover rounded-t-2xl;
|
|
@apply group-hover:scale-105 transition-transform duration-500 ease-out;
|
|
@apply overflow-hidden;
|
|
}
|
|
|
|
.card-park-content {
|
|
@apply p-6 space-y-4 relative z-10;
|
|
}
|
|
|
|
.card-ride {
|
|
@apply card group cursor-pointer;
|
|
@apply hover:ring-2 hover:ring-thrill-secondary/30;
|
|
}
|
|
|
|
.card-ride-image {
|
|
@apply aspect-square w-full object-cover rounded-t-2xl;
|
|
@apply group-hover:scale-110 transition-transform duration-700 ease-out;
|
|
@apply overflow-hidden;
|
|
}
|
|
|
|
.card-ride-content {
|
|
@apply p-4 space-y-3 relative z-10;
|
|
}
|
|
|
|
/* ===== FORM COMPONENTS ===== */
|
|
.form-group {
|
|
@apply space-y-2;
|
|
}
|
|
|
|
.form-label {
|
|
@apply block text-sm font-semibold text-neutral-700 dark:text-neutral-300;
|
|
}
|
|
|
|
.form-input {
|
|
@apply w-full px-4 py-3 bg-white dark:bg-neutral-800;
|
|
@apply border border-neutral-300 dark:border-neutral-600;
|
|
@apply rounded-xl shadow-sm focus:shadow-md;
|
|
@apply text-neutral-900 dark:text-neutral-100;
|
|
@apply placeholder-neutral-500 dark:placeholder-neutral-400;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-thrill-primary/50;
|
|
@apply focus:border-thrill-primary dark:focus:border-thrill-primary-light;
|
|
@apply transition-all duration-200 ease-out;
|
|
}
|
|
|
|
.form-input:focus {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.form-textarea {
|
|
@apply form-input resize-none;
|
|
min-height: 120px;
|
|
}
|
|
|
|
.form-select {
|
|
@apply form-input cursor-pointer;
|
|
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 0.75rem center;
|
|
background-repeat: no-repeat;
|
|
background-size: 1.5em 1.5em;
|
|
padding-right: 2.5rem;
|
|
}
|
|
|
|
.form-error {
|
|
@apply text-sm text-thrill-danger mt-1;
|
|
}
|
|
|
|
.form-input-error {
|
|
@apply border-thrill-danger focus:ring-thrill-danger/50;
|
|
@apply focus:border-thrill-danger;
|
|
}
|
|
|
|
/* ===== STATUS BADGES ===== */
|
|
.badge {
|
|
@apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
|
|
@apply border transition-all duration-150;
|
|
}
|
|
|
|
.badge-operating {
|
|
@apply badge bg-thrill-success/10 text-thrill-success border-thrill-success/20;
|
|
}
|
|
|
|
.badge-construction {
|
|
@apply badge bg-thrill-warning/10 text-thrill-warning border-thrill-warning/20;
|
|
}
|
|
|
|
.badge-closed {
|
|
@apply badge bg-thrill-danger/10 text-thrill-danger border-thrill-danger/20;
|
|
}
|
|
|
|
.badge-info {
|
|
@apply badge bg-thrill-info/10 text-thrill-info border-thrill-info/20;
|
|
}
|
|
|
|
.badge-lg {
|
|
@apply px-4 py-2 text-sm;
|
|
}
|
|
|
|
/* ===== NAVIGATION COMPONENTS ===== */
|
|
.nav-link {
|
|
@apply px-4 py-2 text-neutral-600 dark:text-neutral-400;
|
|
@apply font-medium rounded-lg transition-all duration-150;
|
|
@apply hover:bg-neutral-100 dark:hover:bg-neutral-800;
|
|
@apply hover:text-neutral-900 dark:hover:text-neutral-100;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-neutral-300 dark:focus:ring-neutral-600;
|
|
}
|
|
|
|
.nav-link-active {
|
|
@apply nav-link bg-thrill-primary/10 text-thrill-primary;
|
|
@apply hover:bg-thrill-primary/15;
|
|
}
|
|
|
|
.nav-brand {
|
|
@apply text-2xl font-bold;
|
|
background: var(--gradient-hero);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* ===== HERO SECTIONS ===== */
|
|
.hero {
|
|
@apply relative overflow-hidden;
|
|
background: var(--gradient-bg-light);
|
|
}
|
|
|
|
.dark .hero {
|
|
background: var(--gradient-bg-dark);
|
|
}
|
|
|
|
.hero-content {
|
|
@apply relative z-10 text-center space-y-8;
|
|
}
|
|
|
|
.hero-title {
|
|
@apply text-4xl md:text-6xl lg:text-7xl font-bold;
|
|
background: var(--gradient-hero);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
@apply text-xl md:text-2xl text-neutral-600 dark:text-neutral-400;
|
|
@apply max-w-3xl mx-auto;
|
|
}
|
|
|
|
.hero-cta {
|
|
@apply flex flex-col sm:flex-row gap-4 justify-center items-center;
|
|
}
|
|
|
|
/* ===== ANIMATION CLASSES ===== */
|
|
.hover-lift {
|
|
@apply transition-all duration-300 ease-out;
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-4px) scale(1.02);
|
|
@apply shadow-xl;
|
|
}
|
|
|
|
.pulse-glow {
|
|
animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% {
|
|
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
|
|
}
|
|
}
|
|
|
|
.slide-in-up {
|
|
animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.5s ease-out forwards;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.slide-in-right {
|
|
animation: slideInRight 0.5s ease-out forwards;
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* ===== HTMX TRANSITIONS ===== */
|
|
.htmx-transition {
|
|
view-transition-name: main-content;
|
|
}
|
|
|
|
::view-transition-old(main-content) {
|
|
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
|
|
600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
|
|
}
|
|
|
|
::view-transition-new(main-content) {
|
|
animation: 400ms cubic-bezier(0, 0, 0.2, 1) 100ms both fade-in,
|
|
600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
@keyframes slide-from-right {
|
|
from { transform: translateX(30px); }
|
|
}
|
|
|
|
@keyframes slide-to-left {
|
|
to { transform: translateX(-30px); }
|
|
}
|
|
|
|
/* HTMX Loading States */
|
|
.htmx-request {
|
|
@apply opacity-75 pointer-events-none;
|
|
}
|
|
|
|
.htmx-request .loading-spinner {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
/* ===== LOADING STATES ===== */
|
|
.loading-skeleton {
|
|
@apply bg-gradient-to-r from-neutral-200 via-neutral-100 to-neutral-200;
|
|
@apply dark:from-neutral-700 dark:via-neutral-600 dark:to-neutral-700;
|
|
@apply animate-pulse rounded;
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
.loading-spinner {
|
|
@apply opacity-0 transition-opacity duration-200;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ===== GRID SYSTEMS ===== */
|
|
.grid-auto-fit-xs {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.grid-auto-fit-sm {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.grid-auto-fit-md {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.grid-auto-fit-lg {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
/* ===== ACCESSIBILITY ===== */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.sr-only-focusable:focus {
|
|
position: static;
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0.25rem;
|
|
margin: 0;
|
|
overflow: visible;
|
|
clip: auto;
|
|
white-space: normal;
|
|
}
|
|
|
|
.focus-visible {
|
|
@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-thrill-primary;
|
|
@apply focus-visible:ring-offset-2 focus-visible:ring-offset-white;
|
|
@apply dark:focus-visible:ring-offset-neutral-900;
|
|
}
|
|
|
|
/* ===== RESPONSIVE UTILITIES ===== */
|
|
.container-xs { max-width: 480px; margin: 0 auto; }
|
|
.container-sm { max-width: 640px; margin: 0 auto; }
|
|
.container-md { max-width: 768px; margin: 0 auto; }
|
|
.container-lg { max-width: 1024px; margin: 0 auto; }
|
|
.container-xl { max-width: 1280px; margin: 0 auto; }
|
|
.container-2xl { max-width: 1536px; margin: 0 auto; }
|
|
|
|
/* ===== MOTION PREFERENCES ===== */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* ===== PRINT STYLES ===== */
|
|
@media print {
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
.card {
|
|
@apply shadow-none border border-neutral-300;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.btn {
|
|
@apply shadow-none;
|
|
}
|
|
}
|
|
|
|
/* ===== HIGH CONTRAST MODE ===== */
|
|
@media (prefers-contrast: high) {
|
|
.card {
|
|
@apply border-2 border-neutral-900 dark:border-neutral-100;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-neutral-900 dark:bg-neutral-100;
|
|
@apply text-neutral-100 dark:text-neutral-900;
|
|
}
|
|
|
|
.form-input {
|
|
@apply border-2 border-neutral-900 dark:border-neutral-100;
|
|
}
|
|
}
|
|
|
|
/* ===== SCROLL TO TOP BUTTON ===== */
|
|
.scroll-to-top {
|
|
@apply fixed bottom-8 right-8 w-12 h-12 bg-thrill-primary text-white;
|
|
@apply rounded-full shadow-lg hover:shadow-xl transition-all duration-300;
|
|
@apply opacity-0 pointer-events-none z-40 flex items-center justify-center;
|
|
@apply hover:scale-110 active:scale-95;
|
|
}
|
|
|
|
.scroll-to-top.visible {
|
|
@apply opacity-100 pointer-events-auto;
|
|
}
|
|
|
|
.scroll-to-top:hover {
|
|
background: var(--gradient-hero);
|
|
}
|
|
|
|
/* ===== REVEAL ANIMATIONS ===== */
|
|
.reveal-element {
|
|
@apply opacity-0 translate-y-8 transition-all duration-700 ease-out;
|
|
}
|
|
|
|
.reveal-element.revealed {
|
|
@apply opacity-100 translate-y-0;
|
|
}
|
|
|
|
.reveal-element.delay-100 { transition-delay: 100ms; }
|
|
.reveal-element.delay-200 { transition-delay: 200ms; }
|
|
.reveal-element.delay-300 { transition-delay: 300ms; }
|
|
.reveal-element.delay-500 { transition-delay: 500ms; }
|
|
|
|
/* ===== PARALLAX EFFECTS ===== */
|
|
.parallax-element {
|
|
@apply transition-transform duration-75 ease-out;
|
|
}
|
|
|
|
/* ===== ENHANCED CARD ANIMATIONS ===== */
|
|
.card-enhanced {
|
|
@apply transition-all duration-300 ease-out;
|
|
@apply hover:shadow-2xl hover:-translate-y-2;
|
|
}
|
|
|
|
.card-enhanced .card-image {
|
|
@apply transition-transform duration-500 ease-out overflow-hidden;
|
|
}
|
|
|
|
.card-enhanced:hover .card-image {
|
|
@apply scale-105;
|
|
}
|
|
|
|
.card-enhanced .card-overlay {
|
|
@apply absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent;
|
|
@apply opacity-0 transition-opacity duration-300;
|
|
}
|
|
|
|
.card-enhanced:hover .card-overlay {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
.card-enhanced .card-hidden-content {
|
|
@apply opacity-0 translate-y-4 transition-all duration-300;
|
|
}
|
|
|
|
.card-enhanced:hover .card-hidden-content {
|
|
@apply opacity-100 translate-y-0;
|
|
}
|
|
|
|
/* ===== FAVORITE BUTTON ANIMATIONS ===== */
|
|
.favorite-btn {
|
|
@apply transition-all duration-200 ease-out;
|
|
@apply hover:scale-110 active:scale-95;
|
|
}
|
|
|
|
.favorite-btn.favorited {
|
|
@apply text-red-500;
|
|
animation: heartbeat 0.6s ease-in-out;
|
|
}
|
|
|
|
@keyframes heartbeat {
|
|
0% { transform: scale(1); }
|
|
25% { transform: scale(1.2); }
|
|
50% { transform: scale(1); }
|
|
75% { transform: scale(1.1); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
/* ===== SEARCH RESULT ANIMATIONS ===== */
|
|
.search-results-dropdown {
|
|
@apply bg-white dark:bg-neutral-800 rounded-xl shadow-xl border;
|
|
@apply border-neutral-200 dark:border-neutral-700 max-h-96 overflow-y-auto;
|
|
animation: slideInDown 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideInDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.search-result-item {
|
|
@apply flex items-center gap-3 p-3 hover:bg-neutral-50 dark:hover:bg-neutral-700;
|
|
@apply cursor-pointer transition-colors duration-150;
|
|
@apply border-b border-neutral-100 dark:border-neutral-700 last:border-b-0;
|
|
}
|
|
|
|
.search-result-item:hover {
|
|
@apply bg-thrill-primary/5 dark:bg-thrill-primary/10;
|
|
}
|
|
|
|
.search-group-title {
|
|
@apply text-xs font-semibold text-neutral-500 dark:text-neutral-400;
|
|
@apply uppercase tracking-wider px-3 py-2 bg-neutral-50 dark:bg-neutral-800;
|
|
}
|
|
|
|
.search-loading {
|
|
@apply flex items-center justify-center gap-2 p-4 text-neutral-500;
|
|
}
|
|
|
|
.search-no-results {
|
|
@apply flex flex-col items-center justify-center gap-2 p-6 text-neutral-500;
|
|
}
|
|
|
|
.search-error {
|
|
@apply flex items-center justify-center gap-2 p-4 text-red-500;
|
|
}
|
|
|
|
/* ===== NOTIFICATION/TOAST STYLES ===== */
|
|
.toast-container {
|
|
@apply fixed top-4 right-4 z-50 space-y-4 pointer-events-none;
|
|
}
|
|
|
|
.toast {
|
|
@apply bg-white dark:bg-neutral-800 rounded-xl shadow-xl border;
|
|
@apply border-neutral-200 dark:border-neutral-700 p-4 min-w-80;
|
|
@apply pointer-events-auto transform transition-all duration-300;
|
|
@apply translate-x-full opacity-0;
|
|
}
|
|
|
|
.toast.visible {
|
|
@apply translate-x-0 opacity-100;
|
|
}
|
|
|
|
.toast.hide {
|
|
@apply translate-x-full opacity-0;
|
|
}
|
|
|
|
.toast-success {
|
|
@apply border-l-4 border-l-thrill-success;
|
|
}
|
|
|
|
.toast-error {
|
|
@apply border-l-4 border-l-thrill-danger;
|
|
}
|
|
|
|
.toast-warning {
|
|
@apply border-l-4 border-l-thrill-warning;
|
|
}
|
|
|
|
.toast-info {
|
|
@apply border-l-4 border-l-thrill-info;
|
|
}
|
|
|
|
.toast-progress {
|
|
@apply absolute bottom-0 left-0 h-1 bg-current opacity-20 transition-all duration-100;
|
|
}
|
|
|
|
/* ===== FORM ENHANCEMENTS ===== */
|
|
.form-floating-label {
|
|
@apply relative;
|
|
}
|
|
|
|
.form-floating-label input {
|
|
@apply pt-6 pb-2;
|
|
}
|
|
|
|
.form-floating-label label {
|
|
@apply absolute left-4 top-4 text-neutral-500 transition-all duration-200;
|
|
@apply pointer-events-none;
|
|
}
|
|
|
|
.form-floating-label input:focus + label,
|
|
.form-floating-label input:not(:placeholder-shown) + label {
|
|
@apply text-xs top-2 text-thrill-primary;
|
|
}
|
|
|
|
.form-validation-success {
|
|
@apply border-thrill-success focus:ring-thrill-success/50;
|
|
}
|
|
|
|
.form-validation-error {
|
|
@apply border-thrill-danger focus:ring-thrill-danger/50;
|
|
animation: shake 0.5s ease-in-out;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-5px); }
|
|
75% { transform: translateX(5px); }
|
|
}
|
|
|
|
/* ===== MODAL ENHANCEMENTS ===== */
|
|
.modal-backdrop {
|
|
@apply fixed inset-0 bg-black/50 backdrop-blur-sm z-40;
|
|
@apply transition-opacity duration-300;
|
|
}
|
|
|
|
.modal-content {
|
|
@apply bg-white dark:bg-neutral-800 rounded-2xl shadow-2xl;
|
|
@apply transform transition-all duration-300;
|
|
@apply scale-95 opacity-0;
|
|
}
|
|
|
|
.modal-content.show {
|
|
@apply scale-100 opacity-100;
|
|
}
|
|
|
|
/* ===== DROPDOWN ENHANCEMENTS ===== */
|
|
.dropdown-menu {
|
|
@apply bg-white dark:bg-neutral-800 rounded-xl shadow-xl border;
|
|
@apply border-neutral-200 dark:border-neutral-700 py-2;
|
|
@apply transform transition-all duration-200 origin-top;
|
|
@apply scale-95 opacity-0 pointer-events-none;
|
|
}
|
|
|
|
.dropdown-menu.show {
|
|
@apply scale-100 opacity-100 pointer-events-auto;
|
|
}
|
|
|
|
.dropdown-item {
|
|
@apply block w-full px-4 py-2 text-left text-neutral-700 dark:text-neutral-300;
|
|
@apply hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors duration-150;
|
|
}
|
|
|
|
/* ===== CUSTOM SCROLLBAR ===== */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-neutral-100 dark:bg-neutral-800;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-neutral-400 dark:bg-neutral-600 rounded-full;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-neutral-500 dark:bg-neutral-500;
|
|
}
|
|
|
|
/* Firefox scrollbar */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--neutral-400) var(--neutral-100);
|
|
}
|
|
|
|
.dark * {
|
|
scrollbar-color: var(--neutral-600) var(--neutral-800);
|
|
}
|