B46 · עמודות שנפתחות בהובר

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-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}

/* B46 · עמודות שנפתחות בהובר */
.cx{display:flex;gap:10px;height:clamp(320px,52vh,520px);max-width:min(1120px,94vw);margin-inline:auto}
.cx-col{position:relative;overflow:hidden;border-radius:18px;cursor:pointer;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);
  flex:1 1 0;min-width:76px;display:flex;flex-direction:column;justify-content:space-between;padding:18px;will-change:flex-grow}
.cx-col .ph{position:absolute;inset:0;border-radius:0;opacity:.9;font-size:0}
.cx-num,.cx-tab,.cx-foot{position:relative;z-index:1;color:#fff}
.cx-num{font-size:14px;font-variant-numeric:tabular-nums;opacity:.85}
.cx-tab{writing-mode:vertical-rl;transform:rotate(180deg);align-self:center;font-size:16px;font-weight:800;white-space:nowrap;transition:opacity .25s}
.cx-foot{display:flex;flex-direction:column;gap:10px;align-items:flex-start;opacity:0;transition:opacity .3s .12s}
.cx-name{font-size:clamp(18px,2vw,30px);font-weight:800;white-space:nowrap}
.cx-body{max-width:38ch;font-size:15px;line-height:1.65;opacity:.92;margin:0}
.cx-col.open .cx-tab{opacity:0}
.cx-col.open .cx-foot{opacity:1}
.cx-col:focus-visible{outline:2px solid var(--accent, #4a3aff);outline-offset:3px}
@media(max-width:760px){
  .cx{flex-direction:column;height:clamp(420px,74vh,640px)}
  .cx-col{min-width:0;min-height:62px}
  .cx-tab{writing-mode:horizontal-tb;transform:none;align-self:flex-start}
}
@media (prefers-reduced-motion: reduce){.cx-body,.cx-foot,.cx-tab{transition:none}}

HTML

<div class="stage tight"><div class="cx">
  <div class="cx-col open"><div class="ph ph-a"></div><span class="cx-num">01</span><span class="cx-tab">אתרי תדמית</span>
    <div class="cx-foot"><span class="cx-name">אתרי תדמית</span><p class="cx-body">אתר שמסביר מה אתם עושים ולמי, ומוביל את המבקר לפנייה אחת ברורה.</p></div></div>
  <div class="cx-col"><div class="ph ph-c"></div><span class="cx-num">02</span><span class="cx-tab">דפי נחיתה</span>
    <div class="cx-foot"><span class="cx-name">דפי נחיתה</span><p class="cx-body">עמוד יחיד ממוקד לקמפיין, עם מסר אחד וקריאה לפעולה אחת.</p></div></div>
  <div class="cx-col"><div class="ph ph-d"></div><span class="cx-num">03</span><span class="cx-tab">חנויות</span>
    <div class="cx-foot"><span class="cx-name">חנויות</span><p class="cx-body">חנות שמוכרת גם בלי איש מכירות, עם מסלול קנייה קצר.</p></div></div>
  <div class="cx-col"><div class="ph ph-e"></div><span class="cx-num">04</span><span class="cx-tab">מערכות</span>
    <div class="cx-foot"><span class="cx-name">מערכות</span><p class="cx-body">ממשק פנימי לניהול לקוחות, משימות ודוחות במקום גיליונות.</p></div></div>
</div></div>

JS

(function(){
  const cols=[...document.querySelectorAll(".cx-col")];
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  const OPEN=6,SHUT=1;
  const grow=(i,el)=>el.classList.contains("open")?OPEN:SHUT;
  gsap.set(cols,{flexGrow:grow});
  function open(col){
    if(col.classList.contains("open"))return;
    cols.forEach(c=>c.classList.toggle("open",c===col));
    if(reduce){gsap.set(cols,{flexGrow:grow});return;}
    // flex-grow הוא מספר ולכן GSAP מנפיש אותו ישירות, בלי Flip ובלי סגנון אינליין שנתקע.
    // overwrite מבטל נסיעה קודמת כשעוברים מהר בין עמודות.
    gsap.to(cols,{flexGrow:grow,duration:.55,ease:"power3.inOut",overwrite:true});
  }
  cols.forEach(c=>{c.tabIndex=0;["mouseenter","click","focus"].forEach(ev=>c.addEventListener(ev,()=>open(c)));});
})();