/* ═══════════════════════════════════════════════════════════════════════ HelpWin — Shared Polish Kit A restrained, enterprise-grade DEPTH layer + the one 1:1 element (the card hover "shake"). Deliberately NOT the homepage hero aesthetic — no foil wordmark, no drifting motes, no shimmer headline. Just coherent depth so every customer-facing surface feels like one production-grade product. ACTIVATION (per page): 1. 2. add class="hw-polished" to 3. tag elements with the opt-in utility classes below. UTILITIES: .hw-shake-host + inner .hw-shake-el → icon shakes when the card is hovered .hw-shake-self → the element shakes on its own hover .hw-lift → hover: rise + soft shadow (+ bronze rim) .hw-glow-rim → hover: bronze top-glow bloom + rim .hw-btn → button micro-lift on hover .hw-sheen → one-pass diagonal specular on hover ═══════════════════════════════════════════════════════════════════════ */ :root { --hw-warm: #c4956a; --hw-ease: cubic-bezier(.16, 1, .3, 1); } /* ── The card shake (copied 1:1 from the homepage, the one greenlit clone) ── */ @keyframes hw-shake { 0%, 100% { transform: translateX(0) rotate(0deg); } 14% { transform: translateX(-2px) rotate(-3.5deg); } 30% { transform: translateX(2px) rotate(3.5deg); } 46% { transform: translateX(-2px) rotate(-2deg); } 62% { transform: translateX(1px) rotate(1.5deg); } 78% { transform: translateX(-1px) rotate(-.5deg); } } .hw-shake-el { transition: transform .3s var(--hw-ease); will-change: transform; } .hw-shake-host:hover .hw-shake-el, .hw-shake-self:hover { animation: hw-shake .52s cubic-bezier(.36, .07, .19, .97); } /* ── Restrained depth kit (scoped to .hw-polished so it can't leak) ── */ .hw-polished .hw-lift { transition: transform .4s var(--hw-ease), box-shadow .4s ease, border-color .3s ease; } .hw-polished .hw-lift:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(26, 24, 22, .10); border-color: var(--hw-warm); } .hw-polished .hw-glow-rim { position: relative; overflow: hidden; } .hw-polished .hw-glow-rim::before { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(130% 90% at 50% -10%, rgba(196, 149, 106, .10), transparent 66%); transition: opacity .4s ease; } .hw-polished .hw-glow-rim:hover::before { opacity: 1; } .hw-polished .hw-glow-rim:hover { border-color: var(--hw-warm); } .hw-polished .hw-btn { transition: transform .25s var(--hw-ease), box-shadow .25s ease, filter .25s ease; } .hw-polished .hw-btn:hover { transform: translateY(-2px); } /* One-pass diagonal specular sweep for primary buttons (opt-in) */ .hw-polished .hw-sheen { position: relative; overflow: hidden; } .hw-polished .hw-sheen::before { content: ''; position: absolute; top: -50%; left: -65%; width: 55%; height: 200%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); pointer-events: none; opacity: 0; } .hw-polished .hw-sheen:hover::before { opacity: 1; animation: hw-sheen-sweep .72s ease-out; } @keyframes hw-sheen-sweep { from { left: -65%; } to { left: 130%; } } @media (prefers-reduced-motion: reduce) { .hw-shake-host:hover .hw-shake-el, .hw-shake-self:hover, .hw-polished .hw-sheen:hover::before { animation: none; } .hw-polished .hw-lift, .hw-polished .hw-lift:hover, .hw-polished .hw-btn, .hw-polished .hw-btn:hover { transition: none; transform: none; } }