/* =============================================================
ALCAMPETTO · style.css
Foglio di stile condiviso da tutte le pagine del progetto.
DIPENDENZE ESTERNE:
Google Fonts — caricato nell' di ogni pagina HTML con:
Senza connessione a internet il browser usa i font di sistema
come fallback (sans-serif e monospace).
============================================================= */
/* -------------------------------------------------------------
VARIABILI GLOBALI (CSS custom properties)
Modificare qui per cambiare l'aspetto dell'intero sito.
Colori principali:
--orange : colore accentuato, usato per loghi, bordi attivi,
link e pulsanti in evidenza. Modificare per cambiare
il colore dominante del sito.
--black : sfondo della pagina
--dark : sfondo di header, footer e card
--mid : sfondo di elementi secondari (input, placeholder)
--line : colore di bordi e linee di separazione
--text : testo principale
--muted : testo secondario (etichette, metadati)
--green : pill booleane "sì" e indicatore freschezza verde
--yellow : indicatore freschezza giallo
Font:
--font-display : Bebas Neue · titoli e numeri grandi
--font-mono : IBM Plex Mono · etichette e metadati
--font-body : IBM Plex Sans · testo corrente
------------------------------------------------------------- */
:root {
--orange: #FF5F1F;
--black: #0d0d0d;
--dark: #161616;
--mid: #242424;
--line: #2e2e2e;
--text: #e8e8e8;
--muted: #888;
--green: #4ade80;
--yellow: #fbbf24;
--font-display: 'Bebas Neue', sans-serif;
--font-mono: 'IBM Plex Mono', monospace;
--font-body: 'IBM Plex Sans', sans-serif;
}
/* -------------------------------------------------------------
RESET BASE
Azzera margini e padding su tutti gli elementi.
box-sizing: border-box fa sì che padding e bordi siano
inclusi nella larghezza dichiarata — più intuitivo.
------------------------------------------------------------- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--black);
color: var(--text);
font-family: var(--font-body);
min-height: 100vh;
overflow-x: hidden; /* evita scroll orizzontale accidentale */
}
/* -------------------------------------------------------------
SFONDO A GRIGLIA
Griglia decorativa fissa dietro a tutto il contenuto.
Generata con due gradienti lineari sovrapposti.
· Per cambiare la spaziatura: background-size (default 48px)
· Per renderla più/meno visibile: opacity (default 0.4)
------------------------------------------------------------- */
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 48px 48px;
opacity: 0.4;
pointer-events: none;
z-index: 0;
}
/* -------------------------------------------------------------
HEADER (.site-header)
Barra superiore presente su tutte le pagine.
Contiene: logo, tagline, pulsanti About e cambio lingua.
.header-left cresce per occupare lo spazio, .lang-switch
resta compatto a destra.
------------------------------------------------------------- */
.site-header {
position: relative;
z-index: 1;
border-bottom: 3px solid var(--orange);
background: var(--dark);
padding: 0 2rem;
display: flex;
align-items: center;
}
.header-left {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.2rem 0;
flex: 1;
}
/* Logo — è un link verso la homepage.
Contiene un SVG inline con il logotipo vettoriale
(semicerchio al posto della C, linea di centrocampo). */
.logo {
display: inline-block;
text-decoration: none;
line-height: 0;
flex-shrink: 0;
}
.logo svg {
height: clamp(2.8rem, 6.5vw, 4.5rem);
width: auto;
}
.tagline {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
border-left: 2px solid var(--line);
padding-left: 1rem;
line-height: 1.6;
}
/* Gruppo pulsanti destra header (About, IT/EN) */
.lang-switch {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.lang-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.08em;
text-decoration: none;
background: var(--mid);
border: 1px solid var(--line);
color: var(--muted);
padding: 0.4rem 0.8rem;
border-radius: 2px;
transition: all 0.15s;
white-space: nowrap;
}
.lang-btn:hover { border-color: var(--orange); color: var(--text); }
/* Pagina corrente: bordo e testo arancione */
.lang-btn.active { border-color: var(--orange); color: var(--orange); }
.lang-btn .flag { font-size: 1rem; line-height: 1; }
.provider-btn {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.08em;
background: var(--mid);
border: 1px solid var(--line);
color: var(--muted);
padding: 0.4rem 0.8rem;
border-radius: 2px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.provider-btn:hover { border-color: var(--orange); color: var(--text); }
.provider-btn.active { border-color: var(--orange); color: var(--orange); }
/* -------------------------------------------------------------
BARRA CONTROLLI (index.html e index.en.html)
Contiene: ricerca testuale, filtri booleani, ordinamento,
contatore risultati.
------------------------------------------------------------- */
.controls {
position: relative;
z-index: 1;
background: var(--dark);
border-bottom: 1px solid var(--line);
padding: 1rem 2rem;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.search-wrap {
position: relative;
flex: 1;
min-width: 200px;
max-width: 380px;
}
.search-wrap input {
width: 100%;
background: var(--mid);
border: 1px solid var(--line);
color: var(--text);
font-family: var(--font-mono);
font-size: 0.85rem;
padding: 0.6rem 1rem 0.6rem 2.4rem;
outline: none;
border-radius: 2px;
transition: border-color 0.2s;
}
.search-wrap input:focus { border-color: var(--orange); }
.search-wrap input::placeholder { color: var(--muted); }
.search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
font-size: 0.9rem;
}
.filter-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filter-btn {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--mid);
border: 1px solid var(--line);
color: var(--muted);
padding: 0.5rem 0.9rem;
cursor: pointer;
border-radius: 2px;
transition: all 0.15s;
}
.filter-btn:hover { border-color: var(--orange); color: var(--text); }
.filter-btn.active { background: var(--orange); color: white; border-color: var(--orange); }
.sort-group {
display: flex;
align-items: center;
gap: 0.4rem;
}
.sort-label {
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-right: 0.2rem;
}
.sort-btn {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--mid);
border: 1px solid var(--line);
color: var(--muted);
padding: 0.5rem 0.9rem;
cursor: pointer;
border-radius: 2px;
transition: all 0.15s;
}
.sort-btn:hover { border-color: var(--orange); color: var(--text); }
.sort-btn.active { color: var(--orange); border-color: var(--orange); }
.count-label {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--muted);
margin-left: auto;
}
.count-label strong { color: var(--orange); }
/* -------------------------------------------------------------
TAB VISTA (Griglia / Mappa)
Due tab minimali tra la barra controlli e il contenuto.
La tab attiva ha un bordo inferiore arancione.
------------------------------------------------------------- */
.view-tabs {
position: relative;
z-index: 1;
display: flex;
padding: 0 2rem;
background: var(--dark);
border-bottom: 1px solid var(--line);
}
.view-tab {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--muted);
padding: 0.7rem 1.2rem;
cursor: pointer;
transition: all 0.15s;
}
.view-tab:hover { color: var(--text); }
.view-tab.active { color: var(--orange); border-bottom-color: var(--orange); }
/* -------------------------------------------------------------
MAPPA LEAFLET
Il contenitore è nascosto per default (display:none).
La classe .active lo rende visibile.
L'altezza occupa la viewport meno header, controlli e tab.
------------------------------------------------------------- */
#map {
display: none;
position: relative;
z-index: 1;
height: calc(100vh - 200px);
min-height: 400px;
}
#map.active { display: block; }
/* Override popup Leaflet per tema scuro */
#map .leaflet-popup-content-wrapper {
background: var(--dark);
color: var(--text);
border: 1px solid var(--line);
border-radius: 3px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
#map .leaflet-popup-tip {
background: var(--dark);
}
#map .leaflet-popup-content {
font-family: var(--font-body);
font-size: 0.85rem;
margin: 0.75rem 1rem;
}
.map-popup-name {
font-family: var(--font-display);
font-size: 1rem;
letter-spacing: 0.04em;
margin-bottom: 0.3rem;
}
.map-popup-address {
color: var(--muted);
font-size: 0.8rem;
margin-bottom: 0.2rem;
}
.map-popup-hoops {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--green);
}
/* -------------------------------------------------------------
GRIGLIA CARD (index.html e index.en.html)
Colonne automatiche: minimo 320px ciascuna.
· Per card più larghe: aumentare 320px
· Per card più strette: diminuire 320px
------------------------------------------------------------- */
main#grid {
position: relative;
z-index: 1;
padding: 1.5rem 2rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1rem;
}
/* -------------------------------------------------------------
CARD
La classe .visible viene aggiunta dall'IntersectionObserver
in alcampetto.js quando la card entra nel viewport.
------------------------------------------------------------- */
.card {
background: var(--dark);
border: 1px solid var(--line);
border-radius: 3px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.2s, transform 0.15s;
}
.card:hover { border-color: var(--orange); transform: translateY(-2px); }
.card.visible {
animation: fadeIn 0.4s ease both;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Foto panoramica in cima alla card (layout "Respiro duale")
· Per foto più alte: aumentare height (default 240px) */
.card-photo {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
background: var(--mid);
cursor: zoom-in;
}
.card-photo-placeholder {
width: 100%;
height: 240px;
background: var(--mid);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--line);
border-bottom: 1px solid var(--line);
}
.card-header {
background: var(--mid);
padding: 0.75rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
}
.card-num {
font-family: var(--font-display);
font-size: 1.6rem;
color: var(--orange);
line-height: 1;
margin-right: 0.75rem;
min-width: 2.5rem;
}
.card-name {
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 0.04em;
line-height: 1.2;
flex: 1;
}
.card-date {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted);
white-space: nowrap;
margin-left: 0.5rem;
}
.card-body {
padding: 0.9rem 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.info-row {
display: flex;
gap: 0.5rem;
align-items: flex-start;
font-size: 0.82rem;
}
.info-label {
font-family: var(--font-mono);
font-size: 0.63rem;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
min-width: 72px;
padding-top: 0.15rem;
flex-shrink: 0;
}
.info-val { color: var(--text); line-height: 1.4; }
/* -------------------------------------------------------------
INDICATORE DI FRESCHEZZA
Segnale visivo sull'aggiornamento dei dati.
Le soglie temporali sono in alcampetto.js (freshnessClass).
· Per cambiare i colori: modificare --green, --yellow, --muted
------------------------------------------------------------- */
.freshness {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-left: 0.4rem;
}
.freshness-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.freshness.fresh .freshness-dot { background: var(--green); }
.freshness.fresh { color: var(--green); }
.freshness.aging .freshness-dot { background: var(--yellow); }
.freshness.aging { color: var(--yellow); }
.freshness.stale .freshness-dot { background: var(--muted); }
.freshness.stale { color: var(--muted); }
/* -------------------------------------------------------------
PILL BOOLEANE (illuminato / recintato / coperto)
.yes = verde · .no = grigio scuro
------------------------------------------------------------- */
.booleans {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.25rem;
}
.bool-pill {
font-family: var(--font-mono);
font-size: 0.6rem;
padding: 0.2rem 0.55rem;
border-radius: 1px;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid;
}
.bool-pill.yes { background: #14532d; color: var(--green); border-color: #166534; }
.bool-pill.no { background: #1c1c1c; color: var(--muted); border-color: var(--line); }
/* -------------------------------------------------------------
THUMBNAIL FOTO DI DETTAGLIO — RIBBON SOVRAPPOSTO
Le thumbnail si posizionano come ribbon orizzontale che
sormonta il bordo inferiore della foto panoramica.
· Per miniature più grandi: aumentare width e height (76px)
------------------------------------------------------------- */
.thumbs {
display: flex;
gap: 0.4rem;
overflow-x: auto;
padding-bottom: 0.1rem;
}
.card > .thumbs {
position: relative;
z-index: 2;
margin-top: -28px;
padding: 0 1rem 0.4rem;
}
.thumbs img {
width: 76px;
height: 76px;
object-fit: cover;
border-radius: 2px;
border: 1px solid var(--mid);
flex-shrink: 0;
cursor: zoom-in;
transition: border-color 0.15s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.thumbs img:hover { border-color: var(--orange); }
/* -------------------------------------------------------------
PIÈ DI CARD
------------------------------------------------------------- */
.card-footer {
padding: 0.65rem 1rem;
border-top: 1px solid var(--line);
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
.maps-btn {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
background: transparent;
border: 1px solid var(--orange);
color: var(--orange);
padding: 0.35rem 0.75rem;
border-radius: 2px;
transition: all 0.15s;
}
.maps-btn:hover { background: var(--orange); color: white; }
.coord {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted);
margin-left: auto;
}
/* -------------------------------------------------------------
PLAYER AUDIO "BATTITO"
Mini-player con tracciato ECG nel footer della card.
L'audio parte al click; il tracciato si anima in arancione
da sinistra a destra per la durata della registrazione.
Visibile solo se il campetto ha un file audio associato.
------------------------------------------------------------- */
.battito-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: transparent;
border: 1px solid var(--line);
padding: 0.35rem 0.75rem;
border-radius: 2px;
cursor: pointer;
transition: border-color 0.15s;
margin-left: auto;
}
.battito-btn:hover { border-color: var(--orange); }
.battito-ecg {
position: relative;
width: 80px;
height: 24px;
flex-shrink: 0;
}
.battito-ecg-bg,
.battito-ecg-fg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.battito-ecg-bg { color: var(--muted); }
.battito-ecg-fg {
color: var(--orange);
clip-path: inset(0 100% 0 0);
}
.battito-btn.playing .battito-ecg-fg {
animation: ecg-sweep 10.104s linear forwards;
}
@keyframes ecg-sweep {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0% 0 0); }
}
.battito-label {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
transition: color 0.15s;
white-space: nowrap;
}
.battito-btn:hover .battito-label,
.battito-btn.playing .battito-label { color: var(--orange); }
/* -------------------------------------------------------------
LIGHTBOX
Overlay fullscreen con hero, mosaico Mondrian e sezione
foto d'autore. Contenuto costruito da alcampetto.js.
------------------------------------------------------------- */
#lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 100;
background: var(--black);
overflow-y: auto;
overflow-x: hidden;
}
#lightbox.open { display: block; }
#lightbox::-webkit-scrollbar { width: 4px; }
#lightbox::-webkit-scrollbar-track { background: transparent; }
#lightbox::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
#lightbox-close {
position: fixed;
top: 1.2rem;
right: 1.5rem;
z-index: 110;
color: var(--muted);
font-size: 1.5rem;
cursor: pointer;
font-family: var(--font-mono);
line-height: 1;
background: rgba(13, 13, 13, 0.7);
border: none;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
backdrop-filter: blur(8px);
}
#lightbox-close:hover { color: var(--text); }
/* ── Hero (overview a schermo pieno) ── */
.lb-hero {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.lb-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lb-hero-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 3rem 2.5rem 2rem;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}
.lb-hero-caption h2 {
font-family: var(--font-display);
font-size: 3.2rem;
letter-spacing: 0.04em;
line-height: 1;
color: var(--text);
}
.lb-hero-meta {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--muted);
margin-top: 0.5rem;
}
/* ── Mosaico (contesto + dettagli) ──
Layout multi-colonna in stile masonry — le foto fluiscono
verticalmente in colonne distinte, ciascuna con la propria
altezza naturale, e si compattano senza lasciare buchi
neri tra immagini di altezze diverse. Come in una tela
di Mondrian i rettangoli non finiscono tutti lungo la
stessa linea. Le foto non vengono mai croppate: sono
sempre visibili per intero. Solo 4px di nero le separano.
─────────────────────────────────────────────── */
.lb-mondrian {
column-count: 3;
column-gap: 4px;
background: var(--black);
}
.lb-mondrian .m-cell {
break-inside: avoid;
margin-bottom: 4px;
overflow: hidden;
position: relative;
}
.lb-mondrian .m-cell img {
width: 100%;
height: auto;
display: block;
}
/* ── Foto d'autore (staccata dal mosaico) ── */
.lb-autore {
padding: 4rem 0 5rem;
display: flex;
flex-direction: column;
align-items: center;
}
.lb-autore-sep {
width: 40px;
height: 1px;
background: var(--line);
margin-bottom: 2.5rem;
}
.lb-autore-item {
max-width: 900px;
width: 88%;
text-align: center;
margin-bottom: 3rem;
}
.lb-autore-item img {
width: 100%;
max-height: 78vh;
object-fit: contain;
}
/* ── Contact sheet temporale (archivio rilevazioni) ──
Sezione visibile nel lightbox solo quando un campetto
ha più di una rilevazione fotografica. Per ogni slot
(overview, contesto, dettagli) che ha almeno due versioni
nel tempo viene mostrata una striscia orizzontale di
miniature, ordinata cronologicamente (la più vecchia
a sinistra).
─────────────────────────────────────────────── */
.lb-contact-sheet {
padding: 3rem 2rem 4rem;
border-top: 1px solid var(--line);
}
.lb-contact-sheet-title {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 2rem;
}
/* Ogni riga = uno slot fotografico nel tempo */
.cs-row {
margin-bottom: 2.2rem;
}
.cs-row-label {
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.6rem;
opacity: 0.6;
}
/* Striscia orizzontale di miniature */
.cs-strip {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 0.5rem;
align-items: flex-end;
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
}
.cs-strip::-webkit-scrollbar { height: 3px; }
.cs-strip::-webkit-scrollbar-track { background: transparent; }
.cs-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.cs-thumb {
flex: 0 0 auto;
width: 140px;
cursor: pointer;
transition: transform 0.2s;
}
.cs-thumb:hover { transform: scale(1.03); }
.cs-thumb img {
width: 140px;
height: auto;
display: block;
border-radius: 2px;
border: 2px solid transparent;
transition: border-color 0.2s;
}
.cs-thumb.current img {
border-color: var(--orange);
}
.cs-thumb-date {
font-family: var(--font-mono);
font-size: 0.6rem;
color: var(--muted);
margin-top: 0.3rem;
text-align: center;
}
.cs-thumb.current .cs-thumb-date {
color: var(--orange);
}
/* Expand: foto ingrandita sotto la striscia.
La larghezza del contenitore inner è limitata,
l'altezza è determinata dal ratio naturale dell'immagine. */
.cs-expand {
display: none;
margin-top: 0.8rem;
}
.cs-expand.open { display: block; }
.cs-expand-inner {
display: inline-block;
max-width: 700px;
background: var(--dark);
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--line);
}
.cs-expand-inner img {
width: 100%;
height: auto;
display: block;
}
.cs-expand-meta {
padding: 0.8rem 1rem;
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--muted);
display: flex;
justify-content: space-between;
}
/* -------------------------------------------------------------
MESSAGGI DI STATO
------------------------------------------------------------- */
.state-msg {
grid-column: 1 / -1;
text-align: center;
padding: 4rem 2rem;
color: var(--muted);
font-family: var(--font-mono);
font-size: 0.9rem;
}
.state-msg code {
font-size: 0.75rem;
color: #FF5F1F;
}
/* -------------------------------------------------------------
PAGINA ABOUT (about.html e about.en.html)
· Per testo più largo o più stretto: modificare max-width
------------------------------------------------------------- */
main.about {
position: relative;
z-index: 1;
max-width: 760px;
margin: 3rem auto;
padding: 0 2rem;
}
.page-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 4.5rem);
color: var(--orange);
letter-spacing: 0.04em;
line-height: 1;
margin-bottom: 2.5rem;
border-bottom: 1px solid var(--line);
padding-bottom: 1.25rem;
}
.section { margin-bottom: 2.5rem; }
.section-title {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 0.06em;
color: var(--text);
margin-bottom: 0.9rem;
}
.section p,
.section ul {
font-size: 0.95rem;
line-height: 1.75;
color: #c8c8c8;
margin-bottom: 0.85rem;
}
.section ul { margin-left: 2em; }
.section p:last-child { margin-bottom: 0; }
.section a {
color: var(--orange);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.15s;
}
.section a:hover { border-color: var(--orange); }
.meta-block {
background: var(--dark);
border: 1px solid var(--line);
border-left: 3px solid var(--orange);
padding: 1rem 1.25rem;
margin-top: 1rem;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--muted);
line-height: 1.8;
border-radius: 0 2px 2px 0;
}
.meta-block strong { color: var(--text); font-weight: 600; }
/* -------------------------------------------------------------
FOOTER (.site-footer)
------------------------------------------------------------- */
.site-footer {
position: relative;
z-index: 1;
border-top: 1px solid var(--line);
background: var(--dark);
padding: 1.2rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
main.about ~ .site-footer { margin-top: 4rem; }
.footer-meta {
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--muted);
letter-spacing: 0.06em;
line-height: 1.8;
}
.footer-meta a { color: var(--orange); text-decoration: none; }
.json-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-decoration: none;
background: var(--mid);
border: 1px solid var(--line);
color: var(--text);
padding: 0.5rem 1rem;
border-radius: 2px;
transition: all 0.15s;
}
.json-btn:hover { border-color: var(--orange); color: var(--orange); }
/* -------------------------------------------------------------
RESPONSIVE — Lightbox su tablet e mobile (max 1024px)
Copre iPad (portrait e landscape), telefoni in qualsiasi
orientamento. Le foto si impilano in verticale, ciascuna
occupa tutta la larghezza e l'altezza segue il ratio
naturale dell'immagine. Niente crop, niente spazio vuoto.
------------------------------------------------------------- */
@media (max-width: 1024px) {
.lb-hero {
height: auto;
}
.lb-hero img {
height: auto;
object-fit: contain;
}
.lb-hero-caption {
padding: 2rem 1.5rem 1.2rem;
}
.lb-hero-caption h2 { font-size: 1.5rem; }
.lb-mondrian {
column-count: 1;
}
.lb-autore-item { width: 100%; }
.lb-autore-item img { max-height: none; }
/* Contact sheet */
.cs-expand-inner { max-width: 100%; }
}
/* -------------------------------------------------------------
RESPONSIVE — schermi stretti (max 600px)
------------------------------------------------------------- */
@media (max-width: 600px) {
.site-header,
.controls,
.view-tabs,
main#grid,
.site-footer { padding-left: 1rem; padding-right: 1rem; }
main.about { padding: 0 1rem; margin: 2rem auto; }
.tagline { display: none; }
#map { height: calc(100vh - 160px); min-height: 300px; }
.card-photo,
.card-photo-placeholder { height: 180px; }
.card > .thumbs { margin-top: -22px; }
.thumbs img { width: 60px; height: 60px; }
.battito-ecg { width: 60px; }
/* Contact sheet — thumbs più piccole */
.cs-thumb { width: 110px; }
.cs-thumb img { width: 110px; }
}