כרטיסים שנערמים זה על זה בגלילה עם offset מדורג. כל כרטיס נדבק מעט נמוך מקודמו.
מתי משתמשים: למה דווקא אנחנו 01-04, שלבי שירות. עד 5 כרטיסים.
הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.
כל החלטה מגיעה מנתון, לא מתבנית.
מי שהתחיל איתך נשאר איתך.
דוח מדיד כל חודש, בלי סיפורים.
אם המספרים לא זזים, התוכנית משתנה.
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית. הרכיב הזה מסתמך על dir="rtl".
/* LM4 · ערימה דביקה מדורגת */
/* בלי תקרת רוחב הכרטיס נמתח על כל המסך, הטקסט תחום ב-55ch ונשאר שטח ריק גדול בצד */
.stackw{padding-inline:var(--gutter, clamp(24px, 5vw, 96px));display:grid;gap:24px;max-width:min(980px,100%);margin-inline:auto}
.scard{position:sticky;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);border-radius:20px;padding:clamp(24px,3vw,44px);box-shadow:0 -18px 46px rgba(22,24,43,.09)}
.scard:nth-child(1){top:110px}.scard:nth-child(2){top:150px}.scard:nth-child(3){top:190px}.scard:nth-child(4){top:230px}
.snum{font-size:clamp(40px,4vw,80px);font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--accent, #4a3aff)}
.scard h3{margin:10px 0 6px;font-size:22px}.scard p{margin:0;color:var(--muted, #6a6d85);max-width:55ch}
.stail{height:30vh}<div class="stackw">
<div class="scard"><div class="snum">01</div><h3>תוכנית שנבנית ממדידה</h3><p>כל החלטה מגיעה מנתון, לא מתבנית.</p></div>
<div class="scard"><div class="snum">02</div><h3>מלווה אחד, אחריות אחת</h3><p>מי שהתחיל איתך נשאר איתך.</p></div>
<div class="scard"><div class="snum">03</div><h3>שקיפות מלאה</h3><p>דוח מדיד כל חודש, בלי סיפורים.</p></div>
<div class="scard"><div class="snum">04</div><h3>תוצאות שרואים</h3><p>אם המספרים לא זזים, התוכנית משתנה.</p></div>
</div><div class="stail"></div>