site/assets/css/style.css

@@ -4393,20 +4393,28 @@ h3.contact-title {
   .gal-link:hover::after { animation: none; }
 }
 
-/* ── Photos at rest: 10% desaturated + a discreet brand-colour tint, both lifted
+/* ── Photos at rest: 10% desaturated + a discreet brand-colour tint (gallery: a
-   on hover. The tint is a "multiply" layer of a very light brand colour, so it
+   gradient fading to transparent; team: a light multiply layer), both lifted on
-   follows each gym's colour (and costs no extra markup). ───────────────────── */
+   hover. The tint follows each gym's brand colour. ───────────────────────── */
-.gal-link {
+.gal-link img { filter: saturate(.9); }
-  isolation: isolate;
-  background-color: color-mix(in srgb, var(--fitme-accent) 14%, #fff);
-  transition: background-color .45s ease;
-}
-.gal-link img { mix-blend-mode: multiply; filter: saturate(.9); }
-.gal-link:hover,
-.gal-link:focus-visible { background-color: #fff; }
 .gal-link:hover img,
 .gal-link:focus-visible img { filter: saturate(1) brightness(1.05); }
 
+/* Gallery tint: a brand-colour gradient that fades from the bottom edge to fully
+   transparent, laid over the tile (the link's own pseudo-elements are taken by
+   the hover edge); it dissolves on hover. */
+.gal-tile::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--fitme-radius);
+  background: linear-gradient(to top, rgba(var(--fitme-accent-rgb), .28) 0%, rgba(var(--fitme-accent-rgb), 0) 80%);
+  pointer-events: none;
+  transition: opacity .45s ease;
+}
+.gal-tile:hover::after,
+.gal-tile:focus-within::after { opacity: 0; }
+
 .trainer-item .trainer-pic img { filter: saturate(.9); transition: filter .45s ease; }
 .trainer-item .trainer-pic::before {
   content: '';