/* ========================================================= WARFIT — design system (dark / nero + rosso) ========================================================= */ :root{ /* Font: si cambia da Altro > Impostazioni (data-font sul ) */ --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --bg: #08080A; --bg-2: #0E0E12; --surface: #141419; --surface-2: #1C1C23; --surface-3: #26262F; --line: rgba(255,255,255,.09); --line-soft: rgba(255,255,255,.055); --nav-bg: #0D0D11; /* barra sotto (tabbar) */ --bar-bg: #0A0A0D; /* barra sopra (subbar) */ --txt: #FFFFFF; --txt-2: #A6A6B4; --txt-3: #6E6E7E; --red: #FF2E3E; --red-hot: #FF5561; --red-deep: #A6000F; --red-glow: rgba(255,46,62,.28); --red-soft: rgba(255,46,62,.12); --grad: linear-gradient(135deg,#FF3A45 0%,#C1101C 55%,#8E0511 100%); --grad-flat: linear-gradient(135deg,#FF2E3E,#B00718); --ok: #2FD07A; --warn: #FFB020; --r-s: 12px; --r-m: 16px; --r-l: 22px; --r-xl: 28px; --pad: 16px; --app-w: 520px; /* larghezza del guscio app; la vista desktop la porta a 1120 */ --shadow: 0 18px 40px -22px rgba(0,0,0,.95); --shadow-red: 0 12px 30px -12px var(--red-glow); --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } html[data-font="nunito"] { --font: 'Nunito', system-ui, sans-serif; } /* ===== TEMI (data-theme su ): dark = default (:root) ===== */ html[data-theme="light"]{ --bg:#F4F4F8; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2F2F6; --surface-3:#E7E7EE; --line:rgba(15,15,25,.12); --line-soft:rgba(15,15,25,.07); --nav-bg:#FFFFFF; --bar-bg:#FFFFFF; --txt:#0B0B10; --txt-2:#4E4E59; --txt-3:#8A8A96; --red-soft:rgba(255,46,62,.10); --shadow:0 14px 36px -22px rgba(20,20,35,.30); } html[data-theme="neon"]{ --bg:#040406; --bg-2:#09090D; --surface:#0F0F15; --surface-2:#16161D; --surface-3:#20202A; --red:#FF1F42; --red-hot:#FF546A; --red-glow:rgba(255,42,72,.55); --red-soft:rgba(255,46,62,.16); --grad:linear-gradient(135deg,#FF3A4A 0%,#E00A22 55%,#B00016 100%); --grad-flat:linear-gradient(135deg,#FF2542,#D50820); --shadow-red:0 12px 36px -8px rgba(255,42,72,.6); --nav-bg:#08080C; --bar-bg:#08080C; } html[data-theme="neon"] .h1, html[data-theme="neon"] .h2{ text-shadow:0 0 22px var(--red-glow); } html[data-theme="neon"] .btn:not(.ghost):not(.dark){ box-shadow:0 0 26px -6px var(--red-glow); } html[data-theme="neon"] .code-chip{ box-shadow:0 0 16px -4px var(--red-glow); } html[data-font="outfit"] { --font: 'Outfit', system-ui, sans-serif; } *,*::before,*::after{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; background:var(--bg); color:var(--txt); font-family:var(--font); font-weight:600; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overscroll-behavior-y:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; overflow-x:hidden; /* protezione: nessuno scroll orizzontale mai */ } html{ overflow-x:hidden; } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } button,input,textarea,select{ font-family:inherit; font-weight:inherit; color:inherit; } button{ cursor:pointer; border:0; background:none; } input,textarea,select{ -webkit-appearance:none; } /* niente selezione testo sui tap: evita tap "sporchi"/imprecisi al doppio tocco. input e textarea restano selezionabili (regola dopo). */ button,.trk,.pl-card,.pick-row,.mini-player,.mh-chip,.card.tappable,.rowlink,.chip{ -webkit-user-select:none; user-select:none; } input,textarea{ -webkit-user-select:text; user-select:text; } ::-webkit-scrollbar{ width:0; height:0; } .ic{ width:22px; height:22px; flex:none; } /* ---------- struttura ---------- */ #app{ max-width:var(--app-w); margin:0 auto; min-height:100%; position:relative; background:var(--bg); } .screen{ padding:calc(60px + var(--safe-t)) 0 calc(104px + var(--safe-b)); min-height:100vh; animation:fadeUp .16s ease-out both; } .screen.back{ animation:fadeBack .16s ease-out both; } .screen.instant{ animation:none; } /* aggiornamenti in-place: nessuna animazione, zero flash */ .screen.no-nav{ padding-bottom:calc(28px + var(--safe-b)); } .wrap{ padding:0 var(--pad); contain:layout style; } /* ========================================================= MODALITÀ DESKTOP — tasto "monitor" in topbar, visibile solo su PC (≥1024px). Allarga tutto il guscio insieme via --app-w; sul telefono resta invariato. ========================================================= */ .wide-toggle{ display:none; } @media (min-width:1024px){ .wide-toggle{ display:grid; } } body.wide{ --app-w:min(1780px, 95vw); } /* riempie quasi tutto il 1920; le regole base usano var(--app-w) */ body.wide .wrap{ padding:0 30px; } /* caratteri più piccoli su desktop (effetto ~zoom 80%): l'app è pensata per mobile, qui rimpiccioliamo i titoli/testi grossi così non sembrano ingranditi */ body.wide .page-title .h1{ font-size:30px; } body.wide .h1{ font-size:26px; } body.wide .h2{ font-size:18px; } body.wide .h3{ font-size:15px; } body.wide .input, body.wide textarea.input, body.wide select.input{ height:50px; font-size:15px; } body.wide .btn{ font-size:15px; } body.wide .rowlink .lbl{ font-size:15px; } /* codice coach compatto (chip in alto a destra nella coach home) */ .code-chip{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,46,62,.12); border:1px solid rgba(255,46,62,.4); border-radius:999px; padding:8px 14px; color:var(--red); font-weight:900; } .code-chip .k{ font-size:9.5px; letter-spacing:1.2px; opacity:.85; } .code-chip .v{ font-size:16px; letter-spacing:2px; } .code-chip .ic{ width:15px; height:15px; } .code-chip:active{ transform:scale(.95); } /* liste lunghe (clienti, schede, pannello founder) su 2 colonne in desktop */ body.wide .wide-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 16px; align-content:start; } body.wide .wide-grid > *{ grid-column:1 / -1; } body.wide .wide-grid > .client-card, body.wide .wide-grid > .wo-card{ grid-column:auto; } @keyframes fadeUp{ from{ opacity:0; transform:translate3d(14px,0,0);} to{opacity:1;transform:none;} } @keyframes fadeBack{ from{ opacity:0; transform:translate3d(-14px,0,0);} to{opacity:1;transform:none;} } @keyframes pop{ from{ opacity:0; transform:scale(.96);} to{opacity:1;transform:none;} } /* ---------- topbar ---------- */ .topbar{ position:fixed; top:0; left:0; right:0; z-index:40; max-width:var(--app-w); margin:0 auto; height:calc(60px + var(--safe-t)); padding:var(--safe-t) 12px 0 12px; display:flex; align-items:center; gap:6px; background:var(--grad); box-shadow:0 10px 30px -18px rgba(255,46,62,.9); } .topbar .brand{ display:flex; align-items:center; gap:9px; font-size:23px; font-weight:900; letter-spacing:-.5px; } .topbar .sp{ flex:1; } .topbar .icon-btn{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.13); transition:.18s; } .topbar .icon-btn:active{ transform:scale(.9); } .topbar .icon-btn .dot{ position:absolute; width:8px; height:8px; border-radius:50%; background:#fff; transform:translate(11px,-11px); box-shadow:0 0 0 2px #C1101C; } .logo-mark{ border-radius:12px; } /* topbar interna (schermate di dettaglio) */ .subbar{ position:fixed; top:0; left:0; right:0; z-index:40; max-width:var(--app-w); margin:0 auto; height:calc(60px + var(--safe-t)); padding:var(--safe-t) 12px 0 12px; display:flex; align-items:center; gap:8px; background:var(--bar-bg); border-bottom:1px solid var(--line-soft); } .subbar .t{ font-size:19px; font-weight:900; letter-spacing:-.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .subbar .sp{ flex:1; } .ghost-btn{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:var(--txt); background:var(--surface-2); transition:.18s; } .ghost-btn:active{ transform:scale(.9); } .ghost-btn.danger{ color:var(--red); background:var(--red-soft); } /* ---------- bottom nav ---------- */ .tabbar{ position:fixed; bottom:0; left:0; right:0; z-index:45; max-width:var(--app-w); margin:0 auto; height:calc(72px + var(--safe-b)); padding-bottom:var(--safe-b); display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); background:var(--nav-bg); border-top:1px solid var(--line); } .tabbar button{ min-width:0; } .tabbar button span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .topbar .brand{ min-width:0; flex-shrink:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tabbar button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0 2px; color:var(--txt-3); font-size:10px; font-weight:800; letter-spacing:0; position:relative; transition:.2s; } .tabbar button .ic{ width:23px; height:23px; transition:transform .25s cubic-bezier(.3,1.4,.5,1); } .tabbar button.on{ color:var(--red); } .tabbar button.on .ic{ transform:translateY(-2px) scale(1.08); } .tabbar button.on::before{ content:''; position:absolute; top:0; width:26px; height:3px; border-radius:0 0 4px 4px; background:var(--red); box-shadow:0 0 14px var(--red); } .tabbar button:active{ transform:scale(.93); } /* ---------- tipografia ---------- */ .h1{ font-size:32px; font-weight:900; letter-spacing:-1px; line-height:1.05; } .h2{ font-size:22px; font-weight:900; letter-spacing:-.4px; } .h3{ font-size:17px; font-weight:800; letter-spacing:-.2px; } .muted{ color:var(--txt-2); font-weight:600; } .tiny{ font-size:12.5px; color:var(--txt-3); font-weight:700; } .up{ text-transform:uppercase; letter-spacing:.7px; } .red{ color:var(--red); } .page-title{ display:flex; align-items:center; gap:12px; padding:6px 0 16px; } .page-title .h1{ flex:1; } /* ---------- card ---------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:18px; margin-bottom:14px; box-shadow:var(--shadow); position:relative; overflow:hidden; } .card.tappable{ transition:.18s; } .card.tappable:active{ transform:scale(.985); border-color:rgba(255,46,62,.4); } .card-head{ display:flex; align-items:center; gap:10px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line-soft); } .card-head .ic{ color:var(--red); width:24px; height:24px; } .card-head .h2{ flex:1; } .card-head .chev{ color:var(--txt-3); width:20px; height:20px; } .card-head .count{ background:var(--red); color:#fff; min-width:26px; height:26px; border-radius:9px; display:grid; place-items:center; font-size:14px; font-weight:900; padding:0 7px; box-shadow:var(--shadow-red); } /* ---------- bottoni ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:52px; padding:0 22px; border-radius:16px; font-size:16px; font-weight:900; letter-spacing:-.2px; background:var(--grad-flat); color:#fff; box-shadow:var(--shadow-red); transition:.16s; width:100%; } .btn:active{ transform:scale(.97); filter:brightness(1.1); } .btn.sm{ height:42px; font-size:14px; padding:0 16px; border-radius:13px; width:auto; } .btn.ghost{ background:var(--surface-2); color:var(--txt); box-shadow:none; border:1px solid var(--line); } .btn.outline{ background:transparent; color:var(--red); border:1.6px solid var(--red); box-shadow:none; } .btn.soft{ background:var(--red-soft); color:var(--red); box-shadow:none; } .btn.dark{ background:#000; color:#fff; box-shadow:none; } .btn:disabled{ opacity:.45; } .btn .ic{ width:19px; height:19px; } .chip{ display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px; border-radius:14px; background:var(--red-soft); color:var(--red); font-size:14.5px; font-weight:800; transition:.16s; } .chip:active{ transform:scale(.95); } .chip .ic{ width:17px; height:17px; } .chip.plain{ background:var(--surface-2); color:var(--txt-2); } .seg{ display:grid; grid-auto-flow:column; gap:10px; margin-bottom:16px; } .seg button{ height:48px; border-radius:15px; font-size:15.5px; font-weight:900; background:var(--surface-2); color:var(--txt-2); border:1px solid var(--line); transition:.18s; } .seg button.on{ background:var(--grad-flat); color:#fff; border-color:transparent; box-shadow:var(--shadow-red); } .seg button:active{ transform:scale(.97); } .badge{ display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px; border-radius:9px; background:var(--red-soft); color:var(--red); font-size:12px; font-weight:900; letter-spacing:.6px; text-transform:uppercase; } .badge.ok{ background:rgba(47,208,122,.14); color:var(--ok); } .badge.grey{ background:var(--surface-3); color:var(--txt-2); } /* ---------- form ---------- */ .field{ margin-bottom:14px; } .field label{ display:block; font-size:12.5px; font-weight:800; color:var(--txt-3); text-transform:uppercase; letter-spacing:.7px; margin-bottom:7px; } .input,textarea.input,select.input{ width:100%; height:54px; padding:0 16px; border-radius:15px; background:var(--surface-2); border:1.5px solid var(--line); color:var(--txt); font-size:16px; font-weight:700; outline:none; transition:.18s; } textarea.input{ height:auto; min-height:96px; padding:14px 16px; line-height:1.5; resize:vertical; } .input:focus{ border-color:var(--red); background:var(--surface-3); box-shadow:0 0 0 4px var(--red-soft); } .input::placeholder{ color:var(--txt-3); font-weight:600; } select.input{ background-image:none; } /* campo password con occhiolino: l'input lascia spazio a destra per il bottone */ .pass-wrap{ position:relative; } .pass-wrap .input{ padding-right:50px; } .pass-eye{ position:absolute; right:5px; top:0; height:54px; width:44px; display:grid; place-items:center; color:var(--txt-3); background:transparent; border:none; } .pass-eye .ic{ width:21px; height:21px; } .pass-eye:active{ transform:scale(.86); } .row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; } /* ---------- liste ---------- */ .rowlink{ display:flex; align-items:center; gap:13px; padding:15px 16px; border-radius:var(--r-m); background:var(--surface); border:1px solid var(--line); margin-bottom:10px; transition:.16s; width:100%; text-align:left; } .rowlink:active{ transform:scale(.985); background:var(--surface-2); } .rowlink .ic{ color:var(--red); } .rowlink .lbl{ flex:1; font-size:15.5px; font-weight:800; } .rowlink .chev{ color:var(--txt-3); width:19px; height:19px; } .rowlink .sub{ font-size:12.5px; color:var(--txt-3); font-weight:700; } .empty{ text-align:center; padding:44px 20px; color:var(--txt-3); } .empty .ic{ width:46px; height:46px; margin-bottom:12px; color:var(--surface-3); } .empty b{ display:block; color:var(--txt-2); font-size:16px; margin-bottom:5px; } /* ---------- HOME ---------- */ .board-post{ display:flex; gap:14px; } .board-post .txt{ flex:1; min-width:0; } .board-post .date{ font-size:14px; color:var(--txt-3); font-weight:700; } .board-post .ttl{ font-size:17px; font-weight:900; margin:3px 0 4px; text-transform:uppercase; letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .board-post .exc{ font-size:14.5px; color:var(--txt-2); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .board-post .thumb{ width:112px; height:112px; border-radius:16px; flex:none; background:var(--surface-2) center/cover; display:grid; place-items:center; color:var(--surface-3); border:1px solid var(--line); } .soon{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 6px 6px; text-align:center; } .soon .ic{ width:34px; height:34px; color:var(--red); } .soon .lbl{ font-size:15px; font-weight:900; letter-spacing:.4px; text-transform:uppercase; } .soon .d{ font-size:13.5px; color:var(--txt-3); font-weight:700; max-width:270px; line-height:1.4; } .sponsor-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:16px; width:100%; } .sponsor-slot{ height:56px; border-radius:13px; border:1.5px dashed var(--line); display:grid; place-items:center; font-size:11px; font-weight:900; color:var(--txt-3); letter-spacing:.6px; background:var(--surface-2); } .stat-big{ display:flex; align-items:flex-end; gap:12px; } .stat-big .n{ font-size:66px; line-height:.85; font-weight:900; letter-spacing:-4px; color:var(--red); } .stat-big .of{ font-size:34px; font-weight:900; letter-spacing:-1.5px; color:var(--txt); } .stat-big .ic{ color:var(--txt-3); margin-bottom:6px; } .stat-big .lbl{ flex:1; text-align:right; font-size:17px; font-weight:800; color:var(--txt-2); line-height:1.15; } .bar{ height:9px; border-radius:6px; background:var(--surface-3); margin-top:16px; overflow:hidden; } .bar i{ display:block; height:100%; border-radius:6px; background:var(--grad-flat); box-shadow:0 0 16px var(--red-glow); transition:width .7s cubic-bezier(.2,.9,.3,1); } .stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; } .stat-mini{ background:var(--surface-2); border-radius:14px; padding:12px 10px; text-align:center; border:1px solid var(--line-soft); } .stat-mini .v{ font-size:22px; font-weight:900; letter-spacing:-.6px; } .stat-mini .k{ font-size:11px; color:var(--txt-3); font-weight:800; text-transform:uppercase; letter-spacing:.5px; margin-top:2px; } .next-w .lbl{ font-size:12.5px; color:var(--txt-3); font-weight:800; text-transform:uppercase; letter-spacing:.7px; } .next-w .nm{ font-size:24px; font-weight:900; letter-spacing:-.6px; margin:4px 0 6px; text-transform:uppercase; } .next-w .meta{ display:flex; align-items:center; gap:7px; color:var(--txt-2); font-size:14.5px; font-weight:700; } .next-w .meta .ic{ width:18px; height:18px; color:var(--txt-3); } /* ---------- WORKOUT list ---------- */ .wo-card{ display:flex; align-items:center; gap:14px; } .wo-card .info{ flex:1; min-width:0; } .wo-card .nm{ font-size:21px; font-weight:900; letter-spacing:-.5px; text-transform:uppercase; margin:9px 0 5px; } .wo-card .meta{ display:flex; align-items:center; gap:6px; color:var(--txt-2); font-size:14px; font-weight:700; } .wo-card .meta .ic{ width:17px; height:17px; color:var(--txt-3); } .wo-card .go{ width:58px; height:58px; border-radius:17px; background:var(--grad-flat); display:grid; place-items:center; color:#fff; flex:none; box-shadow:var(--shadow-red); transition:.16s; } .wo-card .go:active{ transform:scale(.92); } .wo-top{ display:flex; align-items:center; gap:8px; } .wo-top .sp{ flex:1; } .wo-card .del{ width:34px; height:34px; border-radius:11px; background:var(--red-soft); color:var(--red); display:grid; place-items:center; flex:none; } .wo-card .del .ic{ width:17px; height:17px; } .wo-card .del:active{ transform:scale(.9); } /* colonna azioni a destra: cestino sopra, freccia (più piccola) sotto */ .wo-actions{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:none; } .wo-del{ width:38px; height:34px; border-radius:11px; background:var(--red-soft); color:var(--red); display:grid; place-items:center; border:1px solid rgba(255,46,62,.25); } .wo-del .ic{ width:18px; height:18px; } .wo-del:active{ transform:scale(.9); } .wo-go{ width:44px; height:44px; border-radius:14px; background:var(--grad-flat); display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-red); } .wo-go .ic{ width:22px; height:22px; } .wo-go:active{ transform:scale(.9); } /* ---------- WORKOUT detail ---------- */ .ex-row{ display:flex; align-items:center; gap:13px; padding:11px; border-radius:var(--r-m); background:var(--surface); border:1px solid var(--line); margin-bottom:11px; transition:.16s; width:100%; text-align:left; position:relative; overflow:hidden; } .ex-row:active{ transform:scale(.985); } .ex-row.done{ border-color:rgba(47,208,122,.35); } .ex-row.done::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ok); } .ex-thumb{ width:82px; height:74px; border-radius:12px; flex:none; background:var(--surface-2) center/cover; display:grid; place-items:center; color:var(--surface-3); border:1px solid var(--line-soft); } .ex-thumb .ic{ width:30px; height:30px; } .ex-row .info{ flex:1; min-width:0; } .ex-row .nm{ font-size:16.5px; font-weight:900; letter-spacing:-.3px; line-height:1.15; margin-bottom:5px; } .ex-row .meta{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:13.5px; color:var(--txt-2); font-weight:700; } .ex-row .meta b{ color:var(--txt); } .ex-row .meta .ic{ width:15px; height:15px; color:var(--txt-3); } .ex-row .tick{ width:26px; height:26px; border-radius:9px; background:var(--ok); color:#04140b; display:grid; place-items:center; flex:none; } .ex-row .tick .ic{ width:16px; height:16px; stroke-width:3; } .supersetTag{ position:absolute; left:0; top:0; background:var(--red); color:#fff; font-size:10px; font-weight:900; padding:2px 7px; border-radius:0 0 8px 0; letter-spacing:.6px; } .section-h{ display:flex; align-items:center; gap:10px; margin:22px 0 12px; } .section-h .h2{ flex:1; } .section-h .cnt{ display:flex; align-items:center; gap:6px; color:var(--txt-2); font-size:16px; font-weight:900; } .section-h .cnt .ic{ width:19px; height:19px; color:var(--txt-3); } /* ---------- ESERCIZIO ---------- */ .stat3{ display:grid; grid-template-columns:repeat(3,1fr); } .stat3 > div{ text-align:center; padding:4px 0; position:relative; } .stat3 > div + div::before{ content:''; position:absolute; left:0; top:14%; bottom:14%; width:1px; background:var(--line-soft); } .stat3 .bub{ width:44px; height:44px; border-radius:50%; background:var(--red-soft); color:var(--red); display:grid; place-items:center; margin:0 auto 9px; } .stat3 .v{ font-size:27px; font-weight:900; letter-spacing:-1px; line-height:1; } .stat3 .v small{ font-size:14px; font-weight:800; letter-spacing:0; } .stat3 .k{ font-size:13px; color:var(--txt-2); font-weight:700; margin-top:4px; } .note-box{ background:linear-gradient(135deg,rgba(255,46,62,.14),rgba(255,46,62,.05)); border:1px solid rgba(255,46,62,.3); border-radius:var(--r-l); padding:16px 18px; margin-bottom:14px; } .note-box .k{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:900; color:var(--red); text-transform:uppercase; letter-spacing:.8px; margin-bottom:7px; } .note-box .k .ic{ width:17px; height:17px; } .note-box .v{ font-size:15.5px; line-height:1.45; font-weight:700; } .sets-head{ display:grid; grid-template-columns:38px 1fr 1fr 40px; gap:9px; padding:0 2px 8px; } .sets-head span{ font-size:12.5px; color:var(--txt-3); font-weight:800; text-align:center; text-transform:uppercase; letter-spacing:.5px; } .set-row{ display:grid; grid-template-columns:38px 1fr 1fr 40px; gap:9px; align-items:center; margin-bottom:10px; } .set-n{ width:34px; height:34px; border-radius:50%; border:2px solid var(--red); color:var(--red); display:grid; place-items:center; font-size:15px; font-weight:900; } .set-row.filled .set-n{ background:var(--red); color:#fff; } .set-in{ height:50px; text-align:center; font-size:17px; font-weight:900; border-radius:13px; background:var(--surface-2); border:1.5px solid var(--line); color:var(--txt); outline:none; width:100%; transition:.16s; } .set-in:focus{ border-color:var(--red); box-shadow:0 0 0 4px var(--red-soft); } .set-in::placeholder{ color:var(--txt-3); font-weight:700; } .reps-boxes{ display:flex; flex-wrap:wrap; gap:8px; } .rep-box{ display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1.5px solid var(--line); border-radius:12px; padding:3px 8px 3px 10px; transition:.16s; } .rep-box:focus-within{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft); } .rep-box .rep-n{ font-size:11.5px; font-weight:900; color:var(--txt-3); } .rep-box .rep-in{ width:74px; height:40px; padding:0 6px; border:none; background:transparent; color:var(--txt); font-weight:800; font-size:15px; outline:none; } .set-del{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; color:var(--txt-3); background:var(--surface-2); } .set-del .ic{ width:16px; height:16px; } .set-actions{ display:grid; grid-template-columns:1.6fr 1fr; gap:10px; margin-top:6px; } .hist-table{ width:100%; border-collapse:separate; border-spacing:0; border-radius:12px; overflow:hidden; border:1px solid var(--line); } .hist-table th{ background:var(--grad-flat); color:#fff; font-size:13px; font-weight:900; padding:10px 6px; } .hist-table td{ padding:11px 6px; text-align:center; font-size:15px; font-weight:900; border-top:1px solid var(--line-soft); background:var(--surface-2); } .hist-table td:first-child{ background:var(--red-soft); color:var(--red); width:58px; } .hist-date{ font-size:14px; color:var(--txt-2); font-weight:800; margin:14px 0 8px; } /* ---------- barra fissa allenamento ---------- */ .actionbar{ position:fixed; bottom:calc(72px + var(--safe-b)); left:0; right:0; z-index:44; max-width:var(--app-w); margin:0 auto; padding:11px var(--pad) 12px; display:flex; align-items:center; gap:11px; background:linear-gradient(to top,var(--bg) 62%,rgba(8,8,10,0)); } .actionbar .btn{ flex:1; } .actionbar .pager{ display:flex; align-items:center; gap:9px; font-size:16px; font-weight:900; color:var(--txt-2); } .actionbar .nav-b{ width:42px; height:42px; border-radius:50%; background:var(--grad-flat); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-red); } .actionbar .nav-b:disabled{ opacity:.3; box-shadow:none; } .live-pill{ display:flex; align-items:center; gap:9px; flex:1; height:52px; padding:0 16px; border-radius:16px; background:var(--surface-2); border:1px solid rgba(255,46,62,.35); } .live-pill .dot{ width:9px; height:9px; border-radius:50%; background:var(--red); animation:blink 1.4s infinite; box-shadow:0 0 10px var(--red); } @keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} } .live-pill .start{ font-size:12px; color:var(--txt-3); font-weight:800; text-transform:uppercase; letter-spacing:.5px; } .live-pill .el{ font-size:20px; font-weight:900; letter-spacing:-.5px; font-variant-numeric:tabular-nums; } /* ---------- timer recupero ---------- */ .rest{ position:fixed; bottom:calc(72px + var(--safe-b)); left:0; right:0; z-index:60; max-width:var(--app-w); margin:0 auto; padding:16px var(--pad) 20px; background:var(--grad); border-radius:24px 24px 0 0; box-shadow:0 -18px 50px -20px rgba(255,46,62,.7); animation:sheetUp .3s cubic-bezier(.2,.9,.3,1) both; } @keyframes sheetUp{ from{ transform:translateY(105%);} to{ transform:none;} } .rest.full{ inset:0; bottom:0; border-radius:0; padding-top:calc(60px + var(--safe-t)); display:flex; flex-direction:column; justify-content:center; } .rest-top{ display:flex; align-items:center; gap:10px; margin-bottom:14px; } .rest-top .t{ flex:1; font-size:17px; font-weight:900; color:#fff; letter-spacing:-.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rest-top .b{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.16); } .rest-body{ display:flex; align-items:center; gap:16px; } .rest-dial{ position:relative; width:112px; height:112px; flex:none; } .rest.full .rest-dial{ width:230px; height:230px; margin:0 auto 26px; } .rest.full .rest-body{ flex-direction:column; } .rest-dial svg{ transform:rotate(-90deg); width:100%; height:100%; } .rest-dial .track{ fill:none; stroke:rgba(255,255,255,.25); stroke-width:6; } .rest-dial .prog{ fill:none; stroke:#fff; stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset .96s linear; } .rest-dial .t{ position:absolute; inset:0; display:grid; place-items:center; font-size:29px; font-weight:900; color:#fff; letter-spacing:-1px; font-variant-numeric:tabular-nums; } .rest.full .rest-dial .t{ font-size:62px; } .rest-side{ flex:1; display:flex; flex-direction:column; gap:9px; } .rest.full .rest-side{ width:100%; max-width:280px; } .rest-btn{ height:44px; border-radius:14px; background:#fff; color:#B00718; font-size:15px; font-weight:900; } .rest-btn.dark{ background:#0A0A0C; color:#fff; } .rest-btn:active{ transform:scale(.96); } .rest-snd{ width:44px; height:44px; border-radius:13px; background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; flex:none; } /* ---------- chat ---------- */ .chat-wrap{ padding-bottom:12px; } .msg{ max-width:82%; padding:12px 15px; border-radius:18px; font-size:15px; font-weight:700; line-height:1.42; margin-bottom:9px; animation:pop .22s ease both; } .msg.them{ background:var(--surface-2); border:1px solid var(--line); border-bottom-left-radius:6px; } .msg.me{ background:var(--grad-flat); margin-left:auto; border-bottom-right-radius:6px; box-shadow:var(--shadow-red); } .msg .w{ display:block; font-size:11px; opacity:.6; font-weight:800; margin-top:5px; } .chat-bar{ position:fixed; bottom:calc(72px + var(--safe-b)); left:0; right:0; max-width:var(--app-w); margin:0 auto; padding:10px var(--pad) 12px; display:flex; gap:9px; background:rgba(8,8,10,.94); backdrop-filter:blur(14px); border-top:1px solid var(--line); z-index:44; } .chat-bar .input{ height:48px; } .chat-bar .snd{ width:48px; height:48px; border-radius:15px; background:var(--grad-flat); color:#fff; display:grid; place-items:center; flex:none; box-shadow:var(--shadow-red); } /* ---------- nutrizione ---------- */ .macros{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px; } .macro{ background:var(--surface-2); border:1px solid var(--line-soft); border-radius:15px; padding:13px 8px; text-align:center; } .macro .v{ font-size:21px; font-weight:900; letter-spacing:-.6px; } .macro .v small{ font-size:12px; color:var(--txt-3); } .macro .k{ font-size:11px; color:var(--txt-3); font-weight:900; text-transform:uppercase; letter-spacing:.6px; margin-top:3px; } .macro .mb{ height:5px; border-radius:4px; background:var(--surface-3); margin-top:8px; overflow:hidden; } .macro .mb i{ display:block; height:100%; background:var(--red); border-radius:4px; } .meal{ display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:var(--r-m); background:var(--surface); border:1px solid var(--line); margin-bottom:10px; } .meal.done{ opacity:.55; } .meal .cb{ width:28px; height:28px; border-radius:9px; border:2px solid var(--line); display:grid; place-items:center; flex:none; color:transparent; transition:.18s; } .meal.done .cb{ background:var(--ok); border-color:var(--ok); color:#04140b; } .meal .cb .ic{ width:16px; height:16px; stroke-width:3.2; } .meal .nm{ font-size:15.5px; font-weight:900; margin-bottom:3px; } .meal .it{ font-size:14px; color:var(--txt-2); line-height:1.45; font-weight:600; white-space:pre-line; } .meal .kc{ font-size:12px; color:var(--red); font-weight:900; margin-top:5px; } /* ---------- progressi ---------- */ .spark{ height:120px; width:100%; margin-top:8px; } .spark polyline{ fill:none; stroke:var(--red); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; } .spark circle{ fill:var(--red); } .spark .area{ fill:url(#sparkg); stroke:none; } /* ---------- sheet / modal ---------- */ #layer:empty{ display:none; } .backdrop{ position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.66); backdrop-filter:blur(4px); animation:fade .2s ease both; display:flex; align-items:flex-end; justify-content:center; } @keyframes fade{ from{opacity:0} to{opacity:1} } .sheet{ width:100%; max-width:520px; background:var(--bg-2); border-radius:26px 26px 0 0; border-top:1px solid var(--line); padding:8px var(--pad) calc(20px + var(--safe-b)); max-height:92vh; overflow-y:auto; animation:sheetUp .3s cubic-bezier(.2,.9,.3,1) both; } .sheet .grab{ width:42px; height:4px; border-radius:3px; background:var(--surface-3); margin:6px auto 16px; } .sheet h3{ font-size:21px; font-weight:900; letter-spacing:-.4px; margin:0 0 14px; } .modal{ width:calc(100% - 40px); max-width:400px; background:var(--bg-2); border:1px solid var(--line); border-radius:24px; padding:24px 22px; margin:auto; animation:pop .22s ease both; } /* X di chiusura globale (rossa) su sheet e modali */ .sheet, .modal{ position:relative; } .layer-x{ position:absolute; top:12px; right:12px; z-index:6; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#E50914; background:rgba(229,9,20,.12); border:none; } .layer-x .ic{ width:19px; height:19px; stroke-width:2.4; } .layer-x:active{ transform:scale(.86); } .modal h3{ font-size:20px; font-weight:900; margin:0 0 8px; } .modal p{ font-size:15px; color:var(--txt-2); line-height:1.45; margin:0 0 20px; font-weight:600; } .modal .acts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } #toast{ position:fixed; left:0; right:0; bottom:calc(150px + var(--safe-b)); z-index:90; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 16px; } .toast{ display:flex; align-items:center; gap:11px; padding:11px 18px 11px 12px; border-radius:16px; font-size:14.5px; font-weight:800; max-width:92%; letter-spacing:-.2px; background:rgba(28,28,35,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:#fff; border:1px solid rgba(255,255,255,.1); box-shadow:0 18px 44px -14px rgba(0,0,0,.85); animation:tin .32s cubic-bezier(.2,.9,.3,1) both; } .toast-ic{ width:28px; height:28px; border-radius:9px; flex:none; display:grid; place-items:center; background:var(--surface-3); color:var(--txt-2); } .toast-ic .ic{ width:17px; height:17px; stroke-width:2.6; } .toast-txt{ padding-top:1px; } .toast.ok{ border-color:rgba(47,208,122,.4); } .toast.ok .toast-ic{ background:var(--ok); color:#04140b; } .toast.err{ border-color:rgba(255,46,62,.45); } .toast.err .toast-ic{ background:var(--red); color:#fff; } .toast:not(.ok):not(.err) .toast-ic{ background:var(--grad-flat); color:#fff; } @keyframes tin{ from{opacity:0; transform:translateY(16px) scale(.92);} to{opacity:1;transform:none;} } /* ---------- auth ---------- */ .auth{ min-height:100vh; padding:calc(40px + var(--safe-t)) 24px calc(30px + var(--safe-b)); display:flex; flex-direction:column; animation:fadeUp .35s ease both; } .auth .top{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:26px 0 34px; } .auth .wordmark{ font-size:44px; font-weight:900; letter-spacing:-2px; } .auth .tag{ font-size:14px; color:var(--txt-3); font-weight:800; text-transform:uppercase; letter-spacing:2.6px; } .auth .glow{ position:absolute; top:-90px; left:50%; transform:translateX(-50%); width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(255,46,62,.28),transparent 68%); pointer-events:none; } .auth-opt{ display:flex; align-items:center; gap:14px; padding:18px 16px; border-radius:var(--r-l); background:var(--surface); border:1px solid var(--line); margin-bottom:12px; width:100%; text-align:left; transition:.18s; } .auth-opt:active{ transform:scale(.98); border-color:rgba(255,46,62,.45); } .auth-opt .bub{ width:48px; height:48px; border-radius:15px; background:var(--red-soft); color:var(--red); display:grid; place-items:center; flex:none; } .auth-opt.primary .bub{ background:var(--grad-flat); color:#fff; box-shadow:var(--shadow-red); } .auth-opt .t{ flex:1; } .auth-opt .t b{ display:block; font-size:16.5px; font-weight:900; letter-spacing:-.2px; } .auth-opt .t span{ font-size:13.5px; color:var(--txt-3); font-weight:700; } .auth-opt .chev{ color:var(--txt-3); width:19px; height:19px; } .demo-box{ margin-top:auto; padding:14px 16px; border-radius:var(--r-m); background:var(--surface-2); border:1px dashed var(--line); } .demo-box .h{ font-size:11.5px; font-weight:900; color:var(--txt-3); text-transform:uppercase; letter-spacing:.9px; margin-bottom:9px; } .demo-box .l{ display:flex; gap:8px; flex-wrap:wrap; } .demo-box button{ font-size:12.5px; font-weight:900; padding:8px 12px; border-radius:10px; background:var(--surface-3); color:var(--txt-2); } .link-btn{ background:none; color:var(--red); font-size:14.5px; font-weight:800; padding:14px; width:100%; } /* ---------- coach / admin ---------- */ .client-card{ display:flex; align-items:center; gap:13px; } .avatar{ width:50px; height:50px; border-radius:16px; background:var(--grad-flat); color:#fff; display:grid; place-items:center; font-size:19px; font-weight:900; flex:none; box-shadow:var(--shadow-red); } .avatar.grey{ background:var(--surface-3); color:var(--txt-2); box-shadow:none; } .code-box{ text-align:center; padding:22px 16px; border-radius:var(--r-l); background:linear-gradient(135deg,rgba(255,46,62,.16),rgba(255,46,62,.04)); border:1.5px dashed rgba(255,46,62,.45); margin-bottom:14px; } .code-box .k{ font-size:12px; font-weight:900; color:var(--txt-3); text-transform:uppercase; letter-spacing:1px; } .code-box .v{ font-size:38px; font-weight:900; letter-spacing:5px; color:var(--red); margin:8px 0 4px; } .pill-tabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:16px; } .pill-tabs button{ flex:none; height:38px; padding:0 15px; border-radius:12px; background:var(--surface-2); color:var(--txt-2); font-size:14px; font-weight:800; border:1px solid var(--line); } .pill-tabs button.on{ background:var(--grad-flat); color:#fff; border-color:transparent; box-shadow:var(--shadow-red); } .editable{ border-left:3px solid var(--red); } .dragging{ opacity:.4; } .locked-note{ display:flex; gap:10px; align-items:flex-start; padding:13px 15px; border-radius:var(--r-m); background:var(--surface-2); border:1px solid var(--line); font-size:13.5px; color:var(--txt-2); font-weight:700; line-height:1.45; } .locked-note .ic{ color:var(--txt-3); width:19px; height:19px; flex:none; margin-top:1px; } .locked-note.warn{ background:rgba(255,176,32,.08); border-color:rgba(255,176,32,.35); color:#FFCE7A; } .locked-note.warn .ic{ color:var(--warn); } /* ---------- acqua ---------- */ .water{ display:flex; align-items:center; gap:16px; } .water-glass{ position:relative; width:74px; height:96px; flex:none; border:3px solid var(--line); border-top:0; border-radius:6px 6px 16px 16px; overflow:hidden; background:var(--surface-2); } .water-glass i{ position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg,#3AA0FF,#1B63C9); transition:height .5s cubic-bezier(.2,.9,.3,1); } .water-glass span{ position:absolute; inset:0; display:grid; place-items:center; font-size:15px; font-weight:900; text-shadow:0 1px 6px rgba(0,0,0,.7); } .water-side{ flex:1; } .water-btns{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; } .water-btns button{ height:42px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); color:var(--txt); font-size:13.5px; font-weight:900; } .water-btns button:active{ transform:scale(.95); } .water-btns button.neg{ color:var(--txt-3); } /* ---------- ricette ---------- */ .recipe{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:var(--r-m); background:var(--surface); border:1px solid var(--line); margin-bottom:10px; width:100%; text-align:left; } .recipe .bub{ width:44px; height:44px; border-radius:14px; background:var(--red-soft); color:var(--red); display:grid; place-items:center; flex:none; } .recipe .nm{ font-size:15.5px; font-weight:900; } .recipe .mc{ font-size:12.5px; color:var(--txt-3); font-weight:800; margin-top:3px; } .recipe:active{ transform:scale(.985); } /* ---------- foto progressi (4 riquadri) ---------- */ .photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; } .photo-cell{ position:relative; aspect-ratio:3/4; border-radius:var(--r-m); overflow:hidden; background:var(--surface-2); border:1.5px dashed var(--line); display:grid; place-items:center; } .photo-cell.has{ border-style:solid; border-color:var(--line); } .photo-cell img{ width:100%; height:100%; object-fit:cover; display:block; } .photo-cell .body{ width:52%; color:var(--surface-3); } .photo-cell .lab{ position:absolute; left:8px; top:8px; background:rgba(0,0,0,.6); color:#fff; font-size:10.5px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; padding:4px 8px; border-radius:8px; } .photo-cell .add{ position:absolute; right:8px; bottom:8px; width:32px; height:32px; border-radius:10px; background:var(--grad-flat); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-red); } .photo-cell .add .ic{ width:16px; height:16px; } .photo-set{ margin-bottom:16px; } .photo-set .hd{ display:flex; align-items:center; gap:10px; margin-bottom:11px; } .compare{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .compare figure{ margin:0; } .compare figcaption{ font-size:11.5px; color:var(--txt-3); font-weight:900; text-align:center; margin-top:6px; text-transform:uppercase; letter-spacing:.6px; } /* ---------- riepilogo fine allenamento ---------- */ .finish{ text-align:center; padding:22px 4px 6px; } .finish .ring{ width:120px; height:120px; margin:0 auto 18px; border-radius:50%; background:var(--grad); display:grid; place-items:center; box-shadow:0 20px 50px -18px var(--red-glow); animation:pop .35s cubic-bezier(.3,1.5,.5,1) both; } .finish .ring .ic{ width:56px; height:56px; color:#fff; stroke-width:2.6; } .finish h2{ font-size:29px; font-weight:900; letter-spacing:-1px; margin:0 0 6px; } .finish .quote{ font-size:16px; color:var(--txt-2); line-height:1.45; font-weight:700; max-width:300px; margin:0 auto 22px; } .sum-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; } .sum-line{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; background:var(--surface); border:1px solid var(--line); margin-bottom:8px; font-size:14.5px; font-weight:800; } .sum-line .k{ flex:1; text-align:left; } .sum-line .v{ color:var(--red); font-weight:900; } /* ---------- video ---------- */ .video-box{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--r-m); overflow:hidden; background:#000; border:1px solid var(--line); margin-bottom:16px; } .video-box iframe{ width:100%; height:100%; border:0; display:block; } /* esecuzione dalla libreria: le due foto affiancate, etichettate Inizio / Fine */ .ex-frames{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; } .ex-frames.single{ grid-template-columns:1fr; max-width:340px; margin-inline:auto; } .ex-frame{ position:relative; margin:0; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line); background:#fff; } .ex-frame img{ display:block; width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; } .ex-frame figcaption{ position:absolute; top:8px; left:8px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:#fff; background:rgba(0,0,0,.62); padding:3px 9px; border-radius:999px; backdrop-filter:blur(2px); } /* banner impersonazione founder→coach: pillola fissa sopra la tab bar */ .imp-banner{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(80px + var(--safe-b)); z-index:60; display:flex; align-items:center; gap:10px; max-width:calc(100% - 24px); background:var(--red); color:#fff; padding:8px 8px 8px 16px; border-radius:999px; font-weight:800; font-size:13px; box-shadow:0 12px 30px -8px rgba(0,0,0,.6); } .imp-banner .ic{ width:16px; height:16px; } .imp-banner button{ display:flex; align-items:center; gap:3px; background:rgba(0,0,0,.28); color:#fff; padding:5px 12px; border-radius:999px; font-weight:800; font-size:12.5px; white-space:nowrap; } .imp-banner button:active{ transform:scale(.94); } /* griglia durate "Regala Pro" */ .gift-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .gift-grid .btn{ width:100%; justify-content:center; } /* riga esercizio nel picker: miniatura + nome + attrezzatura */ .lib-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:8px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line-soft); margin-bottom:8px; color:var(--txt); } .lib-row:active{ transform:scale(.99); } .lib-thumb{ width:52px; height:52px; flex:none; border-radius:11px; overflow:hidden; background:#fff; display:grid; place-items:center; color:var(--surface-3); border:1px solid var(--line-soft); } .lib-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .lib-thumb .ic{ width:24px; height:24px; } .lib-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .lib-name{ font-weight:800; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lib-eq{ font-size:11.5px; font-weight:700; color:var(--txt-3); } /* ---------- link dentro le note ---------- */ .note-box .v a, .rich a{ color:var(--red); text-decoration:underline; text-underline-offset:3px; font-weight:900; } /* ---------- selettore periodo ---------- */ .dur-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; } .dur-grid button{ height:46px; border-radius:13px; background:var(--surface-2); border:1px solid var(--line); color:var(--txt-2); font-size:14px; font-weight:900; } .dur-grid button.on{ background:var(--grad-flat); color:#fff; border-color:transparent; box-shadow:var(--shadow-red); } /* ---------- dashboard coach (ridisegno) ---------- */ .coach-code{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-m); background:linear-gradient(135deg,rgba(255,46,62,.14),rgba(255,46,62,.03)); border:1px solid rgba(255,46,62,.35); margin-bottom:14px; } .coach-code .k{ font-size:11px; font-weight:900; color:var(--txt-3); text-transform:uppercase; letter-spacing:.6px; } .coach-code .v{ font-size:26px; font-weight:900; letter-spacing:4px; color:var(--red); margin-top:3px; } .coach-code .btn{ flex:none; } /* Banner attivazione piano coach */ .coach-paywall{ display:flex; align-items:center; gap:14px; margin-bottom:14px; padding:15px 18px; border-radius:var(--r-m); border:1px solid var(--red); background:var(--surface-2); background:linear-gradient(135deg, color-mix(in srgb, var(--red) 15%, var(--surface-2)), var(--surface-2)); } .coach-paywall .cpw-l{ flex:1; min-width:0; } .cpw-badge{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:var(--red); margin-bottom:6px; } .cpw-badge svg{ width:14px; height:14px; } .cpw-title{ font-size:19px; font-weight:900; line-height:1.05; } .cpw-title small{ font-size:12px; font-weight:800; color:var(--txt-3); } .cpw-sub{ font-size:12px; color:var(--txt-3); margin-top:5px; line-height:1.45; } .cpw-btn{ flex:none; white-space:nowrap; } @media (max-width:560px){ .coach-paywall{ flex-direction:column; align-items:stretch; } .cpw-btn{ width:100%; } } /* Card pubblica del coach (vista cliente + anteprima nel profilo coach) */ .cc-top{ display:flex; align-items:center; gap:13px; } .cc-eyebrow{ font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:var(--red); margin-bottom:2px; } .coach-bio-txt{ margin:12px 0 0; font-size:14px; line-height:1.5; color:var(--txt); white-space:pre-wrap; } .coach-socials{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .coach-soc{ display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); color:var(--txt); font-size:13px; font-weight:700; text-decoration:none; } .coach-soc:hover{ border-color:var(--red); } .coach-soc .soc-emo{ font-size:16px; line-height:1; } .coach-soc svg{ flex:none; } /* Referral coach */ .ref-link{ margin-top:6px; padding:11px 13px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); font-size:12.5px; color:var(--txt); word-break:break-all; font-family:ui-monospace,monospace; } .ref-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; } .ref-stats .card{ text-align:center; padding:16px 8px; margin:0; } .ref-stats .v{ font-size:28px; font-weight:900; line-height:1; color:var(--red); } .ref-stats .k{ font-size:11px; font-weight:800; color:var(--txt-3); text-transform:uppercase; letter-spacing:.4px; margin-top:6px; } .ms-row{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--txt-3); } .ms-row:last-child{ border-bottom:0; } .ms-n{ flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-weight:900; background:var(--surface-3); color:var(--txt-3); font-size:13px; } .ms-n svg{ width:15px; height:15px; } .ms-row.on{ color:var(--txt); } .ms-row.on .ms-n{ background:var(--red); color:#fff; } .ms-row.on .ms-l{ font-weight:700; } .coach-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; } .coach-stats > div{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-m); padding:12px 8px; text-align:center; } .coach-stats .v{ font-size:24px; font-weight:900; line-height:1; } .coach-stats .k{ font-size:10.5px; font-weight:800; color:var(--txt-3); text-transform:uppercase; letter-spacing:.5px; margin-top:5px; } .cc-bar{ height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden; margin:6px 0; } .cc-bar i{ display:block; height:100%; background:var(--grad-flat); } .coach-settings{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-m); padding:13px 16px; margin-bottom:14px; } .coach-settings summary{ cursor:pointer; font-weight:800; font-size:15px; list-style:none; display:flex; align-items:center; gap:10px; color:var(--txt); } .coach-settings summary::-webkit-details-marker{ display:none; } .coach-settings summary .ic{ width:18px; height:18px; color:var(--txt-3); } .coach-settings[open] summary{ margin-bottom:4px; } .wo-create{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; } .wo-create .btn{ width:100%; justify-content:center; } /* ---------- DASHBOARD COACH DESKTOP (split-view) ---------- */ /* la dashboard gestionale occupa TUTTO lo schermo: sblocco la larghezza di #app */ body:has(.coach-desk) #app{ max-width:none !important; width:100% !important; } .coach-desk{ display:grid; grid-template-columns:minmax(280px, 30%) 1fr; height:100vh; background:#000; overflow:hidden; } .cd-list{ display:flex; flex-direction:column; min-height:0; background:#0A0A0D; border-right:1px solid var(--line); } .cd-brand{ display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line-soft); } .cd-code{ display:flex; align-items:center; gap:8px; margin:12px 16px 0; padding:9px 13px; border-radius:12px; background:rgba(229,9,20,.12); border:1px solid rgba(229,9,20,.4); color:#E50914; font-weight:900; } .cd-code .k{ font-size:9px; letter-spacing:1.2px; opacity:.85; } .cd-code b{ font-size:15px; letter-spacing:2px; flex:1; } .cd-code .ic{ width:14px; height:14px; } .cd-search{ margin:12px 16px; height:42px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); color:var(--txt); padding:0 14px; font-size:14px; font-weight:600; outline:none; } .cd-search:focus{ border-color:var(--red); } .cd-clients{ flex:1; overflow-y:auto; padding:2px 10px 16px; min-height:0; } .cd-cli{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px; border-radius:12px; color:var(--txt); transition:.12s; } .cd-cli:hover{ background:var(--surface-2); } .cd-cli.on{ background:var(--red-soft); box-shadow:inset 3px 0 0 var(--red); } .cd-cli .avatar{ width:44px; height:44px; flex:none; } .cd-cli-info{ min-width:0; flex:1; } .cd-cli-name{ font-weight:800; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cd-cli-sub{ font-size:12px; color:var(--txt-3); margin-top:2px; } .cd-empty{ padding:22px 14px; color:var(--txt-3); font-size:14px; } .cd-detail{ overflow-y:auto; min-height:0; padding:22px 26px; } .cd-detail-top{ display:flex; align-items:center; gap:10px; margin-bottom:14px; } .cd-detail-body{ max-width:760px; } .cd-ac{ max-width:1100px; } .cd-ac-head{ margin-bottom:20px; } .cd-ac-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; } .cd-widget{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-l); padding:18px; } .cd-widget .k{ font-size:11px; font-weight:900; letter-spacing:1px; color:var(--txt-3); margin-bottom:12px; } .cd-todo{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 12px; border-radius:11px; background:var(--bg-2); border:1px solid var(--line-soft); margin-bottom:8px; color:var(--txt); } .cd-todo:hover{ border-color:var(--line); } .cd-todo .dot{ width:9px; height:9px; border-radius:50%; background:var(--txt-3); flex:none; } .cd-todo.red .dot{ background:#E50914; } .cd-todo.warn .dot{ background:var(--warn); } .cd-todo.blue .dot{ background:#2E7BFF; } .cd-todo-name{ font-weight:800; font-size:14px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cd-todo-t{ font-size:12px; color:var(--txt-3); flex:none; } @media (max-width:1023px){ .cd-ac-grid{ grid-template-columns:1fr; } } /* chat coach: input in fondo, messaggi che riempiono sopra */ .coach-chat{ display:flex; flex-direction:column; min-height:calc(100vh - 340px); } .coach-chat .chat-wrap{ flex:1; overflow-y:auto; min-height:180px; } .coach-chat-bar{ display:flex; gap:9px; padding-top:12px; margin-top:auto; } .coach-chat-bar .snd{ width:52px; height:52px; border-radius:15px; background:var(--grad-flat); color:#fff; display:grid; place-items:center; flex:none; box-shadow:var(--shadow-red); } /* ===== messaggi vocali ===== */ .snd.mic{ background:var(--surface); color:var(--txt); border:1px solid var(--line); box-shadow:none; } .snd.mic svg{ width:20px; height:20px; } .msg.voice{ padding:8px 10px; } .voice-msg{ display:flex; align-items:center; gap:10px; min-width:190px; } .voice-play{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; display:grid; place-items:center; flex:none; } .msg.them .voice-play{ background:var(--red); color:#fff; } .voice-play svg{ width:17px; height:17px; } .voice-prog{ flex:1; height:4px; border-radius:3px; background:rgba(255,255,255,.3); overflow:hidden; min-width:70px; } .voice-prog i{ display:block; height:100%; width:0; background:#fff; border-radius:3px; transition:width .1s linear; } .msg.them .voice-prog{ background:rgba(255,255,255,.14); } .msg.them .voice-prog i{ background:var(--red); } .voice-dur{ font-size:12px; font-weight:800; opacity:.85; flex:none; } .voice-rec-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + var(--safe-b)); z-index:120; width:min(520px, 94vw); display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:16px; background:var(--surface); border:1px solid var(--line); box-shadow:0 18px 44px -18px rgba(0,0,0,.85); } .voice-rec-bar .rec-dot{ width:12px; height:12px; border-radius:50%; background:var(--red); animation:recPulse 1s ease-in-out infinite; flex:none; } @keyframes recPulse{ 50%{ opacity:.25; } } .voice-rec-bar .rec-time{ font-weight:900; font-variant-numeric:tabular-nums; } .voice-rec-bar .rec-btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:12px; font-weight:800; font-size:13px; cursor:pointer; } .voice-rec-bar .rec-btn svg{ width:15px; height:15px; } .voice-rec-bar .rec-btn.cancel{ background:var(--bg-2); color:var(--txt-2); } .voice-rec-bar .rec-btn.send{ background:var(--grad-flat); color:#fff; box-shadow:var(--shadow-red); } /* trascrizione vocale */ .voice-tr-btn{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:800; background:rgba(255,255,255,.16); color:inherit; cursor:pointer; } .msg.them .voice-tr-btn{ background:var(--red-soft); color:var(--red); } .voice-tr-btn svg{ width:13px; height:13px; } .voice-tr{ margin-top:8px; } .voice-tr .tr-text{ font-size:13.5px; line-height:1.45; padding:8px 11px; border-radius:12px; background:rgba(0,0,0,.2); } .msg.them .voice-tr .tr-text{ background:rgba(255,255,255,.06); } .voice-tr .tr-status{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; opacity:.9; } .voice-tr .tr-status svg{ width:13px; height:13px; } .voice-tr .tr-status.err{ color:var(--red); } .voice-tr .tr-status i{ font-style:normal; opacity:.65; font-weight:600; } /* ===== import schede/nutrizione (Free copia+incolla / Premium AI) ===== */ .imp-ai .imp-drop{ width:100%; display:flex; align-items:center; gap:10px; justify-content:center; text-align:center; padding:15px; margin-bottom:9px; border:1.5px dashed var(--line); border-radius:14px; background:var(--bg-2); color:var(--txt-2); font-size:13px; font-weight:700; cursor:pointer; transition:border-color .14s, background .14s; } .imp-ai .imp-drop svg{ width:19px; height:19px; flex:none; } .imp-ai .imp-drop b{ color:var(--txt); } .imp-ai .imp-drop:hover, .imp-ai.drag .imp-drop{ border-color:var(--red); background:var(--red-soft); color:var(--txt); } .imp-row2{ display:flex; gap:9px; } .imp-row2 .btn{ flex:1; } .imp-step{ padding:16px 0; border-top:1px solid var(--line); } .imp-step:first-child{ border-top:none; padding-top:2px; } .imp-sep + .imp-step{ border-top:none; } .imp-step-h{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:800; margin-bottom:11px; } .imp-n{ width:22px; height:22px; border-radius:50%; background:var(--red); color:#fff; font-size:12px; font-weight:900; display:grid; place-items:center; flex:none; } .imp-gem{ display:inline-flex; align-items:center; justify-content:center; gap:6px; } .imp-instant{ width:100%; } .imp-sep{ display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--txt-3); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; } .imp-sep span{ flex:none; } .imp-sep::before, .imp-sep::after{ content:''; flex:1; height:1px; background:var(--line); } .imp-premium-cta{ width:100%; margin-top:12px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:12px; border-radius:14px; font-size:13.5px; font-weight:800; color:var(--red); background:var(--red-soft); border:1px solid rgba(255,46,62,.4); cursor:pointer; } .imp-premium-cta svg{ width:16px; height:16px; } .ups{ text-align:center; padding:6px 4px 4px; } .ups-ic{ width:56px; height:56px; border-radius:18px; margin:0 auto; display:grid; place-items:center; background:var(--grad-flat); color:#fff; box-shadow:var(--shadow-red); } .ups-ic svg{ width:28px; height:28px; } /* ===== full-screen 1920 SOLO per il coach su desktop ===== */ body.wide.role-coach #app{ max-width:none !important; width:100% !important; } /* topbar e barra sotto a tutta larghezza fino ai bordi (solo coach desktop) */ body.wide.role-coach .topbar, body.wide.role-coach .tabbar{ max-width:none; } .coach-home{ max-width:none; } /* contatori tag in alto (cliccabili = filtro lista) */ .coach-tagstats{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:-4px 0 16px; } .tagstat{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:12.5px; font-weight:700; cursor:pointer; transition:border-color .14s, background .14s; } .tagstat .d{ width:10px; height:10px; border-radius:50%; background:var(--c); flex:none; } .tagstat .l{ color:var(--txt-2); } .tagstat .n{ font-weight:900; min-width:14px; text-align:center; color:var(--txt); } .tagstat:hover{ border-color:var(--c); } .tagstat.on{ border-color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent); } .tagstat.on .l{ color:var(--txt); } .tagstat-sep{ width:1px; height:22px; background:var(--line); margin:0 3px; } .tagstat-clear{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:none; border:1px dashed var(--line); color:var(--txt-3); font-size:12.5px; font-weight:700; cursor:pointer; } .tagstat-clear svg{ width:13px; height:13px; } .tagstat-clear:hover{ color:var(--txt); border-color:var(--txt-3); } /* ===== dashboard pagamenti ===== */ .pay-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:16px; } .pay-stat{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; text-align:center; } .pay-stat .v{ font-size:26px; font-weight:900; letter-spacing:-.02em; } .pay-stat .k{ font-size:11px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin-top:4px; } .pay-chart-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:16px; margin-bottom:16px; } .pay-chart{ display:flex; align-items:flex-end; gap:12px; height:150px; margin-top:12px; } .pay-bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; } .pay-bar .amt{ font-size:11px; font-weight:800; color:var(--txt-2); height:14px; } .pay-bar .bar{ width:100%; max-width:56px; flex:1; display:flex; align-items:flex-end; background:var(--bg-2); border-radius:9px 9px 0 0; overflow:hidden; } .pay-bar .bar i{ display:block; width:100%; background:var(--grad-flat); border-radius:9px 9px 0 0; min-height:3px; transition:height .3s; } .pay-bar .lbl{ font-size:11px; color:var(--txt-3); font-weight:700; } .pay-list{ display:flex; flex-direction:column; gap:10px; } .pay-row{ display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px 15px; } .pay-info{ flex:1; min-width:0; } .pay-nm{ font-size:15px; font-weight:800; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .pay-actions{ display:flex; align-items:center; gap:8px; flex:none; } .pay-chip{ font-size:11px; font-weight:800; padding:2px 9px; border-radius:999px; border:1px solid; } .pay-chip.ok{ color:var(--ok); background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.4); } .pay-chip.due{ color:var(--warn); background:rgba(234,179,8,.14); border-color:rgba(234,179,8,.4); } .pay-chip.late{ color:var(--red); background:var(--red-soft); border-color:rgba(255,46,62,.4); } .pay-chip.none{ color:var(--txt-3); background:var(--bg-2); border-color:var(--line); } .pay-hrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); } .pay-hrow:last-of-type{ border-bottom:none; } @media (max-width:1023px){ .pay-stats{ grid-template-columns:repeat(2,1fr); } .pay-actions{ flex-wrap:wrap; justify-content:flex-end; } } /* board: rail CRM a sinistra + lista clienti che riempie tutta la larghezza */ .coach-board{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start; } body.wide .coach-board{ grid-template-columns:300px minmax(0,1fr); } .crm-rail{ display:flex; flex-direction:column; gap:12px; } body.wide .crm-rail{ position:sticky; top:74px; } .crm-box{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:14px; } .crm-box-h{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--txt-3); margin-bottom:11px; } .crm-dots{ display:flex; flex-direction:column; gap:8px; } .crm-dot{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; background:var(--bg-2); border:1px solid var(--line); cursor:grab; user-select:none; transition:transform .08s, border-color .12s; } .crm-dot:hover{ border-color:var(--c); } .crm-dot:active{ cursor:grabbing; } .crm-dot.dragging{ opacity:.5; } .crm-dot .d{ width:14px; height:14px; border-radius:50%; background:var(--c); flex:none; box-shadow:0 0 0 4px rgba(255,255,255,.05); } .crm-dot .l{ flex:1; font-size:13px; font-weight:700; } .crm-dot .cnt{ font-size:12px; font-weight:800; color:var(--txt-3); min-width:20px; height:20px; border-radius:7px; background:var(--surface); display:grid; place-items:center; } .crm-hint{ font-size:11.5px; color:var(--txt-3); line-height:1.5; display:flex; gap:7px; padding:2px 4px; } .crm-hint svg{ width:15px; height:15px; flex:none; margin-top:1px; } .client-list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 440px)); gap:11px; align-content:start; justify-content:start; } .client-list .client-card{ padding:13px 15px; } .client-list .client-card.drop-hover{ border-color:var(--red); box-shadow:0 0 0 2px var(--red-soft); transform:scale(1.01); } .cc-name-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:3px; } .tag-chip{ font-size:11px; font-weight:800; padding:2px 10px; border-radius:999px; color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); cursor:pointer; } .tag-chip:hover{ background:color-mix(in srgb, var(--c) 26%, transparent); } /* pannelli a fisarmonica nella colonna bio (Impostazioni cliente / Problemi & note) */ .cli-panel{ background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; } .cli-panel-h{ width:100%; display:flex; align-items:center; gap:9px; padding:13px 15px; font-weight:700; font-size:14px; text-align:left; background:none; color:var(--txt); cursor:pointer; } .cli-panel-h svg{ width:18px; height:18px; opacity:.85; } .cli-panel-h .cli-caret{ margin-left:auto; opacity:.5; transition:transform .18s; } .cli-panel.open .cli-panel-h .cli-caret{ transform:rotate(90deg); } .cli-panel-b{ display:none; padding:2px 15px 15px; } .cli-panel.open .cli-panel-b{ display:block; } .cli-panel-b .field{ margin-bottom:11px; } /* ===== pagina cliente desktop: freccia indietro + colonna bio a sx + tab in alto a dx ===== */ .coach-client-pg{ padding:0 !important; min-height:0; } .ccp{ display:flex; flex-direction:column; height:100dvh; } .ccp-top{ display:flex; align-items:center; gap:12px; padding:14px 22px; border-bottom:1px solid var(--line); flex:none; } .ccp-toptitle{ font-size:20px; font-weight:800; letter-spacing:-.02em; } .ccp-grid{ flex:1; min-height:0; display:grid; grid-template-columns:322px 1fr; grid-template-rows:minmax(0,1fr); gap:20px; padding:18px 22px calc(100px + var(--safe-b)); overflow:hidden; } .ccp-bio{ min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding-right:6px; } /* i pannelli NON si comprimono: mantengono la loro altezza, la colonna scorre (niente sovrapposizioni) */ .ccp-bio > *{ flex:0 0 auto; } .ccp-main{ min-height:0; overflow-y:auto; min-width:0; padding-right:6px; } .ccp-main .pill-tabs{ position:sticky; top:0; z-index:3; background:var(--bg); padding-bottom:12px; margin-bottom:2px; } .ccp-headcard{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:20px 16px; text-align:center; } .avatar.xl{ width:76px; height:76px; border-radius:22px; font-size:27px; margin:0 auto 11px; } .ccp-name{ font-size:19px; font-weight:800; letter-spacing:-.02em; } .ccp-substatus{ margin-top:10px; font-size:13px; font-weight:800; display:inline-flex; align-items:center; gap:6px; } .ccp-substatus svg{ width:15px; height:15px; } .ccp-bio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .ccp-box{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px 13px; } .ccp-box .k{ display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-bottom:4px; min-height:18px; } .ccp-box .v{ font-size:15px; font-weight:800; letter-spacing:-.01em; } .ccp-box.editing{ grid-column:1 / -1; border-color:color-mix(in srgb, var(--red) 45%, var(--line)); } .box-edit{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; opacity:.45; flex:none; color:var(--txt-2); } .box-edit:hover{ opacity:1; background:var(--bg-2); color:var(--red); } .box-edit svg{ width:13px; height:13px; } .box-edit-row{ display:flex; gap:7px; align-items:center; } .box-edit-row .input{ height:40px; padding:7px 10px; font-size:14px; flex:1; min-width:0; } .box-ok{ width:40px; height:40px; border-radius:11px; background:var(--grad-flat); color:#fff; display:grid; place-items:center; flex:none; box-shadow:var(--shadow-red); } .box-ok svg{ width:17px; height:17px; } .ccp-bio .coach-settings{ margin-top:2px; } .ccp-main .coach-chat{ min-height:calc(100dvh - 230px); } @media (max-width:1023px){ .ccp-grid{ grid-template-columns:1fr; } } /* ---------- avvisi ---------- */ .alert{ display:flex; gap:11px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-l); background:rgba(255,46,62,.1); border:1px solid rgba(255,46,62,.35); margin-bottom:14px; } .alert .ic{ color:var(--red); flex:none; margin-top:1px; } .alert .t{ font-size:14.5px; font-weight:800; line-height:1.45; } .alert .t b{ display:block; margin-bottom:3px; font-size:15px; } /* ---------- PRO paywall ---------- */ .pro-card{ position:relative; overflow:hidden; background:radial-gradient(ellipse at top,#1D0810 0%,#0C0508 60%,#08080A 100%); border:1px solid rgba(255,46,62,.35); box-shadow:0 24px 60px -22px rgba(255,46,62,.5); } .pro-card::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle at 90% -10%,rgba(255,46,62,.25),transparent 45%), radial-gradient(circle at -10% 120%,rgba(255,46,62,.15),transparent 45%); pointer-events:none; } .pro-card > *{ position:relative; z-index:1; } .pro-card.active{ background:radial-gradient(ellipse at top,#0C1D10 0%,#050C08 60%,#08080A 100%); border-color:rgba(47,208,122,.4); box-shadow:0 24px 60px -22px rgba(47,208,122,.35); } .pro-badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; background:var(--grad-flat); color:#fff; font-size:11px; font-weight:900; letter-spacing:1.2px; box-shadow:var(--shadow-red); } .pro-card.active .pro-badge{ background:linear-gradient(135deg,#2FD07A,#0B8F4D); box-shadow:0 12px 30px -12px rgba(47,208,122,.5); } .pro-badge .ic{ width:14px; height:14px; } .pro-price{ display:flex; align-items:baseline; gap:6px; margin:16px 0 10px; } .pro-price .p{ font-size:52px; font-weight:900; letter-spacing:-2.5px; background:var(--grad-flat); -webkit-background-clip:text; background-clip:text; color:transparent; } .pro-price .u{ font-size:16px; font-weight:800; color:var(--txt-2); } .pro-bul{ list-style:none; padding:0; margin:6px 0 0; } .pro-bul li{ display:flex; align-items:center; gap:9px; padding:7px 0; font-size:14.5px; font-weight:700; color:var(--txt-2); } .pro-bul li .ic{ width:18px; height:18px; color:var(--ok); stroke-width:3; } /* ---------- scanner ---------- */ .scan-wrap{ position:relative; width:100%; border-radius:var(--r-l); overflow:hidden; background:#000; border:1px solid var(--line); min-height:200px; max-height:46vh; margin:0 auto; } #scanReader{ width:100%; max-height:46vh; overflow:hidden; } #scanReader video{ width:100% !important; height:auto !important; max-height:46vh !important; display:block; object-fit:cover; } #scanReader img{ display:none; } /* nasconde l'eventuale icona/placeholder della libreria */ .scan-tip{ display:flex; align-items:center; gap:8px; justify-content:center; margin-top:12px; color:var(--txt-2); font-size:13px; font-weight:700; text-align:center; } .scan-tip svg{ width:15px; height:15px; flex:none; } /* ===== progressi atleta: prima&dopo + riepilogo misure ===== */ .ba-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .ba{ margin:0; } .ba-img{ aspect-ratio:3/4; border-radius:14px; overflow:hidden; background:var(--bg-2); border:1px solid var(--line); display:grid; place-items:center; } .ba-img img{ width:100%; height:100%; object-fit:cover; } .ba-empty{ color:var(--txt-3); } .ba-empty svg{ width:32px; height:32px; } .ba figcaption{ text-align:center; margin-top:8px; font-size:12px; color:var(--txt-3); font-weight:700; } .ba figcaption b{ display:block; color:var(--txt); font-size:13px; } .prog-summary{ display:flex; flex-direction:column; margin-top:6px; } .prog-row{ display:flex; align-items:center; gap:10px; padding:11px 2px; border-bottom:1px solid var(--line); } .prog-row:last-child{ border-bottom:none; } .prog-row .pl{ font-weight:800; font-size:14px; width:64px; flex:none; } .prog-row .pv{ flex:1; color:var(--txt-2); font-size:13.5px; } .prog-row .pd{ font-weight:900; font-size:14px; } .prog-row .pd.ok{ color:var(--ok); } .prog-row .pd.warn{ color:var(--warn); } /* ===== onboarding coach ===== */ .onb-coach .page-title .h1{ line-height:1.05; } .onb-ranges{ display:flex; flex-direction:column; gap:9px; } .onb-range{ width:100%; text-align:left; padding:14px 16px; border-radius:14px; background:var(--surface-2); border:1.5px solid var(--line); font-weight:800; font-size:15px; color:var(--txt); cursor:pointer; transition:border-color .14s, background .14s; } .onb-range:hover{ border-color:var(--red); } .onb-range.on{ border-color:var(--red); background:var(--red-soft); box-shadow:var(--shadow-red); } .onb-honesty{ font-size:13px; line-height:1.55; color:var(--txt-2); background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; gap:8px; align-items:flex-start; } .onb-honesty svg{ width:16px; height:16px; flex:none; margin-top:1px; } .onb-honesty.on{ display:block; border-color:color-mix(in srgb, var(--red) 40%, var(--line)); } .onb-honesty p{ margin:0 0 9px; } .onb-honesty p:last-child{ margin-bottom:0; } .onb-honesty .onb-price{ color:var(--red); font-weight:900; font-size:15px; white-space:nowrap; } .onb-honesty .onb-warn{ color:var(--warn); font-size:12px; } .onb-plan{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line); } .onb-plan-name{ font-weight:900; font-size:16px; color:var(--txt); } .onb-plan-price{ font-weight:900; font-size:20px; color:var(--red); white-space:nowrap; } .onb-plan-price small{ font-size:12px; color:var(--txt-3); font-weight:700; } .onb-tags{ display:flex; flex-wrap:wrap; gap:8px; } .onb-tag{ padding:9px 14px; border-radius:999px; background:var(--surface-2); border:1.5px solid var(--line); font-weight:700; font-size:13px; color:var(--txt-2); cursor:pointer; transition:border-color .14s, background .14s; } .onb-tag:hover{ border-color:var(--red); } .onb-tag.on{ border-color:var(--red); background:var(--red-soft); color:var(--txt); } /* ---------- cibi dentro un pasto ---------- */ .meal-foods{ margin:12px -14px -14px; padding:12px 14px 12px; border-top:1px solid var(--line-soft); background:var(--surface-2); border-radius:0 0 var(--r-m) var(--r-m); } .food-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-soft); } .food-row:last-child{ border-bottom:0; } .food-row .img{ width:36px; height:36px; border-radius:9px; background:#000 center/cover; flex:none; display:grid; place-items:center; color:var(--surface-3); } .food-row .nm{ font-size:13.5px; font-weight:800; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .food-row .mc{ font-size:11.5px; color:var(--txt-3); font-weight:700; margin-top:2px; } .food-row .g{ font-size:14px; font-weight:900; color:var(--red); flex:none; } .food-row .rm{ width:26px; height:26px; border-radius:8px; background:transparent; color:var(--txt-3); display:grid; place-items:center; flex:none; } .food-row .rm .ic{ width:15px; height:15px; } .food-add{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px; margin-top:8px; border-radius:12px; border:1.5px dashed rgba(255,46,62,.4); background:transparent; color:var(--red); font-size:13.5px; font-weight:900; } .food-add:active{ transform:scale(.98); background:var(--red-soft); } /* ---------- Progressione automatica (badge nella pagina esercizio) ---------- */ .prog-badge{ display:flex; align-items:center; gap:12px; padding:14px 15px; border-radius:16px; margin-bottom:14px; border:1px solid var(--line); background:var(--surface); animation:fadeUp .18s ease-out both; } .prog-badge > .ic{ width:26px; height:26px; flex:none; } .prog-badge .pb-t{ font-size:15.5px; font-weight:900; letter-spacing:-.2px; line-height:1.15; } .prog-badge .pb-s{ font-size:12.5px; color:var(--txt-3); font-weight:700; margin-top:3px; line-height:1.35; } .prog-badge.up { background:linear-gradient(135deg,rgba(47,208,122,.14),rgba(47,208,122,.03)); border-color:rgba(47,208,122,.45); } .prog-badge.up > .ic{ color:var(--ok); } .prog-badge.up .pb-t{ color:var(--ok); } .prog-badge.down { background:linear-gradient(135deg,rgba(255,176,32,.14),rgba(255,176,32,.03)); border-color:rgba(255,176,32,.45); } .prog-badge.down > .ic{ color:var(--warn); } .prog-badge.down .pb-t{ color:var(--warn); } .prog-badge.stay > .ic{ color:var(--txt-2); } .prog-badge.first{ background:var(--red-soft); border-color:rgba(255,46,62,.35); } .prog-badge.first > .ic{ color:var(--red); } .prog-badge.first .pb-t{ color:var(--red); } .prog-badge.skip > .ic{ color:var(--txt-3); } .prog-badge.locked{ cursor:pointer; background:radial-gradient(ellipse at top,#1D0810,transparent 90%); border-color:rgba(255,46,62,.4); } .prog-badge.locked > .ic{ color:var(--red); } .prog-badge.locked .pb-t{ color:var(--red); } .prog-badge.locked:active{ transform:scale(.99); } /* ---------- Campo rec cluster (editor esercizio) ---------- */ .cluster-field label .opt{ font-size:11px; font-weight:700; color:var(--txt-3); background:rgba(255,255,255,.06); padding:2px 7px; border-radius:6px; margin-left:6px; vertical-align:middle; } .cluster-rec{ background:linear-gradient(135deg,rgba(255,46,62,.16),rgba(255,46,62,.04)); border:1px solid rgba(255,46,62,.4); color:#fff; font-weight:800; } .cluster-rec:active{ transform:scale(.98); } /* ---------- Musica in home ---------- */ .music-home .mh-moods{ display:flex; gap:8px; flex-wrap:wrap; } .mh-chip{ display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 13px; border-radius:11px; font-size:13px; font-weight:900; color:#fff; background:linear-gradient(135deg,var(--c),#000); border:1px solid rgba(255,255,255,.1); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; } .mh-chip:active{ transform:scale(.94); box-shadow:0 0 0 2px var(--c) inset; } /* ---------- Takeover Partner Program (approvazione) ---------- */ #partnerCele:empty{ display:none; } .pc-overlay{ position:fixed; inset:0; z-index:9998; overflow:hidden; background:#000; display:flex; align-items:center; justify-content:center; opacity:0; animation:pcFadeIn .6s ease forwards; transition:opacity .6s ease; } @keyframes pcFadeIn{ to{ opacity:1; } } /* USCITA: dissolvenza morbida (poi il JS rimuove l'overlay) */ .pc-overlay.pc-out{ opacity:0; } .pc-overlay.pc-out .pc-fog{ opacity:1; transition:opacity .6s ease; } /* la nebbia rientra in uscita */ /* VIDEO: entra con opacity + micro-zoom (composito = FLUIDO, niente scatti da filter-blur) */ .pc-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.09); animation:pcVidIn 2s cubic-bezier(.2,.7,.2,1) .1s forwards; } @keyframes pcVidIn{ to{ opacity:1; transform:scale(1); } } .pc-scrim{ position:absolute; inset:0; opacity:0; animation:pcScrim 1.8s ease forwards .6s; background:radial-gradient(ellipse at center,rgba(0,0,0,.28) 0%,rgba(0,0,0,.8) 100%); } @keyframes pcScrim{ to{ opacity:1; } } /* NEBBIA: velo sfocato SOPRA tutta la scena che si dirada lentamente. Anima solo l'opacità (fluidissimo): sotto, video e banner emergono dalla nebbia — niente taglio netto. */ .pc-fog{ position:absolute; inset:0; z-index:2; pointer-events:none; backdrop-filter:blur(26px) brightness(.75); -webkit-backdrop-filter:blur(26px) brightness(.75); background:rgba(8,6,10,.5); opacity:1; animation:pcFog 2.3s ease forwards .1s; } @keyframes pcFog{ to{ opacity:0; } } /* BANNER: "pop lento" — cresce piano da piccolo con un filo di rimbalzo, mentre la nebbia si dirada. Nessun filter animato sul banner (la sfocatura d'ingresso la dà la nebbia). Poi "respira". */ .pc-card{ position:relative; z-index:1; width:min(88vw,380px); text-align:center; padding:26px 22px calc(24px + var(--safe-b)); border-radius:26px; background:rgba(14,10,16,.62); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1.5px solid var(--tc); opacity:0; transform:translateY(20px) scale(.72); animation:pcCardIn 1.35s cubic-bezier(.22,1.05,.32,1) .95s forwards, pcBreathe 5.5s ease-in-out 2.6s infinite; } @keyframes pcCardIn{ 0%{ opacity:0; transform:translateY(20px) scale(.72); } 55%{ opacity:1; } 100%{ opacity:1; transform:translateY(0) scale(1); } } @keyframes pcBreathe{ 0%,100%{ box-shadow:0 0 38px -10px var(--tc), 0 0 0 1px rgba(255,255,255,.05) inset; } 50%{ box-shadow:0 0 66px -4px var(--tc), 0 0 0 1px rgba(255,255,255,.12) inset; } } /* emoji: entra col banner, poi glow morbido continuo (niente translateY = niente glitch) */ .pc-emoji{ font-size:62px; line-height:1; animation:pcGlow 2.8s ease-in-out 2.4s infinite; } @keyframes pcGlow{ 0%,100%{ filter:drop-shadow(0 0 12px var(--tc)); } 50%{ filter:drop-shadow(0 0 28px var(--tc)); } } /* con animazioni ridotte: niente entrata animata ma il takeover DEVE restare visibile (niente nebbia) */ @media (prefers-reduced-motion:reduce){ .pc-overlay{ opacity:1 !important; animation:none !important; } .pc-video,.pc-scrim,.pc-card,.pc-emoji{ animation:none !important; opacity:1 !important; filter:none !important; transform:none !important; } .pc-fog{ display:none !important; } } .pc-hello{ font-size:13px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--txt-2); margin-top:10px; } .pc-tier{ font-size:30px; font-weight:900; letter-spacing:-.5px; margin:4px 0 2px; } .pc-sub{ font-size:13.5px; color:var(--txt-3); font-weight:700; margin-bottom:16px; } .pc-perks{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:9px; text-align:left; } .pc-perks li{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; font-weight:700; color:#fff; } .pc-perks li svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--tc); } .pc-ready{ width:100%; height:52px; border-radius:15px; font-size:16px; font-weight:900; letter-spacing:.5px; color:#fff; background:linear-gradient(135deg,var(--tc),#000); border:1.5px solid var(--tc); box-shadow:0 0 26px -6px var(--tc); transition:opacity .2s, transform .12s; } .pc-ready:disabled{ opacity:.45; } .pc-ready:not(:disabled):active{ transform:scale(.97); } /* ---------- Contatore inviti ---------- */ .ref-counter{ margin-top:14px; } .ref-top{ display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:800; color:var(--txt-2); margin-bottom:7px; } .ref-top .ic{ width:15px; height:15px; vertical-align:-2px; } .ref-top b{ color:var(--txt); } .ref-goal{ color:var(--red); font-weight:900; } .ref-bar{ height:8px; border-radius:6px; background:var(--surface-3); overflow:hidden; } .ref-bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#E8B54A,var(--red)); transition:width .4s ease; } .ref-gift{ margin-top:9px; display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; line-height:1.4; color:#E8B54A; background:rgba(232,181,74,.10); border:1px solid rgba(232,181,74,.3); border-radius:11px; padding:8px 11px; } .ref-gift .ic{ width:17px; height:17px; flex:none; } /* ---------- Classifica Creator ---------- */ .lb-row{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:16px; margin-bottom:9px; background:var(--surface-2); border:1px solid var(--line-soft); cursor:pointer; transition:transform .12s ease; } .lb-row:active{ transform:scale(.985); } .lb-row.mine{ border-color:var(--red); background:var(--red-soft); box-shadow:0 0 0 1px var(--red) inset; } .lb-row.top{ border-color:rgba(232,181,74,.32); background:linear-gradient(110deg,rgba(232,181,74,.11),var(--surface-2) 55%); } .lb-rank{ width:28px; text-align:center; font-weight:900; font-size:15px; color:var(--txt-3); flex:none; } .lb-row.top .lb-rank{ font-size:22px; } .lb-av{ width:47px; height:47px; border-radius:50%; flex:none; background-size:cover; background-position:center; background-color:var(--surface-3); border:2px solid transparent; } .lb-row.top .lb-av{ border-color:rgba(232,181,74,.55); } .lb-row.mine .lb-av{ border-color:var(--red); } .lb-av-ph{ display:grid; place-items:center; font-weight:900; font-size:16px; color:#fff; background:linear-gradient(135deg,var(--red),#3a0810); } .lb-info{ flex:1; min-width:0; } .lb-name{ font-weight:800; font-size:14.5px; display:flex; align-items:center; gap:6px; min-width:0; } .lb-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .lb-bio{ font-size:12.5px; color:var(--txt-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .lb-bio.muted{ color:var(--txt-3); } .lb-you{ font-size:9.5px; font-weight:900; background:var(--red); color:#fff; padding:1px 6px; border-radius:6px; flex:none; text-transform:uppercase; letter-spacing:.5px; } .lb-tier{ font-size:15px; line-height:1; flex:none; filter:drop-shadow(0 0 5px var(--tc)); } .lb-socs{ display:inline-flex; gap:5px; align-items:center; } .lb-soc{ text-decoration:none; line-height:0; display:inline-flex; transition:transform .12s ease; } .lb-soc:active{ transform:scale(.85); } .lb-score{ text-align:center; flex:none; min-width:52px; padding:6px 8px; border-radius:12px; background:rgba(255,46,62,.10); border:1px solid rgba(255,46,62,.22); } .lb-score b{ display:block; font-size:17px; font-weight:900; color:var(--red); line-height:1.05; } .lb-score span{ font-size:9px; color:var(--txt-3); font-weight:800; text-transform:uppercase; letter-spacing:.5px; } .lb-skel .lb-srow{ height:70px; border-radius:16px; margin-bottom:9px; background:var(--surface-2); animation:pulse 1.3s ease-in-out infinite; } @keyframes pulse{ 50%{ opacity:.5; } } .lb-stat-row{ display:flex; gap:10px; } .lb-stat-row > div{ flex:1; text-align:center; background:var(--surface-2); border-radius:12px; padding:12px 6px; } .lb-stat-row b{ display:block; font-size:19px; font-weight:900; } .lb-stat-row span{ font-size:11px; color:var(--txt-3); font-weight:700; } /* editor avatar */ .ce-av-wrap{ position:relative; width:96px; height:96px; margin:0 auto; cursor:pointer; } .ce-av{ width:96px; height:96px; border-radius:50%; background-size:cover; background-position:center; background-color:var(--surface-3); border:2px solid var(--line); } .ce-av-ph{ display:grid; place-items:center; font-weight:900; font-size:32px; color:#fff; background:linear-gradient(135deg,var(--red),#3a0810); } .ce-av-edit{ position:absolute; right:-2px; bottom:-2px; width:32px; height:32px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; border:3px solid var(--bg); } .ce-av-edit svg{ width:15px; height:15px; } /* ---------- Partner Program ---------- */ .partner-banner{ position:relative; overflow:hidden; border:1px solid rgba(232,181,74,.4); background:radial-gradient(ellipse at top left,#241705 0%,#160c06 55%,#0b0708 100%); box-shadow:0 24px 60px -24px rgba(232,181,74,.45); } .partner-banner .pb-glow{ position:absolute; top:-40%; right:-20%; width:70%; height:180%; background:radial-gradient(ellipse,rgba(232,181,74,.22),transparent 65%); pointer-events:none; } .pb-badge{ position:relative; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; background:linear-gradient(135deg,#E8B54A,#C77B32); color:#1a1205; font-size:11px; font-weight:900; letter-spacing:1.1px; box-shadow:0 10px 26px -12px rgba(232,181,74,.7); } .pb-badge .ic{ width:14px; height:14px; } .pb-title{ position:relative; font-size:22px; font-weight:900; letter-spacing:-.4px; margin-top:11px; } /* titolo luccicante oro→rosso con riflesso che scorre */ .partner-shine{ background:linear-gradient(92deg,#E8B54A 0%,#FFE9A8 22%,#FF6A3D 48%,#FF2E3E 68%,#E8B54A 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 10px rgba(255,120,60,.35)); animation:shine 4.5s linear infinite; } @keyframes shine{ to{ background-position:220% 0; } } @media (prefers-reduced-motion:reduce){ .partner-shine{ animation:none; } } .partner-hero{ text-align:center; padding:8px 4px 18px; } .ph-badge{ width:64px; height:64px; border-radius:20px; margin:0 auto; display:grid; place-items:center; background:linear-gradient(135deg,var(--red),#3a0810); color:#fff; box-shadow:0 12px 30px -10px var(--red-glow); } .ph-badge svg{ width:32px; height:32px; } .partner-status{ display:flex; align-items:center; gap:13px; margin-bottom:16px; } .partner-status svg{ width:26px; height:26px; flex:none; color:var(--txt-2); } .partner-status.approved svg{ color:#E8B54A; } .partner-status.approved{ border:1px solid rgba(232,181,74,.4); } .tier-card{ background:var(--surface-2); border:1px solid var(--line-soft); border-left:3px solid var(--tc); border-radius:16px; padding:14px 15px; margin-bottom:12px; } .tier-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } .tier-emoji{ font-size:26px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); } .tier-name{ font-weight:900; font-size:16px; letter-spacing:-.2px; color:var(--tc); } .tier-sub{ font-size:12.5px; color:var(--txt-3); font-weight:700; } .tier-req{ font-size:13px; color:var(--txt-2); font-weight:700; display:flex; gap:7px; align-items:flex-start; padding:9px 11px; background:rgba(255,255,255,.03); border-radius:11px; margin-bottom:10px; } .tier-req svg{ width:15px; height:15px; flex:none; margin-top:1px; color:var(--tc); } .tier-perks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; } .tier-perks li{ display:flex; gap:8px; align-items:flex-start; font-size:13.5px; font-weight:600; color:var(--txt); } .tier-perks li svg{ width:15px; height:15px; flex:none; margin-top:2px; color:var(--tc); } .chip-grid{ display:flex; flex-wrap:wrap; gap:8px; } .pick-chip{ padding:10px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); color:var(--txt-2); font-size:13.5px; font-weight:800; transition:.12s; } .pick-chip.on{ background:var(--red-soft); border-color:var(--red); color:var(--red); } .pick-chip:active{ transform:scale(.96); } .ok-check{ width:64px; height:64px; border-radius:50%; margin:0 auto; display:grid; place-items:center; background:linear-gradient(135deg,#20c072,#0d7a44); color:#fff; } .ok-check svg{ width:34px; height:34px; } /* selettore suono fine recupero */ .snd-list{ display:flex; flex-direction:column; gap:6px; margin:4px 0 12px; } .snd-row{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:13px; background:var(--surface-2); border:1px solid var(--line-soft); text-align:left; transition:border-color .15s ease; } .snd-row.on{ border-color:var(--red); background:var(--red-soft); } .snd-ic{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--surface-3); color:var(--txt-3); } .snd-row.on .snd-ic{ background:var(--red); color:#fff; } .snd-ic svg{ width:15px; height:15px; } .snd-name{ flex:1; font-weight:800; font-size:14.5px; } .snd-play{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--surface-3); color:var(--txt); } .snd-play svg{ width:16px; height:16px; } .snd-play:active{ transform:scale(.86); } /* header cliccabile (es. Bacheca in home): solo l'header apre, non il corpo */ .tappable-head{ cursor:pointer; border-radius:12px; margin:-4px; padding:4px; transition:background .15s ease; } .tappable-head:active{ background:var(--surface-2); } /* ---------- Playlist (Preferite) ---------- */ .pl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; } .pl-card{ display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:16px; text-align:left; background:var(--surface-2); border:1px solid var(--line-soft); cursor:pointer; transition:transform .12s ease; } .pl-card:active{ transform:scale(.97); } .pl-card.new{ border-style:dashed; background:transparent; } .pl-cover{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:8px; background:linear-gradient(135deg,var(--red),#3a0810); color:#fff; } .pl-cover.liked, .pl-card.liked .pl-cover{ background:linear-gradient(135deg,#FF2E3E,#8A0C18); } .pl-cover svg{ width:22px; height:22px; } .pl-cover.big{ width:56px; height:56px; border-radius:15px; } .pl-name{ font-weight:800; font-size:15px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pl-count{ font-size:12px; color:var(--txt-3); font-weight:600; } .pl-back{ display:inline-flex; align-items:center; gap:6px; background:transparent; color:var(--txt-2); font-weight:700; font-size:14px; padding:4px 0 12px; cursor:pointer; } .pl-back svg{ width:18px; height:18px; } .pl-detail-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .pl-detail-name{ font-weight:900; font-size:20px; letter-spacing:-.3px; } .pick-row{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 8px; border-radius:12px; background:transparent; cursor:pointer; } .pick-row:active{ background:var(--surface-2); } .pick-ic{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--red),#3a0810); color:#fff; } .pick-ic svg{ width:18px; height:18px; } .pick-check{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--line); color:var(--txt-3); } .pick-check.on{ background:var(--red); border-color:var(--red); color:#fff; } .pick-check svg{ width:16px; height:16px; } /* ---------- Volume player ---------- */ .md-vol{ display:flex; align-items:center; gap:13px; padding:6px 6px; margin:8px 0 18px; color:var(--txt-2); } .md-vol svg{ width:21px; height:21px; flex-shrink:0; } .vol-pct{ font-size:13.5px; font-weight:800; color:var(--txt-2); min-width:44px; text-align:right; } .vol-slider{ -webkit-appearance:none; appearance:none; flex:1; height:9px; border-radius:9px; background:linear-gradient(90deg,var(--red),rgba(255,255,255,.15)); outline:none; cursor:pointer; } .vol-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:2.5px solid var(--red); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.5); } .vol-slider::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:#fff; border:2.5px solid var(--red); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.5); } /* ---------- Hypervex Beats ---------- */ body.music-on .actionbar{ bottom:calc(72px + var(--safe-b) + 60px); } body.music-on .screen{ padding-bottom:calc(164px + var(--safe-b)); } body.music-on .chat-bar{ bottom:calc(72px + var(--safe-b) + 60px); } .mini-player{ position:fixed; left:8px; right:8px; bottom:calc(72px + var(--safe-b)); z-index:44; max-width:504px; margin:0 auto; height:60px; padding:0 2px 0 8px; display:flex; align-items:center; gap:5px; border-radius:15px; background:linear-gradient(180deg,#17171C,#0D0D11); border:1px solid var(--line); box-shadow:0 16px 34px -16px rgba(0,0,0,.9); overflow:hidden; animation:sheetUp .3s cubic-bezier(.2,.9,.3,1) both; } .mini-art{ width:40px; height:40px; border-radius:10px; flex:none; display:grid; place-items:center; color:#fff; position:relative; } .mini-art .ic{ width:20px; height:20px; } /* X per spegnere la musica e chiudere il banner (con conferma) — più grande, sul bordo sx */ .mini-x{ position:absolute; top:-5px; left:-5px; width:24px; height:24px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; z-index:2; border:2px solid #0D0D11; box-shadow:0 2px 7px rgba(0,0,0,.65); } .mini-x svg{ width:14px; height:14px; } .mini-x:active{ transform:scale(.82); } .mini-info{ flex:1; min-width:0; } .mini-t{ font-size:13.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mini-a{ font-size:11.5px; color:var(--txt-3); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mini-b{ width:46px; height:52px; display:grid; place-items:center; color:var(--txt-2); flex:none; } .mini-b .ic{ width:23px; height:23px; } .mini-b.big{ color:var(--txt); } .mini-b.big .ic{ width:28px; height:28px; } .mini-b:active{ transform:scale(.88); } .mini-bar{ position:absolute; left:0; right:0; bottom:0; height:2.5px; background:rgba(255,255,255,.08); } .mini-bar i{ display:block; height:100%; background:var(--red); width:0; transition:width .25s linear; } .music-drawer{ width:100%; max-width:520px; background:var(--bg-2); border-radius:26px 26px 0 0; border-top:1px solid var(--line); padding:8px var(--pad) calc(24px + var(--safe-b)); max-height:92vh; overflow-y:auto; animation:sheetUp .32s cubic-bezier(.2,.9,.3,1) both; } .md-head{ display:flex; align-items:center; gap:10px; padding:6px 0 14px; } .md-head > div:first-child{ color:var(--red); } .md-title{ font-size:19px; font-weight:900; letter-spacing:-.3px; } .md-now{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--r-l); border:1px solid var(--line); margin-bottom:14px; } .md-now-art{ width:52px; height:52px; border-radius:13px; flex:none; display:grid; place-items:center; color:#fff; } .md-now-t{ font-size:15.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .md-now-a{ font-size:12.5px; color:var(--txt-3); font-weight:700; margin-bottom:8px; } .md-seek{ height:6px; border-radius:4px; background:var(--surface-3); overflow:hidden; cursor:pointer; } .md-seek i{ display:block; height:100%; background:var(--red); width:0; } .md-play{ width:50px; height:50px; border-radius:50%; background:var(--grad-flat); color:#fff; flex:none; display:grid; place-items:center; box-shadow:var(--shadow-red); } .md-play .ic{ width:24px; height:24px; } .md-play:active{ transform:scale(.92); } /* controlli prec/succ nel player esteso: bersagli grandi e comodi da toccare */ .md-nav{ display:flex; align-items:center; gap:4px; flex:none; } .md-nav-b{ width:46px; height:50px; display:grid; place-items:center; color:var(--txt); flex:none; } .md-nav-b .ic{ width:26px; height:26px; } .md-nav-b:active{ transform:scale(.86); } .md-tabs{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-bottom:16px; } .md-tabs button{ display:flex; flex-direction:column; align-items:center; gap:4px; height:58px; border-radius:13px; background:var(--surface-2); border:1px solid var(--line); color:var(--txt-3); font-size:11px; font-weight:800; } .md-tabs button span{ font-size:19px; line-height:1; } .md-tabs button.on{ background:var(--red-soft); border-color:var(--red); color:var(--red); } .md-tagline{ font-size:13px; color:var(--txt-2); font-weight:700; line-height:1.4; margin-bottom:14px; } .trk{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 10px; border-radius:12px; background:transparent; transition:background .14s; margin-bottom:2px; } .trk:active{ background:var(--surface-2); } .trk.on{ background:var(--red-soft); } .trk-n{ width:30px; height:30px; border-radius:8px; background:var(--surface-3); color:var(--txt-2); display:grid; place-items:center; font-size:13px; font-weight:900; flex:none; } .trk.on .trk-n{ background:var(--red); color:#fff; } .trk-n .ic{ width:15px; height:15px; } .trk-t{ font-size:14.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .trk-a{ font-size:12px; color:var(--txt-3); font-weight:700; } .trk-play{ width:18px; height:18px; color:var(--txt-3); flex:none; } .eq{ display:flex; align-items:flex-end; gap:2.5px; height:15px; flex:none; } .eq i{ width:3px; height:100%; background:var(--red); border-radius:2px; transform-origin:bottom; transform:scaleY(.3); will-change:transform; animation:eqb .9s ease-in-out infinite; } /* durate e delay negativi diversi = movimento organico, fluido, sfasato (stile Spotify) */ .eq i:nth-child(1){ animation-duration:.82s; animation-delay:-.20s; } .eq i:nth-child(2){ animation-duration:1.08s; animation-delay:-.55s; } .eq i:nth-child(3){ animation-duration:.68s; animation-delay:-.35s; } @keyframes eqb{ 0%,100%{ transform:scaleY(.26); } 50%{ transform:scaleY(1); } } .md-embed{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#000; } .md-embed.spotify iframe{ width:100%; height:360px; border:0; display:block; } .md-embed.youtube{ position:relative; aspect-ratio:16/9; } .md-embed.youtube iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .md-spotify{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:14px; height:48px; border-radius:14px; background:#1DB954; color:#fff; font-size:14px; font-weight:900; text-decoration:none; } .md-spotify:active{ transform:scale(.98); } .md-spotify .ic{ width:18px; height:18px; } /* ---------- questionario iniziale ---------- */ .onb{ padding-top:calc(14px + var(--safe-t)); } .onb-head{ display:flex; align-items:center; gap:12px; padding:0 var(--pad) 22px; } .onb-prog{ flex:1; height:5px; border-radius:4px; background:var(--surface-3); overflow:hidden; } .onb-prog i{ display:block; height:100%; border-radius:4px; background:var(--grad-flat); box-shadow:0 0 14px var(--red-glow); transition:width .35s cubic-bezier(.2,.9,.3,1); } .onb-intro{ text-align:center; padding:24px 0 10px; animation:fadeUp .3s ease both; } .onb-badges{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:18px; } .onb-q{ font-size:27px; font-weight:900; letter-spacing:-.9px; line-height:1.12; margin-bottom:8px; } .onb-sub{ font-size:14.5px; color:var(--txt-2); font-weight:600; line-height:1.5; margin:0 0 22px; } .onb-num{ height:66px; font-size:28px; font-weight:900; text-align:center; letter-spacing:-1px; } .onb-opt{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:17px 16px; margin-bottom:10px; border-radius:var(--r-l); background:var(--surface); border:1.5px solid var(--line); transition:transform .15s, border-color .15s, background .15s; } .onb-opt:active{ transform:scale(.98); } .onb-opt.on{ border-color:var(--red); background:var(--red-soft); box-shadow:0 0 0 4px rgba(255,46,62,.08); } .onb-opt.sm{ padding:13px 15px; font-size:14.5px; font-weight:800; margin-bottom:8px; } .onb-opt.big{ flex-direction:column; justify-content:center; padding:26px 12px; gap:10px; text-align:center; } .onb-opt.big .ic{ width:30px; height:30px; color:var(--red); } .onb-opt .onb-ico{ width:44px; height:44px; border-radius:14px; background:var(--red-soft); color:var(--red); display:grid; place-items:center; flex:none; } .onb-opt.on .onb-ico{ background:var(--grad-flat); color:#fff; box-shadow:var(--shadow-red); } .onb-opt-t{ flex:1; min-width:0; } .onb-opt-t b{ display:block; font-size:16px; font-weight:900; letter-spacing:-.2px; } .onb-opt-t span{ font-size:13px; color:var(--txt-3); font-weight:700; } .onb-x{ font-size:13px; font-weight:900; color:var(--txt-3); flex:none; } .onb-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .parq-row{ padding:14px 0; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:12px; } .parq-q{ flex:1; font-size:14.5px; font-weight:700; line-height:1.4; } .parq-btns{ display:flex; gap:6px; flex:none; } .parq-btns button{ width:52px; height:40px; border-radius:12px; background:var(--surface-2); border:1.5px solid var(--line); color:var(--txt-2); font-size:14px; font-weight:900; } .parq-btns button.on.no{ background:rgba(47,208,122,.16); border-color:var(--ok); color:var(--ok); } .parq-btns button.on.yes{ background:var(--red-soft); border-color:var(--red); color:var(--red); } .wq{ margin-bottom:22px; } .wq-q{ font-size:16px; font-weight:900; margin-bottom:10px; letter-spacing:-.2px; } .kcal-hero{ text-align:center; padding:26px 18px; background:radial-gradient(ellipse at top,#1D0810,#0C0508 70%); border-color:rgba(255,46,62,.3); } .kcal-n{ font-size:62px; font-weight:900; letter-spacing:-3px; line-height:1; background:var(--grad-flat); -webkit-background-clip:text; background-clip:text; color:transparent; } .kcal-u{ font-size:15px; font-weight:900; color:var(--txt-2); margin-top:4px; } .kcal-sub{ font-size:12.5px; color:var(--txt-3); font-weight:700; margin-top:8px; } .calc-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:14px; font-weight:700; color:var(--txt-2); } .calc-row span{ flex:1; } .calc-row b{ color:var(--txt); font-weight:900; } .calc-row.tot{ border-bottom:0; color:var(--txt); } .calc-row.tot b{ color:var(--red); font-size:16px; } .wdims{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .wdim{ text-align:center; } .wdim-b{ height:64px; border-radius:9px; background:var(--surface-3); display:flex; align-items:flex-end; overflow:hidden; } .wdim-b i{ display:block; width:100%; background:var(--ok); border-radius:9px; transition:height .5s; } .wdim.bad .wdim-b i{ background:var(--red); box-shadow:0 0 14px var(--red-glow); } .wdim-l{ font-size:11px; font-weight:900; color:var(--txt-3); margin-top:6px; text-transform:uppercase; letter-spacing:.4px; } .wdim.bad .wdim-l{ color:var(--red); } /* ---------- banner aggiornamento PWA ---------- */ .update-banner{ position:fixed; left:12px; right:12px; bottom:calc(88px + var(--safe-b)); z-index:80; max-width:496px; margin:0 auto; padding:12px 14px; border-radius:16px; background:var(--surface-3); border:1px solid rgba(255,46,62,.45); color:#fff; display:flex; align-items:center; gap:12px; box-shadow:0 20px 50px -18px rgba(0,0,0,.9); animation:sheetUp .3s cubic-bezier(.2,.9,.3,1) both; } .update-banner .ic{ color:var(--red); width:22px; height:22px; flex:none; } .update-banner .t{ flex:1; font-size:13.5px; font-weight:800; line-height:1.3; } .update-banner .t b{ display:block; font-size:14.5px; margin-bottom:2px; } .update-banner button{ height:36px; padding:0 14px; border-radius:11px; background:var(--grad-flat); color:#fff; font-size:13px; font-weight:900; } .update-banner .close{ background:transparent; color:var(--txt-3); padding:0; width:28px; height:28px; } /* ---------- Meal Prep (import Gemini) ---------- */ .mealprep-cta{ position:relative; overflow:hidden; border:1px solid rgba(47,208,122,.3); background:radial-gradient(ellipse at top left,#0C1D12 0%,#0A100C 60%,#08080A 100%); } .mp-badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; background:linear-gradient(135deg,#2FD07A,#0B8F4D); color:#04140b; font-size:11px; font-weight:900; letter-spacing:1px; } .mp-badge svg{ width:14px; height:14px; } .mp-meal{ background:var(--surface-2); border:1px solid var(--line-soft); border-radius:16px; padding:14px; margin-bottom:10px; } .mp-meal-head{ display:flex; align-items:flex-start; gap:12px; } .mp-time{ font-size:11px; font-weight:900; letter-spacing:.6px; text-transform:uppercase; color:var(--red); } .mp-name{ font-size:15.5px; font-weight:800; line-height:1.25; margin-top:2px; } .mp-tot{ font-size:22px; font-weight:900; flex:none; line-height:1; } .mp-tot small{ display:block; font-size:10px; font-weight:700; color:var(--txt-3); text-align:right; } .mp-macros{ font-size:12.5px; color:var(--txt-2); font-weight:700; margin:6px 0 10px; } .mp-food{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13px; padding:5px 0; border-top:1px solid var(--line-soft); } .mp-food-nm{ font-weight:700; color:var(--txt); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mp-food-g{ font-size:12px; color:var(--txt-3); font-weight:700; flex:none; } .mp-food-g b{ color:var(--txt); } .mp-note{ display:flex; gap:7px; align-items:flex-start; font-size:12.5px; line-height:1.4; font-weight:600; color:#E8B54A; background:rgba(232,181,74,.09); border-radius:10px; padding:8px 10px; margin-top:10px; } .mp-note svg{ width:15px; height:15px; flex:none; margin-top:1px; } .mp-eat:disabled{ opacity:.6; color:var(--ok); } .mp-shop-list{ display:flex; flex-direction:column; gap:7px; } .mp-shop{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:11px 13px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line-soft); transition:.12s; } .mp-shop.on{ opacity:.55; } .mp-shop.on .mp-shop-nm{ text-decoration:line-through; } .mp-check{ width:22px; height:22px; border-radius:6px; flex:none; display:grid; place-items:center; border:1.5px solid var(--line); color:#fff; } .mp-shop.on .mp-check{ background:var(--ok); border-color:var(--ok); } .mp-check svg{ width:14px; height:14px; } .mp-shop-nm{ flex:1; font-weight:800; font-size:14px; } .mp-shop-g{ font-size:12.5px; color:var(--txt-3); font-weight:700; flex:none; } /* ---------- Drag pasto → Ricette ---------- */ /* durante il drag NON blocco lo scroll con overflow:hidden (mi serve l'auto-scroll ai bordi per raggiungere "Ricette" da un pasto in fondo); lo scroll nativo è già inibito da touch-action:none + preventDefault nel pointermove. */ body.dragging-meal{ -webkit-user-select:none; user-select:none; touch-action:none; } .meal-ghost{ position:fixed; z-index:9995; margin:0; pointer-events:none; will-change:transform; border:1.5px solid var(--red); border-radius:16px; opacity:.97; background:var(--bg-2); box-shadow:0 22px 55px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(255,46,62,.4); } .meal-dragging-src{ opacity:.3; transition:opacity .15s ease; } #recipesDropZone{ transition:transform .16s cubic-bezier(.3,1.4,.5,1), background .16s ease, color .16s ease, box-shadow .16s ease; } #recipesDropZone.drop-hot{ transform:scale(1.4); background:var(--red); color:#fff; box-shadow:0 0 0 5px var(--red-glow), 0 8px 26px -6px var(--red-glow); } #recipesDropZone.drop-pulse{ animation:dropPulse .52s ease; } @keyframes dropPulse{ 0%{ transform:scale(1.4); } 45%{ transform:scale(1.12); } 100%{ transform:scale(1); } } /* ---------- Meal Prep v2: icona info + modale micro/idratazione ---------- */ .mp-info{ width:30px; height:30px; border-radius:50%; display:inline-grid; place-items:center; margin-bottom:4px; background:var(--surface-3); color:var(--txt-2); border:1px solid var(--line); } .mp-info svg{ width:16px; height:16px; } .mp-info:active{ transform:scale(.9); } .micro-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } .micro-grid .micro-cell:first-child{ grid-column:1 / -1; } /* acqua a tutta larghezza */ .micro-cell{ display:flex; align-items:center; gap:10px; padding:12px 13px; border-radius:13px; background:var(--surface-2); border:1px solid var(--line-soft); font-size:19px; } .micro-cell b{ font-size:19px; font-weight:900; color:var(--txt); margin-left:2px; } .micro-cell span{ font-size:12px; font-weight:700; color:var(--txt-3); margin-left:auto; text-align:right; } .mp-transparency{ margin-top:18px; padding:14px 15px; border-radius:14px; font-size:13px; line-height:1.55; font-weight:600; color:var(--txt-2); background:linear-gradient(135deg,rgba(232,181,74,.12),rgba(232,181,74,.04)); border:1px solid rgba(232,181,74,.32); } .mp-transparency b{ color:#E8B54A; } .mp-transparency i{ color:var(--txt); font-style:italic; }