/* ==========================================================================
t4-fx — fondamenta condivise del piano v3 (P0)
Token, bottone .t4-pill, segnaposto .t4-ph, pallino, tacche e chevron, la
regola generica degli host dinamici e gli stili degli effetti di t4-fx.js.
Solo nomi nuovi (--t4-*, .t4-pill, .t4-ph, .t4-dot, .t4-chev, .t4-ticks,
.t4fx-*, .is-sticky, [data-t4-host]): nessuna pagina cambia aspetto finché
non li usa. Caricato dopo t4-hero.css (tools/ensure_kit.py).
Misure in px con clamp(): la root del tema vale 16px sotto i 992px, 12px a
1000-1699, 15px a 1700-1919 e 16px da 1920, quindi i rem cambiano valore.
Movimento: prima lo stato finale, poi l'animazione dentro
(prefers-reduced-motion: no-preference); con "riduci movimento" resta il finale.
========================================================================== */
:root {
/* colori */
--t4-navy: #0e1430;
--t4-ink: #192B88;
--t4-blue: #2448d8;
--t4-sky: #86a0ff;
--t4-page: rgb(235, 235, 235);
--t4-hair: rgba(25, 43, 136, .15);
--t4-hair-dark: rgba(134, 160, 255, .18);
--t4-grad: linear-gradient(135deg, #192B88 0%, #2448d8 100%); /* gradiente delle testate */
/* movimento: la curva "della casa" (micro-interazioni a .45s) e quella dei pannelli */
--t4-ease: cubic-bezier(.625, .05, 0, 1);
--t4-ease-out: cubic-bezier(.19, 1, .22, 1);
--t4-dur: .45s;
/* caratteri (le variabili del tema, con riserva) */
--t4-head: var(--font-family-headings, "NeueHelvetica Pro"), "Helvetica Neue", Arial, sans-serif;
--t4-mono: var(--font-family-body, "Space Mono"), ui-monospace, Menlo, monospace;
/* titolo di sezione (H2), uguale su tutte le pagine: prima andava da 37px
(Ricambi) a 58px (Kart usati) a 1440. Stessa curva dei titoli .title
del tema, che sono la maggioranza (30px da telefono, 52px a 1440, 70px
da 1920): in rem di proposito, così segue la root del tema come loro.
Tracking del piano (§0.1); il peso 500 del piano cade sul 400, perché
il tema carica solo NeueHelvetica 300 e 400. */
--t4-h2: clamp(1.875rem, 1.2377rem + 2.6144vw, 4.375rem);
--t4-h2-track: -.025em;
}
/* --------------------------------------------------------------------------
Host dei blocchi dinamici: ogni nuovo contenitore data-t4-* riceve anche
data-t4-host e occupa tutta la riga. I contenitori .u-0469 del tema sono
griglie a 2/4 colonne e lo comprimerebbero in mezza colonna; min-width:0
perché una traccia 1fr non scende sotto il contenuto (testi lunghi allargavano
la colonna oltre la viewport). Sostituisce l'elenco di t4-sections.css.
L'host è solo un contenitore (display:block forzato): griglie e flex vanno
in un elemento al suo interno.
-------------------------------------------------------------------------- */
[data-t4-host] { display: block !important; grid-column: 1 / -1; min-width: 0; width: 100%; }
/* testo solo per i lettori di schermo */
.t4fx-sr {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
/* --------------------------------------------------------------------------
Bottone .t4-pill: etichetta a sinistra, cerchio con freccia a destra.
In hover l'etichetta scorre in su dentro la sua maschera (la copia che entra
è un text-shadow, non testo duplicato: i lettori di schermo la leggono una
volta) e la freccia esce in alto a destra mentre la seconda entra dal basso.
Markup: t4fx.pillHtml({ label, href, variant }) oppure
Testo
Varianti: --accent (gradiente blu), --light, --dark (base), --ghost (sopra le foto).
-------------------------------------------------------------------------- */
.t4-pill {
--pill-bg: var(--t4-navy);
--pill-fg: #fff;
--pill-bd: transparent;
--pill-dot: #fff;
--pill-dot-fg: var(--t4-navy);
align-items: center;
background: var(--pill-bg);
border: 1px solid var(--pill-bd);
border-radius: 999px;
color: var(--pill-fg);
cursor: pointer;
display: inline-flex;
font-family: var(--t4-head);
font-size: clamp(13px, 12px + .1vw, 15px);
font-weight: 400;
gap: 14px;
height: 48px;
letter-spacing: .06em;
line-height: 1;
max-width: 100%;
padding: 0 6px 0 22px;
text-decoration: none;
text-transform: uppercase;
transition: background-color var(--t4-dur) var(--t4-ease), border-color var(--t4-dur) var(--t4-ease), box-shadow var(--t4-dur) var(--t4-ease), color var(--t4-dur) var(--t4-ease);
-webkit-user-select: none;
user-select: none;
vertical-align: middle;
white-space: nowrap;
}
/* il colore va ripetuto in hover/focus: altrimenti vince a:hover di Bootstrap
nel tema (#0a58ca, specificità 0,1,1) e l'etichetta cambia colore */
.t4-pill:hover, .t4-pill:focus, .t4-pill:focus-visible { color: var(--pill-fg); text-decoration: none; }
.t4-pill:focus-visible { outline: 2px solid var(--t4-blue); outline-offset: 3px; }
/* la copia per l'hover (text-shadow) sta 1,5em sotto, non a filo della maschera
alta 1,25em: a filo, con l'etichetta su mezzo pixel, la cima delle lettere
della copia spuntava sotto il testo come una riga di trattini */
.t4-pill__label { clip-path: inset(0); display: block; height: 1.25em; line-height: 1.25em; overflow: hidden; }
.t4-pill__label > span { display: block; text-shadow: 0 1.5em 0 currentColor; transition: transform var(--t4-dur) var(--t4-ease); }
.t4-pill__icon {
align-items: center;
background: var(--pill-dot);
border-radius: 50%;
color: var(--pill-dot-fg);
display: grid;
flex: 0 0 auto;
height: 36px;
justify-items: center;
overflow: hidden;
width: 36px;
}
.t4-pill__icon svg { grid-area: 1 / 1; height: 16px; transition: transform var(--t4-dur) var(--t4-ease); width: 16px; }
.t4-pill__icon svg + svg { transform: translate(-170%, 170%); }
@media (hover: hover) {
.t4-pill:hover .t4-pill__label > span { transform: translateY(-1.5em); }
.t4-pill:hover .t4-pill__icon svg:first-child { transform: translate(170%, -170%); }
.t4-pill:hover .t4-pill__icon svg + svg { transform: none; }
}
.t4-pill:focus-visible .t4-pill__label > span { transform: translateY(-1.5em); }
.t4-pill:focus-visible .t4-pill__icon svg:first-child { transform: translate(170%, -170%); }
.t4-pill:focus-visible .t4-pill__icon svg + svg { transform: none; }
.t4-pill--accent { --pill-bg: var(--t4-grad); --pill-dot: #fff; --pill-dot-fg: var(--t4-blue); }
.t4-pill--accent:hover { box-shadow: 0 12px 30px rgba(36, 72, 216, .35); }
.t4-pill--light { --pill-bg: #fff; --pill-fg: var(--t4-navy); --pill-dot: var(--t4-navy); --pill-dot-fg: #fff; }
.t4-pill--light:hover { box-shadow: 0 12px 30px rgba(14, 20, 48, .18); }
.t4-pill--dark { --pill-bg: var(--t4-navy); --pill-fg: #fff; --pill-dot: #fff; --pill-dot-fg: var(--t4-navy); }
.t4-pill--ghost {
--pill-bg: rgba(255, 255, 255, .10);
--pill-bd: rgba(255, 255, 255, .38);
--pill-fg: #fff;
--pill-dot: #fff;
--pill-dot-fg: var(--t4-navy);
-webkit-backdrop-filter: blur(10px) saturate(140%);
backdrop-filter: blur(10px) saturate(140%);
}
.t4-pill--ghost:hover { --pill-bg: rgba(255, 255, 255, .18); --pill-bd: rgba(255, 255, 255, .7); }
.t4-pill--sm { gap: 10px; height: 40px; padding-left: 16px; }
.t4-pill--sm .t4-pill__icon { height: 30px; width: 30px; }
.t4-pill--sm .t4-pill__icon svg { height: 14px; width: 14px; }
.t4-pill[aria-disabled="true"], .t4-pill:disabled { cursor: not-allowed; opacity: .45; pointer-events: none; }
/* su fondo scuro il fuoco è azzurro, come l'accento */
[data-t4-theme="dark"] .t4-pill:focus-visible, .t4-pill--ghost:focus-visible { outline-color: var(--t4-sky); }
/* --------------------------------------------------------------------------
Pallino "sei qui" (6px): accento sul chiaro, azzurro sullo scuro.
Entra con scala da 0 e 2px di salita (P1 lo usa nel menu).
-------------------------------------------------------------------------- */
.t4-dot { background: var(--t4-blue); border-radius: 50%; display: inline-block; flex: 0 0 auto; height: 6px; width: 6px; }
[data-t4-theme="dark"] .t4-dot, .t4-dot--sky { background: var(--t4-sky); }
@media (prefers-reduced-motion: no-preference) {
.t4-dot--in { animation: t4fx-dot-in var(--t4-dur) var(--t4-ease) .2s both; }
}
@keyframes t4fx-dot-in { from { opacity: 0; transform: translateY(2px) scale(0); } to { opacity: 1; transform: none; } }
/* Tacche da righello (decorative, solo CSS): */
.t4-ticks {
background:
repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 10px) bottom left / 100% 6px no-repeat,
repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 50px) bottom left / 100% 12px no-repeat;
color: var(--t4-hair);
display: block;
height: 12px;
}
/* Cascata di 3 chevron (solo CSS): */
.t4-chev { display: inline-grid; justify-items: center; }
.t4-chev i { border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; display: block; height: 10px; margin-top: -3px; opacity: .6; transform: rotate(45deg); width: 10px; }
@media (prefers-reduced-motion: no-preference) {
.t4-chev i { animation: t4fx-chev 1.6s var(--t4-ease) infinite; opacity: .2; }
.t4-chev i:nth-child(2) { animation-delay: .18s; }
.t4-chev i:nth-child(3) { animation-delay: .36s; }
}
@keyframes t4fx-chev { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
/* --------------------------------------------------------------------------
Segnaposto dichiarato: bordo tratteggiato ed etichetta "Contenuto in arrivo".
Mai foto finte al posto di un contenuto che manca (PIANO.md §2.3).
-------------------------------------------------------------------------- */
.t4-ph {
align-items: center;
background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(25, 43, 136, .045) 14px 15px);
border: 1.5px dashed rgba(25, 43, 136, .35);
border-radius: 16px;
box-sizing: border-box;
color: var(--t4-ink);
display: flex;
justify-content: center;
min-height: 160px;
padding: 16px;
position: relative;
text-align: center;
}
.t4-ph::before {
background: rgba(235, 235, 235, .9);
border: 1px solid var(--t4-hair);
border-radius: 999px;
content: "Contenuto in arrivo";
font-family: var(--t4-mono);
font-size: 11px;
letter-spacing: .08em;
line-height: 1.3;
padding: 6px 12px;
text-transform: uppercase;
}
.t4-ph[data-ph]::before { content: attr(data-ph); }
[data-t4-theme="dark"] .t4-ph, .t4-ph--dark {
background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(134, 160, 255, .06) 14px 15px);
border-color: rgba(134, 160, 255, .4);
color: var(--t4-sky);
}
[data-t4-theme="dark"] .t4-ph::before, .t4-ph--dark::before { background: rgba(14, 20, 48, .85); border-color: var(--t4-hair-dark); }
/* --------------------------------------------------------------------------
t4fx.pin senza smoother (sotto i 992px): sticky nativo. Con lo smoother
l'elemento lo ferma ScrollTrigger e questa classe non c'è.
-------------------------------------------------------------------------- */
.is-sticky { position: sticky; top: var(--t4fx-top, 110px); }
/* t4fx.reveal: ingresso una tantum (opacità + 12px) */
@media (prefers-reduced-motion: no-preference) {
.t4fx-rv { transition: opacity .6s var(--t4-ease-out) var(--t4fx-d, 0s), transform .7s var(--t4-ease-out) var(--t4fx-d, 0s); }
.t4fx-rv:not(.is-in) { opacity: 0; transform: translateY(12px); }
}
/* t4fx.split: caratteri e parole (le parole non si spezzano a metà) */
.t4fx-split { display: inline; }
.t4fx-w { display: inline-block; white-space: nowrap; }
.t4fx-c { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
.t4fx-split-rv .t4fx-c, .t4fx-split-rv.is-words .t4fx-w {
transition: opacity .5s var(--t4-ease-out), transform .7s var(--t4-ease-out);
transition-delay: calc(var(--i, 0) * 18ms);
}
.t4fx-split-rv:not(.is-in) .t4fx-c, .t4fx-split-rv.is-words:not(.is-in) .t4fx-w { opacity: 0; transform: translateY(.45em); }
}
/* --------------------------------------------------------------------------
t4fx.odometer: ogni cifra è una finestra; dentro, un rullo 0-9 0-9 in
assoluto sopra la cifra vera (invisibile), che tiene larghezza e linea di
base. clip-path e non overflow: overflow sposterebbe la linea di base.
-------------------------------------------------------------------------- */
.t4fx-odo { display: inline-block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t4fx-odo__d { clip-path: inset(0 -.2em); display: inline-block; position: relative; }
.t4fx-odo__g { visibility: hidden; }
.t4fx-odo__r { height: 100%; left: 0; position: absolute; right: 0; text-align: center; top: 0; }
.t4fx-odo__r > span { display: block; height: 100%; }
.t4fx-odo__r.is-anim { transition: transform 1s cubic-bezier(.25, 1, .5, 1); } /* power3.out */
.t4fx-count { font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------------------
t4fx.wheel: ruota dei numeri (Swiper verticale, 5 righe visibili).
Opacità e spostamento delle righe li calcola il JS dalla distanza dal centro.
-------------------------------------------------------------------------- */
.t4fx-wheel { --t4fx-wheel-row: clamp(56px, 5vw, 92px); position: relative; }
.t4fx-wheel__list { list-style: none; margin: 0; padding: 0; }
.t4fx-wheel.swiper { height: calc(var(--t4fx-wheel-row) * var(--t4fx-wheel-rows, 5)); overflow: hidden; }
.t4fx-wheel.swiper .swiper-slide { align-items: center; display: flex; height: var(--t4fx-wheel-row); transition-property: opacity, transform; }
.t4fx-wheel.is-static .t4fx-wheel__list > li + li { margin-top: 12px; }
/* --------------------------------------------------------------------------
t4fx.steps: step con colonna visual fissa (is-stage) o impilati (is-stack).
I visual si sovrappongono nell'ordine dei passi: entrando, quello nuovo
sfuma sopra il precedente (che resta visibile sotto); tornando indietro,
quello attivo sfuma e lascia vedere il precedente.
-------------------------------------------------------------------------- */
.t4fx-steps.is-stage {
column-gap: var(--t4fx-steps-gap, clamp(24px, 4vw, 72px));
display: grid;
grid-template-columns: var(--t4fx-steps-cols, minmax(0, 4fr) minmax(0, 6fr));
}
.t4fx-steps.is-stage > [data-step] {
display: flex;
flex-direction: column;
grid-column: 1;
justify-content: center;
min-height: var(--t4fx-step-h, 100vh);
min-width: 0;
}
.t4fx-steps__stage { grid-column: 2; min-width: 0; position: relative; }
.t4fx-steps__frame {
aspect-ratio: var(--t4fx-steps-ratio, 1 / 1);
margin-inline: auto;
max-height: calc(100vh - 200px);
max-width: 100%;
position: relative;
}
.t4fx-steps__frame > [data-step-visual] { inset: 0; margin: 0; opacity: 0; position: absolute; transition: opacity .5s var(--t4-ease); }
.t4fx-steps__frame > [data-step-visual][data-status="before"],
.t4fx-steps__frame > [data-step-visual][data-status="active"] { opacity: 1; }
.t4fx-steps__dots { display: flex; gap: 4px; justify-content: center; margin-top: 16px; }
.t4fx-steps__dot { align-items: center; background: none; border: 0; border-radius: 50%; color: inherit; cursor: pointer; display: grid; height: 40px; justify-items: center; padding: 0; width: 40px; }
.t4fx-steps__dot::before { background: currentColor; border-radius: 50%; content: ""; height: 6px; opacity: .28; transition: opacity var(--t4-dur) var(--t4-ease), transform var(--t4-dur) var(--t4-ease), background-color var(--t4-dur) var(--t4-ease); width: 6px; }
.t4fx-steps__dot:hover::before { opacity: .6; }
.t4fx-steps__dot[aria-current]::before { background: var(--t4-blue); opacity: 1; transform: scale(1.35); }
[data-t4-theme="dark"] .t4fx-steps__dot[aria-current]::before { background: var(--t4-sky); }
.t4fx-steps__dot:focus-visible { outline: 2px solid var(--t4-blue); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
.t4fx-steps__frame > [data-step-visual], .t4fx-steps__dot::before { transition: none; }
}
/* --------------------------------------------------------------------------
t4fx.ink: copia del titolo col gradiente delle testate, rivelata da un
cerchio che sale dal basso (--t4fx-ink da 0% a 150%, legato allo scroll)
-------------------------------------------------------------------------- */
.t4fx-ink { position: relative; }
.t4fx-ink__copy {
-webkit-background-clip: text;
background-clip: text;
background-image: var(--t4-grad);
box-sizing: border-box;
clip-path: circle(var(--t4fx-ink, 0%) at 50% 120%);
color: transparent;
inset: 0;
padding: inherit;
pointer-events: none;
position: absolute;
-webkit-text-fill-color: transparent;
}
/* t4fx.hint: "Scorri" che pulsa sopra la cascata di chevron */
.t4fx-hint {
align-items: center;
display: inline-flex;
flex-direction: column;
font-family: var(--t4-mono);
font-size: 11px;
gap: 10px;
letter-spacing: .12em;
text-transform: uppercase;
transition: opacity .3s linear;
}
@media (prefers-reduced-motion: no-preference) {
.t4fx-hint { animation: t4fx-fade .3s linear both; }
.t4fx-hint__label { animation: t4fx-pulse 2s ease-in-out infinite; }
}
@keyframes t4fx-fade { from { opacity: 0; } }
@keyframes t4fx-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* t4fx.ruler: righello di tacche con contatore 01/50 */
.t4fx-ruler { align-items: center; color: var(--t4-sky); display: flex; gap: 12px; }
.t4fx-ruler__ticks { align-items: flex-end; display: flex; gap: 4px; height: 14px; }
.t4fx-ruler__ticks i { background: currentColor; display: block; flex: 0 0 1px; height: 6px; opacity: .3; }
.t4fx-ruler__ticks i:nth-child(5n + 1) { height: 10px; }
.t4fx-ruler__ticks i:nth-child(10n + 1) { height: 14px; }
.t4fx-ruler__ticks i.is-on { opacity: 1; }
.t4fx-ruler__count { font-family: var(--t4-mono); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .08em; white-space: nowrap; }
.t4fx-ruler--v { align-items: flex-start; flex-direction: column; }
.t4fx-ruler--v .t4fx-ruler__ticks { align-items: flex-start; flex-direction: column; gap: 6px; height: auto; }
.t4fx-ruler--v .t4fx-ruler__ticks i { flex: 0 0 1px; height: 1px; width: 6px; }
.t4fx-ruler--v .t4fx-ruler__ticks i:nth-child(5n + 1) { width: 10px; }
.t4fx-ruler--v .t4fx-ruler__ticks i:nth-child(10n + 1) { width: 14px; }
/* t4fx.marquee: nastro infinito trascinabile (con "riduci movimento": fila scorrevole) */
.t4fx-marquee { cursor: grab; overflow: hidden; position: relative; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.t4fx-marquee.is-drag { cursor: grabbing; }
.t4fx-marquee__track { display: flex; gap: var(--t4fx-marquee-gap, 16px); width: max-content; will-change: transform; }
.t4fx-marquee__track > * { flex: 0 0 auto; }
.t4fx-marquee img { -webkit-user-drag: none; }
.t4fx-marquee.is-static { cursor: auto; overflow-x: auto; scroll-snap-type: x proximity; touch-action: auto; }
.t4fx-marquee.is-static .t4fx-marquee__track > * { scroll-snap-align: start; }
/* Pausa del movimento automatico (nastro e ruota, WCAG 2.2.2): vetro scuro
come le frecce sopra le foto, 40px di bersaglio. Nel nastro sta
nell'angolo in basso a destra; sotto la ruota, allineato ai numeri
(dentro la ruota la maschera in dissolvenza lo sbiadirebbe). */
.t4fx-play {
-webkit-appearance: none;
appearance: none;
align-items: center;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: rgba(14, 20, 48, .58);
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: inline-flex;
height: 40px;
justify-content: center;
padding: 0;
transition: background-color var(--t4-dur) var(--t4-ease), border-color var(--t4-dur) var(--t4-ease);
width: 40px;
}
.t4fx-play:hover { background: rgba(14, 20, 48, .82); border-color: rgba(255, 255, 255, .55); }
.t4fx-play:focus-visible { outline: 2px solid var(--t4-sky); outline-offset: 3px; }
.t4fx-play svg { display: block; flex: none; }
.t4fx-marquee > .t4fx-play { bottom: 12px; cursor: pointer; position: absolute; right: 16px; z-index: 2; }
.t4fx-wheel + .t4fx-play { display: flex; margin-top: 12px; }
/* t4fx.tilt: inclinazione (max 6°) + riflesso che segue il puntatore */
.t4fx-tilt { transform: perspective(900px) rotateX(var(--t4fx-rx, 0deg)) rotateY(var(--t4fx-ry, 0deg)); transition: transform .6s var(--t4-ease-out); }
.t4fx-tilt.is-tilting { transition: transform .12s linear; }
.t4fx-tilt__glare {
background: radial-gradient(circle at var(--t4fx-gx, 50%) var(--t4fx-gy, 50%), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%);
border-radius: inherit;
inset: 0;
mix-blend-mode: soft-light;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity .4s linear;
z-index: 2;
}
.t4fx-tilt.is-tilting .t4fx-tilt__glare { opacity: 1; }
/* --------------------------------------------------------------------------
t4fx.sheet: pannello modale su