Change settings

src/components/HeaderOpen.vue

@@ -1,42 +1,33 @@
 <template>
   <header class="arena-header">
-    <div class="top-row">
-      <div class="logos-group" aria-label="Hosting partners">
-        <img
-          v-for="(logo, i) in hostingLogos"
-          :key="'host-' + i"
-          :src="logo.src"
-          :alt="logo.name"
-          class="logo-image"
-          @click="navigateTo('/')"
-        />
-      </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 class="bar">
+      <!-- Title (left) -->
+      <button class="arena-title" aria-label="Asset Market Arena" @click="navigateTo('/')">
+        Asset Market Arena
+      </button>
+
+      <!-- Tabs (right) -->
+      <nav class="menu" 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>
     </div>
 
-    <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>
@@ -44,16 +35,6 @@
 <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 },
-      ]
-    }
-  },
   methods: {
     navigateTo(path) { this.$router.push(path) },
     isActive(path)    { return this.$route?.path?.startsWith(path) }
@@ -61,94 +42,81 @@ export default {
 }
 </script>
 
-<!-- Global tokens (not scoped) -->
-<style>
-:root {
-  /* 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 scoped>
+:root{
+  --ama-start: 0,0,185;   /* rgb(0,0,185)  */
+  --ama-end:   240,0,15;  /* rgb(240,0,15) */
 }
-</style>
 
-<!-- Component styles -->
-<style scoped>
-.arena-header {
+.arena-header{
   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%);
+  background: linear-gradient(135deg,#fbfcff 0%,#ffffff 100%);
   border-bottom: 1px solid #e5e7eb;
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(8px);
 }
 
-.top-row {
-  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
-  gap: 12px;
+/* row */
+.bar{
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 14px 16px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
 }
 
-.logos-group {
-  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 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: 22px; font-weight: 900; letter-spacing: -0.01em;
-  /* AMA gradient text */
+/* title (left) */
+.arena-title{
+  all: unset;
+  cursor: pointer;
+  font-size: 24px;
+  font-weight: 900;
+  letter-spacing: -0.01em;
   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;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
 }
 
-.menu-section {
-  display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; margin-top: 6px;
+/* tabs (right) */
+.menu{
+  display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
 }
-
-.menu-item {
+.menu-item{
   cursor: pointer; position: relative;
-  font-size: 22px; font-weight: 700; color: #1f2937;
+  font-size: 20px; font-weight: 700; color: #1f2937;
   padding-bottom: 4px; transition: color .2s ease;
 }
-.menu-item:hover { color: rgb(var(--ama-end)); }
-
-/* Active tab = AMA gradient text + underline always on */
-.menu-item.active {
+.menu-item:hover{ color: rgb(var(--ama-end)); }
+.menu-item::after{
+  content:''; position:absolute; left:0; bottom:0; height:2px; width:0%;
   background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
-  -webkit-background-clip: text; background-clip: text; color: transparent;
+  transition: width .25s ease;
 }
-.menu-item::after {
-  content: ''; position: absolute; left: 0; bottom: 0;
-  height: 2px; width: 0%;
+.menu-item:hover::after{ width:100%; }
+.menu-item.active{
   background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
-  transition: width .25s ease;
+  -webkit-background-clip:text; background-clip:text; color:transparent;
 }
-.menu-item:hover::after { width: 100%; }
-.menu-item.active::after { width: 100%; }
+.menu-item.active::after{ width:100%; }
 
-.ama-gradient-rule {
-  width: 100%; height: 3px; margin-top: 10px; border-radius: 2px;
+/* bottom hairline */
+.ama-gradient-rule{
+  width:100%; height:3px; border-radius:2px;
   background-image: linear-gradient(
     90deg,
-    rgba(var(--ama-start), 0),
+    rgba(var(--ama-start),0),
     rgb(var(--ama-start)),
     rgb(var(--ama-end)),
-    rgba(var(--ama-end), 0)
+    rgba(var(--ama-end),0)
   );
 }
 
-@media (max-width: 768px) {
-  .arena-title { font-size: 18px; }
-  .logo-image  { height: 16px; }
-  .menu-item   { font-size: 18px; gap: 18px; }
+/* responsive: stack */
+@media (max-width: 720px){
+  .bar{ flex-direction: column; align-items: stretch; }
+  .menu{ justify-content: center; gap: 18px; }
+  .arena-title{ text-align: center; }
 }
 </style>