LM7 · אוצר ההובר: לחיצה / הרמה / צמיחה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-a{background:linear-gradient(160deg,#3b5bdb,#748ffc)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}
.gbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding-inline:28px;border-radius:999px;background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);font-weight:500;font-size:16px;border:0;cursor:pointer;font-family:inherit}

/* LM7 · אוצר ההובר: לחיצה / הרמה / צמיחה */
.hv{display:flex;gap:var(--gap, clamp(16px, 1.6vw, 36px));justify-content:center;flex-wrap:wrap;align-items:center}
.hv .ph{width:220px;height:150px;font-size:15px;cursor:pointer}
.press{transition:transform .3s cubic-bezier(.2,.6,.2,1)}
.press:hover{transform:scale(.97)}
.liftd{transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s}
.liftd:hover{transform:translate(-6px,-6px);box-shadow:10px 10px 24px rgba(22,24,43,.15)}
.grow{transition:transform .3s cubic-bezier(.2,.6,.2,1)}
.grow:hover{transform:scale(1.06) rotate(2deg)}

HTML

<div class="stage tight"><div class="hv">
<div class="ph ph-c press"><span class="ph-l">מדיה: לחיצה פנימה</span></div>
<div class="ph ph-a liftd"><span class="ph-l">תוכן: הרמה אלכסונית</span></div>
<button class="gbtn grow">CTA: צמיחה + סיבוב</button>
</div></div>