בלוק טקסט יחיד ממורכז על רקע נקי או אווירה: הצהרה, ציטוט, שאלה. אפס אלמנטים מתחרים.
מתי משתמשים: רגע אווירה, מעבר בין פרקי עמוד, משפט המותג.
הדמו כאן ניטרלי בכוונה ומגדיר מבנה בלבד: גריד, יחסים וקריסה. צבעים, רדיוסים, גופנים וריווח נלקחים מהעור של הפרויקט. מתג הרוחב למעלה מצמצם את המכולה ולא את חלון הדפדפן, ולכן הקריסה שרואים כאן היא הקריסה האמיתית.
משפט אחד שאומר את כל מה שהעמוד הזה מנסה לומר.
מי אמר, ולמה זה חשובהקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית.
/* C14 · מונולוג ממורכז */
.cwrap{container-type:inline-size}
.cstage{--pad:clamp(20px,4cqi,64px);padding:clamp(36px,5cqi,80px) var(--pad)}
.tx{height:11px;border-radius:6px;background:#dfe0ea;margin:9px 0}
.tx.s{width:38%}.tx.m{width:62%}.tx.l{width:86%}
.ttl{font-size:clamp(22px,2.6cqi,34px);font-weight:700;margin:0 0 10px;line-height:1.2}
.lead{color:var(--muted, #6a6d85);margin:0 0 14px;font-size:15px;line-height:1.6}
.btn{display:inline-block;background:var(--ink, #16182b);color:#fff;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;margin-top:12px}
.cwrap .ph{font-size:clamp(14px,1.6cqi,20px)}
.c14{text-align:center;padding-block:clamp(40px,10cqi,140px)}
.c14 p{font-size:clamp(22px,3.2cqi,44px);line-height:1.3;font-weight:600;max-width:24ch;margin:0 auto}
.c14 small{display:block;color:var(--muted, #6a6d85);margin-top:18px;font-size:14px}<div class="cwrap cstage"><div class="c14">
<p>משפט אחד שאומר את כל מה שהעמוד הזה מנסה לומר.</p>
<small>מי אמר, ולמה זה חשוב</small>
</div></div>