diff --git a/index.html b/index.html index 8f79e1d..214e5ff 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,18 @@ + +
+
+
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css index 085d193..acb0cc4 100644 --- a/style.css +++ b/style.css @@ -1,21 +1,102 @@ /* CSS Variables - Dark Cinema Theme */ :root { - --bg-primary: #0a0a0a; - --bg-secondary: #141414; - --bg-card: #1a1a1a; - --bg-hover: #242424; + --bg-primary: #050507; + --bg-secondary: #0f0f12; + --bg-card: #15151a; + --bg-hover: #1a1a22; + --bg-gradient: radial-gradient(ellipse at top, #1a1a2e 0%, #050507 60%); --text-primary: #ffffff; - --text-secondary: #a0a0a0; - --text-muted: #666666; + --text-secondary: #a0a0b0; + --text-muted: #5a5a6a; --accent: #f5a623; + --accent-glow: rgba(245, 166, 35, 0.4); --accent-hover: #ffb800; - --danger: #e74c3c; - --success: #27ae60; - --border-radius: 16px; - --border-radius-sm: 8px; - --shadow: 0 4px 20px rgba(0, 0, 0, 0.4); - --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.5); - --transition: all 0.3s ease; + --danger: #ff6b6b; + --danger-glow: rgba(255, 107, 107, 0.3); + --success: #4ade80; + --purple-glow: rgba(139, 92, 246, 0.15); + --border-radius: 20px; + --border-radius-sm: 12px; + --shadow: 0 8px 32px rgba(0, 0, 0, 0.5); + --shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.6); + --glow: 0 0 40px var(--accent-glow); + --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Background Effects */ +body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 20% 30%, rgba(245, 166, 35, 0.06) 0%, transparent 40%), + radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.08) 0%, transparent 40%), + radial-gradient(circle at 50% 100%, rgba(231, 76, 60, 0.05) 0%, transparent 40%); + pointer-events: none; + z-index: -2; +} + +body::after { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 50vh; + background: radial-gradient(ellipse at 50% 0%, rgba(245, 166, 35, 0.08) 0%, transparent 60%); + pointer-events: none; + z-index: -2; +} + +/* Particles */ +.particles { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: -1; + overflow: hidden; +} + +.particle { + position: absolute; + top: 100%; + width: 4px; + height: 4px; + background: var(--accent); + border-radius: 50%; + opacity: 0; + box-shadow: 0 0 20px var(--accent-glow); + animation: float 15s infinite; +} + +.particle:nth-child(odd) { + width: 6px; + height: 6px; + background: rgba(139, 92, 246, 0.6); + box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); +} + +@keyframes float { + 0% { + transform: translateY(100vh) rotate(0deg); + opacity: 0; + } + 10% { + opacity: 0.6; + } + 90% { + opacity: 0.6; + } + 100% { + transform: translateY(-100vh) rotate(720deg); + opacity: 0; + } } /* Reset & Base */ @@ -31,12 +112,13 @@ body { color: var(--text-primary); line-height: 1.6; min-height: 100vh; + overflow-x: hidden; } .app { max-width: 1400px; margin: 0 auto; - padding: 0 20px; + padding: 0 24px; } /* Header */ @@ -44,18 +126,40 @@ body { display: flex; justify-content: space-between; align-items: center; - padding: 24px 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + padding: 28px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + backdrop-filter: blur(10px); + position: relative; +} + +.header::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 200px; + height: 1px; + background: linear-gradient(90deg, transparent, var(--accent), transparent); + opacity: 0.5; } .logo { - font-size: 32px; - font-weight: 800; - background: linear-gradient(135deg, var(--accent), var(--accent-hover)); + font-size: 36px; + font-weight: 900; + background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 50%, var(--accent) 100%); + background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - letter-spacing: 2px; + letter-spacing: 4px; + animation: shimmer 3s linear infinite; + filter: drop-shadow(0 0 20px var(--accent-glow)); +} + +@keyframes shimmer { + 0% { background-position: 0% center; } + 100% { background-position: 200% center; } } .nav { @@ -66,31 +170,52 @@ body { .nav-btn { display: flex; align-items: center; - gap: 8px; - padding: 10px 16px; - background: var(--bg-card); - border: 1px solid rgba(255, 255, 255, 0.1); + gap: 10px; + padding: 12px 20px; + background: linear-gradient(145deg, var(--bg-card), var(--bg-hover)); + border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--border-radius-sm); color: var(--text-primary); cursor: pointer; transition: var(--transition); font-size: 14px; + font-weight: 500; + position: relative; + overflow: hidden; +} + +.nav-btn::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(245, 166, 35, 0.1), transparent); + opacity: 0; + transition: var(--transition); +} + +.nav-btn:hover::before { + opacity: 1; } .nav-btn:hover { - background: var(--bg-hover); border-color: var(--accent); + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .nav-icon { font-size: 18px; + filter: drop-shadow(0 0 8px currentColor); } /* Pages */ .page { display: none; padding: 40px 0; - animation: fadeIn 0.4s ease; + animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .page.active { @@ -98,48 +223,56 @@ body { } @keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } + from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Hero Section */ .hero { text-align: center; - padding: 60px 0; + padding: 80px 0 60px; + position: relative; } .hero-title { - font-size: clamp(32px, 5vw, 56px); - font-weight: 700; - margin-bottom: 16px; - background: linear-gradient(135deg, var(--text-primary), var(--text-secondary)); + font-size: clamp(36px, 7vw, 72px); + font-weight: 800; + margin-bottom: 20px; + background: linear-gradient(180deg, var(--text-primary) 0%, var(--text-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + letter-spacing: -1px; + text-shadow: 0 0 60px rgba(255, 255, 255, 0.1); } .hero-subtitle { - font-size: clamp(16px, 2vw, 20px); + font-size: clamp(16px, 2vw, 22px); color: var(--text-secondary); max-width: 600px; margin: 0 auto; + line-height: 1.7; + font-weight: 300; } /* Mood Section */ .mood-section { - margin-bottom: 48px; + margin-bottom: 56px; } .section-title { - font-size: 24px; + font-size: 20px; font-weight: 600; - margin-bottom: 20px; + margin-bottom: 24px; color: var(--text-primary); + letter-spacing: 1px; + text-transform: uppercase; + opacity: 0.8; } .mood-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; } @@ -147,106 +280,147 @@ body { display: flex; flex-direction: column; align-items: center; - gap: 12px; - padding: 24px 16px; - background: var(--bg-card); - border: 2px solid transparent; + gap: 14px; + padding: 28px 20px; + background: linear-gradient(145deg, var(--bg-card), var(--bg-hover)); + border: 2px solid rgba(255, 255, 255, 0.06); border-radius: var(--border-radius); color: var(--text-primary); cursor: pointer; transition: var(--transition); font-size: 14px; + font-weight: 500; + position: relative; + overflow: hidden; +} + +.mood-btn::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 60%); + opacity: 0; + transition: var(--transition); +} + +.mood-btn:hover::before { + opacity: 0.5; } .mood-btn:hover { - background: var(--bg-hover); - transform: translateY(-2px); - border-color: rgba(245, 166, 35, 0.3); + transform: translateY(-4px) scale(1.02); + border-color: var(--accent); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--accent-glow); } .mood-btn.selected { border-color: var(--accent); - background: rgba(245, 166, 35, 0.1); + background: linear-gradient(145deg, rgba(245, 166, 35, 0.15), rgba(245, 166, 35, 0.05)); + box-shadow: 0 8px 32px var(--accent-glow), inset 0 0 20px rgba(245, 166, 35, 0.1); +} + +.mood-btn.selected .mood-emoji { + transform: scale(1.1); } .mood-emoji { - font-size: 36px; + font-size: 42px; + transition: var(--transition); + filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)); } .mood-label { - font-weight: 500; + font-weight: 600; + letter-spacing: 0.5px; } /* Filters Section */ .filters-section { - margin-bottom: 48px; + margin-bottom: 56px; + padding: 32px; + background: linear-gradient(145deg, rgba(21, 21, 26, 0.8), rgba(15, 15, 18, 0.8)); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: var(--border-radius); + backdrop-filter: blur(20px); } .filters-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 20px; + margin-bottom: 24px; } .reset-filters-btn { - padding: 8px 16px; - background: transparent; - border: 1px solid var(--text-muted); + padding: 10px 20px; + background: linear-gradient(145deg, var(--bg-hover), var(--bg-card)); + border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius-sm); color: var(--text-secondary); cursor: pointer; transition: var(--transition); - font-size: 14px; + font-size: 13px; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 1px; } .reset-filters-btn:hover { border-color: var(--text-primary); color: var(--text-primary); + transform: translateY(-2px); } .filters-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 16px; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 20px; } .filter-group { display: flex; flex-direction: column; - gap: 8px; + gap: 10px; } .filter-label { - font-size: 14px; + font-size: 13px; color: var(--text-secondary); - font-weight: 500; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + opacity: 0.7; } .filter-select { - padding: 14px 16px; - background: var(--bg-card); - border: 1px solid rgba(255, 255, 255, 0.1); + padding: 16px 20px; + background: linear-gradient(145deg, var(--bg-card), var(--bg-hover)); + border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--border-radius-sm); color: var(--text-primary); cursor: pointer; transition: var(--transition); font-size: 15px; appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; - background-position: right 12px center; - background-size: 18px; - padding-right: 44px; + background-position: right 14px center; + background-size: 20px; + padding-right: 48px; } .filter-select:hover { - border-color: rgba(245, 166, 35, 0.3); + border-color: var(--accent); + box-shadow: 0 0 20px var(--accent-glow); } .filter-select:focus { outline: none; border-color: var(--accent); + box-shadow: 0 0 30px var(--accent-glow); } .filter-select option { @@ -271,48 +445,67 @@ body { align-items: center; justify-content: center; gap: 12px; - padding: 18px 32px; + padding: 20px 40px; border: none; border-radius: var(--border-radius); cursor: pointer; transition: var(--transition); font-size: 18px; - font-weight: 600; + font-weight: 700; text-transform: uppercase; - letter-spacing: 1px; + letter-spacing: 2px; + position: relative; + overflow: hidden; } .find-btn { - background: linear-gradient(135deg, var(--accent), var(--accent-hover)); + background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color: var(--bg-primary); - box-shadow: 0 4px 20px rgba(245, 166, 35, 0.3); + box-shadow: 0 8px 32px var(--accent-glow); +} + +.find-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + transition: 0.6s; +} + +.find-btn:hover::before { + left: 100%; } .find-btn:hover { - transform: translateY(-2px); - box-shadow: 0 8px 30px rgba(245, 166, 35, 0.4); + transform: translateY(-4px) scale(1.02); + box-shadow: 0 16px 48px var(--accent-glow); } .find-btn:active { - transform: translateY(0); + transform: translateY(-2px) scale(1); } .random-btn { - background: var(--bg-card); - border: 2px solid rgba(245, 166, 35, 0.3); + background: linear-gradient(145deg, var(--bg-card), var(--bg-hover)); + border: 2px solid rgba(245, 166, 35, 0.4); color: var(--accent); } .random-btn:hover { - background: rgba(245, 166, 35, 0.1); + background: linear-gradient(145deg, rgba(245, 166, 35, 0.1), rgba(245, 166, 35, 0.05)); border-color: var(--accent); + box-shadow: 0 8px 32px var(--accent-glow); + transform: translateY(-2px); } /* Result Section */ .result-section { margin-top: 60px; opacity: 0; - transform: translateY(20px); + transform: translateY(30px); transition: var(--transition); } @@ -323,16 +516,40 @@ body { .movie-card { display: grid; - grid-template-columns: 350px 1fr; - gap: 40px; - background: var(--bg-card); + grid-template-columns: 380px 1fr; + gap: 0; + background: linear-gradient(145deg, var(--bg-card), var(--bg-hover)); border-radius: var(--border-radius); overflow: hidden; - box-shadow: var(--shadow); + box-shadow: var(--shadow), 0 0 60px rgba(0, 0, 0, 0.4); + border: 1px solid rgba(255, 255, 255, 0.06); + position: relative; +} + +.movie-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--accent), transparent); } .movie-poster { - flex-shrink: 0; + position: relative; + overflow: hidden; +} + +.movie-poster::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(180deg, transparent 60%, var(--bg-card) 100%); + pointer-events: none; } .movie-poster img { @@ -340,35 +557,58 @@ body { height: 100%; object-fit: cover; display: block; + transition: transform 0.6s ease; +} + +.movie-card:hover .movie-poster img { + transform: scale(1.05); } .movie-info { - padding: 40px; + padding: 48px; display: flex; flex-direction: column; - gap: 16px; + gap: 18px; + position: relative; +} + +.movie-info::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: radial-gradient(circle at top right, var(--purple-glow) 0%, transparent 40%); + pointer-events: none; + opacity: 0.5; } .movie-title { - font-size: 36px; - font-weight: 700; + font-size: 40px; + font-weight: 800; color: var(--text-primary); text-transform: uppercase; - letter-spacing: 2px; + letter-spacing: 3px; + line-height: 1.1; + text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } .movie-original { font-size: 18px; color: var(--text-secondary); font-style: italic; + font-weight: 400; + opacity: 0.8; } .movie-meta { display: flex; align-items: center; - gap: 12px; + gap: 14px; color: var(--text-secondary); font-size: 16px; + font-weight: 500; } .meta-dot { @@ -378,184 +618,272 @@ body { .movie-rating { display: inline-flex; align-items: center; - gap: 8px; - font-size: 20px; - font-weight: 600; + gap: 10px; + font-size: 22px; + font-weight: 700; color: var(--accent); + text-shadow: 0 0 20px var(--accent-glow); } .movie-genres { display: flex; flex-wrap: wrap; - gap: 8px; + gap: 10px; } .genre-tag { - padding: 6px 14px; - background: rgba(245, 166, 35, 0.1); - border-radius: 20px; - font-size: 14px; + padding: 8px 18px; + background: linear-gradient(145deg, rgba(245, 166, 35, 0.15), rgba(245, 166, 35, 0.05)); + border: 1px solid rgba(245, 166, 35, 0.3); + border-radius: 24px; + font-size: 13px; + font-weight: 600; color: var(--accent); + text-transform: uppercase; + letter-spacing: 1px; + transition: var(--transition); +} + +.genre-tag:hover { + background: rgba(245, 166, 35, 0.2); + box-shadow: 0 0 20px var(--accent-glow); } .movie-description { color: var(--text-secondary); - line-height: 1.8; + line-height: 1.9; font-size: 16px; margin-top: 8px; + font-weight: 300; } .movie-actions { display: flex; gap: 16px; - margin-top: 16px; + margin-top: 24px; } .favorite-btn, .another-btn { display: flex; align-items: center; - gap: 8px; - padding: 14px 24px; + gap: 10px; + padding: 16px 28px; border: none; border-radius: var(--border-radius-sm); cursor: pointer; transition: var(--transition); font-size: 15px; font-weight: 600; + position: relative; + overflow: hidden; } .favorite-btn { - background: rgba(231, 76, 60, 0.1); + background: linear-gradient(145deg, rgba(255, 107, 107, 0.15), rgba(255, 107, 107, 0.05)); border: 2px solid var(--danger); color: var(--danger); + box-shadow: 0 4px 20px var(--danger-glow); +} + +.favorite-btn::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, var(--danger), transparent); + opacity: 0; + transition: var(--transition); +} + +.favorite-btn:hover::before { + opacity: 1; } .favorite-btn:hover { - background: var(--danger); - color: var(--text-primary); + transform: translateY(-2px); + box-shadow: 0 8px 32px var(--danger-glow); } .favorite-btn.active { - background: var(--danger); + background: linear-gradient(135deg, var(--danger), #ff5252); color: var(--text-primary); + box-shadow: 0 8px 32px var(--danger-glow); } .another-btn { - background: var(--bg-hover); - border: 2px solid var(--text-muted); + background: linear-gradient(145deg, var(--bg-hover), var(--bg-card)); + border: 2px solid rgba(255, 255, 255, 0.2); color: var(--text-primary); } .another-btn:hover { - background: var(--text-primary); + background: linear-gradient(145deg, var(--text-primary), var(--text-secondary)); color: var(--bg-primary); + border-color: var(--text-primary); + transform: translateY(-2px); } /* Loading State */ .loading-state { text-align: center; - padding: 80px 0; + padding: 100px 0; + position: relative; +} + +.loading-state::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 300px; + height: 300px; + background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%); + animation: pulse 2s ease infinite; + pointer-events: none; } .loading-text { - font-size: 28px; - font-weight: 600; - color: var(--text-secondary); + font-size: 32px; + font-weight: 700; + color: var(--text-primary); animation: pulse 1.5s ease infinite; + text-shadow: 0 0 30px var(--accent-glow); + position: relative; + z-index: 1; } @keyframes pulse { - 0%, 100% { opacity: 0.5; } - 50% { opacity: 1; } + 0%, 100% { opacity: 0.4; transform: scale(0.95); } + 50% { opacity: 1; transform: scale(1); } } /* Empty State */ .empty-state { text-align: center; - padding: 80px 20px; + padding: 100px 20px; } .empty-icon { - font-size: 72px; - margin-bottom: 24px; + font-size: 96px; + margin-bottom: 32px; + filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4)); } .empty-state h3 { - font-size: 24px; - margin-bottom: 12px; + font-size: 28px; + margin-bottom: 16px; color: var(--text-primary); + font-weight: 700; } .empty-state p { color: var(--text-secondary); - margin-bottom: 24px; + margin-bottom: 32px; + font-size: 18px; } /* Favorites & History Pages */ .page-header { display: flex; align-items: center; - gap: 20px; - margin-bottom: 40px; + gap: 24px; + margin-bottom: 48px; + padding-bottom: 24px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .back-btn { - padding: 10px 20px; - background: var(--bg-card); + padding: 12px 24px; + background: linear-gradient(145deg, var(--bg-card), var(--bg-hover)); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius-sm); color: var(--text-primary); cursor: pointer; transition: var(--transition); font-size: 15px; + font-weight: 500; } .back-btn:hover { background: var(--bg-hover); border-color: var(--accent); + transform: translateX(-4px); } .page-header h1 { - font-size: 32px; - font-weight: 700; + font-size: 36px; + font-weight: 800; + background: linear-gradient(135deg, var(--text-primary), var(--text-secondary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } .movies-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); - gap: 24px; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 28px; margin-bottom: 40px; } .movie-item { - background: var(--bg-card); + background: linear-gradient(145deg, var(--bg-card), var(--bg-hover)); border-radius: var(--border-radius); overflow: hidden; transition: var(--transition); cursor: pointer; + border: 1px solid rgba(255, 255, 255, 0.06); + position: relative; +} + +.movie-item::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 60%); + opacity: 0; + transition: var(--transition); +} + +.movie-item:hover::before { + opacity: 0.3; } .movie-item:hover { - transform: translateY(-4px); - box-shadow: var(--shadow-hover); + transform: translateY(-8px) scale(1.02); + box-shadow: var(--shadow-hover), 0 0 40px var(--accent-glow); + border-color: var(--accent); } .movie-item-poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; + transition: transform 0.5s ease; +} + +.movie-item:hover .movie-item-poster { + transform: scale(1.08); } .movie-item-info { - padding: 16px; + padding: 20px; + position: relative; + z-index: 1; } .movie-item-title { - font-size: 16px; + font-size: 17px; font-weight: 600; color: var(--text-primary); - margin-bottom: 8px; + margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -572,37 +900,61 @@ body { .movie-item-rating { color: var(--accent); font-weight: 600; + text-shadow: 0 0 10px var(--accent-glow); } .remove-btn { width: 100%; - padding: 10px; - margin-top: 8px; - background: transparent; + padding: 12px; + margin-top: 12px; + background: linear-gradient(145deg, rgba(255, 107, 107, 0.1), transparent); border: 1px solid var(--danger); border-radius: var(--border-radius-sm); color: var(--danger); cursor: pointer; transition: var(--transition); font-size: 13px; + font-weight: 600; } .remove-btn:hover { background: var(--danger); color: var(--text-primary); + box-shadow: 0 4px 20px var(--danger-glow); } .empty-favorites, .empty-history { text-align: center; - padding: 80px 20px; + padding: 100px 20px; +} + +.empty-favorites .empty-icon, +.empty-history .empty-icon { + font-size: 96px; + margin-bottom: 32px; + filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4)); +} + +.empty-favorites h3, +.empty-history h3 { + font-size: 28px; + margin-bottom: 16px; + color: var(--text-primary); +} + +.empty-favorites p, +.empty-history p { + color: var(--text-secondary); + margin-bottom: 32px; + font-size: 18px; } .clear-history-btn { display: block; margin: 0 auto; - padding: 14px 32px; - background: transparent; + padding: 16px 40px; + background: linear-gradient(145deg, rgba(255, 107, 107, 0.15), transparent); border: 2px solid var(--danger); border-radius: var(--border-radius-sm); color: var(--danger); @@ -610,11 +962,39 @@ body { transition: var(--transition); font-size: 15px; font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; } .clear-history-btn:hover { background: var(--danger); color: var(--text-primary); + box-shadow: 0 8px 32px var(--danger-glow); + transform: translateY(-2px); +} + +/* Scrollbar */ +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: var(--bg-primary); +} + +::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, var(--accent), var(--accent-hover)); + border-radius: 5px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--accent-hover); +} + +/* Selection */ +::selection { + background: var(--accent); + color: var(--bg-primary); } /* Responsive Design */ @@ -626,22 +1006,26 @@ body { } .movie-poster { - max-height: 400px; + max-height: 450px; + } + + .movie-poster::after { + background: linear-gradient(0deg, var(--bg-card) 0%, transparent 40%); } .movie-info { - padding: 24px; + padding: 32px; } .movie-title { - font-size: 28px; + font-size: 32px; } } @media (max-width: 600px) { .header { flex-direction: column; - gap: 16px; + gap: 20px; } .nav { @@ -658,15 +1042,19 @@ body { } .mood-btn { - padding: 16px 8px; + padding: 20px 12px; } .mood-emoji { - font-size: 28px; + font-size: 32px; } .mood-label { - font-size: 12px; + font-size: 11px; + } + + .filters-section { + padding: 24px 20px; } .filters-grid { @@ -686,6 +1074,10 @@ body { .movies-grid { grid-template-columns: repeat(2, 1fr); } + + .page-header h1 { + font-size: 28px; + } } @media (max-width: 400px) { @@ -696,4 +1088,8 @@ body { .movies-grid { grid-template-columns: 1fr; } + + .logo { + font-size: 28px; + } }