Enhance index page styling with accent borders and updated typography, and improve CSS formatting for better readability.

app/pages/index.vue

@@ -12,8 +12,8 @@ const handleClick = () => {
       <h1 class="text-4xl font-bold mb-4">Welcome to experimenta Shop</h1>
       <p class="text-lg mb-8 text-white/90">Your gateway to Makerspace annual passes and more.</p>
 
-      <div class="card-info mb-8">
+      <div class="card-info card-accent-border mb-8">
-        <h2 class="text-xl font-semibold mb-2">MVP Development in Progress</h2>
+        <h2 class="text-xl font-semibold mb-2 text-experimenta-accent">MVP Development in Progress</h2>
         <p>
           This is a placeholder page. The full e-commerce functionality will be implemented in
           upcoming phases.

assets/css/tailwind.css

@@ -36,7 +36,9 @@
   font-stretch: 100%;
   font-display: block;
   src: url('/fonts/roboto/Roboto-VariableFont-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* ========================================
@@ -252,7 +254,9 @@
     background-size: 300%;
     background-position: 0%;
     line-height: 1.7em;
-    transition: background-position 1s, all 0.3s ease;
+    transition:
+      background-position 1s,
+      all 0.3s ease;
   }
 
   .btn-experimenta:hover {
@@ -304,7 +308,9 @@
     background-size: 300%;
     background-position: 0%;
     line-height: 1.7em;
-    transition: background-position 1s, all 0.3s ease;
+    transition:
+      background-position 1s,
+      all 0.3s ease;
   }
 
   .btn-destructive:hover {
@@ -400,7 +406,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 20px;
-    @apply font-semibold text-white;
+    @apply font-bold text-white;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
     z-index: 2;
     width: 100%;