/* grumi-web.css — שכבת האינטרנט של הכלים. נטענת בכל כלי, אבל **מציירת רק כשהכלי עומד בפני עצמו בדפדפן**: כל מה שכאן יושב תחת , וה-class הזה נוסף ב-grumi-web.js רק כאשר window.self === window.top. בתוך האפליקציה (iframe) שום כלל כאן לא חל, ולכן מי שכבר אצלנו לא רואה הזמנה להוריד את מה שכבר מותקן אצלו. */ body:not(.gw-on) .gw { display: none !important; } .gw-on .gw { max-width: 640px; margin: 26px auto 0; padding: 0 16px; font-family: 'Assistant', Arial, sans-serif; direction: rtl; } /* ── כרטיס ההמשך ─────────────────────────────────────────────────────── */ .gw-cta { background: linear-gradient(160deg, #fff6f0, #ffe9dd); border: 1px solid #f3d6c4; border-radius: 22px; padding: 22px 20px; box-shadow: 0 18px 40px -30px rgba(60, 40, 25, .55); } .gw-cta h2 { margin: 0 0 6px; font-family: 'Varela Round', 'Assistant', Arial, sans-serif; font-size: 20px; line-height: 1.35; color: #3a2c22; } .gw-cta p.gw-sub { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: #6b584a; } .gw-list { list-style: none; margin: 0 0 18px; padding: 0; } .gw-list li { position: relative; padding-inline-start: 26px; margin-bottom: 9px; font-size: 14.5px; line-height: 1.55; color: #4a3a2e; } .gw-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: #ff8f6e; box-shadow: inset 0 0 0 3px #fff6f0; } .gw-btn { display: block; text-align: center; background: #ff8f6e; color: #fff !important; text-decoration: none; font-weight: 800; font-size: 16px; padding: 14px 18px; border-radius: 16px; box-shadow: 0 10px 22px -12px rgba(255, 143, 110, .9); } .gw-btn:hover { background: #f97f5c; } .gw-note { margin: 10px 0 0; font-size: 12.5px; color: #8a7565; text-align: center; } /* ── קישורים לכלים אחרים ─────────────────────────────────────────────── */ .gw-more { margin-top: 22px; } .gw-more h3 { margin: 0 0 10px; font-family: 'Varela Round', 'Assistant', Arial, sans-serif; font-size: 15.5px; color: #3a2c22; } .gw-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .gw-more a { display: block; background: #fff; border: 1px solid #efe2d8; border-radius: 14px; padding: 11px 14px; font-size: 14.5px; color: #3a2c22; text-decoration: none; } .gw-more a:hover { border-color: #ff8f6e; } /* ── פוטר ────────────────────────────────────────────────────────────── */ .gw-foot { margin: 22px 0 30px; text-align: center; font-size: 12.5px; color: #8a7565; line-height: 1.7; } .gw-foot a { color: #c96a45; text-decoration: none; } @media (min-width: 560px) { .gw-more ul { grid-template-columns: 1fr 1fr; } } /* ═══ פריסת ה-WEB ═══════════════════════════════════════════════════════ הכלים נבנו לרוחב טלפון וחיים כך בתוך האפליקציה. במסך רחב, עומדים לבדם, הם נמתחו לכל 1440 הפיקסלים: כרטיס אחד ברוחב מסך, כותרת 23px שמתפרסת על 720px, ושורות טקסט שאי-אפשר לעקוב אחריהן. זו הנראות שג'ון צילם, וזה גם מה שגוגל סורק מאז שפתחנו את העמודים. הפתרון: עמודה קריאה במרכז (מידה מקובלת לקריאה — לא צר כמו טלפון ולא רוחב מסך), הרקע החם ממשיך למלא את החלון מאחוריה, וסרגל מותג קטן למעלה. 🚨 חל רק על `body.gw-web` — כלומר רק כשהכלי עומד לבדו בדפדפן. בתוך ה-iframe של האפליקציה אף כלל כאן לא נוגע בכלום. */ html { background: linear-gradient(180deg, #fbf4ee, #f6e7e0); min-height: 100%; } body.gw-web { max-width: 760px; margin-inline: auto; background: transparent; padding-bottom: 8px; } /* סרגל המותג */ .gw-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 4px; font-family: 'Assistant', Arial, sans-serif; direction: rtl; } .gw-top .gw-brand { font-family: 'Varela Round', 'Assistant', Arial, sans-serif; font-size: 21px; font-weight: 700; letter-spacing: .5px; color: #3a2c22; text-decoration: none; } .gw-top .gw-brand span { color: #ff8f6e; } .gw-top .gw-tools { font-size: 13.5px; color: #b9663f; text-decoration: none; background: #fff; border: 1px solid #f0dccd; border-radius: 99px; padding: 6px 14px; } .gw-top .gw-tools:hover { border-color: #ff8f6e; } /* 🚨 מסך רחב: הכלים מגדירים רוחב מלא על סקשנים ועטיפות פנימיות, ולכן הגבלת ה-body לבדה משאירה אותם מתוחים. הכלל הזה מחזיר כל בלוק ישיר לתוך העמודה — בלי לגעת במבנה הפנימי של אף כלי. */ @media (min-width: 800px) { body.gw-web > section, body.gw-web > div, body.gw-web > main, body.gw-web > header, body.gw-web > footer { max-width: 100% !important; } /* 🚨 בלי `overflow:hidden` כאן. כשה-html במצב `visible`, ערך ה-overflow של ה-body **מתפשט לחלון עצמו** — כלומר `overflow:hidden` על body לא מגזים פינות, הוא מבטל את הגלילה של כל העמוד. זה מה שקרה: הדף נראה נכון ולא היה אפשר לגלול בו (ג'ון, 19.8.2026). הפינות המעוגלות נשארות; מה שנופל מחוצה להן הוא פינה של כרטיס, ולא סוף העולם. */ body.gw-web { box-shadow: 0 0 0 1px rgba(60,40,25,.06), 0 26px 60px -40px rgba(60,40,25,.5); border-radius: 22px; } } /* טקסט קריא: הכלים כיוונו לטלפון, ובמסך רחב 13.5px נראה זעיר */ @media (min-width: 800px) { body.gw-web { font-size: 16px; } } /* 🚨 לוגו כפול: `grumi-mascot.js` מזריק סימן-מילה GRUMI בראש כל כלי (נכון בתוך האפליקציה, שם אין שום זהות אחרת). כשעומדים לבד בדפדפן, הסרגל שלנו כבר נושא את המותג — ושני לוגואים זה מתחת לזה נראה כמו תקלה. */ body.gw-web .glogo, body.gw-web .grumi-brandbar { display: none !important; } /* 🚨 חלל מת ב-hero. הכלים בנו את ה-hero כגריד של שתי עמודות — טקסט + עמודת "סטטים"/איורים — והסקין מסתיר את השנייה (היא נבנתה לדף נחיתה רחב ולא לאפליקציה). התוצאה במסך רחב: הגריד ממשיך לשמור עמודה של ~235px ורווח של 34px למשהו שאינו קיים, הכותרת נדחקת לחצי מסך והכפתור נזרק לצד. באפליקציה זה לא נראה כי ה-iframe צר ממילא ונופל לעמודה אחת. כאן: כשעומדים לבד בדפדפן, hero תמיד עמודה אחת. */ body.gw-web [class*="hero__inner"], body.gw-web [class*="hero-inner"], body.gw-web [class*="hero__grid"] { grid-template-columns: 1fr !important; gap: 14px !important; }