S05D · מינימליזם עריכתי · פרטים

CSS

/* S05D · מינימליזם עריכתי · פרטים */
.cwrap{container-type:inline-size}
.q{--accent:#4A6EF6;--accent-text:#3552D8;--btn-solid:#3B5BDB;--tint-12:color-mix(in srgb,var(--accent, #4a3aff) 12%,#fff);--tint-4:color-mix(in srgb,var(--accent, #4a3aff) 4%,#fff);
 --ink:#111;--muted:#6b7280;--muted-strong:#4b5563;--border:#eaeaea;--border-2:#e5e7eb;--surface:#fff;--surface-muted:#f3f4f6;--err:#d92d20;
 --r-control:12px;--r-card:16px;--ease:cubic-bezier(.2,.6,.2,1);--shadow-soft:0 6px 20px rgba(17,24,39,.08);--shadow-shot:0 30px 60px rgba(17,24,39,.16);
 --sec:112px;--gut:clamp(20px,4cqi,64px);
 background:var(--surface);color:var(--ink, #16182b);font-family:"Ploni","Heebo",system-ui,sans-serif;font-size:18px;line-height:1.36;overflow:hidden;position:relative;isolation:isolate;-webkit-font-smoothing:antialiased}
.q *{box-sizing:border-box}
.q h1,.q h2,.q h3,.q p,.q ul{margin:0}
.q a{color:inherit;text-decoration:none}
.q ul{list-style:none;padding:0}
.q h1{font-size:57px;line-height:.92;font-weight:600;letter-spacing:-.01em}
.q h2{font-size:41px;line-height:.96;font-weight:600}
.q h3{font-size:24px;line-height:1.08;font-weight:600}
.q .lead{font-size:20px;line-height:1.28;color:var(--muted, #6a6d85);max-width:640px}
.q .body{font-size:18px;line-height:1.36;color:var(--muted, #6a6d85);max-width:640px}
.q .meta{font-size:17px;font-weight:500;line-height:1.2;color:var(--muted, #6a6d85)}
.q .micro{font-size:15px;line-height:1.2;color:var(--muted, #6a6d85)}
.q .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;line-height:1;color:var(--accent-text);background:var(--tint-12);padding:7px 12px;border-radius:var(--r-control)}
.q .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent, #4a3aff);margin-top:1px}
.q .hl{font-size:15px;font-weight:500;color:var(--accent-text);margin-top:16px}
.q .muted-bg .body,.q .muted-bg .micro,.q .muted-bg .meta{color:var(--muted-strong)}
.q .ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--accent, #4a3aff);flex:none;display:block}
.q .ico.s{width:18px;height:18px}
/* כפתורים: שלוש רמות, ארבעה מצבים */
.q .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:18px;font-weight:500;line-height:1;border-radius:var(--r-control);padding:13px 24px 14px;min-height:44px;border:1px solid transparent;cursor:pointer;background:var(--btn-solid);color:#fff;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease)}
.q .btn:hover,.q .btn.is-hover{background:color-mix(in srgb,var(--btn-solid) 88%,#000)}
.q .btn:active,.q .btn.is-active{transform:scale(.98)}
.q .btn:focus-visible,.q .btn.is-focus{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent, #4a3aff) 35%,transparent)}
.q .btn.is-disabled,.q .btn:disabled{opacity:.5;pointer-events:none}
.q .btn.lg{font-size:20px;padding:15px 28px 16px;min-height:50px}
.q .btn.sm{font-size:17px;padding:9px 18px 10px;min-height:38px}
.q .btn.b2{background:var(--surface);color:var(--ink, #16182b);border-color:var(--border-2)}
.q .btn.b2:hover,.q .btn.b2.is-hover{background:#f9fafb;border-color:#d1d5db}
.q .lnk{display:inline-flex;align-items:center;gap:6px;font-size:17px;font-weight:500;color:var(--ink, #16182b);padding:4px 0;border-bottom:1px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease),gap .18s var(--ease)}
.q .lnk .ico{color:var(--accent, #4a3aff);width:18px;height:18px;transition:transform .18s var(--ease)}
.q .lnk:hover,.q .lnk.is-hover{color:var(--accent-text);border-color:var(--accent-text)}
.q .lnk:hover .ico,.q .lnk.is-hover .ico{transform:translateX(-3px)}
.q .lnk:focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent, #4a3aff) 35%,transparent);border-radius:4px}
/* על רצועת accent */
.q .band .btn{background:#fff;color:var(--accent-text)}
.q .band .btn:hover{background:#eef1ff}
.q .band .btn.b2{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.q .band .btn.b2:hover{border-color:#fff;background:transparent}
/* שדות: חמישה מצבים */
.q .fld{display:flex;flex-direction:column;gap:8px}
.q .fld label{font-size:17px;font-weight:500;line-height:1.2;color:var(--ink, #16182b)}
.q .in{font:inherit;font-size:18px;line-height:1.2;padding:14px 16px;border:1px solid var(--border-2);border-radius:var(--r-control);background:#fff;color:var(--ink, #16182b);appearance:none;width:100%;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.q .in::placeholder{color:#9ca3af}
.q .in:focus,.q .in.is-focus{outline:0;border-color:var(--accent, #4a3aff);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent, #4a3aff) 22%,transparent)}
.q .fld.err .in{border-color:var(--err)}
.q .fld .msg{display:none;font-size:15px;line-height:1.2;color:var(--err);align-items:center;gap:6px}
.q .fld.err .msg{display:inline-flex}
.q .fld .msg .ico{width:16px;height:16px;color:var(--err)}
.q .in:disabled,.q .in.is-disabled{background:var(--surface-muted);color:var(--muted, #6a6d85);pointer-events:none}
/* כרטיס, באדג', צ'יפ */
.q .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:26px;transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.q .card.hv:hover,.q .card.is-hover{border-color:#d1d5db;transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.q .badge{display:inline-block;font-size:14px;font-weight:600;line-height:1;padding:5px 12px 6px;border-radius:12px;background:var(--tint-12);color:var(--accent-text)}
.q .chip{display:inline-flex;align-items:center;gap:8px;font-size:17px;line-height:1;padding:8px 12px 9px;border-radius:var(--r-control);border:1px solid var(--border);background:#fff;color:var(--ink, #16182b)}
.q .chip .ico{width:16px;height:16px;margin-top:-1px}
.q .chip.off{background:var(--surface-muted);color:var(--muted, #6a6d85);filter:saturate(.6)}
.q .stat-chip{position:absolute;inset-inline-start:14px;bottom:14px;font-size:15px;font-weight:600;line-height:1;padding:7px 12px 8px;border-radius:12px;background:var(--tint-12);color:var(--accent-text);box-shadow:var(--shadow-soft)}
.q .hr{height:1px;background:var(--border);border:0;margin:0}
/* reveal: keyframes, לא transition (חוק סיני 12.8) */
.q .reveal{opacity:0}
.q .reveal.is-in{opacity:1;animation:qrev .5s cubic-bezier(.2,.6,.2,1) both}
@keyframes qrev{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.q .reveal{opacity:1;animation:none}.q .reveal.is-in{animation:none}.q .btn,.q .card,.q .lnk,.q .lnk .ico{transition:none}}
/* ריווח סקשן: 112 / 88 / 64 */
.q .sec{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gut)}
.q .muted-bg{background:var(--surface-muted)}
.q .wrap{max-width:1200px;margin-inline:auto}
@container (max-width:1023px){.q{--sec:88px}}
@container (max-width:767px){.q{--sec:64px}.q h1{font-size:38px;line-height:.96}.q h2{font-size:31px;line-height:1}.q h3{font-size:22px}.q .btn{width:100%;min-height:48px}}
.q .det{padding:48px var(--gut);display:flex;flex-direction:column;gap:56px;max-width:1100px;margin-inline:auto}
.q .blk{display:flex;flex-direction:column;gap:20px}
.q .blk>h3{padding-bottom:12px;border-bottom:1px solid var(--border)}
.q .rowx{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.q .cell{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:150px}
.q .cell .micro{font-weight:500}
.q .band-x{background:var(--accent, #4a3aff);padding:24px;border-radius:var(--r-card);display:flex;gap:12px;flex-wrap:wrap}
.q .seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--surface-muted);border:1px solid var(--border);border-radius:12px}
.q .seg span{font-size:17px;font-weight:500;color:var(--muted, #6a6d85);padding:10px 14px;border-radius:9px;line-height:1;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.q .seg span.on{background:#fff;box-shadow:var(--shadow-soft);color:var(--accent-text)}
.q .seg b{font-size:14px;font-weight:600;padding:2px 8px;border-radius:999px;background:#fff;line-height:1.2}
.q .seg span.on b{background:var(--tint-12)}
.q .acc{width:100%;max-width:640px}
.q .acc .it{border-bottom:1px solid var(--border)}
.q .acc .qn{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:21px;font-weight:600;line-height:1.2}
.q .acc .qn .ico{width:20px;height:20px;color:var(--muted, #6a6d85);transition:transform .2s var(--ease)}
.q .acc .it.open .qn .ico{transform:rotate(180deg)}
.q .acc .an{padding:0 0 22px;font-size:18px;color:var(--muted, #6a6d85);line-height:1.36;max-width:640px}
.q .tbl{display:grid;grid-template-columns:1fr 150px 150px;max-width:640px;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
.q .tbl>div{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;font-size:17px}
.q .tbl .th{background:var(--surface-muted);font-size:15px;font-weight:600;color:var(--muted-strong)}
.q .tbl .x{color:#c0c4cc;font-size:20px}
.q .stat-x{position:relative;width:260px;height:150px;border-radius:var(--r-card);background:var(--surface-muted);border:1px solid var(--border)}
.q .nums{display:flex;gap:40px;align-items:baseline;flex-wrap:wrap}
.q .nums b{font-weight:600;letter-spacing:-.02em;line-height:1}
.q .succ{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.q .succ i{width:56px;height:56px;border-radius:50%;background:var(--tint-12);display:grid;place-items:center}
.q .succ i .ico{color:var(--accent, #4a3aff);width:24px;height:24px}
@container (max-width:767px){.q .tbl{grid-template-columns:1fr 90px 90px}.q .btn{width:auto}}

HTML

<div class="cwrap sk-s05"><div class="q"><div class="det">
<div class="blk"><h3>כפתורים · שלוש רמות, ארבעה מצבים</h3>
<div class="rowx"><div class="cell"><span class="micro">ראשי · רגיל</span><a class="btn">להתחיל בחינם</a></div><div class="cell"><span class="micro">hover</span><a class="btn is-hover">להתחיל בחינם</a></div><div class="cell"><span class="micro">active (לחיצה)</span><a class="btn is-active">להתחיל בחינם</a></div><div class="cell"><span class="micro">focus-visible</span><a class="btn is-focus">להתחיל בחינם</a></div><div class="cell"><span class="micro">מושבת</span><a class="btn is-disabled">להתחיל בחינם</a></div></div>
<div class="rowx"><div class="cell"><span class="micro">משני · רגיל</span><a class="btn b2">לראות דוגמאות</a></div><div class="cell"><span class="micro">hover</span><a class="btn b2 is-hover">לראות דוגמאות</a></div><div class="cell"><span class="micro">שלישי · טקסט + חץ</span><a class="lnk">לקרוא את הסיפור<svg class="ico" viewBox="0 0 24 24"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg></a></div><div class="cell"><span class="micro">hover</span><a class="lnk is-hover">לקרוא את הסיפור<svg class="ico" viewBox="0 0 24 24"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg></a></div><div class="cell"><span class="micro">גדלים</span><a class="btn lg">הירו 20px</a></div><div class="cell"><span class="micro"></span><a class="btn sm">הדר 17px</a></div></div>
<div class="band-x"><a class="btn">ראשי הפוך על accent</a><a class="btn b2">משני שקוף</a></div>
<p class="micro">הרמה השלישית (טקסט + חץ) היא מה שתבניות שוכחות. hover מזיז את החץ 3px ומוסיף קו תחתון. active מכווץ ל-.98. focus הוא טבעת accent ב-35%, לא הכחול של הדפדפן.</p></div>

<div class="blk"><h3>שדות · חמישה מצבים</h3>
<div class="rowx"><div class="cell"><span class="micro">רגיל</span><div class="fld"><label>טלפון</label><input class="in" placeholder="050-0000000"></div></div><div class="cell"><span class="micro">focus</span><div class="fld"><label>טלפון</label><input class="in is-focus" placeholder="050-0000000"></div></div><div class="cell"><span class="micro">מלא</span><div class="fld"><label>טלפון</label><input class="in" value="052-1234567"></div></div><div class="cell"><span class="micro">שגיאה</span><div class="fld err"><label>טלפון</label><input class="in" value="052-12"><span class="msg"><svg class="ico" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>מספר קצר מדי</span></div></div><div class="cell"><span class="micro">מושבת</span><div class="fld"><label>טלפון</label><input class="in is-disabled" placeholder="לא זמין"></div></div></div>
<p class="micro">18px כדי שאייפון לא יזום. תווית 17/500 ink מעל. שגיאה = צבע + טקסט + אייקון, לעולם לא צבע לבד.</p></div>

<div class="blk"><h3>כרטיס, באדג', צ'יפים</h3>
<div class="rowx"><div class="cell"><span class="micro">כרטיס · רגיל</span><article class="card" style="width:280px;display:flex;flex-direction:column;gap:14px"><svg class="ico" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg><h3>כותרת הכרטיס</h3><p class="body">אייקון accent, כותרת 24, טקסט 18 muted.</p></article></div><div class="cell"><span class="micro">hover</span><article class="card is-hover" style="width:280px;display:flex;flex-direction:column;gap:14px"><svg class="ico" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg><h3>כותרת הכרטיס</h3><p class="body">גבול כהה יותר, 2px למעלה, צל רך. סיגנל אחד.</p></article></div>
<div class="cell"><span class="micro">באדג'</span><span class="badge">מומלץ</span></div><div class="cell"><span class="micro">צ'יפ</span><span class="chip"><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>מדבקות משלוח</span></div><div class="cell"><span class="micro">צ'יפ מנוטרל</span><span class="chip off"><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>אין אצל אחרים</span></div></div></div>

<div class="blk"><h3>eyebrow, מספרים, קו הדגשה</h3>
<div class="rowx"><div class="cell"><span class="micro">eyebrow</span><span class="eyebrow"><i></i>למה זה עובד</span></div><div class="cell"><span class="micro">קו מיקרו-הדגשה</span><p class="hl" style="margin:0">אף אחד אחר לא נותן לכם את זה.</p></div></div>
<div class="nums"><div><b style="font-size:86px;color:var(--accent)">1,240</b><span class="meta" style="display:block;margin-top:8px">סטט ענק 86 · accent</span></div><div><b style="font-size:45px">₪149</b><span class="meta" style="display:block;margin-top:8px">מחיר 45 · ink</span></div><div><b style="font-size:26px">96%</b><span class="meta" style="display:block;margin-top:8px">KPI 26 · ink</span></div></div>
<p class="micro">כותרות תמיד ink. accent מופיע בעשרה מקומות סגורים בלבד: כפתור ראשי, אייקונים, מצב אקטיבי, סטט ענק, קו הדגשה, צ'יפ סטט, באדג', רצועת CTA, טבעת פוקוס, V ברשימות.</p></div>

<div class="blk"><h3>טאבים, אקורדיון, טבלת השוואה, צ'יפ סטט, הצלחה</h3>
<div class="rowx"><div class="cell"><span class="micro">segmented</span><div class="seg"><span class="on">חנויות<b>12</b></span><span>שירותים<b>4</b></span><span>מסעדות</span></div></div><div class="cell"><span class="micro">צ'יפ סטט צף</span><div class="stat-x"><span class="stat-chip">+31% המרה</span></div></div><div class="cell"><span class="micro">הצלחה</span><div class="succ"><i><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></i><h3 style="font-size:21px">נשלח</h3><p class="micro">חוזרים תוך יום עבודה</p></div></div></div>
<div class="rowx"><div class="acc"><div class="it open"><div class="qn">כמה זמן לוקח להתחיל?<svg class="ico" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></div><p class="an">עשר דקות. מייבאים את המוצרים מקובץ, מחברים את הדומיין, וההזמנה הראשונה יכולה להיכנס.</p></div><div class="it"><div class="qn">אפשר לבטל?<svg class="ico" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></div></div></div></div>
<div class="tbl"><div class="th"></div><div class="th">אצלנו</div><div class="th">אחרים</div><div>מדבקות משלוח</div><div><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></div><div class="x">✕</div><div>הודעות וואטסאפ</div><div><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></div><div class="micro">בתוספת תשלום</div><div>מלאי בזמן אמת</div><div><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></div><div><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></div></div></div>

<div class="blk"><h3>מפרידים ורדיוסים</h3>
<div class="rowx"><div class="cell"><span class="micro">hairline · border #eaeaea</span><hr class="hr" style="width:220px"></div><div class="cell"><span class="micro">r-control 12</span><div style="width:64px;height:44px;border:1px solid var(--border-2);border-radius:var(--r-control)"></div></div><div class="cell"><span class="micro">r-card 16</span><div style="width:64px;height:64px;border:1px solid var(--border);border-radius:var(--r-card)"></div></div><div class="cell"><span class="micro">pill 999 (מונים בלבד)</span><div style="width:64px;height:24px;background:var(--tint-12);border-radius:999px"></div></div><div class="cell"><span class="micro">צל רך</span><div style="width:64px;height:64px;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow-soft)"></div></div></div>
<p class="micro">מפריד אחד לכל העמוד: קו שיער בצבע הגבול. אין קווים עבים ואין קווים אפורים אקראיים. צל דרמטי שמור לוויז'ואל ההירו בלבד.</p></div>
</div></div></div>