From 00d09ceb8b5d03cdde45deff1e6075349b8d0f51 Mon Sep 17 00:00:00 2001
From: bisco <bisco@autistici.org>
Date: Tue, 5 May 2026 12:28:19 +0200
Subject: [PATCH] feat: refine frontend typography and branding

---
 frontend/src/app/app.component.ts             | 57 ++++++++-----------
 frontend/src/app/pages/home-page.component.ts | 16 ++----
 frontend/src/index.html                       |  2 +-
 frontend/src/styles.css                       | 26 +++++----
 4 files changed, 44 insertions(+), 57 deletions(-)

diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 656efe9..8977033 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -22,12 +22,8 @@ import { MatButtonModule } from '@angular/material/button';
 
       <header class="site-header">
         <div class="header-inner">
-          <a class="brand" routerLink="/">
-            <img class="brand-logo" src="assets/azionelab-logo.png" alt="AzioneLab" />
-            <span class="brand-text">
-              <strong>AzioneLab</strong>
-              <small>Laboratori teatrali & produzioni audio/visive</small>
-            </span>
+          <a class="brand" routerLink="/" aria-label="AzioneLab">
+            <img class="brand-logo" src="assets/azione-lab.jpg" alt="AzioneLab" />
           </a>
 
           <nav class="main-nav" aria-label="Primary navigation">
@@ -102,42 +98,27 @@ import { MatButtonModule } from '@angular/material/button';
       display: grid;
       grid-template-columns: auto 1fr auto;
       align-items: center;
-      gap: 18px;
-      min-height: 82px;
+      gap: 24px;
+      min-height: 92px;
       padding: 0 20px;
     }
 
     .brand {
       display: inline-flex;
       align-items: center;
-      gap: 14px;
+      justify-content: flex-start;
+      flex: 0 0 auto;
       color: inherit;
       text-decoration: none;
     }
 
     .brand-logo {
-      width: 58px;
-      height: 58px;
+      width: 88px;
+      height: 88px;
       display: block;
-      object-fit: contain;
-      filter: drop-shadow(0 14px 30px rgba(111, 40, 33, 0.16));
-    }
-
-    .brand-text {
-      display: flex;
-      flex-direction: column;
-      line-height: 1.05;
-    }
-
-    .brand-text strong {
-      font-family: var(--azionelab-serif);
-      font-size: 1.4rem;
-      font-weight: 700;
-    }
-
-    .brand-text small {
-      color: var(--azionelab-muted);
-      font-size: 0.78rem;
+      object-fit: cover;
+      border-radius: 14px;
+      box-shadow: 0 16px 32px rgba(111, 40, 33, 0.12);
     }
 
     .main-nav {
@@ -205,17 +186,29 @@ import { MatButtonModule } from '@angular/material/button';
     @media (max-width: 800px) {
       .header-inner {
         grid-template-columns: 1fr;
-        align-items: flex-start;
+        align-items: center;
         padding: 16px;
+        gap: 14px;
       }
 
       .main-nav {
         width: 100%;
-        justify-content: flex-start;
+        justify-content: center;
       }
 
       .header-actions {
         width: 100%;
+        justify-content: center;
+      }
+
+      .brand {
+        width: 100%;
+        justify-content: center;
+      }
+
+      .brand-logo {
+        width: 76px;
+        height: 76px;
       }
 
       .footer-inner {
diff --git a/frontend/src/app/pages/home-page.component.ts b/frontend/src/app/pages/home-page.component.ts
index 00bec6a..0e620ac 100644
--- a/frontend/src/app/pages/home-page.component.ts
+++ b/frontend/src/app/pages/home-page.component.ts
@@ -11,7 +11,6 @@ import { API_BASE_URL } from '../services/api-config.token';
   template: `
     <section class="hero page">
       <div class="hero-copy">
-        <img class="hero-logo" src="assets/azionelab-logo.png" alt="AzioneLab" />
         <p class="eyebrow">AzioneLab</p>
         <h1>Un luogo dove il teatro prende forma, voce e relazione.</h1>
         <p class="supporting">
@@ -98,17 +97,10 @@ import { API_BASE_URL } from '../services/api-config.token';
       padding: 34px 0 20px;
     }
 
-    .hero-logo {
-      width: min(220px, 52vw);
-      height: auto;
-      display: block;
-      margin-bottom: 18px;
-    }
-
     h1 {
       margin: 0;
-      max-width: 11ch;
-      font-size: 3.85rem;
+      max-width: 10.5ch;
+      font-size: 3.6rem;
     }
 
     .supporting {
@@ -287,13 +279,13 @@ import { API_BASE_URL } from '../services/api-config.token';
       }
 
       h1 {
-        font-size: 2.9rem;
+        font-size: 2.8rem;
       }
     }
 
     @media (max-width: 640px) {
       h1 {
-        font-size: 2.25rem;
+        font-size: 2.2rem;
       }
 
       .hero-stage {
diff --git a/frontend/src/index.html b/frontend/src/index.html
index b2dfe80..efd6433 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="it">
   <head>
     <meta charset="utf-8">
     <title>AzioneLab</title>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 3a10e0a..491200e 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -21,8 +21,8 @@
   --azionelab-shell-width: 1180px;
   --azionelab-copy-width: 64ch;
   --azionelab-section-gap: 28px;
-  --azionelab-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  --azionelab-serif: Georgia, "Times New Roman", serif;
+  --azionelab-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
+  --azionelab-serif: "Fraunces", Georgia, "Times New Roman", serif;
   --azionelab-success-bg: #edf7ef;
   --azionelab-success-ink: #1f5f2b;
   --azionelab-success-border: rgba(46, 125, 50, 0.18);
@@ -39,6 +39,7 @@ html, body {
   margin: 0;
   min-height: 100%;
   font-family: var(--azionelab-sans);
+  font-weight: 500;
   color: var(--azionelab-ink);
   background:
     linear-gradient(180deg, rgba(143, 51, 45, 0.06), transparent 140px),
@@ -51,24 +52,24 @@ body {
 
 h1, h2, h3 {
   font-family: var(--azionelab-serif);
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0;
   color: var(--azionelab-ink);
 }
 
 h1 {
-  font-size: 2.5rem;
-  line-height: 1.02;
+  font-size: 2.65rem;
+  line-height: 1.04;
 }
 
 h2 {
-  font-size: 1.65rem;
-  line-height: 1.12;
+  font-size: 1.7rem;
+  line-height: 1.16;
 }
 
 h3 {
-  font-size: 1.15rem;
-  line-height: 1.2;
+  font-size: 1.2rem;
+  line-height: 1.24;
 }
 
 button, input, textarea {
@@ -96,14 +97,15 @@ code {
   margin: 0 0 12px;
   color: var(--azionelab-accent);
   text-transform: uppercase;
-  font-size: 0.78rem;
+  font-size: 0.76rem;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.12em;
 }
 
 .supporting {
   color: var(--azionelab-muted);
-  line-height: 1.65;
+  font-size: 1.02rem;
+  line-height: 1.72;
   max-width: var(--azionelab-copy-width);
 }