diff --git a/site/assets/css/style.css b/site/assets/css/style.css index 7b0d79f..f8217d0 100644 --- a/site/assets/css/style.css +++ b/site/assets/css/style.css @@ -4421,6 +4421,37 @@ h3.contact-title { .trainer-item .trainer-pic:hover img { filter: saturate(1); } .trainer-item .trainer-pic:hover::before { opacity: 0; } +/* Official YOURFIT lock-ups are wide (≈4.5:1) PNGs. In the square icon box they + were squeezed to 44px wide while keeping their height attribute, so they came + out stretched and unreadable. Give their box a wide landscape shape and keep + the natural aspect ratio. */ +.icon-box-item .ib-icon:has(img[src*="yourfit"]), +.md-card .ib-icon:has(img[src*="yourfit"]) { + width: 148px; + max-width: 100%; +} +.icon-box-item .ib-icon img[src*="yourfit"], +.md-card .ib-icon img[src*="yourfit"] { + width: 124px; + height: auto; + max-width: 100%; + max-height: none; + object-fit: contain; +} +/* At rest the YOURFIT lock-ups are black like every other icon; their own + (certified) colours come back on hover, on the white face. */ +.icon-box-item .ib-icon img[src*="yourfit"], +.md-card .ib-icon img[src*="yourfit"] { + filter: brightness(0); + transition: filter .45s ease; +} +@media (max-width: 767px) { + .icon-box-item .ib-icon:has(img[src*="yourfit"]), + .md-card .ib-icon:has(img[src*="yourfit"]) { width: 128px; } + .icon-box-item .ib-icon img[src*="yourfit"], + .md-card .ib-icon img[src*="yourfit"] { width: 106px; } +} + @media (max-width: 991px) { .gal-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 150px; } }