LM3 · הצטלבות (Converging)

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}

/* LM3 · הצטלבות (Converging) */
.conv{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(12px,2vw,26px);align-items:center;
  padding-inline:var(--gutter, clamp(24px, 5vw, 96px));max-width:min(1060px,100%);margin-inline:auto}
.cv{background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);border-radius:18px;padding:clamp(22px,2.6vw,36px);
  opacity:0;box-shadow:0 14px 34px rgba(22,24,43,.07);
  transition:opacity .75s cubic-bezier(.2,.6,.2,1),translate .75s cubic-bezier(.2,.6,.2,1)}
.cv-kick{display:inline-block;font-size:12px;letter-spacing:.14em;color:var(--muted, #6a6d85);
  border:1px solid var(--line, #e4e4ee);border-radius:999px;padding:4px 11px;margin-bottom:14px}
.cv h3{margin:0 0 8px;font-size:clamp(19px,2vw,25px);line-height:1.3}
.cv p{margin:0;color:var(--muted, #6a6d85);font-size:15px;line-height:1.7}
.cv-stat{display:block;margin-top:16px;font-size:clamp(26px,3vw,40px);font-weight:800;line-height:1;color:var(--ink, #16182b)}
.cv-stat small{display:block;font-size:12px;font-weight:400;color:var(--muted, #6a6d85);letter-spacing:.06em;margin-top:6px}
.cv.a{border-top:3px solid #f49e40}
.cv.b{border-top:3px solid var(--accent, #4a3aff)}

/* translate הוא פיזי ולא לוגי. עם הערכים ההפוכים שני הבלוקים מתחילים קרובים
   ונפרדים החוצה, כלומר בדיוק ההפך מהצטלבות. */
.cv.a{translate:70px 0}.cv.b{translate:-70px 0}
html[dir="ltr"] .cv.a{translate:-70px 0}
html[dir="ltr"] .cv.b{translate:70px 0}

.cv-meet{width:clamp(38px,4vw,52px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:var(--ink, #16182b);color:var(--bg, #f7f7fa);font-size:clamp(17px,2vw,22px);line-height:1;
  scale:0;opacity:0;transition:scale .5s .28s cubic-bezier(.2,.6,.2,1),opacity .4s .28s}
.conv.met .cv{opacity:1;translate:0 0}
.conv.met .cv-meet{scale:1;opacity:1}

@media(max-width:767px){
  .conv{grid-template-columns:1fr;gap:14px}
  .cv.a,.cv.b{translate:0 26px}
  html[dir="ltr"] .cv.a,html[dir="ltr"] .cv.b{translate:0 26px}
  .cv-meet{justify-self:center}
}
@media (prefers-reduced-motion: reduce){
  .cv,.cv-meet{transition-duration:.01ms}
  .cv.a,.cv.b{translate:0 0}
}

HTML

<div class="stage"><div class="conv">
  <div class="cv a"><span class="cv-kick">מה שרואים</span>
    <h3>הביצועים שהיריב מרגיש</h3>
    <p>מה שקורה על המגרש: מהירות, החלטות ועמידות בדקות האחרונות.</p>
    <span class="cv-stat">92%<small>שיפור נמדד בעונה</small></span></div>
  <div class="cv-meet" aria-hidden="true">+</div>
  <div class="cv b"><span class="cv-kick">מה שמאחורי</span>
    <h3>הנתונים שמייצרים את הביצועים</h3>
    <p>עומסי אימון, שינה והתאוששות. מה שאף אחד לא רואה בשידור.</p>
    <span class="cv-stat">14<small>מדדים שנאספים כל יום</small></span></div>
</div></div>

JS

const io=new IntersectionObserver(es=>es.forEach(e=>{
  if(e.isIntersecting){e.target.classList.add("met");io.unobserve(e.target)}
}),{threshold:.35});
document.querySelectorAll(".conv").forEach(el=>io.observe(el));