/* chi-sono.html e basta. Comune.css porta gia' tokens, reset, barra, menu,
cursore, footer: qui c'e' la testa a tre colonne che gira all'infinito.
Sopra i 1024px la pagina non scorre: la classe cs-fissa, che mette
assets/chi-sono.js sull'elemento radice, blocca lo scorrimento e la testa
diventa l'unica schermata. Sotto, e senza JavaScript, la classe non c'e'
e resta un documento normale. */
.cs{background:var(--ink);color:var(--white)}
html.cs-fissa,
html.cs-fissa body{height:100%;overflow:hidden;overscroll-behavior-y:none}
/* Durante la misura le trasformate vanno tolte, se no le posizioni che si
leggono sono quelle di dove i pezzi si trovano adesso e non quelle da cui
partono. Stesso trucco del modello, stesso nome di intenzione. */
.cs-senza-scarto,
.cs-senza-scarto *{transform:none !important}
/* ============================================================
LA TESTA
============================================================ */
#cs-testa{
width:100%;
min-height:100svh;
padding:0 var(--pad);
display:flex;
align-items:stretch;
justify-content:space-between;
gap:clamp(24px,4vw,72px);
}
/* ------------------------------------------------------------
LE DUE COLONNE
Ogni colonna e' una finestra alta quanto la schermata: dentro, il
contenuto e' lungo almeno il doppio e i paragrafi si riappendono da
soli. Il testo esce di lato fino a una trentina di pixel, quindi lo
spazio glielo fa il padding e il margine negativo lo rimette a posto.
------------------------------------------------------------ */
.cs-colonna{
flex:0 0 auto;
width:clamp(280px,27vw,560px);
height:100svh;
overflow:hidden;
padding-inline:40px;
margin-inline:-40px;
-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
}
.cs-colonna-corpo > p{
margin:2.2em 0;
font-size:clamp(14px,1.15vw,17px);
line-height:1.66;
color:rgba(244,244,242,.62);
will-change:transform;
}
/* Tutte e due le colonne allineate a sinistra, come nel modello: col testo
a bandiera destra il capolettera resterebbe appeso dalla parte sbagliata. */
/* Le righe: le scrive chi-sono.js, e sono quelle che si piegano. */
.cs-riga{display:block;will-change:transform}
.cs-testo-riga{display:inline-block;white-space:nowrap}
.cs-parola{display:inline-block;white-space:pre}
/* Il numero davanti al paragrafo, al posto del capolettera del modello: la'
la lettera iniziale cresceva di sette righe e si mangiava l'attacco della
frase. Stessa numerazione dei servizi in home, e il testo comincia dove ci
si aspetta. Lo scrive numeraParagrafo() in chi-sono.js. */
.cs-riga--num{
font-family:var(--f-mono);font-size:11px;font-weight:400;
letter-spacing:.18em;font-variant-numeric:tabular-nums;
color:var(--orange);
margin-bottom:.85em;
}
/* ------------------------------------------------------------
LA COLONNA DI MEZZO
Sta ferma. Dentro, solo la pila della fotografia si muove.
------------------------------------------------------------ */
#cs-centro{
flex:1 1 auto;
min-height:100svh;
display:flex;flex-direction:column;
align-items:center;justify-content:center;
text-align:center;
gap:clamp(12px,1.8vh,20px);
padding:calc(var(--nav-h) + 16px) 0 clamp(24px,4vh,48px);
}
.cs-occhiello{color:var(--orange)}
.cs-tit{
font-family:var(--f-serif);font-weight:var(--w-serif);
font-size:clamp(40px,5vw,86px);letter-spacing:-.012em;line-height:.94;
}
/* stessa maschera di #contact-big sulla home e di #contatti-big sui contatti:
le righe salgono da sotto, e a rimetterle a y:0 e' initReveals() in
comune.js, che legge #chisono-big per id */
.cs-tit .line{overflow:hidden;display:block;padding-bottom:.16em;margin-bottom:-.16em}
.cs-tit .line > span{display:block;transform:translateY(130%)}
.cs-ruolo{color:rgba(244,244,242,.72)}
/* La pila: un riquadro col rapporto della fotografia, e dentro le copie che
girano. Le misure le prende chi-sono.js da qui, quindi l'altezza deve
essere una misura vera e non dipendere dal contenuto. */
#cs-foto{
width:min(290px,26vw);
aspect-ratio:290/338;
overflow:hidden;
margin:clamp(10px,2vh,24px) 0;
}
#cs-foto-corpo{display:flex;flex-direction:column}
#cs-foto-corpo img{
width:100%;height:auto;aspect-ratio:290/338;object-fit:cover;
will-change:transform;
}
.cs-nota{
max-width:38ch;
font-size:clamp(13px,1.05vw,15px);line-height:1.6;
color:rgba(244,244,242,.72);
}
/* Sottolineatura vera e non un bordo: qui i richiami vanno a capo dentro la
frase, e un border-bottom si sarebbe disegnato sotto tutto il blocco invece
che sotto le parole. */
.cs-nota a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(244,244,242,.45)}
.cs-nota a:hover{color:var(--orange);text-decoration-color:var(--orange)}
.cs-legale{color:var(--dim);display:flex;gap:10px}
.cs-legale a:hover{color:var(--orange)}
/* Il footer del sito qui non c'e': la schermata e' una sola. Sotto i 1024px
torna, insieme allo scorrimento. */
html.cs-fissa #footer{display:none}
/* Movimento ridotto: il giro non parte — e' un nastro che cammina da solo,
come i due dei loghi in home — ma non sparisce niente. Le righe restano
piegate, di 3px invece di 15, e la colonna si legge col dito. */
html.cs-quieta .cs-colonna{overflow-y:auto;-webkit-overflow-scrolling:touch}
/* ============================================================
TELEFONO E TAVOLETTA
Sotto i 1024px il giro si spegne e la testa torna un documento: prima
chi sono, poi i due testi, poi il footer del sito.
============================================================ */
@media (max-width:1024px){
#cs-testa{
flex-direction:column;
min-height:0;
padding:calc(var(--nav-h) + 40px) var(--pad) clamp(56px,9vh,96px);
gap:clamp(34px,6vh,60px);
}
/* Chi sono viene prima del testo: nel sorgente la colonna di sinistra sta
in cima perche' li' e' una delle due ali, qui sarebbe l'attacco sbagliato. */
#cs-centro{
order:-1;
min-height:0;padding:0;
align-items:flex-start;text-align:left;width:100%;
}
.cs-colonna{
width:100%;height:auto;overflow:visible;
padding-inline:0;margin-inline:0;
-webkit-mask-image:none;mask-image:none;
}
.cs-colonna-corpo > p{
font-size:15px;
color:rgba(244,244,242,.74);
max-width:60ch;
}
#cs-foto{width:min(290px,70vw)}
.cs-legale{justify-content:flex-start}
}