AR09 · עמוד מוצר

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}

/* AR09 · עמוד מוצר */
.cwrap{container-type:inline-size}
.arch{background:#fff;border:1px solid var(--line,#e4e4ee);border-radius:16px;overflow:hidden;margin:clamp(20px,4cqi,56px) clamp(20px,4cqi,64px)}
.as{position:relative;padding:clamp(30px,4cqi,56px) clamp(18px,3.5cqi,56px);border-top:1px dashed #d5d6e3}
.as .tagc{position:absolute;top:8px;inset-inline-start:10px;font-size:11px;font-weight:700;color:#4a3aff;background:#eef0ff;padding:3px 9px;border-radius:999px;line-height:1.3}
.as.dark{background:#16182b;color:#fff}.as.dark .tx{background:#3a3d5c}.as.dark .tagc{background:#2b2e4d;color:#b9b6ff}.as.dark .card{background:#22254a;border-color:#3a3d5c}
.as.tint{background:#f7f7fa}
.tx{height:10px;border-radius:6px;background:#dfe0ea;margin:8px 0}
.tx.s{width:38%}.tx.m{width:62%}.tx.l{width:86%}
.ttl{font-weight:700;font-size:clamp(19px,2.4cqi,30px);line-height:1.1;margin:0 0 6px}
.ttl.h1{font-size:clamp(28px,4.5cqi,54px)}
.ttl.big{font-size:clamp(40px,9cqi,110px);line-height:.95}
.eyebrow{font-size:12px;font-weight:700;color:#4a3aff;margin-bottom:8px;display:block}
.ph{background:#dfe0ea;border-radius:12px;display:grid;place-items:center;color:#6a6d85;font-size:13px;font-weight:600;min-height:110px}
.ph.tall{min-height:220px}
.btn{display:inline-block;padding:11px 20px;border-radius:10px;background:#16182b;color:#fff;font-weight:600;font-size:14px;width:max-content;line-height:1.2}
.btn.ghost{background:transparent;color:inherit;border:1px solid currentColor}
.as.dark .btn{background:#fff;color:#16182b}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.c{text-align:center;display:flex;flex-direction:column;align-items:center}.c .tx{margin-inline:auto}.c .btns{justify-content:center}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4cqi,48px);align-items:center}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{border:1px solid var(--line,#e4e4ee);border-radius:12px;padding:16px;background:#fff}
.card .ico{width:34px;height:34px;border-radius:9px;background:#eef0ff;margin-bottom:10px}
.card .tx:first-child{margin-top:0}
.bento{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}.bento .card:first-child{grid-row:span 2;min-height:200px;background:#16182b;border:0}.bento .card:first-child .tx{background:#3a3d5c}
.logos{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.logos i{display:block;width:80px;height:26px;border-radius:6px;background:#e4e4ee}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.step b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#16182b;color:#fff;font-size:13px;margin-bottom:8px}
.zz{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}.zz+.zz{margin-top:18px}.zz.flip .ph{order:-1}
.quote{border:1px solid var(--line,#e4e4ee);border-radius:12px;padding:16px;font-size:14px;line-height:1.5}.quote i{display:block;width:30px;height:30px;border-radius:50%;background:#dfe0ea;margin-top:10px}
.price{border:1px solid var(--line,#e4e4ee);border-radius:12px;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center}.price.hi{background:#16182b;color:#fff}.price.hi .tx{background:#3a3d5c}.price .amt{font-weight:800;font-size:26px;margin:8px 0}.price.hi .btn{background:#fff;color:#16182b}
.faq{max-width:640px;margin-inline:auto}.faq .q{border-bottom:1px solid var(--line,#e4e4ee);padding:12px 0;display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.frm{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;max-width:560px;margin-inline:auto;margin-top:14px}.frm i{display:block;height:42px;border:1px solid var(--line,#e4e4ee);border-radius:9px;background:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:center}.stats b{display:block;font-size:28px;font-weight:800}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.gal .ph{min-height:120px}.gal.masonry .ph:nth-child(3n+1){min-height:180px}
.hd{display:flex;justify-content:space-between;align-items:center;padding:14px clamp(18px,3.5cqi,56px);border-bottom:1px solid var(--line,#e4e4ee)}.hd b{font-size:15px}.hd .nav{display:flex;gap:16px}.hd .nav i{display:block;width:44px;height:8px;border-radius:4px;background:#dfe0ea}.hd .btn{padding:8px 14px;font-size:13px}
.ft{display:flex;justify-content:space-between;padding:16px clamp(18px,3.5cqi,56px);font-size:12px;background:#0f1020;color:#9a9db8}
.spine{position:relative;padding-inline-start:30px}.spine::before{content:"";position:absolute;inset-block:0;inset-inline-start:10px;width:2px;background:#4a3aff;opacity:.5}.spine .chap{position:relative;padding:12px 0}.spine .chap::before{content:"";position:absolute;inset-inline-start:-25px;top:18px;width:10px;height:10px;border-radius:50%;background:#4a3aff}
.art{max-width:62ch;margin-inline:auto}.art .tx{margin:9px 0}.pull{border-inline-start:4px solid #4a3aff;padding-inline-start:16px;font-size:18px;font-weight:600;margin:20px 0}
.buy{border:1px solid var(--line,#e4e4ee);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:6px}.buy .amt{font-size:26px;font-weight:800}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.chips i{display:block;width:70px;height:28px;border-radius:999px;border:1px solid var(--line,#e4e4ee)}
/* ירוק וואטסאפ הבהיר (#25d366) עם טקסט לבן נותן 1.98:1 ונכשל ב-AA. #0f7a6d הוא הטיל הכהה של
   המותג (5.22:1 עם לבן). את הבהיר שומרים לאייקון, לא לכפתור עם טקסט. */
.wa{display:inline-flex;align-items:center;gap:8px;background:#0f7a6d;color:#fff;padding:12px 20px;border-radius:999px;font-weight:700;font-size:14px}
@container (max-width:767px){.split,.g2,.g3,.g4,.steps,.zz,.stats,.gal,.bento{grid-template-columns:1fr}.zz .ph,.zz.flip .ph{order:-1}.bento .card:first-child{grid-row:auto}.frm{grid-template-columns:1fr}.hd .nav{display:none}.ttl.big{font-size:clamp(34px,12cqi,60px)}}

HTML

<div class="cwrap"><div class="arch"><div class="hd"><b>שם העסק</b><span class="nav"><i></i><i></i><i></i></span><span class="btn">לשיחה</span></div><section class="as"><span class="tagc">1 · מוצר · C1 split</span><div class="split" style="align-items:start"><div><div class="ph tall"><span class="ph-l">תמונה ראשית</span></div><div class="g4" style="margin-top:10px"><div class="ph" style="min-height:60px"></div><div class="ph" style="min-height:60px"></div><div class="ph" style="min-height:60px"></div><div class="ph" style="min-height:60px"></div></div></div><div class="buy"><span class="eyebrow">קטגוריה</span><p class="ttl">שם המוצר</p><b class="amt">₪249</b><div class="tx l"></div><div class="tx m"></div><div class="chips" style="justify-content:flex-start;margin:8px 0"><i></i><i></i><i></i></div><span class="btn">הוספה לסל</span></div></div></section><section class="as tint"><span class="tagc">2 · פרטים ומפרט · C8</span><p class="ttl">פרטים ומפרט</p><div class="g2"><div><div class="tx l"></div><div class="tx l"></div><div class="tx m"></div><div class="tx l"></div></div><div class="card"><div class="tx m"></div><div class="tx m"></div><div class="tx m"></div><div class="tx m"></div></div></div></section><section class="as"><span class="tagc">3 · מוצרים דומים · C4</span><p class="ttl">אולי יעניין אתכם</p><div class="g4"><div class="card"><div class="ph" style="min-height:120px"><span class="ph-l">מוצר</span></div><div class="tx m"></div><div class="tx s"></div></div><div class="card"><div class="ph" style="min-height:120px"><span class="ph-l">מוצר</span></div><div class="tx m"></div><div class="tx s"></div></div><div class="card"><div class="ph" style="min-height:120px"><span class="ph-l">מוצר</span></div><div class="tx m"></div><div class="tx s"></div></div><div class="card"><div class="ph" style="min-height:120px"><span class="ph-l">מוצר</span></div><div class="tx m"></div><div class="tx s"></div></div></div></section><section class="as tint"><span class="tagc">4 · ביקורות · C13</span><p class="ttl">ביקורות</p><div class="g3"><div class="quote"><div class="tx l"></div><div class="tx l"></div><div class="tx m"></div><i></i></div><div class="quote"><div class="tx l"></div><div class="tx l"></div><div class="tx m"></div><i></i></div><div class="quote"><div class="tx l"></div><div class="tx l"></div><div class="tx m"></div><i></i></div></div></section><section class="as dark"><span class="tagc">5 · סגירה · CTA</span><div class="c"><p class="ttl">עדיין מתלבטים?</p><div class="tx m"></div><div class="btns"><span class="btn">הפעולה הראשית</span></div></div></section><div class="ft"><span>© שם העסק</span><span>תנאים · פרטיות · נגישות</span></div></div></div>