/* ═══════════════════════════════════════════════════════════════ שלד עמוד בית — שחזור מכניקת הפריסה והתנועה כל הערכים נמדדו מהמקור. תוכן = placeholder בלבד. מפת הקובץ 00 · Tokens 01 · Reset & base 02 · Header + nav + mobile overlay 03 · Loader 04 · Hero 05 · Reveal (נייבי + המשפט הנעוץ) 06 · Process (horizontal rail + map + values) 07 · Deep (הכותרת שנוסעת לצד + הטקסטים שמתחלפים) 08 · Work grid + cards 09 · Button 09א · Contact form 09ב · Legal pages 09ג · Join FAB + dialog 10 · Footer 11 · מסלול ה-Hero + הגבעה ← כאן נקבע גובה ה-hero 12 · Breakpoints 13 · Reduced motion ═══════════════════════════════════════════════════════════════ */ /* ── 00 · TOKENS ───────────────────────────────────────────── */ :root{ /* ── Color · פלטת סייף קפיטל ───────────────────────────── ink · נייבי — כל המבנה: מצע כהה, טקסט על בהיר, הקשת bone · off-white — מצע העמוד chalk · טקסט על מצע כהה + מילוי פקדים accent · בורדו — מצע בהיר בלבד accent-dark · ורוד־עתיק — מצע כהה בלבד האילוץ הקשיח: accent על ink הוא 1.5:1. הבורדו לא נוגע בשום דבר שיושב על הנייבי — לא טקסט, לא אייקון, לא מסגרת. משם והלאה accent-dark. */ --ink:#0E1E2E; --bone:#F7F5F1; --chalk:#E8E5DF; --white:#FFFFFF; --pill:#E8E5DF; --accent:#5D1819; /* זהה לבורדו שבתוך המגן שבלוגו */ --accent-dark:#A47E7E; /* גוונים שקופים נגזרים מהנייבי, לא משחור נייטרלי */ --ink-rgb:14,30,46; --chalk-rgb:232,229,223; /* ── Logo ───────────────────────────────────────────────── שני צבעים בלבד. על מצע כהה שניהם מוחלפים (ראה .colophon). */ --logo-ink:var(--ink); --logo-towers:var(--accent); /* רוחב הנעילה המלאה. יחס הלוגו 459.98:129.02 = 3.565:1 */ --logo-w:clamp(95px,8.85vw,151px); /* המגן לבדו הוא 98.49 מתוך 459.98 → 21.41% מהרוחב */ --logo-w-mark:calc(var(--logo-w) * .2141); /* הבית שעל הגבעה. viewBox 130×108, ולכן הגובה נגזר לבד. */ --house-w:clamp(76px,9vw,150px); /* האחוזה שסוגרת את הנייבי. viewBox 340×200 — בו יש חלונות, ולכן הוא צריך רוחב גדול יותר מהבית הקטן שבהירו כדי שהם יישארו קריאים. נבדק ב-150px ומעלה. */ --house-lg:clamp(238px,29.4vw,476px); /* כמה מהגבעה נראה מתחת לבית לפני שהמשתמש גולל */ --hill-peek:clamp(30px,5vh,60px); --font:'Heebo',system-ui,-apple-system,'Segoe UI',sans-serif; /* Type — vw כמו במקור, עטוף ב-clamp כדי שלא ייקרס בקצוות. בטווח 1000–1900px הערכים זהים למקור לחלוטין. */ --fs-h1: clamp(30px, 3.3vw, 62px); --fs-eyebrow: clamp(15px, 1.5vw, 28px); --fs-statement: clamp(30px, 3.3vw, 62px); --fs-process: clamp(40px, 4.9vw, 92px); --fs-value: clamp(20px, 2vw, 38px); --fs-card: clamp(22px, 2.5vw, 47px); --fs-meta: clamp(13px, 1.2vw, 22px); /* דרגת "גוף מוביל" בסעיף 4ב — 1.2vw בדסקטופ, 16px במובייל. היא הוגדרה בטבלה אבל לא היה לה טוקן. ‏--fs-meta נותן את אותו 1.2vw בדסקטופ אבל נופל ל-14px במובייל, ושלושה רכיבים אחרים כבר תלויים בו — ולכן דרגה נפרדת ולא שינוי שלו. */ --fs-lead: clamp(16px, 1.2vw, 22px); --fs-nav: clamp(13px, 1.1vw, 20px); --fs-btn: clamp(15px, 1.5vw, 28px); --fs-body: clamp(14px, 1vw, 19px); /* דרגת "משפטי" בסעיף 4ב: 13px גם בדסקטופ וגם במובייל. הרצפה הייתה 12px ולכן במובייל יצא גודל שלא קיים בסולם. */ --fs-legal: clamp(13px, .9vw, 17px); /* Line height */ --lh-tight:1em; --lh-h1:1.2em; --lh-statement:1.3em; --lh-title:1.4em; --lh-body:1.8em; /* Space */ --s-2:2vw; --s-3:3vw; --s-4:4vw; --s-5:5vw; /* Container */ --w-hero:53vw; --w-reveal:70vw; --w-grid:90vw; --w-sticky:69vw; /* 60 → 69 = רחב ב-15% במצב מצומצם */ /* מרווח בין קצה המסך לגלולת ה-header */ --header-gap:clamp(22px,2vw,38px); /* Geometry */ --r-pill:100px; /* Motion */ --t-fast:.2s; --t-base:.3s; --t-slow:.5s; --ease:ease-in-out; --ease-out:ease-out; /* Rail — נקרא גם מ-JS */ --panel:50vw; /* רוחב המפה בפאנל האמצעי של הרכבת */ --map-w:34vw; /* כמה הבורר נכנס פנימה לתוך תצלום הרצועה בעמוד העסקאות */ --bar-inset:clamp(74px,8vw,108px); } /* ── 01 · RESET & BASE ─────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bone); color:var(--ink); font-family:var(--font); font-size:var(--fs-body); line-height:var(--lh-body); font-weight:400; -webkit-font-smoothing:antialiased; /* clip ולא hidden — overflow:hidden היה יוצר scroll container ושובר את ה-position:sticky של במת הפרוצס */ overflow-x:clip; } html{overflow-x:clip} h1,h2,h3,p,ul,ol{margin:0;padding:0} ul,ol{list-style:none} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--ink);color:var(--chalk)} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .skip{ position:absolute;top:-100px;inset-inline-start:16px;z-index:200; background:var(--ink);color:var(--chalk); padding:12px 20px;border-radius:var(--r-pill); font-size:14px;font-weight:600; transition:top var(--t-base) var(--ease); } .skip:focus{top:16px} /* ── פוקוס — בלי טבעת ──────────────────────────────────────── היה כאן outline של 2px עם offset — מלבן מסביב לרכיב. הוא נמחק בכוונה: על שדה שכל הקיום הוויזואלי שלו הוא קו תחתון, מלבן פתאומי נראה כמו רכיב זר שנחת על העמוד. **אבל סימון פוקוס לא נעלם — הוא רק מחליף צורה.** בלי שום סימון, מי שמנווט במקלדת לא יודע איפה הוא עומד, וזה כשל נגישות של ממש (WCAG 2.4.7). לכן לכל משפחת רכיבים יש כאן סימון שנגזר מהצורה שלה: קישור מקבל קו תחתון, שדה מעבה את הקו שכבר יש לו, כפתור מתהפך, כרטיס נדלק כמו ב-hover. הצבע נשאר לפי סעיף 4 במערכת העיצוב: בורדו על מצע בהיר, ורוד־עתיק על מצע כהה. */ :focus-visible{outline:none} /* קישורי טקסט — קו תחתון, לא מלבן */ .menu__list a:focus-visible, .colophon__nav a:focus-visible, .colophon__col a:focus-visible, .consent__text a:focus-visible{ color:var(--accent); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.28em; } /* הפוטר הוא נייבי, ושם בורדו הוא 1.3:1 — ורוד־עתיק במקומו */ .colophon a:focus-visible, .process a:focus-visible{color:var(--accent-dark)} /* הלוגו וההמבורגר — אין להם טקסט לקו תחתון */ .brand:focus-visible{opacity:.55} .nav-toggle:focus-visible .nav-toggle__box i{background:var(--accent)} /* ── 02 · HEADER ───────────────────────────────────────────── */ .site-header{ position:fixed;inset:0 0 auto 0;z-index:99; padding-top:var(--header-gap); pointer-events:none; } /* 100vw ולא 100% — שני קצות המעבר באותה יחידה. מעבר מ-% ל-vw לא תמיד מתאנפש, וזו הסיבה שבמובייל רק הרקע השתנה בלי שהרוחב יזוז. */ /* התזמון כאן הוא כל ההבדל בין "מצטמצם" ל"נהיה אפור". במנוחה אין לסרגל רקע בכלל, ולכן אם הרוחב והרקע נכנסים יחד הגלולה פשוט מופיעה כשהיא כבר צרה — ואין מה לראות מצטמצם. לכן: הרקע נכנס מהר (.16s), הרוחב מתכווץ לאט אחריו (.5s). קודם נוצרת גלולה רחבה, ואז רואים אותה נסגרת. */ .header-shell{ max-width:100vw; margin-inline:auto; padding-inline:clamp(16px,4vw,60px); transition:max-width .5s cubic-bezier(.22,1,.36,1) .06s; } .header-bar{ display:flex;align-items:center;justify-content:space-between;gap:20px; /* row-reverse ב-RTL = הלוגו בצד השמאלי, הניווט בימני */ flex-direction:row-reverse; padding-block:.8vw;padding-inline:2vw 1vw; border-radius:var(--r-pill); background:transparent; transition:background .16s var(--ease-out), padding .5s cubic-bezier(.22,1,.36,1) .06s; pointer-events:auto; } /* מצב נדבק — 100vw → 60vw + גלולה */ .site-header.is-stuck .header-shell{max-width:var(--w-sticky)} .site-header.is-stuck .header-bar{background:var(--pill)} .brand{display:flex;align-items:center;flex:none} /* ── הלוגו ומעבר הכיווץ ───────────────────────────────────── ה-svg שומר על רוחב קבוע תמיד; רק ה-span שמסביבו מצטמצם. כך המגן לא משנה מידה — רק ה-afe יוצא מהמסגרת. במקביל ה-afe נגרר שמאלה ומתכווץ לנקודה שבתוך המגן, והמגן מצויר אחריו ב-DOM ולכן בולע אותו. */ /* direction:ltr חובה — העמוד הוא dir="rtl", וב-SVG זה הופך את text-anchor:start לקצה הימני. בלי זה המילה CAPITAL רצה שמאלה מנקודת העיגון ונוחתת מחוץ ל-viewBox לגמרי. */ .logo{display:block;fill:var(--logo-ink);direction:ltr} .logo .logo__towers{fill:var(--logo-towers)} /* המילה CAPITAL שבנעילה. הגודל והריווח (32px / 49px) מגיעים מה-style שבתוך ה-SVG — כלומר מקובץ המקור שיוצא מהעורך — ולכן אין כאן מספר שני שיכול לצאת מסנכרון. הצבע יורש מ---logo-ink כמו שאר הלוגו. */ .logo__word{ transform-box:view-box; transform-origin:109.35px 64.51px; /* הקצה השמאלי של ה-a, בגובה המרכז */ /* אותה עקומה ואותו משך כמו הגלולה — גרירה אחת, לא שתי תנועות */ transition:transform .5s cubic-bezier(.22,1,.36,1) .06s, opacity .28s var(--ease) .2s; } .brand__logo{ display:block;flex:none;overflow:hidden; direction:ltr; /* גאומטריית ה-SVG לא מתהפכת — החיתוך חייב להיצמד שמאלה */ width:var(--logo-w); transition:width .5s cubic-bezier(.22,1,.36,1) .06s; } /* max-width:none חובה — ה-reset הגלובלי (svg{max-width:100%}) היה מכווץ את ה-svg יחד עם המסגרת, וכך המגן היה מקטין את עצמו במקום שה-afe ייחתך. זה כל ההבדל בין כיווץ לגרירה. */ .brand__logo .logo{width:var(--logo-w);max-width:none;height:auto} .site-header.is-stuck .brand__logo{width:var(--logo-w-mark)} .site-header.is-stuck .logo__word{ /* 109.35 → 49.2 = מרכז המגן. משם scale(.08) מכבה אותו לגמרי. */ transform:translateX(-60px) scale(.08); opacity:0; } /* ניווט דסקטופ */ .menu__list{display:flex;align-items:center;gap:var(--s-3)} .menu__list a{ position:relative;display:inline-block; font-size:var(--fs-nav);font-weight:600;color:var(--ink); padding:4px 0; transition:opacity var(--t-base) var(--ease); } /* קו חוצה — עובר דרך אמצע הטקסט, נפתח מהמרכז */ /* ללא קו חוצה — הסימון הוא עמעום וצבע בלבד */ /* העמוד הנוכחי — בורדו, בלי קו */ .menu__list a.is-current{color:var(--accent)} /* עמעום קבוצתי — הפוקוס עובר לפריט שמתחת לעכבר */ .menu__list:hover a:not(:hover){opacity:.4} /* המבורגר · שלושה קווים → X */ .nav-toggle{ display:none; background:none;border:0;padding:8px;cursor:pointer;color:inherit; } .nav-toggle__box{display:flex;flex-direction:column;gap:6px;width:30px} .nav-toggle__box i{ display:block;height:2px;background:currentColor;border-radius:2px; transition:transform var(--t-base) var(--ease),opacity var(--t-base) var(--ease); } .nav-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)} .nav-toggle[aria-expanded="true"] i:nth-child(2){opacity:0;transform:scaleX(.4)} .nav-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* ── 03 · LOADER ───────────────────────────────────────────── */ .loader{ position:fixed;inset:0;z-index:200; display:flex;align-items:center;justify-content:center;gap:0; background:var(--bone); transition:opacity var(--t-slow) var(--ease),visibility var(--t-slow) var(--ease); } /* ‏pointer-events:none — לא קישוט. הלואדר הוא שכבה על כל המסך ב-z-200, וההיעלמות שלו נשענת על **מעבר** CSS. דפדפן לא מריץ מעברים בטאב מוסתר (document.visibilityState === 'hidden'), ולכן טאב שנפתח ברקע נשאר עם visibility:visible — שכבה שקופה ומלאה שבולעת כל לחיצה בעמוד. מדדתי את זה בדיוק: הלואדר נשא is-done ועדיין החזיר opacity 1, ו-elementFromPoint על קישורי התפריט החזיר אותו במקום את הקישור. ‏pointer-events לא תלוי במעבר ולכן הוא נכנס לתוקף מיד. */ .loader.is-done{opacity:0;visibility:hidden;pointer-events:none} /* המגן לבדו, קטן ובמרכז. מהבהב עד שהעמוד נטען ואז נעלם. */ .loader__mark{ block-size:clamp(38px,4.4vw,56px); inline-size:auto; fill:var(--logo-ink); /* דעיכה בלבד — בלי scale. pulse כולל תנועה ולכן לא מתאים כאן. */ animation:markFade 2.4s var(--ease) infinite; } .loader__towers{fill:var(--logo-towers)} @keyframes markFade{0%,100%{opacity:1}50%{opacity:.62}} /* התוכן נכנס אחרי הלואדר */ body.is-ready main, body.is-ready .site-header{animation:fadeIn 1.25s var(--ease) both} @keyframes fadeIn{from{opacity:0}to{opacity:1}} /* ── 04 · HERO ─────────────────────────────────────────────── */ /* גובה ה-hero לא נקבע כאן אלא בסקשן 10 (מסלול הגלילה), כי הוא המסלול של טיפוס הגבעה ולא סתם גובה מסך. */ .hero{ background:var(--bone); display:flex;align-items:center;justify-content:center; padding-inline:10px; } .hero__inner{width:var(--w-hero);max-width:100%} .hero__title{ max-width:52vw;margin-inline:auto;padding:var(--s-5); font-size:var(--fs-h1);font-weight:700;line-height:var(--lh-h1); text-align:center;color:var(--ink); } /* סמן הקלדה — קו אנכי, לא תו קו-תחתון. נבנה מ-CSS ולא מתו טקסט, כדי לשלוט בעובי ובגובה. */ .caret{ display:inline-block; width:.055em;min-width:2px; height:.74em; margin-inline-start:.1em; background:var(--accent); /* הדבר היחיד שזז בעמוד — ולכן הוא נושא את המבטא */ vertical-align:-.04em; animation:blink 1s steps(1,end) infinite; } @keyframes blink{0%,100%{opacity:1}50%{opacity:0}} /* הכותרת שומרת על הגובה שלה כדי שלא תהיה קפיצת פריסה בזמן ההקלדה. חל על כל כותרת מוקלדת, לא רק על ההירו — ה-JS מוסיף is-typing לכל אלמנט שמחזיק [data-typed]. */ .hero__title.is-typing, .page-head__title.is-typing{min-height:var(--title-h,auto)} /* בדסקטופ שוברי השורה שבמקור מתכווצים לרווח והטקסט נשבר לבד לפי הרוחב; במובייל (סקשן 11) pre-line אוכף אותם. */ .hero__typed{white-space:normal} /* ── 05 · REVEAL ───────────────────────────────────────────── */ .reveal{ position:relative; /* המרחק בין המשפט הנעוץ לסקשן התהליך. קוצר פעמיים — כל מה שמעבר לרמפת היציאה הוא נייבי ריק. */ min-height:70px; /* מובייל. הדסקטופ נדרס מיד מתחת. */ /* נייבי מלא — הגבעה בהירו כבר עשתה את המעבר מבהיר לכהה */ background:var(--ink); overflow:hidden; } /* גוש הנייבי. הקצה העליון שלו הוא קו האופק — גבעה סימטרית ורדודה. נוצר מ-border-radius אליפטי ולא מ-SVG, ולכן חד בכל רוחב מסך ובכל DPI. הרדיוס האופקי 50% פורש את הכיפה על כל הרוחב; האנכי הקטן משטח אותה. הפסגה יושבת בדיוק במרכז — שם עומד הבית. */ .reveal__city{ position:absolute;inset:0; background:var(--ink); /* הרדיוס האנכי הוא כל השליטה בשיפוע: קטן = גבעה שטוחה. ~4vw על גוש של 22% נותן מדרון עדין, לא כיפה. */ border-radius:50% 50% 0 0 / clamp(22px,4vw,64px) clamp(22px,4vw,64px) 0 0; } @media (min-width:768px){ /* בדסקטופ סקשן החשיפה מתאפס לגמרי — הוא כבר לא שלב, רק התפר שבו המשפט מסיים לדהות. הגובה מגיע מהגבעה שממילא absolute, ולכן 0 לא משאיר חור. */ .reveal{min-height:0} } /* המשפט הנעוץ — fixed, ה-opacity מנוהל ב-JS */ /* ממורכז אנכית במסך. z-index 4 — מעל .process (3), כדי שהרקע של הסקשן הבא יחליק מתחת למשפט במקום לדרוס אותו. מתחת לתפריט (10/11) ולהאדר (99), כך ששניהם עדיין מכסים אותו כשצריך. */ .pinned{ position:fixed;top:50%;inset-inline:0;z-index:4; transform:translateY(-50%); width:var(--w-reveal);max-width:92vw;margin-inline:auto; text-align:center;color:var(--chalk); opacity:0;pointer-events:none; } .pinned__eyebrow{ /* דרגת Eyebrow מהקובץ, סעיף 4ב: 1.5vw דסקטופ · 4.8vw מובייל */ font-size:var(--fs-eyebrow); font-weight:500;line-height:var(--lh-tight); margin-bottom:var(--s-2); /* נייטרלי, לא בורדו — chalk מעומעם על הנייבי */ color:rgba(var(--chalk-rgb),.62); } .pinned__line{ font-size:var(--fs-statement);font-weight:700;line-height:var(--lh-statement); } /* ── 06 · PROCESS ──────────────────────────────────────────── */ .process{ position:relative;z-index:3; /* המסלול מחזיק שתי פעימות: נסיעת הרכבת (1.00) והפייד אאוט של הבמה (0.45). שתיהן בתוך טווח הנעיצה, כי הפייד חייב לקרות כשהמפה עומדת במקום ולא בזמן שהיא נגללת מעלה. היחידה svh ולא vw — שתיהן נמדדות במסכים ב-JS. הסכום חייב להתאים ל-PHASE ב-motion.js: 1.45 + מסך לבמה. */ min-height:245vh; background:var(--ink); color:var(--chalk); /* התפר בין שני סקשנים כהים נפתח לפעמים לפיקסל של נייר בגלל עיגול תת־פיקסלי בגובה הסקשן. חפיפה של 1px סוגרת אותו. */ margin-top:-1px; } /* הבמה נדבקת למסך בזמן שהמסלול רץ */ .process__stage{ position:sticky;top:0; height:100vh; display:flex;align-items:center; overflow:hidden; } .rail{ display:flex;align-items:center; width:max-content; transform:translateX(0); will-change:transform; } /* 10% נמדדים מול **הרכבת** (3 פאנלים) ולא מול הפאנל עצמו, ולכן זה 15vw בפועל — 192px מכל צד ב-1280. */ .rail__panel{ width:var(--panel);flex:none; padding-inline:10%; display:flex;align-items:center; } .rail__panel--center{justify-content:center;padding-inline:0} /* רק פאנל הערכים מתרחב, כי שם הכותרות נשברו. ה-start נשאר 15vw — כלומר בדיוק 10%, אותה נקודת התחלה — ורק ה-end מצטמצם, ולכן העמודה גדלה פנימה לעבר מרכז המסך. פאנל הכותרת לא מושפע ושומר על שבירת השורות המקורית שלו. */ /* פאנל הכותרת מוזז ימינה ב-4vw. שני הצדדים משתנים בסכום אפס (15/15 → 11/19), ולכן רוחב העמודה נשאר 20vw ושבירת השורות של "איך אנחנו עושים את זה?" לא זזה. */ .rail__panel--title{padding-inline:11vw 19vw} .rail__panel--values{padding-inline:15vw 5vw} .process__title{ font-size:var(--fs-process);font-weight:700;line-height:var(--lh-tight); color:var(--chalk); } /* הדיסקים המסתובבים. האישון יושב בקצה השמאלי — לכן סיבוב הדיסק מזיז אותו במעגל. */ /* ── המפה ────────────────────────────────────────────────── נעה שמאלה עם הרכבת בלבד — אין לה תנועה משלה. הכיתוב באותה דרגה טיפוגרפית כמו .process__title, כדי ששני הפאנלים ייקראו כשתי אמירות באותו משקל ולא ככותרת ותווית. */ .mapfig{ margin:0; display:flex;flex-direction:column;align-items:center; gap:clamp(14px,1.6vw,30px); /* רחב מהמפה, כדי שהמשפט ייפרש ולא ייערם */ width:var(--panel); } .mapfig__svg{ width:var(--map-w);height:auto;flex:none; /* הרסטר של המדינות שקוף ברקע, אז אין צורך בשום מצע */ overflow:visible; } .mapfig__svg image{ /* בלי זה הדפדפן מחליק את הרסטר ומטשטש את קווי המדינות */ image-rendering:auto; } /* הצבע מ-Untitled 4.svg — rgb(93,24,25) = #5D1819, הבורדו של המותג. */ .mapfig__al{fill:#5D1819;stroke:#5D1819;stroke-width:.5} /* ערימה צמודה: השורה הקטנה יושבת ממש מעל שם המקום. ה-gap קטן בכוונה — שתי השורות אמורות להיקרא כיחידה אחת. */ .mapfig__cap{ display:flex;flex-direction:column;align-items:center; gap:clamp(2px,.35vw,7px); text-align:center; } .mapfig__place{ font-size:var(--fs-process);font-weight:700;line-height:var(--lh-tight); color:var(--chalk); } /* דרגה אחת מתחת ל-Eyebrow — דרגת הגוף מהסולם שבסעיף 4ב. כלל 1 שם: לא ממציאים דרגת ביניים, יורדים דרגה שלמה. משקל 500 וצבע מעומעם, כמו כל eyebrow באתר. */ .mapfig__eyebrow{ font-size:var(--fs-body); font-weight:500;line-height:var(--lh-tight); color:rgba(var(--chalk-rgb),.62); } /* ── רשימת הערכים ────────────────────────────────────────── קו אנכי אחד רץ לאורך כל הרשימה, בצד ההתחלה (ימין ב-RTL) — בדיוק במקום שבו ישבו האותיות א/ב/ג. inset-block:0 מותח אותו מראש הסעיף הראשון עד תחתית האחרון. */ .values{position:relative;padding-inline-start:0} .values::before{ content:'';position:absolute; inset-block:5%; /* מתקצר מעט משני הקצוות */ inset-inline-start:-2vw; width:2px; background:var(--chalk); pointer-events:none; } .values li{margin-bottom:var(--s-4)} .values li:last-child{margin-bottom:0} .values h3{ display:block; font-size:var(--fs-value);font-weight:600;line-height:var(--lh-title); color:var(--chalk); } .values p{ font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body); color:var(--chalk); } /* ── 07 · DEEP · "איך עסקה מייצרת רווח" ────────────────────── במה נעוצה אחת. המסלול מתחיל עוד לפני הסקשן — ברגע שהרכבת שמעליו עוצרת — ולכן הבמה צריכה להישאר נעוצה רק 2.70 מסכים אחרי שהיא נתפסת, ועוד מסך אחד לבמה עצמה = 425svh. ראה החישוב המלא ליד DEEP_VH ב-motion.js. */ .deep{ position:relative;z-index:3; /* הגובה נגזר מהמסלול ולא להפך. היציאות התקצרו לחלון חפיפה קצר, והעודף היה נערם בסוף כגלילה שבה כלום לא קורה. נמדד: הזנב על השקף האחרון שווה עכשיו ל-hold של השניים שלפניו, כלומר לכל אינפוגרפיקה אותו זמן קריאה בדיוק. */ min-height:390vh; background:var(--ink); color:var(--chalk); margin-top:-1px; /* סוגר תפר תת־פיקסלי בין שני סקשנים כהים */ } .deep__stage{ position:sticky;top:0; height:100vh; overflow:hidden; } /* ── הכותרת ──────────────────────────────────────────────── מה שכתוב כאן הוא **התנוחה הסופית** — אחרי שהיא כבר נחתה בעמודה הימנית, באותו 11vw של .rail__panel--title ובאותה דרגת גודל. הפוזה הממורכזת נגזרת מזה ב-JS בתור translate, ולכן אין כאן שתי גיאומטריות שיכולות לצאת מסנכרון. */ /* fixed ולא absolute — היא צריכה להופיע כבר בזמן שסקשן הפרוצס עדיין על המסך, לפני שהבמה של deep קיימת בפריים. הערכים זהים לחלוטין למה שהיו ב-absolute בתוך הבמה, כי הבמה נעוצה ב-top:0 ותופסת מסך מלא — ולכן התנוחה הסופית לא זזה בפיקסל. z-index 4 כמו .pinned: מעל .process (3), מתחת לתפריט ולהאדר. */ .deep__lead{ position:fixed;z-index:4; pointer-events:none; /* ממורכזת אנכית, וזה גם הגובה שבו היא נוחתת אחרי העלייה וגם זה שבו היא נחה בסוף — ולכן הנסיעה לצד היא אופקית טהורה. המרכוז נעשה ב-inset+margin ולא ב-transform, כי ה-transform שמור ל-JS ואסור שיתנגשו. */ inset-block:0; height:max-content; margin-block:auto; inset-inline-start:11vw; /* חובק את השורה הארוכה ביותר, ראה ההערה ב-HTML */ width:max-content;max-width:42vw; font-size:var(--fs-process);font-weight:700;line-height:var(--lh-tight); color:var(--chalk); /* כמו .pinned — ה-JS הוא שמרים את זה. ראה updateDeep. */ opacity:0; will-change:transform,opacity; } /* ── הטקסטים ─────────────────────────────────────────────── כולם absolute באותה נקודה, ערומים זה על זה. ההחלפה היא opacity + translateX בלבד, ולכן אין reflow בשום פריים. */ /* אותה עמודה בדיוק כמו רשימת הערכים: שם היא יוצאת מ-50vw פאנל פחות padding של 15vw ו-5vw, כלומר 30vw נטו. הרוחב הוא מה שקובע איך הפסקה נשברת, ולכן בלעדיו הטיפוגרפיה נראית אחרת גם כשכל הגדלים זהים. */ /* fixed כמו הכותרת, ומאותה סיבה: הטקסט הראשון נכנס בזמן שהכותרת עוד נוסעת, והבמה של deep עדיין לא נתפסה אז. כל עוד הם absolute בתוכה הם היו נכנסים מתחת לקצה התחתון של המסך. כשהבמה כן נעוצה ב-top:0 שתי השיטות זהות לחלוטין. */ /* בצד השמאלי — הצד הנגדי לכותרת. ב-RTL זה inset-inline-end. ה-top נכתב מ-JS (הוא תלוי ברזולוציה), והערך כאן הוא רק הנפילה־לאחור אם ה-JS לא רץ. */ .deep__slides{ position:fixed;z-index:4; pointer-events:none; top:18vh; /* גבול תחתון, ולא רק top: זה מה שנותן למיכל גובה מוגדר, וזה מה שמאפשר לאינפוגרפיקה שמתחת לטקסט להתמרכז בשארית המקום במקום להיצמד לתחתית הפסקה. */ bottom:clamp(24px,6vh,70px); inset-inline-start:auto; inset-inline-end:11vw; /* 36vw ולא 30vw כמו רשימת הערכים: ב-30 המשפט הראשון נשבר באמצע "מ-12 חודשים". נמדד — 36vw הוא הרוחב הראשון שבו כל המשפט נכנס לשורה אחת, ואז אין שבירה בכלל בתוכו. */ width:36vw; } /* ממלא את המיכל ומחלק אותו לשניים: הטקסט בגובהו הטבעי למעלה, והאינפוגרפיקה לוקחת את כל השאר. */ .deep__slide{ position:absolute;inset:0; display:flex;flex-direction:column; opacity:0; will-change:transform,opacity; } /* אותו קו אנכי של רשימת הערכים, אותה גיאומטריה בדיוק. הוא על .deep__text ולא על כל השקופית, כדי שיסמן את הפסקה בלבד ולא יימתח גם לאורך האינפוגרפיקה שמתחתיה. */ .deep__text{position:relative} .deep__text::before{ content:'';position:absolute; inset-block:5%; /* מתקצר מעט משני הקצוות */ inset-inline-start:-2vw; width:2px; background:var(--chalk); pointer-events:none; } /* זהה ל-.values h3 / .values p — אותו גודל, משקל, גובה שורה וצבע. גם בלי margin בין הכותרת לפסקה: ה-line-height של הגוף (1.8) הוא כל הנשימה שיש שם, בדיוק כמו ברשימת הערכים. */ .deep__slide h3{ font-size:var(--fs-value);font-weight:600;line-height:var(--lh-title); color:var(--chalk); } .deep__slide p{ font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body); color:var(--chalk); } /* ── האינפוגרפיקה שמתחת לטקסט ─────────────────────────────── מכל בלי מסגרת נראית: על הנייבי אין באתר הזה אף קופסה, והקווים של הגרפיקה עצמה הם כל הגבול שהיא צריכה. לשאר הטקסטים אין עדיין גרפיקה, ומכל ריק פשוט לא מרנדר כלום. */ /* flex:1 — לוקח את כל המקום שנשאר מתחת לטקסט, ומרכז בתוכו את הגרפיקה לגובה ולרוחב. ה-margin הוא רק רצפה: הוא מבטיח מרווח מינימלי מהפסקה גם כשהמקום שנשאר קטן. */ .deep__fig{ flex:1; display:flex;flex-direction:column;justify-content:center; margin:clamp(20px,2.4vw,40px) 0 0; } /* הציר עצמו לא נמתח לגובה — רק מתמרכז */ .deep__fig > *{flex:none} /* קו מידה. טיק בכל קצה ו-"12 חודשים" מעליו — כמו בשרטוט, ולכן הוא נקרא כמדידה של הרוחב שמתחתיו ולא ככותרת. */ .tl__dim{ position:relative; height:clamp(22px,2.2vw,32px); margin-bottom:clamp(8px,.9vw,14px); } .tl__val{ position:absolute;inset-inline:0;inset-block-start:0; text-align:center; font-size:var(--fs-meta);font-weight:600;line-height:1.2; color:var(--chalk); font-variant-numeric:tabular-nums; } .tl__rule{ position:absolute;inset-block-end:0;inset-inline:0; height:1.5px;background:var(--chalk); } .tl__rule::before, .tl__rule::after{ content:'';position:absolute;inset-block-end:0; width:1.5px;height:clamp(7px,.8vw,12px); background:var(--chalk); } .tl__rule::before{inset-inline-start:0} .tl__rule::after{inset-inline-end:0} /* הרצועה. --span הוא מספר החודשים, ולכן רוחב המקטע הוא הנתון עצמו: שיפוץ באמת רחב פי שלושה וחצי מרכישה. מקטעים מלאים עם מסגרת chalk ורווח נייבי ביניהם — אותה מסגרת בדיוק של רצועות המשפך, מסובבת ב-90°, כדי ששלושת התרשימים בסקשן ידברו שפה אחת. */ .tl{display:flex;gap:5px} .tl__seg{ flex:var(--span);min-width:0; height:clamp(40px,4.4vw,62px); display:flex;align-items:center;justify-content:center; background:var(--chalk); box-shadow:inset 0 0 0 1.5px var(--chalk); font-size:var(--fs-body);font-weight:600;line-height:1.2; color:var(--ink); } /* הריפוד יושב על ה-span ולא על ה-li. ב-border-box ריפוד על פריט flex עם basis:0 מרצפה את הבסיס שלו, והרוחבים יוצאים 2.16/6.76/3.09 במקום 2/7/3 — כלומר הנתון מזדייף. */ .tl__seg > span{padding-inline:6px;white-space:nowrap} /* הסולם רץ עם הזמן, כמו במשפך מלמעלה למטה: chalk ← ורוד ← בורדו. הבורדו כאן לגיטימי כי הוא מקטע מלא שחסום בין הוורוד לבין מסגרת ה-chalk ואינו נוגע בנייבי — מה שקו של 2px לא יכול היה לעשות. טקסט chalk עליו הוא 10.46:1, נייבי על הוורוד 4.71:1. */ .tl__seg--mid{background:var(--accent-dark)} .tl__seg--key{background:var(--accent);color:var(--chalk)} /* ── תרשים העוגה · "איך מורכב ההון" ───────────────────────── conic-gradient ולא stroke עבה על מעגל: שם הדפדפן מקרב מעגל בארבע עקומות בזייה, וקצה המקטע נחתך בניצב למשיק המקורב. כשה-stroke רחב פי שניים מהרדיוס, סטייה זעירה בזווית הופכת לסטייה גדולה במרכז — הגבולות לא נפגשים בנקודה אחת. ב-conic-gradient הגבול רדיאלי בהגדרה. שלושת האחוזים ב-HTML הם הנתון היחיד; הזוויות נגזרות מהם. אין רווחים בין הפרוסות, ולכן כל אחת היא בדיוק האחוז שלה. */ .deep__fig--pie{ flex-direction:row;align-items:center; gap:clamp(20px,2.6vw,44px); } .pie{ flex:none; width:clamp(132px,15vw,196px); aspect-ratio:1;border-radius:50%; /* אחוז אחד = 3.6deg. conic מתחיל ב-12 ורץ עם כיוון השעון. */ --a1:calc(var(--p1) * 3.6deg); --a2:calc((var(--p1) + var(--p2)) * 3.6deg); background:conic-gradient( var(--accent) 0 var(--a1), var(--accent-dark) var(--a1) var(--a2), var(--chalk) var(--a2) 360deg ); /* טבעת חיצונית. הבורדו הוא 1.29:1 מול הנייבי, ובלעדיה הקשת של הפרוסה שלו נמוגה לרקע והעוגה נראית נגוסה. מול השכנות שלה בתוך העוגה היא דווקא ברורה — 3.64 ו-10.37. */ box-shadow:inset 0 0 0 1.5px var(--chalk); } /* המקרא. הוא שנושא את הנתונים כטקסט, ולכן ה-div aria-hidden. */ .pie__key{ display:flex;flex-direction:column; gap:clamp(9px,1.1vw,18px); } .pie__row{ display:flex;align-items:baseline; gap:clamp(7px,.8vw,13px); line-height:1.2; } /* ריבוע הצבע. קו chalk סביבו מאותה סיבה כמו הטבעת — בלעדיו הריבוע הבורדו פשוט לא נראה על הנייבי. */ .pie__row::before{ content:'';flex:none; width:clamp(9px,.95vw,14px);aspect-ratio:1; background:var(--chalk); box-shadow:0 0 0 1px var(--chalk); transform:translateY(.06em); } .pie__row--mid::before{background:var(--accent-dark)} .pie__row--key::before{background:var(--accent)} /* המספרים תמיד chalk: בורדו כטקסט על נייבי הוא 1.29:1. קידוד הצבע חי בריבוע, לא בספרות. */ .pie__row b{ font-size:var(--fs-meta);font-weight:700; color:var(--chalk); font-variant-numeric:tabular-nums; /* הספרות מיושרות בטור */ } .pie__row span{ font-size:var(--fs-body);font-weight:400; color:var(--chalk); } /* ── משפך הסינון · "פסלנו עשרות" ──────────────────────────── שלושה טרפזים מלאים, chalk ← ורוד־עתיק ← בורדו, וקו chalk סביב שלושתם. המסגרת היא חוק של התרשים ולא טלאי על הרצועה הבורדו: הבורדו על נייבי הוא 1.29:1, ובלי מצע בהיר מתחתיו הוא נמוג. כשכל השלוש ממוסגרות, ה-chalk הוא המבנה. הצורה ב-SVG והטקסט ב-HTML מעליה. preserveAspectRatio="none" מותח את ה-viewBox לרוחב התיבה, ולכן שיעורי הגובה שבהם יושבות השורות (17/50/83%) נכונים בכל רוחב. non-scaling-stroke שומר על עובי הקו קבוע למרות המתיחה. */ /* בלי display:block כאן — .deep__fig הוא flex ממורכז, וזה מה שממרכז את המשפך אנכית בשטח הפנוי. */ .fun{position:relative;width:100%} .fun__shape{display:block;width:100%;height:auto} .fun__shape--narrow{display:none} /* גרסת המלל למובייל — משפט אחד קצר במקום שניים. display:none ולא visibility, כדי שקורא מסך ישמע גרסה אחת בלבד ולא את שתיהן. */ .fun__shape--mob{display:none} /* ‏.fun__row i היא (0,1,1) ומצהירה display:block, ולכן מחלקה לבדה (0,1,0) לא הייתה מכבה אותה — הצירוף כאן הוא (0,2,1). */ .fun__row i.fun__i--mob{display:none} .fun__shape path{ stroke:var(--chalk);stroke-width:1.5; vector-effect:non-scaling-stroke; } .fun__a{fill:var(--chalk)} .fun__b{fill:var(--accent-dark)} .fun__c{fill:var(--accent)} .fun__rows{position:absolute;inset:0} /* מרכז הרצועה כאחוז מגובה ה-viewBox. שתי הצורות מחזיקות את אותם שלושה אחוזים, ולכן שורה אחת משרתת את שתיהן. */ /* max-width = רוחב הקצה התחתון של הרצועה. הרצועה רק מצטמצמת כלפי מטה, ולכן טקסט שנכנס בקצה התחתון נכנס בכל גובה בתוכה. בלי זה השורה יורשת את רוחב ה-SVG המלא וגולשת מהטרפז החוצה. */ .fun__row{ position:absolute;inset-inline:0; margin-inline:auto; transform:translateY(-50%); padding-inline:clamp(10px,1.2vw,20px); text-align:center; color:var(--ink); } /* שלוש הרצועות באותו עובי אנכי בדיוק: 146 יחידות כל אחת. הגובה נקבע לפי הרצועה התובענית ביותר — השלישית, שהיא גם הצרה וגם בעלת המלל הארוך. */ .fun__row:nth-child(1){top:16%;max-width:90%} .fun__row:nth-child(2){top:50%;max-width:80%} .fun__row:nth-child(3){top:84%;max-width:71%} /* על הבורדו הטקסט הוא chalk — 10.46:1. נייבי עליו היה 2.5:1. */ .fun__row--key{color:var(--chalk)} /* ההיררכיה בין הכותרת לגוף מגיעה מגודל וממשקל בלבד, בלי שקיפות: נייבי מעומעם על הוורוד היה יורד ל-3.18:1 ונופל מ-AA. */ .fun__row b{ display:block; font-size:var(--fs-body);font-weight:600;line-height:1.3; color:inherit; } .fun__row i{ display:block;margin-top:.4em; font-style:normal; font-size:var(--fs-legal);font-weight:400;line-height:1.5; color:inherit; } /* בין שני משפטים אין מרווח נוסף — הם נקראים כשורות רצופות, בדיוק כמו שורה שנשברה מחוסר מקום. המרווח נשאר רק אחרי הכותרת, שהיא דרגה אחרת. */ .fun__row i + i{margin-top:0} /* מתחת ל-1200 אין עמודה ימנית להיצמד אליה, ולכן הכותרת נוחתת גבוה על המסך במקום בצד. הכל נשאר inset+width ולא padding: ‏.deep__slide הוא absolute, ואחוזים שלו נמדדים מול תיבת ה-padding של ההורה — כלומר padding על ההורה פשוט נעקף, והטקסט גולש מעבר לקצה. */ @media (max-width:1199px){ /* המסלול כאן מתחיל רק כשהבמה נתפסת, ולא מסך אחד קודם כמו בדסקטופ (ראה M.deepTop ב-motion.js), ולכן צריך מסך שלם יותר: 4.70 מסכי מסלול + מסך לבמה = 570svh. */ /* במובייל הזנב היה שני מסכים שלמים של גלילה אחרי שהשקף האחרון התייצב. נמדד — עכשיו הוא שווה ל-hold של השניים שלפניו, כלומר אותו זמן קריאה לשלושתם. */ .deep{min-height:372vh} /* הכותרת חוזרת לשתי שורות. display:none על br מבטל את השבירה, והרווח שלפניו ב-HTML הוא שמחליף אותה. */ .deep__lead br.wide{display:none} /* כאן דווקא כן יש נסיעה אנכית (מרכז → ראש המסך) ואין אופקית, ולכן המנוחה היא top ולא מרכוז. */ .deep__lead{ inset-block:14vh auto; height:auto; margin-block:0; inset-inline-start:8vw; max-width:84vw; } /* המקטע של רכישה הוא 2/12 מהציר, ובעמודה צרה זה 45px בלבד. דרגה אחת למטה בגופן נותנת לשם מקום להיכנס בו. */ /* המקטע הצר ביותר הוא 2/12 מ-84vw. השם חייב להיכנס בתוכו. */ /* המקטע הצר ביותר הוא 2/12 מ-84vw — 43px ב-320. "רכישה" ב-13px הוא 37, ולכן הריפוד הוא כל מה שיש לשחק איתו. */ .tl__seg{font-size:var(--fs-legal)} .tl__seg > span{padding-inline:1px} .tl{gap:4px} /* העמודה צרה מכדי להעמיד עוגה ומקרא זה לצד זה */ .deep__fig--pie{flex-direction:column;align-items:center} /* הטרפז מצטמצם ברוחב אמיתי, לא באחוזים, ולכן ברוחב מסך קטן הריפוד הוא מה שדוחק את השורה הצרה ביותר. */ .fun__row{padding-inline:4px} /* מרכזי הרצועות בצורה הצרה — viewBox אחר, ולכן אחוזים אחרים */ .fun__row:nth-child(1){top:16.3%;max-width:91%} .fun__row:nth-child(2){top:50%;max-width:82%} .fun__row:nth-child(3){top:83.7%;max-width:73%} .fun__shape--wide{display:none} .fun__shape--narrow{display:block} /* במובייל אין צדדים — הטקסטים חוזרים לרוחב מלא מתחת לכותרת, וה-top נכתב מ-JS. */ .deep__slides{ inset-inline-start:8vw; inset-inline-end:auto; width:84vw; } } /* ── 07ב · AFTER · "מה קורה אחרי שסיימנו את השיפוץ?" ───────── אותה מכניקה של .deep: במה נעוצה, כותרת שעולה מלמטה ונעצרת, ואחריה ארבעה שלבים שעולים אחד־אחד. ההבדל — כאן הם נערמים ונשארים, ולא מתחלפים. בדסקטופ הם שורה אחת. ב-RTL הפריט הראשון ב-DOM יושב מימין, ולכן סדר ה-DOM הוא גם סדר הזמן וגם סדר הקריאה. */ .after{ position:relative;z-index:3; /* נגזר מהמסלול: העלייה של הכותרת + ארבעת השלבים + זנב קריאה של ~0.55 מסך, כמו ב-.deep. נמדד, לא הוקלד. */ /* כולל את טיפוס הגבעה בסוף: מסך מלא ועוד רדיוס הקימור, בקצב 1:1 — ולכן הסקשן ארוך במסך שלם מכפי שהיה. */ min-height:388vh; background:var(--ink);color:var(--chalk); margin-top:-1px; } .after__stage{position:sticky;top:0;height:100vh;overflow:hidden} .after__lead{ position:absolute;z-index:2; inset-inline:0; top:16vh; text-align:center; font-size:var(--fs-statement);font-weight:700;line-height:var(--lh-h1); color:var(--chalk); /* בלי אנימציה. היא absolute בתוך במה נעוצה, ולכן היא פשוט נגללת מלמטה יחד עם הסקשן עד שהבמה נתפסת — וזה כל האפקט. */ pointer-events:none; } .after__steps{ position:absolute;z-index:2; inset-inline:5vw; top:50%;transform:translateY(-50%); display:flex;align-items:flex-start; gap:clamp(20px,2.6vw,46px); pointer-events:none; } /* בדסקטופ אין קו — ארבע עמודות ממורכזות, כל אחת במקומה. הקו חוזר רק בערימה המוביילית, שם הוא מה שקושר את השורות. */ .after__step{ flex:1 1 0;min-width:0; position:relative; text-align:center; opacity:0;will-change:transform,opacity; } .after__step h3{ font-size:var(--fs-meta);font-weight:600;line-height:var(--lh-title); color:var(--chalk); } .after__step p{ margin-top:.5em; font-size:var(--fs-legal);font-weight:400;line-height:1.6; color:var(--chalk); } @media (max-width:1199px){ /* במובייל השלב נכנס משמאל ולא מלמטה, והמרחק גדול בהרבה (רוחב הערימה במקום גובה השלב) — ולכן המסלול ארוך יותר. */ /* ארוך מהדסקטופ: הטיפוס הוא מסך מלא, והמסך כאן גבוה יותר ביחס לרוחבו — ולכן גם המרחק שהשלבים נוסעים גדול יותר. */ /* ‏vh ולא svh — חייב להיות אותה יחידה כמו .work{margin-top:-86vh} שמושך את עצמו לתוך הסקשן הזה. ב-iOS‏ svh קטן מ-vh, ולכן הסקשן התקצר ב-479px בזמן שהמשיכה נשארה 726px מלאים: ‏.work (z-4) טיפס מעל .after (z-3, יוצר stacking context שכולא בתוכו את z-5 של הגבעה) וכיסה את הבית לגמרי. נמדד: 95 מתוך 95 הפריימים שבהם הבית על המסך היו מכוסים. היכן ש-svh שווה ל-vh — דסקטופ, אמולציה — זה no-op גמור. */ .after{min-height:483vh} .after__lead{top:12vh;font-size:var(--fs-h1)} /* אין שורה — ערימה. הקו האנכי נשאר בקצה הקריאה של כל שלב. */ .after__steps{ inset-inline:8vw; flex-direction:column;align-items:stretch; gap:clamp(18px,3.4vw,34px); } /* קו אנכי בקצה הקריאה של כל שלב — אותה מחווה של .values::before ושל .deep__text::before, בגרסה מוקטנת. */ .after__step{ flex:none; text-align:start; padding-inline-start:clamp(14px,3.2vw,24px); } .after__step::before{ content:'';position:absolute; inset-block:2px auto;height:calc(100% - 4px); inset-inline-end:0; width:2px;background:var(--chalk); } .after__step h3{font-size:var(--fs-body)} } /* ── מובייל · הפס של השלב עובר לצד ימין ────────────────────── ב-RTL‏ inset-inline-end הוא שמאל, ולכן הפס צויר בצד המנוגד ל-padding-inline-start ששמור לו — ובצד המנוגד לשתי האחיות שלו, .values::before ו-.deep__text::before, שיושבות בצד תחילת הקריאה. כאן הוא חוזר לשם. ‏inset-inline-end:auto חובה: בלעדיו שני הקצוות מוגדרים יחד עם width והדפדפן מתעלם מאחד מהם לפי כיוון הכתיבה. */ @media (max-width:767px){ .after__step::before{inset-inline-start:0;inset-inline-end:auto} } /* ── הגבעה שסוגרת את הנייבי ────────────────────────────────── אותו רדיוס בדיוק של .hero__hill, רק שכאן ה-bone הוא שעולה לתוך הנייבי ולא להפך. הגובה = הרדיוס עצמו, כי כל מה שמתחת לקימור ממילא bone — זה כבר סקשן העסקאות. */ /* מתחילה בדיוק מתחת לקצה התחתון של הבמה, ומטפסת מעלה ב-JS עד שהיא מכסה את המסך. הגובה נדיב כדי שלא ייחשף שוליים בטיפוס. z-index גבוה מהמלל — היא מכסה אותו במקום שהוא ידהה. */ .after__hill{ position:absolute;z-index:5; inset-inline:-8vw; top:100%; height:200vh; background:var(--bone); border-radius:50% 50% 0 0 / clamp(60px,11vw,180px) clamp(60px,11vw,180px) 0 0; will-change:transform; pointer-events:none; } /* הבית יושב על הפסגה. גדול פי שניים מזה שבהירו — יחס 260:124 מול 130:108, כלומר גם רחב יותר וגם נמוך יותר: אחוזה ולא בית. */ .after__house{ position:absolute;left:50%;bottom:100%; width:var(--house-lg);height:auto; transform:translateX(-50%); fill:var(--bone); /* תחתית הבית ישרה והגבעה מעוגלת, ולכן ככל שמתרחקים מהמרכז נפער מתחתיו חריץ נייבי. הפער גדל ככל שהבית רחב יותר ביחס לגבעה — נמדד 4.6px ב-1280, 9.8 ב-375 ו-14 ב-320. 16 מכסה את כולם, והשקיעה עצמה בלתי נראית: אותו צבע בדיוק. */ margin-bottom:-16px; } @media (prefers-reduced-motion:reduce){ .after{min-height:0;padding:14% 8% 80px} .after__stage{position:static;height:auto;overflow:visible} .after__lead{position:static;opacity:1!important;transform:none!important; margin-bottom:var(--s-5);text-align:start} .after__steps{position:static;transform:none;flex-direction:column;align-items:stretch} .after__step{opacity:1!important;transform:none!important} } /* ── 08 · WORK ─────────────────────────────────────────────── */ /* מצע Paper — הנייר של האתר. לפי סעיף הצבעים בקובץ העיצוב --bone הוא "מצע העמוד", ואילו --white שמור לטקסט על מדיה בלבד (וזה בדיוק מה ש-.card__addr משתמש בו). על Paper כל ברירות המחדל נכונות מעצמן: הכפתור ink על שקוף, ה-focus בורדו. לכן אין כאן שום override — הם נמחקו. */ /* הריפוד העליון קטן מהתחתון: מעליו יושבת הגבעה, שכבר נותנת את כל האוויר שצריך. ריפוד סימטרי כאן היה מוסיף עוד רצועה לבנה ריקה בין הבית לעסקה הראשונה. */ /* margin-top שלילי: הבמה של הסקשן שמעל היא מסך שלם של bone שצריך להיגלל החוצה, וכל אותו מסך הוא לבן ריק. מושכים את סקשן העסקאות פנימה כדי שהכותרת תופיע כבר בזמן שהבמה מתפנה, במקום להמתין שהיא תסתיים. z-index גבוה מ-.after (שהוא 3) — אחרת הבמה מציירת מעליו. האזור שבו הם חופפים הוא bone על bone, ולכן החפיפה עצמה בלתי נראית; מה שנראה הוא רק שהכותרת מגיעה מוקדם יותר. */ .work{background:var(--bone);color:var(--ink); position:relative;z-index:4; /* מוטיב מיקום הכותרות באתר: .after__lead ב-16vh מראש הבמה, .deep__slides ב-18vh. -86vh מנחית את "העסקאות שלנו" על ~21vh — מעט מתחת למוטיב, לבקשת ריווח גדול יותר מהבית שמעליה. נמדד, לא הוקלד. */ margin-top:-86vh; padding-block:clamp(12px,1.4vw,24px) clamp(60px,8vw,140px)} .work__inner{width:var(--w-grid);max-width:100%;margin-inline:auto} /* דרגת Display מסעיף 4ב בקובץ העיצוב: --fs-process, משקל 700, גובה שורה 1.0 — הדרגה היחידה בסולם עם lh כזה. זהה בדיוק ל-.page-head__title שבעמוד העסקאות. */ .work__title{ font-size:var(--fs-process);font-weight:700;line-height:var(--lh-tight); color:var(--ink); text-align:center; margin-bottom:clamp(46px,5.6vw,98px); } /* רשת אחידה: שני כרטיסים בשורה, כולם באותה מידה. קודם כל פריט 5n+1 נפרש לרוחב מלא ושבר את המקצב — עכשיו אין חריגים, ולכן גם אין כלל nth-child בשום מקום בסקשן. */ .grid{display:flex;flex-wrap:wrap;gap:3.2%} .card{width:48.4%;margin-bottom:3.2%} .card__link{ position:relative;display:block;overflow:hidden; isolation:isolate; } /* התמונה מגיעה מאדמין הפאנל (thumbnail_url). היא **לא זזה** בריחוף — אין עליה transform בשום מצב; כל מה שקורה בריחוף הוא הפייד של הכהות והכתובת. */ .card__media{ display:block;width:100%;height:23vw; object-fit:cover;object-position:center; /* מצע לרגע שלפני שהתמונה נטענת. chalk ולא אפור כהה — הסקשן עומד על Paper, ומלבן כהה היה בולט יותר מהתמונה שהוא אמור להחזיק במקומה. */ background:var(--chalk); } /* שכבת הקריאות — בלעדיה הכתובת הלבנה יושבת על תמונה שרירותית */ .card__scrim{ position:absolute;inset:0; background:linear-gradient(0deg,rgba(var(--ink-rgb),.78),rgba(var(--ink-rgb),0) 62%); opacity:0;transition:opacity var(--t-slow) var(--ease); } .card__link:hover .card__scrim, .card__link:focus-visible .card__scrim{opacity:1} /* כתובת הנכס — בפינה השמאלית התחתונה, בדיוק במקום שבו ישב כפתור "לצפייה". טקסט חשוף: בלי גלולה, בלי רקע, בלי מסגרת. בצד ימין לא יושב כלום. */ /* left ולא inset-inline-end: על האלמנט הזה יש dir="ltr" (הכתובת באנגלית), ותכונות לוגיות נגזרות מכיוון האלמנט **עצמו** — כך שה-inline-end שלו הוא ימין ולא שמאל. כאן הדרישה פיזית. */ .card__addr{ position:absolute;z-index:2; bottom:1.7vw;left:1.7vw; max-width:70%; color:var(--white); font-size:var(--fs-meta);font-weight:500;line-height:var(--lh-title); letter-spacing:.01em; text-align:left; /* הכתובת אנגלית — LTR גם בתוך דף RTL */ opacity:0;transition:opacity var(--t-fast) var(--ease); pointer-events:none; } .card__link:hover .card__addr, .card__link:focus-visible .card__addr{opacity:1;transition-delay:66.7ms} .work__cta{display:flex;justify-content:center;padding-top:5%} /* ── כותרת עמוד פנימי ────────────────────────────────────── מצע Paper כמו כל העמוד — הרצועה האדומה ירדה, ולכן ההאדר שוב יושב על בהיר וצבעי ברירת המחדל שלו נכונים מעצמם (בגלל זה גם כללי head-on-accent נמחקו: אין להם צרכן). ה-padding העליון מפנה מקום לגלולת ה-header שצפה מעליה. */ /* כל הגיאומטריה כאן, ולא ב-.has-bg. הסיבה: התצלום מגיע רק אחרי המשיכה מהאדמין, ואם הגובה, הריפוד והמשיכה של הבורר תלויים בו — העמוד נבנה פעם אחת, ואז קופץ למידות אחרות כשהתמונה נוחתת. עכשיו המידות סופיות כבר בציור הראשון, ומה שמשתנה אחר כך הוא צבע ותמונה בלבד. */ .page-head{ position:relative;overflow:hidden;isolation:isolate; background:var(--bone);color:var(--ink); text-align:center; /* הרצועה הייתה 2.22:1 — רחבה יותר מכל אחת מ-148 התמונות שבאדמין (הרחבה ביותר היא 1.50). כל תמונה נחתכה קשה. הגובה נגזר עכשיו מהרוחב ולכן היחס מתון יותר (~1.9:1), ומוגבל ב-82vh כדי שהוא לא יבלע מסך נמוך. */ min-height:min(clamp(460px,52vw,720px), 82vh); display:flex;align-items:center;justify-content:center; padding-block:clamp(150px,17vw,270px) calc(clamp(50px,6vw,110px) + var(--bar-inset)); } /* הבורר נשאר אח של הרצועה ולא ילד שלה — .page-head הוא overflow:hidden, וילד sticky בתוכו לא היה יכול להיצמד להאדר בגלילה. במקום זה הוא נמשך מעלה לתוך התצלום, וכל מה שאחריו זז איתו — ולכן הריפוד למעלה מבטל את ההזזה. */ .page-head + .deals{margin-top:calc(var(--bar-inset) * -1)} /* עם תצלום מאחור הרצועה צריכה גובה אמיתי, אחרת התמונה נחתכת לפס. בלי תצלום היא נשארת בדיוק כפי שהייתה. */ .page-head__title{ position:relative;z-index:2; font-size:var(--fs-process);font-weight:700;line-height:var(--lh-tight); color:var(--ink); width:var(--w-grid);max-width:100%;margin-inline:auto; } /* ── תצלום הנכס ברקע ────────────────────────────────────── שכבה לכל עסקה, מוערמות. רק ה-opacity מתחלף, ולכן ההחלפה מצליבה. אותה עקומה ואותו משך של מסילת הפאנלים, כדי ששתי התנועות ייקראו כתנועה אחת. */ .page-head__media{position:absolute;inset:0;z-index:0} .page-head__bg{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover;object-position:center; opacity:0; transition:opacity .6s cubic-bezier(.65,0,.35,1); } .page-head__bg.is-current{opacity:1} /* שכבת הקריאות. נגזרת מ---ink-rgb ולא משחור נייטרלי (סעיף 5, כלל 4). העוצמה נקבעה ממדידה של התצלומים עצמם ולא בהערכה. דגמתי את הפיקסלים של שלושתם באזור הכותרת: הבהירות הממוצעת שם היא 0.12–0.18, כלומר הם כהים מלכתחילה. שטיפה של ‎.68 נדרשה רק כדי לעמוד מול הפיקסל **הבהיר ביותר** בפריים — וזה מה שהשטיח את התמונה לגמרי. לכן: גרדיאנט מתון שנפתח באמצע, מתחזק בקצה העליון (הניווט) ובתחתון (הבורר), ועל הכותרת עצמה הילה. מול הממוצע שנמדד ‎chalk יוצא 6.7:1 באמצע ו-8.4:1 בקצה. */ .page-head::before{ content:'';position:absolute;inset:0;z-index:1; opacity:0;transition:opacity .6s var(--ease); background:linear-gradient(to bottom, rgba(var(--ink-rgb),.62) 0%, rgba(var(--ink-rgb),.42) 26%, rgba(var(--ink-rgb),.42) 66%, rgba(var(--ink-rgb),.66) 100%); } /* ההילה היא מה שמחזיק את הכותרת גם כשגליף בודד נופל על חלון או על שמיים — הנקודות הבהירות שהשטיפה המתונה לא מכסה. */ .page-head.has-bg::before{opacity:1} .page-head__title{transition:color .6s var(--ease)} .page-head.has-bg .page-head__title{ color:var(--chalk); text-shadow:0 1px 2px rgba(var(--ink-rgb),.55), 0 2px 22px rgba(var(--ink-rgb),.75); } /* בורדו על מצע כהה הוא 1.3:1 — אסור. הסמן עובר לוורוד־עתיק. */ .page-head.has-bg .caret{background:var(--accent-dark)} /* ── ההאדר כשהוא צף מעל התצלום ───────────────────────────── אותו פתרון של הפוטר: על מצע כהה צמד הלוגו מוחלף והטקסט עובר ל-chalk. רק ב-:not(.is-stuck) — כשהוא נדבק הוא מקבל גלולת chalk וצבעי המקור נכונים מעצמם. ורק ב-:not(.menu-open), כי התפריט הפתוח בהיר. */ body.head-on-media:not(.menu-open) .site-header:not(.is-stuck){ /* גוף המגן עובר ל-chalk — הוא הצורה הגדולה וחייב להיקרא. קו הבתים **נשאר בורדו**: סעיף 5 כלל 2 נותן ללוגו חריג מפורש, כי WCAG פוטר לוגוטייפ מניגודיות (1.4.3, 1.4.11) ו-1.3:1 מודד בהירות בלבד — אדום מול כחול נבדלים בגוון, ולכן הקו נקרא בפועל. (שים לב: סעיף 2 בקובץ אומר את ההפך. ראה ההערה למשתמש.) */ --logo-ink:var(--chalk); } body.head-on-media:not(.menu-open) .site-header:not(.is-stuck) .menu__list a{ color:rgba(var(--chalk-rgb),.7); } body.head-on-media:not(.menu-open) .site-header:not(.is-stuck) .menu__list a.is-current{ color:var(--chalk); } body.head-on-media:not(.menu-open) .site-header:not(.is-stuck) .nav-toggle{ color:var(--chalk); } /* ── בורר העסקאות + התצוגה ───────────────────────────────── ── הבר ── נצמד מתחת ל-header. ה-top לא מוקלד: motion.js מודד את גובה גלולת ה-header בפועל ומזין --bar-top, ולכן "מרווח קל" נשאר קל גם כשגודל הלוגו או ה-padding משתנים עם רוחב המסך. הרוחב והרקע מקבלים **בדיוק** את הערכים והתזמונים של ההאדר (‏.header-shell / .header-bar). is-stuck מוחל על שניהם מאותו סף גלילה ב-updateHeader, ולכן הם מתכווצים כגוף אחד. */ .dealbar{ position:sticky; top:var(--bar-top,96px); z-index:50; /* מתחת להאדר (99), מעל התוכן */ pointer-events:none; /* רק הגלולה עצמה לחיצה */ } /* ה-shell רק מונע מהגלולה לגעת בקצה המסך. הרוחב שלה נקבע ע"י התוכן ולא על ידו. */ .dealbar__shell{ padding-inline:clamp(16px,4vw,60px); } /* max-content — הגלולה בדיוק ברוחב הכפתורים, בלי שטח מת בצדדים. היא יוצאת קצרה מגלולת ה-header, וזה בסדר. wrap כדי שבמסך צר היא תישבר לשתי שורות במקום לגלוש. */ .dealbar__bar{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap; width:max-content;max-width:100%;margin-inline:auto; gap:clamp(4px,.5vw,10px); padding:clamp(5px,.5vw,9px); border-radius:var(--r-pill); background:transparent; transition:background .16s var(--ease-out), padding .5s cubic-bezier(.22,1,.36,1) .06s; pointer-events:auto; } /* רק הרקע מגיע עם ההצמדה. הרוחב כבר לא מונפש — הגלולה נמדדת לפי הכפתורים בכל מצב. */ .dealbar.is-stuck .dealbar__bar{background:var(--pill)} .dealbar__btn{ flex:0 1 auto;min-width:0; border:0;border-radius:var(--r-pill); background:transparent;color:var(--ink); font-family:inherit;font-size:var(--fs-nav);font-weight:600; line-height:var(--lh-tight); padding:.85em 1.5em; cursor:pointer; white-space:nowrap; /* הכתובות באנגלית — בלי זה הספרה שבתחילת השם קופצת לסוף */ direction:ltr; transition:background var(--t-base) var(--ease), color var(--t-base) var(--ease); } /* בדסקטופ השם המלא; במובייל מספר הבית בלבד, כדי שהגלולה תישאר שורה אחת. ראה tabButton ב-deals.js. */ .dealbar__num{display:none} .dealbar__btn:hover{background:rgba(var(--ink-rgb),.07)} /* הנבחר — מילוי מלא. chalk על ink הוא 13.4:1. */ .dealbar__btn.is-current{background:var(--ink);color:var(--chalk)} /* הבורר יושב עכשיו על התצלום כשהעמוד בראשו. ink על מצע כהה לא נקרא, ולכן הטקסט עובר ל-chalk והנבחר מתהפך למילוי chalk עם טקסט ink — 15.5:1, ובולט על מצע כהה הרבה יותר ממילוי ink. רק ב-:not(.is-stuck): ברגע שהוא נדבק הוא מקבל גלולת chalk ואז צבעי המקור נכונים מעצמם. */ body.head-on-media .dealbar:not(.is-stuck) .dealbar__btn{color:var(--chalk)} body.head-on-media .dealbar:not(.is-stuck) .dealbar__btn:hover{ background:rgba(var(--chalk-rgb),.16); } body.head-on-media .dealbar:not(.is-stuck) .dealbar__btn.is-current{ background:var(--chalk);color:var(--ink); } /* ── התצוגה ── מסילה אופקית אחת. התמונה והמלל יושבים באותו pane, ולכן הם נעים כמקשה אחת — אין כאן שתי אנימציות שצריך לסנכרן. */ .dealview{overflow:hidden} .dealview__track{ display:flex; /* --i הוא האינדקס הנבחר; ה-JS כותב רק אותו. חיובי ולא שלילי כי המסילה RTL — הפאנל הבא יושב משמאל. */ transform:translate3d(calc(var(--i,0) * 100%),0,0); /* עקומה סימטרית ולא ה-ease-out של ההאדר. שם היא נכונה — מרחק קצר, ותחושת "נסגר מהר". כאן המרחק הוא מסך שלם, ועם (.22,1,.36,1) שיא המהירות הוא ~9600px/s **בפריים הראשון**: התוכן קופץ ~160px בין פריים לפריים ומריחה. (.65,0,.35,1) יוצא מהמנוחה, שיא ~6700px/s באמצע. */ transition:transform .6s cubic-bezier(.65,0,.35,1); will-change:transform; } .dealpane{ width:100%;flex:none; padding-block:clamp(28px,4vw,64px) clamp(50px,7vw,120px); } .dealpane__img{ display:block; width:var(--w-grid);max-width:100%;margin-inline:auto; aspect-ratio:16/9;object-fit:cover;object-position:center; background:var(--chalk); } .dealpane__body{ width:var(--w-grid);max-width:100%;margin-inline:auto; padding-top:clamp(20px,2.4vw,44px); } /* dir="ltr" נחוץ כדי שהמספר שבתחילת הכתובת לא יקפוץ לסוף, אבל הוא גם הופך את text-align:start לשמאל — והכתובת הייתה נוחתת בצד ההפוך מהפסקה שהיא כותרת שלה. right פיזי מיישר את שתיהן לאותו קו. */ .dealpane__addr{ font-size:var(--fs-value);font-weight:600;line-height:var(--lh-title); color:var(--ink); text-align:right; margin-bottom:var(--s-2); } .dealpane__text{ font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body); color:var(--ink); max-width:70ch; } @media (max-width:767px){ .dealbar__bar{gap:2px;padding:4px} .dealbar__btn{font-size:13px;padding:.8em 1em} .dealpane__img{aspect-ratio:4/3} } /* ── נתוני העסקה ─────────────────────────────────────────── דסקטופ־פירסט: הבסיס הוא שלוש עמודות, והברייקפוינט מצמצם משם — ולא להפך. ארבעה מוטיבים נלקחו מהאתר עצמו, כדי שהבלוק ידבר באותה שפה: • המפריד הוא הקו של .values — 2px, ומתקצר משני הקצוות • התווית והערך נצמדים, כמו .mapfig__eyebrow ו-.mapfig__place • רצועת ההון בקצוות גלולה, כמו ההאדר והבורר • סמני המקרא הם מקפים אנכיים ולא ריבועים — משפחת ה-.caret הגדלים מוצמדים לטוקנים בלבד. אין כאן דרגת ביניים מומצאת. */ .dealfacts{margin-top:clamp(34px,4vw,64px)} .dealfacts__title{ /* דרגת "כותרת משנה", כמו .values h3 ו-.deep__slide h3. במובייל היא יורדת לדרגת eyebrow ומתעמעמת — ראו הבלוק שב-max-width:767px. */ font-size:var(--fs-value);font-weight:600;line-height:var(--lh-title); color:var(--ink); margin-bottom:clamp(16px,1.8vw,26px); } .factrow{display:grid;grid-template-columns:repeat(3,1fr)} .fact{position:relative;padding-inline:clamp(20px,2.6vw,38px)} .fact:first-child{padding-inline-start:0} .fact:last-child{padding-inline-end:0} /* אותה מחווה של .values::before — הקו לא נוגע בקצוות */ .fact + .fact::before{ content:'';position:absolute; inset-block:5%; inset-inline-start:0; width:2px;background:rgba(var(--ink-rgb),.15); } .fact__label{ font-size:var(--fs-body);font-weight:500;line-height:var(--lh-tight); color:rgba(var(--ink-rgb),.62); margin-bottom:clamp(2px,.35vw,7px); } .fact__body{display:flex;align-items:baseline;gap:.45em;flex-wrap:wrap} .fact__val{ font-size:var(--fs-value);font-weight:600;line-height:var(--lh-title); font-variant-numeric:tabular-nums; } /* המבטא היחיד בבלוק. בורדו על Paper — 12:1. */ .fact__val--hero{color:var(--accent)} /* דרגה שלמה מתחת לערך, לא שבר ממנו. --fs-value הוא "כותרת משנה" ו---fs-eyebrow הוא הדרגה שמתחתיה בסולם; היחס ביניהן 1.33 ונופל בטווח 1.3–1.5 שהסולם מגדיר. calc(.58×) שהיה כאן ייצר גודל שלא קיים בסולם, וזה בדיוק מה שכלל 1 בסעיף 4ב אוסר. */ .fact__was{ font-size:var(--fs-eyebrow); color:rgba(var(--ink-rgb),.4); text-decoration:line-through;text-decoration-thickness:1px; } .fact__arrow{font-size:var(--fs-eyebrow);color:rgba(var(--ink-rgb),.4)} .fact__flat{font-size:var(--fs-legal);color:rgba(var(--ink-rgb),.45)} .fact__sub{ flex-basis:100%; font-size:var(--fs-legal);line-height:var(--lh-body); color:rgba(var(--ink-rgb),.5); } .cap{margin-top:clamp(24px,2.6vw,40px)} .cap__bar{ height:6px;border-radius:var(--r-pill); background:rgba(var(--ink-rgb),.14); display:flex;overflow:hidden; } .cap__bar span{background:var(--accent);border-radius:var(--r-pill)} /* שורה אחת: סימן · שם · סכום · אחוז. הריווח במרווחים מפורשים ולא ב-gap אחיד, כי בין השם לסכום יושב מפריד ולא רווח שלם. במובייל זה נהיה שלוש שורות עם האחוז מוביל — ראו את הבלוק שב-max-width:767px. */ .cap__legend{display:flex;flex-wrap:wrap;gap:8px clamp(20px,2.5vw,40px);margin-top:12px} .cap__item{ display:flex;align-items:center; font-size:var(--fs-body);line-height:var(--lh-body); color:rgba(var(--ink-rgb),.72); font-variant-numeric:tabular-nums; } .cap__item p{margin:0} .cap__name::after{content:'\00a0\00b7\00a0'} .cap__sum{margin-inline-end:9px} .cap__pct{font-weight:600;color:var(--ink)} .cap__mark{width:2px;height:14px;flex:none;margin-inline-end:9px} .cap__mark--inv{background:var(--accent)} .cap__mark--firm{background:rgba(var(--ink-rgb),.16)} /* ── 08ב · TEAM · "בואו נכיר" ──────────────────────────────── */ .team{ background:var(--bone);color:var(--ink);padding-block:0 clamp(70px,9vw,150px); /* ── המצע והטבעת של הפורטרטים ──────────────────────────── התמונות הן PNG שקוף — הדמות גזורה, בלי רקע משלה. לכן המצע והטבעת הם CSS ולא פיקסלים: הם נשארים חדים בכל DPR, ומעבר בין הסכמות הוא שינוי של שתי שורות כאן ותו לא. המצע הוא Chalk עם טבעת Ink, והתמונות הן שחור־לבן מלא בלי שום עיבוד טונלי — השחור נשאר על 1-3. ── למה לא נייבי ──────────────────────────────────────── מצע כהה מחייב להרים את השחורים, אחרת בגד שחור נבלע בו (הרצפה שם הייתה 1.00:1 — זהה למצע). אבל הרמה כזו היא גלובלית: היא מרימה גם את האישונים, הגבות והשיער, שהם מה שנותן לפורטרט את החוד. נמדד באזור הפנים: הפיקסל הכהה ביותר קפץ מ-2 ל-67, והממוצע עלה ב-35 בכל ארבע התמונות. זו "שכבה אפורה" על הפנים, וזו הסיבה שירדנו מהנייבי. (סטיית תקן טונלית לא תופסת את זה — הזזה אחידה לא משנה אותה. צריך למדוד רצפה וממוצע, לא רק רוחב טווח.) ── למה הטבעת חיצונית כאן ─────────────────────────────── Chalk ‎#E8E5DF מול Bone ‎#F7F5F1 הוא 1.07:1 — העיגול כמעט מתמזג עם הדף. הטבעת היא מה שמפריד אותו, ולכן היא חייבת לשבת על השפה. על מצע כהה זה היה הפוך: שם טבעת בהירה על השפה בלתי נראית וחייבת להיכנס פנימה. */ --photo-disc:var(--chalk); --photo-ring:var(--ink); --photo-ring-w:1px; } .team__inner{width:var(--w-grid);max-width:100%;margin-inline:auto} /* דרגת "גוף מוביל" מסעיף 4ב. המידה מוגבלת בתווים ולא ב-vw — פסקה ממורכזת שנמתחת על 90vw מפסיקה להיות קריאה. */ .team__lead{ font-size:var(--fs-lead);font-weight:400;line-height:var(--lh-body); max-width:58ch;margin-inline:auto; text-align:center; /* הפסקה יורדת — מרווח נשימה בינה לבין הכותרת המוקלדת. יושב כאן ולא ב-.page-head, שהוא רכיב משותף לכל התתי-עמודים. */ margin-top:clamp(28px,3.6vw,68px); margin-bottom:clamp(60px,7vw,130px); } /* הפסקה היא עכשיו מכולה של כמה פסקאות. המרווח ביניהן מוגדר כאן ולא נשען על ברירת המחדל של הדפדפן, כי טקסט ממורכז בלי הזחה צריך הפרדה מפורשת כדי שייקרא כפסקה חדשה. */ .team__lead > p{margin:0} .team__lead > p + p{margin-top:clamp(16px,1.5vw,26px)} /* ── הקשת ────────────────────────────────────────────────── "קערה": העיגולים החיצוניים גבוהים והפנימיים יורדים. העומק לא מוקלד לכל אחד — הוא נגזר מפרבולה ‏y = A·(1−(2x−1)²) על ארבע נקודות ב-0, ⅓, ⅔, 1: x=0 → 0 x=⅓ → 0.889A x=1 → 0 x=⅔ → 0.889A עם ארבעה פריטים שני האמצעיים יוצאים באותו עומק. זו הגיאומטריה של פרבולה סימטרית, לא קיצור דרך. */ .team__arc{ /* הועמק כדי שהקערה תיקרא כקערה ולא כשורה עם סטייה קלה. 56px → 100px של ירידה בפועל (העומק × 0.889). */ --arc-depth:clamp(46px,7.8vw,146px); display:flex;justify-content:center;align-items:flex-start; gap:clamp(18px,2.6vw,52px); } .team__member{ flex:1 1 0;min-width:0; max-width:clamp(150px,17vw,268px); text-align:center; } /* העומק עובר דרך --drop ולא דרך transform ישיר. הסיבה מעשית: ‏.team__member:nth-child(2) הוא (0,2,0) ואילו ‏.team__member הוא (0,1,0), ולכן איפוס במדיה קווארי לא היה גובר עליו — הפריט השני נשאר תלוי גם במובייל. עם משתנה, כל הכללים באותה סגוליות והמאוחר פשוט מנצח. 0.889 = 1 − (⅓)², המקדם של הנקודות הפנימיות על הפרבולה. */ .team__member{transform:translateY(var(--drop,0px))} .team__member:nth-child(2){--drop:calc(var(--arc-depth) * .889)} .team__member:nth-child(3){--drop:calc(var(--arc-depth) * .889)} /* חצי מרוחב העמודה. העמודה נשארת ברוחבה כדי שהמלל שמתחת יישמר במידה קריאה — רק העיגול מתכווץ, וממורכז בתוכה. */ .team__photo{ display:block;width:50%;height:auto;margin-inline:auto; aspect-ratio:1;border-radius:50%; object-fit:cover;object-position:center; /* border ולא box-shadow: הטבעת חיצונית ויושבת על השפה. box-sizing מוודא שהיא נחתכת מתוך המידה ולא נוספת לה — אחרת העיגול גדל ב-2px והקשת מאבדת יישור מול שאר הפריטים. */ box-sizing:border-box; background:var(--photo-disc); border:var(--photo-ring-w) solid var(--photo-ring); margin-bottom:clamp(14px,1.5vw,26px); } /* ── המלל שמתחת לעיגול ───────────────────────────────────── מינימלי בכוונה. שלוש הדרגות יורדות, כל אחת לתפקיד שלה בטבלה שבסעיף 4ב, בלי להמציא גדלים באמצע (כלל 1): שם 2.0vw ("כותרת משנה") → 1.25vw ("כותרת כרטיס") גיל 1.0vw ("גוף") → 0.9vw ("משפטי") משפט 1.0vw ("גוף") → נשאר, אבל מעומעם יותר ההיררכיה מגיעה מגודל, ממשקל ומצבע בלבד — לא מריווח אותיות ולא מ-uppercase, שאסורים בכל דרגה (כלל 3). */ /* "כותרת כרטיס": 18px בדסקטופ ובמובייל כאחד — 1.25vw נותן 18 ב-1440 ו-4.8vw נותן 18 ב-375, ולכן clamp אחד מכסה את כל הטווח. ‏--fs-card הקיים הוא 2.5vw ואינו מממש את השורה הזו, ושלושה רכיבים אחרים תלויים בו — לכן מוצהר כאן. */ .team__name{ font-size:clamp(18px,1.25vw,24px);font-weight:600;line-height:var(--lh-title); color:var(--ink); } .team__age{ font-size:var(--fs-legal);font-weight:400;line-height:var(--lh-tight); /* .62 ולא פחות: ב-.5 זה יוצא 3.23:1 על Paper ונופל מ-AA. זו הרצפה של "שקט" כאן, לא בחירה אסתטית. */ color:rgba(var(--ink-rgb),.62); margin-top:clamp(3px,.4vw,7px); font-variant-numeric:tabular-nums; } .team__bio{ font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body); color:rgba(var(--ink-rgb),.62); margin-top:clamp(8px,.9vw,16px); /* מידה צרה יותר — משפט קצר לא צריך את כל רוחב העמודה */ max-width:26ch;margin-inline:auto; } /* מובייל: 2×2 שטוח. ארבעה עיגולים בשורה לא נכנסים ב-375, והקשת היא מחווה של דסקטופ — לזייף אותה בשתי שורות רק מוסיף רעש, כי הפריטים ממילא כבר לא על ציר אחד. כל --drop מתאפס במפורש, כל אחד בסגוליות של אחיו. */ @media (max-width:767px){ .team__arc{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(34px,8vw,60px) clamp(16px,4vw,30px); align-items:start; } .team__member{max-width:none} .team__member:nth-child(2){--drop:0px} .team__member:nth-child(3){--drop:0px} /* דרגת "גוף" במובייל היא 14px לפי הטבלה בסעיף 4ב, אבל ‏--fs-body הגלובלי הוא 16px — אותו פער שכבר תיקנתי מקומית בפוטר. מצהירים כאן במפורש ולא נוגעים בטוקן, כי ההירו, הערכים והכרטיסים תלויים בו. ⚠ זה המקום השני. אם זה יחזור — כדאי ליישר את הטוקן עצמו לסולם, כמהלך נפרד ומדוד. */ .team__bio{font-size:14px} /* העיגול מתרחב מעט ביחס לעמודה — 50% על טור צר במובייל היה יורד מתחת ל-80px והתמונה הייתה נהיית אילוסטרציה. */ .team__photo{width:68%} } /* ── 09 · BUTTON ───────────────────────────────────────────── */ .btn{ /* ── למה המרווח יושב ב-gap ולא בריפוד ───────────────────── במקור (סעיף 6.1 ב-liron-david-brand-teardown.md) הריפוד הוא ‎.5em 3em .5em 1.1em, ושם 3em הוא **הצד של החץ**: האתר ההוא מצייר את החץ כ-background-position בקצה, ולכן הריפוד רק שומר לו מקום שהטקסט לא ידרוס. אצלנו החץ הוא SVG ממשי בתוך ה-flex, ולכן ריפוד לא שומר לו מקום — הוא דוחף את כל התוכן. העתקה מילולית של אותם 3em דחסה את החץ לקצה והשאירה חור ריק לפני המילה. ולכן: ריפוד סימטרי משני הצדדים, וכל המרווח עובר ל-gap. המילה נצמדת לתחילת השורה (ימין ב-RTL), החץ לסופה (שמאל), ולשניהם אותו מרחק מהקצה המעוגל. הרוחב הכולל לא זז: ‏3em + .9em של קודם = 1.1em + 2.8em של עכשיו. */ display:inline-flex;align-items:center;gap:2.8em; background:transparent;color:var(--ink); border:1px solid var(--ink);border-radius:var(--r-pill); /* ‏font-family מפורש ולא בירושה: פקדי טופס לא יורשים גופן. גיליון ברירת המחדל של הדפדפן קובע להם Arial, ולכן