From 329935dcddb394bfdea1aa484092782c9f25d28a Mon Sep 17 00:00:00 2001
From: bisco <bisco@autistici.org>
Date: Tue, 5 May 2026 15:50:05 +0200
Subject: [PATCH] feat: add frontend layout foundation

---
 frontend/src/app/app.component.ts | 106 +++++++++++-------------------
 frontend/src/styles.css           |  83 ++++++++++++-----------
 2 files changed, 84 insertions(+), 105 deletions(-)

diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 38dcc1d..4623794 100644
--- a/frontend/src/app/app.component.ts
+++ b/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;
       }
     }
   `],
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 1e1d577..e8e1987 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,26 +1,26 @@
 :root {
-  --azionelab-bg: #f5efe6;
-  --azionelab-bg-strong: #efe4d4;
-  --azionelab-surface: rgba(255, 251, 246, 0.84);
-  --azionelab-surface-strong: rgba(255, 252, 248, 0.96);
-  --azionelab-surface-dark: #342924;
-  --azionelab-ink: #221c18;
-  --azionelab-ink-soft: #3a302a;
-  --azionelab-muted: #6f6258;
-  --azionelab-accent: #8f332d;
-  --azionelab-accent-strong: #6e251f;
-  --azionelab-accent-soft: #c88f64;
-  --azionelab-highlight: #c6a768;
-  --azionelab-border: rgba(34, 28, 24, 0.11);
-  --azionelab-border-strong: rgba(34, 28, 24, 0.18);
-  --azionelab-shadow: 0 18px 48px rgba(46, 28, 18, 0.10);
-  --azionelab-shadow-strong: 0 26px 64px rgba(46, 28, 18, 0.16);
-  --azionelab-radius-sm: 10px;
-  --azionelab-radius-md: 16px;
-  --azionelab-radius-lg: 24px;
-  --azionelab-shell-width: 1180px;
-  --azionelab-copy-width: 64ch;
-  --azionelab-section-gap: 28px;
+  --azionelab-bg: #fcfbf8;
+  --azionelab-bg-strong: #f5f3ee;
+  --azionelab-surface: #ffffff;
+  --azionelab-surface-strong: #ffffff;
+  --azionelab-surface-dark: #121212;
+  --azionelab-ink: #111111;
+  --azionelab-ink-soft: #1e1e1e;
+  --azionelab-muted: #666666;
+  --azionelab-accent: #2f7d57;
+  --azionelab-accent-strong: #225b40;
+  --azionelab-accent-soft: #dcefe5;
+  --azionelab-highlight: #2f7d57;
+  --azionelab-border: rgba(17, 17, 17, 0.10);
+  --azionelab-border-strong: rgba(17, 17, 17, 0.16);
+  --azionelab-shadow: none;
+  --azionelab-shadow-strong: none;
+  --azionelab-radius-sm: 8px;
+  --azionelab-radius-md: 12px;
+  --azionelab-radius-lg: 18px;
+  --azionelab-shell-width: 1200px;
+  --azionelab-copy-width: 66ch;
+  --azionelab-section-gap: 48px;
   --azionelab-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
   --azionelab-serif: "Fraunces", Georgia, "Times New Roman", serif;
   --azionelab-success-bg: #edf7ef;
@@ -43,9 +43,7 @@ html, body {
   font-family: var(--azionelab-sans);
   font-weight: 500;
   color: var(--azionelab-ink);
-  background:
-    linear-gradient(180deg, rgba(143, 51, 45, 0.06), transparent 140px),
-    linear-gradient(180deg, #faf5ee 0%, var(--azionelab-bg) 52%, #efe4d6 100%);
+  background: var(--azionelab-bg);
 }
 
 body {
@@ -75,18 +73,18 @@ h1, h2, h3 {
 }
 
 h1 {
-  font-size: 2.65rem;
-  line-height: 1.04;
+  font-size: 3.2rem;
+  line-height: 1;
 }
 
 h2 {
-  font-size: 1.7rem;
-  line-height: 1.16;
+  font-size: 2rem;
+  line-height: 1.08;
 }
 
 h3 {
-  font-size: 1.2rem;
-  line-height: 1.24;
+  font-size: 1.3rem;
+  line-height: 1.2;
 }
 
 button, input, textarea, select {
@@ -108,6 +106,8 @@ button, input, textarea, select {
 
 a {
   color: var(--azionelab-accent-strong);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.16em;
 }
 
 img {
@@ -121,40 +121,47 @@ code {
 .page {
   width: min(100%, var(--azionelab-shell-width));
   margin: 0 auto;
+  padding-left: 24px;
+  padding-right: 24px;
 }
 
 .eyebrow {
   margin: 0 0 12px;
   color: var(--azionelab-accent);
   text-transform: uppercase;
-  font-size: 0.76rem;
+  font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.12em;
 }
 
 .supporting {
   color: var(--azionelab-muted);
-  font-size: 1.02rem;
-  line-height: 1.72;
+  font-size: 1.04rem;
+  line-height: 1.78;
   max-width: var(--azionelab-copy-width);
 }
 
 @media (max-width: 900px) {
   h1 {
-    font-size: 2.15rem;
+    font-size: 2.5rem;
   }
 
   h2 {
-    font-size: 1.45rem;
+    font-size: 1.72rem;
   }
 }
 
 @media (max-width: 640px) {
   h1 {
-    font-size: 1.9rem;
+    font-size: 2.05rem;
   }
 
   h2 {
-    font-size: 1.3rem;
+    font-size: 1.42rem;
+  }
+
+  .page {
+    padding-left: 16px;
+    padding-right: 16px;
   }
 }