/* PelegSoft -בסיס: איפוס, טיפוגרפיה, פריסה כללית */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* מניעת גלילה אופקית של העמוד כולו (רשת ביטחון גלובלית): כל רכיב שחורג מעט מ-100vw לא יאפשר "להזיז" את העמוד ימינה/שמאלה. הגלילה האנכית נשמרת. */ overflow-x: hidden; } /* רקע בסיס ל-html -רשת ביטחון שלא יופיע לבן באזורי safe-area בלנדסקייפ. ‎data-daytime‎ נכתב על ה-‎‎ עצמו (וגם על ה-‎body‎, שממנו קורא כל השאר). **קודם זה היה ‎html:has(body[data-daytime=...])‎, ונמדד שזה מייקר כל חישוב סגנון במסמך פי שישה**: ‎:has()‎ שנושאו השורש מסמן את המסמך כולו כ"מושפע", ולכן כל שינוי -כולל כל פריים של כל אנימציה בסצנה- מחייב הערכה מחדש עד השורש. ראה ההערה ב-‎templates/layout.php‎ ליד תג ה-‎‎. */ html { background: #4DA8E8; } html[data-daytime="dawn"] { background: #6e88ad; } html[data-daytime="dusk"] { background: #333c56; } html[data-daytime="night"] { background: #0a1226; } body { /* ‎--body-font‎ נקבע בפאנל (טיפוגרפיה ← טקסט הגוף) ונפלט ב-‎layout.php‎. הנפילה ל-Heebo היא ברירת המחדל ההיסטורית, כך שאתר שלא נגע בהגדרה נראה בדיוק כמו קודם. */ font-family: var(--body-font, 'Heebo'), 'Segoe UI', Tahoma, sans-serif; /* גודל הטקסט של כל האתר. הכותרות מוגדרות ב-‎em‎/‎rem‎ ולכן הן נגררות איתו - זו הכוונה: מד אחד שמגדיל את הטקסט כולו, ולא רק את הפסקאות. */ font-size: calc(1rem * var(--body-scale, 1)); color: var(--c-ink); background: var(--c-sky-light); min-height: 100vh; min-height: 100dvh; /* פריסת עמוד מלא: התוכן גדל למלא, הפוטר נצמד לתחתית -כך שכשאין הרבה טקסט הכול נכנס למסך אחד בלי גלילה, וכשיש טקסט ארוך העמוד גולל כרגיל */ display: flex; flex-direction: column; overflow-x: hidden; line-height: 1.6; transition: background-color 2.5s ease; } /* רקע ה-body מותאם לשעת היום (גרדיאנט שמיים) -כך אם נותרים פסי safe-area באייפון לנדסקייפ, הם נבלעים בסצנה בכל שעה. */ body { background: linear-gradient(180deg, #7CC6F6 0%, #4DA8E8 55%, #3d7fa8 100%); } body[data-daytime="dawn"] { background: linear-gradient(180deg, #9db8d8 0%, #6e88ad 55%, #4a5f80 100%); } body[data-daytime="dusk"] { background: linear-gradient(180deg, #4a5570 0%, #333c56 55%, #232a40 100%); } body[data-daytime="night"] { background: linear-gradient(180deg, #0d1838 0%, #0a1226 55%, #070d1c 100%); } /* נעילת גלילה (מהניהול, פר-עמוד): העמוד נעול לראשו ואי אפשר לגלול -כך שגרירת הקרוסלה בתיק העבודות לא מזיזה את כל המסך. המחלקה נכתבת על ה-‎‎ **וגם** על ה-‎body‎ (מאותה סיבה של ‎data-daytime‎ שלמעלה -‎:has()‎ שנושאו השורש ייקר כל חישוב סגנון פי שישה), ו-overscroll-behavior מונע את ה"מתיחה" של iOS. */ html.scroll-lock { overflow: hidden; } body.scroll-lock { overflow: hidden; height: 100vh; height: 100dvh; overscroll-behavior: none; } /* הפוטר (מחוץ ל-.content, נשאר חי בין ניווטים) והרשתות החברתיות נחתכים/מיותרים בעמוד נעול-גלילה. קושרים את השקיפות שלהם למצב הנעילה עם מעבר -כך במעבר מעמוד נעול למסך רגיל הם **חוזרים עם FADE נעים** במקום לקפוץ פנימה. */ .footer, .social-scene, .social-bar:not(.social-pos-footer) { transition: opacity 0.5s ease; } /* **הנטרול יושב על המיכל ולא על רשימת ילדים.** הגרסה הקודמת מנתה שמות (‎.footer-link‎, ‎.social-link‎) ו**החריגה בדיוק את סרגל הרשתות שבפוטר**: ‎.social-bar:not(.social-pos-footer) .social-link‎ אינו חל עליו, והפוטר עצמו קיבל ‎opacity: 0‎ בלבד. התוצאה -האייקונים בלתי נראים לגמרי אבל לחיצה על האזור שלהם עדיין נתפסת ופותחת את הרשת החברתית. ‎opacity: 0‎ אינו מסיר מהיפ-טסט; רק ‎pointer-events‎ עושה זאת. על המיכל זה חל גם על כל מה שיתווסף לשם בעתיד -וזו בדיוק הסיבה שרשימה מונה נכשלה כאן. */ body.scroll-lock .footer, body.scroll-lock .social-scene, body.scroll-lock .social-bar:not(.social-pos-footer) { opacity: 0; pointer-events: none; } /* ‎.social-scene-item‎ מגדיר ‎pointer-events: auto‎ במפורש (הוא יושב בשכבה שכולה ‎none‎), וילד עם ‎auto‎ נשאר יעד ללחיצה גם כשההורה ‎none‎ -ולכן דווקא הוא חייב כלל משלו. */ body.scroll-lock .social-scene .social-link { pointer-events: none; } /* ---- טלפון לרוחב: החלון נמוך מהתוכן, ולכן **אסור לנעול** ---- הנעילה נועדה למנוע מגרירת הקרוסלה להזיז את המסך, והיא מניחה בשקט שהעמוד **נכנס** בחלון. בטלפון מסובב הגובה יורד ל-390-430px והנחה זו קורסת: נמדד בתיק העבודות עמוד של 482px בחלון של 390px -159px חתוכים, ובלי גלילה אין שום דרך להגיע אליהם (הכיתוב, הנקודות והמונה פשוט אינם). הסף 560px מפריד בבירור בין טלפון מסובב (≤430) לבין טלפון לאורך, טאבלט ולפטופ (700+), ולכן הוא אינו נוגע בהם. הפוטר והרשתות חוזרים כאן: הם הוסתרו **בגלל** הנעילה, ומרגע שהעמוד נגלל הם חלק ממנו כמו בכל עמוד אחר. */ @media (max-height: 560px) { html.scroll-lock { overflow: auto; } body.scroll-lock { overflow: visible; height: auto; overscroll-behavior: auto; } body.scroll-lock .footer, body.scroll-lock .social-scene, body.scroll-lock .social-bar:not(.social-pos-footer) { opacity: 1; pointer-events: auto; } body.scroll-lock .social-scene .social-link { pointer-events: auto; } } img { max-width: 100%; display: block; } /* נגיש לקוראי מסך בלבד (כותרת מוסתרת ויזואלית) */ .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; } a { color: inherit; text-decoration: none; } /* גופן הכותרות הראשיות נבחר בפאנל הניהול (--heading-font); ברירת מחדל Suez One */ h1, h2, h3 { font-family: var(--heading-font, 'Suez One'), 'Heebo', serif; line-height: 1.2; } /* ---- סרגלי גלילה מעוצבים ורגועים (חוק: כל סקרול באתר מעוצב בהתאם לנושא) ---- */ * { scrollbar-width: thin; scrollbar-color: #14396f #06121f; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: #06121f; border-radius: 10px; } ::-webkit-scrollbar-button { background: #02060e; } ::-webkit-scrollbar-thumb { background: #14396f; /* כחול כהה */ border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; transition: background 0.2s; } ::-webkit-scrollbar-thumb:hover { background: #1c4d90; background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ---- סרגל עליון ---- */ .topbar { position: fixed; inset-inline: 0; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; /* ריפוד שמכבד את ה-safe-area של iPhone (חריץ בלנדסקייפ) */ padding-block: 0.6rem; padding-inline: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-right)) max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-left)); background: linear-gradient(180deg, rgba(13, 62, 120, 0.55), rgba(13, 62, 120, 0.25)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 231, 163, 0.25); } .brand { display: flex; align-items: center; gap: 0.5rem; /* המותג בסרגל = גופן הלוגו (זה מה שהוא), ולא גופן הכותרות */ font-family: var(--logo-font, 'Titan One'), 'Suez One', serif; font-size: 1.35rem; color: #fff; text-shadow: 0 2px 8px rgba(13, 62, 120, 0.8); } .brand-icon { font-size: 1.5rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); } /* order: 2 -הלוגו מוצג בצד שמאל של שם האתר (ה-DOM נשאר לוגו→שם לטובת קוראי מסך) */ /* הגובה נשלט בניהול (עיצוב ← לוגו האתר ← גודל הלוגו בסרגל). ‎--brand-logo-scale‎ הוא **לא** ‎--logo-scale‎: השני נוגע ל-‎.hero-title‎ בלבד. */ .brand-logo { order: 2; height: calc(2rem * var(--brand-logo-scale, 1)); width: auto; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); } .nav { display: flex; gap: 0.35rem; } .nav-link { padding: 0.45rem 1rem; border-radius: 999px; color: #eaf2ff; font-weight: 500; transition: background 0.25s, color 0.25s, transform 0.15s; } .nav-link:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); } .nav-link.is-active { background: linear-gradient(180deg, var(--c-gold-light), var(--c-gold)); color: var(--c-wood-deep); font-weight: 700; box-shadow: 0 2px 10px rgba(255, 209, 90, 0.45), inset 0 1px 0 #fff; } /* אייקון הפריט: קישוט לצד השם, ולכן הוא קטן ממנו ואינו נחתך לעולם */ .nav-ico { margin-inline-end: 0.32em; font-size: 0.95em; line-height: 1; } /* ---- תת-תפריט ---- נפתח ב-‎:hover‎ וב-‎:focus-within‎ ובלי שורת JS: תת-תפריט שנפתח בלחיצה על הקישור גוזל מהקישור את תפקידו (האב הוא עמוד לכל דבר), ומחווה שאין לה hover נקראת כתפריט שבור. במגירת המובייל הבנים מוצגים ממילא תמיד. */ /* **‎inline-flex‎ ולא ‎block‎.** ב-‎.nav‎ שהוא flex, עוטף בלוקי נמתח לגובה השורה והקישור שבתוכו נפרס כ-inline -נמדד ‎70x38‎ מול ‎104x40‎ של השכנים, כלומר פריט-אב בגודל אחר. כאן העוטף מודבק לקישור והקישור זהה לכל השאר. */ .nav-item.has-sub { position: relative; display: inline-flex; align-items: center; } /* חץ קטן שאומר "יש כאן עוד" -בלעדיו אין שום סימן שהפריט נפתח */ .nav-item.has-sub > .nav-link::after { content: '▾'; margin-inline-start: 0.35em; font-size: 0.72em; opacity: 0.75; } .nav-sub { position: absolute; /* **מאפיינים פיזיים.** ‎inset-inline-start‎ הוא ימין ב-RTL, ויחד עם ההיסט התוצאה נמדדה ‎180px‎ מהאב -תפריט שנראה תלוש. ‎left/translateX‎ מתנהגים זהה בשני הכיוונים. */ /* המרחק מהפריט וההזזה האופקית נשלטים מהניהול; ברירת המחדל היא בדיוק מה שהיה כאן קודם. */ top: calc(100% + var(--nsub-gap-y, 6px)); left: 50%; translate: calc(-50% + var(--nsub-off-x, 0px)) 0; display: flex; flex-direction: column; gap: 0.25rem; min-width: max(100%, 9rem); padding: 0.45rem; background: linear-gradient(180deg, rgba(24, 82, 150, 0.99), rgba(9, 34, 68, 0.99)); border: 2px solid var(--c-gold-deep); border-radius: 14px; box-shadow: 0 14px 30px rgba(6, 20, 40, 0.5), inset 0 1px 0 rgba(255, 231, 163, 0.25); /* ‎visibility‎ ולא ‎display‎: כך יש מעבר, והשכבה אינה נמדדת כשהיא סגורה */ opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s; z-index: 30; } /* רצועה שקופה שמגשרת על המרווח בין הפריט לתפריט -בלעדיה הוא נסגר באמצע הדרך אל הבנים, וזה נקרא כתפריט שנופל */ /* הרצועה שמגשרת על המרווח -גובהה עוקב אחריו, אחרת מרווח גדול מנתק את המעבר אל הבנים והתפריט נסגר באמצע הדרך. */ .nav-item.has-sub::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--nsub-gap-y, 6px) + 2px); } /* ---- מיקום תת-התפריט ---- מאפיינים **פיזיים**: ‎inset-inline-start‎ מתהפך ב-RTL, וזו בדיוק המלכודת שכבר תוקנה כאן כשהתפריט נחת 180px מהאב. */ .nav[data-subpos="start"] .nav-sub { left: auto; right: 0; translate: var(--nsub-off-x, 0px) 0; } .nav[data-subpos="end"] .nav-sub { left: 0; right: auto; translate: var(--nsub-off-x, 0px) 0; } /* ברוחב הפריט: הצמדה לשתי הצלעות, ובלי מינימום שמרחיב אותו מעבר להן */ .nav[data-subpos="wide"] .nav-sub { left: 0; right: 0; min-width: 0; translate: var(--nsub-off-x, 0px) 0; } .nav-item.has-sub:hover > .nav-sub, .nav-item.has-sub:focus-within > .nav-sub { opacity: 1; visibility: visible; } .nav-sub .nav-link { white-space: nowrap; text-align: center; } /* ---- עיצובי תת-התפריט (‎data-substyle‎ על ‎.nav‎) ---- ברירת המחדל (‎panel‎) אינה נושאת מאפיין כלל, ולכן אתר שלא בחר עיצוב אינו מושפע -אותו דפוס של ‎data-pfshow‎ ושל ‎data-capanim‎. */ .nav[data-substyle="card"] .nav-sub { background: linear-gradient(180deg, #fdf6e0, #f0e2bd); border-color: var(--c-gold-deep); box-shadow: 0 14px 30px rgba(6, 20, 40, 0.45); } .nav[data-substyle="card"] .nav-sub .nav-link { color: var(--c-wood-deep, #4a2f14); } .nav[data-substyle="card"] .nav-sub .nav-link:hover { background: rgba(74, 47, 20, 0.12); } .nav[data-substyle="plain"] .nav-sub { background: none; border: 0; box-shadow: none; padding: 0.2rem 0; } /* **הפריט הפעיל מוחרג.** הכדור הכהה כאן דורס את רקע הזהב של ‎is-active‎ אבל לא את צבע הטקסט שלו (חום כהה, שנועד לזהב) -נמדד טקסט חום על כחול כהה, כלומר בלתי קריא. הפריט הפעיל נשאר זהוב כמו בתפריט העליון. */ .nav[data-substyle="plain"] .nav-sub .nav-link:not(.is-active) { background: rgba(9, 34, 68, 0.85); border: 1px solid rgba(255, 231, 163, 0.3); box-shadow: 0 6px 16px rgba(6, 20, 40, 0.45); } .nav[data-substyle="glass"] .nav-sub { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); } /* ---- התאמה אישית ---- כל הערכים מגיעים כמשתני CSS מהניהול, ולכן אין כאן שום ערך קשיח: מה שמוגדר בפאנל הוא מה שנצבע. הנפילות-לאחור הן בדיוק הלוח הכהה, כדי שבחירה ריקה לא תיתן תפריט שקוף. */ .nav[data-substyle="custom"] .nav-sub { background: var(--nsub-bg, rgba(9, 34, 68, 0.98)); border: var(--nsub-bw, 2px) solid var(--nsub-bc, #d39a1a); border-radius: var(--nsub-radius, 14px); box-shadow: var(--nsub-shadow, 0 14px 30px rgba(6, 20, 40, 0.5)); backdrop-filter: var(--nsub-blur, none); -webkit-backdrop-filter: var(--nsub-blur, none); padding: var(--nsub-pad, 0.45rem); gap: var(--nsub-gap, 0.25rem); } /* **הפריט עצמו, כולל הפעיל.** ‎:not(.is-active)‎ הוציא מהשליטה בדיוק את הכפתור שרואים -כדור הזהב של העמוד הנוכחי- ולכן הוא מקבל כאן כלל משלו ולא מוחרג. ‎background‎ (ולא ‎background-color‎) כדי לדרוס את הגרדיאנט. */ .nav[data-substyle="custom"] .nav-sub .nav-link { color: var(--nsub-fg, #eaf2ff); background: var(--nsub-item, transparent); border: var(--nsub-item-bw, 0) solid var(--nsub-item-bc, transparent); border-radius: var(--nsub-item-radius, 999px); padding: var(--nsub-item-pad, 0.45rem 1rem); } .nav[data-substyle="custom"] .nav-sub .nav-link.is-active { background: var(--nsub-act-bg, #ffd15a); color: var(--nsub-act-fg, #4a2f14); } /* **מעבר העכבר אחרון, וחל גם על הפריט הפעיל.** הוא ושורת הפריט הפעיל הן באותה specificity, ולכן מי שמאוחר בקובץ מנצח: כשהוא ישב לפניה, ריחוף על הכפתור של העמוד הנוכחי -הכפתור שרואים בפועל- לא שינה דבר, והפקד נקרא כאילו אינו עובד. */ .nav[data-substyle="custom"] .nav-sub .nav-link:hover, .nav[data-substyle="custom"] .nav-sub .nav-link.is-active:hover { background: var(--nsub-hover, rgba(255, 231, 163, 0.16)); color: var(--nsub-fg-hover, var(--nsub-fg, #eaf2ff)); } .nav[data-substyle="wood"] .nav-sub { background: linear-gradient(180deg, #8a5a2b, #5e3a17); border-color: #3a2410; box-shadow: 0 14px 28px rgba(6, 20, 40, 0.5), inset 0 1px 0 rgba(255, 231, 163, 0.35); } .nav[data-substyle="wood"] .nav-sub .nav-link { color: #ffeccc; } .nav[data-substyle="wood"] .nav-sub .nav-link:hover { background: rgba(255, 231, 163, 0.18); } /* ---- תפריט ניווט: עטיפה + כפתור-טירה (מובייל) ---- */ .nav-wrap { display: flex; align-items: center; } .nav-toggle { display: none; } /* בדסקטופ הקישורים גלויים; הכפתור מופיע רק במובייל */ /* כפתור בצורת טירה (חומה עם צריחים, שער ודגל) -בנוי כולו ב-CSS */ .nav-toggle { position: relative; width: 2.7rem; height: 2.5rem; padding: 0; background: transparent; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s; } .nav-toggle:active { transform: translateY(1px); } .nav-castle { position: absolute; left: 50%; bottom: 0.15rem; transform: translateX(-50%); width: 2rem; height: 1.55rem; background: linear-gradient(180deg, #d6cfc0, #a89e8b); border: 1.5px solid #6b6456; border-radius: 2px; box-shadow: inset 0 -3px 5px rgba(90, 80, 60, 0.35), 0 2px 5px rgba(0, 0, 0, 0.4); } .nav-castle::before { /* צריחים (שיני חומה) */ content: ''; position: absolute; left: -1.5px; right: -1.5px; top: -6px; height: 6px; background: repeating-linear-gradient(90deg, #c7bfae 0 5px, transparent 5px 9px); border-top: 1.5px solid #6b6456; } .nav-castle::after { /* שער */ content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0.72rem; height: 0.85rem; background: #5a3a18; border: 1px solid #3f2810; border-bottom: none; border-radius: 6px 6px 0 0; } .nav-castle-flag { /* מוט הדגל */ position: absolute; left: 50%; top: -0.85rem; width: 1.5px; height: 0.6rem; background: var(--c-gold-deep); transform: translateX(-50%); } .nav-castle-flag::after { /* דגל אדום מתנופף -תנופה חיה יותר */ content: ''; position: absolute; left: 1.5px; top: 0; width: 10px; height: 6px; background: var(--c-red); border-radius: 1px; clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%); transform-origin: left center; animation: nav-flag 1.3s ease-in-out infinite; } /* גל שעובר לאורך הדגל: skew מתחלף + כיווץ/מתיחה קלים -> תחושת בד שמתבדר ברוח */ @keyframes nav-flag { 0% { transform: skewY(0deg) scaleX(1); } 25% { transform: skewY(-9deg) scaleX(0.88); } 50% { transform: skewY(2deg) scaleX(1.02); } 75% { transform: skewY(8deg) scaleX(0.9); } 100% { transform: skewY(0deg) scaleX(1); } } @media (prefers-reduced-motion: reduce) { .nav-castle-flag::after { animation: none; } } .nav-toggle:hover .nav-castle { filter: brightness(1.06); } /* ---- תוכן ---- */ .content { position: relative; z-index: 10; flex: 1 0 auto; /* גדל למלא את הגובה הפנוי -דוחף את הפוטר לתחתית המסך */ display: flex; flex-direction: column; padding-top: 4.2rem; } .container { width: min(1100px, 92vw); margin-inline: auto; } /* ---- פוטר ---- */ .footer { position: relative; /* **12 ולא 10: מעל שכבת הדמויות הקדמיות** (‎.scene-front‎, z:11). הדמויות הקדמיות אינן יושבות ב-‎.scene‎ (z:0) אלא בשכבה נפרדת על ה-body שכל מטרתה לעלות **מעל הקלף** (‎.content‎, z:10) - וכך הן עלו גם על הפוטר ועל כפתורי הרשתות שבתוכו. **נמדד באתר החי:** בנקודת החפיפה עם אייקון לינקדאין האלמנט העליון היה ‎folk-body‎, כלומר נעל של דמות מצוירת על כפתור לחיץ. ‎z-index‎ על הסרגל עצמו אינו פתרון: ‎.footer‎ הוא ‎position: relative‎ עם ‎z-index‎, כלומר stacking context, וילד אינו יכול לצאת ממנו - אותה מלכודת שכבר תועדה כאן על בועת הדיבור. לכן ההעלאה היא של הפוטר. הרקע נשאר כמעט שקוף, ולכן הדמויות ממשיכות להיראות **מבעד** לפוטר (כפי שהערה הבאה מתארת) - הן פשוט אינן מצוירות עוד מעל הטקסט והכפתורים. */ z-index: 12; /* רקע כמעט שקוף -> הדמויות המהלכות בתחתית הסצנה נראות מבעד לפוטר במקום שיכסה אותן. רק דהייה עדינה מאוד לתחתית; הקריאוּת נשמרת ע"י צל-טקסט חזק. */ background: linear-gradient(180deg, rgba(13, 62, 120, 0.0), rgba(13, 62, 120, 0.1) 60%, rgba(13, 62, 120, 0.3)); color: #eaf2ff; padding: 3.2rem 0 1.2rem; /* רווח עליון גדול יותר -> הפרדה מהתוכן/הסצנה */ /* צל כפול -שכבה כהה רחבה + קו חד, לקריאוּת גם מעל הסצנה הבהירה */ text-shadow: 0 1px 3px rgba(6, 20, 40, 0.9), 0 0 8px rgba(6, 20, 40, 0.7); margin-top: auto; } /* **הריפוד העליון של הפוטר אינו בולע לחיצות.** הוא ‎3.2rem‎ של רקע כמעט שקוף שנועד להפריד מהסצנה, ומעליו הפוטר יושב ב-‎z:12‎ -כלומר האזור הזה מכסה את תחתית הסצנה. נמדד ב-820 וב-390: הדלת של בית עמדה שם, ‎elementFromPoint‎ החזיר ‎FOOTER‎, והנגיעה לא פתחה כלום - בזמן שעל המסך הבית נראה לחיץ לגמרי. ‎pointer-events: none‎ על ה**מיכל** ו-‎auto‎ על מה שבאמת אינטראקטיבי, ולא רשימה של ילדים בשמותיהם: זה בדיוק הכשל שכבר תועד כאן על ‎.social-link‎, שם הרשימה החריגה במקרה את הסרגל שבתוך הפוטר. */ .footer { pointer-events: none; } .footer a, .footer button, .footer .social-bar, .footer-inner > * { pointer-events: auto; } .footer-inner { width: min(1100px, 92vw); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.95rem; } .footer a:hover { color: var(--c-gold-light); } .footer-legal { display: flex; justify-content: center; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .footer-link { display: inline-block; background: none; border: none; cursor: pointer; color: var(--c-gold-light); font-family: inherit; font-size: 0.9rem; padding: 0.2rem 0.3rem; text-shadow: inherit; transition: color 0.15s, transform 0.15s, text-shadow 0.15s; } .footer-link:hover { color: #fff; transform: translateY(-1px) scale(1.05); text-shadow: 0 0 10px rgba(255, 231, 163, 0.7); } .footer-sep { opacity: 0.6; } /* ---- סרגל רשתות חברתיות (מנוהל מהניהול) ---- */ .social-bar { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.55rem; --social-size: 2.5rem; } .social-bar.social-pos-footer { width: 100%; order: -1; margin-bottom: 0.35rem; } /* בראש הפוטר */ .social-title { flex-basis: 100%; text-align: center; font-size: 0.82rem; opacity: 0.85; margin-bottom: 0.1rem; } .social-link { width: var(--social-size, 2.5rem); height: var(--social-size, 2.5rem); display: inline-flex; align-items: center; justify-content: center; background: var(--sc, #666); color: #fff; text-decoration: none; box-shadow: 0 2px 8px rgba(6, 20, 40, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.14); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease; } .social-link svg { width: 54%; height: 54%; fill: currentColor; display: block; } .social-link:hover, .social-link:focus-visible { transform: translateY(-3px) scale(1.09); box-shadow: 0 7px 18px rgba(6, 20, 40, 0.55), 0 0 16px var(--sc, #888); filter: brightness(1.12); color: #fff; } /* צורות */ .social-shape-circle .social-link { border-radius: 50%; } .social-shape-rounded .social-link { border-radius: 28%; } .social-shape-square .social-link { border-radius: 12%; } /* סגנונות */ .social-style-light .social-link { background: #fff; color: var(--sc, #444); box-shadow: 0 2px 8px rgba(6, 20, 40, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .social-style-light .social-link:hover { background: var(--sc, #444); color: #fff; } .social-style-dark .social-link { background: rgba(10, 22, 44, 0.85); color: #fff; box-shadow: 0 2px 8px rgba(6, 20, 40, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .social-style-dark .social-link:hover { color: var(--sc, #7cc6f6); box-shadow: 0 7px 18px rgba(6, 20, 40, 0.6), 0 0 16px var(--sc, #888); } /* מיקום צף -פינה קבועה על המסך */ .social-bar[class*="social-pos-float"] { position: fixed; z-index: 60; flex-direction: column; background: rgba(13, 62, 120, 0.28); backdrop-filter: blur(4px); padding: 0.45rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(6, 20, 40, 0.4); } .social-pos-float-bl { bottom: 1rem; left: 1rem; } .social-pos-float-br { bottom: 1rem; right: 1rem; } .social-pos-float-tl { top: 4.6rem; left: 1rem; } .social-pos-float-tr { top: 4.6rem; right: 1rem; } /* מיקום אנכי מותאם (גובה במסך) לסרגל הצף -גובר על עיגון הפינה האנכי, שומר על שמאל/ימין */ .social-bar.social-vpos-on { top: var(--social-vpos, 85%); bottom: auto; transform: translateY(-50%); } /* מיקום "בתוך הסצנה" -אייקונים מפוזרים במרחב המשחק עם ריחוף עדין (חלק כמו הסצנה). **12/13 ולא 4/6, מאותה סיבה של הפוטר**: שכבת הדמויות הקדמיות (‎.scene-front‎) יושבת ב-z:11 על ה-body, ולכן כל ערך נמוך ממנה פירושו דמות שצועדת על כפתור. הסדר היחסי בין השתיים נשמר (הטירה מעל השביל). */ .social-scene { position: fixed; inset: 0; z-index: 12; pointer-events: none; --social-size: 2.5rem; } /* שכבת אייקונים המתלבשת אחד-לאחד על הטירה (אותה גאומטריה כמו castle-wrap/castle-lights), כך שהאחוזים יחסיים לתמונת הטירה והאייקונים תמיד נשארים עליה בכל רזולוציה. */ .social-scene-castle { inset: auto; top: auto; right: auto; bottom: calc(var(--water-h) + var(--ground-h) - var(--castle-sink)); left: 50%; width: var(--castle-width); transform: translateX(-50%); aspect-ratio: 1672 / 941; z-index: 13; } .social-scene-item { position: absolute; pointer-events: auto; /* ריחוף דרך ה-property‏ translate כדי לא להתנגש ב-transform של ה-hover */ animation: social-float 3.6s ease-in-out infinite; animation-delay: var(--fdelay, 0s); filter: drop-shadow(0 3px 6px rgba(6, 20, 40, 0.5)); } @keyframes social-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } } @media (max-width: 640px) { .social-scene { --social-size: 2.1rem; } } @media (prefers-reduced-motion: reduce) { .social-scene-item { animation: none; } } /* ---- התאמה לשעת היום ---- **אייקונים שיושבים בתוך הסצנה מצייתים לתאורה תמיד**, בלי קשר למתג: הם חלק מהנוף, והסצנה כולה מוחשכת בלילה ל-‎brightness(0.52)‎ -אייקון בצבע מלא על רקע כזה נראה כמדבקה שהודבקה מעל התמונה. הערכים נגזרים מהחשכת הסצנה, עם נגיעת זוהר בלילה כדי שיישארו קריאים ולחיצים. המתג (‎.social-daynight‎) ממשיך לשלוט במופעים שמחוץ לסצנה (סרגל/פוטר), שהם ממשק ולא נוף. */ .social-scene .social-scene-item, .social-daynight .social-link { transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.6s ease, background 0.18s ease; } body[data-daytime="dawn"] .social-scene .social-scene-item { filter: brightness(0.84) saturate(0.95); } body[data-daytime="dusk"] .social-scene .social-scene-item { filter: brightness(0.74) saturate(0.9); } body[data-daytime="night"] .social-scene .social-scene-item { filter: brightness(0.52) saturate(0.8) drop-shadow(0 0 7px rgba(124, 198, 246, 0.32)); } /* מחוץ לסצנה (סרגל/פוטר) -כשהמתג דלוק, **באותם ערכים**: הפוטר מונח על תחתית הסצנה, ולכן אייקון בהיר יותר מהנוף שמאחוריו קופץ לעין כמדבקה. הערך הישן (‎0.78‎ בלילה, מול ‎0.52‎ של הסצנה) היה בדיוק ההפרש הזה. */ body[data-daytime="dawn"] .social-daynight .social-link:not(.social-scene-item) { filter: brightness(0.84) saturate(0.95); } body[data-daytime="dusk"] .social-daynight .social-link:not(.social-scene-item) { filter: brightness(0.74) saturate(0.9); } body[data-daytime="night"] .social-daynight .social-link:not(.social-scene-item) { filter: brightness(0.55) saturate(0.82) drop-shadow(0 0 6px rgba(124, 198, 246, 0.28)); } /* ---- פוטר במובייל: טור ממורכז ומסודר ---- */ @media (max-width: 640px) { /* ריפוד עליון מתון (לא כמו הדסקטופ) + מרווח תחתון שמכבד את ה-safe-area של iOS, כדי שכל הפוטר -כולל קישורי המסמכים -יישב מעל הסרגל התחתון של ספארי ו-ה-home indicator, ולא ייחתך. */ .footer { padding-top: 1.6rem; padding-bottom: max(1.2rem, calc(0.8rem + env(safe-area-inset-bottom))); /* ריפוד צדדי שמכבד את הכפתורים הצפים בפינות (נגישות מימין, מפתח משמאל) -כדי שהטקסט לא ייגע בהם. env(safe-area) לחריץ בלנדסקייפ. */ padding-inline: max(3.4rem, env(safe-area-inset-left), env(safe-area-inset-right)); } .footer-inner { /* 100% (במקום 92vw שיורש מהבסיס) -> נכנס לאזור המרופד של הפוטר ומתמרכז נכון. 92vw גלש מעבר לריפוד הצדדי ודחף את הטקסט ימינה, מחוץ למרכז. */ width: 100%; box-sizing: border-box; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; font-size: 0.85rem; /* גופן קטן יותר במובייל -שהכול יכנס בלי צפיפות */ } .footer-legal { order: 0; /* קישורי המסמכים למעלה */ flex-wrap: wrap; row-gap: 0.1rem; column-gap: 0.4rem; /* רווח קטן בין השורות */ padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 231, 163, 0.18); width: 100%; } /* שתי שורות מסודרות (2 קישורים בכל שורה); כל קישור מיושר לימין בטור שלו */ .footer-legal .footer-sep { display: none; } /* בלי מפרידי • -שורות נקיות */ .footer-legal .footer-link { flex: 1 0 40%; /* כל קישור ~חצי רוחב -> 2 בשורה, 4 קישורים = 2 שורות */ text-align: right; /* יישור לימין (RTL) בתוך הטור */ font-size: 0.82rem; padding-block: 0.1rem; /* שורות צפופות יותר */ } /* סרגל הרשתות במובייל -אייקונים מעט קטנים יותר */ .social-bar { gap: 0.5rem; margin-bottom: 0.5rem; } .social-link { width: 2.3rem; height: 2.3rem; } .footer-inner > span { /* זכויות יוצרים -קטן ועדין, למטה */ order: 2; font-size: 0.74rem; opacity: 0.8; } } /* ---- שעון DEBUG (?clock) ---- */ .clock-debug { position: fixed; bottom: 1rem; inset-inline-start: 1rem; z-index: 70; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; background: rgba(13, 30, 60, 0.85); backdrop-filter: blur(8px); border: 1px solid rgba(255, 231, 163, 0.4); border-radius: 999px; color: #ffe7a3; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } .clock-debug .cd-icon { font-size: 1.2rem; } .clock-debug input[type="range"] { width: clamp(140px, 30vw, 260px); accent-color: var(--c-gold); cursor: pointer; } .clock-debug .cd-label { min-width: 7.5rem; text-align: center; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { /* בלי backdrop-filter blur -אפקט יקר שמתעדכן כל פריים מעל הסצנה המונפשת; במובייל זה עומס קומפוזיטור כבד שמקרטע את שאר האנימציות. רקע אטום יותר במקום. */ .topbar { flex-direction: row; gap: 0.4rem; padding-block: 0.5rem; backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(180deg, rgba(13, 62, 120, 0.85), rgba(13, 62, 120, 0.62)); } /* שמירת מקום בצד שמאל לכפתור הנגישות -רק כשהוא יושב בסרגל (absolute). כשהוא מרחף (ברירת המחדל) הסרגל מנצל את כל הרוחב ללוגו. */ body.a11y-m-bar .topbar { padding-inline-end: 3.6rem; } .content { padding-top: 4.6rem; } /* כפתור-הטירה גלוי וצמוד לימין (order כדי שיהיה ראשון = הימני ביותר ב-RTL) */ .nav-toggle { display: block; } .nav-wrap { position: relative; order: -1; } /* התפריט כפאנל נפתח מתחת לטירה, צמוד לימין, בסגנון האתר (זהב/כחול-לילה) */ .nav { display: none; position: absolute; top: calc(100% + 0.7rem); right: 0; flex-direction: column; gap: 0.4rem; min-width: 12.5rem; padding: 0.7rem; background: linear-gradient(180deg, rgba(24, 82, 150, 0.99), rgba(9, 34, 68, 0.99)); border: 2px solid var(--c-gold-deep); border-radius: 16px; box-shadow: 0 16px 36px rgba(6, 20, 40, 0.6), inset 0 1px 0 rgba(255, 231, 163, 0.25); } /* חוד משולש נקי שמצביע כלפי מעלה אל הטירה (בצד ימין, כי RTL) */ .nav::before, .nav::after { content: ''; position: absolute; width: 0; height: 0; border-inline: 9px solid transparent; right: 1.15rem; } .nav::before { top: -11px; border-bottom: 10px solid var(--c-gold-deep); } .nav::after { top: -8px; border-inline-width: 7px; border-bottom: 8px solid rgba(24, 82, 150, 0.99); } .nav-wrap.open .nav { display: flex; animation: nav-drop 0.22s ease both; } .nav-link { padding: 0.55rem 1rem; font-size: 0.98rem; text-align: center; border: 1px solid rgba(255, 231, 163, 0.18); background: rgba(255, 255, 255, 0.05); } .nav-link:hover { background: rgba(255, 231, 163, 0.16); } /* במגירה אין שכבה צפה: הפריט ובניו הם טור אחד, והבנים מוזחים ומוקטנים מעט כדי שהשיוך ייקרא בעין. חץ ה"יש כאן עוד" יורד -אין מה לפתוח. */ .nav-item.has-sub { display: flex; flex-direction: column; gap: 0.4rem; } .nav-item.has-sub > .nav-link::after { content: none; } .nav-item.has-sub::after { content: none; } /* במגירה התפריט הוא טור אחד; כל וריאנטי המיקום אינם חלים כאן. */ .nav[data-subpos] .nav-sub, .nav-sub { position: static; translate: none; margin-top: 0; left: auto; right: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; gap: 0.4rem; padding-inline-start: 0.9rem; } .nav-sub .nav-link { font-size: 0.92rem; } } @keyframes nav-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { .clock-debug { inset-inline: 1rem; justify-content: center; } .clock-debug .cd-label { min-width: 6.5rem; font-size: 0.9rem; } } /* ---- מסך נקי (עמוד CMS ללא סצנה) -רקע חלופי נעים ---- */ body.scene-clean, body.live-clean { background: radial-gradient(120% 90% at 50% 0%, #2f6fb0, transparent 60%), linear-gradient(180deg, #1c4e86 0%, #123a68 45%, #0b2748 100%); background-attachment: fixed; } /* תצוגה חיה -מסך נקי: הסתרת הסצנה הקיימת */ body.live-clean .scene { display: none !important; } /* ---- תמונה שלא נמצאה (‎.is-missing‎, נקבע מ-js/admin.js) ---- קובץ שנמחק מהדיסק אך נשאר מוגדר הציג עד כה את סמל התמונה השבורה של הדפדפן ולצידו את **שם הקובץ** בטקסט גולמי -שני דברים שאינם שייכים לאתר, ובאמצע הפאנל הם נראים כאילו הוא עצמו נשבר. במקומם איור בשפת הסצנה: מסגרת מקווקוות (הקו המקווקו הוא שאומר "חסר" ולא "כך זה אמור להיראות"), שמש והר. - **SVG מוטבע ולא קובץ**: אין בקשת רשת נוספת בדיוק ברגע שבקשה כבר נכשלה, והאיור נשאר חד בכל גודל -מממוזערת של 3.4rem ועד תצוגה מקדימה מלאה. - **‎font-size: 0‎ + ‎color: transparent‎** מסלקים את טקסט ה-‎alt‎ ואת הסמל שהדפדפן מצייר לצידו. ה-‎alt‎ עצמו נשאר במרקאפ, ולכן קורא-מסך ממשיך להקריא אותו -מה שיורד כאן הוא הציור, לא המידע. - הצבעים חצי-שקופים בכוונה: אותו איור יושב גם על קלף בהיר (דיאלוגים בפאנל) וגם על כרטיס כהה (תיק העבודות), בלי שני עיצובים נפרדים. */ img.is-missing { /* ‎content‎ הוא מה שבאמת מעלים את סמל השבירה. ‎alt=""‎ **נוסה ונמדד ולא הספיק** -כרום מצייר את הסמל גם על ‎alt‎ ריק, ולכן הוא נשאר בפינה מעל האיור. ‎content‎ מחליף את התוכן המצויר של האלמנט עצמו, ואיתו הולך גם הסמל. ה-‎src‎ אינו נוגע בזה ולכן נשאר שלם -וזה התנאי, כי ‎wgLoad‎ קורא את הכתובות מה-DOM. */ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Crect width='64' height='48' rx='7' fill='%23a8823f' fill-opacity='.13'/%3E%3Crect x='4' y='4' width='56' height='40' rx='5' fill='none' stroke='%23b98f3d' stroke-width='2.2' stroke-dasharray='6 4.5' opacity='.75'/%3E%3Ccircle cx='21' cy='17.5' r='4.4' fill='%23dda94b' opacity='.9'/%3E%3Cpath d='M10 37.5 21.5 25.5l7.4 7.6 6.4-5.4 18.7 9.8z' fill='%238d6c3c' opacity='.6'/%3E%3C/svg%3E"); object-fit: contain; /* fallback לדפדפן שאינו מחיל ‎content‎ על ‎‎ (פיירפוקס): שם התמונה השבורה מציגה את ה-‎alt‎ בלבד בלי סמל בולט, ולכן די באיור כרקע. */ background-color: rgba(120, 90, 40, 0.08); background-repeat: no-repeat; background-position: center; background-size: min(72%, 4.4rem) auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Crect x='4' y='4' width='56' height='40' rx='5' fill='none' stroke='%23b98f3d' stroke-width='2.2' stroke-dasharray='6 4.5' opacity='.75'/%3E%3Ccircle cx='21' cy='17.5' r='4.4' fill='%23dda94b' opacity='.9'/%3E%3Cpath d='M10 37.5 21.5 25.5l7.4 7.6 6.4-5.4 18.7 9.8z' fill='%238d6c3c' opacity='.6'/%3E%3C/svg%3E"); font-size: 0; color: transparent; min-height: 2.5rem; } /* ============================================================ מצב סטטי למחשב בלי האצה גרפית (html.peleg-lite) ============================================================ הזיהוי וההסבר המלא בסקריפט המוטבע שב-layout.php. השורה התחתונה שנמדדה ברינדור תוכנה: אנימציה אחת ויחידה -קטנה ככל שתהיה- מכריחה הרכבה-מחדש של כל העמוד בכל פריים (~240ms ב-CPU), ולכן 3fps; אפס אנימציות = 89fps. מכאן שהמצב חייב להיות כל-או-כלום: עצירה גורפת, בלי רשימת חריגים שנשחקת. animation: none ולא paused -בכוונה: paused משאיר את קידום השכבות (נמדד 17fps בלבד), ו-none מוריד אותו ומחזיר את הדף לציור סטטי אחד. transitions נשארים -הם קצרים, רצים רק בתגובה לפעולה, וזה מה שמשאיר למרחף ולקרוסלה משוב. */ html.peleg-lite *, html.peleg-lite *::before, html.peleg-lite *::after { animation: none !important; } /* הדמויות והציפורים ממוקמות ע"י האנימציה עצמה (מיקום = animation-delay, חוק מתועד) -בלי תנועה כולן נערמות בנקודת המוצא. מוסתרות, לא קפואות. scene-front נושאת רק את הדמויות הקדמיות ואת שכבת הבועות -יורדת כולה. (שכבת הסייבר במצב "מקדימה" ישבה בה פעם, וההסתרה הזאת העלימה את האפקט כולו כאן; היום יש לה מארח משלה, .cyber-front, שאינו נוגע בכלל הזה.) העשן מהארובות הוא תמרים שמצוירים זה על זה -קפואים הם כתם; יורדים גם. */ html.peleg-lite .folk-layer, html.peleg-lite .folk-layer-back, html.peleg-lite .scene-front, html.peleg-lite .birds, html.peleg-lite .house-fx-smoke { display: none !important; } /* המגילות: בלי אנימציה אין fill, והחלון נשאר מקובע ב-translateY(-100%) - אותן שתי שורות בדיוק של בלוק צמצום-התנועה שב-components.css, שכבר נקנה שם במדידה. is-open נקבע מ-animationend שאינו נורה כשאין אנימציה, ולכן גם overflow משוחרר. */ html.peleg-lite .scroll-win { overflow: visible; } /* ---- מצב הסייבר במסך סטטי ---- **אפקט קפוא הוא ארטיפקט, לא אפקט.** נמדד בצילום של כל תשעת הסגנונות: הפריטים המונפשים הם שריד התנועה -מלבנים תקועים ב-‎peleg‎, שריטות לבנות ב-‎film‎, פסים ורודים ב-‎glitch‎- ואילו שכבות הרקע נועדו להיות סטטיות (רשת, גרעיניות, גוון, פרספקטיבה) ונראות מצוין. לכן הפריטים יורדים, ומה שנשאר נקבע ב-‎data-cystill‎ (בורר בעורך העמוד). ‎display: none‎ ולא ‎visibility‎: אלה עשרות אלמנטים, וכאן כל שכבה שנשארת בציור עולה. */ html.peleg-lite .cyber-fx .cy-el { display: none !important; } html.peleg-lite .cyber-fx[data-cystill="none"] { display: none !important; }