feat: add frontend layout foundation

frontend/src/app/app.component.ts

@@ -13,13 +13,6 @@ import { MatButtonModule } from '@angular/material/button';
   ],
   template: `
     <div class="app-shell">
-      <div class="topline">
-        <div class="topline-inner">
-          <span>Laboratori teatrali & produzioni audio/visive</span>
-          <span>Direzione artistica a cura di Ernesto Estatico</span>
-        </div>
-      </div>
-
       <header class="site-header">
         <div class="header-inner">
           <a class="brand" routerLink="/" aria-label="AzioneLab">
@@ -31,10 +24,6 @@ import { MatButtonModule } from '@angular/material/button';
             <a mat-button routerLink="/shows" routerLinkActive="active">Spettacoli</a>
             <a mat-button routerLink="/check-in" routerLinkActive="active">Accoglienza</a>
           </nav>
-
-          <div class="header-actions">
-            <a mat-stroked-button routerLink="/shows">Prenota uno spettacolo</a>
-          </div>
         </div>
       </header>
 
@@ -44,9 +33,10 @@ import { MatButtonModule } from '@angular/material/button';
 
       <footer class="site-footer">
         <div class="footer-inner">
-          <div>
+          <div class="footer-copy-block">
             <p class="footer-title">AzioneLab</p>
-            <p class="footer-copy">Un luogo dove ricerca, scena e relazione si incontrano per accogliere il pubblico con cura, prima ancora che si alzi il sipario.</p>
+            <p class="footer-copy">Laboratori teatrali & produzioni audio/visive</p>
+            <p class="footer-meta">Direzione artistica: Ernesto Estatico</p>
           </div>
           <nav class="footer-nav" aria-label="Footer navigation">
             <a routerLink="/">Inizio</a>
@@ -64,12 +54,6 @@ import { MatButtonModule } from '@angular/material/button';
       flex-direction: column;
     }
 
-    .topline {
-      background: var(--azionelab-surface-dark);
-      color: rgba(255, 247, 239, 0.84);
-      font-size: 0.85rem;
-    }
-
     .topline-inner,
     .header-inner,
     .footer-inner {
@@ -77,29 +61,21 @@ import { MatButtonModule } from '@angular/material/button';
       margin: 0 auto;
     }
 
-    .topline-inner {
-      display: flex;
-      justify-content: space-between;
-      gap: 16px;
-      padding: 10px 20px;
-      flex-wrap: wrap;
-    }
-
     .site-header {
       position: sticky;
       top: 0;
       z-index: 20;
-      background: #faf5ee;
+      background: var(--azionelab-surface);
       border-bottom: 1px solid var(--azionelab-border);
     }
 
     .header-inner {
-      display: grid;
-      grid-template-columns: auto 1fr auto;
+      display: flex;
+      justify-content: space-between;
       align-items: center;
-      gap: 24px;
-      min-height: 104px;
-      padding: 0 20px;
+      gap: 20px;
+      min-height: 72px;
+      padding: 0 24px;
     }
 
     .brand {
@@ -119,9 +95,9 @@ import { MatButtonModule } from '@angular/material/button';
     }
 
     .brand-logo {
-      width: 178px;
+      width: 164px;
       height: auto;
-      max-height: 76px;
+      max-height: 44px;
       display: block;
       background: transparent;
       box-shadow: none;
@@ -135,58 +111,59 @@ import { MatButtonModule } from '@angular/material/button';
     .main-nav {
       display: flex;
       align-items: center;
-      justify-content: center;
-      gap: 6px;
+      justify-content: flex-end;
+      gap: 4px;
       flex-wrap: wrap;
     }
 
     .main-nav .active {
-      background: rgba(143, 51, 45, 0.1);
-    }
-
-    .header-actions {
-      display: flex;
-      justify-content: flex-end;
+      color: var(--azionelab-accent-strong);
     }
 
     .page-shell {
       flex: 1;
-      padding: 40px 20px 72px;
+      padding: 40px 0 88px;
     }
 
     .site-footer {
       border-top: 1px solid var(--azionelab-border);
-      background:
-        linear-gradient(180deg, rgba(255, 251, 246, 0.86), rgba(244, 235, 223, 0.92));
+      background: var(--azionelab-bg-strong);
     }
 
     .footer-inner {
       display: grid;
       grid-template-columns: minmax(0, 1.5fr) auto;
-      gap: 24px;
+      gap: 20px;
       align-items: start;
-      padding: 28px 20px 34px;
+      padding: 32px 24px 36px;
     }
 
     .footer-title {
       margin: 0 0 8px;
       font-family: var(--azionelab-serif);
-      font-size: 1.15rem;
-      font-weight: 700;
+      font-size: 1.25rem;
+      font-weight: 600;
       color: var(--azionelab-ink);
     }
 
     .footer-copy {
-      margin: 0;
+      margin: 0 0 6px;
       max-width: 52ch;
       color: var(--azionelab-muted);
       line-height: 1.6;
     }
 
+    .footer-meta {
+      margin: 0;
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+    }
+
     .footer-nav {
       display: flex;
       flex-wrap: wrap;
       gap: 14px;
+      justify-content: flex-end;
     }
 
     .footer-nav a {
@@ -196,39 +173,34 @@ import { MatButtonModule } from '@angular/material/button';
 
     @media (max-width: 800px) {
       .header-inner {
-        grid-template-columns: 1fr;
-        align-items: center;
-        padding: 16px;
+        flex-direction: column;
+        align-items: flex-start;
+        min-height: auto;
+        padding: 14px 16px;
         gap: 14px;
       }
 
       .main-nav {
         width: 100%;
-        justify-content: center;
-      }
-
-      .header-actions {
-        width: 100%;
-        justify-content: center;
+        justify-content: flex-start;
       }
 
       .brand {
-        width: 100%;
-        justify-content: center;
+        justify-content: flex-start;
       }
 
       .brand-logo {
-        width: 148px;
-        max-height: 64px;
+        width: 150px;
+        max-height: 40px;
       }
 
       .footer-inner {
         grid-template-columns: 1fr;
-        padding: 24px 16px 28px;
+        padding: 28px 16px 32px;
       }
 
-      .page-shell {
-        padding: 28px 16px 52px;
+      .footer-nav {
+        justify-content: flex-start;
       }
     }
   `],