CSS25 · בנטו עם כוריאוגרפיית הובר

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}

/* CSS25 · בנטו עם כוריאוגרפיית הובר */
.bn{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(220px,auto);gap:var(--gap, clamp(16px, 1.6vw, 36px));max-width:1100px;margin-inline:auto}
.bn-card{position:relative;overflow:hidden;border-radius:var(--r, 14px);background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);padding:24px;display:flex;flex-direction:column;justify-content:flex-end;min-height:220px;isolation:isolate}
.bn-card.wide{grid-column:span 2}
.bn-ic{width:44px;height:44px;border-radius:12px;background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);display:grid;place-items:center;font-weight:800;margin-bottom:auto;transform-origin:top right;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.bn-body{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.bn-body h3{margin:0 0 6px;font-size:clamp(18px,1.8vw,24px)}
.bn-body p{margin:0;color:var(--muted, #6a6d85);font-size:15px;line-height:1.55;max-width:38ch}
.bn-cta{position:absolute;inset-inline:24px;bottom:0;display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--accent, #4a3aff);padding-block:14px;
  transform:translateY(100%);opacity:0;transition:transform .5s cubic-bezier(.2,.6,.2,1),opacity .35s}
.bn-cta::after{content:"←"}
.bn-card::after{content:"";position:absolute;inset:0;background:var(--ink, #16182b);opacity:0;transition:opacity .4s;z-index:-1;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .bn-card:hover .bn-body{transform:translateY(-38px)}
  .bn-card:hover .bn-ic{transform:scale(.78)}
  .bn-card:hover .bn-cta{transform:none;opacity:1}
  .bn-card:hover::after{opacity:.04}
}
@media (hover:none){.bn-cta{position:static;transform:none;opacity:1;margin-top:14px;padding-block:0}}
@media (max-width:767px){.bn{grid-template-columns:1fr}.bn-card.wide{grid-column:auto}}
@media (prefers-reduced-motion: reduce){.bn-body,.bn-ic,.bn-cta,.bn-card::after{transition:none}}

HTML

<div class="stage tight"><div class="bn">
  <article class="bn-card wide"><div class="bn-ic">01</div><div class="bn-body"><h3>אפיון לפני עיצוב</h3><p>שיחה אחת שממפה מי הלקוח, מה הוא מחפש ומה מונע ממנו לפנות. משם נגזר כל העמוד.</p></div><a class="bn-cta" href="#">איך זה עובד</a></article>
  <article class="bn-card"><div class="bn-ic">02</div><div class="bn-body"><h3>קופי שמוכר</h3><p>כל משפט עונה על שאלה שהגולש שואל.</p></div><a class="bn-cta" href="#">דוגמאות</a></article>
  <article class="bn-card"><div class="bn-ic">03</div><div class="bn-body"><h3>מובייל קודם</h3><p>שבעים אחוז מהתנועה. שם מתחילים.</p></div><a class="bn-cta" href="#">למה</a></article>
  <article class="bn-card wide"><div class="bn-ic">04</div><div class="bn-body"><h3>מדידה מהיום הראשון</h3><p>טפסים, שיחות, וואטסאפ. כל פנייה נספרת, וכל שינוי נבחן מול מספר.</p></div><a class="bn-cta" href="#">מה מודדים</a></article>
</div></div>