/* ===================================================================
site.css — גיליון הסגנון המשותף של האתר
===================================================================
מקור הסגנון המשותף של דף הבית ועמודי המשנה. ערכי היסוד
מגיעים מ-design-tokens.css; גאומטריה ייחודית נשארת עם הרכיב שלה.
=================================================================== */
/* ===== Afek ===== */
/* 5.10.2026: the folder name is Hebrew and contains a space, so the paths are
written percent-encoded. Every browser and server reads that form the same
way; the raw form depends on the server's handling of UTF-8 paths. */
@font-face{
font-family:'Afek';
src: url("/fonts/afek-regular.woff2") format('woff2'),
url("/fonts/afek-regular.woff") format('woff');
font-weight:400; font-display:swap;
}
@font-face{
font-family:'Afek';
src: url("/fonts/afek-medium.woff2") format('woff2'),
url("/fonts/afek-medium.woff") format('woff');
font-weight:500; font-display:swap;
}
@font-face{
font-family:'Afek';
src: url("/fonts/afek-demibold.woff2") format('woff2'),
url("/fonts/afek-demibold.woff") format('woff');
font-weight:600; font-display:swap;
}
@font-face{
font-family:'Afek';
src: url("/fonts/afek-bold.woff2") format('woff2'),
url("/fonts/afek-bold.woff") format('woff');
font-weight:700; font-display:swap;
}
@font-face{
font-family:'Afek';
src: url("/fonts/afek-ultrabold.woff2") format('woff2'),
url("/fonts/afek-ultrabold.woff") format('woff');
font-weight:800; font-display:swap;
}
/* ===== גופן כתב יד — לשימוש בהערה שמעל הכותרת בלבד ===== */
@font-face{
font-family:'OhYaelLeibushor';
src: url("/fonts/ohyael-regular.woff2") format('woff2'),
url("/fonts/ohyael-regular.woff") format('woff');
font-weight:400; font-style:normal; font-display:swap;
}
:root{
--ink: var(--color-ink);
--orange: var(--color-accent);
/* גרדיאנט ההדגשה — זהה לזה של כותרת ההירו, מוחל על כל
ההדגשות הכתומות בכותרות הדף */
--grad-accent: var(--gradient-accent);
/* ===== ההידר הצף =====
--hd-h הוא מקור האמת לגובה ההידר. כל אזור מלא-מסך גוזר ממנו
את גובהו, כך ששינוי כאן מתעדכן בכל הדף אוטומטית. */
--hd-h: 72px; /* הגובה שההידר גוזל מהמסך */
--hd-pad-x: 46px; /* שוליים צדדיים */
/* מיקום הכפתור מהקצה השמאלי. נפרד מ---hd-pad-x כדי שאפשר
יהיה להזיז אותו בלי להזיז את שוליי ההידר. */
--hd-pill-x: 14px; /* לפני הגלילה — קרוב לקצה */
--hd-pill-x-stuck: 46px; /* ובגלילה — בתוך הפס הצף */
--hd-logo: 82px; /* גודל הלוגו לפני הגלילה */
--hd-logo-stuck: 72px; /* וגודלו אחרי — חורג מגבולות הפס */
--hd-float-top: 23px; /* ריחוף מהקצה לפני הגלילה */
--hd-float-top-stuck: 6px; /* ובגלילה — צמוד יותר לראש המסך */
--hd-float-w: 1280px; /* רוחב הכרטיס הצף — רחב */
--hd-radius: var(--radius-pill);/* גלולה */
--hd-shadow: var(--shadow-floating);
--hd-pop: 18px; /* כמה הלוגו חורג מתחתית הפס בגלילה */
--hd-stuck-pad: 16px; /* ריפוד אנכי בגלילה — פס נמוך */
--hd-blur: 16px; /* עוצמת טשטוש הזכוכית */
--hd-glass-op: 72%; /* אטימות הזכוכית — נמוך = שקוף יותר */
--hd-plate-pad: 6px; /* טבעת הרקע סביב הלוגו */
--hd-left-gap: 0px; /* מרווח נוסף בין התפריט לכפתור */
--hd-logo-gap: 58px; /* מרווח בין הלוגו לשני חצאי התפריט */
/* חצי הרוחב של הלוגו הגדול מבין השניים + הטבעת + המרווח.
זה מה שמונע מהתפריט לעלות על הלוגו בכל מצב. */
--hd-nav-inset: calc(max(var(--hd-logo), var(--hd-logo-stuck)) / 2
+ var(--hd-plate-pad) + var(--hd-logo-gap));
--cta-flow: 4s; /* מהירות זרימת הגרדיאנט בכפתור */
--hero-top-gap: 46px; /* מרווח מתחת להידר עד לתגית */
--g-bottom: 60px; /* האוויר בין הגלריה לפס השותפים */
/* כתב היד כטקסט חי (היה תמונות PNG) */
--script-fs: 26px; /* כתב היד "96% מהתרומה שלך" — הוגדל ב-5px (14.9.2026) */
--script-lh: 1.12;
--script-rot: 0deg;
--script-op: 1;
--script-grad: 0; /* 1 = גרדיאנט, 0 = צבע אחיד (חום) */
--script-col: #431F10; /* הצבע במצב אחיד */
--jtext-fs: 22px; /* "אנחנו פועלים בשיתוף" — הוגדל ב-5px (14.9.2026) */
--jtext-lh: 1.1;
--cream: var(--color-canvas);
--dash-beige: var(--color-muted-border);
/* קרוסלה — הגודל נגזר גם מרוחב וגם מגובה החלון, שומר על המרווח לשורת השותפים */
/* ===== ערכי עיצוב — ההגדרות שחן בחרה בפאנל (21.7.2026) ===== */
--h1s1: 69px; /* כותרת שורה 1 */
--h1s2: 69px; /* כותרת שורה 2 — זהה לשורה 1 */
--ps: 19px; /* גודל פסקה */
--ctah: 47px; /* גובה כפתור תרומה */
--ctaf: 19px; /* טקסט כפתור תרומה */
--arrow-d: 37px; /* עיגול החץ בכפתור */
--arrow-svg: 23px; /* החץ עצמו */
--logo-size: 118px;
--nav-fs: 16px;
--nav-gap: 26px;
--pill-fs: 14px;
--copy-mt: 36px;
--p-mt: 4px;
--card-w: clamp(180px, 16.5vw, 270px); /* רוחב כרטיס — הערך שחן בחרה */
--card-ratio: 0.85; /* יחס רוחב/גובה — הערך שחן בחרה */
--card-radius: 13px;
--card-border: 3px;
--orbit-top: 16px;
--dash-size: 60px; /* עיגול מקווקו */
--dash-right: -65px;
--dash-top: 480px;
--dash-op: 0.55;
/* רקע ואלמנטים בקוד — במקום תמונת הרקע */
--hero-bg: var(--cream);
--peach-size: 540px; /* עיגול אפרסק + טבעת — שמאל למעלה */
--peach-x: -155px;
--peach-y: -225px;
--peach-op: 0;
--blue-size: 100px; /* עיגול תכלכל — ימין למעלה */
--blue-x: -400px;
--blue-y: -400px;
--blue-op: 0;
/* שכבת טון חמימה אחידה על כל המדיה בקרוסלה */
--tone-color: #E17B3D;
--tone-op: 0.2;
--tone-blend: multiply;
/* אליפסת חום מטושטשת מאחורי הכותרת — Ellipse 99 מהפיגמה */
--warm-w: 1130px;
--warm-h: 690px;
--warm-x: 0px; /* הזזה מהמרכז */
--warm-y: 150px;
--warm-op: 0.7;
--warm-blur: 160px;
--warm-color: #FFF0E9;
--partner-h: 45px; /* גובה לוגו שותפים */
--partners-bottom: 38px; /* היה 52px — צומצם כדי שפס השותפים
ייכנס למסך הראשון עם ההידר הדביק */
/* מרווחים סימטריים סביב הקו המפריד — 0 מול 8 הסיטו
את קבוצת הלוגואים 7px משמאל למרכז המסך */
--p-gap1: 4px; /* רווח: לוגו הרווחה ← קו מפריד */
--p-gap2: 4px; /* רווח: קו מפריד ← המיזם הלאומי */
--p-gap3: 59px; /* רווח: המיזם הלאומי ← חץ + כתב יד */
--pdiv-h: 50px; /* גובה הקו המפריד */
--pdiv-w: 1px; /* עובי הקו המפריד */
--pdiv-color: #D9D0C8; /* צבע הקו המפריד */
--jtext-w: 118px; /* כתב יד "אנחנו / פועלים בשיתוף" — שתי שורות */
--jtext-x: 12px; /* כתב יד — הזזה אופקית */
--jtext-y: -2px; /* כתב יד — הזזה אנכית */
--jtext-rot: -3deg; /* כתב יד — סיבוב */
--jarrow-w: 117px; /* חץ מקווקו — גודל */
--jarrow-x: -82px; /* חץ — הזזה אופקית (הורחק ימינה, 14.9.2026) */
--jarrow-y: -26px; /* חץ — הזזה אנכית */
--jarrow-rot: 0deg; /* חץ — כיוון (סיבוב) */
/* עיטורי כותרת */
--hand-w: 100px; /* כתב יד "365 ימים" ליד הכותרת — גודל */
--hand-x: 149px; /* מרחק החוצה מימין לכותרת */
--hand-y: 240px; /* מיקום אנכי */
--hand-rot: -10deg;
--harr-w: 225px; /* חץ מקווקו ליד הכותרת — גודל */
--harr-x: 307px; /* מרחק החוצה מימין לכותרת */
--harr-y: 194px; /* מיקום אנכי */
--harr-rot: 0deg;
--heart-w: 36px; /* לב — גודל */
--heart-x: 60px; /* מרחק החוצה משמאל לכותרת */
--heart-y: 186px; /* מיקום אנכי */
--heart-rot: 0deg;
--deco-k: 1; /* מקדם הקטנה לעיטורים במסכים צרים */
/* ===== מסך אודות — סיפור נגלל ===== */
/* --abt-count נכתב מה-JS לפי ABOUT_STATES.length. לא לקודד מספר מצבים ידנית. */
--abt-count: 3;
/* צבעים — כולם נגזרים ממערכת העיצוב הקיימת, אין ערכים קשיחים */
--abt-bg: var(--hero-bg);
--abt-ink: var(--ink); /* טקסט כהה ראשי + שאר הכותרת */
--abt-accent: var(--orange); /* שורת הדגשה + חץ + מחוון פעיל */
--abt-body: var(--ink);
--abt-curved: var(--ink); /* הטקסט המעוגל */
--abt-icon-color: var(--ink);
/* חלקי הלוגו — כל אחד משתנה נפרד, לפי הרפרנס */
--abt-logo-hands: #EDE4DB; /* ידיים — אפור-בז' חמים ובהיר */
--abt-logo-spoon: #FBF7F2; /* כף — טון בהיר, עקבי עם חזית הלוגו */
--abt-logo-ring: var(--abt-ink); /* הטבעת החיצונית — חום כהה כמו ברפרנס ובנכס המקורי */
--abt-dot: color-mix(in srgb, var(--abt-ink) 14%, var(--abt-bg));
--abt-dot-done: color-mix(in srgb, var(--abt-ink) 38%, var(--abt-bg));
/* ===== מידות — 1:1 מהפיגמה (מסגרת 1207×600) =====
כל מידה נמדדה מצילום המסך ומוכפלת ב---abt-k, כך שהיחסים נשמרים בכל רוחב מסך.
k = רוחב החלון / 1207. שינוי מספר כאן = שינוי בפיקסלים של הפיגמה. */
--abt-k: 1; /* מחושב ב-JS: רוחב החלון / 1207, מוגבל ל-0.6..1.42 */
--abt-wrap: calc(880px * var(--abt-k));
--abt-vh: 100; /* מכפיל גובה הסצנה הדביקה (vh לכל מצב) */
--abt-logo-size: calc(330px * var(--abt-k));
--abt-logo-y: 30px; /* היסט אנכי של הלוגו */
--abt-gap: 0px;
--abt-col-w: calc(230px * var(--abt-k));
--abt-left-w: calc(230px * var(--abt-k));
--abt-right-w: calc(230px * var(--abt-k));
--abt-left-x: calc(-14px * var(--abt-k)); /* היסט אופקי של הבלוק השמאלי */
--abt-left-y: calc(6px * var(--abt-k));
--abt-right-x: calc(14px * var(--abt-k)); /* היסט אופקי של הבלוק הימני */
--abt-right-y: 0px;
--abt-h1: calc(50px * var(--abt-k));
--abt-h1-lh: 1.05;
--abt-body-size: calc(16px * var(--abt-k));
--abt-body-lh: 1.4;
--abt-para-gap: calc(10px * var(--abt-k)); /* מרווח בין פסקאות */
/* ===== מערכת Layout גלובלית =====
מקור אמת יחיד לרוחב התוכן ולשוליים. כל סקשן באתר יושב על
.site-container, כך שהשוליים בצדדים זהים לאורך כל הדף.
שינוי כאן משנה את כל האתר. */
/* ===== שני רוחבי תוכן מוגדרים לכל הדף =====
רגיל — אזורי טקסט; רחב — גלריות, קרוסלות ופסי אמון.
אין ערכי רוחב אחרים בדף. */
--container-max-width: var(--container-content); /* רוחב התוכן הרגיל */
--page-padding-desktop: 80px;
--page-padding-laptop: 56px;
--page-padding-tablet: 32px;
--page-padding-mobile: 20px;
--page-padding: var(--page-padding-desktop); /* הערך הפעיל, מתחלף במדיה-קוורי */
/* ריווח אנכי אחיד לסקשנים */
--section-padding-y-desktop: 96px;
--section-padding-y-tablet: 72px;
--section-padding-y-mobile: 56px;
--section-padding-y: var(--section-padding-y-desktop);
/* כינויים לאחור — הקוד הקיים משתמש בשמות האלה */
--page-wrap: var(--container-max-width);
--page-pad: var(--page-padding);
/* ===================================================================
סולם טיפוגרפיה גלובלי — מקור אמת יחיד
===================================================================
כל clamp() נוסחתו: clamp(מובייל, נוסחה נזילה, דסקטופ).
הערך האמצעי גדל עם רוחב המסך, ולכן אין "מדרגות" בין
ה-breakpoints — הטיפוגרפיה זורמת ברציפות מ-320px עד 1440px.
הרצפה של כל טוקן נקבעה לפי קריאוּת במובייל, לא לפי
"מה נכנס במסך": טקסט גוף לא יורד מ-16px, ומשני מ-14px.
מדוע 0.0Xvw ולא vw בלבד: המקדם נגזר מהפרש הגדלים חלקי
הפרש הרוחבים (1440-360=1080px), כך שהערך העליון מושג
בדיוק ב-1440px ולא לפני כן. */
/* כותרת ראשית (הירו) — 40px במובייל, 76px בדסקטופ */
--font-display: clamp(2.5rem, 1.6667rem + 3.7037vw, 4.75rem);
/* כותרת אזור — 32px במובייל, 56px בדסקטופ */
--font-section-title: clamp(2rem, 1.5rem + 2.2222vw, 3.5rem);
/* תת-כותרת — 22px במובייל, 32px בדסקטופ */
--font-section-subtitle: clamp(1.375rem, 1.1667rem + 0.9259vw, 2rem);
/* טקסט גוף — 16px במובייל, 18px בדסקטופ. הרצפה היא הדרישה
הנגישותית, ולכן היא לא יורדת גם במסכים צרים מאוד. */
--font-body: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
/* טקסט משני — 14px..15px. מתחת ל-14px אסור לתוכן מהותי. */
--font-small: clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);
/* טקסט בכפתור — 16px..18px, לעולם לא קטן מ-16px (iOS zoom) */
--font-button: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
/* תגית אזור — 14px..16px */
--font-tag: clamp(0.875rem, 0.8333rem + 0.1852vw, 1rem);
/* ===================================================================
סולם ריווח אנכי — הקצב של הדף
===================================================================
כל המרווחים בין רכיבי אזור נגזרים מכאן, כך שהיחס
תגית→כותרת→תיאור→תוכן→CTA זהה בכל אזורי הדף. */
--space-3xs: clamp(0.25rem, 0.2292rem + 0.0926vw, 0.375rem); /* 4..6 */
--space-2xs: clamp(0.5rem, 0.4583rem + 0.1852vw, 0.75rem); /* 8..12 */
--space-xs: clamp(0.75rem, 0.6667rem + 0.3704vw, 1.25rem); /* 12..20 */
--space-sm: clamp(1rem, 0.8333rem + 0.7407vw, 1.5rem); /* 16..24 */
--space-md: clamp(1.5rem, 1.25rem + 1.1111vw, 2.25rem); /* 24..36 */
--space-lg: clamp(2rem, 1.6667rem + 1.4815vw, 3rem); /* 32..48 */
--space-xl: clamp(2.5rem, 1.875rem + 2.7778vw, 4.5rem); /* 40..72 */
--space-2xl: clamp(3.5rem, 2.9167rem + 2.5926vw, 5.25rem); /* 56..84 */
/* המרווחים הקנוניים בתוך אזור — כל אזור משתמש באלה */
--gap-tag-title: var(--space-sm); /* תגית → כותרת */
--gap-title-desc: var(--space-xs); /* כותרת → תיאור */
--gap-desc-content: var(--space-lg); /* תיאור → תוכן */
--gap-content-cta: var(--space-lg); /* תוכן → כפתור */
/* ===================================================================
מטרות מגע — דרישת נגישות
===================================================================
44px הוא המינימום של Apple HIG / WCAG 2.5.8 עבור כל בקר
אינטראקטיבי. בדסקטופ אפשר קטן יותר כי יש עכבר מדויק. */
--tap-min: 44px;
/* ===== תגית אזור — רכיב גלובלי (.section-tag) =====
שלושת העיגולים החופפים, מאותו נכס שמשמש את שאר התגיות באתר. */
--tag-w: 170px; /* רוחב התגית */
--tag-fs: 15px; /* גודל הטקסט בתגית */
/* ===== אזור הסיום (פוטר מעוצב) ===== */
--ft-overlay: 0.88; /* עוצמת שכבת החום מעל תמונת הרקע */
--ft-max-h: 100vh; /* גובה מרבי לאזור כולו, כולל הלוגו */
--ft-max-h-dvh: 100dvh; /* אותו ערך ב-dvh — מונע קפיצה כששורת הכתובת בנייד נסגרת */
--ft-pad-top: 106px; /* מקום ללוגו שחוצה את הגבול */
--ft-pad-bottom: 36px;
--ft-logo: 138px; /* קוטר הלוגו העליון */
--ft-logo-out: 0.56; /* איזה חלק מהלוגו מעל הקו */
--ft-logo-ring: 14px; /* עובי הטבעת בצבע הרקע סביב הלוגו */
--ft-strip-inner-gap: 0px; /* מרווח בין בלוקי פס האמון בפוטר */
--ft-strip-pad: 19px; /* ריפוד פנימי — נמוך יותר מהאזור הקודם */
--ft-strip-r: 22px;
--ft-strip-tile: 76px; /* גודל לוגו השותף */
--ft-strip-title: 28px; /* "תרמו בבטחון" */
--ft-strip-title-w: 180px; /* רוחב בלוק "תרמו בבטחון" */
--ft-strip-h3: 18px;
/* היה 13px — מתחת לרצפת הקריאוּת של המערכת */
--ft-strip-p: var(--font-small);
--ft-title: 65px; /* אחיד לכל כותרות הדף */
--ft-title-lh: 1.05;
--ft-title-gap: 14px; /* לוגו↔כותרת */
--ft-cta-gap: 44px; /* כותרת↔כפתורים (+20px, 14.9.2026) */
--ft-cta-h: 38px;
--ft-cta-fs: 15px;
--ft-social-gap: 64px; /* כפתורים↔רשתות (+20px, 14.9.2026) */
--ft-social: 37px; /* קוטר עיגול הרשת */
--ft-social-space: 10px;
--ft-social-img: 67%; /* גודל האייקון בתוך העיגול */
--ft-social-line: 370px; /* אורך הקו המקווקו מכל צד */
--ft-social-dash-w: 2px; /* עובי הקו המקווקו */
--ft-social-dash-gap: 12px; /* מרווח בין העיגולים לקו */
--ft-cols-gap: 62px; /* רשתות↔עמודות (+20px, 14.9.2026) */
--ft-col-title: 16px;
--ft-col-link: 13px;
--ft-col-space: 3px; /* מרווח בין הקישורים */
--ft-strip-gap: 28px; /* עמודות↔פס האמון */
--ft-note: 13px; /* שורת הקרדיט התחתונה */
--ft-note-gap: 14px; /* פס האמון↔קרדיט */
/* קישוטים */
/* הקשת ממשיכה מהאזור שמעל — לכן היא מתחילה מעל גבול הפוטר */
--ft-arc: 460px;
--ft-arc-x: -60px;
--ft-arc-y: -300px;
--ft-arc-op: 0.75;
--ft-blob: 250px;
--ft-blob-x: -110px;
--ft-blob-y: -90px;
--ft-blob-op: 0.09;
--ft-arc2: 100px; /* קשת מקווקוות — שמאל למטה */
--ft-arc2-x: -190px;
--ft-arc2-y: -170px;
--ft-arc2-op: 0.42;
--ft-arcshow: 0; /* עיגולים מקווקווים בפוטר: 0 מוסתרים, 1 מוצגים */
--ft-arc-display: none; /* נגזר מ---ft-arcshow דרך הפאנל */
--ft-glow: 280px; /* עיגול בהיר ליד הקשת הימנית */
--ft-glow-x: -40px;
--ft-glow-y: 130px;
--ft-glow-op: 0.03;
/* ===== סקשן "פעילות מהשטח" — גלריית אקורדיון ===== */
--fg-min-h: 70vh; /* גובה האזור */
--fg-min-h-dvh: 70dvh; /* אותו ערך ב-dvh — מונע קפיצה כששורת הכתובת בנייד נסגרת */
--fg-pad-y: 66px;
/* פרופורציות מהמקור: הקומפוזיציה ~83% מרוחב ה-viewport,
הגלריה ~56%, הכותרת ~18%, המרווח ~9% */
--fg-wrap: 83vw; /* נשמר לתאימות; הרוחב מגיע מ---container-wide */
--fg-gallery-w: 76%; /* יחסית לקונטיינר, לא לחלון */
--fg-gap: 46px; /* גלריה↔כותרת */
--fg-title: 65px; /* אחיד לכל כותרות הדף */
--fg-title-lh: 0.89;
--fg-tag-gap: 22px; /* תגית↔כותרת */
--fg-tag-x: 24px; /* הזזת התגית ימינה */
--fg-nav-top: 34px; /* כותרת↔חצים */
--fg-h: 390px; /* גובה הגלריה */
/* יחסי הרוחב במניפה: הפעיל ~55% מהגלריה, כל רצועה ~11% */
--fg-open-fr: 7.5;
--fg-strip-fr: 1;
--fg-open: 440px; /* שמור לתאימות; הרוחב בפועל ביחסים */
--fg-strip: 64px;
--fg-item-gap: 9px; /* מרווח בין הפריטים */
--fg-r: 39px; /* עיגול פינות */
--fg-fade: .54s; /* משך הפתיחה */
--fg-icon: 37px; /* קוטר עיגול האייקון */
--fg-icon-img: 70%; /* גודל האייקון בתוך העיגול */
--fg-icon-bottom: 22px;
--fg-icon-lift: 10px; /* הרמת האייקון ברצועה סגורה */
--fg-icon-bg-op: 0.72; /* שקיפות רקע האייקון במצב סגור */
--fg-yt-zoom: 1.45; /* הגדלת נגן יוטיוב — מסתירה את הכיתובים שלו */
--fg-label: 15px; /* גודל הכותרת בפריט הפתוח */
/* היה 13px — מתחת לרצפת הקריאוּת של המערכת */
--fg-desc: var(--font-small);
/* קישוטים */
/* העיגול המקווקו — גדול, בצד שמאל, חלקו נכנס מתחת לגלריה */
--fg-arc: 360px;
--fg-arc-x: -90px;
--fg-arc-y: -30px;
--fg-blob: 180px; /* עיגול ירקרק בתוך המקווקו */
--fg-blob-x: -30px;
--fg-blob-y: 10px;
--fg-blob-op: 0.55;
--fg-peach: 380px; /* צורה אפרסקית — ימין למטה, עדינה */
--fg-peach-x: -170px;
--fg-peach-y: -210px;
--fg-peach-op: 0.35;
--fg-deco: 0; /* קישוטי רקע: 0 = מוסתרים (ברירת המחדל), 1 = מוצגים */
--fg-deco-display: none; /* נגזר מ---fg-deco דרך הפאנל */
/* ===== סקשן "רוצים להיות חלק ממעגל הנתינה?" ===== */
--jn-bg: #FFF5F0; /* רקע אפרסק בהיר */
--jn-min-h: 60vh;
--jn-min-h-dvh: 60dvh; /* אותו ערך ב-dvh — מונע קפיצה כששורת הכתובת בנייד נסגרת */
--jn-pad-y: 46px;
--jn-gap: 110px; /* טופס↔טקסט */
--jn-title: 65px; /* אחיד לכל כותרות הדף */
--jn-title-lh: 0.96;
--jn-body: 15px;
--jn-body-lh: 1.6;
--jn-body-w: 610px;
--jn-body-gap: 10px; /* כותרת↔טקסט */
--jn-wrap: 1330px; /* רוחב האזור — רחב יותר, כדי שהכותרת תישאר בשורה אחת */
/* הטופס */
--jn-form-w: 520px;
--jn-form-pad: 40px;
--jn-form-r: 22px;
--jn-form-title: 22px;
--jn-field-h: 41px;
--jn-field-r: 999px;
--jn-field-fs: 15px;
--jn-field-gap: 12px;
--jn-btn-h: 46px;
--jn-btn-fs: 18px;
--jn-btn-r: var(--button-radius);
/* תג 22+ */
--jn-badge-pad: 9px;
--jn-badge-r: 16px;
--jn-badge-gap: 14px;
--jn-badge-top: 16px;
--jn-avatar: 56px; /* קוטר תמונת המתנדב/ת */
--jn-num: 37px;
--jn-num-label: 14px;
/* קישוטים */
--jn-arrow-w: 150px; /* החץ המקווקו מעל הטופס */
--jn-arrow-x: -50px;
--jn-arrow-y: -18px;
--jn-ring: 340px; /* העיגול המקווקו משמאל-תחתון */
--jn-ring-x: -80px;
--jn-ring-y: -70px;
--jn-ring-op: 0.16;
/* ===== סקשן "המתנדבים שלנו" =====
מניפת כרטיסים אנכיים — אותה שפה כמו "הקולות מהשטח" */
--vl-k: 1; /* מחושב ב-JS לפי רוחב המסך */
--vl-pad-top: 0px;
--vl-pad-bottom: 0px;
--vl-tag-gap: 20px; /* תגית↔כותרת */
--vl-title: 65px; /* גודל הכותרת — אחיד לכל כותרות הדף */
--vl-cta-gap: 26px; /* מרווח מעל כפתור ההמשך */
--vl-bg: var(--cream); /* הצבע הבהיר הבסיסי של האתר,
כמו אזור הקולות מהשטח */
--vl-title-lh: 0.94;
--vl-lead: 15px; /* גודל פסקת ההסבר */
--vl-lead-w: 890px; /* רוחב מרבי לפסקה */
--vl-lead-gap: 12px; /* כותרת↔פסקה */
--vl-lead-lh: 1.45; /* גובה שורה בטקסט הרץ */
--vl-deck-gap: 24px; /* פסקה↔מניפה */
/* הכרטיסים */
/* === זהה לקרוסלת "הקולות מהשטח" === */
--vl-card-w: calc(312px * var(--vl-k)); /* רוחב הכרטיס הפעיל */
--vl-card-h: calc(400px * var(--vl-k)); /* גובה הכרטיס הפעיל */
--vl-card-r: 29px; /* עיגול פינות — כמו כרטיסי האתר */
--vl-border: 3px; /* עובי המסגרת החומה בכרטיס הפעיל */
--vl-step: calc(168px * var(--vl-k)); /* מרחק אופקי בין כרטיסים */
--vl-veil: 0.7; /* שכבת הבהרה על כרטיס לא פעיל */
--vl-s1: .85; --vl-s2: .83; --vl-s3: .81;
--vl-r1: 3; --vl-r2: 8; --vl-r3: 8;
--vl-l1: 8; --vl-l2: 30; --vl-l3: 18;
--vl-desat: 0; /* בקרוסלת הקולות אין דהיית צבע */
--vl-fade: .62s; /* משך המעבר — כמו בקולות מהשטח */
--vl-deck-extra: 0px; /* מרווח נוסף בגובה אזור הקרוסלה */
--vl-play: 97px; /* קוטר כפתור ההפעלה */
/* שם ותפקיד */
--vl-name: 21px;
--vl-role: 17px;
--vl-name-gap: 10px;
/* חצים */
--vl-arrow: 42px;
--vl-arrow-gap: 14px;
--vl-arrow-top: 12px;
/* קישוטים */
--vl-peach: 560px; /* צורת אפרסק — ימין למעלה */
--vl-peach-x: -150px;
--vl-peach-y: -260px;
--vl-peach-op: 0.42;
--vl-ring: 176px; /* עיגול מקווקו מתחתיה */
--vl-ring-x: 150px;
--vl-ring-y: 118px;
--vl-ring-op: 0.34;
--vl-wave-op: 0.8; /* הקו הכתום הגלי */
--vl-wave-w: 2.2;
--vl-wave-y: 37%; /* גובה הקו בסקשן */
--vl-wave-h: 300px;
--vl-wave-dash: 9; /* אורך המקף */
--vl-wave-gap: 13; /* המרווח בין המקפים */
--vl-wave-col: #F16A2C; /* צבע הקו */
--vl-wave-display: block; /* 0/1 מהפאנל */
/* ===== סקשן "לזכרו של רועי" ===== */
--ry-bg: #431F10; /* רקע חום כהה — כמו אזור התרומות */
--ry-pad-top: 120px;
--ry-pad-bottom: 70px;
--ry-photo: 630px; /* רוחב תמונת רועי */
--ry-photo-x: 168px; /* מרחק התמונה מקצה שמאל */
--ry-photo-y: 0px; /* היסט אנכי לתמונה */
--ry-photo-top: 40px; /* כמה התמונה נמוכה מראש הסקשן */
--ry-min-h: 70vh; /* גובה האזור */
--ry-min-h-dvh: 70dvh; /* בנייד — גובה אמיתי בלי סרגל הכתובת */
--ry-gap: 20px; /* מרווח תמונה↔טקסט */
--ry-copy-w: 1000px; /* רוחב מרבי לגוש הטקסט */
--ry-copy-x: 66px; /* מרחק גוש הטקסט מימין */
--ry-copy-overlap: 218px; /* כמה הטקסט חופף לדהייה של התמונה */
--ry-title: 52px; /* גודל שורות הכותרת */
--ry-title-lh: 1.34;
--ry-mark-fs: 52px; /* גודל הטקסט על ההיילייט */
--ry-cta-gap: 34px; /* מרווח מעל כפתור ההמשך */
--ry-mark-pad: 16px; /* ריפוד אופקי בהיילייט */
--ry-mark-bg: #F16A2C; /* צבע ההיילייט */
--ry-icons-gap: 66px; /* מרווח בין האייקונים */
--ry-icons-top: 40px; /* מרווח טקסט↔אייקונים */
--ry-icon: 39px; /* גודל האייקון */
--ry-icon-label: 16px; /* טקסט מתחת לאייקון */
/* קישוטים */
--ry-arc: 300px; /* הקשת המקווקוות בפינה הימנית העליונה */
--ry-arc-x: -36px; /* מיקום הקשת מימין */
--ry-arc-y: -126px; /* מיקום הקשת מלמעלה */
--ry-arc-op: 0.75; /* שקיפות הקשת */
--ry-circle: 160px; /* העיגול המקווקו בשמאל */
--ry-ring-x: 40px; /* מיקום העיגול משמאל */
--ry-ring-bottom: 30%; /* מיקום העיגול מלמטה */
--ry-ring-op: 0.28; /* שקיפות העיגול */
/* הכתם יושב מעל התמונה (z-index:2), ולכן אפשר להגדיל אותו
בחופשיות — קצה התמונה כבר לא חותך אותו. */
--ry-blob: 330px; /* הכתם הרך בשמאל-תחתון */
--ry-blob-x: -40px; /* מיקום הכתם משמאל */
--ry-blob-y: -60px; /* מיקום הכתם מלמטה */
--ry-blob-op: 0.05; /* שקיפות הכתם */
/* ===== סקשן "יש לכם לב לתת?" =====
פס אמון עליון + מסלול מקווקו עם 4 תחנות מעורבות */
--gv-k: 1; /* מחושב ב-JS */
--gv-pad-top: 36px;
--gv-pad-bottom: 80px;
--gv-wrap: 1460px; /* רוחב האזור — רחב משאר הדף */
--gv-pad-x: 42px; /* שוליים צרים בצדדים */
/* פס האמון */
--gv-strip-bg: #FFF5F0; /* ורדרד-שמנתי עדין */
--gv-strip-r: 34px;
--gv-strip-pad: 44px;
--gv-strip-gap: 60px;
--gv-strip-title: 34px; /* "תרום / בבטחון" */
--gv-strip-h1: 23px; /* כותרת בלוק אמון */
--gv-strip-p: 19px; /* טקסט הסבר */
--gv-tile: 90px; /* ריבוע הלוגו */
--gv-tile-r: 12px;
/* אזור המעורבות */
--gv-title: 65px; /* "יש לכם / לב לתת?" */
--gv-title-lh: 1.06;
--gv-blue: var(--st-c1); /* התכלת הדקורטיבי של האתר */
--gv-icon: 74px; /* קוטר העיגול הכתום */
--gv-icon-in: 34px; /* גודל האייקון בתוכו */
--gv-dot: 38px; /* האינדיקטור הכחול הקטן */
--gv-label: 20px; /* טקסט התחנה */
--gv-path-w: 3px; /* עובי המסלול */
--gv-path-dash: 7px;
--gv-path-gap: 15px;
--gv-path-op: .85; /* שקיפות המסלול */
--gv-curve: 4.6; /* עוצמת הקימור — נמוך = רך יותר */
--gv-draw-time: 2.1s; /* משך אנימציית הציור */
--gv-stop-delay: .28s; /* השהיה בין תחנה לתחנה */
/* ===== אפקט הריחוף על תחנות התרומה ===== */
--gv-ring-gap: 9px; /* מרחק הטבעת המקווקוות מהעיגול */
--gv-ring-w: 2px;
--gv-ring-col: #F16A2C;
--gv-disc: 210px; /* קוטר העיגול שנפתח בריחוף */
--gv-icon-shrink: 0.2; /* כמה האייקון מתכווץ בתוך העיגול */
--gv-icon-y: -70%; /* וכמה הוא עולה — ביחס לגודלו */
--gv-cta-fs: 13px; /* גודל הטקסט בכפתור */
--gv-cta-gap: 10px; /* מרווח בין הכפתור לחץ התכלת */
--gv-tail: 190; /* אורך זנבות הקו מעבר לתחנות הקיצוניות */
--gv-flow-h: 390px; /* גובה אזור המסלול */
--gv-flow-gap: 80px; /* מרווח פס האמון ↔ המסלול */
/* ===== סקשן "הקולות מהשטח" =====
מבוסס על אותם טוקנים של שאר האתר. --vc-k מכייל את הקרוסלה
לרוחב המסך, באותה שיטה כמו --dn-k ו---abt-k. */
--vc-k: 1; /* מחושב ב-JS */
--vc-pad-top: 28px; /* ריפוד עליון */
--vc-pad-bottom: 30px; /* ריפוד תחתון */
--vc-title: 65px; /* גודל הכותרת */
--vc-title-lh: 1.02;
--vc-tag-gap: 22px; /* מרווח תגית↔כותרת */
--vc-lead: 17px; /* טקסט ההסבר */
--vc-lead-lh: 1.55;
--vc-lead-w: calc(830px * var(--vc-k)); /* רוחב טקסט ההסבר — שתי שורות מאוזנות */
--vc-lead-gap: 12px; /* מרווח כותרת↔טקסט */
--vc-deck-gap: 70px; /* מרווח טקסט↔קרוסלה */
--vc-card-w: calc(312px * var(--vc-k)); /* רוחב הכרטיס הפעיל */
--vc-card-h: calc(440px * var(--vc-k)); /* גובה הכרטיס הפעיל */
--vc-card-r: 29px; /* עיגול פינות — כמו כרטיסי האתר */
--vc-step: calc(168px * var(--vc-k)); /* מרחק אופקי בין כרטיסים */
--vc-arrow: 50px; /* קוטר כפתורי החצים */
--vc-arrow-out: 54px; /* מרווח בין קצה המניפה לחץ */
--vc-dots-gap: 0px; /* מרווח קרוסלה↔מחוון */
--vc-cta-gap: 42px; /* מרווח מחוון↔כפתור */
--vc-fade: .62s; /* משך המעבר בין שקופיות */
--vc-veil: 0.55; /* שכבת הבהרה על כרטיס לא פעיל */
--vc-autoplay: 4.5; /* מעבר אוטומטי — שניות לשקופית */
--vc-prog-w: 4px; /* עובי מסגרת ההתקדמות של הסרטון */
--vc-play: 97px; /* קוטר כפתור ה-Play בכרטיס הפעיל */
--vc-play-side: 68px; /* קוטר ה-Play בכרטיסים הצדדיים */
/* המניפה — סקייל, סיבוב וירידה לכל מרחק מהמרכז */
--vc-s1: .81; --vc-s2: .83; --vc-s3: .81;
--vc-r1: 3; --vc-r2: 8; --vc-r3: 8;
--vc-l1: 8; --vc-l2: 30; --vc-l3: 18;
--vc-deck-extra: 24px; /* מרווח נוסף בגובה אזור הקרוסלה */
/* עיגול הרקע הירקרק */
--vc-blob: calc(530px * var(--vc-k));
--vc-blob-x: calc(-190px * var(--vc-k));
--vc-blob-y: calc(260px * var(--vc-k));
--vc-blob-op: 14%;
/* הקשת המקווקוות */
--vc-arc: calc(410px * var(--vc-k));
--vc-arc-x: calc(-250px * var(--vc-k));
--vc-arc-y: calc(-340px * var(--vc-k));
--vc-arc-op: .55;
/* ===== סקשן "מסלולי תרומה" =====
כל המידות נלקחו מהפיגמה (frame 1737×1004) ומוכפלות ב---dn-k,
כך שהיחסים נשמרים בכל רוחב מסך. k = רוחב החלון / 1737.
שינוי מספר כאן = שינוי בפיקסלים של הפיגמה. */
/* קישוט הפינה */
/* כפתור */
/* ===== סקשן "הפעילות שלנו" ===== */
--ac-pad-top: 78px; /* ריפוד עליון של הסקשן */
--ac-pad-bottom: 92px; /* ריפוד תחתון של הסקשן */
--ac-tag-gap: 26px; /* מרווח בין התגית לכותרת */
--ac-grid-gap: 76px; /* מרווח בין הכותרת לשורת הכרטיסים */
--ac-title: 65px; /* גודל הכותרת — אחיד לכל כותרות הדף */
--ac-title-lh: 1.02; /* גובה שורה בכותרת */
--ac-h: 420px; /* גובה הכרטיסים = גם קוטר העיגול הפעיל */
--ac-closed: 228px; /* רוחב כרטיס סגור */
--ac-gap: 48px; /* מרווח בין הכרטיסים (המקווקו בולט מכל צד) */
--ac-dash-gap: 12px; /* מרחק המסגרת המקווקוות מהתמונה (פנימי) */
--ac-dash-w: 2px; /* עובי קו המקווקו */
--ac-dash-len: 11px; /* אורך כל קו — גדול יותר = פחות קווים */
--ac-dash-space: 14px; /* רווח בין קו לקו */
--ac-dash-color: #6c4e42; /* צבע המקווקו */
--ac-fade: 0.45s; /* משך המעבר בין מצבים */
--ac-closed-op: 0.7; /* עמעום התמונה בכרטיס סגור */
--ac-closed-sat: 0.65; /* רוויית הצבע בכרטיס סגור */
--ac-veil: 44%; /* עוצמת שכבת ההבהרה בכרטיס סגור */
--ac-label: 22px; /* גודל שם הפעילות */
--ac-label-bottom: 26px; /* מרחק השם מתחתית הכרטיס */
--ac-btn-bottom: 34px; /* מרחק הכפתור מתחתית העיגול */
--ac-btn-fs: 17px; /* גודל הטקסט בכפתור */
--ac-btn-pad: 23px; /* ריפוד אופקי בכפתור */
--ac-btn-arrow: 28px; /* קוטר עיגול החץ */
--ac-btn-op: 0.78; /* שקיפות רקע הכפתור */
/* ===== סקשן "העשייה במספרים" ===== */
--st-h: 455px; /* גובה הסקשן בדסקטופ */
--st-overlay: 0.62; /* עוצמת שכבת הכהות מעל התמונה */
--st-title: 65px; /* גודל הכותרת */
--st-circle: 210px; /* קוטר העיגולים */
--st-gap: 22px; /* מרווח בין עיגול לעיגול */
--st-num: 37px; /* גודל המספר בעיגול */
--st-num-weight: 900; /* עובי המספר */
--st-label: 20px; /* גודל הטקסט בעיגול */
--st-mark-h: 1.08em; /* גובה הבלוק — מעט יותר מגובה האותיות, עוטף אותן */
--st-mark-w: 102%; /* רוחב הבלוק — 100% = רוחב המילה */
--st-mark-bottom: 0.02em; /* מיקום אנכי של הבלוק ביחס למילה */
--st-wrap-gap: 44px; /* מרווח בין הכותרת לשורת העיגולים */
/* צבעי העיגולים — מהמיתוג */
--st-c1: #8FC4E3; /* כחול בהיר */
--st-c2: #CBD5BD; /* ירוק-מרווה */
--st-c3: #F26735; /* כתום */
--st-c4: #4B2418; /* חום כהה */
--abt-icon-gap: 0px; /* מרווח בין האייקון לטקסט */
--abt-cta-gap: calc(12px * var(--abt-k)); /* מרווח בין הטקסט לכפתור */
--abt-note-size: calc(24px * var(--abt-k)); /* כתב היד — טקסט חי בגופן OhYaelLeibushor */
--abt-note-lh: 1.05;
--abt-note-w: calc(150px * var(--abt-k));
--abt-note-x: calc(0px * var(--abt-k));
--abt-note-y: calc(0px * var(--abt-k));
--abt-note-rot: -4deg;
--abt-note-color: var(--abt-ink);
--abt-arrow-w: calc(112px * var(--abt-k)); /* החץ המקווקו */
--abt-arrow-x: calc(14px * var(--abt-k));
--abt-arrow-y: calc(-18px * var(--abt-k));
--abt-arrow-h: calc(70px * var(--abt-k));
/* אייקון הלב בבלוק השמאלי — יושב בשמאל, עם היסטים */
--abt-icon-size: calc(39px * var(--abt-k));
--abt-icon-x: 0px;
--abt-icon-y: 0px;
--abt-icon-w: 1.6;
--abt-curved-size: 52px;
--abt-curved-weight: 800;
--abt-curved-track: 1.5px;
--abt-curved-r: 430px; /* רדיוס בסיס לקשת הטקסט (יחידות viewBox) */
--abt-curved-gap: 30px; /* מרווח נוסף בין הטקסט המעוגל ללוגו */
--abt-curved-arc: 12; /* זווית התחלת הקשת — נמוך יותר = עוטף יותר */
/* 50% = מרכוז הטקסט על הקשת (text-anchor:middle). ערך אחר יזיז אותו לאורך הקשת. */
--abt-curved-offset: 50; /* startOffset באחוזים */
/* תגית "הודעות" בראש הסקשן */
--abt-badge-show: block;
--abt-badge-w: calc(170px * var(--abt-k));
--abt-badge-x: calc(-12px * var(--abt-k));
--abt-badge-y: calc(34px * var(--abt-k));
--abt-badge-fs: calc(15px * var(--abt-k));
--abt-cta-h: calc(39px * var(--abt-k));
--abt-cta-f: calc(16px * var(--abt-k));
--abt-cta-pad: calc(20px * var(--abt-k));
--abt-cta-r: 999px;
--abt-cta-icon: calc(19px * var(--abt-k)); /* הלב בתוך הכפתור */
--abt-cta-delay: 1.8s; /* השהיה עד שהכפתור מופיע */
--abt-dot-w: calc(28px * var(--abt-k));
--abt-dot-w-active: calc(45px * var(--abt-k));
--abt-dot-h: calc(8px * var(--abt-k));
--abt-dot-gap: calc(10px * var(--abt-k));
--abt-dot-top: calc(30px * var(--abt-k)); /* מרחק המחוון מתחת ללוגו */
--abt-fade: 0.5s;
--abt-zoom: 1.05; /* הגדלת התמונה היוצאת בזמן המעבר */
--card-h: calc(var(--card-w) / var(--card-ratio));
}
*{ margin:0; padding:0; box-sizing:border-box; }
/* חיתוך אופקי בלבד — מונע "זחילה" של הפריסה ב-RTL כשאלמנט דקורטיבי חורג הצידה.
clip (ולא hidden) לא יוצר אזור גלילה, ולכן העמוד אף פעם לא נדחף הצידה */
/* 5.10.2026: iOS inflates text inside blocks it judges too narrow, which is
why the typography looked a little different on an iPhone than on Android.
Pinning the adjustment keeps every size exactly as designed. */
html{ overflow-x:clip; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
font-family:'Afek','Assistant',-apple-system,'Segoe UI',Arial,sans-serif;
/* רקע השמנת המקורי משותף לגוף האתר ולאזור הפתיחה,
כך שגם ההידר והלוגו נשארים מחוברים באותו גוון. */
background: var(--cream);
color: var(--ink);
overflow-x:clip;
max-width:100%;
}
/* ===================== מערכת Layout גלובלית =====================
.site-container — הקונטיינר היחיד של האתר. הרקע של כל סקשן
יכול להיות ברוחב מלא, אבל התוכן תמיד יושב בתוך הקונטיינר הזה. */
.site-container{
width:100%;
max-width: var(--container-max-width);
margin-inline:auto;
padding-inline: var(--page-padding);
}
/* מודיפייר יחיד לאזורים הרחבים — במקום רוחב שרירותי לכל אזור */
.site-container--wide{ max-width: var(--container-wide); }
/* ריווח אנכי אחיד — סקשן יכול לחרוג רק אם העיצוב מחייב */
.section-pad{ padding-block: var(--section-padding-y); }
/* מדרגות השוליים — נקבעות פעם אחת ומשפיעות על כל האתר */
@media (max-width: 1200px){
:root{ --page-padding: var(--page-padding-laptop); }
}
@media (max-width: 1024px){
:root{
--page-padding: var(--page-padding-tablet);
--section-padding-y: var(--section-padding-y-tablet);
}
}
@media (max-width: 767px){
:root{
--page-padding: var(--page-padding-mobile);
--section-padding-y: var(--section-padding-y-mobile);
}
}
/* ===================================================================
שכבת רכיבים רספונסיביים משותפת
===================================================================
הכללים כאן חלים על כל האתר ומגדירים התנהגות אחידה לכל
breakpoint. עמוד חדש שייבנה מאותן מחלקות יקבל את אותה
התנהגות אוטומטית — זו המטרה של המערכת.
גישה: mobile-last. בסיס הדסקטופ נשאר כפי שהוא (הוא הבסיס
העיצובי המאושר), והתאמות המובייל נכתבות בתוך @media בלבד.
כך אין שום סיכון לרגרסיה בדסקטופ.
body:not(.desktop-preview) — הסייג קיים כדי שמצב "תצוגת
דסקטופ" בפאנל ימשיך להראות את פריסת הדסקטופ גם בחלון צר. */
/* --- מטרות מגע: כל בקר אינטראקטיבי במסך מגע ---
44×44px היא דרישת WCAG 2.5.8 / Apple HIG. בדסקטופ עם עכבר
מדויק אפשר קטן יותר, ולכן הכלל חל רק על מסכי מגע וצרים. */
@media (hover: none), (max-width: 1024px){
.site-header .nav-link,
.voices-nav, .vl-nav, .field-nav,
.ft-social a, .ft-col a, .ft-btn,
.partner, .donate-pill{
min-block-size: var(--tap-min);
display:inline-flex;
align-items:center;
}
/* ===== חצי הקרוסלות — עיגול אמיתי =====
min-block-size בכלל המשותף מעלה את הגובה ל-44px בלי
לגעת ברוחב, וכך העיגול נמתח לאליפסה (נמדד 38×44).
aspect-ratio + אפס min-block-size מחזירים עיגול מדויק,
ושטח המגע מושג מהגודל עצמו (44×44). */
/* max() ולא ערך קבוע: הכלל מבטיח יעד מגע תקני אך מאפשר
לטוקן של האזור להגדיל מעבר לו. עם --tap-min קבוע
הסליידרים בפאנל היו מנוטרלים. */
.voices-nav{
inline-size: max(var(--tap-min), var(--vc-arrow)) !important;
block-size: max(var(--tap-min), var(--vc-arrow)) !important;
min-block-size: 0 !important;
aspect-ratio: 1 / 1;
flex: 0 0 auto;
padding: 0;
display:inline-flex;
align-items:center;
justify-content:center;
}
.vl-nav{
inline-size: max(var(--tap-min), var(--vl-arrow)) !important;
block-size: max(var(--tap-min), var(--vl-arrow)) !important;
min-block-size: 0 !important;
aspect-ratio: 1 / 1;
flex: 0 0 auto;
padding: 0;
display:inline-flex;
align-items:center;
justify-content:center;
}
/* --fg-nav מאפשר לאזור להגדיל מעבר ליעד המגע המינימלי;
בלעדיו הערך הקבוע היה מנטרל את ההגדלה במובייל. */
.field-nav{
inline-size: max(var(--tap-min), var(--fg-nav, 44px)) !important;
block-size: max(var(--tap-min), var(--fg-nav, 44px)) !important;
min-block-size: 0 !important;
aspect-ratio: 1 / 1;
flex: 0 0 auto;
padding: 0;
display:inline-flex;
align-items:center;
justify-content:center;
}
/* ה-SVG בפנים לא נמתח יחד עם המכל.
היה 45% (14-17px) ואז 62% (18px) — עדיין קטן מדי
במסך אמיתי. 70% מתוך עיגול של 56px = 39px, וקו עבה
יותר (2.8) שנראה היטב גם בשמש. */
/* !important נדרש: כללי הבסיס (.vl-nav svg / .voices-nav
svg) מגדירים width:40% ומופיעים מאוחר יותר בקובץ,
ולכן ניצחו את ההגדרה כאן והחץ נשאר 22px. */
.voices-nav svg, .vl-nav svg, .field-nav svg{
flex:0 0 auto;
width:66% !important;
height:66% !important;
max-width:66%;
max-height:66%;
stroke-width:2.8 !important;
}
/* קישורי הפוטר — הטקסט קצר, ולכן שטח הלחיצה נקבע
מהריפוד ולא מגובה השורה */
.ft-col a, .ft-social a{
padding-block: var(--space-3xs);
}
/* תיבות סימון — 15×15 היה קטן מכדי לפגוע בו באצבע.
aspect-ratio מונע מעיכה לאליפסה כשהטקסט לוחץ עליהן. */
.join-form input[type="checkbox"]{
inline-size: 20px;
block-size: 20px;
flex: 0 0 20px;
aspect-ratio: 1 / 1;
}
}
/* --- טיפוגרפיה: רצפות קריאוּת במסכים קטנים --- */
@media (max-width: 767px){
body:not(.desktop-preview) .section-tag b{ font-size: var(--font-tag); }
/* טקסט משני לא יורד מ-14px — דרישת נגישות, לא העדפה */
body:not(.desktop-preview) .ft-note,
body:not(.desktop-preview) .join-consent,
body:not(.desktop-preview) .field-desc{ font-size: var(--font-small); }
}
/* --- ריווח אנכי: אותו קצב בכל אזור --- */
@media (max-width: 1024px){
body:not(.desktop-preview) .section-tag{ margin-bottom: var(--gap-tag-title); }
}
/* עוטף יחידת כתב היד בהירו — שקוף לחלוטין בדסקטופ
ובטאבלט, כך ששני הילדים נשארים דקורטיביים ואבסולוטיים
בדיוק כמו קודם. הוא הופך ל-flex רק במובייל. */
.hero-handnote{ display:contents; }
/* ===================================================================
בקר הקול על גבי סרטונים — רכיב משותף לכל האתר
===================================================================
הסרטונים מתחילים מושתקים (מדיניות הדפדפן), והכפתור נותן
למשתמש דרך ברורה להפעיל קול. אותו מראה בכל הקרוסלות. */
.media-sound{
position:absolute;
z-index:6;
inset-block-end:10px;
inset-inline-end:10px;
inline-size:38px;
block-size:38px;
aspect-ratio:1 / 1;
flex:0 0 38px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
border:0;
border-radius:50%;
background: rgba(23,12,6,.55);
color:#fff;
cursor:pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background .22s ease, transform .22s ease;
-webkit-tap-highlight-color: transparent;
}
.media-sound svg{ inline-size:19px; block-size:19px; }
.media-sound:hover{ background: rgba(23,12,6,.75); }
.media-sound:active{ transform: scale(.92); }
.media-sound:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; }
/* במסך מגע — יעד נגיעה תקני */
@media (hover:none), (max-width:1024px){
.media-sound{
inline-size:44px; block-size:44px; flex-basis:44px;
inset-block-end:12px; inset-inline-end:12px;
}
.media-sound svg{ inline-size:21px; block-size:21px; }
}
@media (prefers-reduced-motion: reduce){
.media-sound{ transition:none; }
}
/* --- אלמנטים דקורטיביים: לעולם לא חוסמים תוכן או גורמים גלילה --- */
.deco, .bg-circle-peach, .bg-circle-cream,
[class*="-deco"], [class*="deco-"]{
pointer-events: none;
}
.hero{
position:relative;
/* מסך מלא ממש — 100vh ולא 100vh פחות ההידר.
ההידר ממוקם אבסולוטית *מעל* ההירו ולא מעליו בזרימה,
ולכן החיסור השאיר 72px חסרים והאזור הבא הציץ מתחת
לקו הקיפול (נמדד: הירו 828px במסך 900px, והאזור
הבא נראה 35px מעל הקיפול).
מינימום 640px כדי שהתוכן לא יידחס במסכים נמוכים. */
min-height: max(640px, 100vh);
display:flex;
flex-direction:column;
background: var(--hero-bg);
overflow:hidden;
}
@supports (height: 100dvh){
.hero{ min-height: max(640px, 100dvh); }
}
/* ===== אלמנטים של רקע — נוצרים בקוד, נשלטים מהפאנל ===== */
.bg-circle-peach{
position:absolute;
z-index:0;
left:var(--peach-x);
top:var(--peach-y);
width:var(--peach-size);
height:var(--peach-size);
border-radius:50%;
background:#F9EEE5;
opacity:var(--peach-op);
pointer-events:none;
}
.bg-ring{
position:absolute;
z-index:0;
left:calc(var(--peach-x) + var(--peach-size) * 0.62);
top:calc(var(--peach-y) - var(--peach-size) * 0.10);
width:calc(var(--peach-size) * 0.46);
height:calc(var(--peach-size) * 0.46);
border-radius:50%;
border:2px solid #EBE3DB;
opacity:var(--peach-op);
pointer-events:none;
}
.bg-circle-blue{
position:absolute;
z-index:0;
right:var(--blue-x);
top:var(--blue-y);
width:var(--blue-size);
height:var(--blue-size);
border-radius:50%;
background:#EFF4F8;
opacity:var(--blue-op);
pointer-events:none;
}
/* אליפסת חום מטושטשת מאחורי הכותרת */
.warm-ellipse{
position:absolute;
z-index:0;
left:calc(50% + var(--warm-x));
top:var(--warm-y);
width:var(--warm-w);
height:var(--warm-h);
transform:translateX(-50%);
border-radius:50%;
background:var(--warm-color);
opacity:var(--warm-op);
filter:blur(var(--warm-blur));
pointer-events:none;
}
/* אלמנטים נוספים שנוצרים מהפאנל */
.bg-extra{
position:absolute;
z-index:0;
border-radius:50%;
pointer-events:none;
}
/* ===== אלמנטים של רקע — לפי הקבצים מהפיגמה ===== */
.bg-mask-peach{ /* עיגול אפרסק + טבעת — פינה שמאלית עליונה */
position:absolute;
z-index:0;
top:-30px;
left:-60px;
width:clamp(200px, 17vw, 330px);
pointer-events:none;
}
.bg-mask-blue{ /* עיגול תכלכל עדין — למעלה */
position:absolute;
z-index:0;
top:-150px;
left:7%;
width:clamp(240px, 22vw, 420px);
opacity:.55;
pointer-events:none;
}
.dashed-circle-beige{ /* עיגול מקווקו — ימין למעלה */
position:absolute;
z-index:1;
top:var(--dash-top);
right:var(--dash-right);
width:var(--dash-size);
height:var(--dash-size);
border-radius:50%;
border:3px dashed var(--dash-beige);
opacity:var(--dash-op);
pointer-events:none;
}
/* ===== header — לוגו במרכז מדויק, מרווחים אחידים ===== */
/* ===== ההידר — דביק בגלילה =====
ה-header הועבר מחוץ ל-.hero כדי שיוכל להיות sticky ביחס לעמוד.
בגלילה נוספת המחלקה .is-stuck (מ-IntersectionObserver) מקטינה
את הלוגו ואת הריפוד, כדי שההידר לא יתפוס גובה מיותר. */
.site-header{
position: sticky;
top: var(--hd-float-top);
z-index:60;
display:flex;
align-items:center;
/* flex ולא grid: הלוגו ממורכז אבסולוטית ביחס להידר, כך
שהכפתור בצד שמאל לא מזיז אותו. */
width:100%;
/* לפני הגלילה — רוחב מלא, שקוף, חלק אורגני מההירו */
max-width: var(--container-wide);
margin-inline:auto;
padding: 8px var(--hd-pad-x);
background: transparent;
border-radius: var(--hd-radius);
/* אין backdrop-filter ואין שינוי גוון — הרקע הוא בדיוק זה של ההירו,
כך שלא נוצר קו הפרדה נראה לעין */
transition: max-width .34s cubic-bezier(.22,.9,.3,1),
background-color .34s ease,
box-shadow .34s ease,
padding .34s ease,
top .34s cubic-bezier(.22,.9,.3,1);
}
/* אחרי הגלילה — פס זכוכית נמוך ורחב.
backdrop-filter מטשטש את מה שעובר מתחתיו, כך שרואים תנועה
דרך הפס במקום רקע אטום. */
.site-header.is-stuck{
top: var(--hd-float-top-stuck); /* גבוה יותר בגלילה */
max-width: var(--hd-float-w);
/* הרקע והטשטוש עוברים ל-::before, כדי שיוכלו לכלול גם את
עיגול הלוגו שחורג מתחתית הפס — משטח אחד רציף. */
background: transparent;
border:0;
padding-block: var(--hd-stuck-pad);
}
/* בגלילה הכפתור נכנס פנימה, כדי שיישאר בתוך הפס הצף */
.site-header.is-stuck .donate-pill{ left: var(--hd-pill-x-stuck); }
.donate-pill{ transition: left .34s cubic-bezier(.22,.9,.3,1),
transform .2s ease, box-shadow .2s ease; }
/* הפס עצמו — שכבה נפרדת, כדי שעיגול הלוגו יוכל להיות שכבה
אחות שלה ולא שכבה מעליה. שתיהן צוירות באותו z, ולכן
החפיפה ביניהן לא מצטברת ולא נוצר גוון כפול. */
.site-header::before{
content:'';
position:absolute;
inset:0;
border-radius: var(--hd-radius);
background: color-mix(in srgb, var(--hero-bg) var(--hd-glass-op), transparent);
-webkit-backdrop-filter: blur(var(--hd-blur)) saturate(1.4);
backdrop-filter: blur(var(--hd-blur)) saturate(1.4);
box-shadow: var(--hd-shadow);
border: 1px solid rgba(255,255,255,.55);
opacity:0;
pointer-events:none;
z-index:0;
transition: opacity .34s ease;
}
.site-header.is-stuck::before{ opacity:1; }
/* בגלילה הלוגו יורד וחורג מגבולות הפס */
.site-header.is-stuck .logo-badge img{ width: var(--hd-logo-stuck); }
.logo-badge{ transition: transform .34s cubic-bezier(.22,.9,.3,1); }
/* ===== צלחת הרקע של הלוגו =====
עיגול באותו רקע של ההידר, שיושב מאחורי הלוגו. כך החלק
שחורג מתחתית הפס נראה כהמשך שלו ולא "תלוי באוויר". */
.logo-plate{
position:absolute;
top:50%; left:50%;
width: calc(var(--hd-logo) + var(--hd-plate-pad) * 2);
height: calc(var(--hd-logo) + var(--hd-plate-pad) * 2);
margin: calc((var(--hd-logo) + var(--hd-plate-pad) * 2) / -2) 0 0
calc((var(--hd-logo) + var(--hd-plate-pad) * 2) / -2);
border-radius:50%;
background: transparent;
z-index:0; /* מתחת לתמונת הלוגו, מעל רקע ההידר */
transition: width .34s cubic-bezier(.22,.9,.3,1),
height .34s cubic-bezier(.22,.9,.3,1),
margin .34s cubic-bezier(.22,.9,.3,1),
background-color .34s ease;
}
.site-header.is-stuck .logo-plate{
width: calc(var(--hd-logo-stuck) + var(--hd-plate-pad) * 2);
height: calc(var(--hd-logo-stuck) + var(--hd-plate-pad) * 2);
margin: calc((var(--hd-logo-stuck) + var(--hd-plate-pad) * 2) / -2) 0 0
calc((var(--hd-logo-stuck) + var(--hd-plate-pad) * 2) / -2);
/* הצלחת מצוירת ב-z-index זהה לפס (0) ולא מעליו. שתי השכבות
הן אחיות ולא מקוננות, ולכן הטשטוש והגוון לא מצטברים
באזור החפיפה — וזה מה שגרם לעיגול להיראות בהיר יותר.
ערכי הזכוכית זהים לחלוטין לאלה של הפס. */
background: color-mix(in srgb, var(--hero-bg) var(--hd-glass-op), transparent);
-webkit-backdrop-filter: blur(var(--hd-blur)) saturate(1.4);
backdrop-filter: blur(var(--hd-blur)) saturate(1.4);
border:0;
box-shadow:none;
}
/* ===== חצי התפריט השמאלי =====
מבנה זהה ל-.nav-right בדיוק: flex:1 + padding בצד אחד בלבד —
הצד שפונה ללוגו. הכפתור ממוקם אבסולוטית ולכן לא משפיע כאן. */
.nav-left-group{
flex:1;
position:relative;
z-index:2; /* מעל שכבות הזכוכית */
display:flex;
align-items:center;
/* ב-RTL flex-start הוא הקצה הימני — הצד שפונה ללוגו.
מראה־תמונה מדויקת של .nav-right. */
justify-content:flex-start;
padding-right: var(--hd-nav-inset);
}
.nav-menu{
display:flex;
align-items:center;
justify-content:center;
gap:var(--nav-gap);
list-style:none;
}
.nav-menu a{
text-decoration:none;
color: var(--ink);
font-size:var(--nav-fs);
font-weight:600;
transition: color .2s ease;
white-space:nowrap;
}
.nav-menu a:hover{ color: var(--orange); }
/* ===================== תת-תפריט "הפעילות שלנו" =====================
הפריט מורכב מקישור + כפתור חשיפה קטן: הקישור ממשיך להוביל
לאזור בדף הבית, והכפתור פותח את רשימת עמודי הפעילות. זה
הדפוס הנגיש — קישור נשאר קישור, והפתיחה היא פקד נפרד.
בדסקטופ נפתח גם בריחוף ובמיקוד מקלדת; בנייד רק בלחיצה
(ראו את הבלוק המקביל בתוך שאילתת המדיה של הנייד). */
.nav-menu .has-sub{ position:relative; }
.nav-item-row{ display:inline-flex; align-items:center; gap:4px; }
.sub-toggle{
display:inline-flex; align-items:center; justify-content:center;
width:24px; height:24px; padding:0; flex:0 0 auto;
/* יעד הלחיצה 24px, אבל המרג׳ין השלילי מונע ממנו להגביה את
שורת התפריט מעל גובה הקישורים השכנים */
margin-block:-4px;
background:none; border:0; cursor:pointer;
color:var(--ink); border-radius:50%;
transition: color .2s ease;
}
.sub-toggle:hover{ color:var(--orange); }
.sub-toggle svg{ width:10px; height:10px; transition:transform .25s ease; }
.has-sub.is-sub-open .sub-toggle svg{ transform:rotate(180deg); }
.sub-menu{
position:absolute; top:calc(100% + 12px); inset-inline-start:0;
min-width:198px; margin:0; padding:8px; list-style:none;
background:#fff; border:1px solid rgba(67,31,16,.10);
border-radius:14px; box-shadow:0 16px 34px rgba(67,31,16,.14);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition: opacity .22s ease, transform .22s ease, visibility .22s;
z-index:70;
}
.has-sub:hover > .sub-menu,
.has-sub:focus-within > .sub-menu,
.has-sub.is-sub-open > .sub-menu{
opacity:1; visibility:visible; transform:none;
}
.sub-menu a{
display:block; padding:9px 12px; border-radius:9px;
font-size:15px; font-weight:500; white-space:nowrap;
}
.sub-menu a:hover{ background:#F7EFE6; }
@media (prefers-reduced-motion: reduce){
.sub-menu, .sub-toggle svg{ transition:none; }
}
/* הלוגו — ממורכז אבסולוטית ביחס להידר.
כך הכפתור שבצד שמאל לא מסיט אותו מהמרכז. */
.logo-badge{
padding:0;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
z-index:0; /* אותה שכבה של הפס (::before) */
}
/* בגלילה — נשאר ממורכז, ויורד כדי לחרוג מתחתית הפס */
.site-header.is-stuck .logo-badge{
transform: translate(-50%, calc(-50% + var(--hd-pop)));
}
.logo-badge img{
position:relative;
z-index:1; /* מעל צלחת הזכוכית */
width: var(--hd-logo);
height:auto;
display:block;
transition: width .34s cubic-bezier(.22,.9,.3,1);
}
/* שני חצאי התפריט — flex:1 זהה, ולכן סימטריים סביב הלוגו.
כל אחד נצמד לצד הפנימי שלו (לכיוון הלוגו). */
/* הריווח נגזר מהגדול שבין הלוגו הרגיל לזה שבגלילה, כדי שהתפריט
לא ייגע בלוגו גם כשהוא מתרחב. --hd-plate-pad נכלל כי הצלחת
מוסיפה טבעת סביב התמונה. */
.nav-right{
flex:1;
position:relative;
z-index:2; /* מעל שכבות הזכוכית */
/* ב-RTL flex-end הוא הקצה השמאלי — כלומר הצד שפונה ללוגו.
יחד עם padding-left נוצר מרווח זהה לזה של החצי השמאלי. */
justify-content:flex-end;
padding-left: var(--hd-nav-inset);
}
/* בלי padding כאן — הוא יושב על .nav-left-group, שהוא האלמנט
שמקבל flex:1 ולכן המקביל האמיתי של .nav-right. שמירת ה-padding
כאן יצרה מרווח כפול והתפריט השמאלי נראה קרוב יותר ללוגו. */
/* ה-ul הפנימי — הריווח מהלוגו נקבע על .nav-left-group שעוטף אותו */
.nav-left{ justify-content:flex-start; }
.only-mobile{ display:none; } /* מוצג רק כשההמבורגר פעיל */
.donate-pill{
display:inline-flex;
align-items:center;
gap:8px;
/* ממוקם אבסולוטית ולא כאח ב-flex: כאח הוא היה תופס רוחב אמיתי,
ואז flex:1 חילק את *השארית* בין שני חצאי התפריט — כלומר
הצד הימני קיבל יותר מקום והשמאלי נדחק ללוגו. */
position:absolute;
/* left ולא inset-inline-start: בעמוד RTL הערך ה"התחלתי" הוא
הצד הימני, ולכן הכפתור קפץ ימינה. כאן רוצים שמאל פיזי. */
left: var(--hd-pill-x);
top:50%;
transform: translateY(-50%);
z-index:2; /* מעל שכבות הזכוכית */
background: var(--ink);
color:#fff !important;
border-radius:var(--button-radius);
padding:12px 22px;
font-size:var(--pill-fs) !important;
font-weight:600;
text-decoration:none;
white-space:nowrap;
transition: transform .2s ease, box-shadow .2s ease;
}
/* -50% שומר על המרכוז האנכי; ה-2px הנוספים הם ההרמה בריחוף */
.donate-pill:hover{
transform: translateY(calc(-50% - 2px));
box-shadow: 0 8px 20px rgba(67,31,16,.25);
}
.donate-pill svg{ width:15px; height:15px; }
/* ===== כפתור ההמבורגר — מוצג רק בטאבלט ובנייד ===== */
.nav-toggle{
display:none;
position:relative;
z-index:2; /* מעל שכבות הזכוכית */
flex-shrink:0;
width:44px; height:44px; /* יעד מגע תקני */
align-items:center;
justify-content:center;
background:transparent;
border:0;
padding:0;
cursor:pointer;
border-radius:12px;
}
.nav-toggle span{
position:relative;
display:block;
width:22px; height:2px;
background: var(--ink);
border-radius:2px;
transition: transform .3s ease, opacity .2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after{
content:'';
position:absolute;
left:0;
width:22px; height:2px;
background: var(--ink);
border-radius:2px;
transition: transform .3s ease;
}
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
/* מצב פתוח — הופך ל-X */
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ transition:none; }
.site-header, .logo-badge img{ transition:none; }
}
/* התגית בהירו — אותו רכיב גלובלי, רק ממורכזת ועם מרווח תחתון */
.hero-tag{ margin-inline:auto; margin-bottom:10px; }
/* ===== hero copy ===== */
.hero-copy{
position:relative;
z-index:5;
text-align:center;
/* --hero-top-gap מרחיק את התגית מהלוגו של ההידר */
margin: calc(var(--copy-mt) + var(--hero-top-gap)) auto 0;
padding-inline: var(--page-padding);
}
.copy-inner{
position:relative;
display:inline-block;
max-width:100%;
text-align:center;
}
/* ===== עיטורי כותרת: כתב יד + חץ מימין, לב משמאל ===== */
.deco{
position:absolute;
height:auto;
pointer-events:none;
user-select:none;
z-index:6;
}
/* במסכים צרים העיטורים מוקטנים כיחידה שלמה (deco-k) ונצמדים לכותרת,
כך שהיחס הפנימי בין החץ לכתב היד נשמר בדיוק */
.deco-hand{
width:var(--hand-w);
right:calc(-1 * var(--hand-x));
top:var(--hand-y);
transform:scale(var(--deco-k)) rotate(var(--hand-rot));
transform-origin:left center;
}
/* כתב היד כטקסט חי — במקום תמונות PNG.
ברירת המחדל: אותו גרדיאנט כתום של שאר ההדגשות בדף. */
.deco-script{
font-family:'OhYaelLeibushor','Afek',sans-serif;
font-size: var(--script-fs);
line-height: var(--script-lh);
opacity: var(--script-op);
text-align:center;
white-space:nowrap;
user-select:none;
background: var(--grad-accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* מצב צבע אחיד — כשמכבים את הגרדיאנט מהפאנל */
.no-script-grad .deco-script{
background:none;
color: var(--script-col);
-webkit-text-fill-color: var(--script-col);
}
.deco-hand.deco-script{
width:auto;
transform: scale(var(--deco-k)) rotate(calc(var(--hand-rot) + var(--script-rot)));
}
.deco-harr{
width:var(--harr-w);
right:calc(-1 * var(--harr-x));
top:var(--harr-y);
transform:scale(var(--deco-k)) rotate(var(--harr-rot));
transform-origin:left center;
}
.deco-heart{
width:var(--heart-w);
left:calc(-1 * var(--heart-x));
top:var(--heart-y);
transform:scale(var(--deco-k)) rotate(var(--heart-rot));
transform-origin:right center;
}
.hero-arrow-code,
.joint-arrow-code{
display:none;
height:auto;
overflow:visible;
color:#F16A2C;
pointer-events:none;
}
.hero-arrow-code .arrow-trace,
.joint-arrow-code .arrow-trace{
fill:none;
stroke:currentColor;
stroke-width:3.2;
stroke-linecap:round;
stroke-linejoin:round;
stroke-dasharray:6 8;
vector-effect:non-scaling-stroke;
}
.hero-arrow-code .arrow-head,
.joint-arrow-code .arrow-head{
fill:none;
stroke:currentColor;
stroke-width:3.2;
stroke-linecap:round;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}
.arrow-shape-mobile{ display:none; }
@keyframes partnerRevealWipe{
0%, 3% { clip-path: inset(0 0 0 100%); }
30%, 82% { clip-path: inset(0 0 0 0); }
94%, 100% { clip-path: inset(0 0 0 100%); }
}
@keyframes partnerMutedWipe{
0%, 3% { clip-path:inset(0 0 0 0); opacity:1; }
30%, 82% { clip-path:inset(0 100% 0 0); opacity:1; }
94%, 100% { clip-path:inset(0 0 0 0); opacity:1; }
}
@keyframes partnerIconReveal{
0%, 28% { filter:grayscale(1) opacity(.45); }
44%, 82% { filter:none; }
94%, 100% { filter:grayscale(1) opacity(.45); }
}
@keyframes partnerTextReveal{
0%, 30% { clip-path: inset(0 0 0 100%); }
58%, 82% { clip-path: inset(0 0 0 0); }
94%, 100% { clip-path: inset(0 0 0 100%); }
}
.eyebrow-badge{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:150px;
height:73px;
margin:0 auto 6px;
}
.eyebrow-badge img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
z-index:0;
}
.eyebrow-badge span{
position:relative;
z-index:1;
font-size:13px;
font-weight:700;
color:#6b5847;
white-space:nowrap;
}
.hero-copy h1{
font-weight:800;
color: var(--ink);
width:max-content;
max-width:100%;
margin:0 auto;
}
/* גודל הכותרת: הערך מהפאנל בדסקטופ, ומתכווץ לפי רוחב המסך כדי שלעולם לא יגלוש */
.hero-copy h1 .line1{
display:block;
font-size:min(var(--h1s1), var(--h1-cap, 8vw));
line-height:1.04;
}
.hero-copy h1 .line2{
display:block;
font-size:min(var(--h1s2), var(--h1-cap, 8vw));
line-height:1.02;
color: var(--ink);
}
/* החלק הכתום בשורה השנייה — גראדיאנט */
.hero-copy h1 .grad{
background: var(--grad-accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.hero-copy p{
width:0;
min-width:100%;
margin: var(--p-mt) auto 0;
font-size:var(--ps);
line-height:1.6;
font-weight:400;
color: var(--ink);
text-align:justify;
text-align-last:justify;
}
.hero-copy p b{ font-weight:700; }
.cta-btn{
display:inline-flex;
align-items:center;
gap:14px;
margin-top:20px;
/* גרדיאנט רחב פי 3 שזז לאורך הכפתור — תנועה קבועה ועדינה
שמושכת את העין בלי להבהב. הרוחב הגדול הוא מה שהופך את
ההזזה לזרימה חלקה ולא לקפיצה. */
background: linear-gradient(90deg,
#FF5F35 0%, #FB8C2E 25%, #FFA25C 40%,
#FB8C2E 55%, #FF5F35 80%, #FF5F35 100%);
background-size: 300% 100%;
animation: ctaFlow var(--cta-flow) linear infinite;
color:#fff;
text-decoration:none;
padding:4px 24px 4px 5px;
height:var(--ctah);
border-radius:var(--button-radius);
font-size:var(--ctaf);
font-weight:700;
gap:12px;
box-shadow: 0 10px 24px rgba(241,106,44,.32);
transition: transform .2s ease, box-shadow .2s ease;
margin-top:14px;
}
@keyframes ctaFlow{
from{ background-position: 0% 50%; }
to { background-position: -300% 50%; } /* RTL: זורם ימינה */
}
.cta-btn:hover{
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(241,106,44,.42);
}
@media (prefers-reduced-motion: reduce){
.cta-btn{ animation:none; }
}
.cta-btn .arrow-circle{
width:var(--arrow-d);
height:var(--arrow-d);
border-radius:50%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.cta-btn .arrow-circle svg{ width:var(--arrow-svg); height:var(--arrow-svg); }
/* ===== גלריית קיר 3D מקוער — יושבת באזור הריק שמתחת לכותרת ולכפתור ===== */
.hero-slot{
flex:1;
position:relative;
min-height:340px; /* רצפה — אף פעם לא פחות מזה, אחרת הכרטיסים (minH) נחתכים ע"י overflow:hidden */
overflow:hidden;
z-index:3;
}
.gallery3d{
position:absolute;
inset: 0 0 var(--g-bottom, 72px) 0; /* היה 118px — צומצם כדי שפס השותפים ייכנס למסך הראשון */
width:100%;
overflow:hidden; /* מונע גלילה אופקית וחותך את הכרטיסים שנכנסים/יוצאים */
clip-path: inset(0); /* חיתוך קשיח — עוצר כל גלישה של תוכן ה-3D מעבר לאזור */
-webkit-perspective: var(--g-persp, 1700px);
perspective: var(--g-persp, 1700px);
-webkit-perspective-origin: 50% 44%;
perspective-origin: 50% 44%;
cursor:grab;
touch-action: pan-y; /* גלילה אנכית של העמוד נשמרת; אופקי אנחנו מנהלים */
user-select:none;
-webkit-user-select:none;
}
.gallery3d.dragging{ cursor:grabbing; }
/* מסך גוון בקצוות ימין/שמאל — מסתיר את הקו הישר של חיתוך הצל בגבול המסגרת, דוהה רך לתוך הרקע */
.gallery3d::before,
.gallery3d::after{
content:'';
position:absolute;
top:0; bottom:0;
width: clamp(50px, 7vw, 130px);
z-index:1000;
pointer-events:none;
}
.gallery3d::before{ right:0; background: linear-gradient(to left, var(--hero-bg), transparent); }
.gallery3d::after{ left:0; background: linear-gradient(to right, var(--hero-bg), transparent); }
.g-stage{
position:absolute;
top:0;
left:50%;
width:0;
height:100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.g-card{
position:absolute;
top:50%;
left:0;
width: var(--g-card-w, 300px);
height: var(--g-card-h, 420px);
margin-left: calc(var(--g-card-w, 300px) / -2);
margin-top: calc(var(--g-card-h, 420px) / -2);
border-radius: 16px;
overflow:hidden;
background:#e9ded4;
box-shadow: 0 6px 10px -6px rgba(67,31,16,.16); /* צל קטן וצמוד לכל כרטיס — לא מספיק רחוק כדי להתמזג לקו עם השכנים */
will-change: transform, opacity;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.g-card img,
.g-card video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover; /* התמונה/הסרטון ממלאים את כל הכרטיס — התמונות שלכם רוחביות והכרטיס לאורך, אז זה חותך בצדדים בלבד, לא למעלה/למטה */
object-position:center;
display:block;
z-index:1;
pointer-events:none;
-webkit-user-drag:none;
user-select:none;
}
@media (prefers-reduced-motion: reduce){
.gallery3d{ cursor:default; }
}
/* ===== 5.10.2026 · תלת-ממד באייפון =====
WebKit (כל דפדפן באייפון ובאייפד) מוותר על סצנת תלת-ממד כשהאלמנט
שנושא את ה-perspective גם חותך את תוכנו — וזה בדיוק מה ש-.gallery3d
עושה. לכן שם הסקריפט מוסיף את המחלקה הזו, וכל כרטיס נושא perspective()
משלו בתוך ה-transform (ראו PERSP ב-index.html). המיכל כבר לא צריך
הקשר תלת-ממדי, ולכן גם אין מה להשטיח. ההיטל זהה: כל הכרטיסים יושבים
על אותה נקודת מרכז, שהיא בדיוק ה-perspective-origin של המיכל.
בלי המחלקה — כלומר בכל שאר הדפדפנים — שום דבר כאן לא חל. */
.gallery3d.g3d-self-persp{
-webkit-perspective: none;
perspective: none;
}
.gallery3d.g3d-self-persp .g-stage{
-webkit-transform-style: flat;
transform-style: flat;
}
.gallery3d.g3d-self-persp .g-card{
will-change: transform;
}
/* ===== קוד שהוסר =====
כאן ישבו ~70 שורות CSS של קרוסלת ".orbit-*" — קרוסלה
ישנה שהוחלפה ב-.gallery3d / .g-card. לא נשאר לה שום
markup בדף ושום JS שיוצר אותה, כולל will-change ו-
transition שהדפדפן עדיין פירסר בכל טעינה.
הטוקן --orbit-top והסליידר שלו בפאנל נשארו — הם לא
מזיקים, והפאנל כולו מוסר לפני מסירת האתר. */
/* ===== פועלים בשיתוף — במרווח התחתון של הקשת ===== */
.partners{
position:absolute;
z-index:400;
bottom:var(--partners-bottom);
left:0; right:0;
display:flex;
align-items:center;
justify-content:center;
gap:0;
}
/* קו מפריד בין שני הלוגואים */
.p-divider{
flex-shrink:0;
width:var(--pdiv-w);
height:var(--pdiv-h);
background:var(--pdiv-color);
border-radius:2px;
margin-inline-start:var(--p-gap1);
margin-inline-end:var(--p-gap2);
}
/* ===== "אנחנו פועלים בשיתוף" — מוצא מזרימת הפלקס =====
הבלוק היה אח בשורת הפלקס (112px + מרווחים ≈ 180px),
ולכן שני הלוגואים נדחפו 85px ימינה ממרכז המסך (נמדד
mid805 מול מרכז 720).
שני ילדיו ממוקמים אבסולוטית ממילא, ולכן הוצאתו מהזרימה
לא משנה את מיקומם — היא רק משחררת את הרוחב שגזל,
והלוגואים חוזרים למרכז אמיתי. */
.joint-badge{
position:absolute;
/* ממוקם משמאל לקבוצת הלוגואים ולא מעליה.
ב-RTL הצד השמאלי הוא inset-inline-end, ולכן המיקום
נקבע ב-left פיזי — 'שמאל' חייב להישאר שמאל בפועל.
calc ולא אחוז: קבוצת הלוגואים ממורכזת ורוחבה קבוע
(~323px), ולכן הבלוק נצמד לקצה השמאלי שלה בכל רוחב
מסך. באחוזים הוא חפף אליהם ב-1280px. */
/* 66px ולא 22: החץ ממוקם אבסולוטית בתוך הבלוק עם
--jarrow-x שלילי, ולכן הוא חורג ~38px מעבר לקצה
הימני שלו. המרווח מפצה על החריגה הזאת. */
left: calc(50% - 172px - 112px - var(--jbadge-gap, 66px));
right:auto;
top:50%;
transform: translateY(-50%);
width:112px;
height:76px;
flex-shrink:0;
pointer-events:none;
}
.joint-badge .joint-text{
position:absolute;
top:var(--jtext-y);
right:var(--jtext-x);
width:var(--jtext-w);
height:auto;
transform:rotate(var(--jtext-rot));
transform-origin:center center;
/* טקסט חי במקום תמונה. !important כי לאלמנט יש גם .deco-script,
שמופיע אחריו בגיליון ומגדיר font-size ו-line-height משלו —
בלי זה שני הסליידרים של הטקסט הזה לא השפיעו בכלל. */
font-size: var(--jtext-fs) !important;
line-height: var(--jtext-lh) !important;
white-space:normal !important;
}
.joint-badge .joint-arrow{
position:absolute;
bottom:var(--jarrow-y);
right:var(--jarrow-x);
width:var(--jarrow-w);
height:auto;
transform:rotate(var(--jarrow-rot));
transform-origin:center center;
}
.partner{
position:relative;
display:flex;
align-items:center;
text-decoration:none;
cursor:pointer;
}
/* משרד הרווחה — עמום כברירת מחדל, צבע מלא במעבר עכבר */
.partner-welfare img{ height:var(--partner-h); width:auto; display:block; }
.partner-welfare .full{
position:absolute;
inset:0;
opacity:0;
transition: opacity .25s ease;
}
.partner-welfare:hover .full{ opacity:1; }
.partner-welfare:hover .muted{ opacity:0; }
.partner-welfare .muted{ transition: opacity .25s ease; }
/* המיזם הלאומי — טקסט מימין, אייקון משמאל */
.partner-mizam{ gap:10px; }
.partner-mizam .mizam-text{
font-size:clamp(11px, .68vw, 13px);
font-weight:700;
line-height:1.25;
text-align:right;
color:#B3A69E;
transition: color .25s ease;
}
.partner-mizam .mizam-icon{
height:calc(var(--partner-h) * 0.93);
width:auto;
display:block;
filter:grayscale(1) opacity(.45);
transition: filter .25s ease;
}
.partner-mizam:hover .mizam-text{ color: var(--ink); }
.partner-mizam:hover .mizam-icon{ filter:none; }
/* ===== פאנל עריכה (כלי עבודה — מוסר לפני מסירה) ===== */
.editor-toggle{
position:fixed;
bottom:16px; right:16px;
z-index:9999;
width:44px; height:44px;
border-radius:50%;
border:none;
background:var(--ink);
color:#fff;
font-size:20px;
cursor:pointer;
box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.editor-panel{
position:fixed;
bottom:70px; right:16px;
z-index:9999;
width:270px;
max-height:78vh;
overflow-y:auto;
background:#fff;
border-radius:14px;
box-shadow:0 12px 40px rgba(0,0,0,.22);
padding:14px 16px;
font-size:13px;
display:none;
}
.editor-panel.open{ display:block; }
.editor-panel h3{
font-size:14px;
margin-bottom:8px;
color:var(--ink);
}
.editor-panel details{
border-top:1px solid #eee;
padding:4px 0;
}
.editor-panel summary{
cursor:pointer;
font-weight:700;
color:var(--ink);
padding:6px 0;
list-style-position:inside;
}
.editor-panel .ctrl{ margin-bottom:10px; }
.editor-panel label{
display:flex;
justify-content:space-between;
margin-bottom:2px;
color:#5b4a3e;
font-weight:600;
}
.editor-panel input[type=range]{ width:100%; }
.editor-panel .copy-btn{
width:100%;
margin-top:6px;
padding:9px;
border:none;
border-radius:8px;
background:var(--orange);
color:#fff;
font-family:inherit;
font-size:14px;
font-weight:700;
cursor:pointer;
}
.editor-panel .copy-btn.copied{ background:#4caf50; }
.editor-panel .media-row{ display:flex; gap:4px; margin-bottom:6px; align-items:center; }
.editor-panel .media-row input[type=text],
.editor-panel #mediaNew{
flex:1; min-width:0;
font-family:inherit; font-size:11px;
padding:5px 6px;
border:1px solid #ddd; border-radius:6px;
direction:ltr; text-align:left;
}
.editor-panel .media-btn{
border:none; background:#f1ece7; border-radius:5px;
cursor:pointer; font-size:10px; padding:5px 7px; color:#5b4a3e;
flex-shrink:0;
}
.editor-panel .media-btn:hover{ background:#e5ddd4; }
.editor-panel .media-add-row{ display:flex; gap:4px; margin-top:4px; }
.editor-panel .hint{ font-size:11px; color:#8a7a6d; margin:6px 0 4px; line-height:1.45; }
/* ===== mobile ===== */
/* ===== תצוגת דסקטופ מוקטנת — הדף מוצג כאילו המסך 1920×1080 ===== */
body.desktop-preview{
overflow:hidden;
height: calc(1080px * var(--pv-scale, 0.5));
}
body.desktop-preview .hero{
width:1920px;
height:1080px;
min-height:0;
transform: scale(var(--pv-scale, 0.5));
transform-origin: top right;
}
/* ===== mobile — לא חל במצב תצוגת דסקטופ ===== */
/* ===================== מסך אודות — סיפור נגלל ===================== */
/* גובה הסקשן נגזר ממספר המצבים בפועל (--abt-count מגיע מ-ABOUT_STATES.length) */
.abt{
position:relative;
background: var(--abt-bg);
height: calc(var(--abt-count) * var(--abt-vh) * 1vh);
}
@supports (height: 100dvh){
.abt{ height: calc(var(--abt-count) * var(--abt-vh) * 1dvh); }
}
.abt-stage{
position:sticky;
top:0;
height:100vh;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}
@supports (height: 100dvh){
.abt-stage{ height:100dvh; }
}
/* עוטף פנימי — קומפוזיציה אחת קומפקטית וממורכזת, לא פרושה על כל המסך */
.abt-scene{
position:relative;
/* הקומפוזיציה לא רחבה מהקונטיינר הגלובלי, ומכבדת את אותם שוליים */
width: min(var(--abt-wrap), calc(var(--container-max-width) - var(--page-padding) * 2), calc(100% - var(--page-padding) * 2));
display:flex;
align-items:center;
justify-content:center;
}
/* ===== תגית "הודעות" — שלושת העיגולים בראש הסקשן ===== */
.abt-badge{
display: var(--abt-badge-show);
position:absolute;
left:50%;
top: calc(4px * var(--abt-k));
transform: translate(calc(-50% + var(--abt-badge-x)), var(--abt-badge-y));
width: var(--abt-badge-w);
z-index:5;
pointer-events:none;
text-align:center;
}
.abt-badge img{
width:100%;
height:auto;
display:block;
}
.abt-badge span{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size: var(--abt-badge-fs);
font-weight:700;
color: var(--abt-ink);
white-space:nowrap;
}
/* הלוגו והמחוון כיחידה אחת */
.abt-center{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
flex:0 0 auto;
}
/* ===== הלוגו — שכבת חזית קבועה. לא זז אף פעם ===== */
.abt-logo{
position:relative;
width: var(--abt-logo-size);
margin-top: var(--abt-logo-y);
flex:0 0 auto;
z-index:2;
pointer-events:none;
}
.abt-logo svg{ width:100%; height:auto; display:block; overflow:visible; }
/* עותקי הלוגו של המובייל מוסתרים בדסקטופ */
.abt-logo-mobile{ display:none; }
/* חלקי הלוגו — תקפים גם ללוגו המרכזי וגם לעותקי המובייל.
המסלולים הם המקוריים מהנכס; רק הצבע נשלט ממשתנים. */
.abt-ring{ fill: var(--abt-logo-ring); }
.abt-hands{ fill: var(--abt-logo-hands); }
.abt-spoon{ fill: var(--abt-logo-spoon); }
/* התמונות הממוסכות — היחידות שמתחלפות */
.abt-photo{
opacity:0;
transform-box: fill-box;
transform-origin: center;
transform: scale(var(--abt-zoom));
transition: opacity var(--abt-fade) ease, transform calc(var(--abt-fade) * 1.6) ease;
}
.abt-photo.is-on{ opacity:1; transform: scale(1); }
/* הטקסט המעוגל — טקסט חי, לא תמונה */
.abt-curved-text{
fill: var(--abt-curved);
font-family: 'Afek', sans-serif;
font-weight: var(--abt-curved-weight);
font-size: var(--abt-curved-size);
letter-spacing: var(--abt-curved-track);
/* טקסט מעוגל לכל מצב — רק הפעיל נראה */
opacity:0;
transition: opacity var(--abt-fade) ease;
}
.abt-curved-text.is-on{ opacity:1; }
/* ===== שכבות המצבים ===== */
.abt-state{
position:absolute;
inset:0;
display:grid;
grid-template-columns: var(--abt-right-w) 1fr var(--abt-left-w);
align-items:center;
justify-content:space-between;
gap: var(--abt-gap);
opacity:0;
visibility:hidden;
transition: opacity var(--abt-fade) ease, visibility 0s linear var(--abt-fade);
z-index:1;
}
.abt-state.is-on{
opacity:1;
visibility:visible;
transition: opacity var(--abt-fade) ease, visibility 0s;
z-index:3; /* מעל הלוגו כדי שהכפתור יהיה לחיץ */
}
.abt-state > *{ pointer-events:none; }
.abt-state.is-on > *{ pointer-events:auto; }
.abt-mid{ grid-column:2; } /* מרווח לשמירת מקום ללוגו */
/* עמודה ימנית — כתב יד, חץ, כותרת. מיושרת לימין. */
.abt-right{
grid-column:1; /* RTL: העמודה הראשונה יושבת פיזית מימין */
justify-self:end;
width: var(--abt-right-w);
text-align:right;
transform: translate(var(--abt-right-x), var(--abt-right-y));
}
.abt-note-wrap{
position:relative;
display:block;
margin-bottom: var(--abt-arrow-h);
transition: opacity var(--abt-fade) ease;
}
/* כתב היד — טקסט חי בגופן כתב-יד עברי, מתחלף לפי המצב */
.abt-note{
display:block;
font-family:'OhYaelLeibushor', 'Afek', sans-serif;
font-weight:400;
font-style:normal;
font-size: var(--abt-note-size);
line-height: var(--abt-note-lh);
letter-spacing:0;
color: var(--abt-note-color);
max-width: var(--abt-note-w);
margin-inline-start:auto;
transform: translate(var(--abt-note-x), var(--abt-note-y)) rotate(var(--abt-note-rot));
transform-origin: right bottom;
}
/* החץ המקווקו — יוצא משמאל-מתחת לכתב היד ומצביע חזרה אליו */
.abt-arrow{
position:absolute;
right: var(--abt-arrow-x);
top: 100%;
width: var(--abt-arrow-w);
height:auto;
margin-top: var(--abt-arrow-y);
}
.abt-title{
font-weight:800;
font-size: var(--abt-h1);
line-height: var(--abt-h1-lh);
color: var(--abt-ink);
margin:0;
}
/* המילה הכתומה תמיד בשורה משלה. שאר הכותרת נשברת לפי רוחב העמודה
כדי שלעולם לא תיווצר גלישה אופקית בגדלי גופן גדולים. */
.abt-title .abt-accent{ display:block; color: var(--abt-accent); white-space:nowrap; }
.abt-title .abt-line{ display:block; }
/* עמודה שמאלית — אייקון, טקסט, כפתור. מיושרת לשמאל. */
.abt-left{
grid-column:3; /* RTL: העמודה השלישית יושבת פיזית משמאל */
justify-self:start;
width: var(--abt-left-w);
text-align:left;
transform: translate(var(--abt-left-x), var(--abt-left-y));
}
/* אייקון הלב — חייב לשבת פיזית משמאל. ב-RTL הערך flex-start הוא ימין,
לכן קובעים direction:ltr על המכל כדי שהיישור יהיה שמאלה בפועל. */
.abt-icon{
color: var(--abt-icon-color);
margin-bottom: var(--abt-icon-gap);
line-height:0;
display:flex;
direction:ltr;
justify-content:flex-start;
transform: translate(var(--abt-icon-x), var(--abt-icon-y));
}
/* אייקוני הלב — קבצי SVG לפי מצב, נתיב נשלט מ-ABOUT_STATES */
.abt-icon img{
width: var(--abt-icon-size);
height:auto;
display:block;
}
.abt-body{
font-size: var(--abt-body-size);
line-height: var(--abt-body-lh);
color: var(--abt-body);
margin:0;
}
.abt-body + .abt-body{ margin-top: var(--abt-para-gap); }
.abt-body b{ font-weight:700; }
.abt-cta{
display:inline-flex;
align-items:center;
gap:6px;
height: var(--abt-cta-h);
padding:0 var(--abt-cta-pad);
margin-top: var(--abt-cta-gap);
border-radius: var(--abt-cta-r);
background: var(--abt-ink);
color:#fff !important;
font-size: var(--abt-cta-f);
font-weight:600;
text-decoration:none;
white-space:nowrap;
transition: transform .2s ease, box-shadow .2s ease;
}
.abt-cta svg{
width: var(--abt-cta-icon);
height: var(--abt-cta-icon);
stroke:currentColor;
fill:none;
stroke-width:2;
flex-shrink:0;
}
.abt-cta[hidden]{ display:none; }
/* ===== הופעת הכפתור — עדינה, כמה שניות אחרי מעבר המצב ===== */
.abt-cta{
opacity:0;
transform: translateY(8px);
}
.abt-state.is-on .abt-cta{
animation: abt-cta-in 0.75s cubic-bezier(.22,.9,.3,1) var(--abt-cta-delay) both;
}
@keyframes abt-cta-in{
from{ opacity:0; transform: translateY(8px) scale(.97); }
to { opacity:1; transform: none; }
}
/* פעימה עדינה מאוד ללב — מתחילה רק אחרי שהכפתור הופיע */
.abt-state.is-on .abt-cta svg{
animation: abt-heart 2.6s ease-in-out calc(var(--abt-cta-delay) + 0.75s) infinite;
transform-origin:center;
}
@keyframes abt-heart{
0%, 62%, 100%{ transform: scale(1); }
72% { transform: scale(1.13); }
82% { transform: scale(1); }
90% { transform: scale(1.07); }
}
/* ריחוף — נשמר, בלי להתנגש באנימציית הכניסה */
.abt-cta:hover{ box-shadow:0 6px 14px rgba(0,0,0,.16); }
/* ===== מחוון התקדמות — נוצר דינמית מ-ABOUT_STATES, צמוד מתחת ללוגו ===== */
.abt-dots{
display:flex;
justify-content:center;
gap: var(--abt-dot-gap);
margin-top: var(--abt-dot-top);
z-index:4;
position:relative;
}
.abt-dot{
width: var(--abt-dot-w);
height: var(--abt-dot-h);
border-radius:999px;
background: var(--abt-dot);
border:0; padding:0;
transition: width .35s ease, background-color .35s ease;
}
.abt-dot[data-status="done"]{ background: var(--abt-dot-done); }
.abt-dot[data-status="current"]{ background: var(--abt-accent); width: var(--abt-dot-w-active); }
/* ===== טאבלט ===== */
@media (max-width: 1149px) and (min-width: 901px){
.abt{
--abt-logo-size: 400px;
--abt-h1: 52px;
--abt-body-size: 17px;
--abt-col-w: 240px;
--abt-gap: 24px;
--abt-curved-size: 46px;
--abt-arrow-w: 110px;
}
}
/* ===== מובייל — מצבים מוערמים, בלי sticky, המחוון נשאר ===== */
@media (max-width: 900px){
.abt{ height:auto; }
.abt-stage{
position:static;
height:auto;
overflow:visible;
display:block;
padding: 40px 0 80px;
}
.abt-scene{
display:block;
height:auto;
padding: 0 20px;
max-width:none;
}
/* הלוגו חוזר לזרימה — עותק לכל מצב */
.abt-logo{ display:none; }
.abt-state{
position:relative;
inset:auto;
display:block;
opacity:1;
visibility:visible;
transition:none;
padding: 26px 0 42px;
text-align:center;
z-index:auto;
}
.abt-state > *{ pointer-events:auto; }
/* במובייל כל הכרטיסים גלויים — הכפתור לא תלוי ב-is-on, מופיע כשהכרטיס נכנס למסך */
.abt-cta{ opacity:1; transform:none; }
.abt-state .abt-cta{ animation: abt-cta-in 0.75s cubic-bezier(.22,.9,.3,1) both; }
.abt-state .abt-cta svg{
animation: abt-heart 2.6s ease-in-out 0.75s infinite;
transform-origin:center;
}
.abt-state .abt-logo-mobile{
display:block;
width:min(320px, 76vw);
margin:0 auto 22px;
}
.abt-state .abt-logo-mobile svg{ width:100%; height:auto; display:block; overflow:visible; }
.abt-mid{ display:none; }
.abt-right, .abt-left{
max-width:none;
text-align:center;
justify-self:auto;
}
.abt-right{ margin-bottom:18px; }
.abt-note{ margin-inline:auto; transform:none; max-width:none; }
.abt-note-wrap{ min-height:0; margin-bottom:6px; }
.abt-arrow{ display:none; }
.abt-icon{ display:flex; justify-content:center; }
.abt{
--abt-h1: 40px;
--abt-body-size: 17px;
--abt-curved-size: 54px;
}
/* המחוון נשאר — דביק לתחתית המסך */
.abt-dots{
position:sticky;
bottom:18px;
left:auto; right:auto;
margin-top:8px;
}
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference){
body:not(.desktop-preview) .partners .partner-welfare .full{
animation: partnerRevealWipe 12s cubic-bezier(.33,0,.2,1) infinite;
}
body:not(.desktop-preview) .partners .partner-welfare .muted{
animation: partnerMutedWipe 12s cubic-bezier(.33,0,.2,1) infinite;
}
body:not(.desktop-preview) .partners .partner-mizam .mizam-icon{
animation: partnerIconReveal 12s ease-in-out infinite;
}
body:not(.desktop-preview) .partners .partner-mizam .mizam-text::after{
animation: partnerTextReveal 12s cubic-bezier(.33,0,.2,1) infinite;
}
}
@media (max-width: 480px){
.abt{ --abt-h1: 34px; --abt-body-size: 16px; }
.abt-state .abt-logo-mobile{ width:min(260px, 72vw); }
}
/* ===== העדפת תנועה מופחתת ===== */
@media (prefers-reduced-motion: reduce){
.abt{ --abt-fade: 0s; --abt-zoom: 1; }
.abt-photo, .abt-state, .abt-dot{ transition:none; }
/* בלי אנימציית כניסה ובלי פעימה — הכפתור פשוט נראה */
.abt-cta, .abt-state.is-on .abt-cta,
.abt-state.is-on .abt-cta svg{ animation:none; opacity:1; transform:none; }
}
/* ===================== העשייה במספרים ===================== */
.stats-section{
position:relative;
width:100%;
min-height: var(--st-h);
display:flex;
align-items:center;
overflow:hidden;
isolation:isolate;
/* 5.10.2026: the dark brown sits under the photo, so the band reads as
finished from the first moment even on a slow phone connection */
background: var(--st-c4);
}
/* תמונת הרקע — img אמיתי עם alt, לא background-image */
.stats-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
z-index:0;
}
.stats-overlay{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(90deg,
color-mix(in srgb, var(--st-c4) 92%, transparent) 0%,
color-mix(in srgb, var(--st-c4) 70%, transparent) 55%,
color-mix(in srgb, var(--st-c4) 88%, transparent) 100%);
opacity: var(--st-overlay);
pointer-events:none;
}
.stats-wrap{
position:relative;
z-index:2;
/* הפריסה בלבד — הרוחב והשוליים מגיעים מ-.site-container */
display:flex;
align-items:center;
justify-content:center;
gap: var(--st-wrap-gap);
padding-block: 34px;
}
/* ===== הכותרת — בצד ימין ===== */
.stats-title{
flex:0 0 auto;
margin:0;
font-size: var(--st-title);
line-height:1.12;
font-weight:800;
color:#fff;
text-align:right;
white-space:nowrap;
}
/* רק שורות הכותרת הישירות — לא ה-span של פס הגראדיאנט שבתוכן */
.stats-title > span{ display:block; }
/* "במספרים" — בלוק הגראדיאנט עוטף את המילה מאחוריה.
.is-mark משמש גם באזורים אחרים (ראה .title-highlight למטה). */
.stats-title .is-mark,
.title-highlight{
position:relative;
width:max-content;
margin-inline-start:auto;
/* ריפוד קל כדי שהבלוק ייראה עוטף ולא צמוד לאותיות */
padding-inline: .1em;
}
/* בלוק הגראדיאנט: כתום מלא בשמאל → שקוף בימין, בלי עיגול פינות.
ממוקם אבסולוטית מאחורי המילה ובגובה מעט גדול מהאותיות — עוטף אותן.
נכנס באנימציה של פתיחה מימין לשמאל. */
.stats-mark-bar{
position:absolute;
z-index:-1; /* מאחורי האותיות */
right:0;
bottom: var(--st-mark-bottom);
/* 100% = בדיוק רוחב המילה; אפשר להרחיב/לצמצם מהפאנל */
width: var(--st-mark-w);
height: var(--st-mark-h);
border-radius:0;
background: linear-gradient(270deg,
color-mix(in srgb, var(--st-c3) 8%, transparent) 0%,
var(--st-c3) 100%);
transform: scaleX(0);
transform-origin: right center;
transition: transform .85s cubic-bezier(.22,.9,.3,1) .25s;
pointer-events:none;
}
.stats-section.is-in .stats-mark-bar{ transform: scaleX(1); }
/* מחוץ לסקשן המספרים אין מנגנון is-in — הבלוק פשוט גלוי */
.title-highlight .stats-mark-bar{ transform:none; transition:none; }
/* ===== שורת העיגולים ===== */
.stats-list{
list-style:none;
margin:0; padding:0;
display:flex;
align-items:center;
justify-content:center;
gap: var(--st-gap);
}
.stat-circle{
width: var(--st-circle);
height: var(--st-circle);
border-radius:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:10px;
flex-shrink:0;
/* הופעה עדינה בגלילה */
opacity:0;
transform: translateY(14px);
transition: opacity .55s ease, transform .55s ease;
}
.stats-section.is-in .stat-circle{ opacity:1; transform:none; }
.stats-section.is-in .stat-circle:nth-child(2){ transition-delay:.08s; }
.stats-section.is-in .stat-circle:nth-child(3){ transition-delay:.16s; }
.stats-section.is-in .stat-circle:nth-child(4){ transition-delay:.24s; }
/* צבעי העיגולים — לפי הסדר בעיצוב (מימין לשמאל: כחול, ירוק, כתום, חום) */
.stat-circle:nth-child(1){ background: var(--st-c1); color: var(--st-c4); }
.stat-circle:nth-child(2){ background: var(--st-c2); color: var(--st-c4); }
.stat-circle:nth-child(3){ background: var(--st-c3); color:#fff; }
.stat-circle:nth-child(4){ background: var(--st-c4); color:#fff; }
.stat-num{
font-size: var(--st-num);
font-weight: var(--st-num-weight);
line-height:1;
letter-spacing:-.01em;
/* מונע קפיצת רוחב בזמן ספירה */
font-variant-numeric: tabular-nums;
direction:ltr;
}
.stat-label{
margin-top:6px;
font-size: var(--st-label);
line-height:1.25;
font-weight:500;
white-space:pre-line; /* \n בטקסט = שבירת שורה */
}
/* ===== טאבלט ===== */
/* עיגולים בקוטר 210 לא נכנסים ברוחב מלא מתחת ל-1320 */
@media (max-width: 1320px){
.stats-section{ --st-circle: 186px; --st-title: 56px; --st-num: 33px; --st-label: 18px; --st-wrap-gap: 34px; }
}
@media (max-width: 1140px){
.stats-section{ --st-circle: 164px; --st-title: 46px; --st-num: 29px; --st-label: 16px; --st-gap: 18px; --st-wrap-gap: 28px; }
}
@media (max-width: 1100px){
.stats-section{ --st-circle: 152px; --st-title: 38px; --st-num: 26px; --st-label: 15px; --st-gap: 16px; }
.stats-wrap{ gap:34px; }
}
@media (max-width: 900px){
.stats-section{ --st-h: auto; --st-overlay: 0.72; }
.stats-wrap{
flex-direction:column;
gap:26px;
padding: 44px 0;
}
.stats-title{ text-align:center; }
/* במובייל הכותרת ממורכזת — המילה והפס שמתחתיה ממורכזים גם הם */
.stats-title .is-mark{ margin-inline:auto; }
.stats-list{
display:grid;
grid-template-columns: repeat(2, auto);
justify-content:center;
gap:14px;
}
}
/* ===== מובייל ===== */
@media (max-width: 480px){
.stats-section{ --st-circle: min(40vw, 158px); --st-title: 30px; --st-num: 24px; --st-label: 14px; }
.stats-wrap{ padding: 36px 0; }
.stats-list{ gap:12px; }
}
@media (prefers-reduced-motion: reduce){
.stat-circle{ opacity:1; transform:none; transition:none; }
.stats-mark-bar{ transform:none; transition:none; }
}
/* ===================== תגית אזור — רכיב גלובלי ===================== */
/* שימוש: 
טקסט
משתמשת באותו נכס של שאר התגיות באתר (.abt-badge), כדי ששלושת
העיגולים ייראו זהים בדיוק בכל אזור. */
.section-tag{
position:relative;
display:block;
width: var(--tag-w);
margin-inline:auto;
text-align:center;
}
.section-tag img{
width:100%;
height:auto;
display:block;
}
/* הטקסט ממורכז מעל העיגולים */
.section-tag b{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size: var(--tag-fs);
font-weight:700;
color: var(--ink);
white-space:nowrap;
}
/* ===== אנימציית הכניסה של התגית — רכיב אחד לכל התגיות באתר =====
שלושת העיגולים "נושמים" פנימה בזה אחר זה (stagger), והטקסט עולה
אחריהם. מופעל פעם אחת כשהתגית נכנסת למסך, דרך IntersectionObserver
שמוסיף .is-in — אותו דפוס כמו שאר האזורים בדף.
כל התזמונים בטוקנים, כדי שיהיו ניתנים לכוונון מהפאנל. */
.section-tag{
--tag-dur: 620ms;
--tag-delay: 90ms; /* הפרש בין עיגול לעיגול */
--tag-ease: cubic-bezier(.34,1.32,.5,1); /* קפיצה עדינה בסוף */
}
/* מצב התחלה — רק כשה-JS סימן שהאנימציה פעילה, כדי שבלי JS התגית גלויה */
.js-tag-anim .section-tag img,
.js-tag-anim .section-tag b{
opacity:0;
will-change: transform, opacity;
}
.js-tag-anim .section-tag img{
transform: scale(.82);
transition: opacity var(--tag-dur) ease,
transform var(--tag-dur) var(--tag-ease);
}
.js-tag-anim .section-tag b{
transform: translateY(9px);
transition: opacity var(--tag-dur) ease var(--tag-delay),
transform var(--tag-dur) var(--tag-ease) var(--tag-delay);
}
.js-tag-anim .section-tag.is-in img,
.js-tag-anim .section-tag.is-in b{
opacity:1;
transform:none;
}
/* שלושת העיגולים מצוירים בתוך ה-PNG, ולכן ה-stagger נעשה על שכבות
הילה שמצוירות בקוד — עיגול כתום רך שמתפשט מאחורי כל שליש */
.section-tag::before,
.section-tag::after{
content:'';
position:absolute;
top:50%;
width: calc(var(--tag-w) * .30);
aspect-ratio:1;
margin-top: calc(var(--tag-w) * -.15);
border-radius:50%;
background: color-mix(in srgb, var(--orange) 16%, transparent);
opacity:0;
pointer-events:none;
z-index:-1;
}
.section-tag::before{ right: calc(var(--tag-w) * .06); }
.section-tag::after{ left: calc(var(--tag-w) * .06); }
.js-tag-anim .section-tag.is-in::before{ animation: tagPulse 900ms ease-out 60ms 1; }
.js-tag-anim .section-tag.is-in::after{ animation: tagPulse 900ms ease-out 200ms 1; }
@keyframes tagPulse{
0% { opacity:0; transform: scale(.6); }
45% { opacity:.85; transform: scale(1.06); }
100% { opacity:0; transform: scale(1.35); }
}
/* כיבוד העדפת המשתמש — בלי תנועה, התגית פשוט מופיעה */
@media (prefers-reduced-motion: reduce){
.js-tag-anim .section-tag img,
.js-tag-anim .section-tag b{
opacity:1; transform:none; transition:none;
}
.js-tag-anim .section-tag.is-in::before,
.js-tag-anim .section-tag.is-in::after{ animation:none; }
}
/* ===================================================================
חשיפת כותרות מילה-מילה — רכיב גלובלי
===================================================================
הטקסט "נכתב" לתוך המסך: כל מילה מחליקה פנימה מימין — כיוון
הכתיבה בעברית — ומתמקמת, בהפרש קצר אחרי קודמתה.
ה-JS עוטף כל מילה ב- *בתוך* תיבות הטקסט הקיימות, ולכן
מבנה האלמנטים לא משתנה: ה- של כל שורה נשאר ילד ישיר של
הכותרת, ו-12 הכללים בקובץ שמשתמשים בסלקטור ילד-ישיר
(.ft-title > span, .roee-title > span וכו') ממשיכים לעבוד.
.js-word-anim נוספת רק אם יש JS ו-IntersectionObserver, ולכן
בלעדיהם הכותרות פשוט גלויות — אותה גישת progressive enhancement
של אנימציית התגיות שמעליי. */
:root{
--rv-dur: 1.2s; /* משך הכניסה של מילה בודדת */
--rv-x: 28px; /* מרחק ההחלקה; חיובי = מימין */
--rv-ease: cubic-bezier(.16,.84,.28,1); /* יציאה רכה, בלי קפיצה */
}
/* ה-transition יושב על מצב *הסיום* בכוונה. אם הוא היה על מצב
ההתחלה, עצם הוספת המחלקה הייתה מונפשת: המילה הייתה דוהה
החוצה לאורך ההשהיה במקום להיעלם מיד, וכשהגיע is-shown היא
עוד הייתה ב-opacity 1 — כלומר מעבר מ-1 ל-1, בלי שום תנועה.
ככה מצב ההתחלה נכנס מיידית, ורק החשיפה מונפשת. */
.js-word-anim .rv-w{
display:inline-block; /* transform לא חל על inline */
transform: translateX(var(--rv-x));
opacity: 0;
will-change: transform, opacity;
}
.js-word-anim .rv-w.is-shown{
transform: none;
opacity: 1;
transition: transform var(--rv-dur) var(--rv-ease) var(--rv-d, 0s),
opacity var(--rv-dur) var(--rv-ease) var(--rv-d, 0s);
}
@media (prefers-reduced-motion: reduce){
.js-word-anim .rv-w,
.js-word-anim .rv-w.is-shown{
transform: none;
opacity: 1;
transition: none;
}
}
/* ===================================================================
כניסת ההירו — כוריאוגרפיה
===================================================================
הרצף נפתח מהרקע קדימה: קודם הבמה (עיגולי הרקע), אחר כך המסר
(תגית ← כותרת), במקביל התמונות של האנשים, ולבסוף הכפתור
והשותפים. הכל נגמר תוך כ-2 שניות, ואז המסך נח.
בלי overshoot ובלי קפיצות: התנועה צריכה להיקרא ככבוד ולא
כהופעה — זה בית תמחוי, לא השקת מוצר.
כל התנועה נכתבת ב-translate/scale — *מאפיינים עצמאיים* — ולא
ב-transform, כי חלק מהאלמנטים כבר נושאים transform משלהם:
.warm-ellipse מרכזת את עצמה ב-translateX(-50%), ו-.deco-heart
נשענת על טוקנים מהפאנל. המאפיינים העצמאיים מתווספים לערכים
האלה בשרשרת הטרנספורם במקום לדרוס אותם.
.hero-armed נוספת רק מה-JS, ולכן בלי JS הכל פשוט גלוי. */
.hero{ --hi-ease: cubic-bezier(.22,.72,.24,1); }
/* מצב ההתחלה נקבע כבר מהסקריפט שב-, לפני הציור הראשון.
הרשימה כאן מכוונת לאותם אלמנטים שמופיעים בטבלת הרצף ב-JS —
שתיהן צריכות להישאר מסונכרנות. */
/* .hero-handnote *לא* ברשימה: הוא display:contents ולכן אין לו
תיבה בכלל — opacity עליו לא עושה כלום. הכתב יד והחץ שבתוכו
מוסתרים דרך מצב המסכה שבבלוק "נכתבים ומצטיירים". */
.hero-pre .hero .hero-slot,
.hero-pre .hero .deco-heart,
.hero-pre .hero .cta-btn,
.hero-pre .hero .partners,
.hero-pre .hero-copy h1{ opacity: 0; }
/* כמו בחשיפת המילים: ה-transition על מצב הסיום בלבד, אחרת
עצם החימוש היה מונפש והאלמנט לא היה נעלם באמת לפני ההפעלה */
.hero.hero-armed .hero-anim{
opacity: 0;
translate: 0 var(--hi-y, 0px);
scale: var(--hi-s, 1);
will-change: opacity, translate, scale;
}
.hero.hero-armed.hero-in .hero-anim{
opacity: 1;
translate: 0 0;
scale: 1;
transition: opacity var(--hi-dur,.9s) var(--hi-ease) var(--hi-d,0s),
translate var(--hi-dur,.9s) var(--hi-ease) var(--hi-d,0s),
scale var(--hi-dur,.9s) var(--hi-ease) var(--hi-d,0s);
}
@media (prefers-reduced-motion: reduce){
.hero.hero-armed .hero-anim,
.hero.hero-armed.hero-in .hero-anim{
opacity: 1;
translate: none;
scale: none;
transition: none;
}
}
/* ===================================================================
הכתב יד והחץ — נכתבים ומצטיירים
===================================================================
שניהם טקסט ותמונה ולא SVG, ולכן אי אפשר "למשוך" קו עם
stroke-dashoffset. במקום זה מסכת גרדיאנט רכה מטאטאת אותם
בכיוון שבו הם נוצרו: הכתב מימין לשמאל (כיוון הכתיבה
בעברית), והחץ משמאל לימין — עד שראש החץ מגיע אחרון.
מסכה, ולא opacity/transform, בכוונה: .deco-hand נשענת על
opacity:var(--script-op) ועל transform עם --deco-k
ו---hand-rot מהפאנל. mask-image לא נוגע באף אחד מהם, ולכן
כל הכוונונים מהפאנל נשארים בתוקף.
המסכה מוגדרת בקואורדינטות של האלמנט עצמו — לפני ה-rotate —
ולכן הטאטוא רץ לאורך שורת הכתב במקום אופקית על המסך. */
/* מצב ההתחלה חל כבר בשלב ה-hero-pre (לפני הציור הראשון) וגם
אחרי החימוש — שני השלבים מגדירים אותו זהה, כדי שלא תהיה
הבזקה של כתב יד שמופיע ואז נעלם */
.hero-pre .hero .deco-hand,
.hero-pre .hero .deco-harr,
.hero.hero-armed .deco-hand,
.hero.hero-armed .deco-harr{
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: 300% 100%; mask-size: 300% 100%;
}
/* מימין לשמאל: החלק האטום של המסכה נכנס מצד ימין של האלמנט */
.hero-pre .hero .deco-hand,
.hero.hero-armed .deco-hand{
-webkit-mask-image: linear-gradient(to left, #000 0 34%, rgba(0,0,0,0) 66%);
mask-image: linear-gradient(to left, #000 0 34%, rgba(0,0,0,0) 66%);
-webkit-mask-position: 0% 50%; mask-position: 0% 50%;
}
.hero.hero-armed.hero-in .deco-hand{
-webkit-mask-position: 100% 50%; mask-position: 100% 50%;
transition: -webkit-mask-position 1.2s cubic-bezier(.36,.68,.3,1) 1s,
mask-position 1.2s cubic-bezier(.36,.68,.3,1) 1s;
}
/* משמאל לימין — החץ "נמתח" והראש שלו מגיע בסוף */
.hero-pre .hero .deco-harr,
.hero.hero-armed .deco-harr{
-webkit-mask-image: linear-gradient(to right, #000 0 34%, rgba(0,0,0,0) 66%);
mask-image: linear-gradient(to right, #000 0 34%, rgba(0,0,0,0) 66%);
-webkit-mask-position: 100% 50%; mask-position: 100% 50%;
}
.hero.hero-armed.hero-in .deco-harr{
-webkit-mask-position: 0% 50%; mask-position: 0% 50%;
transition: -webkit-mask-position .75s cubic-bezier(.36,.68,.3,1) 2s,
mask-position .75s cubic-bezier(.36,.68,.3,1) 2s;
}
@media (prefers-reduced-motion: reduce){
.hero.hero-armed .deco-hand,
.hero.hero-armed .deco-harr,
.hero.hero-armed.hero-in .deco-hand,
.hero.hero-armed.hero-in .deco-harr{
-webkit-mask-image: none; mask-image: none; transition: none;
}
}
/* ===================== אזור הסיום =====================
תמונת רקע + שכבת חום, לוגו שחוצה את הגבול העליון,
ובתחתית אותו פס אמון (.give-strip) שכבר קיים בדף. */
.footer-section{
position:relative;
/* לא overflow:hidden כאן — הלוגו חייב לחרוג מעל הגבול */
padding-block: var(--ft-pad-top) var(--ft-pad-bottom);
margin-top: calc(var(--ft-logo) * var(--ft-logo-out));
/* גובה האזור כולו, כולל החלק של הלוגו שיוצא מעליו */
max-height: calc(var(--ft-max-h) - var(--ft-logo) * var(--ft-logo-out));
color:#fff;
isolation:isolate;
}
@supports (max-height: 100dvh){
.footer-section{
max-height: calc(var(--ft-max-h-dvh, var(--ft-max-h)) - var(--ft-logo) * var(--ft-logo-out));
}
}
/* ===== מובייל וטאבלט: הפוטר גדל לפי תוכנו =====
max-height נועד למנוע מהפוטר לחרוג ממסך אחד בדסקטופ.
בפריסה המוערמת התוכן דורש ~1630px, והתקרה חתכה את
*הרקע* בלבד ל-786px — התוכן המשיך לזרום החוצה על גבי
הקרם של הדף. זה מקור "השטח הריק" מתחת לפוטר: לא מרווח,
אלא רקע שנגמר לפני שהתוכן נגמר. */
@media (max-width: 1024px){
.footer-section{
max-height:none;
padding-block: var(--section-padding-y) var(--space-lg);
}
}
/* ===== רקע הפוטר במובייל =====
object-position:center 60% חתך את הקערה והידיים כמעט
לגמרי בפרופורציה הצרה. מרכוז אמיתי מחזיר אותן למסגרת,
ושכבת החום מעט שקופה יותר כדי שהתמונה תיראה — בלי
לפגוע בניגודיות של הטקסט הלבן. */
@media (max-width: 767px){
.footer-bg img{
object-position: center 45%;
}
.footer-bg::after{ opacity:.92; }
/* הלוגו נכנס עמוק יותר לתוך הרקע החום */
.footer-section{ --ft-logo-out: .38; }
}
/* תמונת הרקע ושכבת החום — עוטף פנימי שכן חותך */
.footer-bg{
position:absolute;
inset:0;
z-index:0;
overflow:hidden; /* הקישוטים נחתכים כאן, הלוגו לא */
pointer-events:none;
}
.footer-bg img{
width:100%; height:100%;
object-fit:cover;
object-position:center 60%;
display:block;
}
/* שכבת החום — משתמשת בטוקן החום של המותג */
.footer-bg::after{
content:'';
position:absolute;
inset:0;
background: var(--ink);
opacity: var(--ft-overlay);
}
/* קישוטים — אותה שפה של עיגולים מקווקווים שבשאר הדף */
.ft-deco{ position:absolute; pointer-events:none; }
/* העיגולים המקווקווים בפוטר — מוסתרים לבקשת חן (19.8.2026).
הקוד נשמר; להחזרה יש להעביר את הסליידר "עיגולים מקווקווים" ל-1. */
.ft-arc, .ft-arc2{ display: var(--ft-arc-display, none); }
.ft-arc{
top: var(--ft-arc-y);
right: var(--ft-arc-x);
width: var(--ft-arc);
height: var(--ft-arc);
overflow:visible;
z-index:1; /* מעל הרקע, מתחת לתוכן */
}
.ft-arc circle{
fill:none;
stroke: var(--st-c1);
stroke-width:2;
stroke-dasharray: 10 14;
opacity: var(--ft-arc-op);
vector-effect:non-scaling-stroke;
}
/* קשת שנייה — פינה שמאלית תחתונה */
.ft-arc2{
bottom: var(--ft-arc2-y);
left: var(--ft-arc2-x);
width: var(--ft-arc2);
height: var(--ft-arc2);
overflow:visible;
}
.ft-arc2 circle{
fill:none;
stroke: var(--st-c1);
stroke-width:2;
stroke-dasharray: 10 14;
opacity: var(--ft-arc2-op);
vector-effect:non-scaling-stroke;
}
/* עיגול בהיר ורך ליד הקשת הימנית */
.ft-glow{
top: var(--ft-glow-y);
right: var(--ft-glow-x);
width: var(--ft-glow);
height: var(--ft-glow);
border-radius:50%;
background: rgba(255,255,255, var(--ft-glow-op));
}
.ft-blob{
bottom: var(--ft-blob-y);
left: var(--ft-blob-x);
width: var(--ft-blob);
height: var(--ft-blob);
border-radius:50%;
background: rgba(255,255,255, var(--ft-blob-op));
}
.footer-wrap{
position:relative;
z-index:2;
text-align:center;
}
/* הלוגו — חוצה את הגבול העליון של הסקשן */
.ft-logo{
position:absolute;
top: calc(var(--ft-logo) * var(--ft-logo-out) * -1 - var(--ft-pad-top));
left:50%;
transform: translateX(-50%);
width: var(--ft-logo);
height: var(--ft-logo);
z-index:5; /* מעל הכול */
/* טבעת בצבע רקע הדף — הלוגו "חותך" את שכבת החום */
border-radius:50%;
background: var(--cream);
box-shadow: 0 0 0 var(--ft-logo-ring) var(--cream);
display:flex;
align-items:center;
justify-content:center;
}
.ft-logo img{ width:100%; height:100%; display:block; border-radius:50%; }
.ft-title{
margin: var(--ft-title-gap) 0 0;
font-size: var(--ft-title);
line-height: var(--ft-title-lh);
font-weight:800;
color:#fff;
}
/* ===================================================================
תיבת הסימון בטופס — עגולה בכל המסכים
===================================================================
העיצוב העגול הוגדר קודם רק בתוך @media של המובייל, ולכן
בדסקטופ ובטאבלט נשארה תיבה מרובעת של ברירת המחדל
(נמדד: 15×15, border-radius:0). כאן הוא ברמת הבסיס. */
.join-form input[type="checkbox"]{
appearance:none;
-webkit-appearance:none;
inline-size:20px;
block-size:20px;
min-inline-size:20px;
min-block-size:20px;
max-inline-size:20px;
max-block-size:20px;
aspect-ratio:1 / 1;
flex:0 0 20px;
align-self:center;
border-radius:50%;
border:1.6px solid color-mix(in srgb, var(--ink) 34%, transparent);
background:#fff;
display:inline-grid;
place-content:center;
cursor:pointer;
transition: border-color .18s ease, background .18s ease;
}
.join-form input[type="checkbox"]::after{
content:"";
inline-size:10px;
block-size:10px;
border-radius:50%;
transform: scale(0);
transition: transform .15s ease;
background: var(--orange);
}
.join-form input[type="checkbox"]:checked{
border-color: var(--orange);
}
.join-form input[type="checkbox"]:checked::after{ transform: scale(1); }
.join-form input[type="checkbox"]:focus-visible{
outline:3px solid var(--orange);
outline-offset:2px;
}
.ft-title > span{ display:block; }
.ft-title .is-accent{ color: var(--orange); }
/* השורה הכתומה בפוטר היא בלוק ברוחב מלא (עד 1440px),
והגרדיאנט נמתח על כולו — כך שהמעבר בין שני הכתומים
התפרס דק מדי ולא נראה בכלל.
inline-block מצמיד את הגרדיאנט לרוחב הטקסט עצמו,
בדיוק כמו בכותרות הקצרות בשאר הדף. */
.ft-title .is-accent{
display:inline-block;
width:fit-content;
margin-inline:auto;
}
/* ===== גרדיאנט ההדגשה — רכיב גלובלי =====
אותו גרדיאנט של כותרת ההירו (.grad), מוחל על כל ההדגשות
הכתומות בכותרות הדף. שינוי הצבעים כאן משנה את כל הדף. */
.ft-title .is-accent,
.field-title .is-accent,
.join-title .is-accent,
.volunteers-title .is-accent,
.voices-title .is-accent,
.activities-title .is-accent,
.give-title .is-blue{
/* לא כולל את רועי ואת אזור התרומה: שם ההדגשה היא בלוק כתום מלא
עם טקסט לבן, ו-background-clip:text היה מוחק את הטקסט. */
background: var(--grad-accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* ===== שני כפתורי ה-CTA ===== */
.ft-cta-row{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
margin-top: var(--ft-cta-gap);
}
.ft-btn{
display:inline-flex;
align-items:center;
gap:10px;
height: var(--ft-cta-h);
padding-inline: 22px;
border-radius:var(--button-radius); /* אותו radius כמו .cta-btn */
font-size: var(--ft-cta-fs);
font-weight:700;
text-decoration:none;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ft-btn svg{ width:17px; height:17px; fill:none; stroke-width:2.4;
stroke-linecap:round; stroke-linejoin:round; }
.ft-btn--orange{
background: var(--orange);
color:#fff;
box-shadow: 0 10px 24px rgba(241,106,44,.32);
}
.ft-btn--orange svg{ stroke:#fff; }
.ft-btn--white{
background:#fff;
color: var(--orange);
}
.ft-btn--white svg{ stroke: var(--orange); }
.ft-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
/* ===== שורת הרשתות + הקו המקווקו ===== */
.ft-social{
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap: var(--ft-social-space);
margin-top: var(--ft-social-gap);
/* חצי רוחב שורת האייקונים — 4 עיגולים + 3 מרווחים ביניהם.
הקווים מתחילים אחרי זה, ולכן אף פעם לא עוברים מתחת לעיגולים. */
--ft-icons-half: calc((var(--ft-social) * 4 + var(--ft-social-space) * 3) / 2);
}
/* הקו הכתום המקווקו — עובר משני צידי האייקונים */
/* שני קטעי קו — אחד מימין לאייקונים ואחד משמאלם.
אין קו שעובר מתחת לעיגולים עצמם. */
.ft-social::before,
.ft-social::after{
content:'';
position:absolute;
top:50%;
width: var(--ft-social-line);
max-width: calc(50% - var(--ft-icons-half) - var(--ft-social-dash-gap));
height:0;
border-top: var(--ft-social-dash-w) dashed var(--orange);
opacity:.55;
z-index:0;
}
.ft-social::before{ right: calc(50% + var(--ft-icons-half) + var(--ft-social-dash-gap)); }
.ft-social::after{ left: calc(50% + var(--ft-icons-half) + var(--ft-social-dash-gap)); }
.ft-social a{
position:relative;
z-index:1; /* מעל הקו */
width: var(--ft-social);
height: var(--ft-social);
border-radius:50%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
transition: transform .2s ease;
}
.ft-social a:hover{ transform: translateY(-2px) scale(1.06); }
.ft-social img{
width: var(--ft-social-img);
height: var(--ft-social-img);
object-fit:contain;
display:block;
}
/* ===== ארבע עמודות המידע ===== */
.ft-cols{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap:26px;
margin-top: var(--ft-cols-gap);
text-align:right;
}
.ft-col h3{
margin:0 0 14px;
font-size: var(--ft-col-title);
font-weight:800;
color:#fff;
}
.ft-col ul{ list-style:none; margin:0; padding:0; }
.ft-col li{ margin-bottom: var(--ft-col-space); }
.ft-col a,
.ft-col span{
font-size: var(--ft-col-link);
color: rgba(255,255,255,.86);
text-decoration:none;
transition: color .2s ease;
}
.ft-col a:hover{ color: var(--orange); }
/* פרטי הקשר — אייקון קטן לצד כל שורה */
.ft-contact li{
display:flex;
align-items:center;
gap:9px;
justify-content:flex-start;
}
.ft-contact svg{
flex:0 0 auto;
width:15px; height:15px;
fill:none;
stroke: var(--orange);
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
/* ===== פס האמון — אותו רכיב .give-strip מהאזור הקודם ===== */
/* פס האמון — אותו רכיב, בגרסה קומפקטית יותר לפוטר */
.footer-section .give-strip{
margin-top: var(--ft-strip-gap);
text-align:right;
gap: var(--ft-strip-inner-gap);
padding: var(--ft-strip-pad) calc(var(--ft-strip-pad) * 1.6);
border-radius: var(--ft-strip-r);
}
.footer-section .give-tile{
width: var(--ft-strip-tile);
height: var(--ft-strip-tile);
}
.footer-section .give-trust-text h3{ font-size: var(--ft-strip-h3); }
.footer-section .give-trust-text p{ font-size: var(--ft-strip-p); }
.footer-section .give-strip-title{
font-size: var(--ft-strip-title);
width: var(--ft-strip-title-w);
flex:0 0 auto;
}
/* שורת הקרדיט */
.ft-note{
margin: var(--ft-note-gap) 0 0;
font-size: var(--ft-note);
color: rgba(255,255,255,.7);
}
.ft-note a{ color: inherit; text-decoration:none; }
.ft-note a:hover{ color: var(--orange); }
/* ===== רספונסיביות ===== */
@media (max-width: 1100px){
.footer-section{ --ft-title: 38px; --ft-logo: 128px; }
.ft-cols{ grid-template-columns: repeat(2, 1fr); gap:30px 26px; }
/* יעדי מגע: קישורי הפוטר היו 13px טקסט עם 3px מרווח — הרבה
מתחת ל-44px התקני. ריפוד אנכי מגדיל את שטח הנגיעה. */
.ft-col a, .ft-col span{ display:inline-block; padding-block:8px; }
.ft-col li{ margin-bottom:2px; }
}
@media (max-width: 640px){
.footer-section{
--ft-title: 27px;
--ft-logo: 104px;
--ft-pad-top: 92px;
--ft-col-title: 17px;
}
/* 2×2 ולא טור אחד: ארבע קבוצות בטור יחיד האריכו את הפוטר
ל-1730px של גלילה. הכותרות והקישורים קצרים ונשארים
קריאים בשתי עמודות. */
.ft-cols{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md) var(--space-sm);
}
/* רשימות הפוטר היו מרווחות מדי והשורות כמעט נגעו זו בזו
בגלל line-height גבוה. ריווח קצר ואחיד. */
.ft-col li{ margin-bottom:2px; }
.ft-col a{ line-height:1.45; padding-block:3px; }
.ft-col h3{ margin-bottom:8px; }
/* שורות "צרו קשר" — המייל (26 תווים) ארוך מרוחב העמודה
בגריד 2×2 ולכן גלש על האייקון שלו. הטקסט מקבל רוחב
גמיש ונשבר, והאייקון שומר על מקומו. */
.ft-contact li{
align-items:flex-start;
gap:7px;
}
.ft-contact li > span,
.ft-contact li > a{
flex:1 1 auto;
min-width:0;
/* anywhere שבר את המייל באמצע ("...ail.com" בשורה
נפרדת). break-word שובר רק בין מילים, ובמייל ארוך
מקטין את הגופן במקום לקטוע אותו. */
overflow-wrap:break-word;
line-height:1.4;
}
/* המייל ארוך מרוחב חצי-עמודה — גופן מעט קטן יותר שומר
אותו בשורה אחת בלי לשבור את הכתובת */
.ft-contact li a[href^="mailto"]{ font-size:12.5px; }
.ft-contact svg{ margin-top:3px; }
/* ===== שני כפתורי ה-CTA באותה שורה =====
חן ביקשה שהם לא יהיו אחד מתחת לשני. */
.ft-cta-row{
flex-direction:row;
flex-wrap:nowrap;
align-items:stretch;
justify-content:center;
gap:10px;
}
.ft-btn{
flex:1 1 0;
min-width:0;
width:auto;
justify-content:center;
padding-inline:12px;
font-size:14px;
white-space:nowrap;
}
.ft-btn svg{ flex:0 0 auto; width:15px; height:15px; }
/* "תרמו ארוחה חמה" מקבל את גרדיאנט ה-CTA של שאר האתר
במקום כתום אחיד — אותו טוקן, בלי גרדיאנט חדש. */
.ft-btn--orange{ background: var(--grad-accent); }
.ft-blob{ display:none; }
/* ===== פס האמון במובייל — קומפוזיציה אופקית קומפקטית =====
"תרמו בבטחון" בצד שמאל, ושני השותפים לצדו — במקום
שלושה בלוקים ענקיים אחד מתחת לשני. */
.footer-section .give-strip{
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:10px 12px;
padding:14px 16px;
text-align:right;
}
.footer-section .give-strip-title{
order:2; /* RTL: שמאל ויזואלית */
font-size:19px;
width:auto;
flex:0 0 auto;
white-space:nowrap;
}
.footer-section .give-trust{
order:1;
display:flex;
align-items:center;
gap:10px;
flex:1 1 auto;
min-width:0;
justify-content:flex-start;
}
.footer-section .give-tile{
width:40px; height:40px;
flex:0 0 40px;
}
.footer-section .give-trust-text h3{ font-size:13px; line-height:1.25; }
.footer-section .give-trust-text p{ font-size:11.5px; line-height:1.3; }
}
/* מתחת ל-360px שתי עמודות כבר דוחקות את הקישורים הארוכים */
@media (max-width: 359px){
.ft-cols{ grid-template-columns: 1fr; gap: var(--space-md); }
}
@media (prefers-reduced-motion: reduce){
.ft-btn, .ft-social a{ transition:none; }
}
/* ===================== פעילות מהשטח =====================
גלריית אקורדיון אופקית: רצועות צרות שנפתחות ב-hover/tap.
משתמשת ב-.site-container, בצבעי המותג ובשפה הדקורטיבית הקיימת. */
.field-section{
position:relative;
background: var(--cream);
min-height: var(--fg-min-h);
display:flex;
align-items:center;
padding-block: var(--fg-pad-y);
overflow:hidden;
isolation:isolate;
}
@supports (min-height: 100dvh){
.field-section{ min-height: var(--fg-min-h-dvh, var(--fg-min-h)); }
}
/* אזור רחב — טוקן הרוחב הרחב המשותף */
.field-section .site-container{
max-width: var(--container-wide);
padding-inline: 0;
}
.field-wrap{
position:relative;
z-index:2; /* מעל הקישוטים */
/* ltr על העוטף: הגלריה נכתבת ראשונה ולכן נוחתת משמאל,
והכותרת אחריה מימין — בדיוק כמו בעיצוב. */
direction:ltr;
display:flex;
align-items:center; /* הכותרת מיושרת למרכז האנכי של הגלריה */
gap: var(--fg-gap);
}
.field-wrap > *{ direction:rtl; } /* התוכן עצמו חוזר ל-RTL */
/* סדר ה-DOM קובע: הגלריה משמאל, הכותרת מימין.
overflow:hidden מונע מהרצועות לחרוג אל מעבר לעמודה. */
/* מסגרת לבנה סביב הגלריה, כמו בעיצוב.
בלי overflow:hidden — אף פריט לא נחתך. */
.field-gallery{
flex:0 0 var(--fg-gallery-w);
width: var(--fg-gallery-w);
min-width:0;
/* בלי מסגרת לבנה — הגלריה יושבת ישירות על רקע הסקשן */
position:relative;
z-index:2;
}
/* הכותרת שומרת לעצמה מקום קבוע ולא נדחקת החוצה */
.field-copy{ flex:0 0 auto; }
/* התגית מיושרת לימין יחד עם הכותרת; --fg-tag-x מזיז אותה */
/* ה-wrap הוא ltr, ולכן שוליים פיזיים ולא לוגיים:
auto משמאל דוחף את התגית לימין. */
.field-copy .section-tag{
margin-left:auto;
margin-right:0;
transform: translateX(calc(var(--fg-tag-x) * -1));
}
.field-title{ margin-top: var(--fg-tag-gap); }
/* חצי הניווט — אותה שפה כמו ב"המתנדבים שלנו" */
.field-nav-row{
direction:ltr; /* הכהה משמאל, העדין מימין */
display:flex;
justify-content:flex-end;
gap: var(--vl-arrow-gap);
margin-top: var(--fg-nav-top);
/* .field-copy הוא flex column עם align-items:flex-end, ובעברית
זה הקצה השמאלי — ולכן זוג החצים נדחק שמאלה. flex-start מחזיר
אותו לימין, מתחת לכותרת (14.9.2026). */
align-self:flex-start;
}
.field-nav-row .vl-nav:disabled{
opacity:.35;
cursor:default;
transform:none;
}
/* סימון סרטון — משולש הפעלה קטן בפינת עיגול האייקון */
.field-icon{ position:relative; }
.field-item.is-video .field-icon::after{
content:'';
position:absolute;
top:-2px;
inset-inline-end:-2px;
width:14px; height:14px;
border-radius:50%;
background: var(--orange) no-repeat center;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E");
background-size: 9px 9px;
box-shadow: 0 0 0 2px #fff;
}
/* הגלריה מתכווצת אם צריך, כך שהכותרת תמיד נכנסת */
.field-wrap{ justify-content:flex-start; }
.field-track{ max-width:100%; }
.field-track{ direction:ltr; } /* סדר הפריטים משמאל לימין, כמו בעיצוב */
.field-title{
margin:0;
font-size: var(--fg-title);
line-height: var(--fg-title-lh);
font-weight:800;
color: var(--ink);
text-align:right;
white-space:nowrap;
}
.field-title > span{ display:block; }
.field-title .is-accent{ color: var(--orange); }
/* ===== האקורדיון ===== */
.field-track{
display:flex;
gap: var(--fg-item-gap);
height: var(--fg-h);
width:100%;
list-style:none;
margin:0; padding:0;
}
/* ה-li נושא את הגמישות; הכפתור ממלא אותו */
/* width ולא flex-basis: ה-flex-basis לא חושב מחדש כשמשתנה CSS
מתעדכן אחרי שהאלמנטים כבר נוצרו ב-JS. */
/* 5 עמדות: 2 רצועות + פעיל + 2 רצועות.
היחסים ביחידות flex, כך שהגלריה מתמלאת בכל רוחב מסך. */
.field-track > li{
display:flex;
flex: var(--fg-strip-fr) 1 0;
min-width:0;
/* עקומה רכה מאוד, בלי "קפיצה" בסוף */
transition: flex-grow var(--fg-fade) cubic-bezier(.33,.02,.23,1);
}
.field-track > li.is-open{ flex-grow: var(--fg-open-fr); }
.field-item{
position:relative;
flex:1 1 auto;
width:100%;
height:100%;
border:0;
padding:0;
border-radius: var(--fg-r);
overflow:hidden;
cursor:pointer;
background: var(--cream);
font-family:inherit;
-webkit-tap-highlight-color: transparent;
}
.field-item:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }
.field-media{
position:absolute;
inset:0;
width:100%; height:100%;
}
.field-media img,
.field-media video,
.field-media iframe{
width:100%; height:100%;
object-fit:cover; /* object-position נקבע ב-JS לכל פריט */
display:block;
border:0;
}
/* הנגן מעל תמונת הפוסטר */
.field-media video,
.field-media iframe{
position:absolute;
inset:0;
z-index:2;
}
/* ה-iframe מוגדל מעבר לכרטיס, כך שהכותרת, הלוגו וכפתורי
השיתוף של יוטיוב נופלים מחוץ לאזור הנראה ונחתכים. */
.field-media iframe{
inset:0;
width:100%;
height:100%;
/* ההגדלה נעשית ב-transform ולא ב-width, כדי שהמידות
יישארו יחסיות לכרטיס וה-iframe ימלא אותו במלואו */
transform: scale(var(--fg-yt-zoom));
transform-origin:center;
pointer-events:none; /* אין קליקים אל תוך יוטיוב */
}
/* בזמן ניגון מסתירים את הפוסטר, אחרת הוא נשאר מעל ה-iframe */
.field-item.is-playing .field-media img{ opacity:0; }
/* גראדיאנט עדין בתחתית — שומר על קריאות הטקסט בלי מלבן כהה */
.field-item::after{
content:'';
position:absolute;
left:0; right:0; bottom:0;
height:45%;
z-index:3; /* מעל הנגן, כדי שהכיתוב יישאר קריא */
pointer-events:none;
background: linear-gradient(to top, rgba(30,14,8,.62), rgba(30,14,8,0));
}
/* שורת האייקון והטקסט בתחתית */
.field-foot{
position:absolute;
z-index:4; /* מעל הנגן והגראדיאנט */
left:0; right:0;
bottom: var(--fg-icon-bottom);
/* חוזרים ל-RTL: האייקון מימין והטקסט לצידו, מיושר לימין */
direction:rtl;
display:flex;
align-items:center;
gap:10px;
justify-content:center;
padding-inline:0;
gap:0;
pointer-events:none;
}
/* במצב סגור: האייקון ממורכז אבסולוטית ברצועה, והטקסט מוסתר
לחלוטין — כך שום דבר לא דוחף אותו הצידה. */
.field-item:not(.is-open) .field-text{ display:none; }
.field-item:not(.is-open) .field-icon{
position:absolute;
left:50%;
bottom: var(--fg-icon-lift); /* מעט גבוה יותר, עם שוליים מתחת */
transform: translateX(-50%);
background: rgba(255,255,255, var(--fg-icon-bg-op));
}
/* בפריט הפתוח — האייקון מימין והטקסט לצידו */
.field-item.is-open .field-foot{
justify-content:flex-start;
padding-inline: var(--fg-icon-bottom);
gap:10px;
}
/* עיגול האייקון — נשאר גלוי גם ברצועה סגורה */
.field-icon{
flex:0 0 auto;
width: var(--fg-icon);
height: var(--fg-icon);
border-radius:50%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
box-shadow: 0 4px 12px rgba(67,31,16,.18);
}
.field-icon img{
width: var(--fg-icon-img);
height: var(--fg-icon-img);
object-fit:contain;
display:block;
}
/* הטקסט — מופיע רק כשהפריט פתוח, ב-fade + הזזה עדינה */
.field-text{
min-width:0;
text-align:right;
opacity:0;
transform: translateX(-10px); /* נכנס מימין ב-RTL */
transition: opacity .55s ease .3s, transform .55s cubic-bezier(.33,.02,.23,1) .3s;
}
.field-item.is-open .field-text{ opacity:1; transform:none; }
.field-label{
display:block;
font-size: var(--fg-label);
font-weight:800;
color:#fff;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.field-desc{
display:block;
font-size: var(--fg-desc);
color: rgba(255,255,255,.88);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ===== קישוטים ===== */
/* הקישוטים מתחת לתוכן: רקע ← מקווקו ← ירקרק ← גלריה */
/* קישוטי הרקע של "פעילות מהשטח" — מוסתרים לבקשת חן (19.8.2026).
הקוד נשמר במלואו; להחזרה יש להעביר את --fg-deco ל-1 (סליידר בפאנל,
"קישוטי רקע: 0 מוסתר / 1 מוצג") — אין צורך לשחזר קוד. */
.field-deco{
position:absolute;
z-index:0;
pointer-events:none;
display: var(--fg-deco-display, none);
}
.field-arc{ z-index:0; }
.field-blob{ z-index:1; }
.field-peach{ z-index:0; }
.field-gallery{ position:relative; }
/* העיגול המקווקו הכחול — בצד שמאל, חלקו נכנס מתחת לגלריה.
z-index נמוך מהגלריה, ולכן הוא נעלם מאחוריה ולא נחתך בקצה. */
.field-arc{
top:50%;
left: var(--fg-arc-x);
width: var(--fg-arc);
height: var(--fg-arc);
margin-top: calc(var(--fg-arc) / -2 + var(--fg-arc-y));
overflow:visible;
}
.field-arc circle{
fill:none;
stroke: var(--st-c1);
stroke-width:2;
stroke-dasharray: 9 12;
opacity:.9;
vector-effect:non-scaling-stroke;
}
/* עיגול ירקרק מלא — בתוך העיגול המקווקו, גם הוא מאחורי הגלריה */
.field-blob{
top:50%;
left: var(--fg-blob-x);
width: var(--fg-blob);
height: var(--fg-blob);
margin-top: calc(var(--fg-blob) / -2 + var(--fg-blob-y));
border-radius:50%;
background: color-mix(in srgb, var(--st-c2) calc(var(--fg-blob-op) * 100%), transparent);
}
/* צורה אפרסקית רכה — פינה ימנית תחתונה, נחתכת בגבול */
.field-peach{
right: var(--fg-peach-x);
bottom: var(--fg-peach-y);
width: var(--fg-peach);
height: var(--fg-peach);
border-radius:50%;
background: color-mix(in srgb, var(--orange) calc(var(--fg-peach-op) * 14%), transparent);
}
/* ===== רספונסיביות ===== */
@media (max-width: 1200px){
/* לא נוגעים כאן ב---fg-open/--fg-strip: הצהרה ברמת הסקשן גוברת על
:root ומנטרלת את הסליידרים בפאנל. הצמצום נעשה ב---fg-gap בלבד. */
.field-section{ --fg-title: 56px; --fg-gap: 44px; }
}
@media (max-width: 980px){
.field-section{
--fg-title: 42px; --fg-h: 280px;
--fg-wrap: 92vw;
--fg-gallery-w: 100%; /* הגלריה במלוא הרוחב כשהכותרת מעליה */
}
/* הכותרת עוברת מעל הגלריה */
.field-wrap{ flex-direction:column; align-items:stretch; gap:32px; }
.field-copy{ order:1; }
.field-gallery{ order:2; flex:0 0 auto; }
.field-title{ text-align:center; white-space:normal; }
/* התגית חוזרת למרכז כשהכותרת ממורכזת */
.field-copy .section-tag{ margin-inline:auto; }
.field-arc, .field-blob{ display:none; }
/* הקונטיינר היה padding-inline:0 — הגלריה נגעה בקצוות המסך
ונראתה "גולשת". שוליים מחזירים לה אוויר משני הצדדים. */
.field-section .site-container{ padding-inline:16px; }
}
/* ===== טאבלט ומובייל — כרטיס פעיל + רצועת תמונות ממוזערות =====
האקורדיון האופקי לא שורד מתחת ל-1024px: 8 פריטים חולקים את
הרוחב, והסגורים יורדים ל-46px — רצועה שאי אפשר להבין ממנה
כלום, ובלי hover גם אי אפשר לפתוח אותה בנוחות.
במקום זה: הפריט הפתוח הופך לכרטיס גדול ברוחב מלא, ושאר
הפריטים יורדים לשורת ממוזערות מתחתיו שניתנת לגלילה בהחלקה.
נגיעה בממוזערת פותחת אותה — אותה לוגיקת is-open הקיימת,
בלי שינוי ב-JS. */
@media (max-width: 1024px){
/* שורת ממוזערות אחת שנגללת בהחלקה, במקום שתי שורות
צפופות. הכרטיס הפעיל נשאר מחוץ לגלילה, מעליה. */
.field-track{
display:flex;
flex-wrap:nowrap;
height:auto;
gap: var(--space-2xs);
align-items:flex-start;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width:none;
padding-bottom: var(--space-3xs);
/* הכרטיס הפעיל תופס שורה משלו מעל הרצועה */
padding-top: calc(clamp(240px, 42vw, 380px) + var(--space-sm));
position:relative;
}
.field-track::-webkit-scrollbar{ display:none; }
/* הכרטיס הפעיל — מוצא מזרימת הגלילה ומוצב מעליה, כך
שהוא נשאר יציב בזמן שהממוזערות נגללות מתחתיו */
.field-track > li.is-open{
position:absolute;
top:0; left:0; right:0;
width:100%;
height: clamp(240px, 42vw, 380px);
scroll-snap-align:none;
}
/* הממוזערות — גודל קבוע שמאפשר לזהות את התמונה.
flex-shrink:0 כדי שלא יתכווצו בשורה נגללת. */
.field-track > li{
flex: 0 0 clamp(104px, 26vw, 148px);
width:auto;
height: clamp(72px, 11vw, 104px);
scroll-snap-align:start;
transition: height var(--fg-fade) cubic-bezier(.22,.9,.3,1);
}
/* אין hover במסך מגע — האייקון מופיע רק על הכרטיס הפעיל,
אחרת הוא מכסה את הממוזערת כולה */
.field-item:not(.is-open) .field-icon{ opacity:0; }
.field-icon{ transition: opacity .3s ease; }
/* הכיתוב מוצג רק על הכרטיס הפעיל — על ממוזערת הוא בלתי קריא */
.field-item:not(.is-open) .field-text,
.field-item:not(.is-open) .field-desc{ opacity:0; }
}
/* ===================================================================
מובייל — אקורדיון אופקי, כמו בדסקטופ
===================================================================
חן שינתה את ההנחיה: לא "תמונה גדולה + ממוזערות מתחת" אלא
שימור הקונספט של הדסקטופ — כל הפריטים בשורה אחת אופקית,
אחד פתוח והשאר רצועות צרות לצדו.
ב-RTL הפריט הפתוח יושב בצד ימין של הרצף, ולכן direction
חוזר ל-rtl (בדסקטופ הוא ltr כדי לשמר את סדר העיצוב).
הרצועות צרות אך לא בלתי-שמישות: 30px ברוחב מלא, ומגע
על אחת מהן פותח אותה — אותה לוגיקת is-open, בלי שינוי JS. */
@media (max-width: 640px){
.field-section{ --fg-h: auto; --fg-icon: 26px; }
/* "פעילות מהשטח" — שתי מילים קצרות שנכנסות בשורה אחת
ברוחב טלפון. השורות היו כפויות ע"י display:block על
הספאנים; inline מאפשר להן להתאחד. */
.field-title > span{ display:inline; }
.field-title > span + span::before{ content:" "; }
.field-track{
/* חזרה לשורה אופקית אחת — ביטול הרצועה הנגללת */
display:flex;
flex-direction:row;
flex-wrap:nowrap;
direction:rtl; /* הפעיל בימין, כמבוקש */
height: clamp(230px, 58vw, 300px);
gap:6px;
padding-top:0;
padding-bottom:0;
overflow:hidden; /* אין גלילה — הכל נכנס */
scroll-snap-type:none;
position:relative;
}
/* הפריט הפתוח — רוב הרוחב */
.field-track > li.is-open{
position:static;
flex: 1 1 auto;
width:auto;
height:100%;
order:0;
transition: flex-grow var(--fg-fade) cubic-bezier(.22,.9,.3,1);
}
/* הרצועות הסגורות — צרות, בגובה מלא לצד הפתוח */
.field-track > li{
flex: 0 0 30px;
width:auto;
height:100%;
scroll-snap-align:none;
transition: flex-basis var(--fg-fade) cubic-bezier(.22,.9,.3,1);
}
/* התמונה ברצועה צרה — חיתוך ממורכז כדי שייראה ממנה משהו */
.field-track > li:not(.is-open) .field-media img,
.field-track > li:not(.is-open) .field-media video{
object-fit:cover;
object-position:center;
}
.field-foot{ padding-inline:12px; padding-bottom:12px; }
/* הכיתוב נחתך ב-nowrap+ellipsis ("ישר מהסי..."). בכרטיס
צר במובייל הוא נשבר לשתי שורות ומוצג במלואו. */
.field-label,
.field-desc{
white-space:normal;
overflow:visible;
text-overflow:clip;
line-height:1.25;
}
.field-label{ font-size:13.5px; }
.field-desc{ font-size:12px; }
/* האייקון קטן יותר כדי לא לגזול רוחב מהכיתוב */
.field-item.is-open .field-icon{ width:24px; height:24px; }
}
/* ===== חצי הניווט של הגלריה — מתחת לגלריה, עיגולים אמיתיים =====
חן ביקשה לתקן את העיוות ולשקול מיקום מתחת לגלריה. */
@media (max-width: 767px){
.field-nav-row,
.field-gallery .field-nav-wrap{
display:flex;
justify-content:center;
gap:8px;
margin-top: var(--space-sm);
}
/* הטוקן שמכתיב את קוטר החץ באזור הגלריה במובייל */
.field-section{ --fg-nav: 56px; }
.field-nav{
border-radius:50%;
padding:0;
}
.field-nav svg{
flex:0 0 auto;
inline-size:70%; block-size:70%;
max-width:70%; max-height:70%;
stroke-width:2.8;
}
}
@media (prefers-reduced-motion: reduce){
.field-item, .field-text{ transition:none; }
}
/* ===================== רוצים להיות חלק ממעגל הנתינה? =====================
טופס הצטרפות משמאל, כותרת וטקסט מימין, ותג 22+ עם תמונת מתנדב/ת. */
.join-section{
position:relative;
background: var(--jn-bg);
min-height: var(--jn-min-h);
display:flex;
align-items:center;
padding-block: var(--jn-pad-y);
overflow:hidden;
isolation:isolate;
}
@supports (min-height: 100dvh){
.join-section{ min-height: var(--jn-min-h-dvh, var(--jn-min-h)); }
}
.join-wrap{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between;
gap: var(--jn-gap);
width:100%;
}
/* ב-RTL הפריט הראשון יושב מימין; הטופס צריך לשבת משמאל */
.join-form-shell{ order:2; }
.join-copy{ order:1; }
/* האזור רחב משאר הדף כדי שהכותרת לא תישבר לשתי שורות */
.join-section .site-container{ max-width: var(--container-wide); }
/* השורה הראשונה נשארת בשורה אחת */
.join-title > span:first-child{ white-space:nowrap; }
/* עיגול מקווקו — שמאל תחתון */
.join-ring{
position:absolute;
z-index:0;
left: var(--jn-ring-x);
bottom: var(--jn-ring-y);
width: var(--jn-ring);
height: var(--jn-ring);
overflow:visible;
pointer-events:none;
}
.join-ring circle{
fill:none;
stroke: rgba(67,31,16, var(--jn-ring-op));
stroke-width:2;
stroke-dasharray: 9 12;
vector-effect:non-scaling-stroke;
}
/* ===== צד ימין — כותרת, טקסט ותג ===== */
.join-copy{
flex:1 1 auto;
text-align:right;
max-width: var(--jn-body-w);
}
.join-title{
margin:0;
font-size: var(--jn-title);
line-height: var(--jn-title-lh);
font-weight:800;
color: var(--ink);
}
.join-title > span{ display:block; }
.join-title .is-accent{ color: var(--orange); }
.join-body{
margin: var(--jn-body-gap) 0 0;
font-size: var(--jn-body);
line-height: var(--jn-body-lh);
color: var(--ink);
}
/* תג 22+ */
.join-badge{
display:inline-flex;
align-items:center;
gap: var(--jn-badge-gap);
margin-top: var(--jn-badge-top);
padding: var(--jn-badge-pad);
border-radius: var(--jn-badge-r);
background: var(--cream);
}
/* תמונת המתנדב/ת — עיגול עם חיתוך ממוקד פנים */
.join-avatar{
flex:0 0 auto;
width: var(--jn-avatar);
height: var(--jn-avatar);
border-radius:50%;
overflow:hidden;
background: var(--jn-bg);
}
.join-avatar img{
width:100%;
height:100%;
object-fit:cover;
/* נקודת המיקוד נקבעת ב-JS לכל תמונה, כדי שהפנים יהיו במרכז העיגול */
display:block;
transition: opacity .45s ease;
}
.join-badge-text{
display:flex;
align-items:center;
gap:8px;
}
.join-num{
font-size: var(--jn-num);
font-weight:800;
color: var(--ink);
line-height:1;
/* בלי זה ה-RTL הופך את "22+" ל-"+22" */
direction:ltr;
unicode-bidi:isolate;
}
.join-num-label{
font-size: var(--jn-num-label);
line-height:1.35;
color: var(--ink);
text-align:right;
}
.join-num-label span{ display:block; }
/* ===== צד שמאל — הטופס ===== */
.join-form-shell{
position:relative;
flex:0 0 auto;
width: var(--jn-form-w);
}
/* החץ המקווקו שמצביע אל הטופס */
.join-arrow{
position:absolute;
z-index:2;
top: var(--jn-arrow-y);
right: var(--jn-arrow-x);
width: var(--jn-arrow-w);
height:auto;
overflow:visible;
pointer-events:none;
}
.join-arrow path{
fill:none;
stroke: var(--orange);
stroke-width:2.2;
stroke-dasharray: 7 7;
stroke-linecap:round;
vector-effect:non-scaling-stroke;
}
.join-arrow polyline{
fill:none;
stroke: var(--orange);
stroke-width:2.2;
stroke-linecap:round;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}
.join-form{
background: var(--cream);
border-radius: var(--jn-form-r);
padding: var(--jn-form-pad);
box-shadow: 0 18px 44px rgba(67,31,16,.10);
}
.join-form-title{
margin:0 0 18px;
font-size: var(--jn-form-title);
font-weight:800;
color: var(--ink);
text-align:center;
}
.join-row{
display:flex;
gap: var(--jn-field-gap);
margin-bottom: var(--jn-field-gap);
}
.join-form input[type=text],
.join-form input[type=email],
.join-form input[type=tel],
.join-form select{
flex:1 1 0;
min-width:0;
height: var(--jn-field-h);
padding-inline: 18px;
border:1.4px solid color-mix(in srgb, var(--ink) 28%, transparent);
border-radius: var(--jn-field-r);
background: transparent;
font-family:inherit;
font-size: var(--jn-field-fs);
color: var(--ink);
text-align:right;
}
/* 65% ולא 55% — ב-55% הניגודיות מול הקרם יורדת מתחת ל-4.5:1. */
.join-form input::placeholder{ color: color-mix(in srgb, var(--ink) 65%, transparent); }
/* צביעת הגבול לבדה אינה סימון מיקוד מספק, ולכן נוסף קו מיקוד
אמיתי בחום המותג — נראה גם על הקרם וגם על הלבן. */
.join-form input:focus-visible,
.join-form select:focus-visible,
.join-form textarea:focus-visible{
outline:2px solid var(--ink);
outline-offset:2px;
border-color: var(--orange);
}
.join-form input:focus,
.join-form select:focus{
border-color: var(--orange);
}
/* חץ הבחירה מצויר ידנית כדי לשלוט במיקום ב-RTL */
.join-select-wrap{ position:relative; display:flex; flex:1 1 0; min-width:0; }
.join-form select{
width:100%;
appearance:none;
-webkit-appearance:none;
cursor:pointer;
}
.join-select-wrap::after{
content:'';
position:absolute;
left:20px; top:50%;
width:0; height:0;
margin-top:-2px;
border-inline:5px solid transparent;
border-top:6px solid var(--ink);
pointer-events:none;
}
.join-consent{
display:flex;
align-items:center;
gap:8px;
margin: 14px 0 16px;
font-size:13px;
color: var(--ink);
}
.join-consent input{
width:15px; height:15px;
accent-color: var(--orange);
flex:0 0 auto;
}
.join-consent a{ color: var(--ink); font-weight:700; }
.join-submit{
position:relative;
display:flex;
align-items:center;
justify-content:center;
/* row-reverse — הלב יושב משמאל לטקסט ב-RTL */
flex-direction:row-reverse;
gap:10px;
width:100%;
height: var(--jn-btn-h);
border:0;
border-radius: var(--jn-btn-r);
/* אותו גרדיאנט כמו כפתור ההירו */
background: linear-gradient(90deg, #FF5F35 0%, #FB8C2E 100%);
box-shadow: 0 10px 24px rgba(241,106,44,.32);
color:#fff;
font-family:inherit;
font-size: var(--jn-btn-fs);
font-weight:700;
cursor:pointer;
overflow:hidden;
isolation:isolate;
transition: transform .28s cubic-bezier(.22,.9,.3,1),
box-shadow .28s ease;
}
/* גל כהה שנשטף מימין לשמאל במעבר עכבר */
.join-submit::before{
content:'';
position:absolute;
inset:0;
z-index:-1;
background: var(--ink);
transform: scaleX(0);
transform-origin: right center;
transition: transform .42s cubic-bezier(.22,.9,.3,1);
}
.join-submit:hover{
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(67,31,16,.26);
}
.join-submit:hover::before{ transform: scaleX(1); }
.join-submit:active{ transform: translateY(0); }
.join-submit:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.join-submit svg{
width:20px; height:20px;
fill:none; stroke:#fff; stroke-width:2;
transition: transform .38s cubic-bezier(.22,.9,.3,1), fill .28s ease;
}
/* הלב מתמלא ופועם */
.join-submit:hover svg{ fill:#fff; animation: jn-beat .7s ease .06s 1; }
@keyframes jn-beat{
0%,100%{ transform: scale(1); }
28% { transform: scale(1.28); }
52% { transform: scale(1.06); }
72% { transform: scale(1.18); }
}
/* ===== רספונסיביות ===== */
@media (max-width: 1200px){
.join-section{ --jn-title: 56px; --jn-gap: 54px; --jn-form-w: 440px; }
}
@media (max-width: 980px){
.join-section{ --jn-title: 42px; --jn-min-h:0; --jn-pad-y: 64px; }
.join-wrap{ flex-direction:column; align-items:stretch; gap:40px; }
.join-copy{ max-width:none; text-align:center; }
.join-badge{ margin-inline:auto; }
.join-form-shell{ width:100%; }
.join-arrow{ display:none; }
/* ===== שדה אחד בשורה =====
הערימה החלה רק מתחת ל-560px, ולכן בטאבלט שלושת השדות
נדחסו לשורה אחת ברוחב 212px כל אחד — צר מכדי להקליד בו
בנוחות. שדה שלם בשורה מ-980px ומטה. */
.join-row{ flex-direction:column; }
/* flex:1 1 0 חולק *רוחב* בשורה אופקית; משהכיוון התהפך
לטור, אותו כלל התחיל לחלק *גובה* — והשדות התכווצו
ל-20px. flex:0 0 auto מחזיר להם את גובהם המלא. */
.join-form input[type=text],
.join-form input[type=email],
.join-form input[type=tel],
.join-form select{
flex:0 0 auto;
width:100%;
height: var(--jn-field-h);
min-block-size: var(--tap-min);
}
}
@media (max-width: 560px){
.join-section{ --jn-body: 16px; --jn-form-pad: 20px; }
.join-ring{ display:none; }
}
/* ===== הטופס במובייל — שני שדות בשורה =====
חן ביקשה שני שדות בשורה כשהרוחב מאפשר, במקום טופס ארוך
של שדה-בשורה. ב-390/430 שני שדות של ~46% קריאים בנוחות;
מתחת ל-360 הם צרים מדי וחוזרים לשדה שלם. */
@media (max-width: 767px){
.join-row{
flex-direction:row !important;
flex-wrap:wrap;
gap:10px;
}
.join-form input[type=text],
.join-form input[type=email],
.join-form input[type=tel]{
flex:1 1 calc(50% - 5px) !important;
width:auto !important;
min-width:0;
}
/* בורר סוג ההתנדבות רחב יותר — שורה שלמה */
.join-form select{
flex:1 1 100% !important;
width:100% !important;
}
/* שורת המדיניות — הטקסט מתכווץ והתיבה שומרת על גודלה.
בלי min-width:0 הטקסט דחף את התיבה ומעך אותה לאליפסה. */
/* שורת המדיניות בשורה אחת ב-390px ומעלה. נמדדה
בשתי שורות ב-12.5px, ולכן הגופן מעט קטן יותר
והמרווח צומצם. מתחת ל-360px היא נשברת בשליטה. */
.join-consent{
display:flex;
align-items:center;
gap:6px;
font-size:11.5px;
line-height:1.3;
white-space:nowrap;
}
.join-consent a{ white-space:nowrap; }
.join-consent > span,
.join-consent > label{ min-width:0; flex:1 1 auto; }
/* תיבת הסימון עגולה, לבקשת חן.
נמדדה 20×44 — אליפסה. הגובה הגיע מכלל אחר שמעלה
כל שדה בטופס ל-44px; max/min-block-size נועלים
אותה על ריבוע מדויק. */
.join-form input[type="checkbox"]{
appearance:none;
-webkit-appearance:none;
inline-size:20px !important;
block-size:20px !important;
min-inline-size:20px !important;
min-block-size:20px !important;
max-block-size:20px !important;
max-inline-size:20px !important;
height:20px !important;
width:20px !important;
aspect-ratio:1 / 1;
flex:0 0 20px;
align-self:center;
border-radius:50%;
border:1.6px solid color-mix(in srgb, var(--ink) 34%, transparent);
background:#fff;
display:inline-grid;
place-content:center;
cursor:pointer;
}
.join-form input[type="checkbox"]::after{
content:"";
inline-size:10px; block-size:10px;
border-radius:50%;
transform: scale(0);
transition: transform .15s ease;
background: var(--orange);
}
.join-form input[type="checkbox"]:checked::after{ transform: scale(1); }
/* בלי הטיות — הטקסט בכפתור היה נטוי () */
.join-submit em,
.join-submit,
.join-form input,
.join-form select,
.join-consent{ font-style:normal !important; transform:none !important; }
}
@media (max-width: 359px){
/* בטלפון צר שני שדות בשורה כבר לא קריאים */
.join-form input[type=text],
.join-form input[type=email],
.join-form input[type=tel]{ flex:1 1 100% !important; }
.join-consent{ white-space:normal; }
}
@media (prefers-reduced-motion: reduce){
.join-submit, .join-avatar img{ transition:none; }
}
/* ===================== המתנדבים שלנו =====================
מבוסס על אותה שפה כמו "הקולות מהשטח": .site-container לשוליים,
.section-tag לתגית, מניפת כרטיסים אבסולוטית, ואותם צבעי מותג. */
.volunteers-section{
position:relative;
background: var(--vl-bg);
/* min-height ולא height: האזור שואף למסך אחד, אבל אם התוכן
גדול יותר הוא גדל במקום להיחתך. height קבוע + overflow:hidden
הוא מה שחתך את הכותרת והכפתור. */
min-height: calc(100vh - var(--hd-h));
display:flex;
flex-direction:column;
justify-content:center;
padding-block: var(--vl-pad-top) var(--vl-pad-bottom);
overflow-x:clip; /* הקישוטים נחתכים לצדדים בלבד */
isolation:isolate;
}
@supports (min-height: 100dvh){
.volunteers-section{ min-height: calc(100dvh - var(--hd-h)); }
}
/* ===== מובייל וטאבלט: התוכן קובע את הגובה =====
כפיית מסך מלא כאן היא שאילצה את הכרטיס להתכווץ לגובה
שנשאר — ומשם הגיעה "מניפת מניאטורות" שאי אפשר להבין ממנה
דבר. משהאזור זורם לפי תוכנו, הכרטיס הפעיל מקבל את הרוחב
שהוא צריך (ראו רצפת --vl-k ב-JS). */
@media (max-width: 1024px){
.volunteers-section{
min-height:auto;
padding-block: var(--section-padding-y);
}
}
/* ===== מסכים נמוכים — כיווץ כדי שהכל ייכנס למסך אחד =====
התוכן המלא דורש ~926px. מתחת לזה מקטינים את הכרטיס ואת
המרווחים במקום לחתוך. --vl-k מכייל את כל מידות המניפה יחד. */
@media (max-height: 940px){
.volunteers-section{
--vl-title: 52px;
--vl-lead: 16px;
--vl-tag-gap: 12px;
--vl-lead-gap: 8px;
--vl-deck-gap: 14px;
--vl-cta-gap: 16px;
--vl-name-gap: 6px;
--vl-arrow-top: 6px;
}
}
@media (max-height: 840px){
.volunteers-section{
--vl-title: 44px;
--vl-lead: 15px;
--vl-tag-gap: 8px;
--vl-deck-gap: 10px;
--vl-cta-gap: 12px;
}
/* הפסקה הוסתרה כאן כדי לחסוך גובה — וזה בדיוק מה שגרם
לה להיעלם במכשיר אמיתי: גובה החלון בטלפון אחרי סרגלי
הדפדפן הוא ~750px, כלומר מתחת ל-840, בעוד שבתצוגה
המקדימה במחשב החלון גבוה יותר והיא כן הוצגה.
במקום להסתיר — מקצרים אותה: גופן וריווח קטנים יותר,
והשורה השנייה (אחרי ה-
) נשארת בזרימה. */
.volunteers-section .volunteers-lead{
display:block;
font-size: 14.5px;
line-height: 1.42;
margin-top: 6px;
}
}
/* קישוטים — פינה ימנית עליונה */
.vl-deco{
position:absolute;
z-index:0;
pointer-events:none;
}
/* צורה גדולה בגוון אפרסק-קרם, נחתכת בקצה */
.vl-peach{
top: var(--vl-peach-y);
right: var(--vl-peach-x);
width: var(--vl-peach);
height: var(--vl-peach);
border-radius:50%;
background: color-mix(in srgb, var(--orange) calc(var(--vl-peach-op) * 14%), transparent);
}
/* עיגול מקווקו אפור-בז' מתחתיה */
.vl-ring{
top: var(--vl-ring-y);
right: var(--vl-ring-x);
width: var(--vl-ring);
height: var(--vl-ring);
overflow:visible;
}
.vl-ring circle{
fill:none;
stroke: rgba(67,31,16, var(--vl-ring-op));
stroke-width:2;
stroke-dasharray: 9 12;
vector-effect:non-scaling-stroke;
}
/* הקו הכתום הגלי — עובר מאחורי הכרטיסים */
.vl-wave{
position:absolute;
z-index:0;
left:0;
width:100%;
height: var(--vl-wave-h);
top: var(--vl-wave-y);
pointer-events:none;
/* היה overflow:visible — הפס גלש מחוץ לאזור הכרטיסים.
hidden מצמיד אותו לתחום שלו, מתחת לסרטונים. */
overflow:hidden;
display: var(--vl-wave-display, block);
}
.vl-wave path{
fill:none;
stroke: var(--vl-wave-col);
stroke-width: var(--vl-wave-w);
stroke-dasharray: var(--vl-wave-dash) var(--vl-wave-gap);
stroke-linecap:round;
opacity: var(--vl-wave-op);
vector-effect:non-scaling-stroke;
}
.volunteers-wrap{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
}
.volunteers-title{
margin: var(--vl-tag-gap) 0 0;
font-size: var(--vl-title);
line-height: var(--vl-title-lh);
font-weight:800;
color: var(--ink);
text-align:center;
}
.volunteers-title > span{ display:block; }
.volunteers-title .is-accent{ color: var(--orange); }
.volunteers-lead{
max-width: var(--vl-lead-w);
margin: var(--vl-lead-gap) auto 0;
font-size: var(--vl-lead);
line-height: var(--vl-lead-lh);
color: var(--ink);
text-align:center;
}
.volunteers-lead b{ font-weight:800; }
/* ===== המניפה ===== */
.volunteers-deck{
position:relative;
width:100%;
height: calc(var(--vl-card-h) + var(--vl-deck-extra));
margin-top: var(--vl-deck-gap);
}
.volunteers-track{
position:absolute;
inset:0;
list-style:none;
margin:0; padding:0;
}
/* כל כרטיס אבסולוטי במרכז; ה-transform קובע את מקומו במניפה,
ולכן הם חופפים זה את זה ולא יושבים בשורה עם gap. */
.vl-card{
position:absolute;
top:50%;
left:50%;
width: var(--vl-card-w);
height: var(--vl-card-h);
margin: calc(var(--vl-card-h) / -2) 0 0 calc(var(--vl-card-w) / -2);
border:0;
padding:0;
background: var(--cream); /* אטום — מסתיר את הכרטיסים שמאחור */
border-radius: var(--vl-card-r);
overflow:hidden;
cursor:pointer;
font-family:'Afek','Assistant',-apple-system,'Segoe UI',Arial,sans-serif;
box-shadow: 0 14px 30px rgba(67,31,16,.14);
transition: transform var(--vl-fade) cubic-bezier(.22,.9,.3,1),
box-shadow var(--vl-fade) ease;
-webkit-tap-highlight-color: transparent;
}
/* הכרטיס הפעיל — מסגרת חומה כמו בפיגמה */
.vl-card.is-active{
box-shadow: 0 0 0 var(--vl-border) var(--ink),
0 26px 52px rgba(67,31,16,.28);
z-index:10;
}
.vl-card:not(.is-active):hover .vl-veil{ opacity: calc(var(--vl-veil) * .45); }
.vl-card:focus-visible{ outline:3px solid var(--orange); outline-offset:4px; }
/* רקע אטום כדי שכרטיס לא ייראה דרך הכרטיס שמעליו */
.vl-media{
position:absolute;
inset:0;
width:100%; height:100%;
border-radius:inherit;
overflow:hidden;
background: var(--cream);
}
.vl-media img,
.vl-media video{
width:100%; height:100%;
object-fit:cover; /* object-position נקבע ב-JS לכל תמונה */
display:block;
}
/* נגן YouTube — נטען רק בלחיצה, ומכסה את הכרטיס */
.vl-video{
position:absolute;
inset:0;
width:100%; height:100%;
border:0;
z-index:4; /* מעל התמונה, ההבהרה וה-Play */
border-radius:inherit;
}
/* שכבת ההבהרה — רק על הלא-פעילים, כך שה-active הוא המוקד */
.vl-veil{
position:absolute;
inset:0;
background:#fff; /* כמו בקולות מהשטח */
opacity:0;
pointer-events:none;
transition: opacity var(--vl-fade) ease;
}
/* כפתור ההפעלה — עיגול outline לבן, רקע שקוף */
.vl-play{
position:absolute;
top:50%; left:50%;
width: var(--vl-play);
height: var(--vl-play);
margin: calc(var(--vl-play) / -2) 0 0 calc(var(--vl-play) / -2);
border:2px solid #fff;
border-radius:50%;
background:transparent;
display:flex;
align-items:center;
justify-content:center;
z-index:3;
pointer-events:none;
transition: opacity var(--vl-fade) ease;
}
.vl-play svg{
width:40%; height:40%;
color:#fff; /* המשולש חלול — הקו יורש מ-currentColor */
margin-inline-start:6%; /* מאזן אופטית את המשולש בתוך העיגול */
}
/* ===== שם ותפקיד מתחת למניפה ===== */
.volunteers-meta{
margin-top: var(--vl-name-gap);
text-align:center;
}
.volunteers-name{
margin:0;
font-size: var(--vl-name);
font-weight:800;
color: var(--ink);
}
.volunteers-role{
margin:4px 0 0;
font-size: var(--vl-role);
font-weight:400;
color: var(--ink);
}
/* ===== חצים ===== */
.volunteers-nav-row{
display:flex;
/* ltr כדי שסדר החצים יישאר כמו בעיצוב: הכהה משמאל, העדין מימין */
direction:ltr;
justify-content:center;
gap: var(--vl-arrow-gap);
margin-top: var(--vl-arrow-top);
}
.vl-nav{
width: var(--vl-arrow);
height: var(--vl-arrow);
border-radius:50%;
background:transparent;
border:1.6px solid rgba(67,31,16,.30);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
padding:0;
transition: border-color .25s ease, transform .25s ease;
}
.vl-nav svg{
width:40%; height:40%;
stroke: rgba(67,31,16,.42);
fill:none;
stroke-width:2.2;
transition: stroke .25s ease;
}
/* החץ ה"פעיל" — כהה יותר, כמו בעיצוב */
.vl-nav.is-strong{ border-color: var(--ink); }
.vl-nav.is-strong svg{ stroke: var(--ink); }
.vl-nav:hover{ transform: scale(1.07); border-color: var(--ink); }
.vl-nav:hover svg{ stroke: var(--ink); }
.vl-nav:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
/* ===== רספונסיביות ===== */
@media (max-width: 1200px){
.volunteers-section{ --vl-title: 56px; --vl-lead: 17px; }
}
@media (max-width: 900px){
.volunteers-section{
--vl-title: 38px; --vl-lead: 16px; --vl-play: 74px;
/* הקישוטים נשארים בפינה ולא נכנסים לתוכן */
--vl-peach: 400px; --vl-peach-x: -140px; --vl-peach-y: -200px;
--vl-ring: 140px; --vl-ring-x: 40px; --vl-ring-y: 70px;
}
.vl-peach{ opacity:.6; }
.vl-ring{ opacity:.7; }
}
@media (max-width: 560px){
.volunteers-section{
--vl-title: 29px;
--vl-lead: 15px;
--vl-arrow: 38px;
--vl-deck-gap: 22px;
--vl-play: 56px;
/* המרכזי נשאר דומיננטי; מהצדדיים רק רמז */
--vl-step: calc(96px * var(--vl-k));
--vl-name: 18px;
--vl-role: 15px;
}
.volunteers-lead{ padding-inline: 6px; }
/* השבירה הכפויה מיותרת במסך צר */
.volunteers-lead br{ display:none; }
.vl-ring{ display:none; }
.vl-peach{ opacity:.45; }
}
@media (prefers-reduced-motion: reduce){
.vl-card, .vl-veil, .vl-nav, .vl-play{ transition:none; }
}
/* ===================== יש לכם לב לתת? =====================
משתמש ברכיבים הקיימים: .site-container לשוליים, --cream לרקע,
--ink ו---orange לצבעים, ו---st-c1 לתכלת הדקורטיבי. */
.give-section{
position:relative;
background:transparent; /* הרקע והחיתוך יושבים על העוטף */
padding-block: var(--gv-pad-top) var(--gv-pad-bottom);
}
/* אזור רחב — משתמש בטוקן הרוחב הרחב המשותף */
.give-section .site-container{
max-width: var(--container-wide);
padding-inline: var(--gv-pad-x);
}
/* ===== פס האמון העליון ===== */
.give-strip{
display:grid;
/* פריסה גמישה: שלושת הבלוקים לפי רוחב תוכנם, והמרווח ביניהם
נקבע ע"י --gv-strip-gap בלבד. הרווח הפנוי מתחלק שווה בשוליים,
כך שהסליידר באמת משפיע על המרחק בין הבלוקים. */
display:flex; /* RTL: הפריט הראשון יושב מימין */
align-items:center;
justify-content:space-evenly;
flex-wrap:wrap;
width:100%;
box-sizing:border-box;
gap: var(--gv-strip-gap);
padding: var(--gv-strip-pad) calc(var(--gv-strip-pad) * 1.3);
background: var(--gv-strip-bg);
border-radius: var(--gv-strip-r);
}
/* "תרום / בבטחון" */
.give-strip-title{
margin:0;
font-size: var(--gv-strip-title);
line-height:1.2;
font-weight:800;
color: var(--ink);
text-align:right;
white-space:nowrap;
}
.give-strip-title > span{ display:block; }
/* הקשר ערימה מקומי — בלעדיו z-index:-1 של ההדגשה נופל מאחורי הרקע */
.give-strip-title{ isolation:isolate; }
/* המילה "בבטחון" על הדגשה כתומה — אותו רכיב כמו בשאר הדף */
.give-strip-title .title-highlight{
position:relative;
display:inline-block;
width:auto;
margin-inline-start:0;
padding-inline:.12em;
color:#fff; /* "בבטחון" בלבן על ההדגשה הכתומה */
}
.give-strip-title .gv-mark{
position:absolute;
z-index:-1;
right:0;
top:50%;
width:104%;
height:1.05em;
transform: translateY(-50%);
background: linear-gradient(270deg,
rgba(241,106,44,0) 0%,
#F16A2C 46%,
#F16A2C 100%);
pointer-events:none;
}
/* בלוק אמון — טקסט מימין ולוגו משמאלו */
.give-trust{
display:flex;
align-items:center;
gap:18px;
justify-content:flex-start;
}
.give-trust-text{ text-align:right; }
.give-trust-text h3{
margin:0 0 4px;
font-size: var(--gv-strip-h1);
line-height:1.25;
font-weight:800;
color: var(--ink);
}
.give-trust-text p{
margin:0;
font-size: var(--gv-strip-p);
line-height:1.45;
color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.give-tile{
flex:0 0 auto;
width: var(--gv-tile);
height: var(--gv-tile);
border-radius: var(--gv-tile-r);
background:#fff;
display:flex;
align-items:center;
justify-content:center;
padding:10px;
}
.give-tile img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
/* ===== אזור המעורבות ===== */
.give-flow{
display:grid;
/* עמודה 1 (ימנית ב-RTL) = הכותרת, לפי תוכנה.
עמודה 2 (שמאלית) = המסלול, תופס את השאר. */
grid-template-columns: auto minmax(0,1fr);
align-items:center;
gap: 40px;
margin-top: var(--gv-flow-gap);
}
/* הכותרת בצד ימין */
.give-title{
/* RTL: עמודה 1 בגריד היא הימנית ויזואלית */
grid-column:1;
margin:0;
font-size: var(--gv-title);
line-height: var(--gv-title-lh);
font-weight:800;
color: var(--ink);
text-align:right;
white-space:nowrap;
}
.give-title > span{ display:block; }
/* היה --gv-blue: ההדגשה היחידה בדף שאינה כתומה, ושברה את מערכת
צבע ההדגשה. כעת אחידה עם שאר עשר ההדגשות. */
.give-title .is-blue{ color: var(--orange); }
/* המסלול והתחנות */
.give-track{
grid-column:2; /* משמאל לכותרת */
position:relative;
height: var(--gv-flow-h);
}
.give-path{
position:absolute;
inset:0;
width:100%; height:100%;
overflow:visible;
pointer-events:none;
}
/* המסלול מצטייר בכניסה לאזור — ותמיד נשאר מקווקו.
שכבה 1: הקו המקווקו עצמו.
שכבה 2: מסכה שנפתחת לאורך המסלול וחושפת אותו בהדרגה. */
.give-path path{
fill:none;
stroke: var(--gv-blue);
stroke-width: var(--gv-path-w);
stroke-linecap:round;
stroke-dasharray: var(--gv-path-dash) var(--gv-path-gap);
opacity: var(--gv-path-op);
vector-effect:non-scaling-stroke;
}
/* הקו נחשף דרך mask — הקווקווים נשמרים לכל אורך האנימציה */
.give-path .gv-line{ mask: url(#gvMask); }
/* קו המסכה: לבן = גלוי. נמתח מ-0 עד לאורך המלא.
שתי נקודות שנמדדו בדפדפן ולא נראות מהקוד:
1. הסלקטור חייב להיות path.gv-mask-line ולא .gv-mask-line בלבד.
הכלל .give-path path שמעליי חל גם על הנתיב שבתוך ה-,
והספציפיות שלו (0,1,1) גברה על מחלקה בודדת (0,1,0) — כך
שקו המסכה קיבל דפוס 7/15 ועובי 3px במקום הערכים שלו.
2. החשיפה מונעת ב-stroke-dasharray ולא ב-stroke-dashoffset.
על נתיב שיושב בתוך , שינוי stroke-dashoffset פשוט
לא משפיע כאן (נבדק ביחידות px, בלי יחידות, וכתכונת
presentation) — בעוד stroke-dasharray עובד כרגיל. לכן
"האורך שנחשף" הוא הקו הראשון בדפוס, והשאר רווח.
בגלל שתי אלה החשיפה מעולם לא פעלה בפועל, גם לפני מעבר לגלילה. */
.give-path path.gv-mask-line{
fill:none;
stroke:#fff; /* מסכת luminance — לבן = גלוי */
stroke-width: 40; /* עבה — מכסה את הקו לגמרי */
stroke-linecap:round;
stroke-dasharray: none; /* ברירת מחדל בטוחה: המסלול גלוי */
opacity: 1; /* לא לרשת את ה-.85 של הקו הנראה */
}
/* בלי סקראב — הקו נמשך פעם אחת בכניסה לאזור, על טיימר */
.give-section.is-drawn .give-path path.gv-mask-line{
animation: gv-reveal var(--gv-draw-time) cubic-bezier(.35,.05,.25,1) both;
}
@keyframes gv-reveal{
from{ stroke-dasharray: 0 var(--gv-len); }
to { stroke-dasharray: var(--gv-len) var(--gv-len); }
}
/* כשהחשיפה קשורה לגלילה, ה-JS כותב stroke-dasharray ישירות
ולכן מכבים את אנימציית הטיימר — אחרת היא הייתה גוברת עליו
(הצהרות אנימציה מנצחות סגנון inline רגיל בקסקייד).
אותה ספציפיות ככלל שמעליי, ולכן הסדר הוא שמכריע. */
.give-section.is-scrub .give-path path.gv-mask-line{ animation:none; }
/* הקו המקווקו נשאר גלוי — הוא רק נחשף בהדרגה */
.give-path .gv-draw{ display:none; }
/* התחנות מופיעות אחת אחרי השנייה, בעקבות הקו */
.give-stop{
opacity:0;
transform: translate(-50%, -50%) scale(.86);
}
.give-section.is-drawn .give-stop{
animation: gv-pop .55s cubic-bezier(.34,1.4,.5,1) forwards;
animation-delay: var(--gv-delay, 0s);
}
@keyframes gv-pop{
from{ opacity:0; transform: translate(-50%,-50%) scale(.86); }
to { opacity:1; transform: translate(-50%,-50%) scale(1); }
}
/* תחנה — כל אחת ממוקמת אחוזית לפי הקימור */
.give-stop{
position:absolute;
transform: translate(-50%, -50%);
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
text-align:center;
text-decoration:none;
background:none;
border:0;
padding:0;
font:inherit;
cursor:pointer;
width:max-content;
}
/* ===== האייקון — עיגול גרדיאנט כתום =====
הרקע הוא הגרדיאנט הגלובלי; קובץ ה-PNG משמש כמסכה, כך
שהצורה שבתוכו נצבעת בגרדיאנט במקום בכתום שטוח. */
.give-stop-icon{
position:relative;
width: var(--gv-icon);
height: var(--gv-icon);
border-radius:50%;
display:block;
overflow:hidden;
background: var(--grad-accent);
filter: drop-shadow(0 5px 10px rgba(67,31,16,.12));
transition: transform .34s cubic-bezier(.22,.9,.3,1),
filter .34s ease,
box-shadow .34s ease;
}
/* אנימציית מנוחה — "נשימה" עדינה שרצה תמיד, כדי לרמוז שאפשר ללחוץ.
הפאזה מפוזרת לפי --gv-i, כך שהעיגולים לא זזים בבת אחת. */
.give-section.is-drawn .give-stop-icon{
animation: gv-breathe 3.4s ease-in-out infinite;
animation-delay: calc(var(--gv-i, 0) * .45s);
}
@keyframes gv-breathe{
0%, 100%{ transform: translateY(0) scale(1); }
50% { transform: translateY(-5px) scale(1.035); }
}
.give-stop-icon img{
position:relative;
z-index:2;
width:100%;
height:100%;
object-fit:contain; /* בלי מתיחה ובלי חיתוך */
display:block;
transition: transform .34s cubic-bezier(.22,.9,.3,1);
}
/* ===== מצב הריחוף — כל התחנה הופכת לעיגול אחד =====
העיגול נפתח מאחורי כל התחנה (אייקון + טקסט + חץ יחד), עם
תמונה, שכבת צבע וטבעת מקווקוות סביבו. האייקון מתכווץ,
הטקסט הופך לכפתור, והחץ נעלם. */
.give-stop-disc{
position:absolute;
/* ממורכז על האייקון: ראש התחנה + חצי גובה האייקון. כך העיגול
גדל סימטרית סביבו, והאייקון והכפתור נשארים בתוכו. */
top: calc(var(--gv-icon) / 2);
left:50%;
margin: calc(var(--gv-disc) / -2) 0 0 calc(var(--gv-disc) / -2);
width: var(--gv-disc);
height: var(--gv-disc);
border-radius:50%;
overflow:hidden;
box-shadow: 0 18px 40px rgba(67,31,16,.22);
opacity:0;
transform: scale(.72);
transition: opacity .34s ease, transform .46s cubic-bezier(.34,1.24,.5,1);
pointer-events:none;
z-index:0; /* מאחורי תוכן התחנה */
}
.give-stop-disc-img{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
}
/* כיסוי עדין יותר — חום עמוק עם רמז כתום בקצה העליון בלבד,
כדי שהתמונה תישאר נראית ולא "תיצבע" לגמרי */
.give-stop-disc-veil{
position:absolute;
inset:0;
background:
radial-gradient(circle at 50% 22%,
rgba(241,106,44,.42) 0%,
rgba(241,106,44,0) 58%),
linear-gradient(180deg,
rgba(67,31,16,.52) 0%,
rgba(67,31,16,.80) 100%);
}
/* טבעת מקווקוות עדינה — לבן מרוסן, לא צועק */
.give-stop-disc::after{
content:'';
position:absolute;
inset: var(--gv-ring-gap);
border-radius:50%;
border: var(--gv-ring-w) dashed rgba(255,255,255,.55);
pointer-events:none;
}
.give-stop:hover .give-stop-disc,
.give-stop:focus-visible .give-stop-disc{ opacity:1; transform:scale(1); }
/* בריחוף האייקון נעלם לגמרי. קודם הוא התכווץ ונשאר בתוך
העיגול, וזה נראה כמו עיגול בתוך עיגול — לא נקי.
כעת רק התמונה והכפתור נשארים. */
.give-stop:hover .give-stop-icon,
.give-stop:focus-visible .give-stop-icon{
opacity:0;
visibility:hidden;
background:none;
animation-play-state:paused;
transform: scale(.5);
}
.give-stop-icon{
position:relative;
z-index:2; /* מעל העיגול */
transition: opacity .28s ease, transform .32s ease, visibility .28s;
}
/* הטקסט הופך לכפתור לבן, ויושב מתחת לאייקון בתוך העיגול.
ההזזה מחושבת מהמרווח שנוצר כשהאייקון התכווץ, כדי שהכפתור
ייכנס לעיגול בלי לכסות את האייקון. */
.give-stop:hover .give-stop-label,
.give-stop:focus-visible .give-stop-label{
background:#fff;
color: var(--ink);
border-radius:999px;
padding: 9px 16px;
font-weight:700;
font-size: var(--gv-cta-fs);
letter-spacing:-.01em;
box-shadow: 0 4px 14px rgba(67,31,16,.20);
/* האייקון נעלם, ולכן הכפתור ממורכז בעיגול.
הוא יושב בזרימה מתחת לאייקון (שנעלם אך שומר מקום
בפריסה), ולכן נמדד 67px מתחת למרכז העיגול. ההזזה
מחזירה אותו בדיוק למרכז. */
transform: translateY(-67px);
/* אייקון קטן משמאל לטקסט, בלי עיגול לבן סביבו */
display:inline-flex;
align-items:center;
justify-content:center;
flex-direction:row; /* ב-RTL זה מציב את החץ משמאל */
gap:7px;
}
/* האייקון בתוך הכפתור — נוצר ב-CSS, קו נקי בלי רקע */
.give-stop:hover .give-stop-cta::after,
.give-stop:focus-visible .give-stop-cta::after{
content:"";
display:inline-block;
inline-size:15px;
block-size:15px;
flex:0 0 15px;
background: var(--orange);
/* חץ אלכסוני קטן — אותה שפה של החצים בכפתורי ה-CTA */
-webkit-mask: url("data:image/svg+xml;utf8,\
") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,\
") no-repeat center / contain;
}
.give-stop-label{
position:relative;
z-index:2; /* מעל העיגול */
transition: background .3s ease, color .3s ease, padding .3s ease,
box-shadow .3s ease, font-size .3s ease,
transform .42s cubic-bezier(.34,1.24,.5,1);
}
/* (החלפת הטקסט ב-CTA מוגדרת בהמשך, אחרי כללי .give-stop-label,
כדי שלא תידרס על ידם) */
/* החץ התכלת נשאר ונצמד לכפתור — ראה את כלל .give-stop-dot בהמשך.
(הכלל הישן שהגדיל את האייקון ב-scale(1.08) הוסר: הוא דרס את
ההתכווצות והאייקון נשאר גדול בריחוף.) */
.give-stop:focus-visible{ outline:3px solid var(--orange); outline-offset:6px; border-radius:14px; }
@media (prefers-reduced-motion: reduce){
.give-section.is-drawn .give-stop-icon{ animation:none; }
.give-stop-icon, .give-stop-icon img,
.give-stop-disc, .give-stop-label, .give-stop-dot{ transition:none; }
}
.give-stop-label{
font-size: var(--gv-label);
line-height:1.35;
font-weight:600; /* משקל מתון — לא בולד כבד */
color: var(--ink);
white-space:nowrap;
}
/* רק שורות הטקסט הרגילות — לא ה-CTA, שמוסתר עד הריחוף */
.give-stop-lines span{ display:block; }
/* ה-CTA מוסתר כברירת מחדל. הכלל כאן, אחרי כל שאר כללי
ה-label, כדי שלא ידרס על ידם. */
.give-stop .give-stop-cta{ display:none; }
/* inline-flex ולא block — כדי שהאייקון (::after) יישב
לצד הטקסט באותה שורה */
.give-stop:hover .give-stop-cta,
.give-stop:focus-visible .give-stop-cta{
display:inline-flex;
align-items:center;
justify-content:center;
/* row ולא row-reverse: הכיוון כאן הוא RTL, ולכן הפריט
הראשון (הטקסט) יושב מימין וה-::after נופל משמאלו —
בדיוק המיקום שחן ביקשה. row-reverse הפך את היוצרות
והחץ קפץ לימין. */
flex-direction:row;
gap:7px;
white-space:nowrap;
}
.give-stop:hover .give-stop-lines,
.give-stop:focus-visible .give-stop-lines{ display:none; }
/* האינדיקטור הכחול הקטן */
.give-stop-dot{
width: var(--gv-dot);
height: var(--gv-dot);
border-radius:50%;
background: color-mix(in srgb, var(--gv-blue) 62%, transparent);
display:flex;
align-items:center;
justify-content:center;
transition: background-color .3s ease, transform .3s ease;
}
/* החץ הלבן — גדול וברור בתוך העיגול העדין */
.give-stop-dot svg{
width:70%; height:70%;
stroke:#fff; fill:none;
stroke-width:2.6;
stroke-linecap:round; stroke-linejoin:round;
}
/* (הכלל הישן "ריחוף עדין" הוסר: הוא הופיע אחרי כלל ההתכווצות
ודרס אותו ב-translateY(-5px) בלבד, ולכן האייקון נשאר בגודל
מלא בריחוף. מצב הריחוף מוגדר במלואו למעלה.) */
/* בריחוף החץ עולה יחד עם הכפתור ונצמד לצדו.
אותה הזזה אנכית של .give-stop-label, פחות המרווח ביניהם. */
/* בריחוף העיגול התכלת נעלם לגמרי — חן ביקשה שלא יישאר
ממנו כלום. קודם הוא נותר מתחת לכפתור ונראה כהתחלה של
עיגול נוסף. */
.give-stop:hover .give-stop-dot,
.give-stop:focus-visible .give-stop-dot{
opacity:0;
visibility:hidden;
transform: scale(.6);
}
.give-stop:focus-visible{ outline:2px solid var(--orange); outline-offset:6px; border-radius:12px; }
/* ===== טאבלט ===== */
@media (max-width: 1200px){
.give-section{
--gv-title: 56px; --gv-icon: 64px; --gv-label: 17px; --gv-flow-h: 300px;
--gv-disc: 180px; --gv-cta-fs: 12px; /* העיגול מתכווץ יחד עם האייקון */
}
}
@media (max-width: 1024px){
.give-section{ --gv-strip-title: 28px; --gv-strip-h1: 17px; --gv-strip-p: 14px; --gv-tile: 66px; }
.give-strip{ gap:30px; justify-content:center; }
.give-strip-title{ flex-basis:100%; text-align:center; }
.give-strip-title .title-highlight{ margin-inline:auto; }
/* --gv-flow-gap מפריד את המסלול מפס האמון שמעליו. הפס
מוסתר (hidden), ולכן המרווח נשאר יתום ויצר 80px של
שטח ריק בראש האזור — גם בטאבלט, לא רק במובייל. */
.give-flow{ margin-top:0; }
/* ===== התחנות בטאבלט — 2×2 =====
המסלול האופקי לא מעשי כאן, והתחנות היו נערמות בטור אחד
(1×1×1×1×1) — טור ארוך שמבזבז את כל רוחב הטאבלט.
גריד 2×2, בדיוק כמו כרטיסי התרומה ואזור המספרים. */
.give-flow{
display:grid;
grid-template-columns: 1fr;
gap: var(--gap-desc-content);
}
.give-title{ grid-column:1; grid-row:1; text-align:center; white-space:normal; }
.give-track{
grid-column:1;
grid-row:2;
height:auto;
display:grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg) var(--space-md);
justify-items:center;
}
/* המסלול המקווקו מצויר לפי מיקומים אבסולוטיים של הפריסה
האופקית — בגריד הוא מצייר קווים לשום מקום */
.give-path{ display:none; }
.give-stop{ position:static; transform:none; }
/* 22.9.2026 · תיקון תחום הטאבלט.
transform:none שלמעלה לא הספיק: אנימציית הכניסה gv-pop מסתיימת
ב-translate(-50%,-50%) עם forwards, ואנימציה גוברת על הצהרה רגילה.
ההזזה הזו נועדה למרכז כל תחנה על נקודה במסלול האבסולוטי; בגריד היא
רק הזיזה כל תחנה חצי גובה למעלה — ולכן התחנות נחתו על הכותרת בכל
רוחב שבין 768 ל-1024.
gv-pop-flat הוא אותו פופ בדיוק בלי ההזזה, כך שאנימציית הכניסה
נשמרת. מתחת ל-768 לא נוגעים: שם כבר יש טיפול משלו. */
@media (min-width: 768px){
@keyframes gv-pop-flat{
from{ opacity:0; transform:scale(.86); }
to { opacity:1; transform:none; }
}
.give-section.is-drawn .give-stop{ animation-name: gv-pop-flat; }
}
}
/* ===== מובייל ===== */
@media (max-width: 767px){
.give-section{
/* --gv-title / --gv-icon / --gv-label / --gv-disc הוסרו מכאן:
הם נשלטים כעת מטוקני המובייל בפאנל (--m-title, --m-gv-icon,
--m-label, --m-gv-disc) ושכפולם כאן דרס את הסליידרים. */
/* היה 11px — מתחת לרצפת הקריאוּת של המערכת */
--gv-cta-fs: var(--font-small); --gv-ring-gap: 7px;
}
.give-strip{ flex-direction:column; gap:22px; text-align:center; }
.give-trust{ justify-content:center; }
/* --gv-flow-gap נועד להפריד את המסלול מפס האמון שמעליו.
הפס מוסתר (hidden), ולכן המרווח נשאר יתום ויצר כאן 80px
של שטח ריק בראש האזור. הריווח מגיע מהמערכת במקום. */
.give-flow{
grid-template-columns: 1fr;
gap: var(--gap-desc-content);
margin-top:0;
}
/* במובייל הכותרת למעלה והמסלול מתחתיה */
.give-title{ grid-column:1; grid-row:1; text-align:center; white-space:normal; }
/* התחנות בגריד 2×2, והמסלול המקווקו חוזר כדקורציה
מאחוריהן — עקומת S אנכית שיורדת ימין→שמאל→ימין. */
/* ===== מסלול מדורג — כל תחנה נמוכה מקודמתה =====
גריד 2×2 סימטרי הציב שתי תחנות באותו Y בדיוק, והקו
נאלץ לחתוך אופקית דרך הטקסטים. כאן כל תחנה תופסת
שורה משלה וצדדים מתחלפים, כך שהמסלול יורד באלכסון
דרך השטח הריק שביניהן.
הסדר: 1 ימין · 2 שמאל · 3 ימין · 4 שמאל. */
.give-track{
grid-column:1;
grid-row:2;
height:auto;
display:grid;
grid-template-columns: repeat(2, 1fr);
/* ארבע שורות — תחנה אחת בכל שורה.
המרווח צומצם לבקשת חן: ארבע שורות נפרדות האריכו את
האזור מ-515 ל-895px, וזה מקצר אותו בחזרה. */
grid-auto-rows:auto;
row-gap: 0;
column-gap: 0;
justify-items:center;
position:relative;
isolation:isolate;
}
/* RTL: עמודה 1 היא הימנית ויזואלית */
.give-track > *:nth-child(1){ grid-column:1; grid-row:1; }
.give-track > *:nth-child(2){ grid-column:2; grid-row:2; }
.give-track > *:nth-child(3){ grid-column:1; grid-row:3; }
.give-track > *:nth-child(4){ grid-column:2; grid-row:4; }
/* ה-SVG המקורי מצויר לפי קואורדינטות הפריסה האופקית —
הוא מוסתר, ובמקומו עקומה ייעודית למובייל. */
.give-path{ display:none; }
/* ===== המסלול המקווקו במובייל =====
::before מצייר עקומת S ב-SVG מוטבע (data URI) שנמתחת
על כל הגריד. preserveAspectRatio="none" מאפשר לה
להתאים לכל רוחב וגובה בלי לשבור את הפריסה — התחנות
יושבות בגריד רגיל, והמסלול הוא רקע בלבד. */
/* המסלול מחבר את ארבע התחנות באלכסון: מתחיל מימין-למעלה,
יורד שמאלה, חוזר ימינה, ושוב שמאלה — בדיוק לפי סדר
התחנות בגריד. העקומה רכה (בזייה) ולא קווים ישרים. */
.give-track::before{
content:"";
position:absolute;
inset: 4% 8% 4% 8%;
z-index:-1;
pointer-events:none;
opacity:.6;
background-repeat:no-repeat;
background-size:100% 100%;
background-image: url("data:image/svg+xml;utf8,\
");
}
/* ===== ציור המסלול בגלילה =====
clip-path חושף את המסלול מלמעלה למטה ככל שהאזור נכנס
למסך. אין ספרייה חדשה — אנימציית CSS בלבד, שמופעלת
ע"י המחלקה .is-in שכבר קיימת בפרויקט. */
.give-track::before{
clip-path: inset(0 0 100% 0);
transition: clip-path 1.5s cubic-bezier(.33,.9,.4,1);
}
.give-section.is-drawn .give-track::before{
clip-path: inset(0 0 0 0);
}
/* התחנות מתגלות בזו אחר זו ככל שהמסלול מתקדם */
.give-track .give-stop{
opacity:0;
transform: translateY(14px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.9,.3,1);
}
.give-section.is-drawn .give-track .give-stop{
opacity:1;
transform:none;
}
.give-section.is-drawn .give-track > *:nth-child(1) { transition-delay:.15s; }
.give-section.is-drawn .give-track > *:nth-child(2) { transition-delay:.45s; }
.give-section.is-drawn .give-track > *:nth-child(3) { transition-delay:.75s; }
.give-section.is-drawn .give-track > *:nth-child(4) { transition-delay:1.05s; }
/* נגישות: בלי אנימציה — הכל גלוי מיד */
@media (prefers-reduced-motion: reduce){
.give-track::before{
clip-path:none;
transition:none;
opacity:.5;
}
.give-track .give-stop{
opacity:1;
transform:none;
transition:none;
}
}
/* במובייל התחנות בגריד — בלי מיקום אבסולוטי ובלי אנימציית ציור.
relative ולא static: עיגול הריחוף (.give-stop-disc) ממוקם
אבסולוטית ביחס לתחנה, ובלי עוגן הוא היה בורח למיקום אחר. */
/* ה-JS מגדיר left/top כסגנון inline לכל תחנה (מיקום על העקומה).
סגנון inline גובר על CSS, ולכן הגריד לא יכול היה לסדר אותן והן
נפרסו באלכסון. !important מנטרל את ה-inline רק במובייל. */
.give-stop{
position:relative !important;
left:auto !important;
top:auto !important;
transform:none !important;
opacity:1;
animation:none;
}
/* במכשירי מגע אין ריחוף אמיתי — העיגול היה נתקע פתוח אחרי
נגיעה. מסתירים אותו ומשאירים את המצב הרגיל והקריא. */
.give-stop-disc{ display:none; }
.give-stop .give-stop-cta{ display:none !important; }
.give-stop .give-stop-lines{ display:block !important; }
/* גם ההזזות של הריחוף מנוטרלות, כדי שנגיעה לא תזיז אלמנטים */
.give-stop:hover .give-stop-icon,
.give-stop:focus-visible .give-stop-icon{
transform:none;
background: var(--grad-accent);
filter: drop-shadow(0 5px 10px rgba(67,31,16,.12));
}
.give-stop:hover .give-stop-label,
.give-stop:focus-visible .give-stop-label{
transform:none; background:none; box-shadow:none;
padding:0; color: var(--ink); font-size: var(--gv-label);
}
.give-stop:hover .give-stop-dot,
.give-stop:focus-visible .give-stop-dot{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
/* מבטלים רק את *המעבר*, לא את מצב הריחוף עצמו.
transform:none כאן דרס את התכווצות האייקון ואת מיקום החץ,
ולכן בהעדפת "פחות תנועה" האייקון נשאר בגודל מלא. */
.give-stop-icon, .give-stop-dot, .give-stop-disc,
.give-stop-label{ transition:none; }
/* בלי אנימציית ציור — הכל פשוט גלוי */
.give-stop{ opacity:1; transform: translate(-50%,-50%); animation:none; }
/* חייב לשאת את אותה ספציפיות ככלל שמפעיל את האנימציה
(.give-section.is-drawn .give-path path.gv-mask-line = 0,4,1);
הכלל הזה מאוחר יותר בקובץ, ולכן הוא שמנצח */
.give-section.is-drawn .give-path path.gv-mask-line{
stroke-dasharray:none; animation:none;
}
}
/* ===================== הקולות מהשטח =====================
משתמש ברכיבים הקיימים: .section-tag לתגית, .abt-dot למחוון,
.abt-cta לכפתור, ו-.site-container לשוליים. */
/* עוטף משותף — מחזיק את הקישוט המקווקו שעובר בין שני הסקשנים */
.voices-give-wrap{
position:relative;
overflow:hidden; /* מונע גלילה אופקית, ברמת הרצף כולו */
isolation:isolate;
}
/* העיגול המקווקו הוסר לבקשת חן. הקוד נשמר להחזרה עתידית. */
.vg-arc{
display:none;
position:absolute;
z-index:0;
left: var(--vc-arc-x);
/* ממוקם ביחס לרצף כולו, ולכן חוצה את הגבול בין הסקשנים */
top: calc(100vh + var(--vc-arc-y));
width: var(--vc-arc);
height: var(--vc-arc);
overflow:visible;
pointer-events:none;
}
.vg-arc circle{
fill:none;
stroke: var(--st-c1);
stroke-width:2.5;
stroke-dasharray: 13 20;
opacity: var(--vc-arc-op);
vector-effect:non-scaling-stroke;
}
.voices-section{
position:relative;
background:transparent; /* הרקע יושב על העוטף */
/* כל האזור נכנס במסך אחד — פחות גובה ההידר הדביק */
min-height: calc(100vh - var(--hd-h));
display:flex;
flex-direction:column;
justify-content:center;
padding-block: var(--vc-pad-top) var(--vc-pad-bottom);
isolation:isolate;
}
.voices-give-wrap{ background: var(--cream); }
@supports (min-height: 100dvh){
.voices-section{ min-height: calc(100dvh - var(--hd-h)); }
}
/* ===== מובייל וטאבלט: התוכן קובע את הגובה =====
האזור עוצב למסך מלא בדסקטופ, אבל במסך צר התוכן שלו
קצר יותר מהמסך — וכפיית 100vh יצרה כאן 121px של שטח
מת. min-height:auto מחזיר את השליטה לתוכן; הריפוד
האחיד של המערכת שומר על הקצב מול שאר האזורים. */
@media (max-width: 1024px){
.voices-section{
min-height:auto;
padding-block: var(--section-padding-y);
}
}
/* קישוט רקע — מאחורי התוכן, לא משפיע על הפריסה */
.voices-blob{
position:absolute;
z-index:0;
pointer-events:none;
}
/* עיגול ירקרק גדול בצד ימין, נחתך בגבול המסך.
יושב נמוך, מתחת לכרטיסים, בשקיפות עדינה. */
.voices-blob{
top: var(--vc-blob-y);
right: var(--vc-blob-x);
width: var(--vc-blob);
height: var(--vc-blob);
border-radius:50%;
background: color-mix(in srgb, var(--st-c2) var(--vc-blob-op), transparent);
}
/* קשת מקווקוות תכלת בצד שמאל-תחתון, רובה מחוץ למסגרת */
.voices-wrap{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
}
.voices-title{
margin: var(--vc-tag-gap) 0 0;
font-size: var(--vc-title);
line-height: var(--vc-title-lh);
font-weight:800;
color: var(--ink);
text-align:center;
}
.voices-title > span{ display:block; }
.voices-title .is-accent{ color: var(--orange); }
.voices-lead{
max-width: var(--vc-lead-w);
margin: var(--vc-lead-gap) auto 0;
font-size: var(--vc-lead);
line-height: var(--vc-lead-lh);
color: var(--ink);
text-align:center;
}
/* ===== המניפה ===== */
.voices-deck{
position:relative;
/* פורש על כל רוחב התוכן, כך שהחצים יושבים בקצוות ולא על הכרטיסים */
width:100%;
height: calc(var(--vc-card-h) + var(--vc-deck-extra));
margin-top: var(--vc-deck-gap);
}
.voices-track{
position:absolute;
inset:0;
list-style:none;
margin:0; padding:0;
}
/* כל כרטיס ממוקם אבסולוטית במרכז, וה-transform קובע את מקומו
במניפה. כך הם חופפים זה את זה ולא יושבים בשורה. */
.voice-card{
position:absolute;
top: calc(50% - 42px);
left:50%;
width: var(--vc-card-w);
height: var(--vc-card-h);
margin: calc(var(--vc-card-h) / -2) 0 0 calc(var(--vc-card-w) / -2);
border:0;
padding:0;
background:none;
border-radius: var(--vc-card-r);
cursor:pointer;
font-family:'Afek','Assistant',-apple-system,'Segoe UI',Arial,sans-serif;
box-shadow: 0 14px 30px rgba(67,31,16,.16);
transition: transform var(--vc-fade) cubic-bezier(.22,.9,.3,1),
opacity var(--vc-fade) ease,
box-shadow var(--vc-fade) ease;
-webkit-tap-highlight-color: transparent;
}
/* שכבת המדיה — מופרדת ממעטפת הכרטיס, כדי שבעתיד אפשר יהיה
להחליף ![]()
ב-