fix: thumbnail sizing, parallax hover effect, login logo size
Build and Deploy Verso / deploy (push) Successful in 14m45s

Thumbnail: explicit top/left/right/bottom + width/height on the img so
object-fit has a well-defined box in all browsers (inset shorthand alone
was underspecified for some).

Hover effect: the card already rises translateY(-3px) on hover. Add a
matching translateY(+3px) counter-transform on the thumbnail image so
its net viewport motion is zero — the document preview appears to float
in place while the gradient tile and card body lift up around it.

Login logo: raise max-width from 300px to 400px now that the competing
inline style has been removed from the pug template.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
claude
2026-06-12 10:41:14 +00:00
parent 0bbc07e0b9
commit 933efb1ff9
2 changed files with 15 additions and 2 deletions
@@ -47,7 +47,7 @@
.verso-login-logo {
display: block;
margin: 0 auto;
max-width: 300px !important;
max-width: 400px;
}
}
@@ -540,13 +540,26 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
// Thumbnail image — shown when the project has a cached compiled PDF page.
// Falls back to the gradient + initial when the image 404s or is loading.
// The counter-transform on hover keeps the image visually stationary while
// the card rises beneath it (matching the card's translateY(-3px) lift).
.lumiere-card-thumb-img {
position: absolute;
inset: 6px;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
object-fit: cover;
object-position: top center;
border-radius: 4px;
z-index: 1;
transition: transform 0.18s ease;
}
.lumiere-card:hover .lumiere-card-thumb-img,
.lumiere-card:focus-within .lumiere-card-thumb-img {
transform: translateY(3px);
}
.lumiere-card-initial {