feat: refresh frontend visual design

frontend/src/app/pages/show-list-page.component.ts

@@ -19,7 +19,7 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
           <h1>Shows</h1>
         </div>
         <p class="supporting">
-          Browse current productions published from the AzioneLab backend.
+          Browse current productions, open a show page, and move toward booking without friction.
         </p>
       </header>
 
@@ -64,6 +64,9 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
                 <img class="show-image" [src]="show.image_url" [alt]="show.title" />
               </div>
             }
+            <div class="card-topline">
+              <span class="card-label">Published show</span>
+            </div>
             <mat-card-title>{{ show.title }}</mat-card-title>
             <mat-card-content>
               <p>{{ show.summary }}</p>
@@ -78,42 +81,23 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
     </section>
   `,
   styles: [`
-    .page {
-      max-width: 1180px;
-      margin: 0 auto;
-    }
-
     .page-header {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
+      grid-template-columns: minmax(0, 1fr) minmax(260px, 410px);
       gap: 24px;
       align-items: end;
-      margin-bottom: 24px;
-    }
-
-    .eyebrow {
-      margin: 0 0 10px;
-      color: var(--azionelab-accent);
-      text-transform: uppercase;
-      font-size: 0.78rem;
-      font-weight: 700;
-    }
-
-    h1 {
-      margin: 0;
-      font-size: clamp(2rem, 4vw, 3rem);
+      margin-bottom: 28px;
     }
 
     .supporting {
       margin: 0;
-      color: var(--azionelab-muted);
-      line-height: 1.6;
+      max-width: 34ch;
     }
 
     .show-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-      gap: 20px;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 22px;
     }
 
     .status-panel,
@@ -131,9 +115,9 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
 
     .status-card {
       max-width: 680px;
-      border-radius: 8px;
+      border-radius: var(--azionelab-radius-md);
       border: 1px solid var(--azionelab-border);
-      background: var(--azionelab-surface);
+      background: var(--azionelab-surface-strong);
       box-shadow: var(--azionelab-shadow);
     }
 
@@ -155,15 +139,16 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
     .show-card {
       display: flex;
       flex-direction: column;
-      min-height: 220px;
-      border-radius: 8px;
+      min-height: 360px;
+      overflow: hidden;
+      border-radius: var(--azionelab-radius-md);
       border: 1px solid var(--azionelab-border);
-      background: var(--azionelab-surface);
+      background: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(250, 243, 233, 0.94));
       box-shadow: var(--azionelab-shadow);
     }
 
     .show-image-wrap {
-      aspect-ratio: 16 / 10;
+      aspect-ratio: 15 / 10;
       overflow: hidden;
       border-bottom: 1px solid var(--azionelab-border);
       background:
@@ -176,15 +161,52 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
       height: 100%;
       display: block;
       object-fit: cover;
+      transition: transform 180ms ease;
+    }
+
+    .show-card:hover .show-image {
+      transform: scale(1.03);
+    }
+
+    .card-topline {
+      padding: 18px 18px 0;
+    }
+
+    .card-label {
+      display: inline-flex;
+      align-items: center;
+      min-height: 28px;
+      padding: 0 12px;
+      border-radius: 999px;
+      background: rgba(143, 51, 45, 0.08);
+      color: var(--azionelab-accent-strong);
+      font-size: 0.78rem;
+      font-weight: 700;
     }
 
     .show-card mat-card-content {
       flex: 1;
     }
 
+    .show-card mat-card-title,
+    .show-card mat-card-content,
+    .show-card mat-card-actions {
+      padding-left: 18px;
+      padding-right: 18px;
+    }
+
+    .show-card mat-card-title {
+      margin-top: 10px;
+      font-family: var(--azionelab-serif);
+      font-size: 1.45rem;
+      font-weight: 700;
+      line-height: 1.12;
+    }
+
     .show-card p {
       color: var(--azionelab-muted);
       line-height: 1.6;
+      margin: 0;
     }
 
     @media (max-width: 860px) {