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; }
 }