/* stile-tema-scuro — foglio di stile di RitMo Coach. Stava dentro coach.html (blocco «tema-scuro-coach-suite»). */ /* ===== RitMo Coach — tema scuro (sovrascrive le regole precedenti) ===== */ :root{ --ink:#ECECEF; --gray:#9A9AA2; --line:rgba(255,255,255,.10); --soft:var(--scheda); --card:var(--scheda); --bg:#131316; --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 4px 14px rgba(0,0,0,.45); --e3:0 14px 38px rgba(0,0,0,.55); } html,body{ background:var(--bg); color:var(--ink); } .app.on{ background:var(--bg); } /* superfici */ .card,.card.hero-card{ background:var(--card); border:1px solid var(--line); box-shadow:0 10px 26px rgba(0,0,0,.35); color:var(--ink); } .cl,.chead,.todo,.setrow,.adem,.bx,.modal,.sheet,.mbox{ color:var(--ink); } .setrow,.todo,.adem{ background:transparent; } .cl{ background:var(--card); border:1px solid var(--line); } .bday-h button{ background:var(--campo); color:var(--ink); } /* campi */ input,select,textarea{ background:var(--campo); color:var(--ink); border:1px solid var(--line); } input::placeholder,textarea::placeholder{ color:var(--grigio-tenue); } .bx input,.bx select{ background:var(--campo); color:var(--ink); } /* bottoni chiari → scuri */ .btn.ghost{ background:var(--campo); border:1px solid var(--line); color:var(--ink); } /* finestre */ .modal,.sheet,.mbox,.mcard,.mwrap>div{ background:var(--scheda); color:var(--ink); border-color:var(--line); } /* pillola titolo */ .ph .pill-t{ background:var(--card); border:1px solid var(--line); color:var(--ink); } .hbtn{ background:var(--card); border:1px solid var(--line); color:var(--ink); } /* testi secondari */ .lbl,.st i,.meta,.chip-n{ color:var(--gray); } /* il titolo di sottosezione non e' un testo secondario: e' un titolo */ .sec-t{ color:var(--inchiostro); } /* ===== barra laterale in stile prototipo ===== */ .side{ background:var(--nero-pece); border-right:1px solid var(--line); padding:0; width:248px; flex:0 0 248px; } .side .brand{ display:flex; align-items:center; gap:10px; padding:18px 16px 14px; border-bottom:1px solid color-mix(in srgb, var(--inchiostro) 8%, transparent); color:var(--ink); } .side .brand img{ width:34px; height:34px; border-radius:9px; } .side .brand img[hidden]{ display:none; } /* il nostro segno: niente fondo, niente angoli, e il colore del tema */ .side .brand .br-spira{ flex:0 0 36px; width:36px; height:36px; display:block; color:var(--accento); filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accento) 28%, transparent)); } .side .brand.col-logo .br-spira{ display:none; } .side .brand.col-logo img{ display:block; } .side .brand div{ font-size:14px; font-weight:800; letter-spacing:-.2px; } #brandNome{ display:block; } .side .brand span{ display:block; font-size:11px; color:var(--grigio); font-weight:600; } .side nav{ padding:12px 10px; display:flex; flex-direction:column; gap:2px; } .side nav button{ display:flex; align-items:center; gap:11px; padding:10px 12px; border:0; border-radius:10px; background:none; color:var(--inchiostro); font-size:13.5px; font-weight:600; text-align:left; cursor:pointer; position:relative; transition:background 180ms; width:100%; } .side nav button svg{ width:17px; height:17px; flex:0 0 17px; opacity:.75; } .side nav button:hover{ background:color-mix(in srgb, var(--inchiostro) 6%, transparent); } /* la voce attiva: il testo resta l'inchiostro pieno e l'accento fa da segnale sul fondo e sul filetto. Col colore d'accento come testo sopra un fondo già tinto d'accento, sui temi chiari il contrasto scendeva sotto la soglia. */ /* 5 settembre 2026: il fondo tinto d'accento è diventato una superficie rialzata neutra. La voce attiva si riconosce lo stesso — dal filetto di neon a sinistra, dal fondo più chiaro e dal testo pieno — ma la barra non ha più una macchia verde permanente addosso. */ .side nav button.on{ background:var(--rialzo); color:var(--accento); font-weight:700; } /* la voce dove sei: rettangolo grigio col filetto di neon a sinistra, e dentro tutto verde — icona, scritta e conteggio. Jacopo, 5 settembre. */ .side nav button.on .badge{ color:var(--accento); border-color:color-mix(in srgb, var(--accento) 42%, transparent); } .side nav button.on::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--orange); } .side nav button.on svg{ opacity:1; color:var(--accento); } .side .nav-label{ font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--grigio); padding:12px 10px 6px; font-weight:700; } .side .side-foot{ margin-top:auto; padding:12px 16px; border-top:1px solid color-mix(in srgb, var(--inchiostro) 8%, transparent); font-size:11px; color:var(--grigio); } .side .side-foot b{ color:var(--inchiostro); font-weight:600; display:block; } /* quando il server non risponde lo stato si vede: ambra, non rosso — non e' un guasto, e' un «adesso non ti sto sentendo» */ .side .side-foot .staccato{ color:var(--ambra, #C9922B); } /* ---- Nome e logo ---- */ .fisso{ display:flex; align-items:center; gap:10px; margin:8px 0 4px; padding:10px 13px; border-radius:12px; background:var(--campo); border:1px dashed var(--filo); } .fisso span{ font-size:12px; color:var(--grigio); } .fisso b{ font-size:13.5px; font-weight:800; color:var(--inchiostro); } .marchio-scelta{ display:flex; align-items:flex-start; gap:14px; margin-top:6px; } .ms-ant{ flex:0 0 62px; width:62px; height:62px; border-radius:50%; overflow:hidden; background:var(--accento); color:var(--su-accento); display:grid; place-items:center; font-size:20px; font-weight:800; letter-spacing:-.02em; } /* il file salvato e' gia' un quadrato con il logo intero dentro: qui non si taglia altro */ .ms-ant img{ width:100%; height:100%; object-fit:contain; display:block; } /* QUANDO DENTRO C'E' IL NOSTRO SEGNO il tondo diventa scuro. Prima era verde pieno con la girandola verde sopra: verde su verde, non si vedeva niente e sembrava una macchia. Il segno ha la sua sfumatura, e il fondo scuro è lo stesso dell'icona dell'app: così l'anteprima mostra davvero il marchio che stai per rimettere. */ .ms-ant.nostro{ background:#0A0C0B; box-shadow:inset 0 0 0 1px var(--filo); } .ms-ant.nostro svg{ width:78%; height:78%; display:block; } .ms-c{ flex:1; min-width:0; } .ms-c input[type=text], .ms-c input:not([type]){ width:110px; } .ms-tasti{ display:flex; gap:8px; flex-wrap:wrap; margin-top:9px; } .ms-tasti .btn{ font-size:13px; padding:8px 13px; } /* ---- i gruppi delle impostazioni, che si aprono e si chiudono ---- */ .gruppo-set{ background:var(--scheda); border-radius:20px; box-shadow:var(--e3); margin-bottom:12px; overflow:hidden; } .gruppo-set > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:15px 18px; } .gruppo-set > summary::-webkit-details-marker{ display:none; } /* i gruppi delle impostazioni avevano il titolo nudo: adesso portano la loro icona, come le righe che contengono */ .gruppo-set .gs-i{ flex:0 0 34px; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb, var(--accento) 16%, transparent); color:var(--accento-testo); } .gruppo-set .gs-i svg{ width:19px; height:19px; } .gruppo-set .gs-t{ min-width:0; } .gruppo-set .gs-t b{ display:block; font-size:14.5px; font-weight:800; line-height:1.25; } .gruppo-set .gs-t i{ display:block; font-style:normal; font-size:11.5px; color:var(--grigio); margin-top:2px; } .gruppo-set > summary::after{ content:"\203A"; margin-left:auto; flex:0 0 auto; font-size:19px; color:var(--grigio); transition:transform var(--fast, .18s) ease; } .gruppo-set[open] > summary{ border-bottom:1px solid var(--soft, var(--filo)); } .gruppo-set[open] > summary::after{ transform:rotate(90deg); } /* dentro un gruppo le righe sono già nella carta del gruppo: la cornice doppia faceva sembrare una scatola dentro una scatola */ .gruppo-set .setlist{ margin:0; background:none; box-shadow:none; border:0; border-radius:0; } .gruppo-set .setrow{ background:none; backdrop-filter:none; -webkit-backdrop-filter:none; } .gruppo-set .setrow:first-child{ border-top:0; } /* «hidden» da solo perde contro display:flex — è la stessa trappola già pagata con la fascia dell'amministratore. Senza questa riga la voce del banco di IAcopo, che è nascosta di suo, si vedeva eccome. */ .setrow[hidden]{ display:none !important; } /* sul telefono il valore a destra spingeva la descrizione a capo tre volte: lì sotto ci va soltanto una riga, e se non ci sta si taglia */ @media (max-width:560px){ /* il valore a destra: al 36% «Colleoni Coaching» veniva tagliato con mezza riga libera a sinistra. Il titolo della riga e' sempre corto, lo spazio c'e'. */ .gruppo-set .setrow .sv{ max-width:46%; } .gruppo-set .setrow .st i{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } .esci-fuori{ margin-top:14px; } /* rifiniture */ .todo .ic,.setrow .si,.adem .dot{ background:var(--campo) !important; color:var(--ink); } .todo button,.setrow,.cl button{ background:var(--campo); color:var(--ink); border:1px solid var(--line); } .chip-ok{ background:color-mix(in srgb, var(--accento) 18%, transparent); color:var(--accento-testo); } .chip-n{ background:color-mix(in srgb, var(--inchiostro) 7%, transparent); color:var(--gray); } .kick{ background:color-mix(in srgb, var(--accento) 16%, transparent); color:var(--accento-testo); } .side .brand img{ display:none; } .side .brand::before{ content:attr(data-segno); width:34px; height:34px; border-radius:9px; background:var(--orange); color:var(--su-accento); display:grid; place-items:center; font-weight:800; font-size:13px; letter-spacing:-.5px; flex:0 0 34px; background-size:contain; background-repeat:no-repeat; background-position:center; overflow:hidden; } /* Con un'immagine — il logo del trainer, o il segno di RitMo Coach finché non ne ha messo uno suo — il bollo diventa quella, e le lettere spariscono. Lo sfondo si toglie: il segno ha già il suo. */ .side .brand.col-logo::before{ content:""; background-color:var(--campo); background-image:var(--logo); } /* IL BOLLO DELLE INIZIALI NON VALE PER IL MARCHIO DI CASA. Questo ::before disegna un quadratino colorato con dentro «CS», e stava accanto alla spirale: due marchi uno di fianco all'altro. E' la scatola dei trainer — quella che maschera il logo caricato — e col nostro segno non ci va. Compare solo quando il trainer ha messo qualcosa di suo. */ .side .brand:not(.col-logo):not(.col-iniziali)::before{ display:none; } /* niente fondo trasparente: un logo scuro su una pagina scura diventava una macchia nera. Sotto ci sta sempre una piastrella definita. */ .ph .mt-seg.col-logo{ color:transparent; background-color:var(--campo); background-image:var(--logo); } .login .logo{ display:none; } .side nav .lbl-nav{ flex:1; } /* 5 settembre 2026: il conteggio è un dato, non un allarme. Era una pastiglia di neon pieno accanto a «Clienti»: gridava quanto una notifica, per dire una cosa che non è mai urgente. Adesso è un numero nel carattere dei dati, dentro un rettangolo di contorno. */ .side nav .badge{ margin-left:auto; background:none; color:var(--grigio); font-family:var(--f-mono); font-size:10.5px; font-weight:500; border:1px solid var(--filo); border-radius:3px; padding:1px 6px; line-height:1.5; } .side nav .badge:empty{ display:none; } .ph{ display:flex; align-items:center; gap:12px; } /* in alto il marchio, non il nome della sezione: quello lo dice già la barra in basso, e ripeterlo era la stessa informazione due volte */ .ph .marchio-top{ display:flex; align-items:center; gap:11px; min-width:0; } .ph .mt-testo{ min-width:0; } .ph .mt-sotto{ font-style:normal; } .ph .mt-seg{ flex:0 0 42px; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--accento); color:var(--su-accento); overflow:hidden; background-size:contain; background-repeat:no-repeat; background-position:center; font-size:12px; font-weight:800; letter-spacing:-.02em; } /* IL NOSTRO MARCHIO NON STA DENTRO IL RETTANGOLO. Jacopo, 26 agosto: «il rettangolo e' per i clienti, e' la dimensione dove poi verra' mascherato il loro logo che caricano. Noi invece usiamo il logo libero, quello in PNG trasparente, tanto il fondo e' scuro». Giusto: il tondo/rettangolo colorato e' una MASCHERA, e serve a far stare insieme loghi di forme diverse caricati da gente diversa. Il nostro segno una maschera non ce l'ha mai avuta — e chiuderlo dentro la scatola dei clienti lo fa sembrare uno dei tanti. Quando e' il nostro: niente scatola, niente fondo, solo la spirale, e prende il colore del tema. */ .ph .mt-seg:has(.mt-spira){ background:none; border-radius:0; overflow:visible; } .ph .mt-seg .mt-spira{ width:100%; height:100%; display:block; color:var(--accento); filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accento) 26%, transparent)); } /* il nome del trainer e "Gestionale" sotto: era una riga sola e piccola, adesso e' la firma della pagina */ .ph .mt-nome{ display:block; font-size:19px; font-weight:800; letter-spacing:-.025em; line-height:1.1; color:var(--inchiostro); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ph .mt-sotto{ display:block; font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--grigio); margin-top:1px; } /* sul computer il marchio sta già nella colonna: qui sarebbe un doppione */ @media(min-width:901px){ .ph .marchio-top{ display:none; } } .ph .cerca-top{ margin-left:auto; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13px; color:var(--gray); min-width:170px; } .ph .avatar-top{ width:32px; height:32px; border-radius:50%; background:var(--campo); color:var(--inchiostro); display:grid; place-items:center; font-size:12px; font-weight:700; flex:0 0 32px; } @media(max-width:900px){ .ph .cerca-top{ display:none; } } /* La ricerca cliente ha senso dove ci sono i clienti. In Calendario o in Pagamenti era un tasto che non serviva a niente e rubava spazio. 8 settembre 2026, giro delle schermate: nell'unica sezione dove restava — Clienti — c'è già la casella di ricerca della pagina, tre centimetri più sotto. Due caselle «Cerca cliente…» una sopra l'altra sono un doppione: resta quella della pagina. */ .ph .cerca-top{ display:none; } /* L'assistente sta qui, in alto a destra, sulla riga del marchio: prima era una pallina che galleggiava sopra il menù in basso e copriva i tasti. */ /* bollo nero, segno verde acceso: si vede subito che è lui, anche col tema chiaro, e non si confonde con gli altri tasti della riga */ .ph .tasto-ai{ flex:0 0 44px; width:44px; height:44px; border-radius:50%; padding:0; background:transparent; border:0; color:color-mix(in srgb, var(--accento) 92%, #FFFFFF); display:grid; place-items:center; cursor:pointer; font-family:inherit; box-shadow:none; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } /* IL SEGNO PIENO. Niente cornice attorno: l'anello esterno del marchio e' gia' la cornice, e il tondo nero resta a fare da fondo dentro le spire. */ .ph .tasto-ai svg{ width:44px; height:44px; display:block; /* 6 settembre: l'ombra verde era al 65% e faceva da lampadina in cima a ogni schermata. Il segno si vede benissimo lo stesso. */ filter:drop-shadow(0 0 4px color-mix(in srgb, var(--accento) 30%, transparent)); } .ph .tasto-ai:active{ transform:scale(.93); } /* GLI ANELLI, gli stessi del nucleo in attesa. Escono dal centro del segno e svaniscono: è il modo in cui l'assistente dice «sono qui e sono acceso», e adesso lo dice uguale nei due posti dove si vede. */ .ph .tasto-ai .ta-onda{ position:absolute; left:50%; top:50%; width:44px; height:44px; margin:0; border-radius:50%; border:1px solid var(--accento); opacity:0; pointer-events:none; z-index:-1; transform:translate(-50%,-50%) scale(.85); animation:taOnda 4.2s linear infinite; } .ph .tasto-ai .ta-onda:nth-of-type(2){ animation-delay:1.4s } .ph .tasto-ai .ta-onda:nth-of-type(3){ animation-delay:2.8s } @keyframes taOnda{ 0% { transform:translate(-50%,-50%) scale(.85); opacity:0 } 22% { opacity:.34 } 100% { transform:translate(-50%,-50%) scale(1.9); opacity:0 } } @media (prefers-reduced-motion: reduce){ .ph .tasto-ai .ta-onda{ animation:none; opacity:0 } } /* IL RESPIRO. Il bollo pulsa piano di verde: si vede che è lì, sveglio, ad aspettare che gli si chieda qualcosa. Si ferma quando l'assistente è aperto — a quel punto non deve più chiamare nessuno. */ .ph .tasto-ai::after{ content:""; position:absolute; inset:-3px; border-radius:50%; pointer-events:none; box-shadow:0 0 0 0 color-mix(in srgb, var(--accento) 55%, transparent); animation:respiroAI 2.9s cubic-bezier(.4,0,.6,1) infinite; } .ph .tasto-ai{ position:relative; } .ph .tasto-ai svg{ animation:respiroSegno 2.9s cubic-bezier(.4,0,.6,1) infinite; } @keyframes respiroAI{ 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accento) 50%, transparent); opacity:.9 } 70% { box-shadow:0 0 0 9px color-mix(in srgb, var(--accento) 0%, transparent); opacity:0 } 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--accento) 0%, transparent); opacity:0 } } /* IL RESPIRO DEL SEGNO. Prima cambiava solo il bagliore, e il segno restava fermo: sembrava una luce che va e viene, non una cosa viva. Adesso rientra UNA volta sola — un raccoglimento — e poi si riapre con un piccolo slancio oltre la misura, prima di posarsi. Il bagliore segue il movimento invece di andare per conto suo. (Era in due tempi: Jacopo l'ha voluto piu' semplice.) */ @keyframes respiroSegno{ 0% { transform:scale(1); filter:drop-shadow(0 0 4px color-mix(in srgb, var(--accento) 45%, transparent)) } 42% { transform:scale(.87); filter:drop-shadow(0 0 9px color-mix(in srgb, var(--accento) 80%, transparent)) } 74% { transform:scale(1.04); filter:drop-shadow(0 0 13px color-mix(in srgb, var(--accento) 98%, transparent)) } 100% { transform:scale(1); filter:drop-shadow(0 0 4px color-mix(in srgb, var(--accento) 45%, transparent)) } } /* QUANDO STA PENSANDO il segno gira. Piano: venti secondi per un giro intero e' quasi impercettibile, ma basta a dire «ci sto lavorando» senza rubare l'occhio a chi intanto legge altro. Il respiro continua sotto, e i due movimenti non litigano perche' stanno su due elementi diversi. */ @keyframes giraSegno{ to{ transform:rotate(360deg) } } body.ai-pensa #aiHead .aidot{ animation:giraSegno 6s linear infinite } @media (prefers-reduced-motion: reduce){ body.ai-pensa #aiHead .aidot, body.ai-pensa .ph .tasto-ai, body.ai-pensa .bdet-ic{ animation:none } } body.assistente-aperto .ph .tasto-ai::after, body.assistente-aperto .ph .tasto-ai svg{ animation:none; } @media (prefers-reduced-motion: reduce){ .ph .tasto-ai::after, .ph .tasto-ai svg{ animation:none; } } @media(hover:hover){ .ph .tasto-ai:hover{ box-shadow:0 0 22px -2px color-mix(in srgb, var(--accento) 80%, transparent); } } /* TEMA CHIARO: un tondo nero su una pagina chiara e' una macchia. Diventa verde col segno scuro dentro — la stessa faccia dell'icona dell'app. */ html.tema-chiaro .ph .tasto-ai, html.tema-chiaro #aiHead .aidot{ background:var(--accento); color:var(--su-accento); box-shadow:0 0 16px -6px color-mix(in srgb, var(--accento) 70%, transparent); } html.tema-chiaro .ph .tasto-ai svg, html.tema-chiaro #aiHead .aidot .segnoAI{ filter:none; } /* con la ricerca nascosta (telefono) è lui a spingersi a destra */ @media(max-width:900px){ .ph .tasto-ai{ margin-left:auto; } } /* L'ASSISTENTE NON SCORRE VIA. Sta in alto a destra e ci resta, come la barra delle sezioni sta in basso: e' il tasto che si preme di piu' e non deve costringere a risalire in cima per trovarlo. Al suo posto nella riga resta un buco della stessa misura, se no il marchio scivola a destra quando il tasto esce dal flusso. */ .ph .tasto-ai{ position:fixed; top:calc(10px + var(--sat)); right:14px; z-index:55; margin-left:0; } .ph .posto-ai{ flex:0 0 38px; width:38px; height:38px; margin-left:auto; } @media(min-width:901px){ .ph .posto-ai{ margin-left:0; } } body.assistente-aperto .ph .tasto-ai{ display:none; }