/* ==========================================================================
Defender V2 — מערכת עיצוב בהירה
למה בכלל V2: V1 המציא נייבי עמוק (#0D2340) וענבר (#F2A63C). **שניהם לא
קיימים במותג.** הלוגו הוא מגן אפור בהיר (#D9D9D9) עם וורדמארק בכחול
#4573B6 על לבן. V2 חוזר למותג האמיתי — בסיס בהיר, כחול המותג מוביל,
והמגן כמכשיר מבני ולא כקישוט.
הרעיון המבני נלקח מהלוגו עצמו: המגן בנוי **לוחות שכבתיים** עם תפר מרכזי.
מכאן מגיע כל העומק בעמוד — מישורים בהירים שחופפים זה את זה, כל אחד
שכבת כיסוי. לא צללים גנריים.
V1 נשאר שלם. שני הקבצים לא נוגעים זה בזה.
========================================================================== */
.v2 {
/* --- צבע. הערכים נדגמו מקובץ הלוגו, לא הומצאו. --- */
--w: #FFFFFF;
--bg: #FFFFFF; /* בסיס העמוד — לבן */
/* המשטח המשני. היה #F4F7FC — הפרש כה קטן מהלבן שקו המעבר הגלי פשוט
לא נראה, והמעבר קרא כשינוי גוון בקו ישר. הועמק כדי שהצורה תתפוס. */
--surface: #EBF1FA;
--tint: #E8EFF9; /* מילוי כחלחל רך */
--line: #D9E2F0; /* קווי שיער */
--shield: #D9D9D9; /* אפור המגן, מדויק מהלוגו */
--brand: #4573B6; /* הוורדמארק, מדויק מהלוגו · 4.79:1 על לבן */
--blue-600: #2F5794; /* 7.21:1 — קישורים, קיקרים */
--blue-800: #1D3763; /* 11.81:1 — כותרות */
--ink: #12203A; /* 16.24:1 — טקסט */
--body: #44536E; /* 7.75:1 — פסקאות */
--muted: #6B7891; /* 4.45:1 — רק על לבן או bg, לא על tint */
/* אקסנטים סמנטיים, מכוילים למשטח בהיר.
זהב = כסף ופעולה · טיל = צמיחה · אלמוג = פער וסיכון */
--gold: #9A6A10; /* 4.73:1 */
--teal: #0B7D74; /* 5.00:1 */
--coral: #C93C24; /* 5.05:1 */
--gold-fill: #F0A32E;
--teal-fill: #12A99C;
--coral-fill: #E4573B;
--accent: var(--brand);
/* --- טיפוגרפיה --- */
--f: "Google Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--fs-micro: 0.8125rem;
--fs-small: 0.9375rem;
--fs-body: 1.0625rem;
--fs-lead: clamp(1.1rem, 0.98rem + 0.8vw, 1.45rem);
--fs-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.6rem);
--fs-h2: clamp(1.75rem, 1.25rem + 2.4vw, 3rem);
--fs-fig: clamp(2.6rem, 1.4rem + 6vw, 5.5rem);
/* --- מרווח ---
שלוש המדרגות העליונות הודקו: 3.25/5.25/8 → 2.75/3.75/5.5.
הן ורק הן שולטות במרווח **בין** הסקשנים; המרווח **בתוך** הכרטיסים
(--s4, --s5) לא נגעו בו.
זה בדיוק ההבדל שמייצר את התחושה ההדוקה: נושמים פנימה, לא בין
הסקשנים. --s8 של 8rem נתן 128px למעלה ו-128 למטה — כלומר רבע מסך
ריק בין בלוק לבלוק, וזה מה שקרא כמרווח ולא כצפוף. */
--s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1.25rem;
--s5: 2rem; --s6: 2.75rem; --s7: 3.75rem; --s8: 5.5rem;
--shell: 1280px;
--gut: clamp(1.25rem, 0.6rem + 3vw, 3.25rem);
/* המרחק מקצה המסך אל קו ה-shell. מוצהר כאן ולא ב-:root כדי שייגזר
מ-`--shell` של V2 (1280) ולא מזה של V1 (1360). */
--edge: max(0px, calc((100vw - var(--shell)) / 2));
/* --- רדיוס. V2 מרשה עיגול רך — הלוגו עצמו עגול בקצוות. --- */
--r1: 6px; --r2: 14px; --r3: 24px;
/* --- הצללות: כחלחלות, לא אפורות. אפור על כחול קורא כלכלוך. --- */
--sh1: 0 1px 2px rgba(29, 55, 99, 0.06), 0 2px 8px rgba(29, 55, 99, 0.05);
--sh2: 0 2px 6px rgba(29, 55, 99, 0.07), 0 12px 28px rgba(29, 55, 99, 0.09);
--sh3: 0 4px 12px rgba(29, 55, 99, 0.09), 0 28px 60px rgba(29, 55, 99, 0.14);
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur: 260ms;
}
/* --------------------------------------------------------------------------
בסיס
-------------------------------------------------------------------------- */
body.v2 {
background: var(--bg);
color: var(--body);
font-family: var(--f);
font-size: var(--fs-body);
line-height: 1.7;
/* V1 שומר מקום לבר הצף במובייל. ל-V2 אין בר צף. */
padding-block-end: 0;
}
/* דריסות ל-V1 — הקובץ שלו נטען לפני, וכמה מהצהרות הבסיס שלו גלובליות. */
.v2 a { color: var(--blue-600); }
.v2 a:hover { text-decoration-color: var(--brand); }
.v2 :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.v2 ::selection { background: var(--brand); color: var(--w); }
/* ==========================================================================
חומת אש להירו
ההירו משותף ל-V1 ול-V2 ואסור לו להשתנות — הוא הדבר היחיד שאושר.
אבל v2.css נטען **אחרי** cinema.css, והסלקטורים שלו חזקים או שווים:
`.v2 h1` (0,1,1) מול `.hero--cinema h1` (0,1,1), ו-`.v2 a` (0,2,0)
מול `.btn-x--line` (0,1,0).
התוצאה בפועל: הכותרת קיבלה #12203A — נייבי כהה על צילום כהה, כלומר
נעלמה לגמרי. כפתור הוואטסאפ קיבל כחול כהה על זכוכית כהה. הקיקר קיבל
גלולה בהירה. **הבלוק הזה מחזיר להירו את הערכים של עצמו.**
========================================================================== */
.v2 .hero--cinema h1 { color: var(--c-white); }
.v2 .hero--cinema h1 em { color: var(--c-amber); }
.v2 .cinema__inner .lead { color: rgb(255 255 255 / 0.9); }
.v2 .cinema__inner .micro,
.v2 .cinema__disclosure { color: rgb(255 255 255 / 0.62); }
/* הגילוי הנאות — עוד דליפה של אותו סוג, ולקח שני סבבים לתפוס אותה.
`.v2 p { margin: 0 }` הוא (0,1,1) ו-`.cinema__disclosure` הוא (0,1,0),
ולכן ה-reset של V2 **ניצח את הרכיב** ואיפס לו את המרג'ין. שתי תוצאות:
השורה נצמדה לכפתורים (6px), ו-`margin-inline: auto` בוטל — כלומר תיבת
ה-58ch נדחפה לקצה ההתחלה ולא ישבה במרכז, למרות `text-align: center`
שכן עבד. הטקסט היה מיושר־למרכז בתוך תיבה שאינה במרכז.
(0,3,0) מחזיר לרכיב את שלו. */
.v2 .cinema__inner .cinema__disclosure {
margin-block-start: var(--s-6);
margin-inline: auto;
}
.v2 .cinema__inner .proof li { color: rgb(255 255 255 / 0.9); }
/* הקיקר בהירו הוא קו־טקסט־קו בענבר, לא גלולה. */
.v2 .cinema__inner .kicker {
background: none;
padding: 0;
border-radius: 0;
color: var(--c-amber);
}
.v2 .cinema__inner .kicker::before,
.v2 .cinema__inner .kicker::after {
inline-size: 26px;
block-size: 2px;
border-radius: 0;
background: currentColor;
}
/* `.v2 a` צבע את שני כפתורי ההירו בכחול העמוק של הגוף הבהיר.
4.8: מאז שהכפתור המלא כחול (בקשת ג'וני) הטקסט כאן לבן — הערך הקודם
(אינק, מעידן הזהב) הוא שגרם ל"טקסט נבלע בשחור" שג'וני ראה: החומה
הזו דרסה את הלבן שהוגדר ב-cinema.css. */
.v2 .btn-x--solid { color: var(--c-white); }
.v2 .btn-x--line { color: var(--c-white); }
.v2 .btn-x--line:hover { color: var(--c-ink-900); }
/* לינקי הניווט לא נפגעו — `.site-header--overlay .site-nav a` הוא (0,2,1)
ומנצח את `.v2 a`. לא לגעת: ה-color-mix שלהם הוא מה שמהפך אותם בגלילה. */
/* עוד קורבן של `.v2 a`: אייקון הוואטסאפ הצף (fill=currentColor) קיבל
כחול במקום הלבן שמוגדר ב-defender.css. ג'וני 4.8: ירוק נשאר, אייקון לבן. */
.v2 .rail__btn--wa,
.v2 .rail__btn--wa:hover,
.v2 .rail__btn--wa:focus-visible { color: var(--c-white); }
/* --- פוליש ההירו, בקשת ג'וני 4.8 אחה"צ ---
1. הכותרת בשתי שורות (ה-
בפאטרן); balance מנוטרל כדי שלא יילחם בו.
2. כל הזהב בהירו → כחול בהיר: ה-em בגרדיאנט (clip-text עם fallback),
הקיקר וריבועי ההוכחה בגוון אחיד מאותה משפחה.
3. עוד עובי (600) וגודל (עד 4.6rem) לכותרת, רווח מסודר מתחתיה.
4. הליד קטן ב-10% (1.35→1.22rem בתקרה). */
.v2 .hero--cinema h1 {
font-size: clamp(2.35rem, 1.2rem + 4.6vw, 4.6rem);
font-weight: 600;
text-wrap: initial;
margin-block-end: var(--s4);
}
.v2 .hero--cinema h1 em {
color: #A9C8F0;
background-image: linear-gradient(105deg, #D6E6FF 0%, #9CC0F0 48%, #6E9BD8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.v2 .hero--cinema .kicker--center { color: #A9C8F0; }
.v2 .hero--cinema .lead {
font-size: clamp(0.95rem, 0.85rem + 0.55vw, 1.22rem);
margin-block-start: var(--s2);
}
.v2 .hero--cinema .proof li::before { background: #8FB4E8; }
/* ג'וני 6.8: במובייל כל משפט של הכותרת יושב בשורה אחת. הגודל נגזר
מרוחב המסך — "ביטוח קונים פעם אחת." רחבה 10.27em (נמדד), והנוסחה
ממלאת בה את השורה בדיוק; הכותרת פורצת 8px מהגאטר מכל צד כדי להישאר
גדולה. אין nowrap בכוונה — אם הקופי ישתנה, העטיפה חוזרת טבעית. */
@media (max-width: 599px) {
.v2 .hero--cinema h1 {
font-size: clamp(1.9rem, calc((100vw - 26px) / 10.4), 2.9rem);
margin-inline: -8px;
}
}
/* --------------------------------------------------------------------------
ההדר מתכווץ בגלילה
`--hdr` כבר מונפש 0→1 על ציר הגלילה ורשום ב-`@property`, ולכן אפשר
לגזור ממנו גם מידות — בלי מאזין scroll ובלי מנגנון חדש.
לפני: 96px קבוע = 10.8% מהמסך, ולוגו 46px. ההיפוך החליף צבע בלבד.
אחרי: 96→68px ולוגו 46→32px. ההגדלה נחוצה מעל הצילום, לא אחריו.
רק ב-V2 בכוונה — V1 נשאר בדיוק כפי שהוא להשוואה.
-------------------------------------------------------------------------- */
.v2 .site-header--overlay .site-header__inner {
min-block-size: calc(var(--header-h) - var(--hdr) * clamp(10px, 1.9vw, 28px));
transition: min-block-size 120ms linear;
}
/* הלוגו בהדר הוחלף מהוורדמארק הרחב (673×170, יחס 3.96:1) ללוקאפ המלא
עם המגן (776×449, יחס 1.73:1) — אותו קובץ שיושב בפוטר.
**היחס השתנה פי יותר משניים, ולכן הגובה חייב לעלות.** באותו גובה
הלוקאפ היה יוצא פחות ממחצית הרוחב הקודם ונקרא כחותמת קטנה במקום
כלוגו. הערך העליון מוגבל ל-52px כי ההדר מתכווץ ל-68px בגלילה. */
.v2 .site-header--overlay .logo-swap img {
/* 4.8 ערב (ג'וני): הלוגו במצב הנגלל גדל ב-15% — ההקטנה בגלילה רוככה
(14→8px בקצה העליון), כך שהנגלל יוצא ~44px במקום 38 בתוך הדר 68px. */
block-size: calc(clamp(34px, 3.9vw, 52px) - var(--hdr) * clamp(0px, 0.55vw, 8px));
}
/* --------------------------------------------------------------------------
בר פעולה צף — מובייל בלבד
בדסקטופ ה-CTA יושב בהדר הדביק וזמין תמיד. במובייל הוא מוסתר, וב-V2
לא היה שום תחליף: **5,854px — שש מסכים וחצי — בלי דרך להמיר.**
-------------------------------------------------------------------------- */
.v2 .v2-float {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 50;
display: flex;
gap: var(--s2);
padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
background: rgb(255 255 255 / 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-block-start: 1px solid var(--line);
/* על עמוד בהיר הבר צריך להיקרא כמרחף מעל התוכן, לא כחלק ממנו. */
box-shadow: 0 -6px 24px rgba(29, 55, 99, 0.1);
}
.v2 .v2-float .b { flex: 1; padding-inline: var(--s3); box-shadow: none; }
@media (min-width: 900px) {
.v2 .v2-float { display: none; }
}
@media (max-width: 899px) {
body.v2 { padding-block-end: 5rem; }
}
.v2 h1, .v2 h2, .v2 h3, .v2 h4 {
color: var(--ink);
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.018em;
margin: 0;
text-wrap: balance;
}
.v2 h2 { font-size: var(--fs-h2); }
.v2 h3 { font-size: var(--fs-h3); }
.v2 .shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--gut);
}
.v2 .sec { position: relative; padding-block: var(--s7); }
@media (min-width: 900px) { .v2 .sec { padding-block: var(--s8); } }
/* --------------------------------------------------------------------------
משטח משני + המעברים בין הסקשנים
הבסיס לבן. סקשן שצריך להתנתק מקבל `--surface`, והמעבר אליו הוא **קו
המגן** — אותה צורה בדיוק שחותכת בין ההירו לגוף. שלוש נקודות גבוהות
ושני שקעים, נמתחת לרוחב המסך.
זו הסיבה שזה לא "גל" גנרי: הצורה כבר קיימת בעמוד פעם אחת כמכשיר מבני,
וכאן היא חוזרת. מהלך שחוזר הוא מערכת; מהלך שמופיע פעם אחת הוא קישוט.
**לא לפזר את זה על כל סקשן.** שני משטחים בעמוד — יותר מזה והעמוד
נקרא כגלי ים.
-------------------------------------------------------------------------- */
.v2 .sec--tint {
background: var(--surface);
/* מקום לגל בשני הקצוות, אחרת התוכן נכנס מתחתיו. */
padding-block: calc(var(--s7) + clamp(30px, 4vw, 62px));
}
@media (min-width: 900px) {
.v2 .sec--tint { padding-block: calc(var(--s8) + clamp(30px, 4vw, 62px)); }
}
.v2 .wave {
position: absolute;
inset-inline: 0;
z-index: 1;
display: block;
inline-size: 100%;
block-size: clamp(30px, 4vw, 62px);
pointer-events: none;
overflow: visible;
}
.v2 .wave__fill { fill: var(--bg); }
/* הקו הוא מה שהופך את המעבר לצורה במקום להפרש גוון. */
.v2 .wave__line { stroke: var(--line); stroke-width: 1.5; }
/* --- שבירה בלי הצפה ---
סקשן שהתוכן שלו כבר צבעוני בעצמו לא יכול לשבת על משטח צבוע — שש
כרטיסיות בזהב, טיל ואלמוג על תכלת הן ארבעה גוונים שמתחרים, והכרטיסים
נבלעים במקום לבלוט.
הפתרון: המשטח נשאר **לבן**, והשבירה מגיעה מהקו בלבד. הגל מצויר ולא
ממולא — עקומת המגן נמתחת מקצה לקצה ככחול המותג, והסקשן מסומן בבירור
בלי טיפת רקע. */
.v2 .sec--edge { background: var(--bg); padding-block: calc(var(--s7) + clamp(30px, 4vw, 62px)); }
@media (min-width: 900px) {
.v2 .sec--edge { padding-block: calc(var(--s8) + clamp(30px, 4vw, 62px)); }
}
.v2 .sec--edge > .shell { position: relative; z-index: 2; }
.v2 .sec--edge .wave__fill { fill: none; }
.v2 .sec--edge .wave__line { stroke: var(--brand); stroke-width: 2; opacity: 0.55; }
/* הנתיב ממלא את השטח **מתחת** לקו הגלי. בראש הסקשן רוצים את הלבן מעליו,
ולכן הוא מתהפך; בתחתית הוא נשאר כפי שהוא. */
.v2 .wave--top { inset-block-start: 0; transform: scaleY(-1); }
.v2 .wave--bot { inset-block-end: 0; }
/* התוכן מעל הגלים. */
.v2 .sec--tint > .shell { position: relative; z-index: 2; }
.v2 .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--body); max-inline-size: 44rem; }
.v2 .micro { font-size: var(--fs-micro); line-height: 1.5; color: var(--muted); }
.v2 p { margin: 0; }
.v2 p + p { margin-block-start: var(--s4); }
/* קיקר עם נקודה — קטן, ברור, וחוזר בכל סקשן */
.v2 .kicker {
display: inline-flex;
align-items: center;
gap: var(--s2);
margin-block-end: var(--s4);
padding: 0.32rem 0.8rem 0.32rem 0.55rem;
background: var(--tint);
border-radius: 999px;
font-size: var(--fs-micro);
font-weight: 500;
color: var(--blue-600);
}
.v2 .kicker::before {
content: "";
inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background: currentColor;
flex: none;
}
/* --------------------------------------------------------------------------
ראש סקשן — ממורכז, בלי קיקר
היו כאן שני דברים שהוסרו יחד ולא במקרה:
1. **הקיקר.** תווית קטנה מעל כל כותרת בעמוד. שבע פעמים ברצף היא מפסיקה
להיות דגש והופכת לרעש — הקורא לומד לדלג עליה, והיא רק דוחפת את
הכותרת האמיתית מטה. הכותרת עצמה כבר אומרת מה הסקשן.
**המחלקה `.kicker` נשארת מוגדרת** כי ההירו משתמש בה, והוא אושר.
2. **`--split`** — כותרת בעמודה אחת וליד בשנייה. זה קרא כשתי ידיעות
נפרדות ולא כראש אחד, ובעברית הוא גם דחף את הליד לקצה הרחוק מכיוון
הקריאה. עכשיו: כותרת וליד ממורכזים, אחד מתחת לשני.
המרכוז הוא ל-`.shell > .sec-head` בלבד — ראש שיושב בתוך פריסת שתי
עמודות (`.who`) חייב להישאר מיושר להתחלה, אחרת הוא מתנתק מהעמודה שלו.
-------------------------------------------------------------------------- */
/* הפס הכתום מעל כל כותרת בא מ-`.sec-head::before` ב-defender.css — קטע
של 84px באקסנט, שריד מהמערכת של V1 שבה הראש היה מיושר להתחלה. מעל
כותרת **ממורכזת** הוא נשאר תקוע בקצה ההתחלה ונקרא כשארית, לא כמהלך.
מבוטל, יחד עם קו השיער שנשא אותו. */
.v2 .sec-head {
max-inline-size: 46rem;
margin-block-end: var(--s6);
padding-block-start: 0;
border-block-start: 0;
}
.v2 .sec-head::before { content: none; }
.v2 .sec-head h2 { margin-block-end: var(--s4); }
.v2 .sec-head > :last-child { margin-block-end: 0; }
.v2 .shell > .sec-head,
.v2 .figure-panel .sec-head {
text-align: center;
margin-inline: auto;
}
/* ל-`.lead` יש `max-inline-size` משלו, ולכן `text-align` לבדו לא ממרכז
את התיבה שלו — רק את הטקסט בתוכה. */
.v2 .shell > .sec-head .lead,
.v2 .figure-panel .sec-head .lead { margin-inline: auto; }
/* שורת הפעולות הולכת אחרי הראש. ראש ממורכז עם כפתורים בקצה קורא כשבור. */
.v2 .b-row { justify-content: center; }
.v2 .num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------------------
טקסט רץ — עמודי מדיניות והצהרות
מידה בסיסית לעמודים שהם טקסט ותו לא. **זה לא עדיין תבנית עמוד המאמר**
(שדורשת תוכן עניינים, פירורי לחם, טבלאות וקופסאות הדגשה) — רק הבסיס
שמאפשר לעמוד משפטי להיקרא.
-------------------------------------------------------------------------- */
.v2 .prose { max-inline-size: 46rem; margin-inline: auto; }
.v2 .prose h3 { margin-block: var(--s6) var(--s3); font-size: var(--fs-h3); }
.v2 .prose h3:first-child { margin-block-start: 0; }
.v2 .prose p + p { margin-block-start: var(--s4); }
.v2 .prose ul { margin: var(--s4) 0 0; padding-inline-start: var(--s4); display: grid; gap: var(--s3); }
.v2 .prose li { line-height: 1.65; }
.v2 .prose li::marker { color: var(--brand); }
/* --------------------------------------------------------------------------
כפתורים
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
מערכת כפתורים אחת
היו כאן שתי מערכות שעושות את אותה עבודה: ההירו והדר בגרדיאנט ענבר,
וגוף העמוד בכחול מלא — עם שלושה גבהים ושלושה גדלי גופן שנקבעו כל אחד
בנפרד. זה מה שגרם לעמוד להיקרא כשני אתרים.
**חלוקת התפקידים, וזה הכלל שמחזיק הכל:**
ענבר = פעולה. זה הדבר היחיד בענבר בעמוד, ולכן הוא נמצא מיד.
כחול = המותג והמבנה. הוא בכל מקום, ולכן הוא לא יכול להיות גם ה-CTA.
טיל/אלמוג = זהות קטגוריה ברצועות, לא פעולה.
**וצורה:** פעולות הן פילים · שורות ניווט הן מלבנים מעוגלים. ההבדל
מכוון ומאפשר להבחין בין "לחץ כדי לעשות" ל"לחץ כדי לעבור".
שלוש מידות **מוצהרות**, לא שלוש מידות מקריות.
-------------------------------------------------------------------------- */
.v2 .b {
--bh: 3.15rem;
--bfs: var(--fs-small);
--bpx: 1.7rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
min-block-size: var(--bh);
padding-inline: var(--bpx);
padding-block: 0;
border: 1px solid transparent;
border-radius: 999px;
font: inherit;
font-size: var(--bfs);
font-weight: 500;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
color var(--dur) var(--ease);
}
.v2 .b:hover { text-decoration: none; transform: translateY(-2px); }
.v2 .b:active { transform: translateY(0); }
.v2 .b--lg { --bh: 3.6rem; --bfs: 1rem; --bpx: 2.4rem; }
.v2 .b--sm { --bh: 2.5rem; --bfs: var(--fs-micro); --bpx: 1.15rem; }
/* הראשי — אותו גרדיאנט, אותו זוהר ואותו לוגיקת אפקטים כמו ההירו.
4.8, בקשת ג'וני: כחולים בסגנון הלוגו במקום הזהב, טקסט לבן.
נבדק לאורך כל הגרדיאנט מול טקסט לבן: 4.79 · 7.21 · 11.81 ✓
הריחוף מכהה ולא מבהיר — כחול בהיר מפיל את הלבן מתחת ל-AA. */
.v2 .b--fill {
background-image: linear-gradient(103deg, #4573B6 0%, #2F5794 50%, #1D3763 100%);
color: var(--w);
box-shadow:
0 14px 32px -12px rgb(29 55 99 / 0.55),
inset 0 1px 0 rgb(255 255 255 / 0.5);
}
.v2 .b--fill:hover {
background-image: linear-gradient(103deg, #3E69AC 0%, #28497E 50%, #16294A 100%);
box-shadow:
0 20px 44px -12px rgb(29 55 99 / 0.7),
inset 0 1px 0 rgb(255 255 255 / 0.6);
}
/* המשני מסתגל למשטח: על בהיר הוא כרטיס לבן, על כהה הוא זכוכית —
בדיוק כמו כפתור הוואטסאפ בהירו. אותו רכיב, שני הקשרים. */
.v2 .b--line { background: var(--w); border-color: var(--line); color: var(--ink); box-shadow: var(--sh1); }
.v2 .b--line:hover { border-color: var(--brand); color: var(--blue-600); }
.v2 .figure-panel .b--line,
.v2 .hub .b--line,
.v2 .v2-float .b--line {
background: rgb(255 255 255 / 0.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-color: rgb(255 255 255 / 0.5);
color: var(--w);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2);
}
.v2 .figure-panel .b--line:hover,
.v2 .hub .b--line:hover { background: rgb(255 255 255 / 0.24); border-color: var(--w); color: var(--w); }
/* הבר הצף יושב על לבן — שם המשני חוזר להיות כרטיס. */
.v2 .v2-float .b--line { background: var(--w); border-color: var(--line); color: var(--ink); backdrop-filter: none; box-shadow: none; }
.v2 .b-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 599px) { .v2 .b-row .b { inline-size: 100%; } }
/* --- יישור כפתורי ההירו לאותה סקאלה ---
.btn-x יושב ב-cinema.css ומשותף ל-V1. כאן רק מיישרים לו את המידות
לאותן שלוש מדרגות, בלי לגעת בצבע או בהתנהגות שאושרו. */
.v2 .btn-x { min-block-size: 3.6rem; padding-block: 0; padding-inline: 2.4rem; font-size: 1rem; }
.v2 .site-header__cta.btn-x { min-block-size: 2.5rem; padding-inline: 1.15rem; font-size: var(--fs-micro); }
/* --------------------------------------------------------------------------
המגן — המכשיר המבני של V2
הצורה מגיעה מקובץ הלוגו. שלוש נקודות גבוהות ושני שקעים ביניהן.
היא מופיעה בשלושה תפקידים: מעבר בין סקשנים, סימן מים בקנה מידה ענק,
וצורת מסגרת.
-------------------------------------------------------------------------- */
/* המעבר: הגוף הבהיר "עולה" דרך קו המגן ומכסה את תחתית ההירו. */
.v2 .shield-cut {
position: relative;
z-index: 3;
display: block;
inline-size: 100%;
block-size: clamp(38px, 5.5vw, 78px);
margin-block-start: calc(-1 * clamp(38px, 5.5vw, 78px));
fill: var(--bg);
pointer-events: none;
}
/* סימן מים. `overflow: hidden` על ההורה הוא חובה — הוא חורג בכוונה. */
.v2 .shield-mark {
position: absolute;
z-index: 0;
pointer-events: none;
opacity: 0.07;
fill: currentColor;
}
/* התוכן מעל סימן המים.
`:not(.shield-mark)` ולא `> *` — הכלל הרחב היה בעל אותה ספציפיות בדיוק
כמו `.v2 .shield-mark` והוצהר אחריו, ולכן דרס לו את `position: absolute`.
ה-SVG הפך לפריט פלקס בגובה 285px ודחף את כל תוכן הרצועה כלפי מטה. */
.v2 .hub > :not(.shield-mark),
.v2 .step > :not(.shield-mark),
.v2 .figure-panel > :not(.shield-mark),
.v2 .foot > :not(.shield-mark) {
position: relative;
z-index: 1;
}
/* --------------------------------------------------------------------------
כרטיס — הלוח. יחידת הבסיס של V2.
-------------------------------------------------------------------------- */
.v2 .card {
position: relative;
background: var(--w);
border: 1px solid var(--line);
border-radius: var(--r2);
box-shadow: var(--sh1);
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.v2 .card--lift:hover { transform: translateY(-4px); box-shadow: var(--sh2); }
/* --------------------------------------------------------------------------
רצועת ההוכחה — חופפת את גבול ההירו
הכרטיס עולה אל תוך ההירו. זה מה שקושר את שני החצאים במקום להניח
אותם זה על זה.
-------------------------------------------------------------------------- */
.v2 .proof-strip { position: relative; z-index: 4; margin-block-start: calc(-1 * var(--s6)); }
.v2 .proof-strip__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1px;
overflow: hidden;
background: var(--line);
border-radius: var(--r3);
box-shadow: var(--sh3);
}
@media (min-width: 760px) { .v2 .proof-strip__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2 .proof-cell { background: var(--w); padding: var(--s5) var(--s4); text-align: center; }
.v2 .proof-cell > b {
display: block;
font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
color: var(--brand);
}
.v2 .proof-cell > span { display: block; margin-block-start: var(--s2); font-size: var(--fs-small); color: var(--muted); }
/* --------------------------------------------------------------------------
רצועת חברות הביטוח
**הרצועה הזו היא מוקאפ.** הסימנים כאן הם וורדמארקים טיפוגרפיים שנבנו
מהפונט של האתר — לא קובצי הלוגו האמיתיים. ראה `v2-carriers.php` להסבר
ולנוהל ההחלפה.
מבנית: שורה שקטה, אפורה, בלי קופסאות. רצועת לוגואים היא סיגנל אמון
ולכן היא חייבת להיקרא כרקע ולא כתוכן — ברגע שהיא צבעונית ומודגשת היא
מתחרה בכותרת שמעליה. הצבע חוזר רק בריחוף.
-------------------------------------------------------------------------- */
.v2 .carriers { text-align: center; }
.v2 .carriers__cap {
font-size: var(--fs-micro);
color: var(--muted);
margin-block-end: var(--s5);
}
/* 24.9: 18 חברות — שורה עוטפת הייתה נשברת לשלוש שורות. במקומה לופ
אינסופי (כמו ההמלצות), עם דהייה בקצוות. */
.v2 .carriers__rail {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.v2 .carriers__track {
display: flex;
inline-size: max-content;
animation: v2-quotes-loop 60s linear infinite;
}
.v2 .carriers__rail:hover .carriers__track { animation-play-state: paused; }
.v2 .carriers__row {
display: flex;
flex: none;
align-items: center;
gap: clamp(2.25rem, 4.5vw, 3.75rem);
list-style: none;
margin: 0;
padding: var(--s2) 0 var(--s2) clamp(2.25rem, 4.5vw, 3.75rem);
}
@media (prefers-reduced-motion: reduce) {
.v2 .carriers__track { animation: none; inline-size: auto; flex-wrap: wrap; justify-content: center; }
.v2 .carriers__row { flex-wrap: wrap; justify-content: center; row-gap: var(--s4); }
.v2 .carriers__row[aria-hidden] { display: none; }
.v2 .carriers__rail { -webkit-mask-image: none; mask-image: none; }
}
html[data-motion="off"] .v2 .carriers__track { animation: none !important; }
/* --- הלוגואים ---
שש חברות, שש פלטות שאין ביניהן שום קשר: הראל ירוק־כחול־צהוב, מגדל
נייבי, כלל שני כחולים, הפניקס כתום־נייבי, מנורה גרדיאנט בורדו־זהב,
איילון סגול כהה. שש הצבעות מלאות בשורה אחת **מתחרות בכל מה שמעליהן**
ומושכות את העין מהכותרת אל רצועה שהיא סיגנל רקע.
לכן: גווני אפור בשקט, וצבע מלא בריחוף. זה הסטנדרט ברצועות לוגואים
בדיוק מהסיבה הזו — הרצועה אומרת "אנחנו עובדים מול השוק" בלי לצעוק,
ומי שמחפש חברה מסוימת מוצא אותה.
`grayscale` לבדו משאיר את ההבדלי בהירות (הזהב של מנורה נשאר בהיר
משמעותית מהנייבי של מגדל), ולכן מתווסף `contrast` שמכווץ את הטווח. */
.v2 .carrier { display: inline-flex; align-items: center; }
.v2 .carrier img {
display: block;
/* +10% לבקשת ג'וני (4.8): 24/2.6vw/34 → 26/2.9vw/37. */
block-size: calc(clamp(26px, 2.9vw, 37px) * var(--s, 1));
inline-size: auto;
max-inline-size: 100%;
filter: grayscale(1) contrast(0.32) brightness(1.06) opacity(0.72);
transition: filter var(--dur) var(--ease);
}
.v2 .carrier:hover img,
.v2 .carrier:focus-within img { filter: none; }
/* בלי `prefers-reduced-motion` אין כאן תנועה בכלל, אז אין מה לכבות —
אבל במצב ניגודיות גבוהה הפילטר חייב לרדת, אחרת הלוגואים נמחקים. */
@media (prefers-contrast: more) {
.v2 .carrier img { filter: none; }
}
.v2 .carriers__note { margin-block-start: var(--s4); }
/* --------------------------------------------------------------------------
הצעדים
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
שלושת הצעדים — רצף על קו, לא שלוש קופסאות
קודם ישבו כאן שלושה כרטיסים לבנים זהים עם עיגול ומספר — התבנית הגנרית
ביותר בעמוד, במיקום החזק ביותר שלו (מיד אחרי ההירו). הבריף אוסר
במפורש *"אין שורות של כרטיסים זהים, אין קופסאות בתוך קופסאות"*.
במקום: הצעדים תלויים מקו שיער, כל אחד עם כובע צבוע בהתחלה שלו —
אותו אידיום בדיוק כמו `sec-head`, ולכן זה קורא כמערכת ולא כרעיון חדש.
הספרה גדולה ונושאת את המקצב.
-------------------------------------------------------------------------- */
.v2 .steps {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s5);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 820px) {
.v2 .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4.5rem); }
}
.v2 .step {
position: relative;
padding-block-start: var(--s4);
border-block-start: 2px solid var(--line);
}
/* הכובע הצבוע. הראשון בענבר — הוא הפעולה שמתחילה את הרצף. */
.v2 .step::before {
content: "";
position: absolute;
inset-block-start: -2px;
inset-inline-start: 0;
inline-size: 64px;
block-size: 2px;
background: var(--brand);
}
.v2 .step:first-child::before { background: var(--gold-fill); }
.v2 .step__n {
display: block;
margin-block-end: var(--s2);
font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.2rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: var(--brand);
}
.v2 .step h3 { margin-block-end: var(--s3); }
.v2 .step p { font-size: var(--fs-small); line-height: 1.65; }
/* --------------------------------------------------------------------------
הכפילות — הקיר, נמדד פעמיים
מה היה כאן: טבלת מפרט עם שורה מחוקה. היא נכונה אבל היא **טבלה** — הקורא
צריך לקרוא שתי שורות, להשוות מחירים ולהסיק בעצמו מה הבעיה. הכותרת אומרת
"אותו קיר" והעין לא רואה שום קיר.
מה שיש כאן עכשיו: הקיר עצמו, ושני **קווי מידה** אדריכליים שמודדים אותו —
אחד מלמעלה ואחד מלמטה. שני הקווים משתרעים על אותו רוחב בדיוק, וזה כל
הטיעון: אותו קיר, נמדד פעמיים, שולם פעמיים. אין צורך במילה נוספת.
קו המידה הוא ציטוט מכוון משפת השרטוט — והוא מתחבר לבימוי הצילומי של
האתר (בטון, טיח, אבן). הקו התחתון מקווקו ובאלמוג: אלמוג = פער, לפי
חוזה הבימוי. הקיר הוא SVG pattern ולא תמונה — אפס בייטים של מדיה,
ובדיוק כמו הרכס של V1 הוא גיאומטריה מחושבת.
-------------------------------------------------------------------------- */
/* הקיר צריך להיקרא כקיר, לא כלוח. ברוחב מלא של 1280 הוא היה משטח ריק
ענק עם תווית בכל קצה — והמידה מפסיקה לקרוא כמידה כשהיא ארוכה פי שלושה
מהגובה שהיא מודדת. */
.v2 .wall-fig { margin-inline: auto; max-inline-size: 54rem; }
.v2 .wall {
display: block;
inline-size: 100%;
block-size: clamp(96px, 10vw, 136px);
border-radius: var(--r1);
overflow: hidden;
/* הטיח שבין הלבנים הועמק, ונוסף לו מקור אור חם אחד מצד ההתחלה —
ציטוט ישיר מחוזה הבימוי הצילומי (V2 §הגיאומטריה הטוענת). בלי זה
הקיר נקרא כקופסה ריקה, והכותרת אומרת "קיר" בלי שהעין רואה קיר.
`to left` = הצד הימני, קצה ההתחלה ב-RTL. */
background:
linear-gradient(to left, rgba(240, 163, 46, 0.32), rgba(240, 163, 46, 0) 46%),
#A9BEDC;
}
/* שקיפות קלה — האור החם מבצבץ דרך הלבנים הסמוכות למקור, כמו טיח שבולע
אור, לא כמו שכבה שצוירה מעל. */
.v2 .wall .brick { fill: rgb(239 244 250 / 0.93); }
/* קו המידה: שני שנצים בקצוות וקו ביניהם. `border-inline` נותן את השנצים
ו-`::before` את הקו — בלי שלושה אלמנטים ריקים ב-DOM. */
.v2 .wall-brace {
position: relative;
block-size: 14px;
border-inline: 2px solid currentColor;
}
.v2 .wall-brace::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: 50%;
block-size: 2px;
background: currentColor;
transform: translateY(-50%);
}
.v2 .wall-brace--keep { color: var(--brand); margin-block: var(--s2) var(--s3); }
.v2 .wall-brace--dupe { color: var(--coral-fill); margin-block: var(--s3) var(--s2); }
/* הקו הכפול מקווקו — ההבדל נקרא גם בלי צבע, וזה מה שמחזיק אותו נגיש. */
.v2 .wall-brace--dupe::before {
block-size: 0;
background: none;
border-block-start: 2px dashed currentColor;
}
.v2 .wall-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--s2) var(--s4);
}
.v2 .wall-row b { font-size: var(--fs-body); font-weight: 500; color: var(--ink); }
.v2 .wall-row .sub { font-size: var(--fs-micro); color: var(--muted); }
/* המחיר הוא הנתון שהסקשן טוען עליו — הוא מקבל את המשקל, לא השם. */
.v2 .wall-row .price { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); font-weight: 700; color: var(--ink); white-space: nowrap; }
.v2 .wall-row--dupe b,
.v2 .wall-row--dupe .price { color: var(--coral); }
.v2 .wall-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.v2 .tag {
flex: none;
padding: 0.18rem 0.55rem;
border-radius: 999px;
background: var(--coral-fill);
color: var(--w);
font-size: 0.6875rem;
font-weight: 700;
line-height: 1.5;
}
/* התוצאה — ממורכזת מתחת לשרטוט, וברוחב **זהה לו**. בלי ה-`max-inline-size`
היא נמתחה על 1280 בזמן שהשרטוט מעליה יושב על 54rem, ושתי קצוות לא
מיושרים במרכז העמוד נקראים כתקלה. */
.v2 .saving {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: var(--s3);
max-inline-size: 54rem;
margin-inline: auto;
margin-block-start: var(--s6);
padding: var(--s4) var(--s5);
border-radius: var(--r1);
background: linear-gradient(100deg, #FFF6E6, #FFFCF4);
border: 1px solid #F3DFB8;
text-align: center;
}
.v2 .saving > b { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 700; line-height: 1.1; color: var(--gold); }
.v2 .saving > span { font-size: var(--fs-small); color: var(--body); }
.v2 .note { padding: var(--s5); border-inline-start: 3px solid var(--brand); background: var(--tint); border-radius: var(--r1); }
/* --------------------------------------------------------------------------
החשבון — פאנל גרדיאנט, לא שטח נייבי שטוח
-------------------------------------------------------------------------- */
/* הפאנל היה **המסך הכי גבוה בעמוד**: פדינג `--s8` למעלה ולמטה, מספרים עד
5.5rem, ושלושה מוכפלים שיושבים בשורה משלהם ואז תוצאה בשורה נפרדת מתחת
לקו מפריד. חמישה בלוקים אנכיים בשביל תרגיל כפל אחד.
עכשיו: **התרגיל כולו הוא שורה אחת** — 40–70 ₪ × 12 × 25 = 15,000–20,000 ₪.
התוצאה היא איבר רביעי באותו רצף במקום מסקנה בקומה נפרדת, והמספרים ירדו
ל-2.9rem. אותו תוכן בדיוק, בערך שליש מהגובה. */
.v2 .figure-panel {
position: relative;
overflow: hidden;
padding: var(--s6) var(--s5);
border-radius: var(--r3);
background:
radial-gradient(120% 140% at 88% 8%, rgba(120, 178, 255, 0.42) 0%, rgba(120, 178, 255, 0) 55%),
radial-gradient(90% 120% at 6% 92%, rgba(18, 169, 156, 0.3) 0%, rgba(18, 169, 156, 0) 55%),
linear-gradient(140deg, #2C5390 0%, #1D3763 55%, #16294A 100%);
color: var(--w);
box-shadow: var(--sh3);
}
@media (min-width: 900px) { .v2 .figure-panel { padding: var(--s7) var(--s6); } }
.v2 .figure-panel h2 { color: var(--w); font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem); }
.v2 .figure-panel .sec-head { margin-block-end: var(--s5); }
.v2 .figure-panel .lead { color: #C6D6EE; font-size: var(--fs-body); max-inline-size: 40rem; }
.v2 .figure-panel .micro { color: rgba(255, 255, 255, 0.62); }
.v2 .figure-panel .shield-mark { inset-block-start: -18%; inset-inline-start: -8%; inline-size: 46%; color: var(--w); opacity: 0.06; }
/* התרגיל: ארבעה איברים בשורה אחת, מופרדים בסימני `×` ו-`=` שמוזרקים
ב-CSS. במובייל זה נשבר לשתי עמודות והסימנים נעלמים — שם הרצף האנכי
קריא בלעדיהם. */
.v2 .eq {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s4) var(--s5);
margin-block: var(--s5);
padding-block: var(--s5);
border-block: 1px solid rgba(255, 255, 255, 0.18);
}
@media (min-width: 860px) {
.v2 .eq {
grid-template-columns: repeat(4, minmax(0, auto));
justify-content: space-between;
align-items: baseline;
gap: clamp(1.25rem, 3vw, 2.75rem);
}
}
.v2 .op { position: relative; }
@media (min-width: 860px) {
.v2 .op + .op::before {
content: "×";
position: absolute;
inset-inline-end: calc(-1 * clamp(1.25rem, 3vw, 2.75rem) / 2);
inset-block-start: 0.32em;
transform: translateX(50%);
color: rgba(255, 255, 255, 0.42);
font-size: clamp(1rem, 0.7rem + 0.7vw, 1.4rem);
line-height: 1;
}
/* חייב להיות `.op + .op--res` ולא `.op--res` לבדו: הכלל של ה-`×` הוא
(0,3,1) ו-`.v2 .op--res::before` הוא (0,2,1) — כלומר ה-`×` ניצח
וסימן השוויון פשוט לא הופיע. התרגיל נקרא …× 25 × 15,000. */
.v2 .op + .op--res::before { content: "="; }
}
.v2 .op > b {
display: block;
font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.9rem);
font-weight: 700;
line-height: 0.95;
letter-spacing: -0.035em;
color: var(--w);
white-space: nowrap;
}
.v2 .op > span { display: block; margin-block-start: var(--s2); font-size: var(--fs-micro); color: #A9C0E0; }
/* האיבר הרביעי הוא התשובה, ולכן הוא היחיד בזהב. */
.v2 .op--res { grid-column: span 2; }
@media (min-width: 860px) { .v2 .op--res { grid-column: auto; } }
/* התוצאה ארוכה משמעותית משאר האיברים (15,000–20,000 ₪ מול 12), ולכן היא
יורדת מדרגה בגודל. בלי זה היא לבדה קובעת את רוחב השורה. */
.v2 .op--res > b { font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem); color: var(--gold-fill); }
.v2 .op--res > span { color: #D8C08C; }
/* --------------------------------------------------------------------------
מצבי חיים — סט הצילומים המבוים
חוזה V2 §שכבת הצילום: הדיאגרמות הוחלפו בצילומים. שש דיאגרמות ברצף
קראו כוויירפריים באמצע עמוד קולנועי; הצילום (state-*) הופק בדיוק
לסקשן הזה. הדיאגרמות ממתינות לעמודי המאמר — כללי `.fig__svg` בהמשך
הקובץ נשארים בשבילן בכוונה.
-------------------------------------------------------------------------- */
.v2 .states { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 680px) { .v2 .states { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .v2 .states { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
/* --------------------------------------------------------------------------
זהות צבע לכל מצב חיים
שש קופסאות זהות הן בדיוק מה שחוזה הבימוי אוסר (*"אין שורות של כרטיסים
זהים"*), וזה היה הבלוק הכי תבניתי שנשאר בעמוד.
הצבע כאן **סמנטי ולא דקורטיבי**, לפי אותה חלוקה של שלושת האקסנטים:
זהב = כסף ופעולה → משכנתא, כסף נזיל
טיל = צמיחה וצבירה → עצמאי, פרישה
אלמוג = פער וסיכון → משפחה (מישהו תלוי בכם), עבודה חדשה (כפילות)
שניים מכל אחד, ולכן השורה מאוזנת ולא נראית כמו פלטת צבעים אקראית.
⚠️ **הגוון יושב על הכרטיס ולא על פאנל הדיאגרמה, וזה לא שרירותי.**
הדיאגרמות משתמשות ב-`--gold-fill` #F0A32E, ועל רקע בז׳ בהיר הוא נופל
ל-1.9:1 — בדיוק המלכודת המתועדת "ענבר על נייר נופל". לכן פאנל
הדיאגרמה נשאר קר ובהיר, והצבע מגיע מהכרטיס, מהכובע, מהמספר ומהחץ.
-------------------------------------------------------------------------- */
.v2 .state--gold { --st: #F0A32E; --st-ink: #8A5C0D; --st-bg: #FDF5E8; }
.v2 .state--teal { --st: #12A99C; --st-ink: #0B7D74; --st-bg: #E9F7F5; }
.v2 .state--coral { --st: #E4573B; --st-ink: #B4381F; --st-bg: #FDEFEB; }
/* הגוף לבן — הצילום נושא את הצבע, והאקסנט יושב בכובע, במספר ובחץ בלבד
(חוזה V2 §צבע). --st-bg נשאר מוגדר לשימוש הדיאגרמות בעמודי המאמר. */
.v2 .state {
position: relative;
display: block;
overflow: hidden;
color: inherit;
text-decoration: none;
background: var(--w);
}
.v2 .state:hover { text-decoration: none; }
/* הכובע הצבוע — אותו אידיום בדיוק כמו הצעדים, ולכן זה נקרא כמערכת. */
.v2 .state::before {
content: "";
position: absolute;
z-index: 3;
inset-block-start: 0;
inset-inline: 0;
block-size: 3px;
background: var(--st, var(--brand));
}
/* פאנל הצילום. `.ph` על אותו אלמנט מספק את רקע האינק (מציב מקום כהה
בזמן טעינת lazy), את שכבת האינק ואת הגריין — אותו טיפול כמו כל צילום. */
.v2 .state__fig {
position: relative;
aspect-ratio: 4 / 3;
}
.v2 .state__fig > img { transition: transform 700ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
.v2 .state:hover .state__fig > img,
.v2 .state:focus-visible .state__fig > img { transform: scale(1.045); }
}
.v2 .state__body { padding: var(--s5); }
.v2 .state h3 { display: flex; align-items: baseline; gap: var(--s2); margin-block-end: var(--s2); }
.v2 .state h3::after { content: "←"; color: var(--st-ink, var(--brand)); transition: transform 320ms var(--ease); }
.v2 .state:hover h3::after { transform: translateX(-0.35em); }
.v2 .state p { font-size: var(--fs-small); line-height: 1.6; color: var(--body); }
.v2 .state__n {
position: absolute;
/* מעל שכבת הגריין של `.ph` (z-index 2) — אחרת הגלולה מקבלת רעש. */
z-index: 3;
inset-block-start: var(--s3);
inset-inline-start: var(--s3);
padding: 0.2rem 0.55rem;
border-radius: 999px;
background: var(--w);
box-shadow: var(--sh1);
color: var(--st-ink, var(--blue-600));
font-size: 0.75rem;
font-weight: 700;
line-height: 1.5;
}
/* הדיאגרמות עוברות למשטח בהיר. אותן מחלקות בדיוק כמו ב-V1, רק שהצבעים
מכוילים מחדש — הפאנל כאן הוא tint בהיר ולא ink-900.
קונטרסט מול #E8EFF9: brand 4.14:1 ✓ · gold 4.08:1 ✓ · הקו המקווקו 3.8:1 */
.v2 .fig__svg .base { stroke: var(--brand); stroke-width: 1; opacity: 0.35; }
.v2 .fig__svg .b { fill: var(--brand); }
.v2 .fig__svg .d { fill: #A9C2E4; }
.v2 .fig__svg .o { fill: none; stroke: #7E9CC8; stroke-width: 2; stroke-dasharray: 7 6; }
.v2 .fig__svg .a { fill: var(--gold-fill); filter: none; }
.v2 .fig__svg .a-ghost { fill: rgba(240, 163, 46, 0.22); }
.v2 .fig__svg .ln { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linejoin: round; }
.v2 .fig__svg .ln-a,
.v2 .fig__svg .arrow-a,
.v2 .fig__svg .tick-a { fill: none; stroke: var(--gold-fill); stroke-width: 6; stroke-linecap: square; filter: none; }
.v2 .fig__svg .tick-a { stroke-width: 4; }
.v2 .fig__svg .arrow-a { stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.v2 .fig__svg { display: block; inline-size: 100%; block-size: 100%; }
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.v2 .fig__svg rect {
transform-box: fill-box;
transform-origin: 50% 100%;
animation: v2-fig linear both;
animation-timeline: view();
animation-range: entry calc(12% + var(--i, 0) * 3.5%) entry calc(44% + var(--i, 0) * 3.5%);
}
@keyframes v2-fig {
from { transform: scaleY(0); opacity: 0; }
to { transform: none; opacity: 1; }
}
}
}
/* --------------------------------------------------------------------------
רצועות ה-Hubs — צבע מותג רווי כרקע של סקשנים שלמים
זה מה שהאיפיון ביקש מפורשות ו-V1 לא עשה: שם האקסנטים היו קווי שיער
של 3 פיקסל והרקע נשאר נייבי אחיד.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
רצועות ה-Hubs — חזרה לשלד של V1, עם הצבע הרווי של V2
מה היה כאן: שלוש עמודות צבע צמודות בגובה אחיד. הבעיה היא שלוש בבת אחת —
כל רצועה מקבלת שליש מסך, הכותרת נחנקת, שש שורות הקישורים של המוצרים
דוחפות את הגובה, ושלושת הגרדיאנטים הרוויים מתנגשים זה בזה על אותו קו.
מה שחוזר: **השלד של V1** — רצועה אחת לכל תחום, ברוחב מלא, הצילום זולג
עד קצה המסך והטקסט נשאר על קו ה-shell, והצד מתחלף בין רצועה לרצועה.
זה נותן לכל תחום מסך משלו ומחזיר את הצילומים לעמוד.
מה שנשאר מ-V2: **הצבע הרווי ממלא את הרצועה כולה** — זה מה שהאיפיון
ביקש מפורשות ו-V1 לא עשה. כלומר לא בחירה בין השניים אלא הצירוף:
פריסת V1, צבע V2.
-------------------------------------------------------------------------- */
/* --- הרצועות בהירות, לא מוצפות ---
הפריסה נשארה (צילום מול טקסט, הצד מתחלף) — היא עבדה. מה שלא עבד הוא
**ההצפה**: שלוש רצועות רוויות ברוחב מלא, 1,900px של צבע רציף, בין
הירו כהה לסקשן סגירה כהה. הטקסט והקישורים נבלעו בתוך הרקע שלהם, ומה
שנשאר היה שלושה מלבנים צבעוניים גדולים.
עכשיו: משטחים מתחלפים לבן/משטח־משני, והאקסנט מופיע כ**קו, מספר וחץ**
בלבד. הצילום נושא את הצבע, הטקסט נושא את המידע, והאקסנט מסמן קטגוריה.
הרצועה גם התקצרה מ-28rem ל-22rem.
⚠️ זו **סטייה מודעת מהאיפיון**, שביקש מפורשות *"צבע מותג רווי כרקע של
סקשנים שלמים"*. הוא נבנה כך, נבדק בפועל, והלקוח פסל. אם חוזרים —
הגרסה הרוויה שמורה בהיסטוריית הקובץ. */
.v2 .bands { display: grid; grid-template-columns: minmax(0, 1fr); }
.v2 .band {
position: relative;
overflow: hidden;
background: var(--w);
color: var(--body);
border-block-start: 1px solid var(--line);
}
.v2 .band:last-child { border-block-end: 1px solid var(--line); }
/* משטחים מתחלפים — זה מה שמפריד בין הרצועות עכשיו, במקום הצבע. */
.v2 .band--b { background: var(--surface); }
.v2 .band--a { --st: #2F5794; --st-ink: #24457A; }
.v2 .band--b { --st: #12A99C; --st-ink: #0B7D74; }
.v2 .band--c { --st: #E4573B; --st-ink: #B4381F; }
.v2 .band__inner { display: grid; grid-template-columns: minmax(0, 1fr); }
/* הרוחב נקבע מהמכל והגובה נגזר ממנו — לא הפוך. `min-block-size` יחד עם
`aspect-ratio` הופך את הגובה למקור האמת והרוחב מחושב ממנו החוצה, וזו
גלישה אופקית אמיתית בכל מסך צר. (מלכודת §5.12 ב-HANDOFF.) */
.v2 .band__media { position: relative; }
.v2 .band__media .ph { inline-size: 100%; aspect-ratio: 16 / 9; }
.v2 .band__text { padding-block: var(--s6); padding-inline: var(--gut); }
@media (min-width: 900px) {
.v2 .band__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
min-block-size: 22rem;
}
/* מכאן ומעלה שתי עמודות בגובה אחיד, והצילום ממלא את שלו. */
.v2 .band__media .ph { aspect-ratio: auto; block-size: 100%; min-block-size: 22rem; }
/* ברירת המחדל: הטקסט בעמודה הראשונה — הימנית ב-RTL, צד הקריאה —
והצילום זולג אל הקצה השני. סדר ה-DOM נשאר מדיה→טקסט כדי שבמובייל
הצילום יבוא ראשון, ולכן המיקום נקבע במפורש ב-grid-column. */
.v2 .band__media { grid-column: 2; grid-row: 1; }
.v2 .band__text {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-block: var(--s7);
padding-inline-start: calc(var(--edge) + var(--gut));
padding-inline-end: clamp(1.5rem, 4vw, 4.5rem);
}
.v2 .band--flip .band__media { grid-column: 1; }
.v2 .band--flip .band__text {
grid-column: 2;
padding-inline-start: clamp(1.5rem, 4vw, 4.5rem);
padding-inline-end: calc(var(--edge) + var(--gut));
}
}
.v2 .band .shield-mark { inset-block-end: -38%; inset-inline-start: -14%; inline-size: 46%; color: var(--st, var(--brand)); opacity: 0.05; }
.v2 .band--flip .shield-mark { inset-inline-start: auto; inset-inline-end: -14%; }
.v2 .band__text > * { position: relative; z-index: 1; }
/* המספר נושא את האקסנט, ומעליו קו קצר בצבע — אותו אידיום כמו הכובע
בצעדים ובכרטיסי מצבי החיים. זה כל הצבע שהרצועה צריכה. */
.v2 .band__n {
display: block;
position: relative;
padding-block-start: var(--s3);
margin-block-end: var(--s3);
font-size: var(--fs-micro);
font-weight: 700;
color: var(--st-ink, var(--blue-600));
}
.v2 .band__n::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 52px;
block-size: 3px;
background: var(--st, var(--brand));
}
.v2 .band h3 { color: var(--ink); font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); margin-block-end: var(--s3); }
.v2 .band p { color: var(--body); font-size: var(--fs-small); line-height: 1.65; max-inline-size: 34rem; }
/* רשימת העמודים: קווי שיער ולא כרטיסים — זו רשימה, לא רשת. */
.v2 .band__links { list-style: none; margin: var(--s5) 0 0; padding: 0; max-inline-size: 34rem; }
.v2 .band__links li { border-block-start: 1px solid var(--line); }
.v2 .band__links li:last-child { border-block-end: 1px solid var(--line); }
.v2 .band__links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
padding-block: 0.72rem;
color: var(--ink);
font-size: var(--fs-small);
text-decoration: none;
transition: padding-inline-start var(--dur) var(--ease), color var(--dur) var(--ease);
}
.v2 .band__links a:hover { color: var(--st-ink, var(--blue-600)); }
.v2 .band__links a::after { color: var(--st, var(--brand)); }
/* ⚠️ החץ היה `opacity: 0` עד ריחוף — כלומר **הקישור לא נראה כקישור**.
על מסך מגע אין ריחוף בכלל, ולכן שם הוא לא הופיע אף פעם. שורה של טקסט
על קו שיער נקראת כרשימה, לא כניווט, ומי שלא ניסה ללחוץ לא ידע שאפשר.
עכשיו החץ הוא כפתור עגול **קבוע**: נראה תמיד, מתמלא באקסנט של הרצועה
בריחוף. זו אפורדנס, לא קישוט. */
.v2 .band__links a::after {
content: "←";
display: grid;
place-items: center;
flex: none;
inline-size: 28px;
block-size: 28px;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--st-ink, var(--brand));
font-size: 0.9rem;
line-height: 1;
/* ⚠️ שתי השורות האלה **חייבות** להיות מוצהרות במפורש. הכלל של V1
ב-defender.css מצהיר `opacity: 0` ו-`transform: translateX(.4em)`,
וספציפיות מכריעה רק בין הצהרות **קיימות** — כלל בעל ספציפיות גבוהה
שלא מצהיר על מאפיין אינו מבטל אותו. בלעדיהן החץ נשאר שקוף ומוזז
בדיוק כמו קודם, למרות שהכלל החדש "ניצח". */
opacity: 1;
transform: none;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.v2 .band__links a:hover,
.v2 .band__links a:focus-visible { padding-inline-start: var(--s2); text-decoration: none; }
.v2 .band__links a:hover::after,
.v2 .band__links a:focus-visible::after {
background: var(--st, var(--brand));
border-color: var(--st, var(--brand));
color: var(--w);
transform: translateX(-3px);
}
/* אותה סחיפה בגלילה כמו בהירו — שפת תנועה אחת לכל העמוד. */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.v2 .band__media .ph > img {
animation: v2-band-drift linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}
@keyframes v2-band-drift {
from { transform: scale(1.08) translateY(2%); }
to { transform: scale(1.08) translateY(-2%); }
}
}
}
/* --------------------------------------------------------------------------
מי עומד מאחור
-------------------------------------------------------------------------- */
.v2 .who { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
@media (min-width: 940px) { .v2 .who { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } }
.v2 .who__media { position: relative; overflow: hidden; border-radius: var(--r3); box-shadow: var(--sh2); }
.v2 .who__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.v2 .plate { margin-block-start: var(--s5); overflow: hidden; }
.v2 .plate__row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--s2) var(--s4);
padding: var(--s3) var(--s4);
border-block-end: 1px solid var(--line);
}
.v2 .plate__row:last-child { border-block-end: 0; }
.v2 .plate__row > dt { margin: 0; font-size: var(--fs-micro); color: var(--muted); }
.v2 .plate__row > dd { margin: 0; font-size: var(--fs-body); font-weight: 500; color: var(--ink); }
.v2 .signals { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--s4); margin: var(--s5) 0 0; padding: 0; }
.v2 .signals li { padding: var(--s4); border-radius: var(--r1); background: var(--tint); }
.v2 .signals b { display: block; font-size: clamp(1.6rem, 1rem + 2vw, 2.3rem); font-weight: 700; line-height: 1; color: var(--blue-800); }
.v2 .signals li > span { display: block; margin-block-start: var(--s2); font-size: var(--fs-micro); color: var(--body); }
/* --------------------------------------------------------------------------
דק 4.8 — שלוש תוספות קטנות, כולן מטוקנים קיימים
1. who--rev: הצד ההפוך של ה-split, כדי ש"מה אנחנו עושים" (סקשן 4)
ו"מי עומד מאחור" (סקשן 8) לא ייקראו כאותה תבנית פעמיים. ה-order
חל רק בדסקטופ; במובייל נשאר סדר ה-DOM — צילום ואז טקסט, כמו
בכל שאר העמוד.
2. step__t: חותמת הזמן של הצעדים. בתוך .num — טווח ספרות עם מקף
מתהפך ב-RTL בלעדיו.
3. nums: רצועת 15 · 0 ₪ · 384 ₪ על הפאנל הכהה. צבעי התוויות
והזהב — הערכים הקיימים של .op (#A9C0E0, #D8C08C).
-------------------------------------------------------------------------- */
/* רצועת המבטחות כפס צמוד להירו: פדינג קומפקטי ורקע surface — הרצועה
נקראת כבאנד נפרד מיד מתחת לקו הישר של הוידאו, במקום לצוף בלבן.
margin-block-start: 0 מבטל את ה-block-gap של וורדפרס (16px) — הוא
שקוף בין סקשנים לבנים, אבל על רקע צבעוני הוא נגלה כפס לבן. */
.v2 .sec--strip { margin-block-start: 0; padding-block: var(--s5); background: var(--surface); }
/* המגן מאחורי הטקסט (ג'וני 4.8, סבב ב'): האפור לא השתלב והצורה נחתכה
עד שלא נקראה כמגן — עברנו לכחול המותג בשקיפות נמוכה, והמגן כמעט שלם
בפריים: יושב בצד ימין, ממורכז אנכית מול הטקסט. margin-block-start: 0
מבטל את פס ה-block-gap שהורגש מול הרצועה שמעל. */
.v2 .sec--whatwedo { position: relative; overflow: hidden; margin-block-start: 0; }
.v2 .sec--whatwedo > .shell { position: relative; z-index: 1; }
/* סבב ג' (ג'וני): -25% גודל, שלם בתוך הסקשן וממורכז אנכית — עכשיו
רואים מגן, לא שתי קשתות חתוכות. */
.v2 .sec--whatwedo .shield-mark {
inset-block-start: 50%;
inset-inline-start: 2.5%;
inline-size: 22%;
transform: translateY(-50%);
color: var(--brand);
opacity: 0.07;
}
@media (min-width: 940px) {
/* align-items: center — הכותרת והפסקה יושבות מול מרכז התמונה,
לא תלויות מהקצה העליון (בקשת ג'וני 4.8: "שיישבו יותר יפה"). */
.v2 .who--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; }
.v2 .who--rev > :first-child { order: 2; }
/* הכותרת נשברת ב-
מכוון לשני משפטים. הגודל מכויל כך שהמשפט
הארוך (31 תווים) נכנס בשורה אחת בעמודת הטקסט — fs-h2 המלא היה
שובר אותו שוב ומשאיר "פוליסה." יתומה. */
.v2 .who--rev .sec-head h2 { font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.25rem); }
}
.v2 .who--rev .who__media img { aspect-ratio: 4 / 3; }
.v2 .step__t { display: block; margin-block-end: var(--s2); font-size: var(--fs-micro); font-weight: 700; color: var(--blue-600); }
/* --------------------------------------------------------------------------
התהליך כטבלה כהה — רפרנס ג'וני 4.8, מתורגם לשפה שלנו
הרפרנס: באנד נייבי שטוח, קו עליון, שלוש עמודות עם מפרידי שיער,
חותמת זמן מעל כל שלב, ובתחתית ״אל תשנו כלום״ מול קישור.
התרגום: הרקע הוא בדיוק מתכון הפאנל הכהה של החשבון (שני הרדיאלים
והלינארי — אפס צבעים חדשים), החותמות והציטוט בענבר (6.52:1 על
הפאנל, מתועד), והמגן חורג כסימן מים כמו בסקשן הסגירה.
-------------------------------------------------------------------------- */
.v2 .sec--process {
position: relative;
/* ה-block-gap של וורדפרס נגלה כפס לבן על באנד כהה — כמו ברצועה. */
margin-block-start: 0;
overflow: hidden; /* סימן המים חורג בכוונה */
background:
radial-gradient(120% 140% at 88% 8%, rgba(120, 178, 255, 0.42) 0%, rgba(120, 178, 255, 0) 55%),
radial-gradient(90% 120% at 6% 92%, rgba(18, 169, 156, 0.3) 0%, rgba(18, 169, 156, 0) 55%),
linear-gradient(140deg, #2C5390 0%, #1D3763 55%, #16294A 100%);
}
.v2 .sec--process > .shell { position: relative; z-index: 1; }
/* האפקט העדין (בקשת ג'וני 4.8): המגן כסימן מים שצף בפרלקסה איטית עם
הגלילה — scroll-linked כמו כל המושן של V2, לא אנימציה אוטונומית.
`prefers-reduced-motion` → המגן סטטי. */
.v2 .sec--process .shield-mark {
inset-block-end: -26%;
inset-inline-start: -8%;
inline-size: 42%;
color: var(--w);
opacity: 0.05;
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.v2 .sec--process .shield-mark {
animation: v2-shield-drift linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}
}
}
@keyframes v2-shield-drift {
from { transform: translateY(6%) rotate(-2deg); }
to { transform: translateY(-6%) rotate(2deg); }
}
.v2 .process__kick { margin: 0 0 var(--s3); font-size: var(--fs-micro); font-weight: 700; color: var(--gold-fill); }
.v2 .process__head { margin-block-end: var(--s6); }
.v2 .process__head h2 { color: var(--w); }
/* הטבלה: קו עליון אחד, והמפרידים בין העמודות — בדסקטופ בלבד. */
.v2 .steps--table { border-block-start: 1px solid rgb(255 255 255 / 0.18); }
.v2 .steps--table .step { border-block-start: 0; padding-block-start: var(--s5); }
.v2 .steps--table .step__t { color: var(--gold-fill); }
.v2 .steps--table h3 { color: var(--w); }
.v2 .steps--table p { color: #A9C0E0; }
@media (max-width: 899px) {
/* בערימה אנכית המפריד חוזר להיות אופקי, בין שלב לשלב. */
.v2 .steps--table .step + .step { border-block-start: 1px solid rgb(255 255 255 / 0.14); }
}
@media (min-width: 900px) {
.v2 .steps--table { gap: 0; }
.v2 .steps--table .step { padding-inline: 0 clamp(1.5rem, 3vw, 3rem); }
.v2 .steps--table .step + .step { padding-inline-start: clamp(1.5rem, 3vw, 3rem); border-inline-start: 1px solid rgb(255 255 255 / 0.14); }
.v2 .steps--table .step:last-child { padding-inline-end: 0; }
}
/* שורת הסיום: הציטוט מול הכפתור, על קו משלה. */
.v2 .process__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s4) var(--s5);
margin-block-start: var(--s6);
padding-block-start: var(--s5);
border-block-start: 1px solid rgb(255 255 255 / 0.18);
}
.v2 .process__foot .steps__fifth { margin: 0; max-inline-size: none; text-align: start; color: var(--w); font-weight: 400; }
.v2 .process__foot .steps__fifth b { color: var(--gold-fill); font-weight: 700; }
.v2 .steps__fifth { margin-block-start: var(--s6); text-align: center; max-inline-size: 44ch; margin-inline: auto; color: var(--blue-800); font-weight: 500; }
.v2 .nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); text-align: center; }
@media (min-width: 760px) { .v2 .nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2 .nums b { display: block; font-size: var(--fs-fig); font-weight: 700; line-height: 0.95; color: var(--w); }
.v2 .nums li > span { display: block; margin-block-start: var(--s3); font-size: var(--fs-small); color: #A9C0E0; }
.v2 .nums .is-gold b { color: var(--gold-fill); }
.v2 .nums .is-gold > span { color: #D8C08C; }
/* 24.9: "כ־15" — הקידומת קטנה, כדי שהמספר יישאר הדבר שנקרא. */
.v2 .nums b > .approx { font-size: 0.5em; font-weight: 500; margin-inline-end: 0.08em; }
/* --------------------------------------------------------------------------
כרטיסי ה-Hubs — שלושה בשורה (4.8, החלטת ג'וני אחרי הצעה)
מחליפים את שלוש הרצועות: אותו שלד ×3 ברצף נקרא כתבנית, והגובה נחתך
ב~60%. הצבע סמנטי כמו שהיה ברצועות (a=מותג · b=טיל · c=אלמוג), יושב
בכובע, במספר, בחיצים ובקישור הסיום — לא במשטחים (חוזה V2 §צבע).
ה-more נדחף לתחתית עם flex — שלושת הכרטיסים מיושרים גם כשהטקסטים
באורכים שונים.
-------------------------------------------------------------------------- */
.v2 .hubcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 900px) { .v2 .hubcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
.v2 .hubcard {
--hc: var(--brand);
--hc-ink: var(--blue-600);
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--w);
border-radius: var(--r2);
box-shadow: var(--sh1);
}
.v2 .hubcard--b { --hc: var(--teal-fill); --hc-ink: var(--teal); }
.v2 .hubcard--c { --hc: var(--coral-fill); --hc-ink: var(--coral); }
/* הכובע הצבוע — אותו אידיום כמו הצעדים והמצבים. מעל הגריין (z 3). */
.v2 .hubcard::before {
content: "";
position: absolute;
z-index: 3;
inset-block-start: 0;
inset-inline: 0;
block-size: 3px;
background: var(--hc);
}
.v2 .hubcard__top { display: block; }
.v2 .hubcard__fig { position: relative; margin: 0; aspect-ratio: 1; }
.v2 .hubcard__fig > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
.v2 .hubcard:hover .hubcard__fig > img,
.v2 .hubcard__top:focus-visible .hubcard__fig > img { transform: scale(1.045); }
}
.v2 .hubcard__body { display: flex; flex: 1; flex-direction: column; padding: var(--s5); }
.v2 .hubcard__n { font-size: var(--fs-micro); font-weight: 700; color: var(--hc-ink); }
.v2 .hubcard__body h3 { margin-block: var(--s2); font-size: var(--fs-h3); }
.v2 .hubcard__body h3 > a { color: var(--ink); text-decoration: none; }
.v2 .hubcard__body h3 > a:hover { color: var(--hc-ink); }
.v2 .hubcard__body > p { margin-block-end: var(--s4); font-size: var(--fs-small); line-height: 1.6; color: var(--body); }
.v2 .hubcard__links { list-style: none; margin: 0 0 var(--s4); padding: 0; flex: 1; }
.v2 .hubcard__links a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s3);
padding-block: var(--s3);
border-block-start: 1px solid var(--line);
font-size: var(--fs-small);
color: var(--ink);
text-decoration: none;
}
.v2 .hubcard__links a::after { content: "←"; color: var(--hc-ink); transition: transform 320ms var(--ease); }
.v2 .hubcard__links a:hover { color: var(--hc-ink); }
@media (prefers-reduced-motion: no-preference) {
.v2 .hubcard__links a:hover::after { transform: translateX(-0.3em); }
}
.v2 .hubcard__more { font-size: var(--fs-small); font-weight: 700; color: var(--hc-ink); text-decoration: none; }
.v2 .hubcard__more:hover { text-decoration: underline; }
/* --------------------------------------------------------------------------
Hubs — וריאציית רוחב (השוואה זמנית, ג'וני 4.8 אחה"צ)
אותם כרטיסים כרצועות: תמונה 42% / טקסט 58%, הצדדים מתחלפים.
הרכיבים הפנימיים (מספר, קישורים, more) הם אותן מחלקות של הכרטיסים —
מוגדרות ברמת האלמנט ולא מקוננות, ולכן משותפות לשתי הפריסות.
-------------------------------------------------------------------------- */
.v2 .hubwides { display: grid; gap: var(--s5); }
.v2 .hubwide {
--hc: var(--brand);
--hc-ink: var(--blue-600);
position: relative;
display: grid;
overflow: hidden;
background: var(--w);
border-radius: var(--r2);
box-shadow: var(--sh1);
}
.v2 .hubwide--b { --hc: var(--teal-fill); --hc-ink: var(--teal); }
.v2 .hubwide--c { --hc: var(--coral-fill); --hc-ink: var(--coral); }
.v2 .hubwide::before {
content: "";
position: absolute;
z-index: 3;
inset-block-start: 0;
inset-inline: 0;
block-size: 3px;
background: var(--hc);
}
.v2 .hubwide__fig { position: relative; margin: 0; min-block-size: 15rem; }
.v2 .hubwide__fig > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.v2 .hubwide__body { display: flex; flex-direction: column; padding: var(--s6); }
/* +30% ועובי — בקשת ג'וני 4.8: fs-h3 (עד 1.6rem) → עד 2.1rem, משקל 600. */
.v2 .hubwide__body h3 { margin-block: var(--s2); font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.1rem); font-weight: 600; }
.v2 .hubwide__body h3 > a { color: var(--ink); text-decoration: none; }
.v2 .hubwide__body h3 > a:hover { color: var(--hc-ink); }
.v2 .hubwide__body > p { margin-block-end: var(--s4); font-size: var(--fs-small); line-height: 1.6; color: var(--body); }
@media (min-width: 900px) {
/* 40/60 אחיד בכל הכרטיסים — בקשת ג'וני 4.8. */
.v2 .hubwide { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); }
/* RTL: העמודה הראשונה = ימין. flip מזיז את התמונה לעמודה השנייה (שמאל). */
.v2 .hubwide--flip .hubwide__fig { order: 2; }
}
/* --------------------------------------------------------------------------
הצוות — שורת ארבעה פורטרטים (חוזה חלק ג', דמו)
הפירוק מרימקס: הברנד חי בתוך הצילום. כל הפורטרטים בסטאפ סטודיו אחד
(רקע נייר בהיר, רים ענברי), ולכן השורה נקראת כסשן צילום אחד. הסקשן
על לבן — הרקע הבהיר של הפורטרטים צריך שקט, לא משטח מתחרה.
-------------------------------------------------------------------------- */
.v2 .team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
@media (min-width: 900px) { .v2 .team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); } }
.v2 .team__card { margin: 0; }
/* `inline-size` קובע, הגובה נגזר מה-aspect-ratio — המלכודת מס' 12. */
.v2 .team__shot {
position: relative;
overflow: hidden;
margin: 0 0 var(--s3);
inline-size: 100%;
aspect-ratio: 4 / 5;
border-radius: var(--r2);
box-shadow: var(--sh1);
}
.v2 .team__shot > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
.v2 .team__card:hover .team__shot > img { transform: scale(1.04); }
}
.v2 .team__card > b { display: block; font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.v2 .team__card > span { display: block; margin-block-start: var(--s1); font-size: var(--fs-small); color: var(--muted); }
/* --------------------------------------------------------------------------
המלצות — קרוסלת לופ (ג'וני 4.8 אחה"צ: "יותר חי")
רייל שנע לבד, שני העתקים והזזה של 50% בדיוק — לופ בלי קאט (האידיום
מרימקס). ריחוף/פוקוס עוצרים; reduced-motion מבטל את התנועה והרצועה
הופכת לגלילה ידנית. הסקשן על surface — חי אבל בהיר, כי הסגירה
שמתחתיו כהה. האקסנט מתחלף זהב/טיל/אלמוג — הקצב של הקטלוג, לא צבע
אחד משעמם. חריגה מ"אין אנימציות אוטונומיות": בקשה מפורשת של ג'וני,
עם שערי העצירה הנדרשים.
-------------------------------------------------------------------------- */
.v2 .sec--quotes { position: relative; margin-block-start: 0; padding-block: var(--s6); background: var(--surface); overflow: hidden; }
.v2 .sec--quotes .sec-head { margin-block-end: var(--s5); }
/* האפקט (ג'וני 4.8): שתי בריכות אור רכות — כחול המותג וטיל — שנסחפות
מעט עם הגלילה. scroll-linked, לא אוטונומי; reduced-motion → סטטיות.
התוכן ממוקם relative כדי לצוף מעל הזוהר. */
.v2 .sec--quotes::before {
content: "";
position: absolute;
inset: -12% 0;
pointer-events: none;
background:
radial-gradient(42% 55% at 12% 22%, rgba(69, 115, 182, 0.12) 0%, rgba(69, 115, 182, 0) 70%),
radial-gradient(38% 50% at 88% 80%, rgba(18, 169, 156, 0.10) 0%, rgba(18, 169, 156, 0) 70%);
}
.v2 .sec--quotes > .shell,
.v2 .sec--quotes .quotes-rail { position: relative; }
/* חבילת האפקטים 4.8 ערב: הזוהר עבר מסחיפת-גלילה למסלול תמידי איטי —
"דברים קטנים שזזים כל הזמן". alternate = הלוך ושוב, בלי קפיצה. */
@media (prefers-reduced-motion: no-preference) {
.v2 .sec--quotes::before { animation: v2-glow-float 26s ease-in-out infinite alternate; }
}
@keyframes v2-glow-float {
from { transform: translate3d(0, -3%, 0) scale(1); }
to { transform: translate3d(2%, 3%, 0) scale(1.06); }
}
.v2 .quotes-track {
display: flex;
inline-size: max-content;
animation: v2-quotes-loop 52s linear infinite;
}
.v2 .quotes-rail:hover .quotes-track,
.v2 .quotes-rail:focus-within .quotes-track { animation-play-state: paused; }
@keyframes v2-quotes-loop {
from { transform: translateX(0); }
to { transform: translateX(50%); }
}
@media (prefers-reduced-motion: reduce) {
.v2 .quotes-track { animation: none; inline-size: auto; }
.v2 .quotes-rail { overflow-x: auto; }
}
/* כל run הוא 50% מהמסילה בדיוק — הריפוד בקצה משלים את ה-gap בין ההעתקים. */
.v2 .quotes-run {
display: flex;
gap: var(--s4);
list-style: none;
margin: 0;
padding: var(--s2) 0 var(--s3) var(--s4);
}
.v2 .quote {
--qa: var(--gold-fill);
--qa-ink: var(--gold);
position: relative;
flex: none;
display: flex;
flex-direction: column;
gap: var(--s4);
inline-size: clamp(16rem, 24vw, 21rem);
padding: var(--s5);
background: var(--w);
border-radius: var(--r2);
box-shadow: var(--sh1);
overflow: hidden;
}
.v2 .quote:nth-child(3n+2) { --qa: var(--teal-fill); --qa-ink: var(--teal); }
.v2 .quote:nth-child(3n) { --qa: var(--coral-fill); --qa-ink: var(--coral); }
.v2 .quote::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: var(--qa); }
.v2 .quote blockquote { margin: 0; flex: 1 1 auto; }
.v2 .quote blockquote > p { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink); }
.v2 .quote blockquote > p::before { content: "״"; display: block; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--qa-ink); }
.v2 .quote__by { display: flex; align-items: center; gap: var(--s3); }
.v2 .quote__face { flex: none; inline-size: 48px; block-size: 48px; border-radius: 999px; object-fit: cover; box-shadow: var(--sh1); }
/* 24.9: בלי פנים — אייקון אדם ניטרלי על עיגול בגוון האקסנט של הכרטיס. */
.v2 .quote__face--icon { display: grid; place-items: center; overflow: hidden; background: var(--tint); color: var(--qa-ink, var(--blue-600)); }
.v2 .quote__face--icon > svg { inline-size: 32px; block-size: 32px; margin-block-start: 10px; opacity: 0.85; }
.v2 .quote__by b { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
/* `> span > span` ולא `span span` — המלכודת מס' 2: סלקטור צאצא רחב תופס מקוננים. */
.v2 .quote__by > span > span { display: block; margin-block-start: 2px; font-size: var(--fs-micro); color: var(--body); }
/* --------------------------------------------------------------------------
שאלות + טופס
-------------------------------------------------------------------------- */
/* 4.8 ערב: הכותרת בתוך עמודת השאלות — מיושרת להתחלה, לא ממורכזת. */
.v2 .sec-head--faq { margin-block-end: var(--s5); text-align: start; }
.v2 .sec-head--faq h2 { margin-inline: 0; }
.v2 .faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
@media (min-width: 980px) { .v2 .faq-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } }
/* הצילום דביק: האקורדיון ארוך ממנו פי שלושה, ובלי זה העמודה השנייה
מסתיימת אחרי שליש ומשאירה חצי סקשן ריק. `--header-h` כדי שלא ייתקע
מתחת להדר הצף. */
.v2 .faq-fig { margin: 0; }
/* 4.8 ערב: התמונה נחתכת בצורת המגן — המסכה ששימשה את הירו-המגן.
ה-mask יושב על ה-.ph ולכן חותך גם את שכבת האינק והגריין יחד. */
.v2 .faq-fig .ph {
aspect-ratio: 372 / 432;
-webkit-mask-image: url("../img/shield-mask.svg");
mask-image: url("../img/shield-mask.svg");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.v2 .faq-fig .ph > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (min-width: 980px) {
.v2 .faq-fig { position: sticky; inset-block-start: calc(var(--header-h, 96px) + var(--s4)); }
}
/* היה כאן חוק כפול (4/5 + צל/רדיוס) שדרס את יחס המגן — אוחד: היחס של
המסכה הוא הקובע, וצל/רדיוס ממילא נבלעים במסכה. */
.v2 .faq-fig .ph { inline-size: 100%; aspect-ratio: 372 / 432; }
.v2 .faq-fig figcaption { margin-block-start: var(--s3); color: var(--muted); }
/* --------------------------------------------------------------------------
אקורדיון דק — 4.8 לילה, בקשת ג'וני ("חדשני ודק, בגובה המגן")
בלי קופסאות: שורות עם קווי שיער, מסמן + שמסתובב ל-×, צבע שעובר
לכחול בריחוף ובפתיחה, והתשובה נמתחת חלק עם ::details-content +
interpolate-size (Chromium חדש; דפדפן ישן פותח רגיל בלי אנימציה).
הפדינג קומפקטי כדי ששבע השורות + הכותרת יעמדו בגובה המגן שלצידן.
-------------------------------------------------------------------------- */
.v2 .qa { interpolate-size: allow-keywords; border-block-start: 1px solid var(--line); }
.v2 .qa:last-of-type { border-block-end: 1px solid var(--line); }
.v2 .qa > summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s4);
padding-block: var(--s3);
font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
font-weight: 500;
color: var(--ink);
cursor: pointer;
list-style: none;
transition: color var(--dur) var(--ease);
}
.v2 .qa > summary:hover,
.v2 .qa[open] > summary { color: var(--blue-600); }
.v2 .qa > summary::-webkit-details-marker { display: none; }
/* המסמן יורש currentColor — מכחיל יחד עם השאלה, ומסתובב מ-+ ל-×. */
.v2 .qa > summary::after {
content: "";
flex: none;
inline-size: 11px;
block-size: 11px;
margin-block-start: 0.4em;
background:
linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
transition: transform 300ms var(--ease);
}
.v2 .qa[open] > summary::after { transform: rotate(135deg); }
.v2 .qa::details-content {
block-size: 0;
overflow: clip;
transition: block-size 320ms var(--ease), content-visibility 320ms allow-discrete;
}
.v2 .qa[open]::details-content { block-size: auto; }
.v2 .qa > div { padding-block: 0 var(--s4); max-inline-size: 54ch; }
.v2 .qa > div p { margin: 0; font-size: var(--fs-small); line-height: 1.65; color: var(--body); }
.v2 .form { padding: var(--s6) var(--s5); }
.v2 .form h3 { margin-block-end: var(--s2); }
.v2 .form > p { color: var(--muted); font-size: var(--fs-small); margin-block-end: var(--s5); }
.v2 .field { margin-block-end: var(--s4); }
.v2 .field > label { display: block; margin-block-end: var(--s2); font-size: var(--fs-micro); font-weight: 500; color: var(--body); }
.v2 .field > input,
.v2 .field > select {
inline-size: 100%;
padding: 0.8rem 1rem;
border: 1px solid var(--line);
border-radius: var(--r1);
background: var(--bg);
color: var(--ink);
font: inherit;
font-size: var(--fs-body);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.v2 .field > input:focus,
.v2 .field > select:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(69, 115, 182, 0.16);
background: var(--w);
}
.v2 .consent { display: flex; align-items: flex-start; gap: var(--s3); margin-block-end: var(--s5); }
.v2 .consent > input { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 0.24em; accent-color: var(--brand); }
.v2 .consent > label { font-size: var(--fs-micro); line-height: 1.55; color: var(--body); }
.v2 .form .b { inline-size: 100%; }
/* --------------------------------------------------------------------------
סקשן הסגירה
שלוש שכבות: צילום ברוחב מלא · שכבת אינק · תוכן. השכבה האמצעית היא מה
שמחזיק את הנגישות — לבן על הצילום הגולמי אינו עובר AA, ולכן ההחשכה
כאן כבדה יותר מזו של ההירו: אין כאן וידאו שצריך להישאר גלוי, ויש כאן
טופס שצריך להיקרא.
-------------------------------------------------------------------------- */
.v2 .cta {
position: relative;
overflow: hidden;
background: var(--blue-800);
color: rgba(255, 255, 255, 0.86);
}
.v2 .cta__bg { position: absolute; inset: 0; z-index: 0; }
.v2 .cta__bg .ph { inline-size: 100%; block-size: 100%; }
/* 4.8: הרקע הוא פילם הספה של ג'וני — הנושא במרכז, הטיית הדלת ירדה. */
.v2 .cta__bg .ph > img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
/* הפילם — מעל הפוסטר, מתחת לשכבת ההחשכה (ה-::after מצויר אחרי הילדים).
נכנס בעדינות כשהניגון מתחיל, כמו בהירו. */
.v2 .cta__video {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 900ms var(--ease);
}
.v2 .cta__video.is-playing { opacity: 1; }
/* ההחשכה. גרדיאנט ולא שכבה אחידה — הצד שנושא את הטקסט כהה יותר (נבדק
AA), והצד הפתוח ירד ל-0.45 כדי שהדלת המוארת תעבור דרכו. הטופס מכסה
חלק מהפריים ממילא; מה שמציץ סביבו חייב להיקרא כצילום, לא כמשטח. */
.v2 .cta__bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to left, rgb(13 35 64 / 0.94) 0%, rgb(13 35 64 / 0.78) 46%, rgb(13 35 64 / 0.45) 100%),
linear-gradient(rgb(13 35 64 / 0.22), rgb(13 35 64 / 0.22));
}
.v2 .cta .shield-mark { inset-block-end: -30%; inset-inline-end: -6%; inline-size: 42%; color: var(--w); opacity: 0.07; }
.v2 .cta__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s6);
}
@media (min-width: 980px) {
.v2 .cta__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
gap: clamp(2.5rem, 5vw, 5rem);
align-items: center;
}
}
.v2 .cta h2 { color: var(--w); }
.v2 .cta .lead { color: rgba(255, 255, 255, 0.82); margin-block-start: var(--s4); }
.v2 .cta .micro { color: rgba(255, 255, 255, 0.58); }
.v2 .cta__note { margin-block-start: var(--s5); max-inline-size: 42rem; }
/* שלוש העובדות. קווי שיער מפרידים ולא כרטיסים — הכרטיס היחיד בסקשן
הזה הוא הטופס, וזה מה שנותן לו את כל תשומת הלב. */
.v2 .cta__facts {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: var(--s4) var(--s5);
margin: var(--s6) 0 0;
padding-block-start: var(--s5);
border-block-start: 1px solid rgba(255, 255, 255, 0.22);
}
.v2 .cta__facts b {
display: block;
font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
color: var(--gold-fill);
}
/* ⚠️ **ילד ישיר, לא `span` סתם.** `.cta__facts span` תפס גם את
`` שיושב *בתוך* ה-``, וכיווץ את המספר לגודל
תווית — כך ש-"15 דק׳" נקרא כ-`דק׳` ענק עם `15` זעיר לידו.
זו מלכודת §5.2 ב-HANDOFF, והיא חוזרת בכל מקום שיש בו מספר בתוך `.num`. */
.v2 .cta__facts > li > span { display: block; margin-block-start: var(--s2); font-size: var(--fs-micro); color: rgba(255, 255, 255, 0.72); }
/* צמצום גובה — בקשת ג'וני 4.8 ("תראה איך אתה מצמצם גובה שלו"):
פדינג הסקשן ירד s8→s6, והטופס הודק בפנים — מרווחי שדות, פדינג
הכרטיס וריפוד האינפוטים. גבהי המגע נשארים מעל 40px. הסקשן מוכן
לסרטון רקע: cta__bg כבר שכבת רקע עצמאית, ההחלפה היא בתוכה בלבד. */
/* margin-block-start: 0 — ההמלצות שמעל צמודות (בקשת ג'וני), בלי פס
ה-block-gap הלבן בין ה-surface לכהה. */
.v2 .sec.cta { margin-block-start: 0; padding-block: var(--s6); }
.v2 .cta .form { padding: var(--s5); }
.v2 .cta .form > p { margin-block-end: var(--s4); }
.v2 .cta .field { margin-block-end: var(--s3); }
.v2 .cta .field > input,
.v2 .cta .field > select { padding: 0.75rem 1rem; }
.v2 .cta .consent { margin-block-end: var(--s4); }
/* הטופס — הכרטיס הלבן היחיד על הכהה, ולכן הצל שלו עמוק במיוחד. */
.v2 .cta__form {
background: var(--w);
color: var(--body);
box-shadow: 0 8px 24px rgb(6 18 34 / 0.34), 0 34px 70px rgb(6 18 34 / 0.44);
}
.v2 .cta__form h3 { color: var(--ink); }
.v2 .cta__form > p { color: var(--muted); }
.v2 .cta__form .micro { color: var(--muted); }
/* --------------------------------------------------------------------------
פוטר
-------------------------------------------------------------------------- */
/* הפוטר לבן, לא נייבי.
הסיבה מבנית ולא טעם: סקשן הסגירה שמעליו הוא בלוק כהה גדול עם צילום.
שני בלוקים כהים ברצף אוכלים זה את זה — הסגירה מפסיקה להיות הרגע הכי
חזק בעמוד ברגע שהיא רק ההתחלה של אזור כהה ארוך. לבן אחריה מחזיר לה
את הנחיתה.
הכחול נשאר בשלושה מקומות בלבד: הלוגו, סימן המים, **ופס התחתית** —
רצועה ברוחב מלא בכחול המותג שסוגרת את העמוד. זו השבירה. */
.v2 .foot {
position: relative;
overflow: hidden;
background: var(--w);
color: var(--body);
padding-block-start: var(--s7);
border-block-start: 1px solid var(--line);
}
/* סימן המים — גדול, ובעיקר **מחוץ לפריים**. צללית בעלת קצה חד על משטח
לבן שטוח נקראת ככתם ברגע שרואים את כל היקפה; כשרק העקומה נכנסת היא
נקראת כסימן. לכן הוא הוגדל ונדחף החוצה, והאטימות ירדה. */
.v2 .foot .shield-mark { inset-block-start: -62%; inset-inline-end: -14%; inline-size: 48%; color: var(--brand); opacity: 0.05; }
.v2 .foot .shell { position: relative; z-index: 1; }
.v2 .foot .micro { color: var(--muted); }
/* ⚠️ 16px לבן בין הסגירה לפוטר. המקור הוא `wp-block-template-part` —
וורדפרס מוסיף מרג׳ין לעטיפת ה-template part, בדיוק כמו לבלוקי `group`
(מלכודת §5.3 ב-HANDOFF). הפוטר עצמו היה על אפס והחיפוש התחיל במקום
הלא נכון. */
.v2 .wp-block-template-part { margin-block: 0; }
.v2 .foot__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-block-end: var(--s5); margin-block-end: var(--s5); border-block-end: 1px solid var(--line); }
@media (min-width: 700px) { .v2 .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); } }
@media (min-width: 1040px) { .v2 .foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v2 .fcol h3 { color: var(--blue-800); font-size: var(--fs-micro); font-weight: 700; margin-block-end: var(--s3); }
.v2 .fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.v2 .fcol a { color: var(--body); font-size: var(--fs-small); text-decoration: none; }
.v2 .fcol a:hover { color: var(--blue-600); }
/* פס התחתית — הרצועה הכחולה שסוגרת את העמוד. */
.v2 .foot__bar {
position: relative;
z-index: 1;
margin-block-start: var(--s6);
padding-block: var(--s4);
background: var(--blue-600);
color: rgba(255, 255, 255, 0.86);
}
.v2 .foot__bar .micro { color: rgba(255, 255, 255, 0.86); }
.v2 .foot__legal { max-inline-size: 76ch; }
.v2 .foot__legal p + p { margin-block-start: var(--s3); }
/* שורת התחתית: זכויות היוצרים ושני הקישורים על **קו אחד**, מיושרים
לימין (התחלת השורה ב-RTL).
שני תיקונים כאן, והשני הוא באג ולא העדפה:
1. `align-items: baseline` — בלי זה הפריטים נמתחו לגובה השורה והטקסט
של הקישורים ישב 20px נמוך מזכויות היוצרים, כך שהשורה נראתה שבורה
לשתי שורות שאינן מיושרות זו לזו.
2. **הקישורים היו `--blue-600` על `--blue-800`** — כלומר כחול כהה על
כחול כהה, 1.6:1. הם נפלו דרך `.v2 a` הכללי כי `.fcol a` מכסה רק את
עמודות הניווט ולא את שורת התחתית. לבן על blue-800 הוא 11.8:1. */
/* בלי מרג׳ין, פדינג או גבול משלו — הרצועה הכחולה **היא** ההפרדה עכשיו,
והקו שנשאר מהגרסה הכהה צויר בתוכה כשריד.
`space-between` ב-RTL: הקרדיט והקישורים בהתחלה (ימין), הלוגו בקצה
(שמאל). */
.v2 .foot__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s3) var(--s5);
}
.v2 .foot__meta-links {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s2) var(--s5);
}
.v2 .foot__logo { display: block; flex: none; opacity: 0.9; transition: opacity var(--dur) var(--ease); }
.v2 .foot__logo:hover { opacity: 1; }
.v2 .foot__logo img { display: block; block-size: 30px; inline-size: auto; }
.v2 .foot__meta a,
.v2 .foot__legal a { color: var(--w); }
.v2 .foot__meta a:hover,
.v2 .foot__legal a:hover { text-decoration-color: var(--w); }
/* --------------------------------------------------------------------------
חבילת האפקטים — ג'וני 4.8 ערב: "דברים קטנים שזזים כל הזמן"
חמישה מכשירים, כולם transform/opacity בלבד:
1. שורות פוליסה צפות (fx-lines) — שתי שכבות קווים דקיקים במחזורים
שונים (46/64 שניות) שנסחפות מעלה ברקעים הלבנים. המוטיב של האתר —
השורה בפוליסה — כטקסטורה חיה. z-index: -1 עם isolation: הקווים
מעל רקע הסקשן, מתחת לכל תוכן.
2. נשימת המגן (whatwedo) — סקייל 2% על 8 שניות.
3. הזוהר הנודד (quotes) — למעלה, הוחלף למסלול תמידי.
4. שימר הכובעים — הבהק שחולף על פס האקסנט כל 7 שניות.
5. הספירה (motion.js) — המספרים עולים בכניסה למסך.
ת"י 5568: תנועה תמידית מחייבת עצירה — html[data-motion="off"]
(המתג ב-motion.js) מכבה את כולם, בנוסף ל-prefers-reduced-motion.
-------------------------------------------------------------------------- */
/* שורות הפוליסה הצפות (fx-lines) נבנו ונמחקו בהוראת ג'וני — "הפסים
האלה למחוק". נשארו ארבעה מכשירים. */
@media (prefers-reduced-motion: no-preference) {
.v2 .sec--whatwedo .shield-mark { animation: v2-shield-breathe 8s ease-in-out infinite; }
}
@keyframes v2-shield-breathe {
from, to { transform: translateY(-50%) scale(1); }
50% { transform: translateY(-50%) scale(1.02); }
}
/* השימר: שכבת הבהק מעל צבע הכובע (background-color נשאר var(--hc)).
22% מהמחזור = המעבר עצמו, השאר מנוחה. */
@media (prefers-reduced-motion: no-preference) {
.v2 .hubwide::before,
.v2 .quote::before {
background-image: linear-gradient(105deg, transparent 0 42%, rgba(255, 255, 255, 0.75) 50%, transparent 58% 100%);
background-size: 240% 100%;
background-repeat: no-repeat;
animation: v2-cap-shimmer 7s linear infinite;
}
}
@keyframes v2-cap-shimmer {
0% { background-position-x: 220%; }
22% { background-position-x: -140%; }
100% { background-position-x: -140%; }
}
/* המתג הגלוי בפוטר — כפתור שנראה כמו שאר קישורי השורה. */
.v2 .motion-toggle {
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: var(--fs-micro);
color: var(--w);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
/* עצירת תנועה — מכבה את חמשת המכשירים ואת הקרוסלה. הסרטונים נעצרים
ב-motion.js (הם לא אנימציית CSS). */
html[data-motion="off"] .v2 .quotes-track,
html[data-motion="off"] .v2 .sec--quotes::before,
html[data-motion="off"] .v2 .sec--whatwedo .shield-mark,
html[data-motion="off"] .v2 .sec--process .shield-mark,
html[data-motion="off"] .v2 .hubwide::before,
html[data-motion="off"] .v2 .quote::before { animation: none !important; }
/* --------------------------------------------------------------------------
חשיפה בגלילה — עברה למנוע הכניסות (ג'וני 6.8)
בלוק ה-animation-timeline הישן עבד רק בכרום והרים את `.rise` כגוש
אחד. המנוע ב-motion.js מפרק את המוכרים לילדים בהשתלשלות, עובד בכל
הדפדפנים, ומטפל גם ב-reduced-motion ובמתג העצירה. ה-CSS שלו יושב
ב-defender.css (שכבת הבסיס — משרת גם את V1 וגם את V2).
`.rise` נשאר בתוכן כסמן; אין לו יותר כללי תנועה כאן.
-------------------------------------------------------------------------- */
/* ==========================================================================
המגה-מניו + תפריט המובייל המחודש (ג'וני, 4.8 לילה)
הניווט נבנה מעץ האתר בבלוק defender/nav (inc/article.php). שלושת
התחומים נפתחים לפאנל רוחב מלא: אינטרו, עמודי הבן עם הדיאגרמות
הממוזערות, ותחתית בדיקת-תיק. פתיחה ב-:hover / :focus-within — אפס JS,
והמקלדת נתמכת מעצם המבנה (Tab נכנס, Tab החוצה סוגר).
במובייל אותו בלוק הופך לשיט מסך-מלא מתוך ה-details הקיים — ה"מגה"
נפרש כמפת אתר מסודרת, עם CTA קבוע בתחתית.
========================================================================== */
.v2 .site-nav .site-nav__caret {
display: inline-block;
inline-size: 7px;
block-size: 7px;
margin-inline-start: 7px;
/* גבולות פיזיים ולא לוגיים — ב-RTL הלוגיים מתהפכים והחץ הצביע
הצידה במקום למטה (נתפס בצילום). */
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--dur) var(--ease);
}
.v2 .site-nav .has-mega:hover .site-nav__caret,
.v2 .site-nav .has-mega:focus-within .site-nav__caret {
transform: translateY(1px) rotate(225deg);
}
.v2 .site-nav .mnav-cta { display: none; }
@media (min-width: 900px) {
/* ⚠️ בלי pointer-events: none. הוא לא עובר טרנזישן — ברגע שהריחוף
נופל (חציית הרווח שבין הקישור לפאנל) הפאנל הפך שקוף לאירועים
מיידית, והעכבר שהגיע אליו כבר לא החזיר את ה-hover — "נעלם לפני
הקליק" (הבאג שג'וני תפס). visibility:hidden לבדו חוסם אינטראקציה
במצב סגור; במהלך חלון החסד (400ms) הפאנל נשאר חי, והגעה אליו
מבטלת את הסגירה. */
.v2 .site-nav .mega {
position: absolute;
inset-inline: 0;
inset-block-start: 100%;
background: var(--w);
border-block-start: 1px solid var(--line);
box-shadow: 0 30px 60px -22px rgb(13 35 64 / 0.28);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 220ms var(--ease), transform 220ms var(--ease),
visibility 0s linear 400ms;
}
.v2 .site-nav .mega::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: 0;
block-size: 3px;
background: var(--acc, var(--brand));
}
.v2 .site-nav .has-mega:hover > .mega,
.v2 .site-nav .has-mega:focus-within > .mega {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 60ms, 60ms, 0s;
}
/* 24.9 — "צריך להילחם בתפריט": בין תחתית הקישור (66px) לראש הפאנל
(88px) יש רצועה מתה של ~22px. הריחוף נפל בה, והשקיפות התחילה לדעוך
מיד (רק ה-visibility חיכה 400ms) — הפאנל נמוג בדיוק בדרך אליו.
שלושה תיקונים:
1. גשר בלתי נראה ברוחב מלא מעל הפאנל. הוא צאצא של ה-li, ולכן מעבר
דרכו שומר על :hover. במצב סגור הפאנל hidden, כך שהגשר לא תופס.
2. חסד בסגירה: יציאה רגעית (תנועה אלכסונית, רעד של יד) לא מתחילה
דעיכה לפני 280ms.
3. בלי חפיפה: ריחוף על תחום אחר סוגר את הקודם מיד, בלי החסד. */
.v2 .site-nav .mega::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 100%;
block-size: 26px;
}
.v2 .site-nav .mega {
transition: opacity 200ms var(--ease) 280ms, transform 200ms var(--ease) 280ms,
visibility 0s linear 480ms;
}
.v2 .site-nav ul:hover > .has-mega:not(:hover):not(:focus-within) > .mega {
transition: none;
}
.v2 .mega__grid {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.1fr);
gap: clamp(1.5rem, 3vw, 3.5rem);
padding-block: var(--s5);
}
.v2 .mega__intro {
padding-inline-end: clamp(1rem, 2vw, 2rem);
border-inline-end: 1px solid var(--line);
}
.v2 .mega__title {
margin: 0 0 var(--s2);
font-size: var(--fs-h3);
font-weight: 600;
color: var(--blue-800);
background-image: linear-gradient(105deg, #4573B6 0%, #2F5794 45%, #1D3763 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.v2 .mega__lead {
margin: 0 0 var(--s3);
font-size: var(--fs-micro);
line-height: 1.55;
color: var(--body);
}
.v2 .mega__items {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2px var(--s4);
align-content: start;
max-inline-size: 32rem;
}
.v2 .mega__items:has(li:nth-child(4)) {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-inline-size: none;
}
.v2 .site-header--overlay .site-nav .mega a {
color: var(--ink);
text-shadow: none;
font-weight: 400;
}
.v2 .site-header--overlay .site-nav .mega a::after { content: none; }
/* הכלל הגורף תפס גם את כפתור ה-fill בתחתית — טקסט לבן חוזר
(ג'וני: "כפתור כחול = טקסט לבן"). */
.v2 .site-header--overlay .site-nav .mega a.b--fill {
color: var(--w);
font-weight: 500;
}
.v2 .mega__item {
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s2) var(--s3);
border-radius: var(--r1);
text-decoration: none;
transition: background-color var(--dur) var(--ease);
}
.v2 .mega__item:hover,
.v2 .mega__item:focus-visible { background: var(--tint); }
.v2 .mega__item:hover .mega__txt b { color: var(--acc-ink, var(--blue-600)); }
.v2 .mega__fig {
flex: none;
inline-size: 54px;
block-size: 42px;
padding: 4px 6px;
background: var(--tint);
border-radius: var(--r1);
transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.v2 .mega__item:hover .mega__fig { background: var(--w); box-shadow: var(--sh1); }
.v2 .mega__fig .fig__svg { display: block; inline-size: 100%; block-size: 100%; }
.v2 .mega__txt { display: grid; gap: 1px; min-inline-size: 0; }
.v2 .mega__txt b {
display: flex;
align-items: baseline;
gap: var(--s2);
font-size: var(--fs-small);
font-weight: 600;
color: var(--ink);
transition: color var(--dur) var(--ease);
}
.v2 .mega__txt > span:last-child { font-size: 0.8rem; color: var(--body); }
.v2 .mega__tag {
flex: none;
padding: 0.08rem 0.5rem;
border-radius: 999px;
background: var(--tint);
color: var(--blue-600);
font-size: 0.65rem;
font-weight: 700;
}
.v2 .mega__foot { border-block-start: 1px solid var(--line); background: var(--surface); }
.v2 .mega__foot .shell {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s3);
padding-block: var(--s3);
}
.v2 .mega__foot .micro { color: var(--body); }
}
/* --------------------------------------------------------------------------
מובייל — השיט המלא במקום הפאנל הישן
-------------------------------------------------------------------------- */
@media (max-width: 899px) {
/* defender.css שם על ה-details עצמו position:relative — ואז הפאנל
ה-absolute נמדד מול הכפתור הקטן ויצא רצועה צרה (נתפס בצילום).
static מחזיר את ההקשר להדר — רוחב מלא. */
.v2 .menu-toggle { position: static; }
.v2 .menu-toggle > summary {
display: inline-flex;
align-items: center;
gap: 8px;
}
.v2 .menu-toggle > summary::before {
content: "";
inline-size: 16px;
block-size: 12px;
background:
linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
transition: transform 200ms var(--ease);
}
.v2 .menu-toggle[open] > summary::before {
background:
linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
transform: rotate(45deg);
}
/* ⚠️ לא fixed: ה-backdrop-filter של ההדר הופך אותו ל-containing
block, ו-fixed נמדד מולו — הפאנל קרס לגובה אפס (נתפס בצילום).
absolute מתחת להדר + גובה מחושב עושה את אותה עבודה. */
.v2 .menu-toggle__panel {
position: absolute;
inset-inline: 0;
inset-block-start: 100%;
block-size: calc(100dvh - var(--header-h, 76px));
min-inline-size: 0;
background: var(--bg);
border: 0;
border-radius: 0;
box-shadow: none;
overflow-y: auto;
padding: var(--s3) var(--gut) var(--s7);
}
.v2 .menu-toggle__panel ul { list-style: none; margin: 0; padding: 0; display: block; }
.v2 .menu-toggle__panel > ul > li { border-block-start: 1px solid var(--line); }
.v2 .menu-toggle__panel > ul > li:first-child { border-block-start: 0; }
.v2 .menu-toggle__panel > ul > li > a {
display: flex;
align-items: center;
justify-content: space-between;
padding-block: var(--s4);
font-size: 1.3rem;
font-weight: 600;
color: var(--ink);
text-decoration: none;
}
.v2 .menu-toggle__panel .site-nav__caret {
inline-size: 8px;
block-size: 8px;
margin: 0;
border-right: 2px solid var(--brand);
border-bottom: 2px solid var(--brand);
/* מצביע שמאלה — כיוון ההתקדמות ב-RTL. */
transform: rotate(135deg);
}
/* לוגו המובייל +10% — בשני המצבים (ג'וני): מכפיל על כל הנוסחה,
כך שגם הרגיל וגם הנגלל גדלים יחד. */
.v2 .site-header--overlay .logo-swap img {
block-size: calc((clamp(34px, 3.9vw, 52px) - var(--hdr) * clamp(0px, 0.55vw, 8px)) * 1.1);
}
/* ה"מגה" נפרש כאקורדיון — סגור כברירת מחדל (ג'וני), נפתח בכפתור. */
.v2 .menu-toggle__panel .mega {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: 0;
background: none;
pointer-events: auto;
display: none;
}
.v2 .menu-toggle__panel .has-mega.is-open > .mega { display: block; }
/* שורת התחום: הקישור מנווט, הכפתור פותח. מקום לכפתור בקצה. */
.v2 .menu-toggle__panel .has-mega { position: relative; }
.v2 .menu-toggle__panel .has-mega > a { padding-inline-end: 56px; }
/* החץ של הקישור מיותר כשיש כפתור — הכפתור נושא את החץ. */
.v2 .menu-toggle__panel .has-mega > a .site-nav__caret { display: none; }
.v2 .menu-toggle__panel .mnav-toggle {
position: absolute;
inset-inline-end: 0;
inset-block-start: 6px;
inline-size: 48px;
block-size: 48px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--w);
cursor: pointer;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.v2 .menu-toggle__panel .mnav-toggle::before {
content: "";
inline-size: 9px;
block-size: 9px;
border-right: 2px solid var(--brand);
border-bottom: 2px solid var(--brand);
transform: translateY(-2px) rotate(45deg);
transition: transform 200ms var(--ease);
}
.v2 .menu-toggle__panel .has-mega.is-open > .mnav-toggle {
background: var(--tint);
border-color: var(--brand);
}
.v2 .menu-toggle__panel .has-mega.is-open > .mnav-toggle::before {
transform: translateY(2px) rotate(225deg);
}
.v2 .menu-toggle__panel .mega__intro,
.v2 .menu-toggle__panel .mega__foot { display: none; }
.v2 .menu-toggle__panel .mega__grid { display: block; padding: 0 0 var(--s3); }
.v2 .menu-toggle__panel .mega__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.v2 .menu-toggle__panel .mega__item {
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s2);
border-radius: var(--r1);
color: var(--ink);
text-decoration: none;
}
.v2 .menu-toggle__panel .mega__item:active { background: var(--tint); }
.v2 .menu-toggle__panel .mega__fig {
flex: none;
inline-size: 46px;
block-size: 36px;
padding: 3px 5px;
background: var(--tint);
border-radius: var(--r1);
}
.v2 .menu-toggle__panel .mega__fig .fig__svg { display: block; inline-size: 100%; block-size: 100%; }
.v2 .menu-toggle__panel .mega__txt { display: grid; gap: 0; min-inline-size: 0; }
.v2 .menu-toggle__panel .mega__txt b {
display: flex;
align-items: baseline;
gap: var(--s2);
font-size: var(--fs-small);
font-weight: 600;
color: var(--ink);
}
.v2 .menu-toggle__panel .mega__txt > span:last-child { font-size: 0.78rem; color: var(--muted); }
.v2 .menu-toggle__panel .mega__tag {
flex: none;
padding: 0.08rem 0.5rem;
border-radius: 999px;
background: var(--tint);
color: var(--blue-600);
font-size: 0.65rem;
font-weight: 700;
}
.v2 .menu-toggle__panel .mnav-cta {
display: grid;
gap: var(--s3);
margin-block-start: var(--s5);
padding-block-start: var(--s5);
border-block-start: 1px solid var(--line);
}
.v2 .menu-toggle__panel .mnav-cta .b { inline-size: 100%; }
.v2 .menu-toggle__panel .mnav-cta .micro { text-align: center; color: var(--muted); }
}
@media (prefers-reduced-motion: no-preference) {
.v2 .menu-toggle[open] .menu-toggle__panel { animation: v2-mnav 260ms var(--ease); }
}
@keyframes v2-mnav {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
טופס הלידים — מחובר (24.9, inc/leads.php)
-------------------------------------------------------------------------- */
.v2 .form .form__alt { inline-size: 100%; margin-block-start: var(--s3); }
.v2 .form .form__note { margin-block-start: var(--s3); }
/* honeypot: מחוץ למסך, לא display:none (חלק מהבוטים מדלגים על אלה). */
.hp-field { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.v2 .form__done {
padding: var(--s4);
border-radius: 4px;
background: var(--tint);
border-inline-start: 3px solid var(--blue-600);
margin-block-end: var(--s4);
outline: none;
}
.v2 .form__done h3 { margin: 0 0 var(--s2); color: var(--ink); }
.v2 .form__done p { margin: 0; color: var(--body); }
.v2 .form__done .b { inline-size: 100%; margin-block-start: var(--s4); }
.v2 .form__done--err { background: #FDF1EF; border-inline-start-color: #B3261E; }