From 933efb1ff9094992aa925e85c45102716cb36f26 Mon Sep 17 00:00:00 2001 From: claude Date: Fri, 12 Jun 2026 10:41:14 +0000 Subject: [PATCH] fix: thumbnail sizing, parallax hover effect, login logo size MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../stylesheets/pages/login-register.scss | 2 +- .../stylesheets/pages/project-list-lumiere.scss | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/services/web/frontend/stylesheets/pages/login-register.scss b/services/web/frontend/stylesheets/pages/login-register.scss index 0de880f21a..c35baeaa8c 100644 --- a/services/web/frontend/stylesheets/pages/login-register.scss +++ b/services/web/frontend/stylesheets/pages/login-register.scss @@ -47,7 +47,7 @@ .verso-login-logo { display: block; margin: 0 auto; - max-width: 300px !important; + max-width: 400px; } } diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss index a7f6614c05..8b060426ad 100644 --- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss +++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss @@ -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 {