/* =================================================================
ADRIANO LIBRANTI — PORTFOLIO
Foglio di stile principale.
INDICE (cerca questi titoli per saltare velocemente a una sezione):
1. VARIABILI GLOBALI ← qui cambi colori e font in un colpo solo
2. RESET DI BASE
3. UTILITY (reveal, link-arrow...)
4. PRELOADER
5. CURSORE CUSTOM
6. GRANA / TEXTURE CINEMA
7. HEADER
8. HERO
9. TESTO ANIMATO ALLO SCROLL (tra Hero e Chi sono)
10. CHI SONO
11. SERVIZI + HOVER PREVIEW
12. LAVORI (teaser)
13. QUOTE
14. CONTATTI / FOOTER
15. PAGINA LAVORI (lavori.html, i due pulsanti a schermo intero)
16. PAGINE PROGETTI (brand-comunicazione.html, eventi.html)
17. PAGINA PROGETTI PERSONALI (progetti-personali.html, a strisce)
18. PAGINA PROGETTO (dettaglio) — blocchi riutilizzabili
19. RESPONSIVE (mobile/tablet)
20. ACCESSIBILITÀ (riduzione animazioni)
================================================================= */
/* -----------------------------------------------------------------
1. VARIABILI GLOBALI
Tutto ciò che riguarda il "look" del sito parte da qui.
Cambia questi valori per modificare colori, font e spaziature
in tutte le pagine senza dover toccare il resto del CSS.
----------------------------------------------------------------- */
:root {
/* Palette — atmosfera scura e cinematografica.
MODIFICA QUI se vuoi un'altra palette (es. più chiara). */
--color-bg: #0b0b0c; /* sfondo principale, quasi nero */
--color-bg-alt: #111113; /* sfondo leggermente diverso (sezioni alternate) */
--color-text: #f4f1ea; /* testo principale, bianco caldo */
--color-text-dim: #9a968d; /* testo secondario / grigio caldo */
--color-accent: #e86a33; /* arancio bruciato — dettagli, hover, accenti "cinema" */
--color-line: rgba(244, 241, 234, 0.14); /* linee divisorie sottili */
/* Font.
- Display: titoli grandi → Anton, sans-serif condensato molto
pesante, stile "poster cinematografico" (ha un solo peso,
già di suo pesantissimo: non serve font-weight: bold)
- Body: testo corrente, UI → Courier Prime (monospace da
sceneggiatura/macchina da scrivere)
MODIFICA QUI se cambi i font nei tag di index.html,
lavori.html e brand-comunicazione.html (tutte e 3 le pagine
caricano gli stessi font, vanno aggiornate insieme) */
--font-display: "Anton", "Arial Narrow Bold", sans-serif;
--font-body: "Courier Prime", "Courier New", monospace;
/* Spaziature sezione: distanza verticale tra i blocchi principali */
--section-padding: clamp(5rem, 12vw, 10rem);
--side-padding: clamp(1.5rem, 6vw, 5rem);
/* Timing delle transizioni, per coerenza in tutto il sito */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--duration: 0.6s;
}
/* -----------------------------------------------------------------
2. RESET DI BASE
----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
background: var(--color-bg);
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-weight: 400; /* Courier Prime carica solo 400/700, niente 300 */
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Mentre il preloader è attivo, blocchiamo lo scroll della pagina */
body.is-loading { overflow: hidden; height: 100vh; }
/* Mentre il lightbox della mini-galleria è aperto, blocchiamo lo
scroll della pagina sotto (vedi initGalleryLightbox() in main.js) */
body.is-lightbox-open { overflow: hidden; }
a {
color: inherit;
text-decoration: none;
}
ul { list-style: none; margin: 0; padding: 0; }
h1, h2 {
font-family: var(--font-display);
font-weight: 400;
margin: 0;
}
em { font-style: italic; color: var(--color-accent); }
img { max-width: 100%; display: block; }
section { position: relative; }
/* -----------------------------------------------------------------
3. UTILITY
----------------------------------------------------------------- */
/* Link sottolineato, usato per le call to action testuali
(il nome della classe è storico: non ha più una freccia) */
.link-arrow {
display: inline-block;
margin-top: 1.5rem;
font-size: 1rem;
border-bottom: 1px solid var(--color-line);
padding-bottom: 0.3rem;
transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.link-arrow:hover { border-color: var(--color-accent); color: var(--color-accent); }
/* Elementi con classe .reveal partono invisibili e leggermente
spostati in basso; main.js aggiunge .is-visible quando entrano
nel viewport (vedi initScrollReveal in main.js). */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Piccolo sfalsamento tra elementi vicini per un effetto "a cascata" */
.hero__title .reveal:nth-child(1) { transition-delay: 0.05s; }
.hero__title .reveal:nth-child(2) { transition-delay: 0.15s; }
.hero__title .reveal:nth-child(3) { transition-delay: 0.25s; }
/* Foto fisse decorative accanto a Hero e Chi sono (in homepage).
Grandi, sull'estremo bordo dello schermo (right:0 — non
var(--side-padding): proprio sul filo, non rientrata) e panoramiche
(16:9). Statiche apposta: non reagiscono al mouse (niente hover),
restano "normali" — solo l'animazione ".reveal" alla comparsa.
".home-photo-frame" fa solo posizionamento: ancorata al bordo della
sezione (che ha già position:relative di suo, vedi "section {
position: relative; }" più sopra) e centrata in verticale.
Niente bordi netti: una maschera sfuma gradualmente i quattro lati
verso il trasparente, così la foto si dissolve nello sfondo scuro
invece di ritagliarsi come un rettangolo netto — due sfumature
lineari (orizzontale + verticale) invece di una sola radiale: la
radiale dava un alone rotondo/a fascio di luce, poco elegante;
così invece resta riconoscibile come rettangolo panoramico, solo
con i bordi ammorbiditi (vedi "mask-image" sotto — "mask-composite:
intersect" moltiplica le due sfumature, il fondo lo abbiamo giusto
agli angoli in più).
Nascosta sotto i 1150px: sotto quella soglia non c'è più spazio a
fianco del testo senza sovrapporsi (vedi sezione 19/RESPONSIVE).
MODIFICA QUI larghezza/proporzioni; il trattamento in bianco e
nero è pensato per restare coerente anche quando sostituirai le
foto di prova con quelle vere. */
.home-photo-frame {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: clamp(460px, 42vw, 820px);
aspect-ratio: 16 / 9;
overflow: hidden;
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 16%, black 84%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
-webkit-mask-composite: source-in, source-in;
mask-image:
linear-gradient(to right, transparent 0%, black 16%, black 84%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
mask-composite: intersect;
}
/* Quella della Hero è più larga delle altre (larghezza propria invece
di quella condivisa qui sopra, altezza indipendente invece che
derivata da un aspect-ratio) e spostata un po' più in basso: deve
arrivare almeno all'altezza dell'ultima riga di ".hero__subtitle".
Larghezza e altezza sono due clamp separati apposta, non un
aspect-ratio: così si può allargare quanto si vuole senza che
l'altezza cresca insieme (che invece andava già bene). Lo
spostamento in basso (+3rem, metà di "padding-top: 6rem" della
Hero) serve perché il testo della Hero è centrato verticalmente
nello spazio SOTTO quel padding-top, non nella sezione intera:
senza questo la foto (che invece si centra sulla sezione intera)
risulterebbe troppo in alto rispetto al testo. MODIFICA QUI se
cambi padding-top in ".hero" — lo spostamento va tenuto a metà di
quel valore. */
.home-photo-frame--hero {
top: calc(50% + 3rem);
width: clamp(600px, 54vw, 980px);
height: clamp(345px, 31.5vw, 615px);
aspect-ratio: auto; /* niente rapporto fisso: larghezza e altezza sopra sono indipendenti */
}
.home-photo {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.85) contrast(1.05) brightness(0.85);
}
/* -----------------------------------------------------------------
4. PRELOADER
----------------------------------------------------------------- */
.preloader {
position: fixed;
inset: 0;
z-index: 200;
background: var(--color-bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
transition: transform 0.9s var(--ease), opacity 0.7s ease;
}
.preloader__count {
font-family: var(--font-display);
font-size: clamp(2.6rem, 8vw, 5rem);
font-weight: 300;
color: var(--color-text);
}
.preloader__count::after { content: "%"; font-size: 0.5em; margin-left: 0.2em; color: var(--color-accent); }
.preloader__label {
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-dim);
}
/* Stato finale: il preloader scivola verso l'alto e sparisce */
.preloader.is-done {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
/* -----------------------------------------------------------------
5. CURSORE CUSTOM
Visibile solo su dispositivi con puntatore preciso (mouse/trackpad,
niente touch — vedi sezione 14/responsive). Il puntatore normale
del sistema resta sempre visibile (non lo nascondiamo mai): questo
gruppo aggiunge solo, sopra di esso, la scia "a griglia" (".cursor-
trail-cell" più sotto, fuori da ".cursor") e il caret lampeggiante
stile macchina da scrivere quando il mouse è
sopra un testo grande (".cursor__caret", in fondo a questa
sezione). Niente più puntino/mirino/etichetta: rimossi via via su
richiesta, bastano scia + caret.
----------------------------------------------------------------- */
.cursor {
position: fixed;
top: 0;
left: 0;
z-index: 150;
pointer-events: none;
mix-blend-mode: difference; /* il cursore "inverte" i colori sotto di sé, effetto cinema */
}
/* Scia "a griglia" che il mouse si lascia dietro muovendosi —
generata da initCursorTrail() in main.js: la pagina è divisa in
una griglia invisibile di celle (dimensione nella custom property
"--grid-trail-size", scritta da main.js) e ogni volta che il mouse
entra in una cella nuova ne "accende" i contorni, che poi
svaniscono. Riprende il quadrato/griglia del resto del sito (mirino
a squadre di prima, ora tolto; i quadratini del preloader) invece
di un punto libero. Fuori dal gruppo ".cursor" (niente
mix-blend-mode: difference) apposta, altrimenti non si vedrebbe
arancione ma un colore "invertito" diverso a seconda dello sfondo.
MODIFICA QUI colore/spessore/opacità per una scia più/meno
marcata; dimensione griglia e durata sono in main.js (la
transizione qui sotto deve durare quanto LIFETIME lì). */
.cursor-trail-cell {
position: fixed;
top: 0;
left: 0;
width: var(--grid-trail-size);
height: var(--grid-trail-size);
box-sizing: border-box;
border: 2px solid var(--color-accent);
background: rgba(232, 106, 51, 0.22); /* var(--color-accent) a bassa opacità: rgba() non legge le variabili CSS, va tenuto in sync col colore sopra */
pointer-events: none;
z-index: 149;
opacity: 1;
transform: scale(1);
transition: opacity 0.7s linear, transform 0.7s ease-out;
will-change: transform, opacity;
}
/* Stato "testo": quando il mouse passa sopra un titolo o una frase
in Courier Prime (elementi con data-cursor="text" in index.html),
punto e anello spariscono e al loro posto appare un caret —
la classica barretta verticale spessa, come il cursore di una
vecchia macchina da scrivere/terminale.
La dimensione non è fissa: main.js legge la font-size del testo
sotto il mouse e la scrive nella variabile --caret-size, così il
caret è sempre proporzionato al testo — enorme sul titolo hero,
più contenuto sui titoli piccoli. MODIFICA QUI i moltiplicatori
(0.22 / 1.15) per renderlo ancora più spesso/alto o più sottile.
Il colore del caret (--caret-color) segue quello del testo che
sta coprendo (impostato da main.js): siccome il cursore usa
mix-blend-mode: difference (vedi ".cursor" più sopra), un colore
identico a quello del testo sotto produce nero — è per questo che
il testo "sparisce" diventando nero al passaggio del caret, sia
che sia bianco (--color-text) sia che sia arancio (--color-accent).
IMPORTANTE: "transform" (il translate che lo fa seguire il mouse,
aggiornato da main.js ad ogni movimento) resta FUORI dalla
transition qui sotto, di proposito. Se ci fosse una transizione
anche lì, muovendo il mouse in fretta il caret "insegue" la nuova
posizione con un piccolo ritardo invece di seguirla subito — con
mix-blend-mode: difference quel ritardo si vede come una scia di
"fotogrammi fantasma" dietro al cursore. Bug preso e risolto così:
niente transizione sulla posizione, solo su opacità/dimensioni. */
.cursor__caret {
position: fixed;
width: calc(var(--caret-size, 48px) * 0.22);
height: calc(var(--caret-size, 48px) * 1.15);
margin: calc(var(--caret-size, 48px) * -0.575) 0 0 calc(var(--caret-size, 48px) * -0.11);
background: var(--caret-color, var(--color-text));
border-radius: 1px;
opacity: 0;
transition: opacity 0.25s var(--ease),
width 0.2s var(--ease), height 0.2s var(--ease), margin 0.2s var(--ease);
}
.cursor.is-text-hovering .cursor__caret {
opacity: 1;
/* Fisso, senza lampeggio: MODIFICA QUI se in futuro lo vuoi di
nuovo intermittente — basta rimettere una regola "animation". */
}
/* -----------------------------------------------------------------
6. GRANA / TEXTURE CINEMA
Overlay statico che aggiunge una leggerissima grana simile a
pellicola su tutta la pagina — dettaglio che rinforza l'estetica
cinematografica. Puro CSS, nessuna immagine da caricare.
----------------------------------------------------------------- */
.grain {
position: fixed;
inset: 0;
z-index: 140;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* -----------------------------------------------------------------
7. HEADER
È fissa in cima (position: fixed) così resta visibile durante lo
scroll. Per questo motivo ha bisogno di uno sfondo (qui semi-
trasparente + sfocato, effetto "vetro") altrimenti il testo delle
sezioni sottostanti le passerebbe dietro e sembrerebbe sovrapporsi
al logo/menu. MODIFICA QUI --color-bg-alt/opacità se vuoi un header
più o meno trasparente.
----------------------------------------------------------------- */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.75rem var(--side-padding);
font-size: 0.85rem;
letter-spacing: 0.02em;
background: rgba(11, 11, 12, 0.7); /* stesso tono di --color-bg, semi-trasparente */
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid transparent;
transition: border-color var(--duration) var(--ease);
}
/* Quando si scrolla, la pagina aggiunge .is-scrolled al body (main.js)
così mostriamo anche una sottile linea di separazione sotto l'header */
body.is-scrolled .site-header {
border-bottom-color: var(--color-line);
}
.site-header__logo {
display: flex;
align-items: center;
}
/* Altezza del logo nell'header. MODIFICA QUI se il tuo PNG ha proporzioni
diverse: la larghezza si adatta da sola (width: auto sotto). */
.site-header__logo img {
height: 70px;
width: auto;
}
.site-header__nav {
display: flex;
gap: clamp(1.25rem, 3vw, 2.5rem);
}
.site-header__nav a {
position: relative;
padding-bottom: 0.2rem;
}
/* piccola linea che si allarga da sinistra a destra al passaggio del mouse */
.site-header__nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: var(--color-accent);
transition: width var(--duration) var(--ease);
}
.site-header__nav a:hover::after { width: 100%; }
.site-header__cta {
border: 1px solid var(--color-accent); /* bordo accentato sempre visibile, non solo in hover */
border-radius: 999px;
padding: 0.5rem 1.1rem;
transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
/* Hover: si riempie di colore invece di limitarsi a schiarire il bordo */
.site-header__cta:hover { background-color: var(--color-accent); color: var(--color-bg); }
/* -----------------------------------------------------------------
8. HERO
----------------------------------------------------------------- */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 var(--side-padding);
padding-top: 6rem;
}
.hero__eyebrow {
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 1.5rem;
}
.hero__title {
font-size: clamp(2.2rem, 6.2vw, 5.4rem);
line-height: 1.05;
font-weight: 400;
max-width: 22ch;
}
.hero__title span { display: block; }
.hero__subtitle {
margin-top: 2rem; /* stacca il paragrafo dal titolo sopra */
max-width: 42ch;
font-size: clamp(1rem, 1.4vw, 1.15rem);
line-height: 1.7; /* spazio tra le righe separate da nel testo. MODIFICA QUI per avvicinarle/allontanarle */
color: var(--color-text-dim);
}
/* -----------------------------------------------------------------
9. TESTO ANIMATO ALLO SCROLL (tra Hero e Chi sono)
Stesso font/taglia del titolo hero, sulla destra. Effetto
"macchina da scrivere": mentre si scrolla, i caratteri compaiono
uno alla volta, pieni e a fuoco da subito (nessuna dissolvenza/
trasparenza intermedia) — legato in continuo alla posizione di
scroll, non un semplice reveal on/off.
initScrollText() in main.js spezza il testo in tanti
(uno per carattere, invisibili
di default) e via via ne aggiunge la classe "is-typed" man mano
che si scrolla. Nessun testo duplicato/nascosto per ottenere
l'effetto: sono gli stessi caratteri veri del testo, quindi resta
pulito per gli screen reader.
Niente spazio sopra/sotto (padding verticale a 0): la sezione
resta attaccata a Hero e Chi Sono, senza vuoti tra le tre.
MODIFICA QUI: in main.js i riferimenti "START_VH"/"END_VH" per
allungare o accorciare la distanza di scroll su cui avviene la
"battitura".
----------------------------------------------------------------- */
.scroll-text {
padding: 0 var(--side-padding); /* solo laterale: nessun vuoto verticale prima/dopo */
display: flex;
justify-content: flex-end; /* il testo sta sulla destra dello schermo */
}
.scroll-text__text {
margin: 0; /* il