/* ===================================================================== Tema Teleimpianti — materia comune al gestionale e all'app squadre. Qui non ci sono colori del marchio né regole di layout: ci sono la profondità (ombre a due strati, luce dall'alto), il movimento e le utilità tridimensionali. I due fogli che seguono — public/css/app.css e mobile/style.css — dichiarano la propria tavolozza e usano questi mattoni, così le due applicazioni si somigliano davvero invece di assomigliarsi per caso. Il tema scuro si attiva con data-tema="scuro" sull'elemento : l'app squadre ce l'ha sempre, il gestionale lo commuta dal pulsante. ===================================================================== */ :root { /* --- Luce e profondità ------------------------------------------- Ogni livello somma un'ombra ampia e morbida (la luce ambientale) a una stretta e vicina (il contatto con il piano): è la coppia che fa leggere un rilievo come reale invece che come una macchia grigia. */ --luce-alto: inset 0 1px 0 rgba(255, 255, 255, .72); --luce-basso: inset 0 -1px 0 rgba(15, 23, 42, .05); --quota-1: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 6px -2px rgba(15, 23, 42, .10); --quota-2: 0 2px 4px rgba(15, 23, 42, .06), 0 8px 18px -6px rgba(15, 23, 42, .16); --quota-3: 0 4px 8px rgba(15, 23, 42, .07), 0 18px 36px -12px rgba(15, 23, 42, .22); --quota-4: 0 8px 16px rgba(15, 23, 42, .09), 0 36px 64px -20px rgba(15, 23, 42, .30); --alone: 0 0 0 1px rgba(15, 23, 42, .04); /* Vetro: fondo semitrasparente per barre e fogli sovrapposti. */ --vetro-fondo: rgba(255, 255, 255, .74); --vetro-bordo: rgba(255, 255, 255, .65); --vetro-sfocatura: saturate(180%) blur(14px); /* Movimento: una curva per le transizioni, una molla per gli ingressi. */ --curva: cubic-bezier(.2, .8, .3, 1); --molla: cubic-bezier(.22, 1.2, .36, 1); --rapido: .14s; --medio: .24s; --prospettiva: 900px; } [data-tema="scuro"] { /* Al buio la luce non arriva più dall'alto come riflesso bianco pieno: si abbassa molto, mentre le ombre diventano nere e più profonde. */ --luce-alto: inset 0 1px 0 rgba(255, 255, 255, .07); --luce-basso: inset 0 -1px 0 rgba(0, 0, 0, .35); --quota-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px -3px rgba(0, 0, 0, .5); --quota-2: 0 2px 6px rgba(0, 0, 0, .45), 0 10px 22px -8px rgba(0, 0, 0, .6); --quota-3: 0 6px 14px rgba(0, 0, 0, .5), 0 22px 44px -14px rgba(0, 0, 0, .7); --quota-4: 0 10px 22px rgba(0, 0, 0, .55), 0 44px 72px -24px rgba(0, 0, 0, .8); --alone: 0 0 0 1px rgba(255, 255, 255, .05); --vetro-fondo: rgba(13, 20, 38, .72); --vetro-bordo: rgba(255, 255, 255, .08); } /* ===================== SUPERFICI ===================== */ /* Un piano staccato dal fondo: ombra a due strati e filo di luce in cima. */ .rilievo { box-shadow: var(--quota-2), var(--luce-alto); } .rilievo-alto { box-shadow: var(--quota-3), var(--luce-alto); } /* Barre e fogli che scorrono sopra il contenuto. */ .vetro { background: var(--vetro-fondo); -webkit-backdrop-filter: var(--vetro-sfocatura); backdrop-filter: var(--vetro-sfocatura); border-color: var(--vetro-bordo); } /* ===================== MOVIMENTO ===================== */ /* Si solleva al passaggio del mouse e si schiaccia quando lo premi: il pulsante racconta con il movimento quello che sta succedendo. */ .sollevabile { transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), border-color var(--rapido) var(--curva); will-change: transform; } .sollevabile:hover { transform: translateY(-2px); box-shadow: var(--quota-3), var(--luce-alto); } .sollevabile:active { transform: translateY(0); box-shadow: var(--quota-1), var(--luce-basso); } /* Inclinazione prospettica: la carta ruota di un grado verso chi guarda. Un grado basta — oltre si legge come un difetto, non come profondità. */ .inclinabile { transform-style: preserve-3d; transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva); } .inclinabile:hover { transform: perspective(var(--prospettiva)) translateY(-3px) rotateX(2deg) scale(1.006); box-shadow: var(--quota-4), var(--luce-alto); } /* Riflesso che attraversa il pulsante quando ci passi sopra. */ .lucido { position: relative; overflow: hidden; isolation: isolate; } .lucido::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%); transform: translateX(-120%); transition: transform .55s var(--curva); pointer-events: none; } .lucido:hover::after { transform: translateX(120%); } /* Ingressi: le cose entrano dal basso, mai di lato a caso. */ @keyframes tema-sali { from { opacity: 0; transform: translate3d(0, 12px, 0); } } @keyframes tema-sfuma { from { opacity: 0; } } .entra { animation: tema-sali var(--medio) var(--molla) both; } /* ===================== FONDALE ===================== */ /* Aurora: due macchie di colore molto sfocate che respirano piano. Serve alle schermate di accesso, dove il fondo è tutto quello che c'è. */ .aurora { position: relative; overflow: hidden; isolation: isolate; } .aurora::before, .aurora::after { content: ''; position: absolute; z-index: -1; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(70px); opacity: .55; animation: tema-respira 22s ease-in-out infinite alternate; } .aurora::before { top: -22vmax; left: -14vmax; background: radial-gradient(circle at 30% 30%, var(--aurora-1, #3b82f6), transparent 65%); } .aurora::after { right: -20vmax; bottom: -26vmax; background: radial-gradient(circle at 70% 70%, var(--aurora-2, #06b6d4), transparent 65%); animation-delay: -11s; } @keyframes tema-respira { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(3vmax, -3vmax, 0) scale(1.12); } } /* ===================== RISPETTO DELLE PREFERENZE ===================== Chi ha chiesto meno animazioni al sistema operativo lo ha fatto per un motivo: qui restano i colori e le ombre, sparisce tutto il movimento. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .sollevabile:hover, .inclinabile:hover { transform: none; } .lucido::after { display: none; } }