/* Sets · home-strength.css Stijl voor de krachtspiegel op de home. Zie js/home-strength.js. Alle kleuren komen uit de tokens van styles/polish.css, zodat de lichte modus meekomt zodra die tokens veranderen — er staat hier bewust geen enkele hardcoded hex. Het thema is de `.dark`-class op ; de twee `html:not(.dark)`-regels onderaan zijn de enige plekken waar licht écht iets anders wil dan alleen een ander token. G2: het belangrijkste getal van de kaart is groot, mono en `tabular-nums` — een percentage dat tijdens het optellen op zijn plaats blijft staan in plaats van te wiebelen. */ .home-strength-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 16px; border-radius: 20px; border: 1px solid var(--sets-border); /* G5: kaarten blijven mat — geen glas, dat is voor tijdelijke lagen. */ background: var(--sets-surface-1); box-shadow: var(--sets-shadow-card); text-align: left; transition: transform 0.15s var(--sets-ease-out), opacity 0.15s ease; } .home-strength-card:active { transform: scale(0.98); opacity: 0.9; } .home-strength-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .home-strength-kicker { font-size: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sets-text-3); } /* Oefeningnamen kunnen lang zijn ("Barbell Romanian Deadlift"); één regel met ellips houdt de kaarthoogte voorspelbaar. */ .home-strength-exercise { max-width: 100%; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--sets-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-strength-value { display: flex; align-items: baseline; gap: 3px; margin-top: 2px; } .home-strength-number { font-size: 44px; line-height: 1.02; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.02em; color: var(--sets-text); } .home-strength-unit { font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--sets-text-3); } /* G3: lime voor gewone voortgang, goud blijft voor PR's. Een daling krijgt geen rood — hij hoeft niet te schreeuwen, alleen te kloppen. */ .home-strength-card--up .home-strength-number, .home-strength-card--up .home-strength-unit { color: var(--sets-accent-text); } .home-strength-sub { margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--sets-text-2); } .home-strength-hint { margin-top: 2px; font-size: 10.5px; color: var(--sets-text-3); } .home-strength-chart { display: flex; align-items: center; justify-content: flex-end; width: 132px; flex: 0 0 auto; } .home-strength-spark svg { display: block; } /* Onder ~340px vreet de sparkline de tekst op; dan telt het getal. */ @media (max-width: 340px) { .home-strength-chart { display: none; } } /* Het accentvlak onder de lijn is in lichte modus dieper van kleur en daardoor zwaarder; iets minder dekking geeft hetzelfde gewicht. */ html:not(.dark) .home-strength-spark svg path[fill^="url"] { opacity: 0.12; } html:not(.dark) .home-strength-card { border-color: var(--sets-border-strong); } @media (prefers-reduced-motion: reduce) { .home-strength-card { transition: none; } .home-strength-card:active { transform: none; } } /* De host houdt zonder kaart nog steeds zijn eigen padding vast: 20px lucht op een plek waar niets staat leest als een halve render. Bij te weinig data tekent home-strength.js bewust niets, dus dit geval is normaal en niet zeldzaam. */ #home-strength:empty { display: none; }