P04 · סיפור-גלילה

CSS

/* P04 · סיפור-גלילה */
.cwrap{container-type:inline-size}
.cstage{--pad:clamp(20px,4cqi,64px);padding:clamp(36px,5cqi,80px) var(--pad)}
.score{display:flex;flex-direction:column;gap:12px;max-width:760px;margin-inline:auto}
.rb{border-radius:var(--r, 14px);display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-weight:600;font-size:14px}
.rb small{font-weight:500;color:inherit;opacity:.65}
.rich{min-height:clamp(110px,16cqi,180px);background:#eef0ff;color:#2b3a99}
.mid{min-height:clamp(84px,12cqi,120px);background:#fff;border:1px solid var(--line, #e4e4ee);color:var(--ink, #16182b)}
.air{min-height:clamp(60px,9cqi,84px);background:#fafafd;border:1px dashed var(--line, #e4e4ee);color:var(--muted, #6a6d85)}
.cta{min-height:clamp(96px,14cqi,130px);background:var(--ink, #16182b);color:#fff}
.hero{min-height:clamp(120px,18cqi,200px);background:linear-gradient(160deg,#3b5bdb,#748ffc);color:#fff}
.score.spine{position:relative;padding-inline-start:34px}
.score.spine::before{content:"";position:absolute;inset-block:0;inset-inline-start:12px;width:2px;background:#3b5bdb;opacity:.5}
.score.spine .rb::before{content:"";position:absolute;inset-inline-start:-28px;width:10px;height:10px;border-radius:50%;background:#3b5bdb;margin-top:2px}
.score.spine .rb{position:relative}

HTML

<div class="cwrap cstage"><div class="score spine">
<div class="rb hero"><span>פתיחה</span><small>C7 מילה ענקית</small></div><div class="rb mid"><span>פרק 1</span><small>C6</small></div><div class="rb mid"><span>פרק 2</span><small>C6</small></div><div class="rb air"><span>מפנה</span><small>C14</small></div><div class="rb mid"><span>פרק 3</span><small>C6</small></div><div class="rb mid"><span>פרק 4</span><small>C6</small></div><div class="rb cta"><span>סוף הסיפור</span><small>CTA</small></div>
</div></div>