Change settings

src/components/HeaderOpen.vue

@@ -28,6 +28,7 @@
       </nav>
     </div>
 
+    <!-- AMA gradient hairline -->
     <div class="ama-gradient-rule" />
   </header>
 </template>
@@ -42,12 +43,22 @@ export default {
 }
 </script>
 
-<style scoped>
+<!-- GLOBAL (UNSCOPED) — brand tokens must NOT be scoped -->
+<style>
 :root{
-  --ama-start: 0,0,185;   /* rgb(0,0,185)  */
-  --ama-end:   240,0,15;  /* rgb(240,0,15) */
+  /* AMA brand gradient: rgb(0,0,185) → rgb(240,0,15) */
+  --ama-start: 0, 0, 185;
+  --ama-end:   240, 0, 15;
+
+  /* Podium palette (kept for future use) */
+  --gold:   #D4AF37;
+  --silver: #C0C0C0;
+  --bronze: #CD7F32;
 }
+</style>
 
+<!-- COMPONENT STYLES -->
+<style scoped>
 .arena-header{
   position: sticky; top: 0; z-index: 50;
   background: linear-gradient(135deg,#fbfcff 0%,#ffffff 100%);
@@ -55,22 +66,21 @@ export default {
   backdrop-filter: blur(8px);
 }
 
-/* row */
 .bar{
   max-width: 1200px;
   margin: 0 auto;
-  padding: 14px 16px 10px;
+  padding: 16px 16px 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
 }
 
-/* title (left) */
+/* Title (left) with AMA gradient text */
 .arena-title{
   all: unset;
   cursor: pointer;
-  font-size: 24px;
+  font-size: 26px;
   font-weight: 900;
   letter-spacing: -0.01em;
   background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
@@ -79,15 +89,18 @@ export default {
   color: transparent;
 }
 
-/* tabs (right) */
+/* Tabs (right) */
 .menu{
   display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
 }
+
 .menu-item{
   cursor: pointer; position: relative;
-  font-size: 20px; font-weight: 700; color: #1f2937;
+  font-size: 22px; font-weight: 700; color: #1f2937;
   padding-bottom: 4px; transition: color .2s ease;
 }
+
+/* hover color + underline */
 .menu-item:hover{ color: rgb(var(--ama-end)); }
 .menu-item::after{
   content:''; position:absolute; left:0; bottom:0; height:2px; width:0%;
@@ -95,6 +108,8 @@ export default {
   transition: width .25s ease;
 }
 .menu-item:hover::after{ width:100%; }
+
+/* active = gradient text + full underline */
 .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;
@@ -113,10 +128,11 @@ export default {
   );
 }
 
-/* responsive: stack */
+/* responsive */
 @media (max-width: 720px){
   .bar{ flex-direction: column; align-items: stretch; }
   .menu{ justify-content: center; gap: 18px; }
-  .arena-title{ text-align: center; }
+  .arena-title{ text-align: center; font-size: 22px; }
+  .menu-item{ font-size: 18px; }
 }
 </style>