Revamp weapon category display in index.php by restructuring HTML for better organization and adding functionality for knife skin selection. Update CSS to enhance sidebar layout and improve weapon list interactions with smooth transitions.

website/style.css

@@ -702,112 +702,59 @@ body {
 	color: var(--text-muted);
 }
 
-/* Weapon Browser Section */
-.weapon-browser {
-	margin-top: 3rem;
-	padding-top: 2rem;
-	border-top: 1px solid var(--border-color);
-}
-
-.browser-header {
-	margin-bottom: 2rem;
-}
-
-.browser-header h2 {
-	color: var(--text-primary);
-	font-size: 1.8rem;
-	font-weight: 700;
+/* Sidebar Weapon Lists */
+.nav-category {
 	margin-bottom: 0.5rem;
 }
 
-.browser-header p {
-	color: var(--text-secondary);
-	font-size: 1rem;
+.category-header {
+	margin-bottom: 0 !important;
 }
 
-.browser-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-	gap: 1rem;
-	max-width: 1200px;
-}
-
-.browser-item {
-	background: var(--bg-card);
-	border-radius: var(--border-radius);
-	border: 1px solid var(--border-color);
+.weapon-list {
+	max-height: 0;
 	overflow: hidden;
-	transition: all 0.3s ease;
+	transition: max-height 0.3s ease;
+	background: var(--bg-tertiary);
+	border-left: 3px solid var(--accent-blue);
+	margin-left: 1rem;
+}
+
+.weapon-list.expanded {
+	max-height: 500px;
+	padding: 0.5rem 0;
+}
+
+.weapon-item {
+	display: flex;
+	align-items: center;
+	padding: 0.75rem 1rem;
 	cursor: pointer;
-	opacity: 0.8;
+	transition: var(--transition);
+	border-bottom: 1px solid var(--border-color);
 }
 
-.browser-item:hover {
-	transform: translateY(-2px);
-	box-shadow: var(--shadow);
-	border-color: var(--accent-blue);
-	opacity: 1;
+.weapon-item:last-child {
+	border-bottom: none;
 }
 
-.browser-image-container {
-	position: relative;
-	aspect-ratio: 16/10;
-	background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	overflow: hidden;
+.weapon-item:hover {
+	background: var(--bg-hover);
+	padding-left: 1.25rem;
 }
 
-.browser-image {
-	width: 70%;
-	height: auto;
+.weapon-icon {
+	width: 32px;
+	height: 20px;
 	object-fit: contain;
-	transition: var(--transition);
+	margin-right: 0.75rem;
+	background: linear-gradient(145deg, #333, #222);
+	border-radius: 4px;
+	padding: 2px;
 }
 
-.browser-overlay {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background: rgba(0, 0, 0, 0.7);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	opacity: 0;
-	transition: var(--transition);
-}
-
-.browser-item:hover .browser-overlay {
-	opacity: 1;
-}
-
-.equip-text {
-	color: white;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-	font-size: 0.9rem;
-}
-
-.browser-info {
-	padding: 0.75rem;
-}
-
-.browser-category {
-	color: var(--text-muted);
-	font-size: 0.7rem;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-	margin-bottom: 0.25rem;
-	font-weight: 500;
-}
-
-.browser-name {
+.weapon-name {
 	color: var(--text-primary);
-	font-weight: 500;
 	font-size: 0.85rem;
-	line-height: 1.3;
+	font-weight: 500;
 }