/* ==========================================================================
מיילמיוזיק — עמוד לקוחות עסקיים (Figma 321:33, קנבס 1920×10413)
---------------------------------------------------------------------------
הקובץ הזה יושב מעל assets/css/style.css ומשתמש בטוקנים שלו (--u, הצבעים,
הפונטים, .btn, .field, .site-header, .site-footer).
שיטת המיקום: כל סקשן הוא בלוק בגובה קבוע מהפיגמה, והילדים ממוקמים
בתוכו absolute לפי הקואורדינטות המדויקות. סכום הגבהים = 10413.
ה-offset האופקי נכתב תמיד כ-right, כי הדף RTL:
right = 1920 − (figmaX + width)
מתחת ל-1024px הכל עובר לזרימה רגילה — ראה סעיף 90.
========================================================================== */
/* ---------- 0. בסיס העמוד ---------- */
.b2b {
/* מיכל התוכן של העמוד הזה רחב מזה של עמוד הבית: x 85..1835 */
--b2b-container: 1750;
/* קנה מידה של הטיפוגרפיה הענקית: גובה גליף / font-size נמדד 0.58 */
--cap: 0.58;
background: var(--surface);
}
/* --u של style.css נגזר מ-100vw, שכולל את פס הגלילה. בעמוד הזה המיקום
הוא absolute מול תיבת התוכן (1905 ולא 1920), ולכן כל הדף היה נסחף
15px שמאלה. 100cqw מודד את רוחב התוכן בפועל, ו-min(1px, …) שומר על
ההקפאה מעל רוחב העיצוב בדיוק כמו במקור.
container-type חייב לשבת על header/main/footer עצמם ולא על ה-body:
containment הופך את האלמנט לבלוק-מכיל (containing block) לכל
position:fixed שבתוכו — ואם זה יושב על ה-body, ה-Header עצמו (שהוא
*ילד* של ה-body וגם fixed) נלכד בתוך זה ומפסיק להיות מקובע לוויופורט
האמיתי. על header/main/footer עצמם containment משפיע רק על הילדים
שלהם, לא על המיקום שלהם עצמם — אז ה-fixed של ה-Header נשאר תקין. */
/* רק main: ה-header וה-footer הם רכיבים גלובליים וחייבים להישאר על ה-ו-u
האתרי (100vw/1920) כמו בעמוד הבית — אחרת הם יוצאים צרים ברוחב פס
הגלילה מאלה של עמוד הבית. */
.b2b > main { container-type: inline-size; }
/* ההצהרה מוגבלת ל-768 ומעלה בכוונה: מתחת לזה style.css מגדיר
`:root { --u: 1px }` (שורה 1387) כדי שהעמוד יעבור ליחידות פיקסל אמיתיות
במובייל. הצהרה גורפת כאן על `.b2b > *` הייתה מנצחת את :root בירושה
וחוסמת את זה — וכך הטקסט במובייל ירד ל-0.2px ליחידה (טקסט של 3.5px).
מעל 768 אין ל-style.css הצהרה מתחרה, ולכן ה-cqw שלנו נכנס לתוקף. */
@media (min-width: 768px) {
.b2b > main { --u: min(1px, calc(100cqw / 1920)); }
}
.b2b-wrap {
width: calc(var(--b2b-container) * var(--u));
margin-inline: auto;
position: relative;
}
/* כל סקשן — בלוק בגובה מדויק שילדיו ממוקמים בתוכו */
.b2b main > section {
position: relative;
width: 100%;
overflow: hidden;
}
/* שכבת הקישוט חוצת-הסקשנים. יושבת כאח של הסקשנים (לא בתוכם) ולכן לא
נחתכת ע"י ה-overflow שלהם; מופיעה לפניהם ב-DOM ולכן נצבעת מתחתיהם,
והסקשנים שקופים אז היא נראית דרכם. */
.b2b > main { position: relative; }
.b2b-deco {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
/* טיפוגרפיה של העמוד: line-height 1.24 נמדד מהפיגמה
(96px → 119 לשורה, 64px → 79, 46px → 58) */
.b2b h1, .b2b h2, .b2b h3 { line-height: 1.24; }
/* ---------- 0.05 ווטרמארקים אופקיים ----------
ה-letter-spacing (42.24) מוסיף רווח גם *אחרי* התו האחרון, ולכן התיבה
רחבה ב-42 מזו שבפיגמה. style.css מקזז עם margin-inline-end, אבל ב-RTL
זה ממופה ל-margin-left — ולאלמנט absolute שנעוץ ב-right זה לא מזיז
כלום, אז הגליפים יצאו 42px שמאלה מדי. margin-right פיזי הוא הקיזוז
הנכון כאן (הטקסט לטיני, כלומר LTR, והרווח העודף בצד ימין). */
.b2b main > section > .watermark:not(.watermark--v) {
margin-right: calc(-42.24 * var(--u));
margin-inline-end: 0;
}
/* ---------- 0.1 כתמי הרקע המטושטשים ---------- */
.b2b-blob {
position: absolute;
border-radius: 50%;
filter: blur(calc(180 * var(--u)));
opacity: .5;
pointer-events: none;
}
/* ==========================================================================
כותרת עליונה — זהה לגמרי לעמוד הבית (96u/50u), לא למידות מהפיגמה של
העמוד הזה. כותרת אחידה בכל האתר.
========================================================================== */
/* כפתור הכותרת נשאר בעיצוב האחיד של האתר (label + עיגול חץ, hover ב-GSAP
דרך initButtons), לא הגלולה הבודדת שהופיעה בפיגמה עבור הדף הזה בלבד.
לכן הוא לא משתתף במערכת הרוחב הקבוע (--bw) של שאר כפתורי הדף, ומקבל
בחזרה את מידות הבסיס של .btn מ-style.css: פדינג לפי טקסט, גובה 61,
עיגול 61, חפיפה 6. */
/* שלוש מחלקות (.b2b + .b2b-header__cta + .btn__label) מול השתיים של
.b2b .btn__label למטה, כדי לנצח בלי תלות בסדר ההצהרות בקובץ. */
.b2b .b2b-header__cta .btn__label { width: auto; padding-inline: calc(34 * var(--u)); height: calc(61 * var(--u)); }
.b2b .b2b-header__cta .btn__arrow { width: calc(61 * var(--u)); height: calc(61 * var(--u)); margin-inline-start: calc(-6 * var(--u)); }
/* ---------- 0.2 רוחבי הכפתורים ----------
בפיגמה לכל גלולה רוחב, קוטר וחפיפה קבועים, ולכן לא נותנים לטקסט
לקבוע אותם. --bw רוחב הגלולה · --bc קוטר העיגול · --bo החפיפה ביניהם.
כפתור הכותרת (למעלה) מוחרג במפורש מהמערכת הזו. */
.b2b .btn { --bh: 62; --bo: 7.5; }
.b2b .btn__label {
width: calc(var(--bw) * var(--u));
height: calc(var(--bh) * var(--u));
padding-inline: 0;
font-size: calc(17 * var(--u));
}
.b2b .btn__arrow {
width: calc(var(--bc) * var(--u));
height: calc(var(--bc) * var(--u));
margin-inline-start: calc(-1 * var(--bo) * var(--u));
}
/* ==========================================================================
1 — Hero (0 → 1466)
========================================================================== */
.b2b-hero { height: calc(1466 * var(--u)); }
.b2b-hero__bg { position: absolute; inset: 0; }
/* מקורות מדויקים מ-Group 49.svg שהמעצבת סיפקה: h1/h3/h4 הם radial-gradient
דוהה לשקיפות (לא עיגול שטוח מטושטש), h2 הוא טבעת (stroke) לא מילוי.
h3 היה בטעות באדום בגרסה הקודמת -- במקור הוא כחול-אפור (periwinkle). */
.b2b-blob--h1 {
width: calc(1222 * var(--u)); height: calc(1105 * var(--u)); right: calc(266 * var(--u)); top: calc(361 * var(--u));
opacity: 1;
background: radial-gradient(closest-side, rgba(246,180,44,.24) 0%, rgba(246,180,44,0) 100%);
filter: none;
}
.b2b-blob--h2 {
width: calc(1033 * var(--u)); height: calc(1033 * var(--u)); right: calc(1225 * var(--u)); top: calc(-109 * var(--u));
opacity: 1;
background: transparent;
border: calc(218 * var(--u)) solid rgba(105,118,170,.32);
box-sizing: border-box;
filter: none;
}
.b2b-blob--h3 {
width: calc(1222 * var(--u)); height: calc(1105 * var(--u)); right: calc(-234 * var(--u)); top: calc(-161 * var(--u));
opacity: 1;
background: radial-gradient(closest-side, rgba(105,118,170,.24) 0%, rgba(105,118,170,0) 100%);
filter: none;
}
.b2b-blob--h4 {
width: calc(664 * var(--u)); height: calc(664 * var(--u)); right: calc(1510 * var(--u)); top: calc(459 * var(--u));
opacity: 1;
background: radial-gradient(closest-side, rgba(246,180,44,.13) 0%, rgba(246,180,44,0) 100%);
filter: none;
}
.b2b-hero__wave {
position: absolute; right: calc(1076 * var(--u)); top: calc(419 * var(--u));
width: calc(839 * var(--u)); height: calc(270 * var(--u));
opacity: .5;
}
.b2b-hero__laptop {
position: absolute; right: calc(971 * var(--u)); top: calc(232 * var(--u));
width: calc(856 * var(--u)); height: auto;
}
.b2b-hero__watermark {
right: calc(202 * var(--u)); top: calc(206 * var(--u));
font-size: calc(96 * var(--u));
}
.b2b-hero__title {
position: absolute; right: calc(83 * var(--u)); top: calc(273 * var(--u));
width: calc(970 * var(--u));
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
font-weight: 700;
font-size: calc(96 * var(--u));
text-align: right;
}
/* ---------- הדגשת "ישר למייל" בכותרת ה-Hero ----------
בפיגמה הכותרת שבורה לשלוש שורות קבועות, ו"ישר למייל" יושבות יחד
בשורה השנייה — באדום ועם הקו הצהוב מתחתן. בלי החלוקה המפורשת
השבירה הטבעית מפילה את "ישר" לשורה הראשונה ואת "למייל" לשנייה,
והקו הצהוב נשבר לשני חצאים בשתי שורות שונות. */
.b2b-hero__title .line { display: block; white-space: nowrap; }
.b2b-hero__accent { color: var(--red); }
/* הצירוף המודגש הוא יחידה אחת — גם כשהשורה סביבו כן נשברת (מובייל). */
.b2b-hero__title .underline-draw { white-space: nowrap; }
/* עובי הקו הצהוב ומיקומו נמדדים ב-em ולא ב-var(--u): במובייל הכותרת
עוברת ל-clamp() בפיקסלים, ויחידות --u היו משאירות שם קו של 10px
מתחת לגופן של 42px. ב-em הוא מתכווץ יחד עם הכותרת בכל רוחב מסך.
.16em מציב את ראש הקו בדיוק מתחת לקו הבסיס של הגליפים. */
.b2b-hero__title .underline-draw::after {
bottom: .16em;
height: .2em;
}
.b2b-hero__lead {
position: absolute; right: calc(83 * var(--u)); top: calc(640 * var(--u));
width: calc(718 * var(--u));
font-size: calc(17 * var(--u)); line-height: 1.75;
text-align: right;
}
.b2b-hero__actions {
position: absolute; right: calc(83 * var(--u)); top: calc(736 * var(--u));
display: flex; align-items: center; gap: calc(52 * var(--u));
}
.b2b-hero__actions .btn:nth-child(1) { --bw: 388; --bc: 62; }
.b2b-hero__actions .btn:nth-child(2) { --bw: 210; --bc: 63; --bo: 11.4; }
.b2b-hero__badge {
position: absolute; right: calc(86 * var(--u)); top: calc(861 * var(--u));
width: calc(230 * var(--u));
display: flex; align-items: center; gap: calc(10 * var(--u));
font-size: calc(17 * var(--u));
}
.b2b-hero__badge span { flex: 1; }
.b2b-hero__badge img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
/* ---------- פס ההרשמה הכהה (1013 → 1320) ----------
העיצוב עצמו (.signup.signup--dark, .scroll-cue) הוא בדיוק זה של "הרשמה
ראשונה" בעמוד הבית — בלי דריסות. כאן רק המיקום של הזוג בתוך ה-Hero,
לפי קואורדינטות הפיגמה של העמוד הזה (86,1013). */
.b2b-signup-wrap {
position: absolute; right: calc(86 * var(--u)); top: calc(1013 * var(--u));
width: calc(1749 * var(--u));
}
/* ---- מידות מדויקות מ-Figma Frame 98 (1749×307) ----
Frame 104 (הבלוק הפנימי) ב-y=50 ורוחב 1092, ובתוכו:
כותרת y=0 גובה 28 · שורת הטופס y=63 גובה 62 · תנאים y=160 גובה 20
כלומר מרווח אחיד של 35 בין שלושת הבלוקים. */
.b2b-signup-wrap .signup--dark {
width: 100%;
height: calc(307 * var(--u));
margin: 0;
padding: calc(50 * var(--u)) 0 0;
border-radius: calc(40 * var(--u));
}
/* בפיגמה תיבת הכותרת היא 28 בעוד הגופן 48 (יחס גובה-גליף 0.583, כמו
שאר הטקסטים בקובץ) — trim-both חותך את התיבה לגובה הגליף, אחרת היא
יוצאת 48 וכל מה שמתחתיה נסחף 20px. */
.b2b-signup-wrap .signup__title {
font-size: calc(48 * var(--u));
line-height: 1;
text-box: trim-both cap alphabetic;
}
.b2b-signup-wrap .signup__form { margin-top: calc(35 * var(--u)); gap: calc(20 * var(--u)); }
/* Group 24: שם מלא 254 · אימייל 268 · כפתור 292.5 — לא שווים בפיגמה */
.b2b-signup-wrap .signup__form .field { height: calc(62 * var(--u)); }
.b2b-signup-wrap .signup__form .field:nth-of-type(1) { width: calc(254 * var(--u)); }
.b2b-signup-wrap .signup__form .field:nth-of-type(2) { width: calc(268 * var(--u)); }
/* Group 29: גלולה 238 + עיגול 62 בחפיפה 7.5 = 292.5.
בלי זה --bw לא מוגדר, ה-width נופל ל-auto אבל padding-inline:0 נשאר —
וזה מה שגרם לטקסט לגלוש מחוץ לגלולה הצהובה. */
.b2b-signup-wrap .btn { --bw: 238; --bc: 62; --bh: 62; --bo: 7.5; }
.b2b-signup-wrap .form-status:empty { margin: 0; }
.b2b-signup-wrap .signup__terms { margin-top: calc(35 * var(--u)); }
/* עיגול הגלילה — Group 46.svg: דיסק כהה 142, ובתוכו טבעת ירוקה 115
בעובי 5 עם מילוי ירוק 8%. לא ה-96 עם מסגרת 3 של עמוד הבית. */
.b2b-signup-wrap .scroll-cue {
position: absolute;
top: calc(237 * var(--u));
left: 50%;
transform: translateX(-50%);
width: calc(142 * var(--u));
height: calc(142 * var(--u));
margin: 0;
border: 0;
background: var(--ink);
color: var(--white);
}
.b2b-signup-wrap .scroll-cue::before {
content: '';
position: absolute;
width: calc(115 * var(--u));
height: calc(115 * var(--u));
border-radius: 50%;
border: calc(5 * var(--u)) solid rgba(71, 156, 71, .5);
background: rgba(71, 156, 71, .04);
box-sizing: border-box;
}
.b2b-signup-wrap .scroll-cue svg { width: calc(32 * var(--u)); position: relative; }
.b2b-signup-wrap .scroll-cue:hover { transform: translateX(-50%) translateY(4px); }
/* ==========================================================================
2 — המספרים (1466 → 2183)
========================================================================== */
.b2b-numbers { height: calc(717 * var(--u)); }
/* אותה מגבלה כמו ב-WHY: בכתיבה אנכית אין תמיכה ב-text-box:trim, ולכן
התיבה רחבה ב-31 מזו שבפיגמה והגליפים ממורכזים בתוכה. 15.5 מקזז את זה
כדי שהגליפים ינחתו על x=1796 שבפיגמה. אנכית התיבה מדויקת (0..454). */
.b2b-numbers__watermark { right: calc(41.5 * var(--u)); top: 0; font-size: calc(96 * var(--u)); }
.b2b-numbers__mic {
position: absolute; right: calc(1355 * var(--u)); top: calc(227 * var(--u));
width: calc(428 * var(--u)); height: calc(396 * var(--u));
/* נכס המקור של המעצבת ריבועי (1100×1100) בעוד תיבת הפיגמה 428×396.
object-fit:contain משאיר את המיקרופון בפרופורציה המקורית בתוך התיבה
במקום למתוח אותו ב-8% לרוחב. */
object-fit: contain;
/* חייב לשבת מעל טבעת ה-LIVE שחופפת אותו; בלי זה סדר ה-DOM (הטבעות אחריו)
מציב אותן מעליו */
z-index: 2;
}
.b2b-numbers__title {
position: absolute; right: calc(448 * var(--u)); top: calc(23 * var(--u));
width: calc(1025 * var(--u));
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
font-size: calc(64 * var(--u)); text-align: center;
}
.b2b-numbers__lead {
position: absolute; right: calc(595 * var(--u)); top: calc(125 * var(--u));
width: calc(731 * var(--u));
font-size: calc(17 * var(--u)); line-height: 1.75; text-align: center;
}
/* ---------- טבעות המספרים ----------
כל טבעת דו-צבעונית, ולכן conic-gradient עם mask ולא border. */
.b2b-stats {
position: absolute; right: calc(346 * var(--u)); top: calc(218 * var(--u));
width: calc(1228 * var(--u));
display: flex; gap: calc(108 * var(--u));
/* בפיגמה LIVE הוא השמאלי ביותר — ltr שומר על הסדר הזה */
direction: ltr;
}
.b2b-stat {
direction: rtl;
position: relative;
width: calc(226 * var(--u)); height: calc(226 * var(--u));
flex: none;
display: grid; place-content: center; text-align: center;
gap: calc(15 * var(--u));
}
.b2b-stat::before {
content: '';
position: absolute; inset: 0;
border-radius: 50%;
background: conic-gradient(var(--ring1) 0 var(--split), var(--ring2) var(--split) 100%);
/* טבעת בעובי 19 */
mask: radial-gradient(farthest-side, transparent calc(100% - 19 * var(--u)), #000 calc(100% - 19 * var(--u)));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 19 * var(--u)), #000 calc(100% - 19 * var(--u)));
}
.b2b-stat.has-svg-ring::before { display: none; }
.b2b-stat__ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
transform: rotate(0.01deg);
}
.b2b-stat__ringPath {
fill: none;
stroke-width: 8.4;
stroke-linecap: butt;
}
.b2b-stat--a { --ring1: var(--red); --ring2: var(--yellow); --split: 62%; }
.b2b-stat--b { --ring1: var(--green); --ring2: var(--yellow); --split: 45%; }
.b2b-stat--c { --ring1: var(--periwinkle); --ring2: var(--green); --split: 50%; }
.b2b-stat--d { --ring1: var(--periwinkle); --ring2: var(--red); --split: 40%; }
.b2b-stat__value {
position: relative;
z-index: 1;
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
font-weight: 700;
font-size: calc(48 * var(--u));
line-height: 1;
color: var(--ink);
}
.b2b-stat--c .b2b-stat__value,
.b2b-stat--d .b2b-stat__value { font-size: calc(64 * var(--u)); }
.b2b-stat__label { position: relative; z-index: 1; font-size: calc(20 * var(--u)); line-height: 1.2; }
/* ==========================================================================
3 — הערוץ המרכזי (2183 → 3769)
========================================================================== */
.b2b-channel { height: calc(1586 * var(--u)); }
/* שני אלה יושבים ב-.b2b-deco (קואורדינטות של כל העמוד) ולא בתוך הסקשן,
כי שניהם חוצים את הגבול 3769 בין "הערוץ" ל-"WHY".
Ellipse 30.svg: טבעת periwinkle ברוחב 351 ב-10% — לא מילוי.
מיקום בפיגמה: x=1342 y=2771, 1586×1586 (יורדת עד 4357). */
.b2b-blob--c1 {
width: calc(1586 * var(--u)); height: calc(1586 * var(--u));
right: calc(-1008 * var(--u)); top: calc(2771 * var(--u));
opacity: 1;
background: transparent;
border: calc(351 * var(--u)) solid rgba(105,118,170,.1);
box-sizing: border-box;
filter: none;
}
.b2b-blob--c2 {
width: calc(1222 * var(--u)); height: calc(1105 * var(--u));
right: calc(1260 * var(--u)); top: calc(2869 * var(--u));
background: rgba(105,118,170,.18);
}
.b2b-channel__watermark { right: calc(362 * var(--u)); top: 0; font-size: calc(96 * var(--u)); }
.b2b-channel__title {
position: absolute; right: calc(567 * var(--u)); top: calc(78 * var(--u));
width: calc(779 * var(--u));
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
font-size: calc(64 * var(--u)); text-align: center;
}
.b2b-channel__lead {
position: absolute; right: calc(677 * var(--u)); top: calc(256 * var(--u));
width: calc(567 * var(--u));
font-size: calc(17 * var(--u)); line-height: 1.9; text-align: center;
}
/* ---------- שלושת הכרטיסים ---------- */
.b2b-card {
position: absolute;
border-radius: calc(30 * var(--u));
overflow: hidden;
color: var(--ink);
}
/* גובה חובה, לא רק רוחב: ה-![]()
נושא width/height="92" (וכן 90 ו-112)
כתכונות HTML. בלי height ב-CSS הרוחב מתכווץ עם --u אבל הגובה נשאר על
ערך התכונה — 68 על 92 ב-1440 — והאייקון יוצא מרוח ודוחף את הכותרת. */
.b2b-card__icon { position: absolute; }
.b2b-card__title {
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
font-size: calc(96 * var(--u));
}
.b2b-card__text { font-size: calc(24 * var(--u)); line-height: 1.5; }
.b2b-card--red {
right: calc(888 * var(--u)); top: calc(372 * var(--u));
width: calc(947 * var(--u)); height: calc(518 * var(--u));
background: var(--red);
}
.b2b-card--red .b2b-card__icon { right: calc(100 * var(--u)); top: calc(52 * var(--u)); width: calc(92 * var(--u)); height: calc(92 * var(--u)); }
.b2b-card--red .b2b-card__title { position: absolute; right: calc(100 * var(--u)); top: calc(164 * var(--u)); width: calc(691 * var(--u)); text-align: right; }
.b2b-card--red .b2b-card__text { position: absolute; right: calc(100 * var(--u)); top: calc(303 * var(--u)); width: calc(747 * var(--u)); text-align: center; }
.b2b-card--green {
right: calc(86 * var(--u)); top: calc(372 * var(--u));
width: calc(773 * var(--u)); height: calc(518 * var(--u));
background: var(--green); color: var(--white);
}
.b2b-card--green::after {
content: ''; position: absolute;
right: calc(517 * var(--u)); top: calc(296 * var(--u));
width: calc(365 * var(--u)); height: calc(365 * var(--u));
background: url('../img/b2b/card-green-circle.svg') center / 100% 100% no-repeat;
pointer-events: none;
}
.b2b-card--green .b2b-card__icon { right: calc(52 * var(--u)); top: calc(49 * var(--u)); width: calc(86 * var(--u)); height: calc(86 * var(--u)); }
.b2b-card--green .b2b-card__title { position: absolute; right: calc(105 * var(--u)); top: calc(155 * var(--u)); width: calc(660 * var(--u)); white-space: nowrap; text-align: right; }
.b2b-card--green .b2b-card__text { position: absolute; right: calc(105 * var(--u)); top: calc(294 * var(--u)); width: calc(607 * var(--u)); text-align: right; }
.b2b-card--yellow {
right: calc(86 * var(--u)); top: calc(931 * var(--u));
width: calc(1749 * var(--u)); height: calc(463 * var(--u));
background: var(--yellow);
}
.b2b-card--yellow::after {
content: ''; position: absolute;
right: calc(1402 * var(--u)); top: calc(-29 * var(--u));
width: calc(365 * var(--u)); height: calc(365 * var(--u));
background: url('../img/b2b/card-yellow-circle.svg') center / 100% 100% no-repeat;
pointer-events: none;
}
.b2b-card--yellow .b2b-card__icon { right: calc(51 * var(--u)); top: calc(78 * var(--u)); width: calc(112 * var(--u)); height: calc(112 * var(--u)); }
.b2b-card--yellow .b2b-card__title { position: absolute; right: calc(51 * var(--u)); top: calc(210 * var(--u)); width: calc(1308 * var(--u)); text-align: center; }
.b2b-card--yellow .b2b-card__text { position: absolute; right: calc(51 * var(--u)); top: calc(349 * var(--u)); width: calc(1308 * var(--u)); text-align: center; font-size: calc(17 * var(--u)); }
/* ==========================================================================
4 — WHY / 90% (3769 → 4273)
========================================================================== */
/* גובה ביניים בין המרווח הצפוף בפיגמה לבין הרווח הגדול שהיה בגרסה
הקודמת: נשארים כ-225u של אוויר אחרי התוכן לפני CASE STUDIES. */
.b2b-why { height: calc(620 * var(--u)); }
/* בפיגמה תיבת ה-WHY היא 67×179 ב-x=183 y=263, אבל בכתיבה אנכית הדפדפן
לא תומך ב-text-box:trim (style.css מבטל אותו ב-.watermark--v), ולכן
התיבה בפועל 98×221 — גדולה ב-31×42. הערכים כאן מקזזים את ההפרש כדי
שמרכז הגליפים ינחת במרכז שבפיגמה. opacity 0.06 לפי הפיגמה (ברירת
המחדל ב-.watermark היא 0.13). */
.b2b-why__watermark {
left: calc(167.5 * var(--u));
right: auto;
top: calc(231 * var(--u));
font-size: calc(96 * var(--u));
opacity: .06;
}
.b2b-why__dashes {
position: absolute; right: calc(1362 * var(--u)); top: 0;
display: flex; width: calc(368 * var(--u));
}
/* בפיגמה אין רדיוס בכלל — ארבעה מלבנים צמודים שיוצרים פס רציף אחד.
border-radius:999px הפך כל אחד לגלולה וייצר חריצים בין הקטעים. */
.b2b-why__dashes li { width: calc(92 * var(--u)); height: calc(8 * var(--u)); border-radius: 0; }
/* בפיגמה הסדר משמאל לימין הוא ירוק · אדום · צהוב · כחול-אפור. הרשימה
היא flex ב-RTL, ולכן הילד הראשון הוא הימני — כלומר סדר ה-DOM הפוך. */
.b2b-why__dashes li:nth-child(1) { background: var(--periwinkle); }
.b2b-why__dashes li:nth-child(2) { background: var(--yellow); }
.b2b-why__dashes li:nth-child(3) { background: var(--red); }
.b2b-why__dashes li:nth-child(4) { background: var(--green); }
.b2b-why__title {
position: absolute; right: calc(1067 * var(--u)); top: calc(68 * var(--u));
width: calc(554 * var(--u));
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
font-size: calc(46 * var(--u)); text-align: right;
}
.b2b-why__text {
position: absolute; right: calc(1020 * var(--u)); top: calc(231 * var(--u));
width: calc(601 * var(--u));
font-size: calc(15 * var(--u)); line-height: 1.7; text-align: right;
}
.b2b-why__figure {
position: absolute; right: calc(149 * var(--u)); top: calc(82 * var(--u));
width: calc(752 * var(--u));
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
font-weight: 700;
font-size: calc(312 * var(--u));
line-height: 1;
text-align: center;
color: var(--ink);
}
/* ==========================================================================
5 — Case studies (4273 → 5346)
========================================================================== */
.b2b-cases { height: calc(1073 * var(--u)); }
.b2b-cases__watermark { right: calc(586 * var(--u)); top: 0; font-size: calc(96 * var(--u)); }
.b2b-cases__title {
position: absolute; right: calc(666 * var(--u)); top: calc(67 * var(--u));
width: calc(588 * var(--u));
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
font-size: calc(64 * var(--u)); line-height: normal; text-align: center;
text-box: trim-both cap alphabetic;
}
.b2b-cases__lead {
position: absolute; right: calc(677 * var(--u)); top: calc(230 * var(--u));
width: calc(567 * var(--u));
font-size: calc(15 * var(--u)); line-height: 1.7; text-align: center;
}
.b2b-cases__viewport {
position: absolute; right: 0; top: calc(339 * var(--u));
width: 100%;
height: calc(509 * var(--u));
overflow: hidden;
direction: ltr;
}
.b2b-cases__track {
display: flex;
gap: calc(23 * var(--u));
width: max-content;
will-change: transform;
animation: b2b-cases-loop 36s linear infinite;
}
.b2b-cases__sequence {
display: flex;
gap: calc(23 * var(--u));
flex: none;
}
.b2b-cases__viewport:hover .b2b-cases__track,
.b2b-cases__viewport:focus-within .b2b-cases__track { animation-play-state: paused; }
@keyframes b2b-cases-loop {
to { transform: translateX(calc(-2544 * var(--u))); }
}
/* כרטיסי התוצאות הם יחידה רציפה של 613×509: חלק עליון בהיר בגובה 345
וחלק נתונים כהה בגובה 164, בדיוק לפי Groups 44–45 בפיגמה. */
.b2b-case {
width: calc(613 * var(--u));
height: calc(509 * var(--u));
flex: none;
position: relative;
overflow: hidden;
border-radius: calc(25 * var(--u));
background: var(--surface);
}
.b2b-case__media {
position: absolute; inset: 0 0 auto;
height: calc(209 * var(--u));
border-top: calc(11 * var(--u)) solid var(--case-accent, var(--yellow));
border-radius: calc(25 * var(--u)) calc(25 * var(--u)) 0 0;
overflow: hidden;
box-sizing: border-box;
}
.b2b-case__img { position: absolute; left: 0; width: 100%; height: 414.93%; max-width: none; }
.b2b-case--type-1 .b2b-case__img { top: -61.12%; }
.b2b-case--type-2 .b2b-case__img { top: -145.98%; }
.b2b-case__badge {
position: absolute; right: calc(26 * var(--u)); top: calc(36 * var(--u));
width: calc(145 * var(--u)); height: calc(145 * var(--u));
border-radius: 50%; object-fit: cover;
background: var(--white);
}
.b2b-case--type-2 .b2b-case__badge { right: calc(18 * var(--u)); top: calc(32 * var(--u)); }
.b2b-case__body {
position: absolute; inset: calc(209 * var(--u)) 0 auto;
height: calc(136 * var(--u));
padding-inline: calc(18 * var(--u));
direction: rtl;
}
.b2b-case__meta {
margin-top: calc(44 * var(--u));
display: flex; justify-content: space-between;
font-size: calc(20 * var(--u)); line-height: 1;
text-box: trim-both cap alphabetic;
}
.b2b-case--type-1 .b2b-case__category { margin-right: calc(16 * var(--u)); }
.b2b-case__title {
margin-top: calc(24 * var(--u));
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
font-size: calc(24 * var(--u)); line-height: 1; text-align: right;
text-box: trim-both cap alphabetic;
}
.b2b-case--type-1 .b2b-case__title { margin-right: calc(16 * var(--u)); }
.b2b-case__stats {
position: absolute; inset: calc(345 * var(--u)) 0 0;
background: var(--ink); color: var(--white);
height: calc(164 * var(--u));
border-radius: 0 0 calc(25 * var(--u)) calc(25 * var(--u));
padding-inline: calc(102 * var(--u));
display: flex; justify-content: space-between; align-items: flex-start;
padding-top: calc(56 * var(--u));
direction: ltr;
}
.b2b-case--type-2 .b2b-case__stats { padding-inline: calc(80 * var(--u)); }
/* בפיגמה (Frame 160/159/158) התווית ממורכזת מתחת למספר, לא מיושרת לימין:
התא של "400" ברוחב 151 והתווית "לידים" ברוחב 43 יושבת ב-x=54 — כלומר
54 משני הצדדים. עם text-align:right התוויות נסחפו עד 67 יחידות ימינה.
רוחב התא עצמו קבוע בעיצוב (--stat-w) ולא נגזר מרוחב הטקסט, ולכן גם
המרווחים בין השלושה יצאו שגויים. */
.b2b-case__stat {
direction: rtl;
text-align: center;
width: calc(var(--stat-w, 137) * var(--u));
flex: none;
}
/* בפיגמה תיבת המספר היא 37 והתווית 12 (גובה גליף), עם התווית ב-y=59.
בלי text-box:trim התיבות יוצאות 64 ו-30 והשורה מתנפחת ל-106 במקום 71. */
.b2b-case__statValue {
display: block;
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
font-size: calc(48 * var(--u)); line-height: 1;
text-box: trim-both cap alphabetic;
}
.b2b-case__stat.is-accent .b2b-case__statValue { color: var(--yellow); }
.b2b-case__statLabel {
display: block;
margin-top: calc(22 * var(--u));
font-size: calc(20 * var(--u)); line-height: 1;
text-box: trim-both cap alphabetic;
}
.b2b-cases__cta { position: absolute; right: calc(783 * var(--u)); top: calc(905 * var(--u)); }
.b2b-cases__cta { --bw: 300; --bc: 62; }
/* ==========================================================================
6 — כבר פרסמו (5346 → 6216)
========================================================================== */
/* overflow גלוי כדי שהכתם המטושטש שיוצא מתחתית הסקשן לא ייחתך בקו ישר
בגבול — הוא ממשיך אל מתחת לפס הכהה של LET'S TALK, שנצבע מעליו ומסתיר
אותו. כל שאר תוכן הסקשן נמצא בתוך הגבולות ולכן לא דולף. */
/* הסלקטור חייב להיות חזק מ-`.b2b main > section { overflow:hidden }` */
.b2b main > section.b2b-clients { height: calc(870 * var(--u)); overflow: visible; }
.b2b-clients__bg { position: absolute; inset: 0; }
.b2b-blob--l1 { width: calc(1222 * var(--u)); height: calc(1105 * var(--u)); right: calc(346 * var(--u)); top: calc(548 * var(--u)); background: rgba(105,118,170,.16); }
.b2b-clients__watermark { right: calc(577 * var(--u)); top: 0; font-size: calc(96 * var(--u)); }
.b2b-clients__title {
position: absolute; right: calc(550 * var(--u)); top: calc(67 * var(--u));
width: calc(820 * var(--u));
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
font-size: calc(64 * var(--u)); line-height: normal; text-align: center;
text-box: trim-both cap alphabetic;
}
.b2b-clients__lead {
position: absolute; right: calc(648 * var(--u)); top: calc(142 * var(--u));
width: calc(625 * var(--u));
font-size: calc(15 * var(--u)); line-height: 1.7; text-align: center;
}
/* שתי רצועות לוגואים אינסופיות. נקודות ההתחלה וההפרש האנכי משמרים את
הפריסה המדורגת של הפיגמה, והתנועה הנגדית מבהירה שמדובר בקרוסלה. */
.b2b-clients__grid {
position: absolute; inset: calc(295 * var(--u)) 0 auto;
height: calc(352 * var(--u));
overflow: hidden;
direction: ltr;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.b2b-clients__row {
position: absolute;
left: calc(var(--row-x) * var(--u));
width: max-content;
height: calc(160 * var(--u));
}
.b2b-clients__row--1 { --row-x: -120; top: 0; }
.b2b-clients__row--2 { --row-x: -80; top: calc(192 * var(--u)); }
.b2b-clients__track {
display: flex;
gap: calc(32 * var(--u));
width: max-content;
will-change: transform;
animation: b2b-logos-left 34s linear infinite;
}
.b2b-clients__row--2 .b2b-clients__track {
animation-name: b2b-logos-right;
animation-duration: 38s;
}
.b2b-clients__group {
display: flex;
gap: calc(32 * var(--u));
flex: none;
}
.b2b-client {
display: block;
width: calc(160 * var(--u)); height: calc(160 * var(--u));
border-radius: calc(18 * var(--u));
overflow: hidden;
background: var(--white);
}
.b2b-client img { width: 100%; height: 100%; object-fit: cover; }
@keyframes b2b-logos-left {
to { transform: translateX(calc(-2304 * var(--u))); }
}
@keyframes b2b-logos-right {
from { transform: translateX(calc(-2304 * var(--u))); }
to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.b2b-clients__track { animation: none; }
}
/* ==========================================================================
7 — LET'S TALK (6216 → 7050)
========================================================================== */
.b2b-talk { height: calc(834 * var(--u)); color: var(--white); }
.b2b-talk__band {
position: absolute; right: calc(-16 * var(--u)); top: 0;
width: calc(1950 * var(--u)); height: calc(834 * var(--u));
/* style.css מגדיר img{max-width:100%} גלובלית — זה קיצץ את הרוחב
המכוון (1950, רחב יותר מהמכולה) בדיוק ל-100% ומנע דימום מלא לקצוות */
max-width: none;
}
.b2b-talk__wave {
position: absolute; right: calc(-129 * var(--u)); top: calc(448 * var(--u));
width: calc(1024 * var(--u)); height: calc(238 * var(--u));
/* השקיפות כבר מוטמעת בתוך ה-SVG; שכבה נוספת כאן העלימה אותו כמעט לגמרי. */
opacity: 1;
}
/* בשונה מ-WHY, ל-LET'S TALK אין letter-spacing בפיגמה — עם ה-42.24
שיורש מ-.watermark התיבה יצאה 641 גבוה במקום 219. הצבע במקור הוא
rgba(240,237,237,.15) ולא לבן ב-18%. */
.b2b-talk__watermark {
right: calc(1691 * var(--u)); top: calc(300 * var(--u));
font-size: calc(96 * var(--u));
letter-spacing: normal;
margin-top: 0; margin-bottom: 0;
color: rgba(240, 237, 237, .15);
opacity: 1;
}
.b2b-talk__head { position: absolute; right: calc(152 * var(--u)); top: calc(131 * var(--u)); width: calc(677 * var(--u)); }
.b2b-talk__title {
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
font-size: calc(64 * var(--u)); text-align: right;
}
.b2b-talk__lead {
margin-top: calc(50 * var(--u));
width: calc(473 * var(--u));
font-size: calc(24 * var(--u)); line-height: 1.35; text-align: right;
}
.b2b-talk__card {
position: absolute; right: calc(986 * var(--u)); top: calc(131 * var(--u));
width: calc(664 * var(--u));
/* +50u מעל גובה הפיגמה (572) כדי לתת מקום לשורת הצ'קבוקס שנוספה מתחת
לכפתור, לפי בקשה מפורשת — לא היה קיים במקור */
height: calc(622 * var(--u));
background: var(--grey);
border-radius: calc(25 * var(--u));
/* Group 47.svg: השדות מתחילים ב-x=314.5 (קלף ב-270) ו-y=182.5 (קלף ב-131) */
padding: calc(51.5 * var(--u)) calc(44.5 * var(--u));
color: var(--ink);
}
/* Group 47.svg: השדות הם מילוי כהה שקוף 9% + מסגרת כהה דקה, לא אפור שטוח.
מידות מדויקות: שדה 277×61 רדיוס 24.5, מרווח 21 בין שדות ובין שורות
(612.5 − 591.5 = 21 ; 264.5 − 243.5 = 21). */
.b2b-talk__row { display: flex; gap: calc(21 * var(--u)); margin-bottom: calc(21 * var(--u)); }
.b2b-talk__row .field { width: calc(277 * var(--u)); height: calc(61 * var(--u)); border-radius: calc(24.5 * var(--u)); background: rgba(30,39,46,.09); border: 1px solid var(--ink); text-align: center; }
/* בפיגמה תיבת התווית היא 20 בדיוק (גובה הגליף), עם 20.5 מרווח מכל צד:
194.5 →(21)→ תווית 215..235 →(20.5)→ שדה 255.5. בלי line-height:1
התיבה יוצאת 32 והשדות שמתחת נסחפים 12px כל אחד. */
.b2b-talk__card .form-group { margin-bottom: calc(20.5 * var(--u)); }
.b2b-talk__card .form-group > label {
font-size: calc(20 * var(--u)); line-height: 1;
margin-bottom: calc(20.5 * var(--u));
}
.b2b-talk__card .form-group .field { height: calc(61 * var(--u)); border-radius: calc(24.5 * var(--u)); background: rgba(30,39,46,.09); border: 1px solid var(--ink); }
.b2b-talk__submit { display: flex; justify-content: flex-start; }
/* כפתור: עיגול קוטר 61 (r=30.5) + גלולה 296×61. בפיגמה יש רווח של 1
ביניהם (עיגול מסתיים ב-592.5, גלולה מתחילה ב-593.5) — ולכן --bo שלילי,
שהופך את החפיפה הרגילה לרווח. */
.b2b-talk__submit .btn { --bw: 296; --bc: 61; --bh: 61; --bo: -1; }
.b2b-talk__disclaimer {
margin-top: calc(20 * var(--u));
display: flex; align-items: center; gap: calc(13 * var(--u));
font-size: calc(14 * var(--u)); line-height: 1.4;
}
.b2b-talk__disclaimer .consent__box { accent-color: var(--ink); }
.b2b-talk__disclaimer .consent__box::after {
width: calc(5 * var(--u));
height: calc(9 * var(--u));
border-inline-start: 0;
border-right: calc(2 * var(--u)) solid var(--ink);
border-bottom: calc(2 * var(--u)) solid var(--ink);
transform: rotate(45deg) translate(calc(-1 * var(--u)), calc(-1 * var(--u)));
}
/* בטופס הראשון התבליט הוחלף בתיבת אישור אמיתית, כמו בכל הטפסים. */
.b2b-signup__consent {
flex-direction: row;
gap: calc(12 * var(--u));
}
.b2b-signup__consent .consent__box {
color: var(--white);
border-color: var(--white);
}
.b2b-signup__consent .consent__box::after {
width: calc(5 * var(--u));
height: calc(9 * var(--u));
border-inline-start: 0;
border-right: calc(2 * var(--u)) solid var(--ink);
border-bottom: calc(2 * var(--u)) solid var(--ink);
transform: rotate(45deg) translate(calc(-1 * var(--u)), calc(-1 * var(--u)));
}
/* החץ מצטייר מלמעלה כלפי מטה בלופ וקטורי עדין. עובי הקו נשאר 2 בדיוק. */
.b2b-signup-wrap .scroll-cue svg path {
stroke-width: 2;
vector-effect: non-scaling-stroke;
stroke-dasharray: 36;
stroke-dashoffset: 36;
animation: b2b-scroll-arrow-draw 2.2s cubic-bezier(.55, 0, .25, 1) infinite;
}
@keyframes b2b-scroll-arrow-draw {
0% { stroke-dashoffset: 36; opacity: 0; }
10% { opacity: 1; }
64% { stroke-dashoffset: 0; opacity: 1; }
80% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 0; }
}
/* ==========================================================================
8 — שאלות נפוצות
מבנה+CSS זהים 1:1 לסקשן FAQ בעמוד הבית (.faq family, style.css) —
ראו הערה ב-b2b.html. אין כאן דריסות; רק המיקרופון (.faq__mic) מפנה
לתמונה הייחודית של העמוד הזה, וממשיך להשתמש במיקום/גודל של המקור.
========================================================================== */
/* בעמוד הבית ה-FAQ בא אחרי סקשן עם רווח תחתון משלו; כאן הוא צמוד ישר
לתחתית הכהה המעוגלת של LET'S TALK (רווח=0), אז מוסיפים ריפוד עליון. */
.b2b .faq { padding-top: calc(150 * var(--u)); }
/* המיקרופון — Figma 321:50, קופסה 537×497.
הנכס: mic-qa.svg, אותו קובץ של עמוד הבית (הגרסה המהופכת אופקית).
קודם ישב כאן b2b/mic.png — ראסטר ריבועי 1100×1100 ש-object-fit:contain הכניס
לגובה 497, ויצא מיקרופון ב-166×390 במקום 193×455 — קטן ב-14%. ה-SVG
נוש́א את הקרופ והקנה-מידה של הפיגמה בתוכו (pattern transform), ולכן הוא
נופל על הרנדר בדיוק: MAD 2.35 מול 41.93 לגרסה הלא-מהופכת.
המיקום: Figma מדווח x=1824, אבל הנכס מהופך אופקית וה-x המדווח הוא
המוצא *לפני* ההיפוך — הקצה השמאלי בפועל הוא 1824−537=1287, ולכן
right = 1920−1824 = 96. אותה תופעה תועדה כבר בעמוד הבית (style.css).
ה-y בפיגמה הוא 365 מראש הסקשן; כאן כל התוכן מוסט 168 מטה בגלל
ה-padding-top של 150 (מאומת מול שלושה עוגנים: כותרת, הערת שורה,
רשימת השאלות) — ולכן top = 365+168 = 533. ב-353 שירשנו מעמוד הבית
המיקרופון טיפס על שורת "לא מצאתם תשובה?". */
.b2b .faq__mic { top: calc(533 * var(--u)); right: calc(96 * var(--u)); }
/* ==========================================================================
9 — המלצות (8068 → 9442)
========================================================================== */
.b2b-reviews { height: calc(1374 * var(--u)); color: var(--white); }
.b2b-reviews__band {
position: absolute; right: calc(-16 * var(--u)); top: 0;
width: calc(1950 * var(--u)); height: calc(1374 * var(--u));
max-width: none;
}
.b2b-reviews__head { position: absolute; right: calc(86 * var(--u)); top: calc(288 * var(--u)); width: calc(444 * var(--u)); }
.b2b-reviews__watermark {
position: static; display: block;
font-size: calc(96 * var(--u)); text-align: right; color: var(--white); opacity: .16;
letter-spacing: normal;
margin-inline-end: 0;
margin-bottom: calc(30 * var(--u));
}
.b2b .b2b-reviews__title {
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
width: calc(433 * var(--u));
font-size: calc(64 * var(--u)); line-height: 1.07; text-align: right;
text-box: normal;
}
.b2b-reviews__title span { display: block; }
.b2b-reviews__lead { width: calc(422 * var(--u)); margin-top: calc(30 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.6; text-align: right; }
/* ---- מפרט מדויק מ-Group 43.svg (הסקשן מתחיל ב-y=8068, והקבוצה ב-8127,
כלומר 59 יחסית לסקשן) ----
3 עמודות: x=86 ברוחב 404 · x=504 ברוחב 355 · x=873 ברוחב 360
(מרווחים 14 ו-12, לא אחידים) · סה"כ 86..1233 = 1147.
העמודות מתחילות בהיסט שונה: 194 / 38 / 38 מראש התיבה. */
.b2b-reviews__masonry {
position: absolute; right: calc(687 * var(--u)); top: calc(149 * var(--u));
width: calc(1147 * var(--u)); height: calc(891 * var(--u));
display: flex; gap: calc(14 * var(--u));
direction: ltr;
overflow: hidden;
/* שתי רצועות הדהייה מהפיגמה, באותה טכניקת mask של .reviews__cols
בעמוד הבית — כאן היא חושפת את הרקע הכהה במקום הבהיר.
עליונה: הכרטיסים מוסתרים 0→77 ונחשפים עד 106 (stop 0.726 במקור).
תחתונה: גלויים עד 813 ונמוגים עד 891 (רצועה של 78). */
-webkit-mask-image: linear-gradient(180deg,
transparent 0,
transparent calc(77 * var(--u)),
#000 calc(106 * var(--u)),
#000 calc(813 * var(--u)),
transparent calc(891 * var(--u)));
mask-image: linear-gradient(180deg,
transparent 0,
transparent calc(77 * var(--u)),
#000 calc(106 * var(--u)),
#000 calc(813 * var(--u)),
transparent calc(891 * var(--u)));
}
.b2b-reviews__col {
display: flex; flex-direction: column; gap: 0; align-items: flex-start;
will-change: transform;
animation: b2b-reviews-up var(--review-duration) linear infinite;
}
.b2b-reviews__col:nth-child(1) { --review-shift: 598; --review-duration: 17.6s; flex: 0 0 calc(404 * var(--u)); margin-top: calc(194 * var(--u)); }
.b2b-reviews__col:nth-child(2) { --review-shift: 870; --review-duration: 20.7s; flex: 0 0 calc(357 * var(--u)); margin-top: calc(38 * var(--u)); }
.b2b-reviews__col:nth-child(3) { --review-shift: 853; --review-duration: 28.4s; flex: 0 0 calc(360 * var(--u)); margin-top: calc(38 * var(--u)); }
.b2b-reviews__set {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(20 * var(--u));
padding-bottom: calc(20 * var(--u));
flex: none;
}
.b2b-review {
position: relative;
flex: none;
border-radius: calc(25 * var(--u));
overflow: hidden;
background: var(--white);
border: 1px solid var(--grey);
box-shadow: calc(5 * var(--u)) 0 calc(20.2 * var(--u)) calc(-2 * var(--u)) rgba(0,0,0,.04);
}
.b2b-review img { position: absolute; display: block; max-width: none; }
.b2b-review--text {
width: 100%;
min-height: calc(220 * var(--u));
padding: calc(30 * var(--u));
color: var(--ink);
direction: rtl;
text-align: right;
}
.b2b-review--text blockquote { margin: 0; }
.b2b-review--text p { margin: 0; font-size: calc(17 * var(--u)); line-height: 1.65; }
.b2b-review--text strong {
display: block;
margin-top: calc(20 * var(--u));
color: var(--red);
font-size: calc(14 * var(--u));
}
.b2b-review--managed-image { width: 100%; aspect-ratio: 4 / 3; }
.b2b-review--managed-image img {
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 1023px) {
.b2b-review--text { min-height: 200px; padding: 24px; }
.b2b-review--text p { font-size: 16px; }
.b2b-review--text strong { margin-top: 18px; font-size: 13px; }
}
.b2b-review--01 { width: calc(404 * var(--u)); height: calc(365 * var(--u)); }
.b2b-review--01 img { width: 392.81%; height: 100%; left: -269.83%; top: 0; }
.b2b-review--02 { width: calc(404 * var(--u)); height: calc(193 * var(--u)); }
.b2b-review--02 img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b2b-review--03 { width: calc(353 * var(--u)); height: calc(393 * var(--u)); }
.b2b-review--03 img { width: 235.88%; height: 113.49%; left: -135.95%; top: -13.49%; }
.b2b-review--05 { width: calc(357 * var(--u)); height: calc(203 * var(--u)); }
.b2b-review--05 img { width: 112.38%; height: 100%; left: -12.32%; top: 0; }
.b2b-review--04 { width: calc(353 * var(--u)); height: calc(214 * var(--u)); }
.b2b-review--04 img { width: 109.07%; height: 167.3%; left: -8.97%; top: 0; }
.b2b-review--07 { width: calc(360 * var(--u)); height: calc(282 * var(--u)); }
.b2b-review--07 img { width: 314.85%; height: 128.37%; left: -214.9%; top: -28.37%; }
.b2b-review--06 { width: calc(360 * var(--u)); height: calc(362 * var(--u)); }
.b2b-review--06 img { width: 190.15%; height: 100%; left: -83.37%; top: 0; }
.b2b-review--08 { width: calc(360 * var(--u)); height: calc(149 * var(--u)); }
.b2b-review--08 img { width: 149.97%; height: 204.03%; left: -50.02%; top: 0; }
@keyframes b2b-reviews-up {
to { transform: translateY(calc(-1 * var(--review-shift) * var(--u))); }
}
.b2b-reviews__masonry:hover .b2b-reviews__col,
.b2b-reviews__masonry:focus-within .b2b-reviews__col { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.b2b-reviews__col { animation: none; }
}
/* ==========================================================================
10 — צור קשר (9442 → 10049)
========================================================================== */
/* הפאנל הצהוב מתחיל 126 מעל תחילת הסקשן ועולה על הרצועה הכהה של ההמלצות.
הסלקטור חייב שתי מחלקות: `.b2b main > section` (0,1,2) מנצח את `.b2b-contact`
(0,1,0) בספציפיות, וה-overflow:hidden שלו חתך את ראש הפאנל ואת ראש
הכרטיס הלבן שבתוכו. */
.b2b .b2b-contact { height: calc(607 * var(--u)); overflow: visible; }
.b2b-contact__panel {
position: absolute; right: calc(99 * var(--u)); top: calc(-126 * var(--u));
width: calc(1720 * var(--u)); height: calc(702 * var(--u));
background: var(--yellow);
border-radius: calc(30 * var(--u));
}
.b2b-contact__head { position: absolute; right: calc(85 * var(--u)); top: calc(50 * var(--u)); width: calc(762 * var(--u)); }
.b2b-contact__watermark {
position: static; display: block;
font-size: calc(96 * var(--u)); text-align: right; opacity: .12;
margin-bottom: calc(30 * var(--u));
}
.b2b-contact__title {
font-family: 'TelAviv Brutalist', 'Discovery FS', sans-serif;
font-size: calc(64 * var(--u)); text-align: right;
}
.b2b-contact__note { margin-top: calc(30 * var(--u)); font-size: calc(20 * var(--u)); text-align: right; }
.b2b-contact__card {
position: absolute; right: calc(976 * var(--u)); top: calc(50 * var(--u));
width: calc(697 * var(--u)); height: calc(536 * var(--u));
background: var(--white);
border-radius: calc(30 * var(--u));
padding: calc(37 * var(--u)) calc(42 * var(--u));
}
.b2b-contact__row { display: flex; gap: calc(25 * var(--u)); }
.b2b-contact__row .form-group { flex: 1; }
/* Group 48.svg: השדות ב-y 118 / 219 / 320 / והכפתור ב-488 (יחסית לפאנל).
התווית היא 17 בדיוק (line-height:1) עם 14 מתחתיה, ו-25 בין קבוצה לקבוצה —
בלי line-height:1 התיבה יוצאת 27 והשדות נסחפים 8px מצטברים כל אחד. */
.b2b-contact__card .form-group { margin-bottom: calc(25 * var(--u)); }
.b2b-contact__card .form-group > label {
font-size: calc(17 * var(--u)); line-height: 1;
margin-bottom: calc(14 * var(--u));
}
/* Group 48.svg: השדות הם מלבן מעוגל (רדיוס 14.5), לא גלולה מלאה כמו שדות אחרים בדף,
עם מילוי surface ומסגרת אפורה דקה */
.b2b-contact__card .field { height: calc(45 * var(--u)); background: var(--surface); border: 1px solid var(--grey); border-radius: calc(14.5 * var(--u)); font-size: calc(15 * var(--u)); }
/* display:block הכרחי — textarea הוא inline-block כברירת מחדל, והרווח
ה-baseline שמתחתיו דחף את הכפתור 10px מתחת למיקום שבפיגמה (488). */
.b2b-contact__card textarea.field { display: block; height: calc(143 * var(--u)); padding-block: calc(14 * var(--u)); border-radius: calc(14.5 * var(--u)); resize: none; }
/* מסגרת צהובה דקה מסביב לכפתור השליחה, כמו במקור */
/* בפיגמה קבוצת הכפתור נעוצה לקצה השמאלי של הקלף (x 89..388), כלומר
flex-end ב-RTL. בלי זה היא נצמדת לימין כברירת מחדל. */
.b2b-contact__submit { display: flex; justify-content: flex-end; }
.b2b-contact__submit .btn { --bw: 237; --bc: 61; --bh: 61; --bo: 0; }
.b2b-contact__submit .btn__label, .b2b-contact__submit .btn__arrow { border: 1px solid var(--yellow); box-sizing: border-box; }
.b2b-contact__disclaimer {
/* מתחת לכרטיס הטופס ובאותו רוחב, במקום בצד הימני של הפאנל. */
position: absolute; right: calc(976 * var(--u)); top: calc(610 * var(--u));
width: calc(697 * var(--u));
display: flex; align-items: center; gap: calc(13 * var(--u));
justify-content: flex-start;
font-size: calc(15 * var(--u));
}
.b2b-contact__disclaimer .consent__box { accent-color: var(--ink); }
.b2b-contact__disclaimer .consent__box,
.b2b-contact__disclaimer .consent__box:checked {
background: var(--white);
border-color: var(--white);
}
/* border-inline-start מתהפך ב-RTL ולכן הווי הבסיסי נראה שוכב לצד.
כאן משתמשים בצלעות פיזיות כדי לשמור על וי זקוף וממורכז. */
.b2b-contact__disclaimer .consent__box::after {
width: calc(5 * var(--u));
height: calc(9 * var(--u));
border-inline-start: 0;
border-right: calc(2 * var(--u)) solid var(--ink);
border-bottom: calc(2 * var(--u)) solid var(--ink);
transform: rotate(45deg) translate(calc(-1 * var(--u)), calc(-1 * var(--u)));
}
/* אינטראקציות עכבר עדינות בלבד — התנועה הראשית נשארת ב-GSAP. */
@media (hover: hover) and (pointer: fine) {
.b2b-case,
.b2b-review,
.b2b .faq__item {
transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
}
.b2b-talk__card,
.b2b-contact__card {
transition: box-shadow .35s var(--ease), filter .35s var(--ease);
}
.b2b-card {
translate: 0 0;
transition: translate .35s var(--ease);
}
.b2b-case:hover {
transform: translateY(calc(-6 * var(--u)));
box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(30, 39, 46, .13);
}
.b2b-talk__card:hover,
.b2b-contact__card:hover {
filter: brightness(1.025);
box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(30, 39, 46, .13);
}
.b2b-card:hover { translate: 0 calc(-7 * var(--u)); }
.b2b-review:hover { transform: translateY(calc(-4 * var(--u))) scale(1.01); filter: contrast(1.03); }
.b2b .faq__item:hover { transform: translateX(calc(-4 * var(--u))); }
.b2b .btn:hover .btn__arrow { transform: translateX(calc(-3 * var(--u))); }
}
/* ==========================================================================
11 — פוטר (10049 → 10413)
========================================================================== */
/* הפוטר זהה לעמוד הבית — כל העיצוב מגיע מ-.site-footer ב-style.css
ואין כאן אף דריסה של מידות. היוצא מן הכלל היחיד: מערכת הרוחב
הקבוע של כפתורי העמוד (--bw/--bc בסעיף 0.2) תופסת גם את כפתור ה-CTA
שבפוטר, ובלי --bw מוגדר הגלולה קורסת. מחזירים לו את מידות הבסיס,
בדיוק כמו שעושים לכפתור שבכותרת. */
.b2b .site-footer .btn__label {
width: auto;
padding-inline: calc(34 * var(--u));
height: calc(76 * var(--u));
}
.b2b .site-footer .btn__arrow {
width: calc(76 * var(--u));
height: calc(76 * var(--u));
margin-inline-start: calc(-6 * var(--u));
}
/* ==========================================================================
90 — רספונסיביות
מתחת ל-1023 הכל עובר לזרימה רגילה: הסקשנים מאבדים גובה קבוע
והילדים מפסיקים להיות absolute.
נקודת השבירה מיושרת ל-1023 של style.css (ולא 1024), כי ה-FAQ וטופס
ההרשמה בעמוד הזה הם קומפוננטות של עמוד הבית ומגיבות בנקודה הזו.
--u לא נדרס כאן: מעל 768 הוא ה-cqw שלנו, ומתחת ל-768 style.css כבר
מעביר אותו ל-1px — בדיוק כמו בעמוד הבית.
========================================================================== */
@media (max-width: 1023px) {
.b2b { --b2b-container: 100%; }
.b2b-wrap { width: min(100% - 32px, 720px); }
.b2b main > section { height: auto; padding-block: 64px; }
.b2b main > section > *,
.b2b-hero__title, .b2b-hero__lead, .b2b-hero__actions, .b2b-hero__badge,
.b2b-signup-wrap, .b2b-stats, .b2b-card, .b2b-cases__viewport, .b2b-clients__grid,
.b2b-talk__head, .b2b-talk__card,
.b2b-reviews__head, .b2b-reviews__masonry, .b2b-contact__panel,
.b2b-contact__head, .b2b-contact__card, .b2b-contact__disclaimer {
position: static;
width: min(100% - 32px, 720px);
margin-inline: auto;
height: auto;
inset: auto;
}
.b2b-hero__laptop, .b2b-hero__wave, .b2b-numbers__mic,
.b2b-talk__wave, .b2b-blob { display: none; }
/* .faq עצמו לא ברשימות למעלה — הוא מחלקות עמוד הבית (.faq/.faq__grid וכו')
ומגיב למובייל כבר דרך הכללים הקיימים ב-style.css, ללא צורך בדריסה כאן */
.b2b-hero__title { font-size: clamp(34px, 8vw, 56px); margin-bottom: 24px; }
/* השורות של הפיגמה נשברות באופן טבעי ברוחב המסך; רק "ישר למייל"
נשאר צירוף אחד כדי שהקו הצהוב לא ייחתך באמצע. */
.b2b-hero__title .line { white-space: normal; }
.b2b-hero__lead, .b2b-hero__badge { margin-bottom: 24px; }
.b2b-hero__actions { flex-wrap: wrap; gap: 16px; margin-bottom: 48px; }
.b2b-stats { flex-wrap: wrap; justify-content: center; gap: 24px; }
.b2b-card { margin-bottom: 24px; }
.b2b-card__title { font-size: clamp(28px, 6vw, 48px); }
.b2b-card__text { font-size: 16px; }
.b2b-card--red .b2b-card__title, .b2b-card--red .b2b-card__text,
.b2b-card--green .b2b-card__title, .b2b-card--green .b2b-card__text,
.b2b-card--yellow .b2b-card__title, .b2b-card--yellow .b2b-card__text {
position: static; width: auto; padding: 0 24px;
}
/* הכותרת והפסקה כבר זורמות כאן, אבל האייקון נשאר absolute בקואורדינטות
של הפיגמה — ולכן הוא מצויר ממש מעל הכותרת (חפיפה מלאה של 45–59px).
מתחת ל-768 זה כבר מטופל; הטווח 768–1023 היה היחיד שנשאר. */
.b2b-card--red .b2b-card__icon,
.b2b-card--green .b2b-card__icon,
.b2b-card--yellow .b2b-card__icon {
position: static;
inset: auto;
width: 48px;
height: 48px;
margin: 0 24px 12px;
}
.b2b-card { padding-block: 32px; }
.b2b-why__figure { font-size: clamp(96px, 26vw, 180px); }
.b2b-cases__viewport { overflow: visible; }
.b2b-cases__track { display: block; animation: none; }
.b2b-cases__sequence { flex-direction: column; gap: 24px; }
.b2b-cases__sequence[aria-hidden="true"] { display: none; }
.b2b-case { width: 100%; height: auto; }
.b2b-case__media { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 613 / 209; }
.b2b-case__badge { width: 24%; height: auto; aspect-ratio: 1; top: 10%; }
.b2b-case__body { position: static; height: auto; padding: 24px; }
.b2b-case__meta { margin-top: 0; }
.b2b-case__stats { position: static; height: auto; min-height: 150px; padding: 40px 20px; border-radius: 0 0 25px 25px; }
.b2b-case__statValue { font-size: clamp(32px, 7vw, 48px); }
.b2b-clients__grid { display: flex; flex-direction: column; gap: 12px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.b2b-clients__row { position: static; width: 100%; height: auto; }
.b2b-clients__track { display: block; animation: none; }
.b2b-clients__group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.b2b-clients__group[aria-hidden="true"] { display: none; }
.b2b-client--loop-copy { display: none; }
.b2b-client { width: 100%; height: auto; aspect-ratio: 1; }
.b2b-talk__band, .b2b-reviews__band { display: none; }
.b2b-talk { background: var(--ink); }
.b2b-reviews { background: var(--ink); }
.b2b-reviews__masonry { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.b2b-reviews__col { margin-top: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
.b2b-cases__track { animation: none; }
.b2b-signup-wrap .scroll-cue svg path { animation: none; stroke-dashoffset: 0; opacity: 1; }
.b2b-card,
.b2b-case,
.b2b-client,
.b2b-review,
.b2b-talk__card,
.b2b-contact__card,
.b2b .faq__item { transition: none; }
}
@media (max-width: 767px) {
.b2b-reviews__masonry { flex-direction: column; }
.b2b-reviews__col { width: 100%; flex-basis: auto !important; }
.b2b-reviews__col { animation: none; }
.b2b-reviews__set { width: 100%; }
.b2b-reviews__set[aria-hidden="true"] { display: none; }
.b2b-review { width: 100%; height: auto; }
.b2b-review--01 { aspect-ratio: 404 / 365; }
.b2b-review--02 { aspect-ratio: 404 / 193; }
.b2b-review--03 { aspect-ratio: 353 / 393; }
.b2b-review--05 { aspect-ratio: 357 / 203; }
.b2b-review--04 { aspect-ratio: 353 / 214; }
.b2b-review--07 { aspect-ratio: 360 / 282; }
.b2b-review--06 { aspect-ratio: 360 / 362; }
.b2b-review--08 { aspect-ratio: 360 / 149; }
/* מ-767 ומטה --u=1px, ולכן רוחב קבוע שנלקח מהפיגמה (473 ל-lead)
גדול מהמסך עצמו ונחתך. משחררים אותו לרוחב טבעי. */
.b2b-talk__lead { width: auto; }
/* פס ההרשמה: המידות המדויקות מהפיגמה תקפות רק לדסקטופ. במובייל
הטופס נערם לעמודה, ולכן גובה קבוע 307 ורוחבי שדה 254/268 גרמו
לתוכן לגלוש 205px אל מחוץ למלבן הכהה. */
.b2b-signup-wrap .signup--dark {
height: auto;
padding: 32px 20px;
}
.b2b-signup-wrap .signup__form .field,
.b2b-signup-wrap .signup__form .field:nth-of-type(1),
.b2b-signup-wrap .signup__form .field:nth-of-type(2) { width: 100%; height: 52px; }
.b2b-signup-wrap .signup__form { margin-top: 24px; }
.b2b-signup-wrap .signup__terms { margin-top: 20px; }
.b2b-signup-wrap .signup__title { font-size: 30px; text-box: normal; }
.b2b-signup-wrap .btn { --bw: auto; --bc: 52; --bh: 52; }
.b2b-signup-wrap .btn__label { width: auto; padding-inline: 24px; }
/* style.css מקטין כאן את פדינג הגלולה ל-24px (שורה 1460), והדריסה
שלנו לפוטר מחזירה 34. מיישרים בחזרה כדי שהכפתור יצא זהה
לעמוד הבית גם במובייל. */
.b2b .site-footer .btn__label { padding-inline: 24px; }
/* העיגול חוזר לזרימה רגילה מתחת לפס במקום מיקום absolute לפי הפיגמה */
.b2b-signup-wrap .scroll-cue {
position: static;
transform: none;
width: 96px; height: 96px;
margin: -19px auto 0;
}
.b2b-signup-wrap .scroll-cue::before { width: 78px; height: 78px; border-width: 3px; }
.b2b-signup-wrap .scroll-cue:hover { transform: translateY(4px); }
/* אותה מדיניות כמו בעמוד הבית: הווטרמארקים הלטיניים הגדולים מוסתרים
במובייל (style.css מסתיר את שלו באותה נקודה) */
.b2b .watermark { display: none; }
}
@media (max-width: 430px) {
.b2b-clients__group { grid-template-columns: repeat(2, 1fr); }
.b2b-hero__actions .btn, .b2b-cases__cta { width: 100%; }
.b2b-hero__actions .btn__label { flex: 1; }
}
/* ==========================================================================
Responsive corrections
The business page is a static entry point with its own stylesheet, so it
repeats the shared readable-control minimums here. Desktop art direction is
untouched at 1440px and above.
========================================================================== */
@media (max-width: 1439px) {
.b2b main,
.b2b main > *,
.b2b main > section > *,
.b2b-wrap,
.b2b-signup-wrap,
.b2b-talk__card,
.b2b-contact__panel,
.b2b-contact__card {
min-width: 0;
max-width: 100%;
}
.b2b .site-header__bar { height: 72px; }
.b2b .brand img { height: 38px; }
.b2b .nav__link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-bottom: 4px;
font-size: 15px;
}
.b2b .btn__label,
.b2b .b2b-header__cta .btn__label {
width: auto;
min-height: 48px;
height: 48px;
padding-inline: 24px;
border-radius: var(--radius-pill);
font-size: 15px;
}
.b2b .btn__arrow,
.b2b .b2b-header__cta .btn__arrow {
width: 48px;
height: 48px;
margin-inline-start: -6px;
}
.b2b .btn__arrow svg { width: 14px; }
.b2b .field,
.b2b-contact__card .field,
.b2b-talk__card .field {
min-height: 48px;
height: 48px;
padding-inline: 18px;
border-radius: 12px;
font-size: 16px;
}
.b2b-contact__card textarea.field,
.b2b-talk__card textarea.field { min-height: 120px; height: 120px; }
.b2b .form-group > label,
.b2b .signup__terms,
.b2b-contact__disclaimer,
.b2b .form-status { font-size: 13px; }
.b2b .consent__box { width: 20px; height: 20px; border-width: 1.5px; }
.b2b .site-footer { padding-block: 24px; }
.b2b .site-footer .footer-card {
grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.1fr) minmax(200px, 1fr);
gap: clamp(24px, 3.4vw, 52px);
/* מרכוז אנכי אכן נתן לכל עמודה שוליים שווים מעל ומתחת — אבל בגלל
שהן בגבהים שונים, שלוש השורות הראשונות נחתו בשלושה גבהים שונים
(32 / 47 / 64 מראש הכרטיס) והפוטר נראה לא מיושר. start מתחיל את
שלושתן על אותו קו, כלומר על ריפוד ה-32 של הכרטיס. */
align-items: start;
min-height: 0;
padding: 32px;
border-radius: 26px;
}
.b2b .site-footer .footer-card__logo,
.b2b .site-footer .footer-card__tagline { width: min(100%, 236px); }
.b2b .site-footer .footer-card__tagline,
.b2b .site-footer .footer-nav__title,
.b2b .site-footer .footer-nav a,
.b2b .site-footer .footer-cta p { font-size: 15px; }
.b2b .site-footer .footer-card__tagline { margin-top: 14px; line-height: 1.45; }
.b2b .site-footer .footer-nav {
grid-template-columns: minmax(78px, max-content) minmax(148px, max-content);
gap: clamp(24px, 3.4vw, 44px);
}
.b2b .site-footer .footer-nav__title { margin-bottom: 10px; line-height: 1.3; }
.b2b .site-footer .footer-nav li + li { margin-top: 2px; }
.b2b .site-footer .footer-nav a {
display: inline-flex;
align-items: center;
min-height: 30px;
line-height: 1.35;
}
.b2b .site-footer .footer-cta__title { font-size: clamp(22px, 2vw, 27px); line-height: 1.15; }
.b2b .site-footer .footer-cta p { margin-top: 10px; line-height: 1.45; }
.b2b .site-footer .footer-cta .btn,
.b2b .site-footer .footer-cta__actions { margin-top: 16px; }
.b2b .site-footer .footer-cta__actions { gap: 10px; }
.b2b .site-footer .footer-cta .btn__label { height: 44px; font-size: 14px; padding-inline: 20px; }
.b2b .site-footer .footer-cta .btn__arrow { width: 44px; height: 44px; }
}
@media (max-width: 1023px) {
.b2b main > section {
height: auto;
min-height: 0;
padding-block: 64px;
}
.b2b main > section > *,
.b2b-hero__title,
.b2b-hero__lead,
.b2b-hero__actions,
.b2b-hero__badge,
.b2b-signup-wrap,
.b2b-stats,
.b2b-card,
.b2b-cases__viewport,
.b2b-clients__grid,
.b2b-talk__head,
.b2b-talk__card,
.b2b-reviews__head,
.b2b-reviews__masonry,
.b2b-contact__panel,
.b2b-contact__head,
.b2b-contact__card,
.b2b-contact__disclaimer {
width: min(calc(100% - 32px), 720px);
min-width: 0;
max-width: 100%;
margin-inline: auto;
}
.b2b-hero__title,
.b2b-hero__lead,
.b2b-hero__actions,
.b2b-hero__badge,
.b2b-signup-wrap { position: static; inset: auto; height: auto; }
.b2b-hero__title { font-size: clamp(42px, 7vw, 60px); }
.b2b-hero__lead { width: min(calc(100% - 32px), 720px); font-size: 17px; line-height: 1.65; }
.b2b-hero__badge { font-size: 15px; }
.b2b-hero__actions .btn__label { width: auto; }
.b2b-numbers__title,
.b2b-channel__title,
.b2b-why__title,
.b2b-clients__title,
.b2b-talk__title,
.b2b-contact__title { font-size: clamp(36px, 6vw, 54px); line-height: 1.08; }
.b2b-numbers__lead,
.b2b-channel__lead,
.b2b-why__text,
.b2b-clients__lead,
.b2b-talk__lead {
width: min(calc(100% - 32px), 720px);
min-width: 0;
max-width: 100%;
font-size: 16px;
line-height: 1.65;
}
.b2b-signup-wrap .signup--dark {
width: 100%;
height: auto;
padding: 34px 28px 72px;
border-radius: 28px;
}
.b2b-signup-wrap .signup__title { font-size: clamp(30px, 5vw, 40px); text-box: normal; }
.b2b-signup-wrap .signup__form {
flex-direction: column;
align-items: stretch;
width: min(100%, 560px);
margin: 26px auto 0;
gap: 14px;
}
.b2b-signup-wrap .signup__form .field,
.b2b-signup-wrap .signup__form .field:nth-of-type(1),
.b2b-signup-wrap .signup__form .field:nth-of-type(2) { width: 100%; height: 52px; }
.b2b-signup-wrap .signup__form .btn { width: 100%; justify-content: center; }
.b2b-signup-wrap .signup__form .btn__label { flex: 1; width: auto; }
.b2b-signup-wrap .signup__terms {
width: min(100%, 560px);
margin: 20px auto 0;
text-align: right;
}
.b2b-cases__title,
.b2b-cases__lead,
.b2b-cases__viewport,
.b2b-cases__cta { position: static; inset: auto; height: auto; }
.b2b-cases__title { font-size: clamp(36px, 6vw, 54px); }
.b2b-cases__lead { margin-top: 20px; font-size: 16px; }
.b2b-cases__viewport { margin-top: 38px; overflow: visible; }
.b2b-cases__track { display: block; width: 100%; transform: none !important; animation: none; }
.b2b-cases__sequence { width: 100%; flex-direction: column; gap: 24px; }
.b2b-cases__sequence[aria-hidden='true'] { display: none; }
.b2b-case {
width: 100%;
height: auto;
min-width: 0;
border-radius: 24px;
}
.b2b-case__media {
position: relative;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: 613 / 209;
}
.b2b-case__body {
position: static;
height: auto;
min-height: 136px;
padding: 24px;
}
.b2b-case__meta { margin-top: 0; font-size: 16px; }
.b2b-case__title { margin-top: 20px; font-size: 22px; }
.b2b-case__stats {
position: static;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
height: auto;
min-height: 150px;
padding: 34px 16px;
gap: 10px;
border-radius: 0 0 24px 24px;
}
.b2b-case__stat { width: auto; min-width: 0; }
.b2b-case__statValue { font-size: clamp(30px, 6vw, 46px); }
.b2b-case__statLabel { margin-top: 14px; font-size: 16px; }
.b2b-cases__cta { display: flex; width: max-content; margin: 32px auto 0; }
.b2b main > section.b2b-clients { height: auto; overflow: hidden; }
.b2b-clients__grid {
position: static;
display: flex;
flex-direction: column;
width: min(calc(100% - 32px), 720px);
height: auto;
gap: 12px;
margin: 38px auto 0;
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
.b2b-clients__row,
.b2b-clients__track,
.b2b-clients__group { width: 100%; min-width: 0; max-width: 100%; }
.b2b-clients__row { position: static; height: auto; }
.b2b-clients__track { display: block; animation: none; }
.b2b-clients__group {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.b2b-clients__group[aria-hidden='true'],
.b2b-client--loop-copy { display: none; }
.b2b-client {
width: 100%;
max-width: 100%;
height: auto;
min-width: 0;
aspect-ratio: 1;
}
.b2b-client img { width: 100%; max-width: 100%; height: 100%; }
.b2b-talk__head { margin-bottom: 32px; }
.b2b-talk__card { padding: 30px 28px; }
.b2b-talk__row,
.b2b-contact__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.b2b .faq {
height: auto;
padding: 54px 0 80px;
overflow: visible;
}
.b2b .faq__grid {
display: grid;
width: min(calc(100% - 32px), 720px);
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.b2b .faq__head,
.b2b .faq__list {
grid-column: 1;
grid-row: auto;
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 0;
}
.b2b .faq__head { margin-bottom: 34px; }
.b2b .faq__title { font-size: clamp(36px, 6vw, 54px); line-height: 1.08; }
.b2b .faq__note { margin-top: 20px; font-size: 15px; }
.b2b .faq__list { gap: 18px; }
.b2b .faq__item,
.b2b .faq__row,
.b2b .faq__q,
.b2b .faq__a,
.b2b .faq__a-inner,
.b2b .faq__a-text { min-width: 0; max-width: 100%; }
.b2b .faq__row { width: 100%; }
.b2b .faq__q {
flex: 1;
width: auto;
min-height: 56px;
padding: 12px 18px;
font-size: 17px;
}
.b2b .faq__item.is-open .faq__q { min-width: 0; }
.b2b .faq__toggle { width: 52px; height: 52px; }
.b2b .faq__toggle svg { width: 24px; }
.b2b .faq__a-inner { width: 100%; margin-top: 14px; padding: 0; }
.b2b .faq__a-avatar { width: 52px; height: 52px; }
.b2b .faq__a-avatar img { width: 30px; }
.b2b .faq__a-text {
flex: 1;
width: auto;
height: auto;
min-height: 56px;
padding: 12px 18px;
border-radius: 22px;
font-size: 16px;
}
.b2b .faq__mic,
.b2b .faq__blob { display: none; }
.b2b-reviews {
background: var(--ink);
overflow: hidden;
}
.b2b-reviews__head { margin-bottom: 36px; }
.b2b .b2b-reviews__title { width: 100%; font-size: clamp(36px, 6vw, 54px); }
.b2b-reviews__lead { width: 100%; margin-top: 20px; font-size: 17px; }
.b2b-reviews__masonry {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: min(calc(100% - 32px), 720px);
height: auto;
gap: 18px;
overflow: visible;
direction: rtl;
-webkit-mask-image: none;
mask-image: none;
}
.b2b-reviews__col {
display: flex;
flex-direction: column;
width: 100%;
flex-basis: auto !important;
gap: 18px;
margin: 0 !important;
animation: none;
transform: none !important;
}
.b2b-reviews__set {
display: flex;
flex-direction: column;
width: 100%;
gap: 18px;
padding: 0;
}
.b2b-reviews__set[aria-hidden='true'] { display: none; }
.b2b-review {
width: 100%;
height: auto;
min-width: 0;
}
.b2b-review--01 { aspect-ratio: 404 / 365; }
.b2b-review--02 { aspect-ratio: 404 / 193; }
.b2b-review--03 { aspect-ratio: 353 / 393; }
.b2b-review--05 { aspect-ratio: 357 / 203; }
.b2b-review--04 { aspect-ratio: 353 / 214; }
.b2b-review--07 { aspect-ratio: 360 / 282; }
.b2b-review--06 { aspect-ratio: 360 / 362; }
.b2b-review--08 { aspect-ratio: 360 / 149; }
.b2b .b2b-contact { height: auto; padding-block: 64px; overflow: hidden; }
.b2b-contact__panel {
position: static;
display: flex;
flex-direction: column;
height: auto;
padding: 36px 30px;
gap: 30px;
border-radius: 28px;
}
.b2b-contact__head,
.b2b-contact__card,
.b2b-contact__disclaimer {
position: static;
width: 100%;
height: auto;
margin: 0;
}
.b2b-contact__title { font-size: clamp(36px, 6vw, 54px); }
.b2b-contact__note { margin-top: 18px; font-size: 17px; }
.b2b-contact__card { padding: 28px; border-radius: 22px; }
.b2b-contact__disclaimer { align-items: flex-start; }
.b2b .site-footer .footer-card {
grid-template-columns: minmax(0, 1fr);
gap: 34px;
/* ריפוד אחד לארבעת הצדדים */
padding: 36px;
}
.b2b .site-footer .footer-card__brand,
.b2b .site-footer .footer-nav,
.b2b .site-footer .footer-cta { width: 100%; min-width: 0; }
.b2b .site-footer .footer-card__logo,
.b2b .site-footer .footer-card__tagline { width: min(100%, 320px); }
.b2b .site-footer .footer-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: stretch;
gap: 32px;
}
}
@media (max-width: 767px) {
.b2b main > section { padding-block: 54px; }
.b2b-hero__actions { align-items: stretch; }
.b2b-hero__actions .btn__label { width: auto; }
.b2b-signup-wrap .signup--dark { padding: 30px 20px 64px; }
.b2b-case__body { min-height: 0; }
.b2b-case__stats { min-height: 132px; padding: 28px 10px; }
.b2b-case__statValue { font-size: clamp(27px, 9vw, 40px); }
.b2b-case__statLabel { font-size: 14px; overflow-wrap: break-word; }
.b2b-reviews {
max-height: 1200px;
padding-block: 64px;
}
.b2b-reviews__head { margin-bottom: 28px; }
.b2b-reviews__masonry {
display: flex;
flex-direction: row;
width: calc(100% - 32px);
max-width: 100%;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
scroll-snap-type: x mandatory;
scroll-padding-inline: 1px;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.b2b-reviews__col,
.b2b-reviews__set { display: contents; }
.b2b-reviews__set[aria-hidden='true'] { display: none; }
.b2b-review {
flex: 0 0 min(86vw, 360px);
width: min(86vw, 360px);
max-width: 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.b2b-talk__card,
.b2b-contact__panel { padding: 28px 20px; }
.b2b-contact__card { padding: 24px 20px; }
.b2b .faq { padding-top: 48px; }
.b2b .faq__row { align-items: flex-start; }
.b2b .faq__toggle { width: 48px; height: 48px; }
.b2b .faq__q { min-height: 48px; font-size: 16px; }
.b2b .faq__a-inner { align-items: flex-start; }
.b2b .faq__a-avatar { width: 48px; height: 48px; }
.b2b .faq__a-text { min-height: 48px; font-size: 15px; }
.b2b .site-footer .footer-card { padding: 32px 22px; }
.b2b .site-footer .footer-card__tagline,
.b2b .site-footer .footer-nav__title,
.b2b .site-footer .footer-nav a,
.b2b .site-footer .footer-cta__title,
.b2b .site-footer .footer-cta p { white-space: normal; }
.b2b .site-footer .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 430px) {
.b2b-clients__group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b2b-hero__actions .btn,
.b2b-hero__actions .btn__label,
.b2b-cases__cta,
.b2b-cases__cta .btn__label,
.b2b-talk__submit .btn,
.b2b-talk__submit .btn__label,
.b2b-contact__submit .btn,
.b2b-contact__submit .btn__label {
width: 100%;
}
.b2b-hero__actions .btn__label,
.b2b-cases__cta .btn__label,
.b2b-talk__submit .btn__label,
.b2b-contact__submit .btn__label { flex: 1; }
.b2b-cases__cta { max-width: 100%; }
.b2b-cases__cta .btn__label { min-width: 0; white-space: normal; text-align: center; }
}
@media (max-width: 360px) {
.b2b-wrap,
.b2b main > section > *,
.b2b-hero__title,
.b2b-hero__lead,
.b2b-hero__actions,
.b2b-hero__badge,
.b2b-signup-wrap,
.b2b-cases__viewport,
.b2b-reviews__head,
.b2b-reviews__masonry,
.b2b-contact__panel { width: calc(100% - 30px); }
.b2b .site-footer .footer-card { padding: 28px 18px; }
.b2b .site-footer .footer-card__brand,
.b2b .site-footer .footer-nav,
.b2b .site-footer .footer-cta { margin: 0; text-align: right; }
.b2b .site-footer .footer-card__logo,
.b2b .site-footer .footer-card__tagline { width: 100%; max-width: 100%; }
.b2b .site-footer .footer-nav { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.b2b .site-footer .footer-cta .btn,
.b2b .site-footer .footer-cta .btn__label { width: 100%; }
.b2b .site-footer .footer-cta .btn__label { flex: 1; }
}
/* עטיפת קרוסלת ההמלצות — שקופה לפריסה בדסקטופ, כך שהמייסונרי נשאר
ילד ישיר של .b2b-reviews בדיוק כמו קודם. */
.b2b-reviews__carousel { display: contents; }
.b2b-reviews__nav { display: none; }
/* ==========================================================================
Business — Mobile refinements, סבב 2 (מעבר איזור-איזור)
הבלוק אחרון בקובץ ולכן גובר על תיקוני הרספונסיביות שמעליו.
מעל 1024px שום כלל כאן לא חל — פריים הדסקטופ נשאר כפי שהוא.
========================================================================== */
@media (max-width: 1023px) {
/* ---------- כותרת עליונה: המבורגר מימין, לוגו משמאל ----------
זהה לעמוד הראשי. style.css כאן הוא עותק ישן ולכן החוק חוזר גם פה. */
.b2b .site-header__bar { flex-direction: row-reverse; }
/* ---------- התפריט הנפתח: פריטים בצד ימין ----------
ב-RTL הציר המשני הפוך, ולכן align-items: flex-end דחף את הפריטים
שמאלה. flex-start הוא הצד הימני. */
.nav__list { align-items: flex-start; }
.nav__link { text-align: right; }
.nav { padding-inline: 20px; }
/* ---------- 6. קייס-סטדי: המדדים ה"מתחרבשים" ----------
.b2b-card--type-2 מקבל padding-inline של 80 יחידות עיצוב. במובייל
היחידה היא 1px, כך שהריפוד בלע 160px מתוך 335 — שלוש העמודות נדחסו
ל-54px כל אחת והמספרים גלשו זה על זה. */
.b2b-case--type-2 .b2b-case__stats { padding-inline: 10px; }
/* ---------- 8+9. הרקע המעוגל של הרצועות הכהות ----------
בדסקטופ הקימור מגיע מקובצי ה-SVG (curve-dark-talk / curve-dark-reviews),
שמוסתרים במובייל. הרקע הכהה נשאר אבל בלי הפינות — מחזירים אותן ב-CSS. */
.b2b-talk,
.b2b-reviews {
background: var(--ink);
border-radius: 32px;
overflow: hidden;
}
/* ---------- 10. "מדיניות פרטיות" — קישור מודגש, כמו בעמוד הראשי ---------- */
.b2b .signup__terms a,
.b2b .b2b-contact__disclaimer a,
.b2b .b2b-signup__consent a {
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.b2b .signup--dark .signup__terms a,
.b2b .b2b-signup__consent a { color: var(--yellow); }
.b2b .b2b-contact__disclaimer a { color: var(--red); }
/* תיבות האישור מיושרות לשורה הראשונה */
.b2b .consent,
.b2b .b2b-contact__disclaimer { align-items: flex-start; }
.b2b .consent__box { margin-top: 2px; }
}
@media (max-width: 767px) {
/* ---------- 0. שוליים אחידים של 20px לאורך כל העמוד ----------
קודם היו 16px, בעוד העמוד הראשי עובד ב-20px. */
.b2b main > section > *,
.b2b-hero__title,
.b2b-hero__lead,
.b2b-hero__actions,
.b2b-hero__badge,
.b2b-signup-wrap,
.b2b-stats,
.b2b-card,
.b2b-cases__viewport,
.b2b-clients__grid,
.b2b-talk__head,
.b2b-talk__card,
.b2b-reviews__head,
.b2b-reviews__carousel,
.b2b-reviews__masonry,
.b2b-contact__panel,
.b2b-numbers__lead,
.b2b-channel__lead,
.b2b-why__text,
.b2b-clients__lead,
.b2b-talk__lead { width: calc(100% - 40px); }
/* ---------- 1. הכותרת מתחילה באותו גובה כמו בעמוד הראשי ---------- */
.b2b main > section.b2b-hero { padding-top: 106px; padding-bottom: 40px; }
/* ---------- 2. שורת נטפרי במרכז ---------- */
.b2b-hero__badge {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
/* הטקסט מוגדר flex:1 ולכן מתח את השורה לרוחב מלא והצמיד את הווי לקצה.
בלי הגדילה, האייקון והטקסט מתמרכזים יחד כזוג. */
.b2b-hero__badge span { flex: 0 1 auto; }
/* ==================================================================
3. "המספרים שמאחורי החשיפה"
הסקשן היה עדיין absolute ולכן טור הטבעות רכב על הפסקה. כאן הוא הופך
לעמודה זורמת עם מקצב אחיד של 10px, הטבעות יורדות לשתיים בשורה,
והמיקרופון של ה-Hero חוזר מתחתן.
================================================================== */
.b2b main > section.b2b-numbers { padding-block: 40px; }
.b2b-numbers {
display: flex;
flex-direction: column;
align-items: center;
padding-block: 40px;
}
.b2b-numbers__title,
.b2b-numbers__lead,
.b2b-stats,
.b2b-numbers__mic {
position: static;
inset: auto;
margin-inline: auto;
}
.b2b-numbers__title { order: 1; margin-bottom: 10px; font-size: clamp(30px, 8vw, 40px); }
.b2b-numbers__lead { order: 2; margin-bottom: 10px; }
.b2b-stats {
order: 3;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
height: auto;
direction: rtl;
justify-items: center;
}
.b2b-stat {
width: min(44vw, 150px);
height: min(44vw, 150px);
gap: 4px;
}
.b2b-stat__value { font-size: clamp(24px, 7vw, 32px); }
.b2b-stat__label { font-size: 13px; line-height: 1.25; }
/* המיקרופון חוזר — קטן, במרכז, מתחת לטבעות */
/* רשימת ה-20px למעלה תופסת גם את המיקרופון (.b2b main > section > *),
ולכן הרוחב שלו נקבע בסלקטור באותה רמת ספציפיות */
.b2b main > section > .b2b-numbers__mic {
display: block;
order: 4;
width: 120px;
height: auto;
margin-top: 10px;
}
/* ==================================================================
4. "לא רק רשימת תפוצה"
הכרטיסים היו absolute עם אייקון/כותרת/פסקה שכל אחד ממוקם בנפרד —
ולכן האייקון רכב על הטקסט. כאן הכל זורם: אייקון, כותרת, פסקה,
הכל מיושר לימין. עיגולי הרקע (::after) נשארים כמו בדסקטופ.
================================================================== */
.b2b main > section.b2b-channel { padding-block: 40px; }
.b2b-channel {
display: flex;
flex-direction: column;
padding-block: 40px;
}
.b2b-channel__title { margin-bottom: 10px; font-size: clamp(30px, 8vw, 40px); }
.b2b-channel__lead { margin-bottom: 10px; }
.b2b-card {
position: static;
width: calc(100% - 40px);
height: auto;
min-height: 0;
margin: 0 auto 10px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: right;
}
.b2b-card--red .b2b-card__icon,
.b2b-card--green .b2b-card__icon,
.b2b-card--yellow .b2b-card__icon,
.b2b-card--red .b2b-card__title,
.b2b-card--green .b2b-card__title,
.b2b-card--yellow .b2b-card__title,
.b2b-card--red .b2b-card__text,
.b2b-card--green .b2b-card__text,
.b2b-card--yellow .b2b-card__text {
position: static;
inset: auto;
width: auto;
max-width: 100%;
text-align: right;
}
/* הקבוצה למעלה מאפסת width ל-auto לכל השלושה; האייקון הוא ![]()
עם
טעינה עצלה, ולכן auto מתמוטט ל-0 עד שהקובץ מגיע. מחזירים לו רוחב
מפורש באותה רמת ספציפיות. */
.b2b-card--red .b2b-card__icon,
.b2b-card--green .b2b-card__icon,
.b2b-card--yellow .b2b-card__icon { width: 56px; height: auto; margin-bottom: 10px; }
.b2b-card--red .b2b-card__title,
.b2b-card--green .b2b-card__title,
.b2b-card--yellow .b2b-card__title { width: 100%; margin-bottom: 10px; font-size: 26px; line-height: 1.15; }
.b2b-card--red .b2b-card__text,
.b2b-card--green .b2b-card__text,
.b2b-card--yellow .b2b-card__text { width: 100%; font-size: 15px; line-height: 1.55; }
/* ==================================================================
5. "קהל פעיל. חשיפה מדויקת."
סדר מבוקש במובייל: הקווים הצבעוניים, ה-90%, הכותרת ואז הפסקה.
================================================================== */
.b2b main > section.b2b-why { padding-block: 40px; }
.b2b-why {
display: flex;
flex-direction: column;
align-items: stretch;
padding-block: 40px;
}
.b2b-why__dashes,
.b2b-why__figure,
.b2b-why__title,
.b2b-why__text {
position: static;
inset: auto;
width: calc(100% - 40px);
margin-inline: auto;
}
.b2b-why__dashes { order: 1; display: flex; margin-bottom: 10px; }
.b2b-why__dashes li { flex: 1; width: auto; height: 8px; }
.b2b-why__figure { order: 2; margin-bottom: 10px; font-size: clamp(64px, 22vw, 96px); text-align: right; }
.b2b-why__title { order: 3; margin-bottom: 10px; font-size: clamp(30px, 8vw, 40px); text-align: right; }
.b2b-why__text { order: 4; text-align: right; }
/* ==================================================================
7. "כבר פרסמו" — ארבע רצועות לוגו קטנות עם אותו לופ של הדסקטופ.
b2b.js מחלק במובייל ל-4 שורות של 3 לוגואים, וכל קבוצה מוכפלת
בתוך עצמה — ולכן מחזור שלם הוא 6 אריחים + 6 מרווחים.
================================================================== */
.b2b main > section.b2b-clients { padding-block: 40px; }
.b2b-clients__title { margin-bottom: 10px; font-size: clamp(30px, 8vw, 40px); }
.b2b-clients__lead { margin-bottom: 10px; }
.b2b-clients__grid {
--tile: 68px;
--lgap: 10px;
--cycle: calc((var(--tile) * 6) + (var(--lgap) * 6));
position: static;
display: flex;
flex-direction: column;
gap: var(--lgap);
height: auto;
margin-inline: auto;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.b2b-clients__row {
position: static;
width: 100%;
height: auto;
overflow: hidden;
}
.b2b-clients__track {
display: flex;
gap: var(--lgap);
width: max-content;
animation: b2b-logos-left-m 22s linear infinite;
}
.b2b-clients__row--2 .b2b-clients__track,
.b2b-clients__row--4 .b2b-clients__track {
animation-name: b2b-logos-right-m;
animation-duration: 26s;
}
.b2b-clients__row--3 .b2b-clients__track { animation-duration: 25s; }
/* עותק הלופ חייב לחזור — בלעדיו הרצועה נגמרת באוויר */
.b2b-clients__group {
display: flex;
gap: var(--lgap);
flex: none;
grid-template-columns: none;
}
.b2b-clients__group[aria-hidden='true'] { display: flex; }
.b2b-client--loop-copy { display: block; }
.b2b-client {
width: var(--tile);
height: var(--tile);
flex: none;
aspect-ratio: auto;
border-radius: 10px;
}
/* ==================================================================
8. "מה תרצו לפרסם?" — שדות אחידים ומקצב של 10px
================================================================== */
.b2b main > section.b2b-talk { padding-block: 40px; }
.b2b-talk__head { margin-bottom: 10px; }
.b2b-talk__title { margin-bottom: 10px; font-size: clamp(30px, 8vw, 40px); }
.b2b-talk__lead { width: 100%; margin: 0; }
.b2b-talk__card { padding: 20px; border-radius: 20px; }
.b2b-talk__row {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 10px;
}
.b2b-talk__card .form-group { margin-bottom: 10px; }
.b2b-talk__card .form-group > label { margin-bottom: 6px; }
/* כל השדות באותו רוחב, אותו גובה ואותן פינות */
.b2b-talk__card .field,
.b2b-talk__card .form-group .field,
.b2b-talk__card textarea.field,
.b2b-talk__card select.field {
width: 100%;
min-width: 0;
margin: 0;
height: 48px;
padding-inline: 16px;
border-radius: 12px;
font-size: 15px;
}
.b2b-talk__card textarea.field { min-height: 110px; height: 110px; padding-block: 12px; }
.b2b-talk__submit { margin-top: 10px; }
/* ==================================================================
9. המלצות — ביטול פס הגלילה והוספת חצים בשני הצדדים
================================================================== */
.b2b main > section.b2b-reviews { padding-block: 40px; }
.b2b-reviews__head { margin-bottom: 10px; }
.b2b-reviews__carousel { display: block; position: relative; margin-inline: auto; }
.b2b-reviews__masonry {
width: 100%;
padding-block: 4px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.b2b-reviews__masonry::-webkit-scrollbar { display: none; }
.b2b-reviews__nav {
position: absolute;
top: 50%;
z-index: 4;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--ink);
border-radius: 50%;
background: var(--yellow);
color: var(--ink);
cursor: pointer;
transform: translateY(-50%);
transition: background-color .2s, transform .2s;
}
.b2b-reviews__nav:active { transform: translateY(-50%) scale(.94); }
.b2b-reviews__nav svg { width: 16px; height: 16px; }
/* ב-RTL תחילת הרצועה מימין — ולכן "הקודם" מימין ו"הבא" משמאל */
.b2b-reviews__nav--prev { inset-inline-start: -6px; }
.b2b-reviews__nav--next { inset-inline-end: -6px; }
/* ==================================================================
10. הטופס הצהוב — מקצב אחיד של 10px
================================================================== */
.b2b main > section.b2b-contact { padding-block: 40px; }
.b2b-contact__panel { padding: 20px; border-radius: 24px; gap: 10px; }
.b2b-contact__head { width: 100%; margin: 0; }
.b2b-contact__title { margin: 0 0 10px; font-size: clamp(28px, 7.5vw, 38px); }
.b2b-contact__note { margin: 0 0 10px; }
.b2b-contact__card { width: 100%; margin: 0; padding: 16px; border-radius: 18px; }
.b2b-contact__row {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 10px;
}
.b2b-contact__card .form-group { margin-bottom: 10px; }
.b2b-contact__card .form-group > label { margin-bottom: 6px; }
.b2b-contact__card .field,
.b2b-contact__card .form-group .field,
.b2b-contact__card textarea.field,
.b2b-contact__card select.field {
width: 100%;
min-width: 0;
margin: 0;
height: 48px;
padding-inline: 16px;
border-radius: 12px;
font-size: 15px;
}
.b2b-contact__card textarea.field { min-height: 110px; height: 110px; padding-block: 12px; }
.b2b-contact__submit { margin-top: 10px; }
.b2b-contact__disclaimer { width: 100%; margin: 0; }
}
/* מחזור הלופ של רצועות המובייל — מרחק של קבוצה שלמה ועוד מרווח אחד,
כך שהעותק השני נוחת בדיוק במקום שהראשון עזב. */
@keyframes b2b-logos-left-m {
to { transform: translateX(calc(-1 * var(--cycle))); }
}
@keyframes b2b-logos-right-m {
from { transform: translateX(calc(-1 * var(--cycle))); }
to { transform: translateX(0); }
}
/* ==========================================================================
מובייל — בלוק המספרים לפי 'עיגולים מובייל.svg'
הבלוק אחרון בקובץ ולכן גובר על מעבר המובייל שמעליו. הקנבס במקור הוא
498x649, ומתוכו נגזרים כל היחסים כאן:
טבעת 226 מתוך 498 = 45.4% מרוחב הבלוק (עובי הקו 19/226 = 8.4%)
רווחים 46 אופקי (9.2%) ו-27 אנכי (5.4%)
מספר 48/226 בטבעות LIVE ו-100%, ו-64/226 ב-10 ו-45K
תווית 20/226
========================================================================== */
@media (max-width: 767px) {
.b2b-numbers {
--b2b-block: min(calc(100vw - 40px), 375px);
--b2b-ring: calc(var(--b2b-block) * .454);
}
/* ארבע הטבעות בגריד 2x2, כולן באותו קוטר בדיוק */
.b2b-stats {
width: 100%;
grid-template-columns: repeat(2, var(--b2b-ring));
justify-content: center;
column-gap: calc(var(--b2b-block) * .092);
row-gap: calc(var(--b2b-block) * .054);
}
.b2b-stat {
width: var(--b2b-ring);
height: var(--b2b-ring);
gap: calc(var(--b2b-ring) * .066);
}
/* גדלי הטקסט נגזרים מקוטר הטבעת באותם יחסים של הפיגמה.
הסלקטור הכפול הכרחי: .b2b-stat--c .b2b-stat__value של הדסקטופ הוא
בעל ספציפיות (0,2,0) וגבר על כלל המובייל בעל ספציפיות (0,1,0) —
ולכן 10 ו-45K נשארו 64px וחרגו מהטבעות שלהן בעוד LIVE ו-100%
הוקטנו ל-26px. משם ההרגשה ששתי הטבעות התחתונות גדולות מהעליונות. */
.b2b-stat .b2b-stat__value { font-size: calc(var(--b2b-ring) * .212); }
.b2b-stat--c .b2b-stat__value,
.b2b-stat--d .b2b-stat__value { font-size: calc(var(--b2b-ring) * .283); }
.b2b-stat .b2b-stat__label { font-size: calc(var(--b2b-ring) * .0885); line-height: 1.25; }
/* ---------- המיקרופון ----------
במקור הוא גדול וממורכז, ונכנס אל תוך המסדרון שבין שתי הטבעות
התחתונות: ראש המיקרופון מתחיל 195 יחידות מעל תחתית בלוק הטבעות
והרגל יורדת 150 יחידות מתחתיו.
הקובץ mic.png ריבועי (1100x1100) והמיקרופון עצמו תופס בתוכו
27.7%–78.2% לרוחב ו-9.5%–88.6% לגובה. מכאן:
תיבה = 87.5% מרוחב הבלוק (כדי שרוחב המיקרופון יצא 44.2%)
משיכה = 47.5% מרוחב הבלוק כלפי מעלה, כך שראש המיקרופון נוחת בדיוק
באותה נקודה שבמקור.
z-index נדרש כי במקור המיקרופון מצויר אחרי הטבעות. */
.b2b main > section > .b2b-numbers__mic {
position: relative;
z-index: 2;
width: calc(var(--b2b-block) * .875);
height: auto;
aspect-ratio: 1;
margin-top: calc(var(--b2b-block) * -.475);
pointer-events: none;
}
}
/* ==========================================================================
מסכי ביניים — 1024 עד 1439
---------------------------------------------------------------------------
הבלוק של max-width:1439 מקבע את הפקדים למינימום קריא (שדה וכפתור 48,
textarea 120, טקסט 15–16), אבל הסקשנים והכרטיסים סביבם נשארו בגובה
קבוע מהפיגמה שמתכווץ עם --u. מתחת ל---u≈0.75 הפקדים המקובעים כבר לא
נכנסים לקופסאות: ב-1280 הטופס של "צור קשר" גולש 51 מתחתית הכרטיס,
וב-1065 הכפתור ושורת התנאים של LET'S TALK נופלים אל מחוץ לרצועה הכהה.
מתחת ל-1024 אין בעיה (שם הכל עובר לזרימה), ומ-1440 ומעלה אין בעיה
(שם --u גדול מספיק שהמינימומים לא נכנסים לפעולה) — ולכן הטווח סגור
משני צדדיו, ושום דבר מחוץ לו לא מושפע.
הגישה: שומרים על הקומפוזיציה של הדסקטופ — הכותרת מימין והטופס משמאל,
זה לצד זה — ורק מחליפים גובה קבוע בגובה שנגזר מהתוכן. הדבר היחיד
שבאמת עובר לעמודה הוא זוגות השדות, שברוחבים האלה צרים מדי.
========================================================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
/* ======================================================================
0 — טיפוגרפיה, יישור ומקצב אחידים
----------------------------------------------------------------------
בטווח הזה רוב הסקשנים נשארו absolute ומדדו את עצמם ב-var(--u)
(=100cqw/1920). ב-1100px יחידה אחת היא 0.565px — כלומר טקסט של
17 יחידות יורד ל-9.6px ושל 15 ל-8.5px. התוצאה שנמדדה בדפדפן: שבעה
גדלי טקסט רץ שונים באותו עמוד (7.9 / 8.5 / 9.6 / 11.3 / 13 / 13.6 /
16), גבהי שורה מ-0.93 עד 1.9, מרווחי כותרת→פסקה מ-9 עד 87, וכותרות
שכל אחת מתחילה בקו אחר.
שלושה סקשנים (הערוץ, LETS TALK, CONTACT) כבר הומרו לזרימה בבלוק
הזה; כאן מומרים גם השאר, וכולם נשענים על שלושה ערכים:
--b2b-g שוליים חיצוניים זהים בכל הסקשנים
--b2b-rt גודל אחד + גובה שורה אחד לכל הטקסט הרץ
--b2b-gap מרווח אחד בין כל כותרת לפסקה שמתחתיה
המרווח נמדד בדיו ולא בתיבה: לכותרות text-box-trim: trim-both ולפסקאות
trim-start, אחרת ה-half-leading של כל גופן היה מוסיף 4–10px שונים
בכל סקשן ואותו margin היה נראה אחרת בכל אחד.
====================================================================== */
.b2b {
--b2b-g: clamp(32px, 4.4vw, 64px);
--b2b-rt: 18px;
--b2b-rt-lh: 1;
--b2b-gap: 20px;
}
/* ---------- 0.1 כל הטקסט הרץ — גודל אחד וגובה שורה אחד ---------- */
.b2b-hero__lead,
.b2b-hero__badge,
.b2b-numbers__lead,
.b2b-channel__lead,
.b2b-card__text,
.b2b-card--red .b2b-card__text,
.b2b-card--green .b2b-card__text,
.b2b-card--yellow .b2b-card__text,
.b2b-why__text,
.b2b-cases__lead,
.b2b-clients__lead,
.b2b-talk__lead,
.b2b .faq__note,
.b2b .faq__q,
.b2b .faq__a-text,
.b2b-reviews__lead,
.b2b-contact__note {
font-size: var(--b2b-rt);
line-height: var(--b2b-rt-lh);
}
.b2b .review {
border-radius: 16px;
padding: 18px 16px;
font-size: var(--b2b-rt);
line-height: var(--b2b-rt-lh);
}
.b2b .review__mark { margin-bottom: 8px; font-size: 30px; }
.b2b .review__author { margin-top: 10px; font-size: 13px; line-height: 1.5; }
/* ---------- 0.2 אותיות קטנות — גודל אחד לכל התוויות והאזהרות ---------- */
.b2b-talk__disclaimer,
.b2b-stat__label,
.b2b-case__meta,
.b2b-case__statLabel { font-size: 13px; }
.b2b-stat__label { line-height: 1.4; }
/* גם גובה שורה אחד: ההסכמות היו 1.6 והאזהרה של LETS TALK 1.4 */
.b2b .signup__terms,
.b2b .consent,
.b2b-talk__disclaimer,
.b2b-contact__disclaimer,
.b2b .form-group > label,
.b2b .form-status { line-height: 1.5; }
/* ---------- 0.3 כותרות הסקשנים — סולם אחד ---------- */
.b2b-hero__title { font-size: clamp(38px, 4.4vw, 60px); }
.b2b-hero__title .line:first-child { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
.b2b-hero__title .line:last-child { text-box-trim: trim-end; text-box-edge: cap alphabetic; }
.b2b-hero__title .line:only-child { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.b2b-numbers__title,
.b2b-channel__title,
.b2b-cases__title,
.b2b-clients__title,
.b2b-talk__title,
.b2b .faq__title,
.b2b .b2b-reviews__title,
.b2b-contact__title { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.16; }
.b2b-why__title { font-size: clamp(26px, 3vw, 40px); line-height: 1.16; }
/* ---------- 0.4 מרווח אחיד כותרת → פסקה, נמדד בדיו ---------- */
.b2b-hero__title,
.b2b-numbers__title,
.b2b-channel__title,
.b2b-why__title,
.b2b-cases__title,
.b2b-clients__title,
.b2b-talk__title,
.b2b .faq__title,
.b2b .b2b-reviews__title,
.b2b-contact__title,
.b2b-card__title {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
.b2b-hero__lead,
.b2b-numbers__lead,
.b2b-channel__lead,
.b2b-why__text,
.b2b-cases__lead,
.b2b-clients__lead,
.b2b-talk__lead,
.b2b .faq__note,
.b2b-reviews__lead,
.b2b-contact__note,
.b2b-card__text {
text-box-trim: trim-start;
text-box-edge: cap alphabetic;
margin-top: var(--b2b-gap);
margin-bottom: 0;
}
/* ======================================================================
1 — HERO: עמודת תוכן זורמת מימין, האמנות נשארת absolute משמאל
====================================================================== */
.b2b main > section.b2b-hero {
height: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 164px var(--b2b-g) 76px;
}
.b2b-hero__watermark { top: 88px; }
.b2b-hero__title,
.b2b-hero__lead,
.b2b-hero__actions,
.b2b-hero__badge {
position: static;
inset: auto;
width: min(100%, 580px);
margin-inline: 0;
}
.b2b-hero__actions { margin-top: 30px; gap: 18px; flex-wrap: wrap; }
.b2b-hero__badge { margin-top: 22px; width: auto; gap: 8px; }
.b2b-hero__badge img { width: 22px; height: 22px; }
.b2b-signup-wrap {
position: relative;
inset: auto;
width: 100%;
margin-top: 72px;
}
.b2b-signup-wrap .signup--dark {
height: auto;
padding: 40px 32px 52px;
border-radius: 32px;
}
.b2b-signup-wrap .signup__title { font-size: clamp(26px, 2.8vw, 36px); }
.b2b-signup-wrap .signup__form { margin-top: 24px; gap: 14px; flex-wrap: wrap; }
.b2b-signup-wrap .signup__form .field,
.b2b-signup-wrap .signup__form .field:nth-of-type(1),
.b2b-signup-wrap .signup__form .field:nth-of-type(2) { width: clamp(190px, 20vw, 250px); }
.b2b-signup-wrap .signup__terms { margin-top: 20px; }
/* העיגול נתלה חצי מחוץ לפס הכהה, כמו במקור, אבל נעגן לתחתית שגובהה
נגזר עכשיו מהתוכן ולא מ-307 יחידות קבועות. */
.b2b-signup-wrap .scroll-cue {
top: auto;
bottom: -50px;
width: 100px;
height: 100px;
}
.b2b-signup-wrap .scroll-cue::before { width: 81px; height: 81px; border-width: 4px; }
.b2b-signup-wrap .scroll-cue svg { width: 23px; }
/* ======================================================================
2 — המספרים: עמודה זורמת וממורכזת
====================================================================== */
.b2b main > section.b2b-numbers {
height: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 76px var(--b2b-g);
}
.b2b-numbers__title,
.b2b-numbers__lead,
.b2b-stats {
position: static;
inset: auto;
width: auto;
max-width: 100%;
margin-inline: 0;
}
.b2b main > section > .b2b-numbers__lead { max-width: 560px; }
.b2b-stats {
margin-top: 46px;
justify-content: center;
flex-wrap: wrap;
gap: clamp(20px, 3.4vw, 44px);
}
.b2b-stat {
--b2b-ring: 128px;
width: var(--b2b-ring);
height: var(--b2b-ring);
gap: 7px;
}
.b2b-stat::before {
mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 11px));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 11px));
}
.b2b-stat .b2b-stat__value { font-size: calc(var(--b2b-ring) * .212); }
.b2b-stat--c .b2b-stat__value,
.b2b-stat--d .b2b-stat__value { font-size: calc(var(--b2b-ring) * .283); }
.b2b-stat .b2b-stat__label { width: calc(var(--b2b-ring) - 24px); font-size: 12px; line-height: 1.25; }
/* המיקרופון נשאר קישוט absolute, אבל נעגן לפינה במקום לקואורדינטת
פיגמה שנמדדה מול סקשן בגובה 717 יחידות. */
.b2b-numbers__mic {
right: auto;
left: var(--b2b-g);
top: 50%;
transform: translateY(-50%);
width: 132px;
height: 122px;
}
/* ======================================================================
4 — WHY: אותה קומפוזיציה (90% משמאל, קיווקווים+כותרת+פסקה מימין),
רק שהעמודה הימנית זורמת ולכן הפסקה והכותרת על אותו קו ובאותו מרווח.
====================================================================== */
.b2b main > section.b2b-why {
height: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto auto;
align-content: center;
column-gap: clamp(24px, 4vw, 64px);
padding: 76px var(--b2b-g);
}
.b2b-why__dashes,
.b2b-why__title,
.b2b-why__text,
.b2b-why__figure {
position: static;
inset: auto;
width: auto;
margin-inline: 0;
}
.b2b-why__dashes { grid-column: 1; grid-row: 1; width: 232px; }
.b2b-why__dashes li { flex: none; width: 58px; height: 7px; }
.b2b-why__title { grid-column: 1; grid-row: 2; margin-top: 26px; }
.b2b-why__text { grid-column: 1; grid-row: 3; }
.b2b-why__figure {
grid-column: 2;
grid-row: 1 / -1;
align-self: center;
font-size: clamp(110px, 14vw, 200px);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
/* ======================================================================
5 — Case studies: כותרת ופסקה ממורכזות בזרימה, הקרוסלה ברוחב מלא
====================================================================== */
.b2b main > section.b2b-cases {
height: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 76px 0;
}
.b2b-cases__title,
.b2b-cases__lead,
.b2b-cases__viewport,
.b2b-cases__cta {
position: static;
inset: auto;
width: auto;
max-width: 100%;
margin-inline: 0;
}
.b2b-cases__title { padding-inline: var(--b2b-g); }
.b2b main > section > .b2b-cases__lead { max-width: calc(560px + 2 * var(--b2b-g)); padding-inline: var(--b2b-g); }
.b2b-cases__viewport { width: 100%; height: auto; margin-top: 46px; }
.b2b-cases__cta { margin-top: 46px; }
/* הכרטיס נגזר מהתוכן במקום מ-613x509 יחידות פיגמה */
.b2b-cases__track,
.b2b-cases__sequence { gap: 24px; }
.b2b-case { width: 340px; height: auto; border-radius: 22px; }
.b2b-case__media { position: relative; inset: auto; height: 150px; border-top-width: 7px; border-radius: 22px 22px 0 0; }
.b2b-case__badge { width: 78px; height: 78px; right: 16px; top: 20px; }
.b2b-case--type-2 .b2b-case__badge { right: 12px; top: 18px; }
.b2b-case__body { position: relative; inset: auto; height: auto; padding: 18px; }
.b2b-case__meta { margin-top: 0; }
.b2b-case--type-1 .b2b-case__category,
.b2b-case--type-1 .b2b-case__title { margin-right: 0; }
.b2b-case__title { margin-top: 10px; font-size: 19px; }
.b2b-case__stats {
position: relative;
inset: auto;
height: auto;
padding: 20px 16px 22px;
border-radius: 0 0 22px 22px;
}
.b2b-case--type-2 .b2b-case__stats { padding-inline: 16px; }
.b2b-case__stat { width: auto; flex: 1 1 0; }
.b2b-case__statValue { font-size: 30px; }
.b2b-case__statLabel { margin-top: 9px; }
/* המרחק ללולאה מושלמת = רצף אחד + מרווח אחד = 4 x (340+24) */
@keyframes b2b-cases-loop-flow { to { transform: translateX(-1456px); } }
.b2b-cases__track { animation-name: b2b-cases-loop-flow; }
/* ======================================================================
6 — כבר פרסמו: אותו מבנה כמו Case studies
====================================================================== */
.b2b main > section.b2b-clients {
height: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 76px 0;
}
.b2b-clients__title,
.b2b-clients__lead,
.b2b-clients__grid {
position: static;
inset: auto;
width: auto;
max-width: 100%;
margin-inline: 0;
}
.b2b-clients__title { padding-inline: var(--b2b-g); }
.b2b main > section > .b2b-clients__lead { max-width: calc(560px + 2 * var(--b2b-g)); padding-inline: var(--b2b-g); }
.b2b-clients__grid { position: relative; width: 100%; height: 296px; margin-top: 46px; }
.b2b-clients__row { height: 136px; left: calc(var(--row-x) * 1px); }
.b2b-clients__row--1 { --row-x: -70; }
.b2b-clients__row--2 { --row-x: -46; top: 160px; }
.b2b-clients__track,
.b2b-clients__group { gap: 28px; }
.b2b-client { width: 136px; height: 136px; border-radius: 16px; }
/* 12 לוגואים בקבוצה x (136+28) */
@keyframes b2b-logos-left-flow { to { transform: translateX(-1968px); } }
@keyframes b2b-logos-right-flow { from { transform: translateX(-1968px); } to { transform: translateX(0); } }
.b2b-clients__track { animation-name: b2b-logos-left-flow; }
.b2b-clients__row--2 .b2b-clients__track { animation-name: b2b-logos-right-flow; }
/* ======================================================================
8 — שאלות נפוצות
====================================================================== */
.b2b .faq { padding: 76px 0; }
.b2b .faq__grid {
width: 100%;
max-width: none;
padding-inline: var(--b2b-g);
grid-template-columns: minmax(210px, .8fr) minmax(0, 1.7fr);
gap: clamp(24px, 4vw, 56px);
}
.b2b .faq__head { margin-top: 0; padding-inline-start: 0; }
.b2b .faq__list { margin-top: 0; gap: 18px; }
.b2b .faq__toggle { width: 48px; height: 48px; }
.b2b .faq__toggle svg { width: 22px; }
.b2b .faq__q { min-height: 48px; padding: 11px 18px; }
.b2b .faq__item.is-open .faq__q { min-width: 0; }
.b2b .faq__a-inner { margin-top: 14px; }
.b2b .faq__a-avatar { width: 48px; height: 48px; }
.b2b .faq__a-avatar img { width: 26px; }
.b2b .faq__a-text {
width: auto;
max-width: 100%;
height: auto;
min-height: 48px;
padding: 11px 18px;
border-radius: 24px;
}
.b2b .faq__mic { width: 250px; top: auto; bottom: 0; right: 0; }
/* ======================================================================
9 — המלצות: הכותרת בעמודה ימנית זורמת, ה-masonry ממלא את השאר
====================================================================== */
.b2b main > section.b2b-reviews {
height: auto;
display: grid;
grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr);
align-items: center;
column-gap: clamp(24px, 4vw, 56px);
padding: 76px var(--b2b-g);
}
.b2b-reviews__head {
position: static;
inset: auto;
width: auto;
}
.b2b .b2b-reviews__title { width: auto; }
.b2b-reviews__lead { width: auto; }
.b2b-reviews__band { object-fit: cover; height: 100%; }
.b2b-reviews__masonry {
position: static;
inset: auto;
width: 100%;
height: 470px;
gap: 14px;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 42px, #000 428px, transparent 470px);
mask-image: linear-gradient(180deg, transparent 0, #000 42px, #000 428px, transparent 470px);
}
/* ---------- 7 — LET'S TALK ---------- */
/* מגריד של שתי עמודות במקום ילדים absolute, כדי שגובה הסקשן ייגזר
מהטופס. הריפודים הם המספרים של הפיגמה: הכותרת ב-152 מימין, והקצה
השמאלי של הכרטיס ב-1920−986−664=270. */
.b2b-talk {
height: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
/* בפיגמה הכותרת והכרטיס מתחילים שניהם ב-131 מהשפה העליונה. center
היה מוריד את הכותרת הקצרה אל אמצע הכרטיס הגבוה. */
align-items: start;
column-gap: clamp(24px, 4vw, 64px);
padding: 76px var(--b2b-g);
}
/* ב-RTL העמודה הראשונה היא הימנית, ו-__head קודם ל-__card במסמך —
כלומר הסדר החזותי נשמר בלי לגעת ב-HTML. */
.b2b-talk__head,
.b2b-talk__card {
position: static;
inset: auto;
width: auto;
}
.b2b-talk__card { height: auto; }
.b2b-talk__lead { width: auto; }
/* הרצועה הכהה היא ![]()
בגובה קבוע של 834u. בלי המתיחה היא הייתה
נגמרת באמצע הטופס — וזה בדיוק החיתוך שנראה בצילום. fill מותח את
העקומה אנכית בכ-15–20%, מה שכמעט לא מורגש ועדיף על הסתרתה. */
.b2b-talk__band {
inset: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: fill;
}
/* הגל ממוקם ב-448 מתוך 834, כלומר 54% — יחסי במקום קבוע. */
.b2b-talk__wave { top: 54%; }
/* זה מה ש"לא נכנס": שני שדות זה לצד זה משאירים ~160px לכל אחד. */
.b2b-talk__row { flex-direction: column; }
.b2b-talk__row .field { width: 100%; }
/* ---------- 11 — CONTACT ---------- */
/* הפאנל הצהוב חוזר לזרימה עם margin-top שלילי, שמשמר את החפיפה של
126 כלפי מעלה אל הסקשן הקודם בדיוק כמו במקור. */
.b2b .b2b-contact { height: auto; }
.b2b-contact__panel {
position: relative;
inset: auto;
width: calc(100% - 2 * var(--b2b-g));
height: auto;
margin-inline: auto;
margin-top: -72px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start;
column-gap: clamp(24px, 4vw, 64px);
padding: 40px;
}
.b2b-contact__head,
.b2b-contact__card {
position: static;
inset: auto;
width: auto;
}
.b2b-contact__card { height: auto; }
/* שורת התנאים יושבת מתחת לכרטיס ובאותה עמודה, לא מתחת לכותרת. */
.b2b-contact__disclaimer {
position: static;
inset: auto;
width: auto;
grid-column: 2;
margin-top: 16px;
}
.b2b-contact__row { flex-direction: column; gap: 0; }
/* ---------- 3 — הערוץ המרכזי: שלושת הכרטיסים ----------
שלוש תקלות נפרדות התכנסו כאן:
1. האייקון הוא ![]()
עם width/height="92" ב-HTML. ה-CSS מקטין רק את
הרוחב (calc(92 * var(--u))) והגובה נופל בחזרה לתכונת ה-HTML —
49 על 92 במקום ריבוע. לכן הוא נראה מרוח.
2. כותרת הכרטיס היא 96u מול 64u של כותרת הסקשן, ובגודל הזה היא
עולה על האייקון שמעליה (חפיפה של 32–41px).
3. הגבהים קבועים מהפיגמה, ולכן נשאר 76–101px של אוויר מתחת לטקסט.
הפתרון: אותה שיטה של LET'S TALK ו-CONTACT — הסקשן הופך לגריד,
והכרטיסים לעמודות זורמות שגובהן נגזר מהתוכן. הסידור נשמר: ירוק
מימין, אדום משמאל, צהוב לרוחב מתחתיהם. */
.b2b-channel {
height: auto;
display: grid;
/* יחס הפיגמה בין הכרטיסים: ירוק 773, אדום 947 */
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
column-gap: clamp(20px, 2.6vw, 34px);
padding: 76px var(--b2b-g);
}
/* סדר מפורש לכל ארבעת האזורים. בלי זה הכיתוב האנגלי (שהופך ל-static
בטווח הזה) נתפס אוטומטית לשורה 1 בעמודה הימנית בלבד, הכותרת נדחפת
לשורה 2, והפסקה — שנפרשת על שתי העמודות — לא מצאה מקום בשורות 3 ו-4
שהכרטיסים תפסו מראש, ונחתה מתחת לכרטיס הצהוב. */
.b2b .b2b-channel__watermark {
grid-column: 1 / -1;
grid-row: 1;
}
.b2b-channel__title,
.b2b-channel__lead {
position: static;
inset: auto;
width: auto;
grid-column: 1 / -1;
}
.b2b-channel__title { grid-row: 2; }
.b2b-channel__lead { grid-row: 3; }
.b2b main > section > .b2b-channel__lead {
margin-bottom: 46px;
margin-inline: auto;
max-width: 560px;
}
.b2b-card {
position: static;
inset: auto;
width: auto;
height: auto;
display: flex;
flex-direction: column;
/* ב-RTL הקצה ההתחלתי הוא הימני — כך הכל נצמד לימין */
align-items: flex-start;
text-align: right;
padding: clamp(24px, calc(52 * var(--u)), 52px);
}
/* בפיגמה הירוק יושב מימין (right:86) והאדום משמאל (right:888), אבל
במסמך האדום קודם — ולכן מיקום מפורש ולא סדר הופעה. */
.b2b-card--green { grid-column: 1; grid-row: 4; }
.b2b-card--red { grid-column: 2; grid-row: 4; }
.b2b-card--yellow { grid-column: 1 / -1; grid-row: 5; margin-top: calc(41 * var(--u)); }
/* ריבוע קבוע — גם ה-width וגם ה-height, אחרת תכונת ה-HTML חוזרת. */
.b2b-card--red .b2b-card__icon,
.b2b-card--green .b2b-card__icon,
.b2b-card--yellow .b2b-card__icon {
position: static;
inset: auto;
width: 40px;
height: 40px;
margin-bottom: 12px;
}
/* בגודל של כותרת הסקשן (64u), ולא 96u */
.b2b-card--red .b2b-card__title,
.b2b-card--green .b2b-card__title,
.b2b-card--yellow .b2b-card__title {
position: static;
inset: auto;
width: 100%;
font-size: clamp(24px, 2.6vw, 34px);
line-height: 1.16;
text-align: right;
/* לירוק היה nowrap שגלש מהכרטיס ברוחבים האלה */
white-space: normal;
margin-bottom: 0;
}
.b2b-card--red .b2b-card__text,
.b2b-card--green .b2b-card__text,
.b2b-card--yellow .b2b-card__text {
position: static;
inset: auto;
width: 100%;
text-align: right;
}
/* עיגולי הקישוט מוקטנים יחד עם הכרטיסים. במידה המקורית (365u) הם
גדולים מהכרטיס הנמוך והיו נחתכים: הירוק היה מציג 15px בלבד במקום
120, והצהוב היה נגמר מחוץ לשפה התחתונה. הירוק גם נעגן לתחתית, כמו
בפיגמה, במקום ל-top קבוע שנבלע בכרטיס נמוך. */
.b2b-card--green::after,
.b2b-card--yellow::after {
width: calc(300 * var(--u));
height: calc(300 * var(--u));
}
.b2b-card--green::after {
top: auto;
bottom: calc(-143 * var(--u));
}
}
/* ==========================================================================
טאבלט — 768 עד 1023
---------------------------------------------------------------------------
הטווח הזה נפל בין הכיסאות: מתחת ל-768 יש טיפול ייעודי, ומ-1024 ומעלה
הפריסה עדיין absolute לפי הפיגמה. כאן הסקשנים כבר זורמים אבל כמה
אלמנטים נשארו עם התנהגות של דסקטופ, וזה מה שנשבר.
========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
/* ---------- 1. עיגול הגלילה ----------
.b2b-signup-wrap עובר ל-position:static בטווח הזה, אבל העיגול נשאר
absolute עם top:237u. בלי אב מוצב הוא נתלה על .b2b-hero (relative)
ונחת בראש העמוד, ממש על כותרת ה-Hero. מתחת ל-768 זה כבר מטופל. */
.b2b-signup-wrap .scroll-cue {
position: static;
transform: none;
width: 96px;
height: 96px;
margin: -19px auto 0;
}
.b2b-signup-wrap .scroll-cue::before { width: 78px; height: 78px; border-width: 3px; }
.b2b-signup-wrap .scroll-cue:hover { transform: translateY(4px); }
/* ---------- 2. מרווחים אחידים בין הסקשנים ----------
הריפוד כבר אחיד (64/64), אבל הווטרמארקים נופלים כאן לזרימה ודוחפים
את הכותרת כלפי מטה בכל סקשן במידה אחרת: NUMBERS האנכי לבדו 221px,
WHY ו-LET'S TALK 98, והאופקיים 44. התוצאה היא מרווחים של 118 עד 359.
בדסקטופ הם absolute ומתחת ל-768 הם מוסתרים — כאן הם פשוט נשמטו. */
/* הן חוזרות לתצוגה — אבל כקישוט absolute, לא בזרימה. בזרימה הן דחפו
את הכותרת בכל סקשן במידה אחרת וזה מה שיצר מרווחים של 118 עד 359.
רק ילדים ישירים של הסקשן: הווטרמארקים של REVIEWS ו-CONTACT עטופים
בתוך __head, ולכן top/right היו נמדדים מול העטיפה ונוחתים על הכותרת.
הם קצרים (30px בזרימה) וכמעט לא משפיעים על המקצב, אז נשארים כפי שהם. */
/* שתי הצורות של הסלקטור כדי להגיע לאותה ספציפיות של כלל ה-margin
הקיים (0,3,2) — אחרת קיזוז ה-letter-spacing שלו מנצח את המירכוז. */
/* השאלות הנפוצות היו 54/80 בזמן שכל השאר 64/64 */
.b2b .faq { padding: 64px 0; }
/* ---------- 5. WHY / 90% ----------
הסדר היה קיווקווים · כותרת · פסקה · 90%, כשה-90% נופל אחרון ורחוק
מהכותרת. עכשיו: קיווקווים · כותרת · 90% · פסקה, הכל צמוד לימין
באותו קו ובמרווח אחיד. */
.b2b-why {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.b2b-why__dashes,
.b2b-why__title,
.b2b-why__figure,
.b2b-why__text {
position: static;
inset: auto;
width: min(calc(100% - 32px), 720px);
margin: 0;
text-align: right;
}
/* היו 41x3.6 ברוחב הזה — כמעט בלתי נראים */
.b2b-why__dashes { order: 1; display: flex; justify-content: flex-start; }
.b2b-why__dashes li { flex: none; width: 60px; height: 6px; }
/* המרווח של 18 היה בין תיבות, לא בין גליפים: ל-90% יש גופן 180 בתיבת
שורה של 180, והגליפים חורגים ממנה ב-8 לכל כיוון. המרווחים הנראים
יצאו 18 / 10 / 15. trim חותך את התיבה לגובה הגליפים בפועל, וכך
ה-gap הופך למרווח אמיתי ואחיד — והפסקה עולה. */
/* הסדר: קיווקווים · 90% · כותרת · פסקה — זהה לזה שבפלאפון.
gap אחיד של 18 בין תיבות עדיין נותן מרווחי-דיו שונים, כי לכל אלמנט
יחס אחר בין התיבה לגליפים: הכותרת חורגת 5 מעל ו-7 מתחת (היורדת של
ק), ה-90% חורג 1 מעל, והפסקה יושבת 7 בתוך התיבה. המרווח הנראה הוא
18 + margin − חריגה-עליונה-שלי − חריגה-תחתונה-של-הקודם, ומכאן
שלושת ה-margin שמביאים את כולם ל-25 בדיוק. */
.b2b-why__figure { order: 2; margin-top: 8px; text-align: right; text-box: trim-both cap alphabetic; }
.b2b-why__title { order: 3; margin-top: 12px; text-box: trim-both cap alphabetic; }
.b2b-why__text { order: 4; margin-top: 7px; }
/* ---------- 4. הטקסט בשלושת הכרטיסים ----------
שתי דריסות של הדסקטופ שרדו לכאן. היישור למרכז של האדום והצהוב נשאר
בזמן שהירוק כבר לימין, והצהוב גם החזיק בגודל של הפיגמה
(calc(17 * var(--u)) — 7.5px ברוחב 858) כי הסלקטור שלו ספציפי יותר
מכלל ה-16px של הטווח. מתחת ל-768 שניהם כבר מטופלים. */
.b2b-card--red .b2b-card__title,
.b2b-card--green .b2b-card__title,
.b2b-card--yellow .b2b-card__title,
.b2b-card--red .b2b-card__text,
.b2b-card--green .b2b-card__text,
.b2b-card--yellow .b2b-card__text {
text-align: right;
}
.b2b-card--yellow .b2b-card__text { font-size: 16px; }
/* ---------- 3. שני קייס-סטאדי בשורה ----------
ברוחב הזה יש מקום לשניים; עמודה אחת השאירה חצי מסך ריק מכל צד. */
.b2b-cases__sequence {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
/* שני כרטיסים בשורה מחצי את הרוחב לכ-348, אבל המספרים נשארו על
clamp(30px, 6vw, 46px) — כלומר 46px. "1,500" ברוחב הזה הוא כ-110px
בתא של 99, ולכן הוא גלש והתנגש בשכן. הגודל נגזר עכשיו מהרוחב. */
.b2b-case__statValue { font-size: clamp(22px, 3.2vw, 30px); }
.b2b-case__statLabel { margin-top: 8px; font-size: 13px; }
/* הרצועה הכהה והחלק האפור היו מכוילים לכרטיס ברוחב מלא */
.b2b-case__stats { min-height: 0; padding: 20px 12px; }
.b2b-case__body { min-height: 0; padding: 18px; }
.b2b-case__title { margin-top: 12px; font-size: 19px; }
.b2b-case__meta { font-size: 14px; }
/* התיבה הייתה ממורכזת אבל ברוחב 720, ולכן הגלולה עצמה נצמדה לימין */
.b2b main > section > .b2b-cases__cta {
width: max-content;
max-width: 100%;
margin-inline: auto;
justify-content: center;
}
/* ======================================================================
6 — טיפוגרפיה ומקצב אחידים, אותם ערכים כמו ב-1024–1439
----------------------------------------------------------------------
גם כאן הטקסט הרץ התפצל לשלושה גדלים (15 / 16 / 17) ולארבעה גבהי
שורה (1.5 / 1.6 / 1.65 / 1.7), והמרווח בין כותרת לפסקה נע בין 0
(כרטיסי הערוץ) ל-55 (WHY). הבלוק הזה יושב בסוף הטווח בכוונה — הוא
צריך לנצח את הכוונונים הנקודתיים שלמעלה.
====================================================================== */
.b2b {
--b2b-rt: 18px;
--b2b-rt-lh: 1;
--b2b-gap: 20px;
}
.b2b-hero__lead,
.b2b-numbers__lead,
.b2b-channel__lead,
.b2b-card__text,
.b2b-card--red .b2b-card__text,
.b2b-card--green .b2b-card__text,
.b2b-card--yellow .b2b-card__text,
.b2b-why__text,
.b2b-cases__lead,
.b2b-clients__lead,
.b2b-talk__lead,
.b2b .faq__note,
.b2b .faq__q,
.b2b .faq__a-text,
.b2b-reviews__lead,
.b2b-contact__note {
font-size: var(--b2b-rt);
line-height: var(--b2b-rt-lh);
}
.b2b-hero__title,
.b2b-numbers__title,
.b2b-channel__title,
.b2b-why__title,
.b2b-cases__title,
.b2b-clients__title,
.b2b-talk__title,
.b2b .faq__title,
.b2b .b2b-reviews__title,
.b2b-contact__title,
.b2b-card__title {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
/* כותרת ה-Hero בנויה משורות block; חיתוך על ההורה לא מגיע אליהן */
.b2b-hero__title .line:first-child { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
.b2b-hero__title .line:last-child { text-box-trim: trim-end; text-box-edge: cap alphabetic; }
.b2b-hero__title .line:only-child { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.b2b-hero__lead,
.b2b-numbers__lead,
.b2b-channel__lead,
.b2b-why__text,
.b2b-cases__lead,
.b2b-clients__lead,
.b2b-talk__lead,
.b2b .faq__note,
.b2b-reviews__lead,
.b2b-contact__note,
.b2b-card__text {
text-box-trim: trim-start;
text-box-edge: cap alphabetic;
margin-top: var(--b2b-gap);
margin-bottom: 0;
}
.b2b-card__title { margin-bottom: 0; }
/* margin-bottom של 24 על הכותרת ניצח בקיפול המרווחים את ה-20 של הפסקה */
.b2b-hero__title { margin-bottom: 0; }
/* WHY: המקצב הפנימי עבר ממרווח flex + שלושה קיזוזי-דיו למרווחים
מפורשים, עכשיו כשהתיבות עצמן חתוכות לגובה הגליף. */
/* שורת הנטפרי ב-Hero נשארה 15px בזמן שכל השאר עברו ל-17 */
.b2b-hero__badge { font-size: var(--b2b-rt); line-height: var(--b2b-rt-lh); }
.b2b .review {
border-radius: 16px;
padding: 18px 16px;
font-size: var(--b2b-rt);
line-height: var(--b2b-rt-lh);
}
.b2b .review__mark { margin-bottom: 8px; font-size: 30px; }
.b2b .review__author { margin-top: 10px; font-size: 13px; line-height: 1.5; }
/* אותיות קטנות: גודל אחד וגובה שורה אחד, כמו בטווח שמעל */
.b2b-talk__disclaimer,
.b2b-stat__label,
.b2b-case__meta,
.b2b-case__statLabel { font-size: 13px; }
.b2b .signup__terms,
.b2b .consent,
.b2b-talk__disclaimer,
.b2b-contact__disclaimer,
.b2b .form-group > label,
.b2b .form-status { font-size: 13px; line-height: 1.5; }
.b2b-why { gap: 0; }
.b2b-why__figure { margin-top: 26px; }
.b2b-why__title { margin-top: 26px; }
}
/* ==========================================================================
768–1439 — מפרט טיפוגרפיה אחיד לטאבלט וללפטופ
========================================================================== */
@media (min-width: 768px) and (max-width: 1439px) {
.b2b {
--b2b-rt: 18px;
--b2b-rt-lh: 1;
--b2b-gap: 20px;
--b2b-en-he-gap: 5px;
}
/* .b2b h1, .b2b h2, .b2b h3 { line-height: 1.24 } הוא (0,1,1) ולכן
ניצח סלקטור-מחלקה בודד. קידומת .b2b מעלה ל-(0,2,0). */
.b2b .b2b-hero__title {
font-size: 48px;
line-height: 1.1;
}
.b2b .signup__title,
.b2b .b2b-numbers__title,
.b2b .b2b-channel__title,
.b2b .b2b-card__title,
.b2b .b2b-why__title,
.b2b .b2b-cases__title,
.b2b .b2b-case__title,
.b2b .b2b-clients__title,
.b2b .b2b-talk__title,
.b2b .faq__title,
.b2b .b2b-reviews__title,
.b2b .b2b-contact__title,
.b2b .footer-cta__title {
font-size: 36px;
line-height: 1.1;
}
/* ---------- הכותרות באנגלית ----------
חוזרות למיקום של הפיגמה — כל אחת absolute בקואורדינטות שלה, ולא
בזרימה מעל הכותרת העברית. מה שמואחד כאן הוא רק המראה, לפי המפרט:
Karantina 300, line-height: normal, leading-trim, ומרווח אותיות
ביחס 42.24/96 = .44em. הגודל הוא 96 של הדסקטופ מוקטן ל-88% ללפטופ. */
.b2b .watermark {
font-family: 'Karantina', sans-serif;
font-weight: 300;
/* 96 של הפיגמה, מוקטן ל-75% ללפטופ. מתחת לזה THE PRIMARY CHANNEL
(הארוך מכולם) כבר לא נכנס לרוחב עמודת התוכן. */
font-size: calc(96 * .75 * var(--u));
/* ב-b2b הסקשנים מפורקים לזרימה ברוחב הזה, ולכן הכיתוב יושב בעמודת
התוכן ולא בקואורדינטות הפיגמה. בלי ההגבלה THE PRIMARY CHANNEL,
CASE STUDIES ו-ALREADY HERE גלשו אל מחוץ למסך. */
width: min(calc(100% - 32px), 720px);
max-width: none;
/* הבסיס מקזז את ה-letter-spacing עם margin-right שלילי; בזרימה הוא
דוחף את התיבה החוצה, ולכן מאופס כאן. */
margin-right: auto;
margin-left: auto;
line-height: normal;
letter-spacing: .44em;
text-box: trim-both cap alphabetic;
opacity: .06;
}
/* אותה ספציפיות (0,3,2) של כלל הקיזוז הקיים — בלי זה ה-margin-right
השלילי שלו נשאר ודוחף ארבעה מהם 6px מעבר לשפת המסך, לחיתוך.
רק המרווחים כאן: כל השאר חייב לחול גם על האנכיים. */
.b2b main > section > .watermark:not(.watermark--v) {
margin-right: auto;
margin-left: auto;
}
/* הרצועות הכהות — אחרת ב-6% הכיתוב נעלם. .b2b מעלה לספציפיות של
הכלל המאחד שמעליו, אחרת הוא לא נכנס. */
.b2b .b2b-talk__watermark,
.b2b .b2b-reviews__watermark { color: var(--white); opacity: .16; }
.b2b-hero__lead,
.b2b-hero__badge,
.b2b-numbers__lead,
.b2b-channel__lead,
.b2b-card__text,
.b2b-why__text,
.b2b-cases__lead,
.b2b-clients__lead,
.b2b-talk__lead,
.b2b .faq__note,
.b2b .faq__q,
.b2b .faq__a-text,
.b2b-reviews__lead,
.b2b-contact__note,
.b2b .review {
font-size: var(--b2b-rt);
line-height: var(--b2b-rt-lh);
}
/* הערות — 13 */
.b2b .signup__terms,
.b2b .consent,
.b2b-talk__disclaimer,
.b2b-contact__disclaimer,
.b2b .form-group > label,
.b2b .form-status,
.b2b-stat__label,
.b2b-case__meta,
.b2b-case__statLabel,
.b2b .review__author {
font-size: 13px;
}
/* הקרדיט אינו הערה — 15 */
.b2b .footer-credit { font-size: 15px; }
.b2b-hero__lead,
.b2b-numbers__lead,
.b2b-channel__lead,
.b2b-card__text,
.b2b-why__text,
.b2b-cases__lead,
.b2b-clients__lead,
.b2b-talk__lead,
.b2b .faq__note,
.b2b-reviews__lead,
.b2b-contact__note {
margin-top: var(--b2b-gap);
margin-bottom: 0;
}
.b2b-hero__actions,
.b2b-hero__badge,
.b2b-stats,
.b2b-cases__viewport,
.b2b-cases__cta,
.b2b-clients__grid,
.b2b .faq__list {
margin-top: var(--b2b-gap);
}
}
/* ==========================================================================
אפקט מעבר עכבר על הקונטיינרים הצבעוניים — בכל הרוחבים
הכלל קיים למעלה (.b2b-card:hover { translate }), אבל GSAP כותב על כל
כרטיס inline "translate: none" כחלק מנרמול הטרנספורם שלו, ו-inline גובר
על גיליון. !important הוא הדרך היחידה להחזיר את ההרמה בלי לגעת ב-GSAP
עצמו, שמנהל את ה-transform של אנימציית הכניסה.
========================================================================== */
@media (hover: hover) and (pointer: fine) {
.b2b-card:hover { translate: 0 -7px !important; }
}
/* ==========================================================================
הכותרות באנגלית שיושבות מעל כותרת עברית — 5px ביניהן
הן היו absolute מהבסיס, ולכן ריחפו מעל הסקשן במקום להיות מעל הכותרת.
בזרימה המרווח נמדד דיו-לדיו: לשתיהן text-box trim.
ההירו מוחרג — הכיתוב שם אינו מעל הכותרת אלא בקואורדינטה שלו.
========================================================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
.b2b main > section:not(.b2b-hero) > .watermark:not(.watermark--v) {
position: static;
margin-bottom: var(--b2b-en-he-gap);
}
/* אלה כבר בזרימה, אבל בתוך __head ולא ישירות תחת ה-section */
.b2b .b2b-reviews__watermark,
.b2b .b2b-contact__watermark { margin-bottom: var(--b2b-en-he-gap); }
}
/* ==========================================================================
תיקוני דיוק ללפטופ — עמוד המפרסמים, סבב 2026-08-28
========================================================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
/* ---------- 2 — מספרים ---------- */
/* הרמקול היה מעוגן לשוליים ונשאר 129px מהעיגול. כאן הוא נצמד לשפה
הימנית של העיגול השמאלי: רוחב שורת העיגולים הוא 4 טבעות של 128
ושלושה רווחים, והיא ממורכזת — ולכן הקצה שלה הוא חצי רוחב מהמרכז. */
.b2b main > section.b2b-numbers { --b2b-stats-gap: clamp(20px, 3.4vw, 44px); }
.b2b-stats { gap: var(--b2b-stats-gap); }
.b2b-numbers__mic {
top: auto;
/* 76px = הריפוד התחתון של הסקשן, כלומר בסיס הרמקול על בסיס העיגולים */
bottom: 76px;
left: calc(50% - (4 * 128px + 3 * var(--b2b-stats-gap)) / 2 - 132px);
transform: none;
}
/* NUMBERS ישב מראש הסקשן ולא מול הגוש. תיבת הכיתוב שווה לדיו שלו,
ולכן מרכוז התיבה בתוך תיבת הריפוד מיישר אותו לגוש כולו. */
.b2b .b2b-numbers__watermark {
top: 50%;
bottom: auto;
transform: translateY(-50%);
}
/* ---------- 4 — WHY ---------- */
/* הקומפוזיציה של הפיגמה: 90% מימין, הטקסט משמאלו, והכיתוב האנכי בקצה
השמאלי. הוא הופך לתא בגריד שנפרש על כל השורות, ולכן align-self: center
מיישר אותו למרכז הגוש כולו במקום לקואורדינטה קבועה. */
.b2b main > section.b2b-why {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
}
.b2b-why__figure { grid-column: 1; }
.b2b-why__dashes { grid-column: 2; grid-row: 1; }
.b2b-why__title { grid-column: 2; grid-row: 2; }
.b2b-why__text { grid-column: 2; grid-row: 3; }
.b2b .b2b-why__watermark {
position: static;
grid-column: 3;
grid-row: 1 / -1;
align-self: center;
width: auto;
margin: 0;
}
/* ---------- 5 — Case studies ---------- */
/* הפסקה נחתכת גם בתחתית, כדי ש-50 יהיו 50 נראים ולא מרווח תיבה */
.b2b-cases__lead,
.b2b-clients__lead { text-box-trim: trim-both; }
.b2b-cases__viewport,
.b2b-cases__cta { margin-top: 50px; }
/* הכרטיסים כבר בגובה זהה, אבל שורת הנתונים הכהה נעצרה איפה שהכותרת
נגמרה — ולכן בכרטיס עם כותרת קצרה היא ריחפה 40px מעל התחתית. */
.b2b-case {
display: flex;
flex-direction: column;
}
.b2b-case__stats { margin-top: auto; }
/* ---------- 6 — כבר פרסמו ---------- */
.b2b-clients__grid { margin-top: 50px; }
/* ---------- 7 — LET'S TALK ---------- */
/* שני שדות בשורה, כמו בדסקטופ */
.b2b-talk__row {
flex-direction: row;
flex-wrap: wrap;
gap: 14px;
}
.b2b-talk__row .field {
width: calc(50% - 7px);
flex: none;
}
/* ---------- 9 — המלצות ---------- */
/* הכרטיס של הטופס עולה 72 על הרצועה הכהה; הריפוד מוסיף מעליהם את
100px הנדרשים מסוף הקרוסלות. */
.b2b main > section.b2b-reviews { padding-bottom: calc(100px + 72px); }
}
/* ==========================================================================
הפוטר הכהה — זהה לשאר העמודים
העמוד העסקי טוען את style.css, שהוא עותק שקדם לשני הכפתורים בפוטר: אין בו
כלל ל-.footer-cta__actions ולא לתווית הכפתור השקוף על הרקע הכהה. בלעדיהם
שני הכפתורים יושבים זה לצד זה, והשני כהה על כהה וכמעט בלתי נראה.
הערכים כאן נמדדו מול הפוטר של שאר העמודים בכל טווח.
========================================================================== */
.b2b .site-footer .footer-cta__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.b2b .site-footer .footer-cta .btn--outline .btn__label {
border-color: var(--white);
color: var(--white);
}
@media (min-width: 1440px) {
.b2b .site-footer .footer-cta__actions {
gap: calc(14 * var(--u));
margin-top: calc(20 * var(--u));
}
/* המרווח עבר לעטיפה; בלי האיפוס כל כפתור מוסיף עוד 20 מעל עצמו */
.b2b .site-footer .footer-cta__actions .btn { margin-top: 0; }
/* .b2b h1, .b2b h2, .b2b h3 { line-height: 1.24 } הוא (0,1,1) וגבר על
הכלל של הפוטר, ולכן הכותרת כאן הייתה גבוהה ב-15px משאר העמודים. */
.b2b .site-footer .footer-cta__title { line-height: calc(26 * var(--u)); }
}
@media (min-width: 768px) and (max-width: 1439px) {
.b2b .site-footer .footer-cta__actions {
margin-top: 15px;
gap: 15px;
}
.b2b .site-footer .footer-cta__actions .btn { margin-top: 0; }
.b2b .site-footer .footer-cta__title { font-size: 32px; line-height: 1.1; }
.b2b .footer-credit { font-size: 13px; }
}
/* ==========================================================================
לפטופ — סבב תיקונים 3
כל היחסים כאן נמדדו מהפריסה של 1920 (הפיגמה) ומבוטאים ביחידות של קוטר
הטבעת, כדי שהקומפוזיציה תשוחזר ולא רק תיראה דומה.
========================================================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
/* ---------- NUMBERS על קו השוליים הפנימיים ---------- */
/* הדיו של Karantina במצב אנכי גולש 0.1625em מעבר לתיבת השורה משני
הצדדים. בלי הקיזוז התיבה יושבת על השוליים אבל האותיות חורגות מהם. */
.b2b .b2b-numbers__watermark {
right: calc(var(--b2b-g) + .1625em);
}
/* ---------- המיקרופון ---------- */
/* בפיגמה הוא ברוחב 1.894 מקוטר הטבעת ובגובה 1.752, ראשו על ראש שורת
הטבעות, והוא נכנס אל תוך הטבעת השמאלית עד קרוב לשפתה הרחוקה — לא
נעצר לפניה. הערך שהיה כאן (132px) היה בגודל טבעת אחת בלבד. */
.b2b-numbers__mic {
--mic-ring: 128px;
width: calc(var(--mic-ring) * 1.894);
height: calc(var(--mic-ring) * 1.752);
top: auto;
/* 76px = הריפוד התחתון של הסקשן; ממנו יורדים .7914 מקוטר הטבעת,
בדיוק כפי שהוא חורג מתחת לשורת הטבעות בפיגמה. */
bottom: calc(76px - var(--mic-ring) * .7914);
left: calc(50% - (4 * var(--mic-ring) + 3 * var(--b2b-stats-gap)) / 2 - var(--mic-ring) * .925);
transform: none;
}
/* ---------- WHY — קו שמאלי אחד לכל הגוש ---------- */
/* הקיווקווים נצמדו לקצה הימני של העמודה בעוד שבפיגמה הם האלמנט השמאלי
ביותר בגוש. ב-RTL margin-inline-start: auto דוחף אותם אל השמאל,
לאותו קו שממנו מתחילות תיבות הכותרת והפסקה. */
.b2b-why__dashes { margin-inline-start: auto; }
}
/* ==========================================================================
הרצועות הכהות של LET'S TALK ו-Success Speaks — לפטופ
שתיהן היו ![]()
עם loading="lazy" הפרוש על הסקשן. הגיאומטריה נכונה, אבל
הרקע תלוי בכך שהדפדפן יטען תמונה עצלה — ומשם הוא נעלם. כרקע CSS הוא
נטען תמיד ואינו יכול להיכשל.
שני ה-SVG נושאים preserveAspectRatio="none", ולכן background-size של
100% 100% מותח אותם בדיוק כמו object-fit: fill בדסקטופ — אותה עקומה.
מתחת ל-1024 כבר קיים פתרון משלו (רקע ink מלא), ומעל 1440 לא נוגעים.
========================================================================== */
/* הסיומת -v2 בשמות הקבצים אינה קישוט: בכתובות הקודמות האחסון של Lovable
הגיש קובץ חלופי לבן בגודל 2x2 (87 בייט) במקום העקומה, אף שהקובץ הנכון
ישב בריפו — ושתי הרצועות הכהות יצאו לבנות באתר החי. שם חדש = אובייקט
חדש באחסון. אם הן מלבינות שוב, זו אותה תקלה: לשנות שם, לא לתקן CSS. */
@media (min-width: 1024px) and (max-width: 1439px) {
.b2b-talk {
background: url('../img/b2b/curve-dark-talk-v2.svg') no-repeat 50% 50% / 100% 100%;
}
.b2b-reviews {
background: url('../img/b2b/curve-dark-reviews-v2.svg') no-repeat 50% 50% / 100% 100%;
}
/* ה-![]()
מיותר עכשיו, וגם השאיר פס בהיר של 10px בשמאל הסקשן: הוא נגזר
ל-max-width: 100% אבל נשאר מוסט ימינה בקיזוז של הפיגמה. */
.b2b-talk__band,
.b2b-reviews__band { display: none; }
}
/* ==========================================================================
ההירו בלפטופ — הקיפול נופל אחרי כותרת הטופס בלבד
הקומפוזיציה עצמה כבר תואמת לדסקטופ כמעט אחד לאחד ביחס לגובה הסקשן
(כותרת 19% מול 18.6%, ראש הכרטיס 65% מול 69%, תחתיתו 91% מול 90%).
מה שנשבר הוא היחס אל המסך: בדסקטופ ההירו גבוה פי 1.27 מהחלון ולכן
הקיפול חותך בתוך הכרטיס, ובלפטופ הוא היה גבוה רק פי 1.05 — וכל הכרטיס,
השדות ועיגול הגלילה נכנסו לתוך המסך.
הכרטיס נדחף לתחתית ההירו ב-margin-top: auto, וההירו מקבל גובה של
מסך אחד ועוד גובה הכרטיס — כך שראשו נוחת 76px מעל הקיפול. בתוך ה-76
נכנסים הריפוד העליון (40) והכותרת (20.7) ונשארים 15 לנשימה; השדות
מתחילים 84.7 מראש הכרטיס, כלומר 9px מתחת לקיפול.
225 הוא גובה הכרטיס בטווח הזה — נמדד 224.7 ב-1024, ב-1366 וב-1439,
קבוע מפני שכל המידות שלו כאן הן px ולא יחידות של הפיגמה.
========================================================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
.b2b main > section.b2b-hero {
min-height: calc(100svh + 225px);
}
.b2b-signup-wrap { margin-top: auto; }
}
/* ==========================================================================
ההירו בלפטופ — הקומפוזיציה חוזרת לפרופורציות של הקובץ
בדסקטופ כל ההירו נגזר מ---u: הכותרת והכיתוב הלטיני שניהם 96u, הכותרת
ברוחב 970u, הפסקה 718u. בטווח הזה הם הוחלפו במידות פיקסל קבועות
(כותרת 48px, כיתוב 96*0.75u, עמודה 580px) — ולכן הגוש הצטמצם ולא
התאים את עצמו לרוחב החלון. מה שחייב רצפת פיקסלים הוא רק הטקסט הקטן;
הכותרות גדולות מספיק כדי להישאר ביחידות הקובץ.
========================================================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
.b2b .b2b-hero__title {
font-size: calc(96 * var(--u));
line-height: 1.24;
}
.b2b-hero__title { width: calc(970 * var(--u)); }
.b2b-hero__lead { width: calc(718 * var(--u)); }
.b2b-hero__actions { width: auto; }
/* הכיתוב הלטיני: אותו גודל כמו הכותרת, יושב צמוד מעליה ומיושר לימין
כמו בקובץ — ולא ממורכז בעמוד ומוקטן ל-75%.
67u הוא בדיוק גובה התיבה שלו, כלומר בקובץ הוא נוגע בראש הכותרת;
164px הוא הריפוד העליון של ההירו בטווח הזה, שממנו מתחילה הכותרת. */
.b2b .b2b-hero__watermark {
font-size: calc(96 * var(--u));
top: calc(164px - 67 * var(--u));
/* 2.3vw הוא הפרש העוגן: בקובץ הכותרת נשענת על 83u מהשפה ובטווח
הזה על מרזב ה---b2b-g, ולכן הקיזוז של הפיגמה לבדו הותיר את הכיתוב
2.3vw שמאלה מהיחס שלו לכותרת. */
right: calc(202 * var(--u) - 2.3vw);
left: auto;
width: max-content;
max-width: none;
margin-right: calc(-42.24 * var(--u));
margin-left: 0;
text-align: right;
}
}
/* ==========================================================================
ההירו בלפטופ — המרווחים בעמודת התוכן
25 בין הכותרת לפסקה, 25 בין הפסקה לכפתורים, 60 בין הכפתורים לשורת נטפרי.
הפסקה מקבלת חיתוך דיו גם בתחתית: בלעדיו התיבה שלה נגמרת מתחת לאות
האחרונה, המרווח הנמדד יוצא אחר מזה שנכתב, והוא גם משתנה עם גודל הגופן.
עם החיתוך המרווח נמדד אות-לאות, ולכן ערך פיקסלים אחד מחזיק בדיוק את
אותם 25/25/60 בכל רוחב בטווח — נמדד ב-1024, ב-1366 וב-1439.
========================================================================== */
@media (min-width: 1024px) and (max-width: 1439px) {
.b2b-hero__lead {
text-box-trim: trim-both;
margin-top: 9px;
}
.b2b-hero__actions { margin-top: 41px; }
.b2b-hero__badge { margin-top: 50px; }
}