From 99c28f04b484544d13801a15b2e59ca979ac9600 Mon Sep 17 00:00:00 2001
From: andre <andre.filipe6@gmail.com>
Date: Tue, 13 Oct 2026 18:41:03 +0100
Subject: [PATCH] style(site): gallery tint is a brand gradient fading to
 transparent

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 site/assets/css/style.css | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/site/assets/css/style.css b/site/assets/css/style.css
index f8217d0..b0408f3 100644
--- a/site/assets/css/style.css
+++ b/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
-   on hover. The tint is a "multiply" layer of a very light brand colour, so it
-   follows each gym's colour (and costs no extra markup). ───────────────────── */
-.gal-link {
-  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; }
+/* ── Photos at rest: 10% desaturated + a discreet brand-colour tint (gallery: a
+   gradient fading to transparent; team: a light multiply layer), both lifted on
+   hover. The tint follows each gym's brand colour. ───────────────────────── */
+.gal-link img { filter: saturate(.9); }
 .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: '';