Change settings

src/components/HeaderOpen.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="arena-header">
     <div class="top-row">
-      <div class="logos-group">
+      <div class="logos-group" aria-label="Hosting partners">
         <img
           v-for="(logo, i) in hostingLogos"
           :key="'host-' + i"
@@ -11,177 +11,144 @@
           @click="navigateTo('/')"
         />
       </div>
-      <div class="arena-title">Asset Market Arena</div>
+
+      <!-- Keep the title if you want it visible; otherwise remove this block -->
+      <div class="arena-title" aria-label="Asset Market Arena">Asset Market Arena</div>
     </div>
 
-    <nav class="menu-section">
-      <span class="menu-item" @click="navigateTo('/live')">Live Arena</span>
-      <span class="menu-item" @click="navigateTo('/leaderboard')">Leaderboard</span>
-      <span class="menu-item" @click="navigateTo('/add-asset')">Agent Arena</span>
+    <nav class="menu-section" aria-label="Primary">
+      <span
+        class="menu-item"
+        :class="{ active: isActive('/live') }"
+        @click="navigateTo('/live')"
+      >Live Arena</span>
+
+      <span
+        class="menu-item"
+        :class="{ active: isActive('/leaderboard') }"
+        @click="navigateTo('/leaderboard')"
+      >Leaderboard</span>
+
+      <span
+        class="menu-item"
+        :class="{ active: isActive('/add-asset') }"
+        @click="navigateTo('/add-asset')"
+      >Agent Arena</span>
     </nav>
 
+    <!-- AMA gradient hairline -->
     <div class="ama-gradient-rule" />
   </header>
 </template>
 
 <script>
 export default {
+  name: 'ArenaHeader',
   data() {
     return {
       hostingLogos: [
-        {
-          name: 'DeepKin',
-          src: new URL('../assets/images/companies_images/deepkin_logo.png', import.meta.url).href
-        },
-        {
-          name: 'The Fin AI',
-          src: new URL('../assets/images/companies_images/logofinai.png', import.meta.url).href
-        },
-        {
-          name: 'NaCTeM',
-          src: new URL('../assets/images/companies_images/nactemlogo.png', import.meta.url).href
-        },
-        {
-          name: 'PAAL AI',
-          src: new URL('../assets/images/companies_images/paalai_logo.png', import.meta.url).href
-        }
+        { name: 'DeepKin',   src: new URL('../assets/images/companies_images/deepkin_logo.png',  import.meta.url).href },
+        { name: 'The Fin AI',src: new URL('../assets/images/companies_images/logofinai.png',      import.meta.url).href },
+        { name: 'NaCTeM',    src: new URL('../assets/images/companies_images/nactemlogo.png',     import.meta.url).href },
+        { name: 'PAAL AI',   src: new URL('../assets/images/companies_images/paalai_logo.png',    import.meta.url).href },
       ]
-    };
+    }
   },
   methods: {
-    navigateTo(path) {
-      this.$router.push(path);
-    }
+    navigateTo(path) { this.$router.push(path) },
+    isActive(path)    { return this.$route?.path?.startsWith(path) }
   }
-};
+}
 </script>
 
-<style scoped>
-/* === Brand Gradient and Podium Palette === */
+<!-- Global tokens (not scoped) -->
+<style>
 :root {
-  --ama-start: rgb(0, 0, 185);
-  --ama-end: rgb(240, 0, 15);
-  --gold: #d4af37;
-  --silver: #c0c0c0;
-  --bronze: #cd7f32;
+  /* AMA brand */
+  --ama-start: 0, 0, 185;     /* rgb(0,0,185)  */
+  --ama-end:   240, 0, 15;    /* rgb(240,0,15) */
+  /* Podium palette (for future reuse) */
+  --gold:   #D4AF37;
+  --silver: #C0C0C0;
+  --bronze: #CD7F32;
 }
+</style>
 
+<!-- Component styles -->
+<style scoped>
 .arena-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.2rem;
-  padding: 1.5rem 1rem 2rem;
-  background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 100%);
-  border-bottom: 2px solid #e5e7eb;
-  position: sticky;
-  top: 0;
-  z-index: 50;
+  position: sticky; top: 0; z-index: 50;
+  display: flex; flex-direction: column; align-items: center;
+  gap: 1rem;
+  padding: 18px 16px 16px;
+  background: linear-gradient(135deg, #fbfcff 0%, #ffffff 100%);
+  border-bottom: 1px solid #e5e7eb;
   backdrop-filter: blur(10px);
 }
 
 .top-row {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 1rem;
+  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
+  gap: 12px;
 }
 
 .logos-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  justify-content: center;
+  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
 }
 
 .logo-image {
-  height: 18px;
-  width: auto;
-  object-fit: contain;
-  cursor: pointer;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))
-    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
-  transition: transform 0.25s ease;
-}
-.logo-image:hover {
-  transform: translateY(-2px) scale(1.05);
+  height: 18px; width: auto; object-fit: contain; cursor: pointer;
+  filter: drop-shadow(0 0.5px 1px rgba(0,0,0,.15));
+  transition: transform .18s ease;
 }
+.logo-image:hover { transform: translateY(-1px) scale(1.03); }
 
 .arena-title {
-  font-size: 2rem;
-  font-weight: 900;
-  background: linear-gradient(90deg, var(--ama-start), var(--ama-end));
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  letter-spacing: -0.02em;
-  text-transform: uppercase;
+  font-size: 22px; font-weight: 900; letter-spacing: -0.01em;
+  /* AMA gradient text */
+  background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+  text-transform: none;
 }
 
-/* === Navigation Section === */
 .menu-section {
-  display: flex;
-  gap: 2rem;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-top: 0.5rem;
+  display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; margin-top: 6px;
 }
 
 .menu-item {
-  cursor: pointer;
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: #1f2937;
-  position: relative;
-  padding-bottom: 4px;
-  transition: color 0.25s ease;
+  cursor: pointer; position: relative;
+  font-size: 22px; font-weight: 700; color: #1f2937;
+  padding-bottom: 4px; transition: color .2s ease;
 }
+.menu-item:hover { color: rgb(var(--ama-end)); }
 
-.menu-item:hover {
-  color: var(--ama-end);
+/* Active tab = AMA gradient text + underline always on */
+.menu-item.active {
+  background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+  -webkit-background-clip: text; background-clip: text; color: transparent;
 }
-
 .menu-item::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 0%;
-  height: 2px;
-  background: linear-gradient(90deg, var(--ama-start), var(--ama-end));
-  transition: width 0.3s ease;
-}
-
-.menu-item:hover::after {
-  width: 100%;
+  content: ''; position: absolute; left: 0; bottom: 0;
+  height: 2px; width: 0%;
+  background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+  transition: width .25s ease;
 }
+.menu-item:hover::after { width: 100%; }
+.menu-item.active::after { width: 100%; }
 
-/* === AMA Gradient Rule === */
 .ama-gradient-rule {
-  width: 100%;
-  height: 3px;
-  margin-top: 1.25rem;
-  background: linear-gradient(
+  width: 100%; height: 3px; margin-top: 10px; border-radius: 2px;
+  background-image: linear-gradient(
     90deg,
-    rgba(0, 0, 185, 0),
-    rgb(0, 0, 185),
-    rgb(240, 0, 15),
-    rgba(240, 0, 15, 0)
+    rgba(var(--ama-start), 0),
+    rgb(var(--ama-start)),
+    rgb(var(--ama-end)),
+    rgba(var(--ama-end), 0)
   );
-  border-radius: 2px;
 }
 
-/* === Responsive === */
 @media (max-width: 768px) {
-  .arena-title {
-    font-size: 1.5rem;
-  }
-  .logo-image {
-    height: 24px;
-  }
-  .menu-section {
-    gap: 1rem;
-  }
+  .arena-title { font-size: 18px; }
+  .logo-image  { height: 16px; }
+  .menu-item   { font-size: 18px; gap: 18px; }
 }
 </style>