Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>آنلاین شاپ | سید خوید</title> | |
| <link href="https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <style> | |
| :root { | |
| --bg: #080810; | |
| --bg-secondary: #0f0f18; | |
| --card: #14141f; | |
| --card-hover: #1c1c2a; | |
| --border: #252535; | |
| --fg: #f5f5fa; | |
| --fg-muted: #7a7a95; | |
| --accent: #ff5e3a; | |
| --accent-hover: #ff7a5a; | |
| --accent-glow: rgba(255, 94, 58, 0.35); | |
| --accent-secondary: #00c9a7; | |
| --accent-secondary-glow: rgba(0, 201, 167, 0.3); | |
| --danger: #ff3b5c; | |
| --success: #00d68f; | |
| --warning: #ffaa00; | |
| --glass: rgba(20, 20, 31, 0.85); | |
| --radius-sm: 10px; | |
| --radius-md: 16px; | |
| --radius-lg: 24px; | |
| --radius-xl: 32px; | |
| --radius-full: 9999px; | |
| --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); | |
| --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25); | |
| --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.3); | |
| --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Vazir', system-ui, sans-serif; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| background: var(--bg); | |
| min-height: 100vh; | |
| color: var(--fg); | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| .bg-canvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| z-index: 0; | |
| overflow: hidden; | |
| } | |
| .bg-gradient-layer { | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| radial-gradient(ellipse 80% 60% at 10% 20%, rgba(255, 94, 58, 0.12) 0%, transparent 50%), | |
| radial-gradient(ellipse 70% 50% at 90% 80%, rgba(0, 201, 167, 0.08) 0%, transparent 50%), | |
| radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 94, 58, 0.05) 0%, transparent 60%); | |
| animation: gradientShift 20s ease-in-out infinite; | |
| } | |
| @keyframes gradientShift { | |
| 0%, 100% { transform: scale(1) translate(0, 0); opacity: 1; } | |
| 33% { transform: scale(1.1) translate(-3%, 2%); opacity: 0.9; } | |
| 66% { transform: scale(0.95) translate(2%, -2%); opacity: 1; } | |
| } | |
| .floating-orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.6; | |
| animation: orbFloat 25s ease-in-out infinite; | |
| } | |
| .orb-1 { | |
| width: 500px; | |
| height: 500px; | |
| background: linear-gradient(135deg, rgba(255, 94, 58, 0.2), rgba(255, 94, 58, 0.05)); | |
| top: -15%; | |
| right: -10%; | |
| animation-delay: 0s; | |
| } | |
| .orb-2 { | |
| width: 400px; | |
| height: 400px; | |
| background: linear-gradient(135deg, rgba(0, 201, 167, 0.15), rgba(0, 201, 167, 0.03)); | |
| bottom: -10%; | |
| left: -8%; | |
| animation-delay: -8s; | |
| } | |
| .orb-3 { | |
| width: 300px; | |
| height: 300px; | |
| background: linear-gradient(135deg, rgba(255, 94, 58, 0.1), transparent); | |
| top: 40%; | |
| left: 25%; | |
| animation-delay: -16s; | |
| } | |
| @keyframes orbFloat { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 25% { transform: translate(40px, -30px) scale(1.05); } | |
| 50% { transform: translate(-30px, 40px) scale(0.95); } | |
| 75% { transform: translate(20px, 20px) scale(1.02); } | |
| } | |
| .grid-pattern { | |
| position: absolute; | |
| inset: 0; | |
| background-image: | |
| linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%); | |
| } | |
| .container { | |
| max-width: 460px; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 20px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| @media (min-width: 768px) { | |
| .container { max-width: 700px; } | |
| } | |
| @media (min-width: 1024px) { | |
| .container { max-width: 960px; } | |
| } | |
| .branding-link { | |
| position: fixed; | |
| top: 16px; | |
| left: 16px; | |
| z-index: 1000; | |
| background: var(--glass); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| padding: 10px 18px; | |
| border-radius: var(--radius-full); | |
| border: 1px solid var(--border); | |
| color: var(--fg-muted); | |
| text-decoration: none; | |
| font-size: 12px; | |
| font-weight: 500; | |
| transition: all var(--transition-smooth); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .branding-link:hover { | |
| color: var(--accent); | |
| border-color: var(--accent); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px var(--accent-glow); | |
| } | |
| .branding-link::before { | |
| content: ''; | |
| width: 6px; | |
| height: 6px; | |
| background: var(--accent); | |
| border-radius: 50%; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.5; transform: scale(1.2); } | |
| } | |
| .profile-header { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| padding: 40px 24px 32px; | |
| background: linear-gradient(180deg, var(--card) 0%, transparent 100%); | |
| border-radius: var(--radius-xl); | |
| margin-bottom: 24px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .profile-header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--accent), var(--accent-secondary), var(--accent)); | |
| background-size: 200% 100%; | |
| animation: shimmer 4s linear infinite; | |
| } | |
| .profile-header::after { | |
| content: ''; | |
| position: absolute; | |
| top: 4px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 60%; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--accent-glow), transparent); | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| .avatar-wrapper { | |
| position: relative; | |
| margin-bottom: 20px; | |
| } | |
| .avatar { | |
| width: 110px; | |
| height: 110px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-secondary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 48px; | |
| cursor: pointer; | |
| position: relative; | |
| transition: all var(--transition-smooth); | |
| box-shadow: 0 8px 32px var(--accent-glow); | |
| } | |
| .avatar:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 12px 40px var(--accent-glow); | |
| } | |
| .avatar::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -5px; | |
| border-radius: 50%; | |
| background: conic-gradient(from 0deg, var(--accent), var(--accent-secondary), var(--accent)); | |
| z-index: -1; | |
| animation: avatarRing 6s linear infinite; | |
| } | |
| .avatar::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -3px; | |
| border-radius: 50%; | |
| background: var(--bg); | |
| z-index: -1; | |
| } | |
| @keyframes avatarRing { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .online-indicator { | |
| position: absolute; | |
| bottom: 6px; | |
| right: 6px; | |
| width: 24px; | |
| height: 24px; | |
| background: var(--success); | |
| border-radius: 50%; | |
| border: 4px solid var(--bg); | |
| animation: onlinePulse 2s ease-in-out infinite; | |
| box-shadow: 0 0 0 0 rgba(0, 214, 143, 0.4); | |
| } | |
| @keyframes onlinePulse { | |
| 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 214, 143, 0.4); } | |
| 50% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(0, 214, 143, 0); } | |
| } | |
| .name { | |
| font-size: 28px; | |
| font-weight: 800; | |
| margin-bottom: 10px; | |
| background: linear-gradient(135deg, var(--fg) 30%, var(--fg-muted)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| letter-spacing: -0.5px; | |
| } | |
| .bio { | |
| font-size: 14px; | |
| color: var(--fg-muted); | |
| line-height: 1.7; | |
| max-width: 340px; | |
| margin-bottom: 24px; | |
| } | |
| .stats { | |
| display: flex; | |
| gap: 40px; | |
| justify-content: center; | |
| margin: 24px 0; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| position: relative; | |
| cursor: pointer; | |
| padding: 8px 16px; | |
| border-radius: var(--radius-md); | |
| transition: all var(--transition-fast); | |
| } | |
| .stat-item:hover { | |
| background: var(--card-hover); | |
| } | |
| .stat-number { | |
| font-weight: 800; | |
| font-size: 22px; | |
| color: var(--fg); | |
| display: block; | |
| transition: color var(--transition-fast); | |
| } | |
| .stat-item:hover .stat-number { | |
| color: var(--accent); | |
| } | |
| .stat-label { | |
| font-size: 12px; | |
| color: var(--fg-muted); | |
| margin-top: 4px; | |
| } | |
| .stat-item::after { | |
| content: ''; | |
| position: absolute; | |
| left: -20px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 1px; | |
| height: 36px; | |
| background: linear-gradient(180deg, transparent, var(--border), transparent); | |
| } | |
| .stat-item:first-child::after { | |
| display: none; | |
| } | |
| .instagram-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| background: var(--card); | |
| padding: 14px 24px; | |
| border-radius: var(--radius-full); | |
| border: 1px solid var(--border); | |
| transition: all var(--transition-smooth); | |
| } | |
| .instagram-row:hover { | |
| border-color: var(--accent); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .instagram-row i { | |
| font-size: 24px; | |
| background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .instagram-row span { | |
| font-weight: 600; | |
| flex: 1; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-hover)); | |
| color: white; | |
| border: none; | |
| padding: 12px 32px; | |
| border-radius: var(--radius-full); | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all var(--transition-smooth); | |
| position: relative; | |
| overflow: hidden; | |
| font-size: 14px; | |
| } | |
| .btn-primary::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.25), transparent); | |
| transform: translateX(-100%); | |
| transition: transform 0.6s ease; | |
| } | |
| .btn-primary:hover::before { | |
| transform: translateX(100%); | |
| } | |
| .btn-primary:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 8px 28px var(--accent-glow); | |
| } | |
| .btn-primary:active { | |
| transform: scale(0.98); | |
| } | |
| .btn-primary.following { | |
| background: var(--card-hover); | |
| border: 1px solid var(--border); | |
| } | |
| .user-menu { | |
| position: absolute; | |
| top: 130px; | |
| left: 10px; | |
| background: var(--glass); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border); | |
| width: 230px; | |
| z-index: 100; | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: translateY(-10px) scale(0.95); | |
| transition: all var(--transition-smooth); | |
| box-shadow: var(--shadow-lg); | |
| overflow: hidden; | |
| } | |
| .user-menu.active { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateY(0) scale(1); | |
| } | |
| .user-menu-item { | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--border); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| color: var(--fg); | |
| font-weight: 500; | |
| } | |
| .user-menu-item:last-child { | |
| border-bottom: none; | |
| } | |
| .user-menu-item:hover { | |
| background: var(--card-hover); | |
| padding-right: 28px; | |
| } | |
| .user-menu-item i { | |
| width: 22px; | |
| color: var(--accent); | |
| font-size: 16px; | |
| } | |
| .user-menu-item.danger { | |
| color: var(--danger); | |
| } | |
| .user-menu-item.danger i { | |
| color: var(--danger); | |
| } | |
| .search-bar { | |
| display: flex; | |
| align-items: center; | |
| background: var(--card); | |
| border-radius: var(--radius-full); | |
| padding: 16px 22px; | |
| margin-bottom: 20px; | |
| border: 1px solid var(--border); | |
| transition: all var(--transition-smooth); | |
| position: relative; | |
| } | |
| .search-bar:focus-within { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 4px var(--accent-glow); | |
| background: var(--card-hover); | |
| } | |
| .search-bar i { | |
| color: var(--fg-muted); | |
| margin-left: 14px; | |
| transition: color var(--transition-fast); | |
| font-size: 16px; | |
| } | |
| .search-bar:focus-within i { | |
| color: var(--accent); | |
| } | |
| .search-bar input { | |
| flex: 1; | |
| border: none; | |
| background: transparent; | |
| outline: none; | |
| font-size: 15px; | |
| color: var(--fg); | |
| } | |
| .search-bar input::placeholder { | |
| color: var(--fg-muted); | |
| } | |
| .search-suggestions { | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| background: var(--card); | |
| border-radius: var(--radius-md); | |
| margin-top: 8px; | |
| border: 1px solid var(--border); | |
| max-height: 300px; | |
| overflow-y: auto; | |
| z-index: 50; | |
| display: none; | |
| } | |
| .search-suggestions.active { | |
| display: block; | |
| } | |
| .search-suggestion-item { | |
| padding: 12px 18px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| transition: background var(--transition-fast); | |
| } | |
| .search-suggestion-item:hover { | |
| background: var(--card-hover); | |
| } | |
| .search-suggestion-item i { | |
| color: var(--fg-muted); | |
| font-size: 14px; | |
| } | |
| .filter-chips { | |
| display: flex; | |
| gap: 10px; | |
| overflow-x: auto; | |
| padding: 8px 0; | |
| margin-bottom: 24px; | |
| scrollbar-width: none; | |
| } | |
| .filter-chips::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .chip { | |
| background: var(--card); | |
| padding: 12px 22px; | |
| border-radius: var(--radius-full); | |
| font-size: 13px; | |
| white-space: nowrap; | |
| cursor: pointer; | |
| transition: all var(--transition-smooth); | |
| border: 1px solid var(--border); | |
| color: var(--fg-muted); | |
| font-weight: 600; | |
| } | |
| .chip:hover { | |
| border-color: var(--accent); | |
| color: var(--fg); | |
| background: var(--card-hover); | |
| } | |
| .chip.active { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-hover)); | |
| color: white; | |
| border-color: transparent; | |
| box-shadow: 0 4px 20px var(--accent-glow); | |
| } | |
| .sort-dropdown { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 20px; | |
| } | |
| .sort-dropdown select { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-full); | |
| padding: 10px 18px; | |
| color: var(--fg); | |
| font-family: inherit; | |
| font-size: 13px; | |
| cursor: pointer; | |
| outline: none; | |
| transition: all var(--transition-fast); | |
| } | |
| .sort-dropdown select:focus { | |
| border-color: var(--accent); | |
| } | |
| .price-filter { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 20px; | |
| padding: 16px; | |
| background: var(--card); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border); | |
| } | |
| .price-filter input[type="range"] { | |
| flex: 1; | |
| height: 4px; | |
| background: var(--border); | |
| border-radius: 2px; | |
| outline: none; | |
| -webkit-appearance: none; | |
| } | |
| .price-filter input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 18px; | |
| height: 18px; | |
| background: var(--accent); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| .price-filter span { | |
| font-size: 13px; | |
| color: var(--fg-muted); | |
| min-width: 100px; | |
| } | |
| .highlights { | |
| display: flex; | |
| overflow-x: auto; | |
| gap: 20px; | |
| padding: 12px 0; | |
| margin-bottom: 32px; | |
| scrollbar-width: none; | |
| } | |
| .highlights::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .highlight-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| min-width: 80px; | |
| cursor: pointer; | |
| } | |
| .highlight-circle { | |
| width: 78px; | |
| height: 78px; | |
| border-radius: 50%; | |
| background: var(--card); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 28px; | |
| color: var(--accent); | |
| margin-bottom: 12px; | |
| border: 2px solid var(--border); | |
| transition: all var(--transition-smooth); | |
| position: relative; | |
| } | |
| .highlight-circle::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -4px; | |
| border-radius: 50%; | |
| background: conic-gradient(from 0deg, var(--accent), var(--accent-secondary), var(--accent)); | |
| z-index: -1; | |
| opacity: 0; | |
| transition: opacity var(--transition-smooth); | |
| } | |
| .highlight-circle::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -2px; | |
| border-radius: 50%; | |
| background: var(--bg); | |
| z-index: -1; | |
| } | |
| .highlight-item:hover .highlight-circle { | |
| transform: scale(1.1); | |
| border-color: transparent; | |
| } | |
| .highlight-item:hover .highlight-circle::before { | |
| opacity: 1; | |
| animation: highlightRing 3s linear infinite; | |
| } | |
| @keyframes highlightRing { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .highlight-label { | |
| font-size: 11px; | |
| color: var(--fg-muted); | |
| text-align: center; | |
| font-weight: 500; | |
| max-width: 80px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .category-section { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .category-title { | |
| font-weight: 800; | |
| font-size: 22px; | |
| color: var(--fg); | |
| } | |
| .category-link { | |
| color: var(--accent); | |
| font-size: 14px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all var(--transition-fast); | |
| padding: 6px 12px; | |
| border-radius: var(--radius-sm); | |
| } | |
| .category-link:hover { | |
| background: var(--card); | |
| } | |
| .promo-banner { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-secondary)); | |
| border-radius: var(--radius-lg); | |
| padding: 24px; | |
| margin-bottom: 24px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .promo-banner::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -50%; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); | |
| } | |
| .promo-banner h3 { | |
| font-size: 20px; | |
| margin-bottom: 8px; | |
| position: relative; | |
| } | |
| .promo-banner p { | |
| font-size: 14px; | |
| opacity: 0.9; | |
| margin-bottom: 16px; | |
| position: relative; | |
| } | |
| .promo-banner button { | |
| background: white; | |
| color: var(--accent); | |
| border: none; | |
| padding: 10px 24px; | |
| border-radius: var(--radius-full); | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| position: relative; | |
| } | |
| .promo-banner button:hover { | |
| transform: scale(1.05); | |
| } | |
| .products-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 16px; | |
| margin-bottom: 48px; | |
| } | |
| @media (min-width: 768px) { | |
| .products-grid { grid-template-columns: repeat(3, 1fr); } | |
| } | |
| @media (min-width: 1024px) { | |
| .products-grid { grid-template-columns: repeat(4, 1fr); } | |
| } | |
| .product-card { | |
| background: var(--card); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| transition: all var(--transition-smooth); | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-8px); | |
| border-color: var(--accent); | |
| box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); | |
| } | |
| .discount-badge { | |
| position: absolute; | |
| top: 14px; | |
| right: 14px; | |
| background: linear-gradient(135deg, var(--danger), #ff5a6e); | |
| color: white; | |
| padding: 6px 14px; | |
| border-radius: var(--radius-full); | |
| font-size: 11px; | |
| font-weight: 700; | |
| z-index: 2; | |
| box-shadow: 0 4px 16px rgba(255, 59, 92, 0.4); | |
| } | |
| .new-badge { | |
| position: absolute; | |
| top: 14px; | |
| left: 14px; | |
| background: linear-gradient(135deg, var(--success), #00e6a0); | |
| color: white; | |
| padding: 6px 14px; | |
| border-radius: var(--radius-full); | |
| font-size: 11px; | |
| font-weight: 700; | |
| z-index: 2; | |
| } | |
| .product-image { | |
| width: 100%; | |
| height: 150px; | |
| background: linear-gradient(135deg, var(--card-hover), var(--bg-secondary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--accent); | |
| font-size: 44px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .product-image::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(135deg, transparent 30%, rgba(255, 94, 58, 0.08) 100%); | |
| } | |
| .product-image::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 50%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); | |
| transition: left 0.5s ease; | |
| } | |
| .product-card:hover .product-image::after { | |
| left: 100%; | |
| } | |
| .product-info { | |
| padding: 16px; | |
| } | |
| .product-title { | |
| font-weight: 700; | |
| font-size: 14px; | |
| margin-bottom: 8px; | |
| color: var(--fg); | |
| } | |
| .product-rating { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| margin-bottom: 12px; | |
| font-size: 12px; | |
| } | |
| .product-rating .stars { | |
| color: var(--warning); | |
| } | |
| .product-rating span { | |
| color: var(--fg-muted); | |
| } | |
| .product-price-row { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-bottom: 14px; | |
| } | |
| .product-price { | |
| font-size: 16px; | |
| color: var(--accent); | |
| font-weight: 800; | |
| } | |
| .product-old-price { | |
| font-size: 11px; | |
| color: var(--fg-muted); | |
| text-decoration: line-through; | |
| } | |
| .product-actions { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-top: 14px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .action-btn { | |
| background: none; | |
| border: none; | |
| font-size: 16px; | |
| cursor: pointer; | |
| color: var(--fg-muted); | |
| transition: all var(--transition-fast); | |
| width: 38px; | |
| height: 38px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .action-btn:hover { | |
| background: var(--card-hover); | |
| color: var(--fg); | |
| } | |
| .action-btn.liked { | |
| color: var(--danger); | |
| } | |
| .action-btn.liked i { | |
| animation: heartBeat 0.4s ease; | |
| } | |
| @keyframes heartBeat { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.3); } | |
| } | |
| .action-btn.saved { | |
| color: var(--warning); | |
| } | |
| .cart-btn { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-hover)); | |
| color: white ; | |
| width: 38px; | |
| height: 38px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: none; | |
| cursor: pointer; | |
| transition: all var(--transition-smooth); | |
| } | |
| .cart-btn:hover { | |
| transform: scale(1.15); | |
| box-shadow: 0 6px 20px var(--accent-glow); | |
| } | |
| .cart-btn:active { | |
| transform: scale(0.95); | |
| } | |
| .videos-section { | |
| margin-bottom: 48px; | |
| } | |
| .section-title { | |
| font-size: 24px; | |
| font-weight: 800; | |
| margin-bottom: 24px; | |
| color: var(--fg); | |
| } | |
| .video-card { | |
| display: flex; | |
| gap: 18px; | |
| background: var(--card); | |
| border-radius: var(--radius-lg); | |
| padding: 18px; | |
| margin-bottom: 16px; | |
| border: 1px solid var(--border); | |
| cursor: pointer; | |
| transition: all var(--transition-smooth); | |
| } | |
| .video-card:hover { | |
| border-color: var(--accent); | |
| transform: translateX(-6px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .video-thumbnail { | |
| width: 100px; | |
| height: 100px; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-secondary)); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 32px; | |
| flex-shrink: 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .video-thumbnail::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.25); | |
| } | |
| .video-thumbnail i { | |
| position: relative; | |
| z-index: 1; | |
| transition: transform var(--transition-fast); | |
| } | |
| .video-card:hover .video-thumbnail i { | |
| transform: scale(1.2); | |
| } | |
| .video-details { | |
| flex: 1; | |
| } | |
| .video-title { | |
| font-weight: 700; | |
| font-size: 16px; | |
| margin-bottom: 8px; | |
| color: var(--fg); | |
| } | |
| .video-subtitle { | |
| font-size: 13px; | |
| color: var(--fg-muted); | |
| margin-bottom: 12px; | |
| line-height: 1.6; | |
| } | |
| .video-stats { | |
| display: flex; | |
| gap: 18px; | |
| font-size: 12px; | |
| color: var(--fg-muted); | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .video-stats span { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .video-stats i { | |
| color: var(--accent); | |
| } | |
| .like-comment { | |
| display: flex; | |
| gap: 12px; | |
| margin-top: 14px; | |
| } | |
| .like-comment button { | |
| background: var(--bg-secondary); | |
| border: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 12px; | |
| color: var(--fg-muted); | |
| cursor: pointer; | |
| padding: 10px 16px; | |
| border-radius: var(--radius-full); | |
| transition: all var(--transition-fast); | |
| } | |
| .like-comment button:hover { | |
| background: var(--card-hover); | |
| color: var(--fg); | |
| } | |
| .like-comment button.liked { | |
| color: var(--danger); | |
| background: rgba(255, 59, 92, 0.1); | |
| } | |
| .like-comment button.liked i { | |
| color: var(--danger); | |
| } | |
| .comments-section { | |
| margin-top: 40px; | |
| padding-top: 40px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .comment-item { | |
| display: flex; | |
| gap: 16px; | |
| margin-bottom: 20px; | |
| background: var(--card); | |
| padding: 18px; | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border); | |
| transition: all var(--transition-fast); | |
| } | |
| .comment-item:hover { | |
| border-color: var(--accent); | |
| } | |
| .comment-avatar { | |
| width: 52px; | |
| height: 52px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-secondary)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 22px; | |
| flex-shrink: 0; | |
| } | |
| .comment-content { | |
| flex: 1; | |
| } | |
| .comment-author { | |
| font-weight: 700; | |
| font-size: 15px; | |
| margin-bottom: 8px; | |
| color: var(--fg); | |
| } | |
| .comment-text { | |
| font-size: 13px; | |
| color: var(--fg-muted); | |
| line-height: 1.7; | |
| } | |
| .comment-actions { | |
| display: flex; | |
| gap: 18px; | |
| margin-top: 14px; | |
| font-size: 12px; | |
| } | |
| .comment-actions button { | |
| background: none; | |
| border: none; | |
| color: var(--fg-muted); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: color var(--transition-fast); | |
| font-family: inherit; | |
| } | |
| .comment-actions button:hover { | |
| color: var(--accent); | |
| } | |
| .comment-input { | |
| display: flex; | |
| gap: 14px; | |
| margin-top: 24px; | |
| } | |
| .comment-input input { | |
| flex: 1; | |
| padding: 16px 22px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-full); | |
| outline: none; | |
| font-size: 14px; | |
| background: var(--card); | |
| color: var(--fg); | |
| transition: all var(--transition-fast); | |
| } | |
| .comment-input input:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 4px var(--accent-glow); | |
| } | |
| .comment-input input::placeholder { | |
| color: var(--fg-muted); | |
| } | |
| .comment-input button { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-hover)); | |
| color: white; | |
| border: none; | |
| padding: 16px 32px; | |
| border-radius: var(--radius-full); | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all var(--transition-smooth); | |
| font-family: inherit; | |
| } | |
| .comment-input button:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 8px 28px var(--accent-glow); | |
| } | |
| .recently-viewed { | |
| margin-bottom: 48px; | |
| } | |
| .recently-viewed-scroll { | |
| display: flex; | |
| gap: 16px; | |
| overflow-x: auto; | |
| padding: 8px 0; | |
| scrollbar-width: none; | |
| } | |
| .recently-viewed-scroll::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .recent-item { | |
| min-width: 140px; | |
| background: var(--card); | |
| border-radius: var(--radius-md); | |
| padding: 12px; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| border: 1px solid var(--border); | |
| } | |
| .recent-item:hover { | |
| border-color: var(--accent); | |
| transform: translateY(-4px); | |
| } | |
| .recent-item-image { | |
| width: 100%; | |
| height: 80px; | |
| background: var(--card-hover); | |
| border-radius: var(--radius-sm); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--accent); | |
| font-size: 28px; | |
| margin-bottom: 8px; | |
| } | |
| .recent-item-title { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--fg); | |
| margin-bottom: 4px; | |
| } | |
| .recent-item-price { | |
| font-size: 11px; | |
| color: var(--accent); | |
| font-weight: 700; | |
| } | |
| .bottom-nav { | |
| display: flex; | |
| justify-content: space-around; | |
| margin-top: 40px; | |
| padding: 18px 12px; | |
| background: var(--glass); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: var(--radius-xl); | |
| border: 1px solid var(--border); | |
| position: sticky; | |
| bottom: 20px; | |
| z-index: 100; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .nav-item { | |
| text-align: center; | |
| color: var(--fg-muted); | |
| font-size: 10px; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| padding: 10px 16px; | |
| border-radius: var(--radius-md); | |
| position: relative; | |
| } | |
| .nav-item i { | |
| font-size: 22px; | |
| display: block; | |
| margin-bottom: 6px; | |
| transition: transform var(--transition-bounce); | |
| } | |
| .nav-item:hover { | |
| color: var(--fg); | |
| background: var(--card-hover); | |
| } | |
| .nav-item.active { | |
| color: var(--accent); | |
| } | |
| .nav-item.active i { | |
| transform: scale(1.15); | |
| } | |
| .nav-item.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 4px; | |
| height: 4px; | |
| background: var(--accent); | |
| border-radius: 50%; | |
| } | |
| .cart-badge { | |
| position: absolute; | |
| top: -4px; | |
| right: -4px; | |
| background: linear-gradient(135deg, var(--danger), #ff5a6e); | |
| color: white; | |
| border-radius: 50%; | |
| width: 22px; | |
| height: 22px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| box-shadow: 0 2px 8px rgba(255, 59, 92, 0.4); | |
| } | |
| @keyframes badgePop { | |
| 0% { transform: scale(0) rotate(-180deg); } | |
| 100% { transform: scale(1) rotate(0deg); } | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.9); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| z-index: 2000; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| opacity: 0; | |
| transition: opacity var(--transition-smooth); | |
| } | |
| .modal.active { | |
| display: flex; | |
| opacity: 1; | |
| } | |
| .modal-content { | |
| background: var(--card); | |
| border-radius: var(--radius-xl); | |
| max-width: 520px; | |
| width: 100%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| padding: 32px; | |
| position: relative; | |
| border: 1px solid var(--border); | |
| transform: scale(0.9) translateY(20px); | |
| transition: transform var(--transition-bounce); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .modal.active .modal-content { | |
| transform: scale(1) translateY(0 |