Add cursor-tracking card glare and accent-linked background blobs

- Subtle radial glare follows cursor over card/template-card elements
  using a single document-level mousemove listener (event delegation)
- Ambient background blob colors now derive from the selected accent
  color with hue-shifted variants
- Glare intensity kept very subtle (3.5% dark / 12% light theme)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-12 11:13:55 +03:00
parent 40ea2e3b99
commit ff7b595032
6 changed files with 102 additions and 11 deletions

View File

@@ -56,6 +56,7 @@ section {
border-radius: 8px;
padding: 12px 20px 20px;
position: relative;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
display: flex;
flex-direction: column;
@@ -66,6 +67,38 @@ section {
transform: translateY(-2px);
}
/* ── Card glare effect ── */
.card-glare::after,
.template-card.card-glare::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
background: radial-gradient(
circle 200px at var(--glare-x, 50%) var(--glare-y, 50%),
rgba(255, 255, 255, 0.035) 0%,
transparent 70%
);
z-index: 1;
}
.card-glare::after,
.template-card.card-glare::after {
opacity: 1;
}
[data-theme="light"] .card-glare::after,
[data-theme="light"] .template-card.card-glare::after {
background: radial-gradient(
circle 200px at var(--glare-x, 50%) var(--glare-y, 50%),
rgba(255, 255, 255, 0.12) 0%,
transparent 70%
);
}
/* ── Card entrance animation ── */
@keyframes cardEnter {
from { opacity: 0; transform: translateY(12px); }