From 356554db42e9d9a905da683246e55ab8593e1cd3 Mon Sep 17 00:00:00 2001
From: andre <andre.filipe6@gmail.com>
Date: Tue, 13 Oct 2026 18:39:24 +0100
Subject: [PATCH] style(site): spinning brand edge + glow on open detail cards
 (team, Modalidades)

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

diff --git a/site/assets/css/style.css b/site/assets/css/style.css
index 1ac2d4f..7b0d79f 100644
--- a/site/assets/css/style.css
+++ b/site/assets/css/style.css
@@ -3544,6 +3544,43 @@ h3.contact-title {
 
 .trainer-item.is-open { z-index: 31; }
 
+/* ── Open detail cards (team + Modalidades): the same spinning brand edge ──────
+   A 3px ring cut out of ::after with a mask, shown while the card is open, plus
+   a soft brand glow added to the existing lift shadow. ─────────────────────── */
+.mod-detail::after,
+.trainer-detail::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  padding: 3px;
+  border-radius: inherit;
+  background: conic-gradient(from var(--pc-a), rgba(var(--fitme-accent-rgb), .35) 0deg, rgba(var(--fitme-accent-rgb), .35) 150deg,
+      var(--fitme-accent) 250deg, #f4ff9c 300deg, var(--fitme-accent) 330deg,
+      rgba(var(--fitme-accent-rgb), .35) 360deg);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+  opacity: 0;
+  transition: opacity .45s ease;
+  pointer-events: none;
+}
+.mod-detail.is-open::after,
+.trainer-item.is-open .trainer-detail::after { opacity: 1; animation: pc-spin 3.2s linear infinite; }
+.mod-detail.is-open {
+  box-shadow: 0 12px 30px rgba(var(--fitme-dark-rgb), .16), 0 2px 6px rgba(var(--fitme-dark-rgb), .10),
+              0 0 22px 2px rgba(var(--fitme-accent-rgb), .35);
+}
+.trainer-item.is-open .trainer-detail {
+  box-shadow: 0 12px 30px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .18),
+              0 0 22px 2px rgba(var(--fitme-accent-rgb), .35);
+}
+@media (prefers-reduced-motion: reduce) {
+  .mod-detail.is-open::after,
+  .trainer-item.is-open .trainer-detail::after { animation: none; }
+}
+
+
 .td-photo {
   flex: 0 0 var(--td-pw, 200px);
   box-sizing: border-box;