/* ============================================================================
LOADER col LOGO della skin in trasparenza (richiesta Dav/Angelo, urgente test).
Overlay dei caricamenti parziali: mostra il logo della skin corrente in filigrana
con un pulse discreto. Tema-agnostico: fondo = token della skin. CSS via .
Il LOGO per-skin arriva dal branding (`logoUrl`) → messo come var --tb-logo dal
markup/JS di B/M; se manca, fallback al wordmark testuale (`brand`) o allo spinner.
Design D, 22-07-2026.
========================================================================== */
.tb-loader{
position:absolute;inset:0;z-index:40;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
background:var(--tb-loader-bg, var(--navy-0, #052033)); /* il fondo della skin */
color:var(--tb-loader-ink, var(--mute, #9fbdd2));
}
/* overlay a schermo: quando copre l'app/pagina intera invece della sola colonna.
z-index alto: al PRIMO caricamento deve coprire TUTTO (header, menu, contenuto) —
così si vede prima il loader e il sito appare solo a pronto (Dav 23/07). Il markup
iniziale (`
` subito dentro ) + la rimozione al
`load`/pronto li mette B nella shell; qui il velo che copre. */
.tb-loader.is-fixed{position:fixed;z-index:99999}
/* si dissolve quando B/M lo tolgono: aggiungi .is-hiding e rimuovi a transizione finita */
.tb-loader{transition:opacity .25s ease}
.tb-loader.is-hiding{opacity:0;pointer-events:none}
/* IL LOGO in trasparenza. B/M passano l'immagine con:
style="--tb-logo:url('')"
Se --tb-logo non è impostata, resta il fallback (wordmark) qui sotto. */
.tb-loader__logo{
width:min(46%, 180px);aspect-ratio:2/1;max-height:96px;
background:var(--tb-logo) center/contain no-repeat;
opacity:.14; /* filigrana */
animation:tb-logo-pulse 1.8s ease-in-out infinite;
}
@keyframes tb-logo-pulse{
0%,100%{opacity:.10;transform:scale(.985)}
50% {opacity:.22;transform:scale(1)}
}
/* fallback WORDMARK quando la skin non ha logoUrl: mettere .no-logo sul .tb-loader
e il testo del brand dentro .tb-loader__word (lo riempie B col `brand`). */
.tb-loader.no-logo .tb-loader__logo{display:none}
.tb-loader__word{
display:none;font:800 26px/1 system-ui;letter-spacing:.03em;
color:var(--tb-loader-ink, #9fbdd2);opacity:.16;
animation:tb-logo-pulse 1.8s ease-in-out infinite;
}
.tb-loader.no-logo .tb-loader__word{display:block}
/* piccolo indicatore di attività sotto il logo (arco che gira, accento della skin) */
.tb-loader__spin{
width:26px;height:26px;border-radius:50%;
border:2.5px solid var(--tb-loader-line, rgba(255,255,255,.12));
border-top-color:var(--tb-loader-accent, var(--or, #F5B301));
animation:tb-spin .8s linear infinite;
}
@keyframes tb-spin{to{transform:rotate(360deg)}}
.tb-loader__msg{font-size:12px;opacity:.7}
@media (prefers-reduced-motion:reduce){
.tb-loader__logo,.tb-loader__word,.tb-loader__spin{animation:none}
.tb-loader__logo{opacity:.16}
}