github-such-software/such.software
1
0
Fork 0
mirror of https://github.com/Such-Software/such.software.git synced 2026-10-21 06:08:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(bento): quiet tiles at rest — chrome fades, title + render float

Browse Source 
At rest the card chrome (opaque bg, 64px frost, border, shadow) is now nearly
invisible so tiles read as just the title + the 3D render/image floating on the
page (especially clean on mobile, where every tile is 'at rest'). The glass
lights up + the colour tint paints on hover / focus / tap. Title and image keep
their visibility.
This commit is contained in:
jwinterm
2026-07-08 11:15:01 -04:00
parent c93421c083
commit a238412103
2 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/globals.css
+17 -2
View File
@@ -118,8 +118,23 @@
animation: bento-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Hover lift for bento links */
.bento-item:hover .glass-card {
/* Quiet bento: at rest the card chrome (opaque bg, 64px frost, border, shadow) is
nearly invisible so only the title + the 3D render/image float on the page; the
glass lights up on hover / focus / tap. Title + image keep their own visibility.
Higher specificity than .mask-backdrop, so it wins at rest without !important. */
.bento-item .glass-card {
background-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: transparent;
box-shadow: none;
transition: background-color 0.3s ease, backdrop-filter 0.3s ease,
border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.bento-item:hover .glass-card,
.bento-item:focus-within .glass-card {
backdrop-filter: blur(64px);
-webkit-backdrop-filter: blur(64px);
transform: translateY(-4px);
box-shadow: 0 32px 64px -16px rgb(0 0 0 / 0.3);
}