Change settings

src/components/HeaderOpen.vue

@@ -11,7 +11,7 @@
           @click="navigateTo('/')"
         />
       </div>
-      <div class="arena-title">Agent Market Arena</div>
+      <div class="arena-title">Asset Market Arena</div>
     </div>
 
     <nav class="menu-section">
@@ -20,6 +20,7 @@
       <span class="menu-item" @click="navigateTo('/add-asset')">Agent Arena</span>
     </nav>
 
+    <div class="ama-gradient-rule" />
   </header>
 </template>
 
@@ -28,11 +29,23 @@ export default {
   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: {
@@ -44,23 +57,35 @@ export default {
 </script>
 
 <style scoped>
+/* === Brand Gradient and Podium Palette === */
+:root {
+  --ama-start: rgb(0, 0, 185);
+  --ama-end: rgb(240, 0, 15);
+  --gold: #d4af37;
+  --silver: #c0c0c0;
+  --bronze: #cd7f32;
+}
+
 .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: 3px solid #e5e7eb;
-  text-align: center;
-  flex-direction: row;
+  border-bottom: 2px solid #e5e7eb;
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  backdrop-filter: blur(10px);
 }
 
 .top-row {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 0.75rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 
 .logos-group {
@@ -71,22 +96,30 @@ export default {
 }
 
 .logo-image {
-  height: 14px;
+  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));
+  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(-3px) scale(1.05);
+  transform: translateY(-2px) scale(1.05);
 }
 
 .arena-title {
-  font-size: 1rem;
-  font-weight: 800;
-  color: #1f1f33;
+  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;
 }
 
+/* === Navigation Section === */
 .menu-section {
   display: flex;
   gap: 2rem;
@@ -94,18 +127,21 @@ export default {
   justify-content: center;
   margin-top: 0.5rem;
 }
+
 .menu-item {
   cursor: pointer;
   font-size: 1.1rem;
   font-weight: 600;
-  color: #374151;
+  color: #1f2937;
   position: relative;
   padding-bottom: 4px;
   transition: color 0.25s ease;
 }
+
 .menu-item:hover {
-  color: #0070f3;
+  color: var(--ama-end);
 }
+
 .menu-item::after {
   content: '';
   position: absolute;
@@ -113,55 +149,36 @@ export default {
   left: 0;
   width: 0%;
   height: 2px;
-  background-color: #0070f3;
+  background: linear-gradient(90deg, var(--ama-start), var(--ama-end));
   transition: width 0.3s ease;
 }
+
 .menu-item:hover::after {
   width: 100%;
 }
 
-.partners {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  align-items: center;
-  margin-top: 1rem;
-}
-.partners-row {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-}
-.section-label {
-  font-weight: 700;
-  color: #1f1f33;
-  font-size: 1rem;
-}
-.logos-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  justify-content: center;
-}
-.partner-logo {
-  height: 34px;
-  width: auto;
-  object-fit: contain;
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
-  transition: transform 0.25s ease;
-}
-.partner-logo:hover {
-  transform: scale(1.05);
+/* === AMA Gradient Rule === */
+.ama-gradient-rule {
+  width: 100%;
+  height: 3px;
+  margin-top: 1.25rem;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 185, 0),
+    rgb(0, 0, 185),
+    rgb(240, 0, 15),
+    rgba(240, 0, 15, 0)
+  );
+  border-radius: 2px;
 }
 
+/* === Responsive === */
 @media (max-width: 768px) {
   .arena-title {
-    font-size: 1.6rem;
+    font-size: 1.5rem;
   }
-  .logo-image,
-  .partner-logo {
-    height: 28px;
+  .logo-image {
+    height: 24px;
   }
   .menu-section {
     gap: 1rem;

src/styles/globals.css

@@ -0,0 +1,37 @@
+/* globals.css */
+:root{
+  --ama-start: 0 0 185;      /* rgb */
+  --ama-end: 240 0 15;
+  --gold: #D4AF37;
+  --silver: #C0C0C0;
+  --bronze: #CD7F32;
+}
+
+@layer utilities {
+  /* Text gradient utility for AMA */
+  .text-ama {
+    background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  /* Button background using AMA gradient */
+  .bg-ama {
+    background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+  }
+
+  /* Hairline divider using AMA gradient */
+  .rule-ama {
+    height: 2px;
+    background-image: linear-gradient(90deg, rgba(var(--ama-start), .0), rgb(var(--ama-start)), rgb(var(--ama-end)), rgba(var(--ama-end), .0));
+  }
+
+  /* Subtle gradient border (works on white cards) */
+  .border-ama {
+    border: 1px solid transparent;
+    background:
+      linear-gradient(#fff,#fff) padding-box,
+      linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end))) border-box;
+  }
+}