From 38056e04d847524231178161ea8cbf2ed6d5d0b6 Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Thu, 30 Oct 2025 14:29:00 +0100
Subject: [PATCH] Enhance styling with updated Tailwind config and CSS

- Extend Tailwind config with experimenta brand colors
- Improve CSS base styles and component formatting
- Update index page with refined typography
---
 app/pages/index.vue     |  2 +-
 assets/css/tailwind.css | 67 +++++++++++++++++++++++++++++++++--------
 tailwind.config.ts      | 11 +++++++
 3 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 529c716..5147193 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -9,7 +9,7 @@ const handleClick = () => {
 <template>
   <NuxtLayout name="default">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-      <h1 class="text-4xl font-bold mb-4">Welcome to experimenta Shop</h1>
+      <h1 class="text-4xl font-bold mb-4">Welcome to my.experimenta</h1>
       <p class="text-lg mb-8 text-white/90">Your gateway to Makerspace annual passes and more.</p>
 
       <div class="card-info card-accent-border mb-8">
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index e5fb520..243e3f5 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -47,21 +47,23 @@
 
 @layer base {
   :root {
-    /* shadcn-ui CSS variables (HSL format) */
+    /* shadcn-ui CSS variables (HSL format) - customized for experimenta */
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    /* Primary: experimenta Pink #e6007e */
+    --primary: 328 100% 45%;
+    --primary-foreground: 210 40% 98%;
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    /* Accent: experimenta Orange #f59d24 */
+    --accent: 35 91% 55%;
+    --accent-foreground: 222.2 47.4% 11.2%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
@@ -343,6 +345,44 @@
     @apply text-accent font-medium mb-4;
   }
 
+  /* White Info Card - like experimenta.science homepage */
+  .card-white {
+    @apply bg-white rounded-2xl;
+    @apply p-8 md:p-6 sm:p-5;
+    @apply shadow-lg;
+    @apply transition-transform duration-300;
+  }
+
+  .card-white:hover {
+    @apply -translate-y-1;
+  }
+
+  .card-white h2,
+  .card-white h3 {
+    @apply text-black font-bold mb-4;
+    @apply text-2xl md:text-xl;
+  }
+
+  .card-white p {
+    @apply text-gray-800 text-base leading-relaxed mb-6;
+  }
+
+  .card-white a {
+    @apply text-experimenta-primary font-bold;
+    @apply inline-flex items-center gap-2;
+    @apply transition-colors duration-300;
+  }
+
+  .card-white a:hover {
+    @apply text-experimenta-accent;
+  }
+
+  .card-white a::after {
+    content: '›';
+    @apply text-2xl font-normal;
+    transform: translateY(-2px);
+  }
+
   /* Progress Card - with Safrangold accent border */
   .card-progress {
     background: rgba(255, 255, 255, 0.08);
@@ -419,14 +459,13 @@
 
   /* Status Messages */
   .status-message {
-    @apply text-center;
+    @apply flex items-center gap-4;
   }
 
   .status-icon {
     @apply flex items-center justify-center;
     @apply w-25 h-25 rounded-full;
     @apply text-6xl text-white;
-    @apply mb-8;
     @apply animate-pulse;
   }
 
@@ -477,17 +516,19 @@
 
   .progress-bar-wrapper {
     @apply relative w-full h-8 md:h-7 sm:h-6;
-    @apply bg-white/10 rounded-full;
+    @apply bg-white/10;
     @apply overflow-hidden;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+    border-radius: 25px;
   }
 
   .progress-bar {
-    @apply h-full rounded-full;
+    @apply h-full;
     background: var(--bg-gradient-success);
     @apply transition-all duration-500;
     @apply animate-shimmer;
     background-size: 200%;
+    border-radius: 25px;
   }
 
   .progress-percentage {
@@ -554,23 +595,23 @@
 
   /* Links */
   .link-primary {
-    @apply text-primary underline;
+    @apply text-accent;
     @apply font-medium;
     @apply transition-colors duration-300;
   }
 
   .link-primary:hover {
-    @apply text-primary-light;
+    @apply brightness-125;
   }
 
   .link-accent {
-    @apply text-accent underline;
+    @apply text-accent;
     @apply font-medium;
     @apply transition-colors duration-300;
   }
 
   .link-accent:hover {
-    @apply text-accent-hover;
+    @apply brightness-125;
   }
 
   /* Header & Footer */
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f3811c5..a26b4a3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -90,6 +90,17 @@ export default {
         },
       },
 
+      // Font Family
+      fontFamily: {
+        sans: [
+          'Roboto',
+          'system-ui',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'sans-serif',
+        ],
+      },
+
       // Font Sizes (Mobile-First with responsive variants)
       fontSize: {
         // H1