/* ========================================================================== glass.css — **קובץ המחלקות של שפת הזכוכית. מקור אמת יחיד.** ========================================================================== כל טשטוש רקע במערכת מוגדר כאן ורק כאן. הכלל שנועל את זה: grep -n "backdrop-filter" web/*.css → רק glass.css שינוי במתכון = מקום אחד, וכל המסכים מקבלים אותו. ‏`prefers-reduced-*` ו-`@supports` יושבים גם הם כאן, ולכן הם חלים על כל מסך אוטומטית ולא צריך לזכור אותם פר-מסך. ארבע המחלקות: ‏.glass-lens — **פקד**: קצה נוצץ, בליק, צל קרוב, התרוממות ולחיצה. ‏.gl-flat — פקד בתוך כרטיס אטום: אותו rim וצל, בלי טשטוש. ‏.glass-surface — **כרטיס תוכן**: משטח בלבד. אין לו rim, אין בליק, ואין hover — הוא לא פקד. (הכרעת טל 10/08: לשמר את המראה הקיים בדיוק, רק להעביר אותו לכאן.) ‏.glass-strong — **סרגל דביק / פאנל צף**: טשטוש חזק יותר וקצה עליון. ⚠️⚠️ **כיוון האור אחיד בכל המערכת** ומתהפך תחת `dir="ltr"`, בדיוק כמו שני מקורות האור של רקע העמוד. שני פקדים שמוארים מכיוונים שונים שוברים את אשליית החומר. ⚠️ **מה שלא מקבל זכוכית:** כפתור ראשי · כפתור סמנטי-קריטי (מחיקה, ביטול, אישור/דחייה) · באדג׳י סטטוס (מידע, לא פקד) · שדות קלט · טבלאות · כרטיס ההתחברות · מסמכי PDF ומיילים. ========================================================================== */ /* ========================================================================== Liquid Glass — `.glass-lens` אושר ב-glass-lab. שלוש השכבות שיוצרות "עדשה" ולא "blur שטוח": 1 · קצה נוצץ (rim) — אור שנתפס בעובי הזכוכית, חזק למעלה ודועך בצדדים. 2 · עומק פנימי — בליק רך בפינה העליונה, תחתית מעט כהה. 3 · צל קרוב ורך — הפקד מרחף מעל המשטח. ⚠️⚠️ **כיוון האור נגזר מכיוון הכתיבה** ומתהפך תחת `dir="ltr"`, בדיוק כמו שני מקורות האור של רקע העמוד (`--bg-mesh`). שני פקדים שמוארים מכיוונים שונים שוברים את אשליית החומר. ⚠️ **`.gl-flat` לפקד שיושב בתוך כרטיס אטום**: אין שם מה לטשטש, ובועה לבנה על רקע לבן נעלמת. אותו rim ואותו צל — רק בלי blur ועם מסלול מגוון. ========================================================================== */ .glass-lens { position: relative; background: rgba(255,255,255,.58); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); border: 0; border-radius: 980px; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.35), inset 0 -6px 12px -6px rgba(30,40,60,.08), 0 2px 6px rgba(20,28,44,.08), 0 10px 24px -6px rgba(20,28,44,.16); transition: box-shadow .22s var(--ease-out), transform .14s var(--ease-out), background .22s var(--ease-out); } .glass-lens::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .9; background: radial-gradient(60% 45% at 70% 0%, rgba(255,255,255,.75), transparent 70%); transition: opacity .22s var(--ease-out); } html[dir="ltr"] .glass-lens::before { background: radial-gradient(60% 45% at 30% 0%, rgba(255,255,255,.75), transparent 70%); } .glass-lens > * { position: relative; z-index: 1; } .glass-lens:hover { background: rgba(255,255,255,.66); transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.62), inset 0 1.5px 1px rgba(255,255,255,1), inset 0 -1px 1px rgba(255,255,255,.4), inset 0 -6px 12px -6px rgba(30,40,60,.07), 0 3px 8px rgba(20,28,44,.09), 0 16px 32px -8px rgba(20,28,44,.2); } .glass-lens:hover::before { opacity: 1; } /* ========================================================================== ⚠️⚠️ **הלחיצה — מכוילת כאן, במקום אחד, לכל הפקדים.** 11/08/2026, אחרי שטל דיווח שהכפתורים "נכנסים פנימה" חזק מדי. `scale(.97)` הוא 3% — על כפתור של 44px זו תזוזה של יותר מפיקסל בכל צד, והצל שנעלם כמעט לגמרי הוסיף תחושת שקיעה. עכשיו `--press` = 0.99 (1%), ~110ms, והצל **מתקצר** ולא נעלם. הלחיצה צריכה להרגיש **מאשרת**, לא שוקעת. ⚠️ **כל פקד חדש יורש מכאן.** אין `:active { transform }` פר-כפתור — כיול בשני מקומות פירושו שאחד מהם נשאר מוגזם ואף אחד לא יודע איזה. ========================================================================== */ :root { --press: .99; --press-t: 110ms; } .glass-lens:active { transform: scale(var(--press)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), inset 0 1.5px 1px rgba(255,255,255,.8), inset 0 -6px 12px -6px rgba(30,40,60,.12), 0 1px 3px rgba(20,28,44,.1), 0 6px 14px -6px rgba(20,28,44,.14); transition-duration: var(--press-t); } /* ⚠️ מי שמבקש פחות תנועה לא מקבל `scale` בכלל — רק הצל מגיב. */ @media (prefers-reduced-motion: reduce) { :root { --press: 1; } } .glass-lens.gl-card { border-radius: 15px; } /* פקד בתוך כרטיס אטום — הנפח מגיע מהצללים, לא מהטשטוש */ .glass-lens.gl-flat { background: rgba(118,118,128,.1); -webkit-backdrop-filter: none; backdrop-filter: none; } .glass-lens.gl-flat:hover { background: rgba(118,118,128,.15); } html[data-theme="dark"] .glass-lens { background: rgba(255,255,255,.085); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1.5px 1px rgba(255,255,255,.3), inset 0 -1px 1px rgba(255,255,255,.08), inset 0 -6px 12px -6px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.34), 0 10px 24px -6px rgba(0,0,0,.5); } html[data-theme="dark"] .glass-lens::before { background: radial-gradient(60% 45% at 70% 0%, rgba(255,255,255,.22), transparent 70%); } html[dir="ltr"][data-theme="dark"] .glass-lens::before { background: radial-gradient(60% 45% at 30% 0%, rgba(255,255,255,.22), transparent 70%); } html[data-theme="dark"] .glass-lens:hover { background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 1.5px 1px rgba(255,255,255,.38), inset 0 -6px 12px -6px rgba(0,0,0,.38), 0 3px 8px rgba(0,0,0,.36), 0 16px 32px -8px rgba(0,0,0,.55); } html[data-theme="dark"] .glass-lens.gl-flat { background: rgba(255,255,255,.07); } html[data-theme="dark"] .glass-lens.gl-flat:hover { background: rgba(255,255,255,.11); } /* ══════════════════════════════════════════════════════════════════════ `.sq-gl` — הזכוכית של חלון בקשת ההצעה, **במובייל בלבד** (30/08/2026) ⚠️⚠️ **המחלקה חסרת כללים מעל 768px**, ולכן הדסקטופ אינו זז: היא יושבת על ה-HTML בשני המצבים ומקבלת חומר רק כשיש מסך קטן. ⚠️⚠️ **rim לפני blur.** מה שיוצר את העדשה הוא ההבהוב הפנימי העליון; בלעדיו זה טשטוש ולא חומר. הבליק (`::before`) ב-RTL ב-`at 70% 0%`. ⚠️ **הצל לפי תפקיד**: כותרת מצילה כלפי מטה, סרגל תחתון כלפי מעלה. ⚠️⚠️ **אסור על מה שנגלל**: לא על עמודת התוכן ולא על הכרטיסים — ‏`backdrop-filter` על שטח גדול שנגלל הורג פריימים במובייל. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* ⚠️ כותרת מקטע **סגור** אינה מרחפת — ולכן אינה נושאת חומר, ולא משלמת על טשטוש שאיש אינו רואה. */ /* ⚠️⚠️ **בלי `position` כאן.** כותרת המקטע הפתוח היא `sticky` (‏`sea.css`), ו-`glass.css` נטען אחריו — `position: relative` כאן היה דורס אותה והסטיקי היחיד בעמוד היה נעלם בשקט. ‏`sticky` יוצר בלוק מכיל בעצמו, ולכן ה-`::before` עדיין נעגן נכון. */ .sq-gl:not(.sq-sec-h) { position: relative; } .sq-gl:not(.sq-sec-h), .sq-sec.open > .sq-sec-h.sq-gl { background: rgba(255,255,255,.58); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1.5px 1px rgba(255,255,255,.95), 0 2px 6px rgba(20,28,44,.08); transition: box-shadow .22s var(--ease-out), background .22s var(--ease-out); } .sq-gl:not(.sq-sec-h)::before, .sq-sec.open > .sq-sec-h.sq-gl::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .9; background: radial-gradient(60% 45% at 70% 0%, rgba(255,255,255,.75), transparent 70%); } .sq-gl:not(.sq-sec-h) > *, .sq-sec.open > .sq-sec-h.sq-gl > * { position: relative; z-index: 1; } html[dir="ltr"] .sq-gl::before { background: radial-gradient(60% 45% at 30% 0%, rgba(255,255,255,.75), transparent 70%); } html[data-theme="dark"] .sq-gl:not(.sq-sec-h), html[data-theme="dark"] .sq-sec.open > .sq-sec-h.sq-gl { background: rgba(255,255,255,.085); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1.5px 1px rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.34); } html[data-theme="dark"] .sq-gl::before { background: radial-gradient(60% 45% at 70% 0%, rgba(255,255,255,.22), transparent 70%); } } /* ══════════════════════════════════════════════════════════════════════ `.seg-well` — **מסלול הבקר המקוטע**, לכל המערכת (31/08/2026) ⚠️⚠️ **הבקר הוא `.seg` + `.seg-bubble` + `segPlace` שכבר קיימים.** מה שהיה חסר הוא המסלול: כל מסך צייר לעצמו רקע אחר, ומכאן שלוש שפות לאותו פקד. `.seg-well` הוא המסלול, ומכאן ואילך אין רקע מקומי. ⚠️⚠️ **גוון דיו ולא לבן־שקוף.** לבן ב-42% עם `backdrop-filter` מעל אב אטום נמדד **189 אפור** — הטשטוש דוגם משטח שאין מאחוריו כלום וחוזר כהה. גוון דיו נמדד 242, כלומר באר בהירה, והחומר נשאר חומר. ⚠️ **בלי `isolation` כאן**: בידוד על אלמנט שיש לו `backdrop-filter` הופך אותו לשורש ה-backdrop של עצמו — ואז אין מה לטשטש, ואותו אפור חוזר. ⚠️ הפריט הפעיל הוא `.seg-bubble`: rim + בליק + צל קרוב, וזז ב-transform. ══════════════════════════════════════════════════════════════════════ */ .seg.seg-well { background: rgba(20,28,44,.055); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 1px 3px rgba(20,28,44,.09), inset 0 0 0 1px rgba(20,28,44,.04); } html[data-theme="dark"] .seg.seg-well { background: rgba(0,0,0,.28); box-shadow: inset 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05); } /* ⚠️ פוקוס = `outline` ולא `box-shadow` — הצללית דורסת את ה-rim. */ .seg.seg-well button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ---- fallbacks ---- */ /* אין תמיכה ב-backdrop-filter ⇒ משטח אטום. הנפח נשמר — הוא מגיע מהצללים. */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .glass-lens, .sq-gl { background: rgba(255,255,255,.92); } .seg.seg-well { background: rgba(20,28,44,.07); } html[data-theme="dark"] .glass-lens, html[data-theme="dark"] .sq-gl { background: rgba(40,44,54,.96); } html[data-theme="dark"] .seg.seg-well { background: rgba(0,0,0,.4); } } /* המשתמש ביקש פחות שקיפות — אטום מלא, בלי blur ובלי בליק */ @media (prefers-reduced-transparency: reduce) { .seg.seg-well { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--ink) 7%, var(--card)); } .glass-lens, .sq-gl { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; } .glass-lens::before, .sq-gl::before { display: none; } /* ⚠️ הבועה קיבלה blur ב-13/08 ⇒ היא חייבת להופיע כאן. כלל שנוסף עם טשטוש ואינו נכנס לבלוק הזה מחזיר שקיפות למי שביקש במפורש בלעדיה. */ .seg-bubble { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-theme="dark"] .seg-bubble { background: rgba(255,255,255,.22); } } /* המשתמש ביקש פחות תנועה — בלי התרוממות, בלי בועה קופצת */ @media (prefers-reduced-motion: reduce) { .glass-lens, .glass-lens::before, .seg-bubble, .sq-gl, .seg.seg-well { transition: none; } .glass-lens:hover { transform: none; } } /* ---- הכפתור הראשי נשאר אטום: הוא לא זכוכית ---- */ .pbtn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border: 0; border-radius: 980px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); /* ⚠️ צל **ניטרלי וקרוב**. הילה אדומה רחבה קוראת כמו ניאון בדארק ושוברת את הכלל "צל תמיד למטה, קרוב ורך". */ box-shadow: 0 2px 6px rgba(20,28,44,.18), 0 8px 18px -8px rgba(122,10,14,.42); transition: transform .14s var(--ease-out), box-shadow .2s var(--ease-out); } .pbtn::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.15), transparent 55%); } .pbtn:hover { box-shadow: 0 3px 9px rgba(20,28,44,.2), 0 14px 26px -10px rgba(122,10,14,.5); } /* ⚠️ הכפתור הראשי צורך את אותו `--press` — ראה הכיול ליד `.glass-lens:active`. */ .pbtn:active { transform: scale(var(--press)); transition-duration: var(--press-t); } .pbtn .ic { width: 16px; height: 16px; } @media (prefers-reduced-motion: reduce) { .pbtn { transition: none; } } /* ========================================================================== רצועה דביקה מכווצת (תיק לקוח) ========================================================================== */ #cf-stick { position: fixed; z-index: 60; inset-inline: 0; inset-block-start: 10px; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(-14px); transition: opacity .26s var(--ease-out), transform .26s var(--ease-out); } #cf-stick.on { opacity: 1; transform: none; } /* פס דהייה — התוכן נמוג לתוך הרקע במקום להתנגש ברצועה */ #cf-stick::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -12px; height: 84px; pointer-events: none; z-index: -1; background: linear-gradient(to bottom, var(--bg) 34%, transparent); } #cf-stick .gstrip { pointer-events: auto; display: flex; align-items: center; gap: 11px; padding: 8px 10px 8px 16px; border-radius: 980px; max-width: min(100% - 24px, 720px); } /* ⚠️ השם לעולם לא נדחס עד שבירה: רוחב מינימלי מובטח, וחיתוך ellipsis נקי. הכפתור והתג הם flex:none ולכן הם מוותרים אחרונים. */ #cf-stick .nm { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 8ch; flex: 1 1 auto; } #cf-stick .ci-chip, #cf-stick .gbtn { flex: none; } #cf-stick .sp { margin-inline-start: auto; } @media (prefers-reduced-motion: reduce) { #cf-stick { transition: none; } } /* ========================================================================== פקדי זכוכית בתיק הלקוח ========================================================================== */ .gbtn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none; color: var(--ink); } .gbtn .ic { width: 16px; height: 16px; flex: none; } .gib { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .gib .ic { width: 16px; height: 16px; } /* ========================================================================== .glass-surface — כרטיס תוכן ⚠️ **לא פקד**: בלי rim, בלי בליק, בלי hover. הערכים הועברו כלשונם מהכללים שהיו פזורים ב-styles.css כדי שהמראה הקיים יישמר בדיוק. ========================================================================== */ .glass-surface { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: .5px solid rgba(255,255,255,.6); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 30px rgba(0,0,0,.06); } html[data-theme="dark"] .glass-surface { background: rgba(26,31,39,.72); border-color: rgba(255,255,255,.08); box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.5); } /* ========================================================================== .glass-strong — סרגל דביק / פאנל צף טשטוש חזק יותר (התוכן זז מתחתיו) + קצה עליון בהיר. ========================================================================== */ .glass-strong { background: rgba(250,250,252,.86); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); border: .5px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 1px 2px rgba(0,0,0,.06), 0 12px 34px rgba(0,0,0,.12); } html[data-theme="dark"] .glass-strong { background: rgba(20,24,31,.86); border-color: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.6); } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .glass-surface { background: rgba(255,255,255,.96); } .glass-strong { background: rgba(250,250,252,.98); } html[data-theme="dark"] .glass-surface { background: rgba(26,31,39,.97); } html[data-theme="dark"] .glass-strong { background: rgba(20,24,31,.98); } } @media (prefers-reduced-transparency: reduce) { .glass-surface, .glass-strong { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card); } html[data-theme="dark"] .glass-surface, html[data-theme="dark"] .glass-strong { background: var(--surface); } } /* ========================================================================== גל 1 · ניווט עליון · תפריט · הודעות משוב ========================================================================== */ /* גלולת הניווט — פקד, ולכן `.glass-lens` מלא. הגובה והרוחב נשארים כפי שהיו: 44px זהה לכפתור ה-+ כדי ששניהם יישבו על אותו קו. */ .nav-pill { display: inline-flex; align-items: stretch; overflow: hidden; border-radius: 980px; min-height: 44px; max-width: calc(100vw - 76px); } /* ⚠️ התג יושב **בתוך** הגלולה, שכבר מטשטשת. טשטוש שני על אותו אזור אינו מוסיף דבר ורק עולה בביצועים — ולכן `gl-flat`. */ .nav-pill .sys-badge { border-radius: 0; } /* ⚠️ **משטח קריאה גדול ⇒ אטימות גבוהה יותר.** התפריט מציג 20+ שורות טקסט קטן, ובאטימות של סרגל דביק רגיל (.86) התיאורים נמדדו מתחת ל-AA. הכלל שנקבע: כשהניגודיות נשברת — מעלים את אטימות הרקע, לא מקטינים את הטקסט. */ .nav-panel { background: rgba(250,250,252,.94); } html[data-theme="dark"] .nav-panel { background: rgba(20,24,31,.94); } .nav-panel { position: absolute; top: calc(100% + 8px); right: 50%; transform: translate(50%, -8px) scale(.98); width: min(940px, 94vw); max-height: 76vh; overflow-y: auto; border-radius: 22px; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .22s var(--ease-drawer), transform .28s var(--ease-drawer); } /* כפתורי הכותרת */ .hdr-icon-btn { width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font: inherit; } .logout-btn { padding: 8px 15px; border-radius: 980px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; color: var(--brand-ink); } /* ⚠️ **האווטאר נשאר אטום**: הוא נושא את צבע המותג, ובדיוק כמו הכפתור הראשי הוא אינו זכוכית. */ /* ⚠️⚠️ **הודעת המשוב שומרת על הצבע האטום שלה.** ירוק=הצליח, אדום=נכשל — הצבע **הוא** ההודעה, וטשטוש היה מדלל אותו בדיוק ברגע שבו צריך לקרוא מהר. מה שכן עובר לשפה: הקצה הבהיר והצל הרך. */ .toast { color: #fff; padding: 11px 17px; border-radius: 12px; margin-top: 8px; font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); background: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(20,28,44,.18), 0 12px 28px -8px rgba(20,28,44,.4); } .toast.show { opacity: 1; transform: translateY(0); } .toast-ok { background: #15803d; } .toast-err { background: #b91c1c; } @media (prefers-reduced-motion: reduce) { .toast { transition: none; } } /* ========================================================================== .seg — segmented control (רכיב מערכת) מסלול `gl-flat` + בועה שזזה בין הסגמנטים. ⚠️ מיקום הבועה נמדד **מהכפתור עצמו** ולא מאינדקס — כך היא נכונה ב-RTL, באנגלית, וכשהמונים משנים רוחב. ========================================================================== */ /* ⚠️ ‏`gl-flat`: הסגמנט יושב בתוך כרטיס אטום — rim וצל, בלי blur. */ .seg { display: inline-flex; position: relative; padding: 4px; border-radius: 980px; max-width: 100%; margin-bottom: 18px; } /* ⚠️ `left:0` מקבע את נקודת האפס לתיבת ה-padding, כך שהחישוב ב-shared.js אינו תלוי ב-padding של סרגל מסוים. */ /* ⚠️⚠️ **הבועה היא זכוכית, והמעבר נקי ולא קופץ** (הכרעת טל 13/08). היא הייתה `var(--card)` אטום עם `--ease-pop` — עקומת overshoot (‏1.42) שחוזרת אחורה בסוף התנועה, וזה מה שנקרא "לא חלק". עכשיו `--ease-out` בלי חריגה. ⚠️ **`--ease-pop` נשאר בשימוש במקומות אחרים** — לא להחליף אותו גלובלית. ⚠️ הרוחב מונפש יחד עם המיקום, ולכן **הרוחב חייב להיקבע לפני האנימציה**: ‏`segPlace` נקרא **אחרי** החלפת המחלקה `on`, אחרת הבועה מקבלת את הרוחב הישן ו"בורחת מהמסלול" (הבאג המתועד למטה ב-`.atb-bub`). */ .seg-bubble { position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: 980px; background: rgba(255,255,255,.62); z-index: 0; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 1.5px 1px rgba(255,255,255,.95), 0 1px 2px rgba(20,28,44,.08), 0 6px 14px -6px rgba(20,28,44,.22); transition: transform .26s var(--ease-out), width .26s var(--ease-out); } /* ⚠️⚠️ **בדארק הערך חייב להישאר כהה.** ‏`.62` לבן על רקע כהה מבליע את הטקסט הבהיר של הסגמנט הפעיל — נמדד ונשמר מרווח AA בשני המצבים. */ /* ⚠️⚠️ **בועת בורר השירות אינה מטשטשת — והיא לא אמורה.** המילוי שלה הוא לבן 98%→82%, כלומר אין כמעט רקע שייראה דרכה, אבל `backdrop-filter` בכל זאת מקדם אותה לשכבת קומפוזיטינג — ו-WebKit אינו תמיד מחיל את החיתוך המעוגל על שכבה כזאת, כך שהפינות יוצאות מרובעות (המלכודת המתועדת ב-CLAUDE.md). נמדד בכרום: הסרת הטשטוש משנה **188 פיקסלים מתוך 103,088**, הפרש מרבי 10/255 — כלומר בלתי נראית כאן, ומצילה את הפינות שם. ⚠️ הבועה הגנרית (רצועת הטריאז') **כן** מטשטשת: המילוי שלה הוא 62% ורואים דרכה. */ .svc-switch .seg-bubble { -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-theme="dark"] .seg-bubble { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 1px rgba(255,255,255,.3), 0 6px 14px -6px rgba(0,0,0,.6); } /* ⚠️⚠️ **עמעום דרך `color` ולא דרך `opacity`.** ‏`opacity` מוכפל לאורך העץ ואי אפשר לבטל אותו בילד: המונה קיבל `color:var(--ink)` וירד ל-3.59:1 כי ‏.64 של האב הוכפל ב-.92 שלו. עם `color` הילד פשוט מגדיר את שלו. */ .seg button { position: relative; z-index: 1; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: #4a5563; cursor: pointer; height: 34px; padding: 0 16px; border-radius: 980px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; transition: color .22s var(--ease-out); } .seg button.on { color: var(--ink); } /* ⚠️ ‏`--muted` נמדד **בדיוק 4.50** על מסלול הסגמנט — על הסף ובלי שוליים. גוון אחד כהה יותר נותן מרווח, ועדיין נבדל בבירור מהסגמנט הפעיל. */ html[data-theme="dark"] .seg button { color: #b9c2cf; } html[data-theme="dark"] .seg button.on { color: var(--ink); } /* ⚠️ צבע מפורש ולא ירושה: `.seg button` יושב על `opacity:.64`, והמונה ירש את העמעום הזה ונמדד 4.4. עמעום של אב נכנס לחישוב הניגודיות. */ .seg .n { font-size: 11px; font-weight: 800; border-radius: 980px; padding: 1px 6px; background: rgba(20,28,44,.1); color: var(--ink); font-variant-numeric: tabular-nums; } html[data-theme="dark"] .seg { background: rgba(255,255,255,.07); } html[data-theme="dark"] .seg .n { background: rgba(255,255,255,.16); color: #e8ecf1; } /* ========================================================================== .gl-on-color — פקד זכוכית על משטח **צבעוני או כהה** ⚠️ הווריאנט הרגיל מבהיר את הרקע ולכן נעלם על הדר אדום. כאן הזכוכית לבנה- שקופה והטקסט לבן — אותו קצה, אותו בליק, כיוון אור זהה. ========================================================================== */ .glass-lens.gl-on-color { background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.17) 100%); -webkit-backdrop-filter: blur(22px) saturate(105%) brightness(1.12); backdrop-filter: blur(22px) saturate(105%) brightness(1.12); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.42), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.07), 0 2px 9px rgba(0,0,0,.16); text-shadow: 0 1px 2px rgba(0,0,0,.28); } .glass-lens.gl-on-color::before { background: radial-gradient(60% 45% at 70% 0%, rgba(255,255,255,.32), transparent 70%); } html[dir="ltr"] .glass-lens.gl-on-color::before { background: radial-gradient(60% 45% at 30% 0%, rgba(255,255,255,.32), transparent 70%); } .glass-lens.gl-on-color:hover { background: linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.24) 100%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.5), inset 0 1px 0 rgba(255,255,255,.6), 0 3px 12px rgba(0,0,0,.2); } /* ========================================================================== גל 2 · דאשבורד ומסך הקורייר ========================================================================== */ /* עטיפת המודאל — עמעום + טשטוש קל, כדי שהמסך שמאחור ייסוג ולא ייעלם */ .modal { background: rgba(20,24,31,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .modal { background: rgba(20,24,31,.6); } } @media (prefers-reduced-transparency: reduce) { .modal { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20,24,31,.62); } } html[data-theme="dark"] .modal { background: rgba(0,0,0,.55); } /* פקדי הזום של המפה — צ'יפים זכוכיתיים. ⚠️ ‏Leaflet מגיע עם `color:#bbb` על ה-`−`, שנמדד 1.75:1. */ .leaflet-bar a, .leaflet-control-zoom a { background: rgba(255,255,255,.7) !important; -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); color: var(--ink) !important; border-color: rgba(255,255,255,.6) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 8px rgba(20,28,44,.14); } .leaflet-bar a:hover, .leaflet-control-zoom a:hover { background: rgba(255,255,255,.85) !important; } html[data-theme="dark"] .leaflet-bar a, html[data-theme="dark"] .leaflet-control-zoom a { background: rgba(40,44,54,.8) !important; color: #e8ecf1 !important; border-color: rgba(255,255,255,.12) !important; } /* ========================================================================== גל 3 · מערכת האוויר · הים · עמוד התמחור ========================================================================== ⚠️⚠️ **כרטיסי התוכן נשארים בדיוק כפי שהיו** (הכרעת טל): ההצהרות הועברו לכאן **כלשונן** ולא הוחלפו ב-`.glass-surface` הגנרי, כי לכל משטח כאן יש עוצמת טשטוש שנבחרה לו (34 לכרטיס, 18 לתוצאה, 40 למודאל). המחלקה הגנרית נשארת לשימוש חדש; הקיים רק **עבר דירה**. הכלל שנשמר: אין `backdrop-filter` מחוץ לקובץ הזה. ========================================================================== */ .glass-body .card { background: rgba(255,255,255,.66); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); } .glass-body .result { background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); } .glass-body .prop-filters { background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); } .glass-body .modal-box { background: rgba(250,250,252,.86); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); } .glass-body .agent-panel { background: rgba(250,250,252,.9); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); } /* תפריט היצירה (+) — פאנל צף */ .air-create-menu { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); } /* עמוד התמחור: כרטיס התוצאה הנבחר · מחליף מוצא↔יעד · השכבה הזכוכיתית */ .pr-page .pr-gl, .pr-page .pr-rc.sel, .pr-page .pr-swap { -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); } /* שדות הקלט בטפסי הזכוכית — משטח ולא פקד־זכוכית */ .glass-body .grid label, .glass-body .prop-panel label, .glass-body .b-ocean, .glass-body .b-col, .glass-body .b-final { -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .glass-body .card { background: rgba(255,255,255,.95); } .glass-body .result { background: rgba(255,255,255,.96); } .glass-body .modal-box, .glass-body .agent-panel, .air-create-menu { background: rgba(250,250,252,.98); } } @media (prefers-reduced-transparency: reduce) { .glass-body .card, .glass-body .result, .glass-body .prop-filters, .glass-body .modal-box, .glass-body .agent-panel, .air-create-menu, .pr-page .pr-gl, .pr-page .pr-rc.sel, .pr-page .pr-swap, .glass-body .grid label, .glass-body .prop-panel label, .glass-body .b-ocean, .glass-body .b-col, .glass-body .b-final { -webkit-backdrop-filter: none; backdrop-filter: none; } .glass-body .card, .glass-body .result { background: var(--card); } .glass-body .modal-box, .glass-body .agent-panel, .air-create-menu { background: var(--surface, #fff); } } /* ========================================================================== גל 4 · ספריות · חלון המשלוח ⚠️ חלון המשלוח משותף ל-Air ול-Courier — כל שינוי כאן חל על שניהם. ========================================================================== */ /* הרצועה העליונה הדביקה של חלון המשלוח */ #cr-detail .sd-strip { -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } /* תפריט ה-⋮ — ילד ישיר של body (בלוק מכיל), ולכן משטח צף */ #sd-menu { -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); } /* בורר המטבע בטופס העריכה */ #cr-detail .se-card-in .cur-native, .courier-body .cur-native { -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } /* פקדי הזום של מפת המסלול בתוך החלון */ #cr-detail .leaflet-control-zoom a, #cr-detail .leaflet-bar { -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%); } /* עטיפת החלון עצמו — טשטוש עדין יותר, המסך שמאחור עדיין נקרא */ #cr-detail.modal { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { #cr-detail .sd-strip, #sd-menu { background: rgba(255,255,255,.97); } } @media (prefers-reduced-transparency: reduce) { #cr-detail .sd-strip, #sd-menu, #cr-detail .se-card-in .cur-native, #cr-detail .leaflet-control-zoom a, #cr-detail .leaflet-bar, #cr-detail.modal { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ========================================================================== .atb — סרגל ניווט תחתון (מערכת אוויר, מובייל בלבד) שתי יחידות נפרדות: גלולה זכוכיתית עם פריטי הניווט, וכפתור יצירה עגול שצף לצידה. הרכיב עצמו ב-`web/tabbar.js`, והוא מפרק את עצמו מה-DOM מעל 640px. ⚠️⚠️ **הכלל הבא אינו קישוט.** נמדד ב-11/08: בשינוי רוחב 768→390 הדגל `matchMedia().matches` התהפך אבל אירוע ה-`change` **לא נורה**, והסרגל נשאר ב-DOM ברוחב 768 — בלי `position` מהמדיה הוא נפל לזרימת העמוד ונראה כשורת כפתורים תועה בגובה 48px בתחתית התוכן. `display:none` כברירת מחדל הופך את זה מ"שבור" ל"בלתי נראה", ואינו מסתמך על שום מאזין. ========================================================================== */ .atb { display: none; } @media (max-width: 640px) { /* הסרגל מחליף את שני הכפתורים הצפים. בדסקטופ שניהם נשארים כמו שהיו. ⚠️⚠️ ‏`!important` על הפעמון ולא מתוך עצלנות: ‏`renderNotifs` ב-notify.js כותב לו `style.display = "flex"` **בכל רענון התראות** (כל 20 שניות), וסגנון מוטבע גובר על כל כלל בגיליון. בלי זה הפעמון היה חוזר ומרחף מעל הסרגל 20 שניות אחרי טעינת העמוד — תקלה שנראית רק אם ממתינים. */ .air-body .air-addbar { display: none; } .air-body #notif-bell { display: none !important; } .atb { display: flex; position: fixed; inset-inline: 14px; bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 900; align-items: center; gap: 11px; transition: transform .3s var(--ease-out), opacity .24s var(--ease-out); } /* ⚠️⚠️ שתי רצועות תחתונות יחד = בלגן, ולכן הסרגל מחליק החוצה כשרצועת פעולה **תופסת בפועל את תחתית המסך** — ‏`.atb-out` נקבע ב-tabbar.js לפי מדידה, ולא לפי המסך שבו אנחנו נמצאים. ⚠️ הגרסה הראשונה נתלתה ב- `body.svc-courier` והעלימה את הניווט ממסך קבלת המחירים **כולו**. ⚠️ `courier-detail-open` נשאר תנאי CSS: חלון המשלוח נפתח מתוך iframe והמחלקה מגיעה ב-postMessage, לפני שיש למה למדוד. */ .atb.atb-out, body.courier-detail-open .atb { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; } /* --- הגלולה --- */ /* ⚠️⚠️ **האטימות ירדה ל-.76 ב-11/08 (בקשת טל: שיורגש שזו זכוכית).** מה שמחזיק את הקריאות אינו האטימות אלא **הבועה**: היא אטומה (‏.94) ונושאת את כל הטקסט, בעוד שהגלולה נושאת רק אייקונים — ולאייקון מספיק 3:1 (‏WCAG 1.4.11) ולא 4.5. נמדד על שלושה רקעים אמיתיים: רשימה לבנה, כרטיס צבעוני ומפה. ⚠️ **כל ירידה נוספת מחייבת מדידה מחדש של האפור** — ראה `.atb-ic`. ⚠️ ה-rim וה-inset מודגשים יותר מקודם: בשקיפות גבוהה הם מה שמצייר את קצה העדשה, ובלעדיהם הגלולה נראית כמו כתם ולא כמו חומר. */ .atb-pill { flex: 1 1 auto; min-width: 0; height: 62px; border-radius: 999px; display: flex; align-items: center; padding: 0 6px; background: rgba(252,252,254,.76); -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%); border: .5px solid rgba(255,255,255,.9); box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -6px 12px -6px rgba(30,40,60,.06), 0 0 0 .5px rgba(20,28,44,.08), 0 2px 6px rgba(16,24,40,.08), 0 12px 32px -6px rgba(16,24,40,.22); } html[data-theme="dark"] .atb-pill { background: rgba(26,30,39,.74); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.5), 0 12px 32px -6px rgba(0,0,0,.6); } .atb-i { flex: 1 1 auto; min-width: 0; height: 52px; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } /* ⚠️ הכיול האחיד — `--press`, ולא ערך משלנו. */ .atb-i:active .atb-bub { transform: scale(var(--press)); transition-duration: var(--press-t); } /* ⚠️⚠️ הבועה היא **ילדה של הפריט** ולא אלמנט צף עם מיקום מחושב. רוחב הפריט הפעיל משתנה עם פתיחת הלייבל, ולכן כל מדידה של בועה מרחפת היא מדידה בתוך אנימציה — בדיוק המקור לבאג שבו בועת ה-segmented ברחה מהמסלול. כאן היא לא יכולה לצאת מהגלולה בשום מצב. */ .atb-bub { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 46px; padding: 0 12px; border-radius: 999px; background: transparent; box-shadow: none; transition: background .26s var(--ease-out), box-shadow .26s var(--ease-out), padding .3s var(--ease-pop), transform .14s var(--ease-out); } /* ריפוד צר ללא-פעיל — משאיר לבועה מקום לגדול בלי ללחוץ את הלייבל */ .atb-i:not(.on) .atb-bub { padding: 0 10px; } /* ⚠️⚠️ **הבועה אטומה מהגלולה בכוונה.** זה הפריט שקוראים, וזה גם מה שיוצר את האפקט: משטח מוצק שצף מעל שכבה שקופה. אם היא תרד לשקיפות הגלולה, גם הניגודיות תיפול וגם המראה ייעלם. */ .atb-i.on .atb-bub { background: rgba(255,255,255,.94); padding: 0 14px; box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 1px 2px rgba(20,28,44,.10), 0 6px 14px -6px rgba(20,28,44,.30); } html[data-theme="dark"] .atb-i.on .atb-bub { background: rgba(255,255,255,.20); box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 6px 14px -6px rgba(0,0,0,.6); } .atb-ic { position: relative; display: inline-flex; flex: 0 0 auto; } .atb-ic .ic, .atb-ic svg { width: 22px; height: 22px; display: block; } /* ⚠️⚠️ האפור הזה כויל **אחרי** שנקבע גוון הגלולה, לא לפניו. הגלולה שקופה למחצה ויושבת גם מעל המפה הכהה, ולכן הרצפה שלה במקרה הגרוע היא 226 ולא 255: ‏`#6b6b6b` נמדד שם 4.23 ו-`#636366` (האפור של אפל) 4.65 — על הסף. ‏`#5c5c60` נותן 5.17. **כל שינוי באטימות הגלולה מחייב מדידה מחדש כאן.** */ .atb-i .atb-ic { color: #5c5c60; transition: color .22s var(--ease-out); } html[data-theme="dark"] .atb-i .atb-ic { color: #a8b0bd; } .atb-i.on .atb-ic { color: var(--brand-link); } /* ⚠️ בדארק הבועה שקופה, ולכן `#ff6b6b` נפל ל-3.20 מעל תוכן בהיר. */ html[data-theme="dark"] .atb-i.on .atb-ic { color: #ffd9d9; } /* ⚠️ הלייבל נפתח ב-`max-width` ולא ב-transform — אין מה שיברח. ‏`ellipsis` הוא רשת ביטחון: לייבל ארוך מדי ייחתך **בגלוי** ולא בשקט. */ .atb-lbl { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 700; color: var(--brand-ink); transition: max-width .3s var(--ease-pop), opacity .2s var(--ease-out); } .atb-i.on .atb-lbl { max-width: 108px; opacity: 1; } html[data-theme="dark"] .atb-i.on .atb-lbl { color: #ffd9d9; } /* ⚠️ ‏`direction: ltr` — בלעדיו "9+" נקרא הפוך ("+9") בעמוד RTL. נמדד. ⚠️ ‏`[hidden]` מפסיד לכל display מפורש; כאן אין כזה, והכלל הבא מקבע זאת. */ .atb-bdg { position: absolute; top: -8px; inset-inline-end: -10px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--brand); color: #fff; direction: ltr; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; padding: 0 4px; box-sizing: border-box; box-shadow: 0 0 0 2px rgba(255,255,255,.95); font-variant-numeric: tabular-nums; } .atb-bdg[hidden] { display: none; } html[data-theme="dark"] .atb-bdg { box-shadow: 0 0 0 2px rgba(28,32,41,.95); } /* --- כפתור היצירה, נפרד מהגלולה --- */ /* ⚠️ אלמוגי בהיר ולא אדום ה-TSM (הכרעת טל 11/08). ה-+ הלבן נמדד 3.32 בקצה העליון של הגרדיאנט — עובר את 1.4.11 (3.0) לאייקון, ובקושי. אין להכהות את הלבן ואין להבהיר עוד את הרקע. */ .atb-add { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; background: linear-gradient(180deg, #f4574d 0%, #e8362b 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 6px 16px rgba(232,54,43,.44), 0 2px 5px rgba(232,54,43,.30); transition: transform .2s var(--ease-out); } .atb-add .ic, .atb-add svg { width: 26px; height: 26px; stroke-width: 2.4; } .atb-add:active { transform: scale(var(--press)); transition-duration: var(--press-t); } /* התפריט פתוח → ה-+ הופך ל-×. ‏`anchoredMenu` מוסיף `.on` לטריגר. */ .atb-add.on { transform: rotate(45deg); } /* ⚠️ בדארק מוד ההילה האדומה קוראת כמו ניאון — אותה עוצמת צל בולטת הרבה יותר על רקע כהה. פיזור קצר יותר ואטימות נמוכה; הכפתור עדיין מרחף. אותו עיקרון שכבר תועד ב-`.pbtn`: "צל תמיד למטה, קרוב ורך". */ html[data-theme="dark"] .atb-add { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 10px rgba(232,54,43,.22), 0 2px 4px rgba(0,0,0,.45); } /* התוכן מפנה מקום — הסרגל גבוה מהכפתורים שהוא מחליף */ .air-body main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } /* ==== הדאשבורד: מסך סטטי, גם בעמוד המארח ==== ⚠️⚠️ **הדאשבורד הוא שני מסמכים, ולכל אחד גלילה משלו.** נעילת הגלילה בתוך ה-iframe (‏`styles.css`, ‏`100dvh` על `main.courier-main`) טיפלה בחצי אחד בלבד: העמוד המארח נשאר מסמך רגיל בגובה 954 מול מסך 844 — ‏**110px של גלילה** שנמדדו בפועל, והם מה שטל הרגיש. הגובה המלא של ‏`.courier-fill` קיים רק מ-1100px ומעלה (דסקטופ), ולכן לא כיסה כאן כלום. ⚠️ `air-dash` ולא `courier-fill`: האחרונה נדלקת גם בהזמנות ובארכיון, ושם הגלילה **נחוצה**. ⚠️ **בלי `overflow: hidden`** — אותו שיקול כמו בתוך ה-iframe: הגובה מדויק ולכן אין מה לגלול, ואם בכל זאת יחרוג משהו עדיף שיהיה נגיש מאשר שייעלם. */ .air-body.air-dash { height: 100dvh; display: flex; flex-direction: column; } /* ⚠️ הריפוד התחתון מיותר כאן: ה-iframe נמתח עד תחתית המסך, והסרגל הצף מרחף מעליו. המרווח שמונע חפיפה נמצא **בתוכו** (`padding-bottom: 96px`). */ .air-body.air-dash > main { flex: 1 1 auto; min-height: 0; display: flex; padding-bottom: 0; margin-block: 8px; } .air-body.air-dash > main > #air-courier.panel.active { flex: 1 1 auto; min-height: 0; display: flex; padding: 0; } /* ⚠️ `flex` ולא `height: 100%` — בפריסת עמודה ב-WebKit הגובה הוא הציר הראשי, וילד שמבקש 100% מקבל את מלוא הגובה **בנוסף** לאחיו. */ .air-body.air-dash .courier-frame { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; } /* ⚠️⚠️ **אנימציית הכניסה מזיזה את הפאנל 10px למטה, וזה 10px של גלילה.** ‏`glPanelIn` (‏styles.css) פותחת ב-`translateY(10px)`, והפאנל כאן הוא **בדיוק** בגובה המסך — כלומר בזמן הכניסה הוא חורג מהתחתית והמסך "רועד" ונגלל קמעה. נמדד: 846 מול 844, ואחרי סיום האנימציה 0. כאן נשארת רק ההופעה (opacity) — התזוזה מיותרת במסך שאינו נגלל. */ .air-body.air-dash > main > #air-courier.panel.active { animation-name: glPanelFade; } /* תיבת ההתראות נפתחת מעל הסרגל ולא מעליו-ומאחוריו */ .air-body #notif-box { bottom: calc(88px + env(safe-area-inset-bottom)); } /* ⚠️⚠️ **גם לעמוד הים יש סרגל פעולות תחתון, והפעמון נחת עליו.** נמדד ב-375×812: הפעמון 734–790 והסרגל 741–811 — חפיפה של 49px שכיסתה חצי מכפתור "בקשה חדשה". בדסקטופ אין חפיפה (המסגרת צרה מהמסך), ולכן זה כלל של המובייל בלבד. ⚠️ הגובה נגזר מ-`--bar-h` ולא מספר קשוח — הסרגל מגדיר אותו, ומספר קבוע כאן היה מתיישן ברגע שהוא משתנה. */ .sea-body #notif-bell { bottom: calc(var(--bar-h, 4.25rem) + 22px + env(safe-area-inset-bottom)); } .sea-body #notif-box { bottom: calc(var(--bar-h, 4.25rem) + 88px + env(safe-area-inset-bottom)); } /* ⚠️ והגליל מקבל מקום לפעמון, אחרת השורה האחרונה נשארת מתחתיו ואי אפשר לגלול אותה החוצה. באוויר הבעיה לא קיימת כי שם הפעמון **מוסתר** במובייל ויושב בסרגל התחתון; לים אין סרגל כזה. */ .sea-body .sq-scroll { padding-bottom: calc(var(--bar-h) + 78px + env(safe-area-inset-bottom) + var(--sp-5)); } @media (prefers-reduced-motion: reduce) { .atb, .atb-bub, .atb-lbl, .atb-add { transition: none; } .atb-add.on { transform: none; } } } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .atb-pill { background: rgba(250,250,252,.98); } html[data-theme="dark"] .atb-pill { background: rgba(26,30,38,.98); } } @media (prefers-reduced-transparency: reduce) { .atb-pill { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(250,250,252,.99); } html[data-theme="dark"] .atb-pill { background: rgba(26,30,38,.99); } } /* ========================================================================== תיבת ההתראות — משטח זכוכית צף (הצבעים והמבנה ב-styles.css, בסוף הקובץ) ⚠️ טשטוש גבוה מהסרגל: היא גדולה יותר ויושבת מעל תוכן צפוף, ובלי טשטוש חזק הטקסט שמאחוריה נקרא דרך השורות. ========================================================================== */ /* ⚠️⚠️ **הטשטוש של הפאנל הוא דסקטופ בלבד מ-12/08.** במובייל כל שורה היא משטח זכוכית בפני עצמו, ופאנל מטושטש מתחתיהן היה טשטוש של פלט שכבר טושטש — יקר, ונראה עכור במקום עמוק. */ @media (min-width: 641px) { .notif-box { -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); } } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .notif-box { background: rgba(252,252,254,.99); } html[data-theme="dark"] .notif-box { background: rgba(28,32,41,.99); } } @media (prefers-reduced-transparency: reduce) { .notif-box { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ‏`glPanelIn` בלי התזוזה — למסך שגובהו בדיוק גובה החלון (ראה `.air-dash`) */ @keyframes glPanelFade { from { opacity: 0; } to { opacity: 1; } } /* ========================================================================== שורות ההתראות במובייל — כל שורה משטח זכוכית מרחף בפני עצמו ⚠️ הפאנל עצמו **אינו** משטח יותר (ראה `#notif-box` ב-styles.css): זכוכית בתוך זכוכית מטשטשת פלט שכבר מטושטש — יקר, ונראה עכור במקום עמוק. ========================================================================== */ @media (max-width: 640px) { /* ⚠️⚠️ **הטשטוש עבר ל-scrim, והשורות ויתרו עליו.** ברגע שיש שכבת עמעום מטושטשת מאחורי הפאנל, טשטוש נוסף בכל שורה מטשטש פלט שכבר טושטש — עלות בלי תמורה, ומראה עכור. השורות נשארות שקופות למחצה **מעל** ה-scrim. */ .notif-scrim { -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); } /* ⚠️⚠️ **‏.86 ולא .78, וזה נמדד ולא נבחר.** טל ביקש טווח .72-.80, אבל הטקסט המשני האפור נמדד שם **4.13** מעל המפה הכהה — מתחת ל-AA. הכלל שהוא עצמו קבע: כשהקריאות נשברת מעלים את אטימות השורה ולא מכהים טקסט. ‏.86 נותן 4.55. תחושת הזכוכית מגיעה מה-blur וה-saturate, לא מהאטימות. */ .notif-item, .notif-head, .notif-empty { background: rgba(255,255,255,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 .5px rgba(20,28,44,.06), 0 2px 6px rgba(16,24,40,.07), 0 10px 24px -8px rgba(16,24,40,.18); } html[data-theme="dark"] .notif-item, html[data-theme="dark"] .notif-head, html[data-theme="dark"] .notif-empty { background: rgba(28,32,41,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.4), 0 10px 24px -8px rgba(0,0,0,.55); } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .notif-item, .notif-head, .notif-empty { background: rgba(252,252,254,.99); } html[data-theme="dark"] .notif-item, html[data-theme="dark"] .notif-head, html[data-theme="dark"] .notif-empty { background: rgba(28,32,41,.99); } } @media (prefers-reduced-transparency: reduce) { .notif-item, .notif-head, .notif-empty { background: rgba(252,252,254,.99); } /* בלי טשטוש — העמעום לבדו חייב להסתיר את התוכן, ולכן הוא כהה יותר */ .notif-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20,24,33,.74); } } } /* ══════════════════════════════════════════════════════════════════════════ ספריית הסוכנים — מפת הכיסוי (12/08/2026) ⚠️⚠️ הטשטוש של הצ'יפים, הפינים ופקדי הזום חי **כאן ורק כאן**. הכלל בפרויקט: `grep -c backdrop-filter web/styles.css` על **הצהרות** חייב להחזיר 0, והוא נעול בשתי בדיקות (‏verify_air_tabbar [5j] ו-verify_customer_stage2). הצבעים, הפריסה והמידות נשארים ב-styles.css בתוך שער הדסקטופ — כאן רק החומר. ⚠️ אותו שער בדיוק, אחרת הטשטוש מוחל גם במובייל. ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1100px) and (hover: hover) and (pointer: fine) { :is(.air-body, .sea-body).agents-split .agl-chip-reg { -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); } :is(.air-body, .sea-body).agents-split .agl-lbl { -webkit-backdrop-filter: blur(20px) saturate(190%); backdrop-filter: blur(20px) saturate(190%); } :is(.air-body, .sea-body).agents-split .agl-dot { -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); } :is(.air-body, .sea-body).agents-split .agl-tip.leaflet-tooltip { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } :is(.air-body, .sea-body).agents-split .agl-map .leaflet-control-zoom a { -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } /* בלי תמיכה בטשטוש / בשקיפות מופחתת — המשטח חייב להיות אטים כדי שהטקסט עליו יישאר קריא מעל מפה צבעונית. */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { :is(.air-body, .sea-body).agents-split .agl-chip-reg, :is(.air-body, .sea-body).agents-split .agl-lbl, :is(.air-body, .sea-body).agents-split .agl-map .leaflet-control-zoom a { background: rgba(252,252,254,.98); } :is(.air-body, .sea-body).agents-split .agl-dot { background: rgba(252,252,254,.99); } } @media (prefers-reduced-transparency: reduce) { :is(.air-body, .sea-body).agents-split .agl-chip-reg, :is(.air-body, .sea-body).agents-split .agl-lbl, :is(.air-body, .sea-body).agents-split .agl-map .leaflet-control-zoom a { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(252,252,254,.98); } :is(.air-body, .sea-body).agents-split .agl-dot { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(252,252,254,.99); } } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { html[data-theme="dark"] :is(.air-body, .sea-body).agents-split .agl-chip-reg, html[data-theme="dark"] :is(.air-body, .sea-body).agents-split .agl-lbl, html[data-theme="dark"] :is(.air-body, .sea-body).agents-split .agl-map .leaflet-control-zoom a, html[data-theme="dark"] :is(.air-body, .sea-body).agents-split .agl-dot { background: rgba(28,32,41,.99); } } } /* ═══════════════════════════════════════════════════════════════════════════ «זכוכית נוזלית» — `.lglass` (הכרעת טל 19/08, אושר מוקאפ סבב 5) ⚠️⚠️ **מה שיוצר את המראה אינו הטשטוש אלא שלוש שכבות:** ① בסיס שקוף-למחצה בגרדיאנט אנכי (האור נופל מלמעלה), ② **טבעת גרדיאנט** בעובי 1.7px שנחתכת במסכה — זו ה"שפה העבה" של העדשה, ובלעדיה הפקד נראה כמסגרת שטוחה ולא כזכוכית, ③ **ברק ספקולרי** בחצי העליון בלבד. ועוד: צל פנימי כהה בתחתית = עובי החומר, וצל חיצוני = הרמה מהמשטח. ⚠️⚠️ **השכבות ב-`z-index:-1` תחת `isolation:isolate`** — מעל הרקע ומתחת לתוכן. הגרסה ההפוכה (שכבות מעל + `> * {position:relative}`) **מקרקעת כל ילד `absolute`** (למשל `.seg-bubble`) ומלבינה טקסט שיושב בצומת טקסט חשוף. ⚠️ WebKit: כל שכבה מלאת-מסגרת חייבת `border-radius: inherit`. ⚠️ הלחיצה על `--press` המשותף בלבד. ⚠️ **אין למרכז פקד ב-`transform`** — `:active { transform: scale() }` דורס אותו והפקד קופץ חצי-גובה. ⚠️ תג/באדג׳ שיושב על החומר הזה **חייב רקע אטום משלו**: רקע שקוף יורש את הגוון שמתחת, ועל שורה בגוון המותג הוא נמדד 3.09:1. */ .lglass { position: relative; isolation: isolate; border: 0; color: var(--ink); background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.34)); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.5), inset 0 9px 18px -12px rgba(255,255,255,.95), inset 0 -11px 20px -12px rgba(20,28,44,.16), 0 1px 1px rgba(20,28,44,.05), 0 10px 22px -10px rgba(20,28,44,.22); transition: background .18s ease, box-shadow .18s ease, transform var(--press-t) ease; } .lglass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.7px; pointer-events: none; z-index: -1; background: linear-gradient(158deg, #fff, rgba(255,255,255,.42) 30%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.62) 72%, #fff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .lglass::after { content: ""; position: absolute; inset: 1px 1px 48%; border-radius: inherit; pointer-events: none; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)); } .lglass:hover { background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.44)); box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.6), inset 0 9px 18px -12px rgba(255,255,255,1), inset 0 -11px 20px -12px rgba(20,28,44,.14), 0 2px 3px rgba(20,28,44,.06), 0 16px 30px -12px rgba(20,28,44,.26); } button.lglass:active { transform: scale(var(--press)); transition-duration: var(--press-t); } /* גרסת המותג — לגלולת "לחיוב" ולשורת שירות שנבחרה */ .lglass.lg-brand { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 20%, rgba(255,255,255,.82)), color-mix(in srgb, var(--brand) 13%, rgba(255,255,255,.5))); } .lglass.lg-brand::before { background: linear-gradient(150deg, rgba(255,255,255,.98), color-mix(in srgb, var(--brand) 42%, transparent) 42%, rgba(255,255,255,.22) 60%, color-mix(in srgb, var(--brand) 60%, transparent)); } .lglass.lg-brand:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 24%, rgba(255,255,255,.86)), color-mix(in srgb, var(--brand) 16%, rgba(255,255,255,.56))); } html[data-theme="dark"] .lglass { background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.055)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.12), inset 0 10px 20px -13px rgba(255,255,255,.3), inset 0 -12px 22px -14px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.42), 0 16px 30px -12px rgba(0,0,0,.6); } html[data-theme="dark"] .lglass::before { background: linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.12) 38%, rgba(255,255,255,.03) 58%, rgba(255,255,255,.42)); } html[data-theme="dark"] .lglass::after { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)); } html[data-theme="dark"] .lglass:hover { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); } html[data-theme="dark"] .lglass.lg-brand { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 42%, rgba(255,255,255,.1)), color-mix(in srgb, var(--brand) 26%, rgba(255,255,255,.04))); } html[data-theme="dark"] .lglass.lg-brand::before { background: linear-gradient(150deg, rgba(255,255,255,.7), color-mix(in srgb, var(--brand) 60%, transparent) 44%, rgba(255,255,255,.14) 62%, color-mix(in srgb, var(--brand) 70%, transparent)); } /* ⚠️ מי שביקש פחות שקיפות מקבל משטח אטום — אחרת הבקשה שלו מבוטלת. */ @media (prefers-reduced-transparency: reduce) { .lglass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); } .lglass::after { display: none; } .lglass.lg-brand { background: var(--brand-light); } } @media (prefers-reduced-motion: reduce) { button.lglass:active { transform: none; } } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .lglass { background: rgba(255,255,255,.94); } html[data-theme="dark"] .lglass { background: rgba(40,44,54,.97); } } /* ========================================================================== .gl-switch — מתג בשפת הזכוכית (23/08/2026) ========================================================================== ⚠️⚠️ **המתכון כאן ורק כאן** — כל `backdrop-filter` במערכת מוגדר בקובץ הזה, ונעול בבדיקה (מספר ההצהרות ב-`styles.css` חייב להיות 0). ⚠️ המתכון זהה ל-`.glass-lens`: ‏rgba + blur/saturate + rim (inset highlight) + צל קרוב + בליק (`::before` radial, ב-RTL ‎at 70% 0%‎). ⚠️⚠️ **הכרעת טל (23/08): אפשרות ב' — בלי טבעת דיו, כמו הרפרנס של אפל.** המשמעות נמדדה ומוצהרת: מחוון הפקד במצב **כבוי בבהיר** הוא **1.58:1** ולא 3:1 (‏WCAG 1.4.11). ‏**זו התנהגות המתג של אפל עצמו** — הוא נשען על הצל של הידית, וצל אינו נמדד בנוסחה. ⚠️ **החוב צומצם לתא אחד:** דלוק/בהיר **3.47 ✓** · כהה בשני המצבים **17.93 ✓** · **רק כבוי/בהיר נשאר 1.58**, וזה המצב שבו אין מה לזהות כ"דלוק". **חוב מוצהר, לא הפתעה.** גרסה עם טבעת (3.1) קיימת בהיסטוריה של המוקאפ אם ההכרעה תתהפך. ⚠️ **הידית גבוהה מהמסלול** (‏30 מול 26) — חרוז שיושב **על** הזכוכית, וזה מה שמייצר את המראה. ולכן למסלול **אין** `overflow: hidden` על ציר ה-Y; הבלוב נחתך ברדיוס בלבד. ⚠️ **`border-radius: inherit` על כל שכבה** — WebKit אינו מחיל חיתוך מעוגל על צאצא שקודם לקומפוזיטינג (`filter: blur` כאן), ובלי זה נוצרות פינות מרובעות על אייפון (מלכודת מתועדת). */ .gl-switch { flex: none; position: relative; width: 52px; height: 30px; display: flex; align-items: center; } /* ⚠️ הקלט גדול מהפקד: יעד המגע הוא 44px גם כשהמתג 30px. */ .gl-switch input { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); margin: 0; opacity: 0; cursor: pointer; z-index: 2; } .gl-sw-t { position: absolute; inset-inline: 0; top: 2px; height: 26px; border-radius: 980px; pointer-events: none; overflow: hidden; background: rgba(255,255,255,.58); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.35), inset 0 -6px 12px -6px rgba(30,40,60,.08), 0 1px 3px rgba(20,28,44,.10); transition: box-shadow .22s var(--ease-out); } .gl-sw-t::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .9; background: radial-gradient(60% 45% at 70% 0%, rgba(255,255,255,.75), transparent 70%); } /* ⚠️⚠️ **הבלוב הנוזלי** — זה מה שהופך "מסלול צבוע" ל-Liquid Glass: כתם רך שזורם מהקצה, מטושטש וגדול מהמסלול, ולא מילוי אטום. ⚠️ 66% ולא 52%: ב-52% נמדד **2.64** ולא עבר 3:1; ב-66% — **3.47**. */ .gl-sw-t::after { content: ""; position: absolute; top: -40%; height: 180%; inset-inline-start: -18%; width: 74%; border-radius: 980px; background: radial-gradient(66% 62% at 42% 50%, color-mix(in srgb, var(--brand) 66%, transparent), color-mix(in srgb, var(--brand) 24%, transparent) 64%, transparent 82%); filter: blur(6px) saturate(120%); opacity: 0; transform: translateX(-26%); transition: opacity .24s var(--ease-out), transform .28s var(--ease-out); } .gl-sw-d { position: absolute; top: 0; inset-inline-start: 0; width: 30px; height: 30px; border-radius: 980px; pointer-events: none; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px) saturate(200%); backdrop-filter: blur(14px) saturate(200%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), inset 0 2px 1.5px rgba(255,255,255,1), inset 0 -2px 3px rgba(30,40,60,.10), 0 1px 2px rgba(20,28,44,.18), 0 4px 10px -2px rgba(20,28,44,.22); transition: inset-inline-start .26s var(--ease-out), box-shadow .22s var(--ease-out); } .gl-switch input:checked ~ .gl-sw-t::after { opacity: 1; transform: translateX(0); } .gl-switch input:checked ~ .gl-sw-d { inset-inline-start: 22px; } /* ⚠️ `outline` לפוקוס ולא `box-shadow` — האחרון דורס את ה-rim. */ .gl-switch input:focus-visible ~ .gl-sw-t { outline: 2px solid var(--ring, var(--brand-dark)); outline-offset: 3px; } /* ⚠️⚠️ בכהה — **המספרים של הזכוכית הכהה**, לא של הבהיר: זכוכית בהירה על רקע כהה נראית ככתם לבן. ‏.13 מחזיר את החומר (‏.085 יצא אפור בוצי). */ html[data-theme="dark"] .gl-sw-t { background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), inset 0 0 0 2px rgba(255,255,255,.12), inset 0 -1px 1px rgba(255,255,255,.08), inset 0 -6px 12px -6px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.34); } html[data-theme="dark"] .gl-sw-d { background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), inset 0 0 0 2px rgba(255,255,255,.22), inset 0 2px 1.5px rgba(255,255,255,.42), inset 0 -2px 3px rgba(0,0,0,.34), 0 1px 2px rgba(0,0,0,.4), 0 4px 10px -2px rgba(0,0,0,.5); } /* ⚠️⚠️ **`--brand-dark` על רקע כהה נכשל שלוש פעמים בפרויקט** (סרגל הסיכום ב-I3, אזור החיובים, והמתג כאן) — 1.48–1.59. ‏`--brand` לבדו ~2.9, גם נכשל. **הכלל: הגוון הזה אינו רקע בכהה.** מעורבב עם צבע הטקסט. */ html[data-theme="dark"] .gl-sw-t::after { background: radial-gradient(66% 62% at 42% 50%, color-mix(in srgb, var(--brand) 62%, var(--ink)), color-mix(in srgb, var(--brand) 26%, transparent) 64%, transparent 82%); } /* ⚠️ נפילות אחורה חובה */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gl-sw-t { background: rgba(255,255,255,.86); } .gl-sw-d { background: #fff; } html[data-theme="dark"] .gl-sw-t { background: rgba(255,255,255,.16); } html[data-theme="dark"] .gl-sw-d { background: rgba(255,255,255,.28); } } /* ⚠️⚠️ בשקיפות מופחתת המתג **אטום ועם מסגרת** — שם אין זכוכית לשאת את הזיהוי, ולכן דווקא כאן הטבעת חוזרת ומעבירה את ה-3:1. */ @media (prefers-reduced-transparency: reduce) { .gl-sw-t { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 50%, transparent); } .gl-sw-d { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 50%, transparent), 0 1px 2px rgba(20,28,44,.2); } .gl-sw-t::after { filter: none; } } @media (prefers-reduced-motion: reduce) { .gl-sw-t, .gl-sw-d, .gl-sw-t::after { transition: none; } } /* ========================================================================== מודול הים — הרשימה המקובצת, הקפיצים וסולם הטיפוגרפיה (‏`.sq-*`) ========================================================================== ⚠️⚠️ **הועבר לכאן מ-`docs/mockups/sea-shell.css` ב-M3, וזה לא סידור.** המוקאפ הצהיר במפורש שהוא "תחנת ביניים ולא יעד", **כדי שלא ייווצרו שלושה עותקים שנסחפים זה מזה** — הבעיה שהפרויקט הזה נלחם בה שוב ושוב. מרגע שהחומר כאן, המוקאפ צורך אותו ואינו מגדיר אותו. ⚠️ נטען **אחרי** `styles.css` בכל העמודים, ולכן הוא צורך את הטוקנים שלו (`--card`, `--ink`, `--brand-ink`, `--good`, `--warn`) ואינו מגדיר אותם. ⚠️⚠️ **`--press` נצרך ואינו מוגדר מחדש** — הוא מכויל למעלה בקובץ הזה, ופקד חדש **אינו** מגדיר `:active { transform }` משלו. שני משובים על אותה לחיצה זו תקלה מתועדת. ⚠️ **אפס `backdrop-filter` חדש כאן** — הכרום של המסך בנוי על `.glass-strong` הקיים, ולא על חומר חדש. ========================================================================== */ /* ---------- 1 · קפיצים (§4) ---------------------------------------------- ⚠️⚠️ **חושבו, לא הומצאו.** אפל מחליפה את שלישיית הפיזיקה בשני פרמטרים: ‏`damping ratio` (התנודה) ו-`response` (מהירות ההגעה, בשניות). ‏`x(t) = 1 − e^(−ζωt)(cos ω_d t + (ζω/ω_d) sin ω_d t)`, ‏`ω = 2π/T`. ‏`--sp-*-t` הוא משך ה-CSS (1.45×T) — **לא ה-response**, שכן לקפיץ אין משך: זמן ההתיישבות נגזר מהפרמטרים. ⚠️ ברירת המחדל היא **ζ=1.0, בלי חריגה**. תנודה נשמרת **רק** לתנועה שקדם לה מומנטום — חריגה על תפריט שרק נדלק מרגישה שגויה. */ :root { /* ζ=1.0 · T=0.4 — הזזה/מיקום מחדש */ --sp-move: linear(0.0000 0.0%, 0.0488 3.8%, 0.1561 7.7%, 0.2831 11.5%, 0.4087 15.4%, 0.5227 19.2%, 0.6210 23.1%, 0.7029 26.9%, 0.7695 30.8%, 0.8227 34.6%, 0.8645 38.5%, 0.8972 42.3%, 0.9223 46.2%, 0.9416 50.0%, 0.9563 53.8%, 0.9674 57.7%, 0.9757 61.5%, 0.9820 65.4%, 0.9867 69.2%, 0.9902 73.1%, 0.9928 76.9%, 0.9947 80.8%, 0.9961 84.6%, 0.9971 88.5%, 0.9979 92.3%, 0.9985 96.2%, 1.0000 100.0%); --sp-move-t: 580ms; /* ζ=1.0 · T=0.3 — פקדים, גילוי שדה */ --sp-snap: var(--sp-move); --sp-snap-t: 435ms; /* ζ=0.8 · T=0.4 — חריגה של 1.5%, למומנטום בלבד */ --sp-bounce: linear(0.0000 0.0%, 0.0509 3.8%, 0.1682 7.7%, 0.3126 11.5%, 0.4589 15.4%, 0.5928 19.2%, 0.7071 23.1%, 0.7996 26.9%, 0.8711 30.8%, 0.9239 34.6%, 0.9611 38.5%, 0.9859 42.3%, 1.0014 46.2%, 1.0101 50.0%, 1.0142 53.8%, 1.0152 57.7%, 1.0143 61.5%, 1.0125 65.4%, 1.0103 69.2%, 1.0081 73.1%, 1.0061 76.9%, 1.0044 80.8%, 1.0030 84.6%, 1.0019 88.5%, 1.0011 92.3%, 1.0006 96.2%, 1.0000 100.0%); --sp-bounce-t: 580ms; } /* ⚠️ נפילה אחורה לדפדפן בלי `linear()` — קפיץ מקורב, לא ליניארי. */ @supports not (transition-timing-function: linear(0 0%, 1 100%)) { :root { --sp-move: cubic-bezier(.22,1,.36,1); --sp-snap: cubic-bezier(.22,1,.36,1); --sp-bounce: cubic-bezier(.34,1.56,.64,1); } } :root { /* ⚠️⚠️⚠️ **הבלוק הזה היה מוצהר על `.sq` — ולא היה שום אלמנט `.sq`.** נמדד בדפדפן ב-03/09/2026: `document.querySelectorAll('.sq').length` מחזיר **0** בכל המערכת, כולל ב-`/sea`. כלומר 29 הטוקנים האלה — סולם הטיפוגרפיה, המרווחים, החומרים וסולם הדיו — **לא נפתרו לאף אלמנט מעולם**, וכל כלל ב-`glass.css` וב-`sea.css` שהפנה אליהם נפל בשקט לירושה. זו לא הייתה ״הגדרה מודולרית״ אלא **קוד מת**. ⚠️ ההעברה ל-`:root` היא מה שמפעיל אותם לראשונה. ראה `docs/dashboard/DESIGN_TOKENS.md` ו-`verify_tokens_global`. ⚠️⚠️ `font-size` / `line-height` / `letter-spacing` / `font-family` **נשארים על `.sq`** ואינם עולים לכאן: הם משנים את גודל הבסיס של כל עמוד במערכת, וזה שינוי אחר לגמרי מהפעלת טוקנים. */ /* ---------- 2 · טיפוגרפיה (§15) ------------------------------------------ ⚠️⚠️ **tracking הוא תלוי-גודל, ולעולם לא ערך אחד לכל הגדלים.** טקסט תצוגה גדול רוצה tracking **שלילי** (האותיות נקראות רחוקות מדי כשהן גדלות); טקסט קטן רוצה מעט **חיובי**. ערך `letter-spacing` קבוע הוא שגוי במקום כלשהו. ⚠️⚠️ **וכל הסולם ב-`rem`** — §15 דורש לכבד את הגדרת גודל הטקסט של המשתמש ולהגדיל את הפריסה **איתו**. הרצפות הפיזיות (יעד מגע, שדה 16px) נשמרות דרך `max()` ולכן הן גדלות ולא נשברות. */ /* ⚠️⚠️ **דרגת ״מספר גיבור״** — הסולם נעצר ב-1.75rem, ושלושת המספרים הגדולים בדאשבורד צריכים ~3.5rem. §15: tracking שלילי **גדל** עם הגודל, ולכן -.026 ולא -.022. ⚠️ **המשקל שונה בין המצבים:** גופן בהיר על רקע כהה נראה עבה יותר מאותו משקל על רקע בהיר. ‏700 בבהיר, 600 בכהה — טוקן ולא ליטרל, אחרת מי שמעתיק את השורה בכהה מקבל טקסט שמן. */ --t-hero: 3.5rem; --t-hero-track: -.026em; --t-hero-lead: 1.0; --t-hero-weight: 700; --t-large: 1.75rem; --t-large-track: -.022em; --t-large-lead: 1.12; --t-title: 1.0625rem; --t-title-track: -.011em; --t-title-lead: 1.3; --t-body: 1rem; --t-body-track: 0; --t-body-lead: 1.55; --t-sec: .9375rem; --t-sec-track: 0; --t-sec-lead: 1.5; --t-cap: .8125rem; --t-cap-track: .006em; --t-cap-lead: 1.55; --t-over: .75rem; --t-over-track: .07em; /* uppercase — tracking חיובי גדול */ /* ---------- 3 · מרווח ורדיוס, ב-rem ---------- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --r-group: 1rem; --r-ctl: .625rem; /* ⚠️ רצפות פיזיות: 44px יעד מגע, 16px שדה (חובת אייפון — מתחת לזה אייפון מגדיל את המסך בכל מיקוד). `max()` שומר עליהן וגם מאפשר להן לגדול עם הגדרת המשתמש. */ --tap: max(44px, 2.75rem); --fs-field: max(16px, 1rem); /* ---------- 4 · חומרים (§12) ---------- */ --mat-ground: var(--card); /* קרקע התוכן */ --mat-row: var(--card); /* ⚠️ אטום — ראה למטה */ --mat-hair: color-mix(in srgb, var(--ink) 11%, transparent); --mat-rim: color-mix(in srgb, var(--ink) 58%, transparent); /* גבול פקד — WCAG 1.4.11 */ --mat-focus: color-mix(in srgb, var(--brand) 82%, var(--ink)); --ink-2: color-mix(in srgb, var(--ink) 62%, var(--card)); /* ⚠️⚠️ **46% נמדד 2.82 בכותרת הקבוצה ונפל מ-AA.** §12 אומר את זה במפורש על טקסט מעל חומר: *"don't use flat gray text — use higher-contrast, slightly heavier weight"*. הערך נבחר במדידה. */ --ink-3: color-mix(in srgb, var(--ink) 72%, var(--card)); /* ⚠️⚠️ **טקסט מעל משטח מגוון דורש יותר ניגודיות מטקסט מעל הכרטיס** — וזו בדיוק הנקודה של §12 (vibrancy): *"Over blurred/translucent surfaces, don't use flat gray text — use higher-contrast, slightly heavier weight."* נמדד: `--ink-2` (62%) נתן **3.94** על מסלול הבורר ו-**4.17** על רקע שלב 4. זה **לא** תיקון נקודתי לשני אלמנטים אלא טוקן לתפקיד: כל טקסט משני שיושב על גוון ולא על `--card`. */ --ink-on-tint: color-mix(in srgb, var(--ink) 78%, var(--card)); --tint: var(--brand-ink); /* ---------- 4ב · צל תלוי-הקשר (§12) ---------- ⚠️⚠️ **§12 דורש צל **כבד יותר** מעל תוכן עמוס ו**קל** מעל רקע חלק.** צל אחיד לכולם הוא מה שמשטח מסך: כרטיס שמרחף מעל מפה זקוק להפרדה שכרטיס על קרקע חלקה אינו זקוק לה, ובאותו צל שניהם נראים מודבקים. ⚠️ ‏`--shadow` הקיים ב-`styles.css` מוגדר **פעמיים** באותו `:root` (שורות 29 ו-583; השנייה גוברת והראשונה מתה). לא נגעתי בו — הטוקנים כאן חדשים ולתפקיד, ולא דורסים אותו. */ /* ---------- 4ג · צבעי מצב (טוקן, לא ליטרל) ---------- ⚠️⚠️ **הגוונים נגזרים מ-`STATUS_META` בשרת ומ-`courier.js`** — שם הם חיים כליטרלים (`#dc2626`, `#e0a106`…) ומשמשים באדג׳ים בכל המערכת. כאן הם הופכים לטוקנים כדי שפס האקסנט, הצ׳יפ והנקודה על המפה ידברו **שפה אחת**; לא נגעתי בליטרלים הקיימים, ולכן אין דלתא באדג׳ים. ⚠️ **שני חריגים בכוונה, לפי הכרעת טל ״אין כחול״:** ״נחת/בעמילות״ היה `#2563eb` ו״שוחרר״ `#0ea5e9` — שניהם כחולים. כאן הם טורקיז. הליטרלים במסכים האחרים נשארו; זה טוקן חדש לתפקיד חדש. ⚠️ ובכהה — **כל גוון מקבל תאום**. ליטרל צבע קשיח בלי גרסה כהה נמדד בעבר 12 כשלי ניגודיות. */ --st-stuck: #c0272d; --st-broker: #b45309; --st-pickup: #5b6472; --st-transit: #a86a06; --st-landed: #0f7b74; --st-none: #7d7d85; --st-done: #15803d; --el1-shadow: 0 1px 2px rgba(20,28,44,.04), 0 8px 24px -8px rgba(20,28,44,.08); --el2-shadow: 0 2px 6px rgba(20,28,44,.06), 0 18px 40px -12px rgba(20,28,44,.16); --el2-shadow-on-content: 0 3px 8px rgba(20,28,44,.10), 0 22px 48px -12px rgba(20,28,44,.26); --el3-shadow: 0 1px 3px rgba(20,28,44,.08); /* וינייטה פנימית — מה שמייצר ״שקוע״ ולא ״מונח״ */ --inset-vignette: inset 0 0 40px -14px rgba(20,28,44,.22); --warn-bg: color-mix(in srgb, var(--warn) 16%, var(--card)); --warn-ink: color-mix(in srgb, var(--warn) 62%, #000); /* ⚠️ באדג׳ "ענה" — ירוק. הזוג נכתב **גם בבסיס וגם בדארק**: טוקן צבע שמוגדר בצד אחד בלבד הופך ל-`var()` לא-חוקי בצד השני, והצבע נופל לירושה בלי שום שגיאה. */ --good-bg: color-mix(in srgb, var(--good) 15%, var(--card)); --good-ink: color-mix(in srgb, var(--good) 68%, #000); /* ⚠️⚠️⚠️ **`--good-text` הוסר מכאן — והוא היה הפגם היחיד של ההעלאה.** ‏`styles.css` מגדיר אותו ב-`:root` כ-`#15803d` (בהיר) ו-`#5ddb85` (כהה), עם הערה שמתעדת ש-`--good` עצמו נמדד **3.30:1 ונכשל** ככתב. ‏`glass.css` נטען **אחרי** `styles.css`, ולכן הבלוק המועלה דרס את הערך הבטוח ב-`var(--good)` — ו-`verify_sea_compare_render` נצבע אדום על **3.0** בבהיר ו-4.2 בכהה, בכיתוב ״ההצעה הזולה מבין אלה שעומדות בתנאים״ בחלון ההשוואה. ⚠️⚠️ **וכך זה חמק ממני:** בדיקת ההתנגשויות שלי הרצתי עם ‏`grep "--tok\s*:"` — ו-BSD grep על מק **אינו מפרש `\s`**, ולכן היא החזירה ״אפס התנגשויות״ על 39 טוקנים בלי לבדוק כלום. נעול ב-`verify_tokens_global` ⑪: הבלוק אינו רשאי להגדיר טוקן שכבר מוגדר ב-`styles.css`. */ } /* ⚠️⚠️⚠️ **הבלוק הזה חייב להישאר על `.sq` ואסור לו לעלות ל-`:root`.** בגרסה הראשונה של ההעלאה הוא עלה בטעות — ולא נראה שבור, כי `--t-body` הוא `1rem` ו-`rem` על אלמנט השורש מתייחס לגודל ההתחלתי, כלומר `font-size: 1rem` על `:root` הוא **no-op** (נמדד: 16px לפני ואחרי, אפס שינוי ב-`/air`). זו פצצת זמן: ברגע שמישהו ישנה את `--t-body` ל-`1.05rem`, השורש יגדל **בהצטברות** בכל טעינה של הערך, וכל עמוד במערכת יזוז. הטוקנים עולים; **גודל הבסיס לא.** */ .sq { font-size: var(--t-body); line-height: var(--t-body-lead); letter-spacing: var(--t-body-track); font-variant-numeric: tabular-nums; font-optical-sizing: auto; } /* ⚠️ הגופן: §15 — "ברירת המחדל היא גופן המערכת לפני גופן מותאם; הוא כבר מגיע עם optical sizing, טבלאות tracking וכיוונון לקריאוּת." ‏`system-ui` על מק ואייפון = **SF Hebrew**, שהוא הגופן האמיתי של השפה הזאת. ⏸️ **זו הכרעה של טל** — המערכת מגדירה `"Segoe UI", "Heebo"`. טוקן אחד, שורה אחת להחזיר. */ .sq { font-family: system-ui, -apple-system, "Segoe UI", "Heebo", Arial, sans-serif; } /* ⚠️ הדארק חייב לעלות **יחד** עם הבסיס. טוקן שמוגדר בצד אחד בלבד נשאר על ערך הבהיר בכהה — וזו בדיוק המלכודת שההערה על `--good-bg` כמה שורות מעל מזהירה מפניה. המערכת עובדת ב-`data-theme` בלבד (אין `prefers-color-scheme` ב-`styles.css`), ולכן זה הסלקטור. */ html[data-theme="dark"] { --mat-hair: color-mix(in srgb, #fff 14%, transparent); --mat-rim: color-mix(in srgb, #fff 42%, transparent); --ink-2: color-mix(in srgb, var(--ink) 72%, var(--card)); --ink-3: color-mix(in srgb, var(--ink) 78%, var(--card)); --ink-on-tint: color-mix(in srgb, var(--ink) 86%, var(--card)); --warn-ink: color-mix(in srgb, var(--warn) 88%, #fff); --good-bg: color-mix(in srgb, var(--good) 22%, var(--card)); --good-ink: color-mix(in srgb, var(--good) 82%, #fff); /* ⚠️ `--good-text` — ראה ההערה בבלוק הבהיר. `styles.css` מחזיק אותו. */ --t-hero-weight: 600; --st-stuck: #ff6b6b; --st-broker: #f0a94c; --st-pickup: #97a1b0; --st-transit: #e3b04b; --st-landed: #3fbfae; --st-none: #98a0ac; --st-done: #4ade80; --el1-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.45); --el2-shadow: 0 2px 6px rgba(0,0,0,.34), 0 18px 40px -12px rgba(0,0,0,.5); --el2-shadow-on-content: 0 3px 8px rgba(0,0,0,.44), 0 22px 48px -12px rgba(0,0,0,.62); --el3-shadow: 0 1px 3px rgba(0,0,0,.4); --inset-vignette: inset 0 0 40px -14px rgba(0,0,0,.5); } /* ========================================================================== ⚠️ `prefers-contrast: more` (§14) — נמדד ב-03/09/2026: **שני מופעים בכל `web/`.** §14 דורש רקעים כמעט-אטומים ומסגרת **מוגדרת**, ולא רק פחות שקיפות. ה-rim נשאר — הוא מה שמזהה את החומר. ========================================================================== */ @media (prefers-contrast: more) { .glass-lens { background: rgba(255,255,255,.94); } .glass-surface { background: rgba(255,255,255,.97); border-color: var(--mat-rim); } .glass-strong { background: rgba(250,250,252,.99); border-color: var(--mat-rim); } html[data-theme="dark"] .glass-lens { background: rgba(40,46,57,.94); } html[data-theme="dark"] .glass-surface { background: rgba(26,31,39,.97); } html[data-theme="dark"] .glass-strong { background: rgba(20,24,31,.99); } :root { --mat-hair: color-mix(in srgb, var(--ink) 34%, transparent); } } /* ⚠️⚠️ `[hidden]` מפסיד לכל `display` מפורש — נדרך בגרסה הקודמת. */ .sq [hidden] { display: none !important; } /* ---------- 5 · בידוד דו-כיווני ---------- */ .sq-num { unicode-bidi: isolate; direction: ltr; font-variant-numeric: tabular-nums; } .sq-lat { unicode-bidi: isolate; direction: ltr; } .sq-name { unicode-bidi: isolate; } .sq-nb { white-space: nowrap; } /* ---------- 6 · המסגרת: כרום צף, תוכן נגלל מתחתיו (§12) ---------------- ⚠️⚠️ **הכרום אינו `sticky` וגם לא `fixed` — הוא `absolute` מעל גליל בגובה מלא.** שתי סיבות, ושתיהן חשובות: ‏(1) ‏§12 דורש שהתוכן ייגלל **מתחת** לחומר, ולא שרצועה אטומה תאכל פס קבוע מהמסך. רצועה שהיא אח ב-flex לא מאפשרת את זה. ‏(2) הכלל של טל **"sticky אחד בלבד בעמוד"** — כאן יש **אפס**. ‏`absolute` אינו נספר, וההתנהגות זהה בתוך מסגרת בגובה קבוע. ⚠️ ול-`.glass-surface` יש `backdrop-filter`, שיוצר **בלוק מכיל** — ולכן ה-`absolute` נמדד מול המסגרת ולא מול המסך. זו המלכודת המתועדת ב-CLAUDE.md, מנוצלת כאן בכוונה. */ .sq-shell { position: relative; height: min(100dvh, 56rem); /* ⚠️ שלב הבחירה הוא שני כרטיסים — גובה מסך מלא שם הוא חצי עמוד ריק. */ border-radius: 1.25rem; overflow: hidden; background: var(--mat-ground); isolation: isolate; } .sq-shell.is-pick { height: auto; } .sq-shell.is-pick .sq-scroll { position: static; inset: auto; } .sq-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* ריפוד = גובה הכרום, כך שהתוכן מתחיל וגומר בגלוי אבל נגלל מתחתיו */ padding: calc(var(--nav-h) + var(--sp-2)) var(--sp-4) calc(var(--bar-h) + env(safe-area-inset-bottom) + var(--sp-5)); --nav-h: 3.25rem; --bar-h: 4.25rem; scroll-padding-top: var(--nav-h); } /* ---------- 6א · סרגל הניווט ---------- */ .sq-nav { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 3; height: var(--nav-h, 3.25rem); display: flex; align-items: center; gap: var(--sp-2); padding-inline: var(--sp-3); border-radius: 0; } /* ⚠️⚠️ **אפקט קצה-גלילה, לא קו מפריד** (§12). הקו ה-1px מתחת לכותרת דביקה הוא בדיוק מה ש-§12 אומר להחליף: במקומו **מסכת גרדיאנט שדועכת**, ומופיעה **רק כשהתוכן באמת נמצא מתחת לכרום**. */ .sq-nav::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: var(--sp-4); pointer-events: none; opacity: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--mat-ground) 78%, transparent), transparent); transition: opacity var(--sp-snap-t) var(--sp-snap); } .sq-shell.is-scrolled .sq-nav::after { opacity: 1; } /* ⚠️ **Vibrancy** (§12): טקסט מעל חומר שקוף אינו אפור שטוח — משקל מעט כבד יותר, ניגודיות גבוהה, ובאמפ קטן ב-tracking. */ .sq-nav-title { font-size: var(--t-sec); line-height: 1.2; font-weight: 700; letter-spacing: .004em; opacity: 0; transform: translateY(.375rem); transition: opacity var(--sp-snap-t) var(--sp-snap), transform var(--sp-snap-t) var(--sp-snap); } .sq-shell.is-scrolled .sq-nav-title { opacity: 1; transform: none; } .sq-nav-sp { flex: 1 1 auto; } /* ---------- 6ב · כותרת גדולה שמתכנסת (§1 · משוב רציף) ------------------ ⚠️ ההתכנסות מונעת **מהגלילה עצמה**, 1:1, ולא באנימציה שרצה בסוף. ‏`--collapse` נכתב מ-rAF ב-scroll. */ .sq-large { --collapse: 0; padding: var(--sp-2) 0 var(--sp-5); transform: translateY(calc(var(--collapse) * -.5rem)); opacity: calc(1 - var(--collapse)); will-change: transform, opacity; } .sq-large h1 { margin: 0; font-size: var(--t-large); line-height: var(--t-large-lead); letter-spacing: var(--t-large-track); font-weight: 800; text-wrap: balance; } .sq-large p { margin: var(--sp-2) 0 0; color: var(--ink-2); font-size: var(--t-cap); line-height: var(--t-cap-lead); letter-spacing: var(--t-cap-track); max-width: 34ch; } /* ---------- 6ג · סרגל הפעולה ---------- */ .sq-bar { position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 3; min-height: var(--bar-h, 4.25rem); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); border-radius: 0; } .sq-bar::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: var(--sp-5); pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--mat-ground) 78%, transparent), transparent); } .sq-bar-sp { flex: 1 1 auto; } /* ---------- 7 · רשימה מקובצת (§16.6 פשטות · §16 קיבוץ) ---------------- ⚠️⚠️ **זה השינוי הגדול.** במקום ערימה של תיבות עם מסגרת לכל שדה — קבוצה אחת מעוגלת, שורות עם קו-שערה ביניהן, תווית בהתחלה ופקד בסוף. ‏§16: *"קרבה מרמזת על קשר"* — הקיבוץ עושה את העבודה שהמסגרות עשו, בפחות דיו. ⚠️⚠️ **המשטח אטום, לא זכוכית** — §12: *"never stack a light translucent surface on another — legibility collapses."* הכרום שקוף, התוכן לא. */ .sq-group { margin: 0 0 var(--sp-6); } .sq-ghead { /* ⚠️ **`flex` ולא `block`** — כותרת קבוצה יכולה לשאת מונה בקצה השני (`שם3`), וב-`block` שני הצמתים נדבקים זה לזה: "ייקבלו את הבקשה3". נמדד. */ display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: var(--t-over); font-weight: 800; letter-spacing: var(--t-over-track); text-transform: uppercase; color: var(--ink-3); padding: 0 var(--sp-4) var(--sp-2); } .sq-ghead .n { flex: 0 0 auto; } .sq-rows { background: var(--mat-row); border-radius: var(--r-group); overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -16px rgba(16,24,40,.18); } html[data-theme="dark"] .sq-rows { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.7); } /* ⚠️ קו השערה **בין** שורות ולא סביבן, ולא מתחת לאחרונה. */ .sq-row + .sq-row { box-shadow: 0 -1px 0 var(--mat-hair); } .sq-row { /* ⚠️⚠️⚠️ **`flex-direction: row` מוצהר במפורש — והפעם זו הפעם הרביעית בפרויקט הזה שהכלל הזה תופס.** ‏`styles.css:108` הוא `label { display:flex; flex-direction:column }`, והוא חל על **כל** `