/* ======= Figura anatomica ======= */ /* Lo spazio della figura e' riservato in anticipo con un rapporto fisso: prima l altezza dipendeva dal contenuto, cosi quando compariva o spariva il pulsante delle proposte il riquadro si ridimensionava e il disegno sembrava stirarsi per un istante. */ .body-map-wrap { display: flex; justify-content: center; align-items: center; margin-bottom: 12px; width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; aspect-ratio: 218 / 256; contain: layout size; } .body-map-wrap svg { width: 100%; height: 100%; display: block; /* senza questo il browser puo allungare il disegno per riempire lo spazio */ preserveAspectRatio: xMidYMid meet; } /* ripiego per i browser senza aspect-ratio */ @supports not (aspect-ratio: 1) { .body-map-wrap { height: 288px; } } .bm-base { fill: color-mix(in srgb, var(--text) 5%, var(--surface-1)); stroke: var(--border-strong); stroke-width: 1.1; stroke-linejoin: round; } /* linea di separazione del colore di fondo: ogni muscolo si stacca dal vicino */ .bm-sil { fill: color-mix(in srgb, var(--text) 16%, var(--surface-1)); } .bm-dark { fill: color-mix(in srgb, var(--text) 8%, var(--surface-1)); } .bm-ln { fill: none; stroke: color-mix(in srgb, var(--text) 40%, transparent); stroke-width: 0.5; stroke-linecap: round; } html[data-theme="light"] .bm-sil { fill: color-mix(in srgb, var(--text) 13%, var(--surface-1)); } html[data-theme="light"] .bm-dark { fill: color-mix(in srgb, var(--text) 26%, var(--surface-1)); } html[data-theme="light"] .bm-ln { stroke: var(--surface-1); stroke-width: 0.6; } .bm-muscle { fill: color-mix(in srgb, var(--text) 22%, var(--surface-1)); stroke: color-mix(in srgb, var(--text) 30%, var(--surface-1)); stroke-width: 0.5; stroke-linejoin: round; transition: fill .25s ease; } /* Animazione della tavola anatomica originale: il corpo "respira" appena (scala 1,01 in 4 s) e il muscolo scelto si accende con un bagliore e poi pulsa. Il bagliore segue il colore del marchio, non un colore fisso. */ @keyframes bm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.01); } } @keyframes bm-activate { 0% { opacity: 0.2; filter: drop-shadow(0 0 0 transparent); } 100% { opacity: 1; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--primary) 85%, transparent)); } } @keyframes bm-glow { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--primary) 85%, transparent)); } 50% { opacity: 0.68; filter: drop-shadow(0 0 1px color-mix(in srgb, var(--primary) 25%, transparent)); } } .pick-fig .bm-body, .og-exfig .bm-body, .ex-fig .bm-body, .pick-fig .bm-muscle, .og-exfig .bm-muscle, .ex-fig .bm-muscle { animation: none !important; filter: none !important; } .bm-body { transform-box: fill-box; transform-origin: center; animation: bm-breathe 4s ease-in-out infinite; } .bm-muscle.sel { animation: bm-activate 0.6s ease-out forwards, bm-glow 2.2s ease-in-out 0.6s infinite; } @media (prefers-reduced-motion: reduce) { .bm-body { animation: none; } .bm-muscle.sel { animation: none; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--primary) 60%, transparent)); } } @keyframes bm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.68; } } .bm-fill { fill: color-mix(in srgb, var(--text) 5%, var(--surface-1)); stroke: none; } .bm-muscle.active { fill: var(--primary); stroke: var(--surface-1); animation: bm-pulse 2.2s ease-in-out infinite; } .bm-label { fill: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: 0.6px; text-anchor: middle; } /* figurina degli elenchi (muscleFigureLista): copie di , a cui lo stile arriva senza antenati. Stessi colori di .bm-* qui sopra (il tema chiaro passa per le variabili, ereditate dalla riga) e ferma come le altre figurine delle righe */ :root { --mf-sil: 16%; --mf-dark: 8%; --mf-ln: color-mix(in srgb, var(--text) 40%, transparent); --mf-ln-w: 0.5; } html[data-theme="light"] { --mf-sil: 13%; --mf-dark: 26%; --mf-ln: var(--surface-1); --mf-ln-w: 0.6; } .mf-sil { fill: color-mix(in srgb, var(--text) var(--mf-sil), var(--surface-1)); } .mf-dark { fill: color-mix(in srgb, var(--text) var(--mf-dark), var(--surface-1)); } .mf-ln { fill: none; stroke: var(--mf-ln); stroke-width: var(--mf-ln-w); stroke-linecap: round; } .mf-muscle { fill: color-mix(in srgb, var(--text) 22%, var(--surface-1)); stroke: color-mix(in srgb, var(--text) 30%, var(--surface-1)); stroke-width: 0.5; stroke-linejoin: round; } .mf-muscle.mf-on { fill: var(--primary); stroke: var(--surface-1); } .group-day-current { font-size: 0.74rem; line-height: var(--lh-tight); color: var(--accent); font-weight: 800; margin-top: var(--sp-1); } .bm-line { fill: none; stroke: rgba(0,0,0,0.25); stroke-width: 0.7; } /* ======= Gruppi muscolari ======= */ .group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .group-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 12px 6px; text-align: center; cursor: pointer; transition: transform .1s ease; } .group-card:active { transform: scale(0.96); } .group-card { position: relative; display: block; width: 100%; font: inherit; color: inherit; } /* รจ un