laforismapizzeria.it
Il Progetto
Il cliente
L'Aforisma – Atypical Gourmet è una pizzeria gourmet di Torino fondata nel 2018 da Claudio Fusco, pizzaiolo pugliese che ha portato nel capoluogo piemontese una visione personale e contemporanea dell'arte bianca. Nel 2025 il locale ha ottenuto il riconoscimento dei 2 Spicchi Gambero Rosso, è stato inserito tra le Top 100 pizzerie d'Italia dalla guida The Great Pizza con menzione speciale tra le prime 5 per i topping, ed è presente nelle guide Identità Golose e La Pecora Nera.
Il brand si posiziona su un registro raffinato, esclusivo e sensoriale — lontano dalla comunicazione standardizzata delle pizzerie tradizionali, vicino all'estetica della ristorazione di ricerca.
La sfida
Il cliente aveva bisogno di un sito che all'altezza del brand: non un template, non un sito "da pizzeria", ma un'esperienza digitale coerente con la qualità del prodotto fisico. Le sfide principali erano tre.
Identità visiva forte senza perdere usabilità. Il settore del lusso e della ristorazione gourmet rischia spesso di sacrificare la chiarezza in favore dell'estetica. Il sito doveva essere visivamente d'impatto ma anche immediatamente navigabile, con CTA chiare verso la prenotazione.
Codice custom su Oxygen Builder. Nessun template disponibile sul mercato rifletteva l'identità del brand. Ogni componente è stato progettato e sviluppato da zero in PHP, CSS e JavaScript vanilla all'interno di Oxygen Builder 4.9.5 — il page builder che il cliente utilizzava già e che non poteva essere sostituito.
Menu dinamico senza plugin aggiuntivi. Il cliente necessitava di poter aggiornare piatti, prezzi e descrizioni dalla dashboard WordPress in autonomia, senza toccare codice. La soluzione doveva funzionare senza ACF, WooCommerce o altri plugin pesanti — solo WordPress nativo.
Design System
Prima di scrivere una riga di codice ho definito un design system completo, documentato e riutilizzabile su tutti i componenti tramite CSS custom properties.
Palette
La palette nasce da una riflessione sul brand: lusso accessibile, non ostentato. L'oro non è giallo brillante ma un oro antico (#C9A84C) che si stempera su un nero profondo (#0A0A0A) e un bianco caldo (#F5F0E8). Nessun bianco puro, nessun nero assoluto — tutto ha una temperatura che rimanda ai materiali fisici: carta patinata, legno bruciato, metallo lavorato.
--gold: #C9A84C; /* Oro primario */
--gold-light: #E8C97A; /* Hover, highlight */
--gold-dim: rgba(201, 168, 76, 0.20); /* Bordi soft */
--black: #0A0A0A; /* Background */
--white: #F5F0E8; /* Testo primario */
--grey: rgba(245, 240, 232, 0.45); /* Testo secondario */
Il contrasto oro su nero raggiunge un rapporto di 7.2:1 — abbondantemente sopra la soglia WCAG AA (4.5:1).
Tipografia
Due font con ruoli precisi e mai intercambiabili:
- Cormorant Garamond (300, 400, 600) per titoli, headline e citazioni — porta eleganza editoriale e un richiamo alla tradizione tipografica italiana
- Montserrat (300, 400, 500) per body, label, bottoni e navigazione — garantisce leggibilità e modernità
Effetti visivi
- Glassmorphism sistematico su header, banner cookie e overlay:
backdrop-filter: blur(12px)con bordogold-dime sfondo semi-trasparente - Shadow system a tre livelli calibrati per profondità percepita:
smper card standard,mdper elementi in evidenza,gold-glowper hover su CTA - Spacing fluido con
clamp()su ogni valore — nessun breakpoint fisso dove non necessario
Architettura tecnica
Stack
| Layer | Tecnologia | Versione |
|---|---|---|
| CMS | WordPress | Latest |
| Page Builder | Oxygen Builder | 4.9.5 |
| Snippet PHP | Code Snippets | Latest |
| Animazioni | GSAP + ScrollTrigger | 3.12.5 |
| JS | Vanilla ES6 | — |
| CSS | Custom Properties + Flex/Grid | — |
| Font | Google Fonts (Cormorant + Montserrat) | — |
Isolamento CSS
Ogni componente è scoped sotto il selettore #%%ELEMENT_ID%% generato da Oxygen — impossibile generare conflitti tra componenti, anche se coesistono sulla stessa pagina. Le custom properties locali usano il prefisso --_ per distinguerle dalle variabili globali.
#%%ELEMENT_ID%% {
--_gold: #C9A84C;
--_pad: clamp(1.5rem, 3vw, 3rem);
}
#%%ELEMENT_ID%% .componente { padding: var(--_pad); }
Pattern PHP
Ogni query WordPress usa WP_Query con prefisso aforisma_, wp_reset_postdata() sistematico e sanitizzazione completa su ogni output.
$aforisma_query = new WP_Query([...]);
if ( $aforisma_query->have_posts() ) :
while ( $aforisma_query->have_posts() ) : $aforisma_query->the_post();
echo esc_html( get_the_title() );
endwhile;
wp_reset_postdata();
endif;
Pattern JS
Ogni script è racchiuso in una IIFE con 'use strict', safety check sul root element come prima operazione, e gestione del DOMContentLoaded per sicurezza.
(function () {
'use strict';
var root = document.querySelector('#%%ELEMENT_ID%%');
if (!root) return;
// logica
})();
Sfide tecniche risolte
1. Menu dinamico senza ACF
Il menu della pizzeria ha una struttura narrativa complessa (Prologo, Atti, Atto Finale) con categorie, sottocategorie e un sistema di beverage separato. La soluzione è stata un Custom Post Type nativo WordPress con custom fields nativi, senza nessun plugin aggiuntivo. Il template PHP legge i piatti, li raggruppa per categoria e li renderizza nella struttura teatrale — tutto aggiornabile dalla dashboard in autonomia dal cliente.
2. FOUC di Oxygen Builder
Oxygen Builder causa un Flash of Unstyled Content (FOUC) visibile al caricamento della pagina — il body appare per un frame senza stili. La soluzione è uno snippet PHP che inietta opacity: 0 sul body prima del rendering tramite wp_head (priorità 1) e lo rivela con una transizione di 0.18s solo dopo window.load tramite wp_footer (priorità 99). Un fallback a 1.2 secondi garantisce la visibilità anche su connessioni lente.
3. Cookie Banner GDPR senza plugin
Invece di affidarsi a plugin di terze parti (Cookiebot, Complianz), ho sviluppato un cookie banner completamente custom, conforme al Regolamento (UE) 2016/679 e alle Linee Guida del Garante Privacy italiano (2021). Zero dipendenze esterne, zero KB aggiuntivi. Le funzionalità chiave:
- 4 categorie di consenso separate con toggle individuali
- "Rifiuta tutto" visivamente equivalente ad "Accetta tutto" — nessun dark pattern
- Caricamento di GA4 e Meta Pixel dinamicamente solo dopo consenso esplicito
- Consenso salvato in
localStoragecon data ISO e sistema di versioning (incrementandoCONSENT_VERSIONsi forza il re-consenso su tutti gli utenti) - Pulsante riapertura sempre visibile, chiusura con ESC come rifiuto conservativo
4. Header con Walker PHP personalizzato
La navigazione desktop e mobile usa due Walker custom (Aforisma_Header_Walker e Aforisma_Mobile_Walker) che applicano le classi BEM e gestiscono aria-current="page" in automatico in base alla pagina corrente — senza JavaScript, solo PHP.
5. Responsive completamente fluido
Nessun breakpoint fisso dove non necessario. Ogni valore di font-size, padding, gap e margin usa clamp():
font-size: clamp(1.8rem, 4vw, 3.6rem);
padding: clamp(1.5rem, 5vw, 6rem);
gap: clamp(1rem, 2vw, 2rem);
Il risultato è un layout che scala perfettamente da 320px a 2560px senza salti visivi.
Componenti sviluppati
| Componente | Tecnologie | Note |
|---|---|---|
| Header | PHP Walker, GSAP, Glassmorphism | Scroll effect, hamburger animato, ESC |
| Footer | PHP, CSS Grid | Anno dinamico, social, dati legali |
| Hero Homepage | GSAP Parallax, ScrollTrigger | fetchpriority="high", LCP ottimizzato |
| Homepage (9 sezioni) | GSAP ScrollTrigger, CSS Grid/Flex | Ritmo chiaro/scuro/immagine |
| Menu (template dinamico) | WP_Query CPT, PHP | Struttura teatrale, aggiornabile da dashboard |
| Pagina Claudio Fusco | GSAP, CSS Grid | E-E-A-T, biografia strutturata |
| Pagina Eccellenza | GSAP, CSS Grid | Focus ingredienti e produttori |
| Pagina Contatti | CSS Grid | Orari, mappa, CTA |
| Pagina Rassegna Stampa | GSAP, CSS Grid | 4 guide + 8 testate nazionali |
| Cookie Banner GDPR | Vanilla JS, localStorage | Zero plugin, conforme Garante IT |
| Anti-FOUC | PHP wp_head/wp_footer | Transizione 0.18s, fallback 1.2s |
Qualità del codice — highlights
Performance
loading="lazy"+decoding="async"su tutte le immagini below the foldloading="eager"+fetchpriority="high"sulle immagini LCPwidtheheightespliciti su ogni<img>— CLS eliminato- GSAP caricato con
defertramitewp_enqueue_script— zero render-blocking - Script di terze parti caricati solo dopo consenso cookie
Accessibilità
- Contrasto oro/nero: 7.2:1 ✅
:focus-visiblesu tutti gli elementi interattiviaria-label,aria-expanded,aria-controls,aria-currentsistemici- Heading gerarchici su ogni pagina
prefers-reduced-motion: tutte le animazioni GSAP disabilitate automaticamente
SEO
- HTML semantico con tag nativi
<header>,<main>,<section>,<article>,<footer> - H1 unico per pagina, gerarchia heading rispettata
- Alt text descrittivi con keyword naturali su ogni immagine
- Contenuti People-First conformi alle linee guida Google ufficiali
- E-E-A-T costruito su ogni pagina
- Schema.org Restaurant implementato
- Meta tag ottimizzati via Rank Math su tutte le pagine
- Google Analytics 4 e Google Search Console configurati
Risultato
Un sito completamente custom, zero template, che riflette fedelmente l'identità di un brand premiato a livello nazionale. Ogni componente è documentato, isolato, performante e accessibile — pronto per essere mantenuto ed esteso nel tempo senza toccare ciò che funziona già.
