andre/fitme3070.pt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: sombra discreta nos cartões de detalhe da equipa e das modalidades

Browse Source 
O clip-path da animação cortava a box-shadow, por isso no desktop não havia
sombra nenhuma (e no telemóvel era pesada). Aberto, o recorte passa a ir 40px
para lá do cartão e a sombra é curta e suave, um pouco mais escura na equipa
por causa do fundo cinzento.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
andreandClaude Opus 5.5 committed 2026-09-24 21:51:34 +01:00
1 parent ee3fe69afb
commit 21ff1b55ff
1 file changed
+9 -4
Download Patch File Download Diff File Expand all files Collapse all files
site/assets/css/style.css
+9 -4
View File
@@ -2429,7 +2429,9 @@ h3.contact-title {
text-align: left;
background: #fff;
border-radius: 6px;
box-shadow: 0 24px 60px rgba(var(--fitme-dark-rgb), .28);
/* Discreet lift. Only visible because the open clip-path below reaches
40px past the card — a flush inset() would cut the shadow off. */
box-shadow: 0 12px 30px rgba(var(--fitme-dark-rgb), .16), 0 2px 6px rgba(var(--fitme-dark-rgb), .10);
overflow: hidden;
clip-path: inset(0px var(--md-cx, 360px) var(--md-cy, 0px) 0px round 2px);
transform-origin: calc(var(--md-cw, 180px) / 2) 50%;
@@ -2451,7 +2453,7 @@ h3.contact-title {
}
.mod-detail.is-open {
clip-path: inset(0px 0px 0px 0px round 6px);
clip-path: inset(-40px -40px -40px -40px round 6px);
transform: perspective(900px) rotateX(var(--md-rx, 0deg)) rotateY(var(--md-ry, 0deg)) translate(var(--md-mx, 0px), var(--md-my, -6px)) scale(1.02);
opacity: 1;
visibility: visible;
@@ -3359,7 +3361,10 @@ h3.contact-title {
background: #fff;
color: var(--fitme-text);
border-radius: 6px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
/* Discreet lift (a little deeper than the modalidades one: it sits on the
dark grey team backdrop). Visible only because the open clip-path reaches
40px past the card. */
box-shadow: 0 12px 30px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .18);
overflow: hidden;
/* px from main.js: Chrome won't interpolate inset() with calc(100% - …). */
clip-path: inset(0px var(--td-cx, 360px) var(--td-cy, 0px) 0px round 2px);
@@ -3382,7 +3387,7 @@ h3.contact-title {
}
.trainer-item.is-open .trainer-detail {
clip-path: inset(0px 0px 0px 0px round 6px);
clip-path: inset(-40px -40px -40px -40px round 6px);
transform: perspective(900px) rotateX(var(--td-rx, 0deg)) rotateY(var(--td-ry, 0deg)) translate(var(--td-mx, 0px), var(--td-my, 0px)) rotate(0deg);
opacity: 1;
visibility: visible;