/* שתי משפחות: Rubik = כותרות · Assistant = גוף וממשק. (היה גם Noto Serif Hebrew כ"שורה בסריף" בהירו — הוסר: ההדגשה על "מוביל" נשענת על צבע בלבד עכשיו, עקבי עם כל הדגשה אחרת בדף. ראה דיון בהחלטה בסיכום שנמסר.) */ @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&family=Assistant:wght@300;400;600;700&display=swap'); .haiv2, .haiv2-form-band{ /* ---- נתיבי תמונות — נקודת ההחלפה היחידה ---- */ --img-hero-poster: url('https://www.theinstituteai.org.il/wp-content/uploads/2026/08/hero-medical-ai-promo-poster.jpg'); --img-balicer: url('https://www.theinstituteai.org.il/wp-content/uploads/2026/08/faculty-balicer-web.jpg'); /* 662x936/506KB -> 300x424/15KB, מוצג ב-72px */ --img-elhadad: url('https://www.theinstituteai.org.il/wp-content/uploads/2026/08/faculty-elhadad-LOWRES.png'); --img-dagan: url('https://www.theinstituteai.org.il/wp-content/uploads/2026/08/faculty-dagan-web.jpg'); /* 280x280/95KB -> 200x200/13KB, מוצג ב-72px */ --img-barda: url('https://www.theinstituteai.org.il/wp-content/uploads/2026/08/faculty-barda-web.jpg'); /* 280x280/88KB -> 200x200/11KB, מוצג ב-72px */ /* ---- צבע ---- */ /* עודכן ל-#64E9F1 (הגוון המדויק שנמסר, תואם את הכחול-ציאן בוידאו ההירו) במקום ניחוש הירוק הראשוני. #64E9F1 עצמו בהיר מדי לטקסט (1.45:1 על לבן) — משמש רק למילוי (כפתורים עם טקסט כהה) ולזוהרים. --acc-lt הוא גוון טיל כהה מאותו גוון צבע, לשימוש בכל טקסט/גבול שצריך לעמוד ב-AA על רקע בהיר: 5.6:1 על לבן. */ --bg: #FFFFFF; --bg-2: #F3F8F5; --acc: #64E9F1; --acc-lt: #008282; --ink: #16211C; --muted: #26312D; /* הוכהה לבקשת משה — היה #5B6B64 (5.63:1), עכשיו 13.46:1 */ --muted-2: #3F4E48; /* 8.77:1 על לבן — לכיתובים קטנים במיוחד */ --glass: rgba(22,33,28,.035); --glass-2: rgba(22,33,28,.065); --line: rgba(22,33,28,.10); --line-2: rgba(22,33,28,.16); --r: 18px; --wrap: 1140px; --gut: clamp(18px, 5vw, 56px); --f-he: 'Rubik', sans-serif; /* כותרות, מספרים, תאריכים */ --f-body: 'Assistant', sans-serif; /* גוף, ממשק, תוויות */ /* קו הדופק — המוטיב החתום שמחבר כהה/יוקרתי לבריאות. שימוש יחיד: פאנל ההירו + מפריד אחד בין "הסגל" ל"הימים". */ --pulse-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='64' viewBox='0 0 220 64'%3E%3Cpath d='M0 32 H62 L74 8 L86 56 L98 20 L110 32 H220' fill='none' stroke='%23008282' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .haiv2, .haiv2 *, .haiv2 *::before, .haiv2 *::after, .haiv2-form-band, .haiv2-form-band *, .haiv2-form-band *::before, .haiv2-form-band *::after{ box-sizing:border-box; } .haiv2{ direction:rtl; position:relative; font-family:var(--f-body); font-size:clamp(1.08rem,1.2vw,1.18rem); line-height:1.7; color:var(--ink); overflow-x:clip; -webkit-font-smoothing:antialiased; } .haiv2 p{ margin:0 0 1.05em; } .haiv2 h1,.haiv2 h2,.haiv2 h3{ font-family:var(--f-he); font-weight:700; line-height:1.14; letter-spacing:-0.03em; margin:0; } .haiv2 a{ color:inherit; } .haiv2 img{ max-width:100%; display:block; } /* focus-visible ברור על רקע כהה — ברירת המחדל של הדפדפן קשה לראות כאן. שדות טופס כבר מקבלים טיפול focus משלהם (border+ring) בהמשך, לא כפול פה. */ .haiv2 a:focus-visible, .haiv2-form-band a:focus-visible, .haiv2 button:focus-visible, .haiv2-form-band button:focus-visible{ outline:2px solid var(--acc-lt); outline-offset:3px; border-radius:6px; } .haiv2 ul{ margin:0; padding:0; list-style:none; } .haiv2 .ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; } .v2wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:2; } /* ===== זוהרי רקע ===== */ .v2glow{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; } .v2glow--a{ width:min(720px,90vw); height:520px; top:-190px; inset-inline-start:-140px; background:rgba(100,233,241,.20); } .v2glow--b{ width:min(560px,80vw); height:440px; top:36%; inset-inline-end:-190px; background:rgba(100,233,241,.14); } .v2glow--c{ width:min(640px,85vw); height:460px; bottom:4%; inset-inline-start:-160px; background:rgba(100,233,241,.10); } /* d/e/f: אותו מנגנון בדיוק כמו a/b/c, על שאר מקטעי ה-"אור". התאורה השטוחה (v2bgfx) לא הצליחה להרגיש "חיה" למרות כמה סבבי כיוונון גוון — הזוהר המקומי הזה כן, כי הוא מרגיש כמו תאורה אמיתית (כיוון, פיזור, עוצמה משתנה) ולא צביעה אחידה. */ .v2glow--d{ width:min(600px,85vw); height:420px; top:-8%; inset-inline-end:-150px; background:rgba(100,233,241,.11); } .v2glow--e{ width:min(620px,85vw); height:440px; bottom:-6%; inset-inline-end:-170px; background:rgba(100,233,241,.10); } .v2glow--f{ width:min(600px,85vw); height:420px; top:-8%; inset-inline-start:-150px; background:rgba(100,233,241,.09); } /* ===== צורות גיאומטריות מרחפות ===== */ .v2shape{ position:absolute; z-index:1; pointer-events:none; border-radius:22%; border:1px solid rgba(255,255,255,.14); background:linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); backdrop-filter:blur(3px); animation:v2float 13s ease-in-out infinite; } @keyframes v2float{ 0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); } 50%{ transform:translateY(-20px) rotate(calc(var(--rot,0deg) + 6deg)); } } @media (max-width:760px){ .v2shape{ display:none; } } /* ===== NAV ===== */ .v2nav{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.75); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .v2nav__in{ max-width:var(--wrap); margin-inline:auto; padding:12px var(--gut); display:flex; align-items:center; justify-content:space-between; gap:16px; } .v2nav__logo{ display:flex; align-items:center; gap:16px; } .v2nav__logomain{ height:46px !important; width:auto !important; max-width:none !important; } .v2nav__sep{ width:1px; align-self:stretch; background:var(--line-2); } /* לוגו BGU בניווט: קופסת התמונה ממורכזת אנכית (align-items:center), אבל המשקל הוויזואלי (סמל עגול למעלה, 3 שורות טקסט זעירות מתחתיו) נופל נמוך מהמרכז הגיאומטרי. אותה בעיה שכבר נפתרה ברצועת "בשיתוף" למטה (alpha-centroid) — כאן טרם טופלה. הרמה עדינה כדי לאזן מול לוגו המכון החד-שורתי. */ .v2nav__bgu{ height:32px !important; width:auto !important; max-width:none !important; transform:translateY(-4px); } .v2nav .v2btn{ white-space:nowrap; min-height:44px; } @media (max-width:640px){ .v2nav__sep{ display:none; } .v2nav .v2btn{ font-size:.84rem; padding:9px 15px; } .v2nav__logomain{ height:30px !important; } .v2nav__logo{ gap:10px; } /* משה (13.8.2026): "רואים וגם רואים" — בקשה מפורשת לא להסתיר יותר את בן-גוריון במובייל, אלא להקטין קצת את לוגו המכון ולהציג רק את הסמל העגול של בן-גוריון (בלי שלוש שורות הטקסט מתחתיו). נבדק אמפירית: הלוגו המקורי הוא viewBox 200x50, והעיגול הכתום תופס בדיוק את הריבוע הימני שלו (סרקתי פיקסלים כתומים ב-canvas: min-x=602/800 בקנה-מידה 4x → 150.5/200, כמעט זהה ל-200-50=150). לכן object-fit:cover + object-position:right על קופסה ריבועית חותך בדיוק את העיגול, בלי תמונה חדשה. ה-translateY(-4px) של הגרסה המלאה בוטל — הוא פיצה על משקל ויזואלי של 3 שורות טקסט שכבר לא קיימות בחיתוך הזה. */ .v2nav__logo .v2nav__bgu{ display:block; height:28px !important; width:28px !important; max-width:none !important; object-fit:cover; object-position:right center; transform:none; } } /* ===== כפתורים ===== */ .v2btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-body); font-size:.94rem; font-weight:700; padding:11px 22px; border-radius:9px; border:0; cursor:pointer; background:var(--acc); color:var(--ink); text-decoration:none; transition:background .22s, color .22s, transform .22s, box-shadow .22s; } /* --acc (#64E9F1) בהיר מדי לטקסט לבן — 11.4:1 עם --ink נשאר. ב-hover המילוי מתחלף לטיל הכהה (--acc-lt), אז הטקסט חייב להתחלף איתו ללבן (5.6:1). */ .v2btn:hover{ background:var(--acc-lt); color:#FFFFFF; transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(0,130,130,.35); } /* תיקון: .haiv2 a{ color:inherit } ספציפי יותר מ-.v2btn{ color:... } כי הוא צירוף class+tag — הופך את טקסט הכפתורים המבוססים על ללבן/ירוש במקום כהה. מתוקן כאן ברמת ספציפיות שמנצחת בלי !important, ומוציא במפורש את .v2btn--ghost שאמור להישאר בהיר (הוא חי על ההירו הכהה). */ a.v2btn:not(.v2btn--ghost){ color:var(--ink); } a.v2btn:not(.v2btn--ghost):hover{ color:#FFFFFF; } .v2btn--lg{ font-size:1.02rem; padding:15px 32px; border-radius:11px; } .v2btn--ghost{ background:rgba(255,255,255,.22); color:#FFFFFF; border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(8px); } .v2btn--ghost:hover{ background:rgba(255,255,255,.32); box-shadow:none; } .v2btn .ar{ transition:transform .22s; } .v2btn:hover .ar{ transform:translateX(-4px); } /* ===== PILL BADGE ===== היה תג פנימי צבוע ("הרשמה פתוחה") שנתן לפיל את נגיעת הצבע — הוסר (מיותר, התוכן לא זקוק ללייבל כדי לשאת מותג). הצבע עבר לגבול הפיל עצמו במקום. שם התוכנית המלא ("Executive AI Healthcare") מודגש בגודל/משקל/צבע — לא רק מילת "Healthcare" בבידוד — כדי שהזיהוי הראשוני יהיה של הקורס כולו, לא רק הורטיקל. */ .v2pill{ display:inline-flex; align-items:center; gap:10px; padding:8px 18px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(100,233,241,.4); font-size:.79rem; font-weight:600; color:#CFE7E9; letter-spacing:.01em; } .v2pill b{ color:var(--acc); font-weight:700; font-size:1.08em; } /* ===== HERO ===== */ .v2hero{ position:relative; padding-block:clamp(54px,8vw,104px) clamp(48px,7vw,92px); text-align:center; overflow:hidden; } .v2hero__in{ max-width:900px; margin-inline:auto; } .v2hero h1{ font-size:clamp(2.35rem,5.9vw,4.3rem); margin:clamp(20px,2.6vw,30px) 0 0; color:#F5FCFD; } /* ההדגשה על "מוביל" — צבע בלבד, כמו כל הדגשה אחרת בדף. היה כאן בעבר גם מעבר לגופן סריף (Noto Serif Hebrew) על כל השורה השנייה, בהשראת "שורה בסריף נטוי" של crossfun — הוסר. שלוש סיבות: (1) שכבת סימון רביעית (מעל שבירת השורה, מעבר מהצהרה לשאלה, והצבע) ליד עבודה שכבר עשו שלושה סימנים אחרים — יתור. (2) סריף עברי נפסל באופן גורף בעבודת המכון במקום אחר בוולט (נקרא עתיק/תנ"כי) — שרד רק כחריגה חד-פעמית ומדויקת, והחריגה עצמה הייתה מקור לחיכוך (ראה תיקוני משקל/טרקינג קודם). (3) שום מקום אחר בדף לא משתמש בהחלפת גופן להדגשה — רק כאן. */ /* משקל בלבד יוצר את המדרג בין השורות, בלי סיכון של החלפת גופן: שורה 1 (700, ההצהרה) כבדה, שורה 2 (400, השאלה המהורהרת) קלילה — ו"מוביל" חוזר ל-700 בתוך השורה הקלילה, כך שהמילה נושאת גם צבע וגם קפיצת משקל חדה משורתה. פער של 300, לא 100, כדי שזה ייקרא כהחלטה מכוונת ולא כחוסר עקביות. */ .v2hero h1 .line1{ font-weight:700; } .v2hero h1 .line2{ font-weight:400; } .v2hero h1 .accent-word{ color:var(--acc); font-weight:700; } /* משה (13.8.2026): באייפון/מסכים צרים ה-h1 נשבר ל-4 שורות במקום 2 — ה-clamp הרגיל שומר על רצפה של 2.35rem גם ב-viewport צר, וזה גדול מדי לשתי השורות העבריות המלאות (נמדד: 337px רוחב זמין ב-375px, הטקסט הארוך דורש ≤28px). רצפה נמוכה יותר רק מתחת ל-640px, עולה בהדרגה עד לאותה רצפה הרגילה בדיוק בנקודת המעבר — בלי קפיצה חדה. נבדק אמפירית מול שתי השורות בפועל. */ @media (max-width:640px){ .v2hero h1{ font-size:clamp(1.4rem,7.3vw,2.35rem); } } /* פריפיקס .v2hero. נדרש לספציפיות: .haiv2 p{margin:0 0 1.05em} גובר על .v2hero__sub לבד (שתי סלקטורים באותה ספציפיות, אבל .haiv2 p ספציפי יותר) ומבטל את margin:auto, כך שהפסקה נדבקת לקצה הימני במקום להתמרכז — נמדד: 98px סטייה ממרכז ב-1976px. */ .v2hero .v2hero__sub{ font-size:clamp(1.1rem,1.6vw,1.3rem); font-weight:400; color:#F3FCFD; max-width:44rem; margin:1.15em auto 0; text-align:center; } .v2hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:clamp(26px,3.2vw,36px); } /* פאנל העובדות — מקביל ל"צילום המוצר" ב-crossfun */ .v2panel{ margin-top:clamp(36px,5vw,60px); background:linear-gradient(160deg, rgba(22,33,28,.035), rgba(22,33,28,.01)); border:1px solid var(--line); border-radius:calc(var(--r) + 6px); padding:clamp(16px,2vw,22px); box-shadow:0 40px 90px -50px rgba(22,33,28,.14), 0 0 0 1px rgba(22,33,28,.03) inset; position:relative; } /* 4 עמודות קבועות, לא auto-fit — auto-fit יצר מצב ביניים מכוער של 3+1 ברוחבים מסוימים. שבירה מפורשת ל-2×2 מתחת ל-640px, בלי אזור אפור של "כמעט 4 אבל לא". */ .v2panel__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-radius:var(--r); overflow:hidden; } @media (max-width:640px){ .v2panel__grid{ grid-template-columns:repeat(2,1fr); } } .v2panel__cell{ background:var(--bg-2); padding:clamp(18px,2.2vw,26px) 14px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:96px; } .v2panel__cell b{ display:block; font-family:var(--f-he); font-weight:700; font-size:clamp(.98rem,1.6vw,1.32rem); letter-spacing:-.02em; line-height:1.2; color:var(--ink); } .v2panel__cell span{ display:block; margin-top:3px; font-size:.76rem; font-weight:600; letter-spacing:.1em; color:var(--muted-2); } /* אווירת ההירו — עכשיו וידאו אמיתי במקום תמונה. קיפול חלבונים, DeepMind — AI מתקדם ביולוגיה. צבע טבעי נשמר (כמו בדף המנהיגים), וינייטה לקריאות בלבד. */ .v2hero__atmo{ position:absolute; inset:-2%; z-index:0; pointer-events:none; overflow:hidden; background:var(--bg-2) var(--img-hero-poster) center 38%/cover no-repeat; -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 52%, transparent 88%); mask-image:linear-gradient(180deg, #000 0%, #000 52%, transparent 88%); } .v2hero__vid{ width:100%; height:100%; object-fit:cover; object-position:center 38%; filter:saturate(1.08) contrast(1.03) brightness(.86); transform:scale(1.06); } @media (prefers-reduced-motion:reduce){ .v2hero__vid{ display:none; } } .v2hero__atmo::after{ content:''; position:absolute; inset:0; background: radial-gradient(62% 55% at 50% 34%, rgba(3,10,12,.55), transparent 72%), linear-gradient(180deg, rgba(3,10,12,.38) 0%, rgba(3,10,12,.22) 40%, var(--bg) 94%), linear-gradient(90deg, rgba(3,10,12,.4), transparent 22%, transparent 78%, rgba(3,10,12,.4)); } /* המוטיב החתום — קו דופק דק. משמש רק כמפריד בין "הסגל" ל"הימים", ומחבר בין הכהה/היוקרתי לבריאות בלי קלישאת "רפואה לבנה". אין שימוש נוסף בו בדף. */ .v2pulse-div{ height:64px; background-image:var(--pulse-svg); background-repeat:repeat-x; background-size:200px 64px; background-position:center; opacity:.55; } @media (prefers-reduced-motion:reduce){ .v2panel__media::after{ filter:none; } } /* ===== SECTIONS ===== */ /* פחות דרמטי בלי לצאת ממשפחת הכהה: רקע קבוע (fixed) מאחורי כל התוכן, שצבעו משתנה בעדינות לפי גלילה (IntersectionObserver, למטה בסקריפט) — לא עוד "מצב בהיר", רק הרמה קלה של הכהות. הטקסט/גוונים נשארים זהים בכל מקום, כי גם "האור" כאן עדיין כהה. */ .v2bgfx{ position:fixed; inset:0; z-index:-1; background:var(--bg); transition:background-color .9s ease; pointer-events:none; } .v2sec{ position:relative; padding-block:clamp(56px,8vw,110px); color:var(--ink); } .v2head{ max-width:640px; margin-bottom:clamp(30px,4vw,50px); } .v2head--c{ margin-inline:auto; text-align:center; } .v2eyebrow{ display:inline-block; font-size:.71rem; font-weight:700; letter-spacing:.2em; color:var(--acc-lt); margin-bottom:14px; } .v2sec h2{ font-size:clamp(1.85rem,3.7vw,2.75rem); } /* אותה תקלה בדיוק כמו ב-.v2hero h1 (ראה הערה שם) — כותרות עם
כפוי (למשל "זאת לא תוכנית AI / זאת תוכנית מנהיגות בעידן ה-AI") נשברות לשורה שלישית ב-viewport צר כי הרצפה של 1.85rem גדולה מדי. נמדד אמפירית: השורה הארוכה ביותר (376px) לא נכנסת ב-337px הזמינים ב-375px viewport. */ @media (max-width:640px){ .v2sec h2{ font-size:clamp(1.3rem,6.8vw,1.85rem); } } /* משה (13.8.2026): במובייל הריווח בין שורות ה-lede (כשהיא נשברת ל-2 שורות) נראה גדול יותר מהריווח שבין הכותרת ל-lede עצמה — הפוך מהמצווה. הסיבה: .v2sec__lede לא דרס את ה-line-height:1.7 הגלובלי של .haiv2 (מיועד לפסקאות ארוכות, לא ל-lede קצרה בת שורה-שתיים), בעוד margin-top היה רק .85em. צומצם ל-1.45 + margin-top הועלה ל-1.3em כך שההפרדה מהכותרת גדולה מהריווח הפנימי, לא הפוך. */ .v2sec__lede{ font-size:clamp(1.08rem,1.4vw,1.22rem); color:var(--muted); line-height:1.45; margin-top:1.3em; font-weight:300; } /*
— שבירת שורה מכוונת שמופיעה רק מתחת ל-640px; בדסקטופ/טאבלט נעלמת לגמרי (לא משאירה שורה ריקה) כי display:none מוציא את ה-br מזרימת הטקסט. */ .mob-br{ display:none; } @media (max-width:640px){ .mob-br{ display:initial; } } /* ===== כרטיסי זכוכית ===== */ .v2cards{ display:grid; gap:clamp(12px,1.6vw,18px); grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); } .v2card{ background:var(--glass); border:1px solid var(--line); border-radius:var(--r); /* padding אסימטרי: אופקי נשאר נדיב לקריאות, אנכי מצומצם — הבאדג' + הריפוד היו יחד כ-53% מגובה הכרטיס מול 40% תוכן בפועל, מה שנתן תחושת "המון שטח ריק". */ padding-inline:clamp(22px,2.5vw,30px); padding-block:clamp(16px,1.8vw,22px); transition:background .25s, border-color .25s, transform .25s; position:relative; overflow:hidden; } .v2card::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(420px 180px at 50% -30%, rgba(100,233,241,.16), transparent 70%); opacity:0; transition:opacity .3s; } .v2card:hover{ background:var(--glass-2); border-color:rgba(0,130,130,.4); transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(0,130,130,.28); } .v2card:hover::after{ opacity:1; } .v2card h3{ font-size:1.2rem; margin-bottom:.45em; } .v2card p{ color:var(--muted); font-size:1.03rem; margin:0; } .v2card__n{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; margin-bottom:10px; background:rgba(100,233,241,.16); border:1px solid rgba(100,233,241,.4); font-family:var(--f-he); font-size:.74rem; font-weight:700; color:var(--acc-lt); } /* ===== סגל ===== */ /* 2×2 קבוע, כל הכרטיסים באותו גודל — בליצר ואלחדד זה לצד זה בשורה הראשונה */ .v2fac{ display:grid; gap:clamp(12px,1.6vw,18px); grid-template-columns:repeat(2,1fr); } @media (max-width:680px){ .v2fac{ grid-template-columns:1fr; } } .v2fac__c{ background:var(--glass); border:1px solid var(--line); border-radius:var(--r); padding:clamp(16px,1.9vw,20px); transition:background .25s, border-color .25s, transform .25s; display:flex; flex-direction:column; justify-content:center; min-height:200px; } .v2fac__c:hover{ background:var(--glass-2); border-color:rgba(0,130,130,.4); transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(0,130,130,.28); } .v2fac__ph{ width:72px; height:72px; flex:none; border-radius:14px; background-size:cover; background-position:center 18%; background-color:#E7EEEA; border:1px solid var(--line-2); margin-bottom:14px; } .v2fac__ph--balicer{ background-image:var(--img-balicer); background-position:center 22%; } .v2fac__ph--elhadad{ background-image:var(--img-elhadad); } .v2fac__ph--dagan{ background-image:var(--img-dagan); } .v2fac__ph--barda{ background-image:var(--img-barda); } .v2fac__nm{ font-size:1.16rem; margin-bottom:.3em; } .v2fac__lead{ font-weight:600; font-size:.85em; color:var(--acc-lt); } .v2fac__af{ font-size:.92rem; color:var(--muted); line-height:1.55; } /* ===== לוח הימים ===== */ /* בניגוד לכל שכן אחר בדף (v2hero__in 900px, v2hero__sub 704px, form text 600px), הטבלה הזו הייתה נמתחת לרוחב המלא של הסקשן (1140px) בלי max-width משלה — כשהעמודה הרחבה (1fr) מלאה בפריטים קצרים, זה מייצר שורה תלוית-ימין עם ריק ענק אחריה. מוצמד לרוחב קריא ומרוכז, כמו שאר בלוקי התוכן בדף. */ .v2days{ max-width:820px; margin-inline:auto; background:var(--glass); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; } .v2day{ display:grid; grid-template-columns:150px minmax(0,1fr); border-top:1px solid var(--line); transition:background .22s; } .v2day:first-child{ border-top:0; } .v2day:hover{ background:rgba(100,233,241,.08); } @media (max-width:700px){ .v2day{ grid-template-columns:1fr; } } .v2day__w{ padding:clamp(18px,2.2vw,24px); border-inline-end:1px solid var(--line); } @media (max-width:700px){ .v2day__w{ border-inline-end:0; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:12px; } } .v2day__n{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.16em; color:var(--acc-lt); margin-bottom:5px; } .v2day__d{ font-family:var(--f-he); font-size:1.16rem; font-weight:700; letter-spacing:-.025em; } /* היה: רשימה אנכית, פריט אחד לשורה. הבעיה שהתגלתה: פריטים קצרים ("תרגול", "רגולציה") לצד פריטים ארוכים ("פרספקטיבת הדאטה: האם הדאטה שלנו מתאים למודל") — כל פריט קצר משאיר שורה כמעט ריקה, בלי קשר לרוחב העמודה. צמצום הרוחב (v2days למעלה) לא פתר את זה כי זו בעיית תוכן הטרוגני, לא בעיית רוחב. הפתרון: זרימת טקסט רציפה עם מפריד "·" (אותו מוטיב שכבר קיים ב-pill/פוטר) — ממלאת את הרוחב לפי אורך התוכן בפועל, לא לפי כמות הפריטים. שונה מה-pill המקווקו הקודם שנשבר במובייל: אין כאן border/רקע לכל פריט, רק זרימת inline רגילה שנשברת טבעי כמו כל טקסט. */ /* .v2day__t הוא

We will check together if the program is right for you.

Leave your details, and we will get back to you for a short conversation - to see if it's a good fit.

Phone: 08-6472831 Email: Instai@bgu.ac.il
(function(){ var els = document.querySelectorAll('.haiv2 [data-r], .haiv2-form-band [data-r]'); if(els.length){ if(!('IntersectionObserver' in window)){ els.forEach(function(el){ el.classList.add('is-in'); }); } else { var io = new IntersectionObserver(function(en){ en.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('is-in'); io.unobserve(e.target); } }); }, { rootMargin:'0px 0px -8% 0px', threshold:0.08 }); els.forEach(function(el){ io.observe(el); }); } } document.querySelectorAll('.haiv2 a[href^="#"]').forEach(function(a){ a.addEventListener('click', function(ev){ var t = document.querySelector(a.getAttribute('href')); if(t){ ev.preventDefault(); t.scrollIntoView({behavior:'smooth', block:'start'}); } }); }); /* רקע שמשתנה לפי גלילה בין 7 מקטעים לסירוגין מלאים (L,D,L,D,L,D,L) — היה קודם 3 מקטעים כהים ברצף באמצע (מה תיקחו/הסגל/התוכנית), הרגיש כמו קטע ארוך מדי בלי "נשימה". גם ההפרש בין הגוונים הוגבר (#171D22→#1C2831) — היה עדין מדי להבחין בו. כל התוכן עד רצועת הטופס הוא DOM/widget רציף אחד, אז זה עובד נקי גם אחרי הטמעה באלמנטור. */ var bgfx = document.querySelector('.v2bgfx'); if(bgfx && 'IntersectionObserver' in window){ var TONE = { light:'#F6FAF8', dark:'#FFFFFF' }; var bgIo = new IntersectionObserver(function(entries){ entries.forEach(function(e){ if(e.isIntersecting){ bgfx.style.backgroundColor = TONE[e.target.getAttribute('data-tone') === 'light' ? 'light' : 'dark']; } }); }, { rootMargin:'-45% 0px -45% 0px', threshold:0 }); document.querySelectorAll('.haiv2 .v2sec').forEach(function(s){ bgIo.observe(s); }); } })();