# Direzione visiva — parrocchiaarma.it
Vincola i Task 5–8 del piano. Dove il piano e questo documento divergono su markup/CSS/estetica, **vale questo documento**; restano validi del piano i contenuti (chiavi JSON), le interfacce dei componenti (props), la struttura file e i vincoli tecnici (Astro statico, no framework, JS minimo, accessibilità, reduced-motion).
## Cosa NON fare (tell da "sito generato")
- Fondo crema + serif in display + accento terracotta. **Vietato.**
- Griglie di card tutte uguali con stesso raggio e stessa ombra grigia (bento, "3 card in fila", contact card in griglia).
- Eyebrow in maiuscoletto tracciato sopra ogni titolo; meta stringhe con "·"; frecce "→" o "↗" appese ai link; label "WORD — frammento".
- Reveal fade-up su ogni sezione allo scroll; hover-lift su ogni card.
- Hero centrato con testo sopra foto scurita.
- Emoji ovunque, nero puro #000, gradient text, glow.
## Concetto
La parrocchia comunica da sempre con la **bacheca**: orari e avvisi scritti grandi, leggibili da lontano, su un muro d'intonaco ligure. Il sito è quella bacheca, disegnata bene: il **disegno a china della facciata** (`src/assets/facciata.svg`, vettoriale, colorabile) è l'elemento identitario, gli **orari delle Messe in numerali grandi** sono la cosa memorabile.
## Token (sostituiscono quelli di `global.css`)
```css
--paper: #F1EEE6; /* intonaco chiaro: fondo pagina (grigio caldo, non crema) */
--paper-2: #E6E1D6; /* intonaco in ombra: sezioni alternate */
--ink: #1B2430; /* blu-nero: titoli, disegno facciata, testo forte */
--ink-2: #3A4350; /* testo corrente */
--muted: #596170;
--sea: #234B6A; /* blu mediterraneo: superfici scure (news, footer) */
--sea-2: #1B3A53; /* footer */
--ochre: #D6A23E; /* ocra della facciata: UNICO accento (pannello orari, focus, hover) */
--ochre-deep: #7E5612; /* ocra scura per testo/link su fondo chiaro (AA) */
--line: rgba(27, 36, 48, .14);
--font-display: 'Instrument Sans Variable', system-ui, sans-serif; /* titoli: 700, tracking -0.03em, sentence case */
--font-serif: 'Fraunces Variable', Georgia, serif; /* numerali orari, lead e citazioni in corsivo */
--font-body: 'Instrument Sans Variable', system-ui, sans-serif;
--ease: cubic-bezier(.16, 1, .3, 1);
```
Raggi: 0 sui pannelli grandi, 6px su bottoni/immagini piccole, 10px sulle foto. Ombre: nessuna, salvo la tendina del menu (tinta blu `rgba(27,36,48,.18)`).
## Tipografia
- **Titoli** (h1/h2): Instrument Sans 700, `letter-spacing: -0.03em`, `line-height: 1`, h1 `clamp(2.6rem, 6vw, 5rem)`, h2 `clamp(2rem, 3.6vw, 3rem)`. Sentence case, mai maiuscolo.
- **Numerali degli orari**: Fraunces, peso 500, `font-variation-settings: "opsz" 144, "SOFT" 60`, dimensione `clamp(2.4rem, 5vw, 4.2rem)`, `font-variant-numeric: tabular-nums`.
- **Lead / citazioni**: Fraunces 400 corsivo, `1.25–1.5rem`, colore `--ink-2`.
- **Corpo**: Instrument Sans 400, `1.0625rem`, `line-height 1.6`, misura ≤ 68ch.
- Niente eyebrow. Se serve un sottotitolo di contesto ("Iniziazione cristiana"), va **sotto** l'h1 in Fraunces corsivo.
## Layout
Asimmetrico, allineato a sinistra, contenitore `min(1240px, 100% - 2*gutter)`. Sopra 900px la home e gli hero usano split irregolari (`7fr 5fr`, `5fr 7fr`); sotto 900px tutto va a colonna singola, nessuno scroll orizzontale.
### Home
```
+----------------------------------------------+---------------------------------+
| [disegno facciata, altezza ~70vh, --ink, | PANNELLO OCRA (--ochre, --ink) |
| allineato in basso a sinistra, esce dal | Orario invernale (h2) |
| contenitore verso il bordo sinistro] | Festivo 8:30 10:00 11:00 18:00 <- numerali Fraunces
| | Vespri 17:30 |
| Parrocchia Santi Giuseppe e Antonio (h1) | Prefestivo 18:00 |
| lead in Fraunces corsivo | Feriale 9:00 18:00 |
| [Contatti] [Dove siamo] | --- righe piccole --- |
| | Adorazione / Rosario / Confessioni |
+----------------------------------------------+---------------------------------+
| Gruppi e attività (h2) |
| ACCORDION DI IMMAGINI: 6 strisce verticali in flex, ognuna un link con foto; |
| hover/focus → flex-grow 4 con easing, titolo ruotato verticale nelle strisce |
| chiuse, orizzontale + tagline in quella aperta. Altezza 520px. Mobile: stack |
| verticale, ogni striscia 180px, titolo sempre orizzontale. |
+--------------------------------------------------------------------------------+
| SUPERFICIE --sea, testo chiaro: due colonne 7/5 |
| "Le ultime notizie" + testo + link Instagram | "Giornalino" + ultimo numero|
| (link testuali sottolineati, un solo bottone ocra) |
+--------------------------------------------------------------------------------+
| Dove siamo: indirizzo grande (Fraunces), orari ufficio, tel/email come lista |
| con righe divise da --line | MapFacade a destra (5/12) |
+--------------------------------------------------------------------------------+
```
Il pannello ocra è il **solo** elemento "boxato" della home. Il disegno della facciata è un `![]()
` dell'SVG (colorato `--ink` nel file, oppure inline con `fill: currentColor` se ≤ 250 KB non pesa: usare `![]()
`).
### Pagine interne — PageHero
```
+------------------------------------------+--------------------------------+
| h1 (grande, sinistra) | [foto 4:3, raggio 10px, |
| lead Fraunces corsivo | esce a destra fino al bordo |
| | viewport; dietro, sfalsato |
| | di 24px, un rettangolo ocra]|
+------------------------------------------+--------------------------------+
```
Senza foto: h1 + lead su 7 colonne, a destra vuoto (spazio è design).
### Componenti
- **Gallery**: griglia 12 colonne, `grid-auto-flow: dense`, proporzioni variate (prima 8 colonne/2 righe, altre 4 colonne; su tablet 6/6). Niente zoom al hover; al hover l'immagine passa da `filter: saturate(.85)` a 1. Lightbox invariato.
- **PdfList**: righe, non card. Ogni riga: barra ocra a sinistra (4px), titolo 700, sotto "PDF · 2,1 MB", divisore `--line`. Hover: fondo `--paper-2`.
- **ContactCard** → mantiene le props ma rende una **riga**: etichetta piccola `--muted` a sinistra (larghezza fissa 9rem), valore grande a destra (1.25rem, link sottolineato). Le liste di contatti sono ``-like con divisori, mai griglie di box.
- **MapFacade / YouTubeFacade**: come piano, ma senza pattern a puntini: fondo `--paper-2`, bordo `--line`, bottone ocra.
- **Bottoni**: `.btn` ocra pieno con testo `--ink`, raggio 6px, `padding .85em 1.4em`, hover → `--ochre-deep` testo chiaro, `:active` `scale(.98)`. `.btn--ghost` = solo testo con sottolineatura spessa 2px ocra.
- **Header**: resta; sostituire `backdrop-filter`/blur con fondo pieno `--paper`, bordo inferiore `--line`. Voce attiva: sottolineatura ocra 2px, non colore.
- **Footer**: fondo `--sea-2`, testo `#DCE3EA`, link bianchi. Credit e legale invariati.
## Motion
Un solo momento: al caricamento della home la facciata si rivela dal basso verso l'alto (`clip-path: inset(100% 0 0 0)` → `inset(0)`, 1.1s, `--ease`) e il pannello ocra entra da destra (`translateX(24px)`, opacità, 0.7s, ritardo 0.3s). Nessun reveal allo scroll: eliminare `.reveal` e l'IntersectionObserver in `Base.astro`. Transizioni solo su `transform`/`opacity`/`background`/`color`. `prefers-reduced-motion: reduce` disattiva tutto.
## Accessibilità
Contrasto AA ovunque (`--ink` su `--ochre` ok; testo su `--sea` in `#F1EEE6`). Focus visibile: `outline: 3px solid var(--ochre)`. Le strisce dell'accordion si espandono anche con `:focus-within`. Alt tradotti dai JSON.