Skip to content

fix: stop case-study hover accent bar overflowing rounded corners #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
westonplatter merged 7 commits into from
Aug 5, 2026
Merged

fix: stop case-study hover accent bar overflowing rounded corners #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
75c1176
fix: stop case-study hover accent bar overflowing rounded corners
claude Jul 31, 2026
e8ff833
Merge branch 'main' into claude/case-studies-hover-overflow-rp2385
westonplatter Aug 5, 2026
9cb5461
fix: inset case-study hover accent bar clear of the rounded corners
claude Aug 5, 2026
8988b74
fix: paint case-study hover accent as clip-safe full-height bar
claude Aug 5, 2026
ccc2477
feat: widen case-study hover accent into a bold color band
claude Aug 5, 2026
4ed7191
fix: remove case-study hover accent bar to eliminate preview spill
claude Aug 5, 2026
01899d6
fix: trim baked-in gradient strip from Power Digital preview image
claude Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 4 additions & 26 deletions assets/css/custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3450,29 +3450,16 @@ footer {
box-shadow: 0 14px 32px -22px rgba(0, 0, 0, 0.7);
transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;

// brand accent bar down the left edge, revealed on hover
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
z-index: 2;
background: linear-gradient(180deg, #2ad9c2, #55c1b4 45%, #d191bf);
opacity: 0;
transition: opacity 0.24s ease;
}

// No left-edge accent bar: the preview image is flush to the left edge, so
// any bar would paint over ("spill" onto) the preview on hover. Hover
// feedback comes from the lift + brighter border + deeper shadow + image
// zoom + arrow slide instead — nothing overlaps the card content.
Comment on lines +3453 to +3456

@coderabbitai coderabbitai Bot Aug 5, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift

Keep the custom SCSS in the required file.

The changed case-study styles remain in assets/css/custom.scss. Move this custom SCSS to assets/css/style.scss, then run Trunk for linting and formatting.

As per coding guidelines: assets/css/**/*.scss: Use Bootstrap 5.1.3 as the CSS framework and place custom SCSS in assets/css/style.scss.

Also applies to: 3541-3543

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@assets/css/custom.scss` around lines 3453 - 3456, Move the changed case-study
custom SCSS from assets/css/custom.scss into assets/css/style.scss, preserving
its selectors and behavior. Remove the moved rules from custom.scss, then run
Trunk to lint and format the updated SCSS.

Source: Coding guidelines

&:hover,
&:focus-visible {
transform: translateY(-3px);
border-color: rgba(42, 217, 194, 0.45);
box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.85);

&::before {
opacity: 1;
}
.cs-card__media img {
transform: scale(1.05);
}
Expand Down Expand Up @@ -3554,15 +3541,6 @@ footer {
.cs-card {
flex-direction: column;
min-height: 0;

&::before {
left: 0;
right: 0;
top: 0;
bottom: auto;
width: auto;
height: 4px;
}
}
.cs-card__media {
flex: none;
Expand Down
Binary file modified static/img/case-studies/power-digital/power-digital-case-study-preview.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.