/* Blog pages use the same internal-page language, with a calmer editorial rhythm. */ .blog-main{padding:0 0 clamp(52px,8vw,120px);background:var(--cream);min-height:55vh} .blog-shell{width:100%;margin-inline:auto} .blog-index-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:30px;width:min(1465px,calc(100% - 80px));height:auto;min-height:max(200px,min(294px,calc((100svh - 144px) * .2983)));display:grid;place-items:center;text-align:center;color:#fff;padding:0;margin:0 auto clamp(30px,5vw,70px);background:#431f10} .blog-hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover} .blog-index-hero::after,.blog-article-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(67,31,16,.82) 0%,rgba(67,31,16,.70) 48%,rgba(67,31,16,.84) 100%)} .blog-index-hero__copy,.blog-article-hero__copy{position:relative;z-index:1} .blog-kicker{display:none} .blog-index-title,.blog-article-title{font-size:min(90px,calc((100svh - 144px) * .0913));line-height:1.06;margin:0;font-weight:800;color:#fff} .blog-index-title .is-accent,.blog-article-title .is-accent{background:linear-gradient(90deg,#ffd26b,#f16a2c);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .blog-index-copy{max-width:42ch;margin:20px auto 0;font-size:clamp(16px,1.45vw,21px);line-height:1.6;color:rgba(255,255,255,.88)} .blog-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(18px,2.2vw,30px)} .blog-section-head h2{margin:0;font-size:clamp(25px,3vw,42px);color:#431f10} .blog-section-head p{margin:0;color:#7c6f69;font-size:15px} .blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,30px);align-items:start} .blog-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid rgba(67,31,16,.1);border-radius:24px;box-shadow:0 12px 34px rgba(67,31,16,.09);min-height:100%;transition:transform .25s ease,box-shadow .25s ease} .blog-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(67,31,16,.16)} .blog-card-media{display:block;aspect-ratio:1.46;overflow:hidden;background:#f4e8dc} .blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.blog-card:hover img{transform:scale(1.04)} .blog-card-body{display:flex;flex-direction:column;flex:1;padding:clamp(18px,2vw,28px)} .blog-card h3{margin:0 0 10px;font-size:clamp(21px,2vw,29px);line-height:1.15;color:#20364c} .blog-card p{margin:0;color:#756c68;font-size:clamp(14px,1.1vw,16px);line-height:1.65;display:block} .blog-read{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:22px;color:#c44f21;font-weight:800;text-decoration:none;font-size:16px}.blog-read span{font-size:22px;transition:transform .2s ease}.blog-read:hover span{transform:translateX(-4px)} .blog-card:nth-child(4){grid-column:2} .blog-article-hero{position:relative;isolation:isolate;overflow:hidden;width:min(1465px,calc(100% - 80px));height:auto;min-height:max(200px,min(294px,calc((100svh - 144px) * .2983)));display:grid;place-items:center;text-align:center;color:#fff;background:#431f10;padding:0;border-radius:30px;margin:0 auto clamp(30px,5vw,64px)} .blog-article-hero__copy{max-width:1200px;width:100%;padding-inline:24px}.blog-article-crumb{margin:0 0 12px;color:rgba(255,255,255,.8);font-size:14px}.blog-article-crumb a{color:inherit;text-decoration:none}.blog-article-crumb a:hover{text-decoration:underline;color:#fff}.blog-article-crumb i{font-style:normal;margin-inline:7px;color:rgba(255,254,251,.68)} .blog-article-title{font-size:min(90px,calc((100svh - 144px) * .0913));max-width:none}.blog-article-lead{display:none} .blog-article-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(28px,6vw,90px);align-items:start;max-width:1040px;margin-inline:auto}.blog-article-content{font-size:clamp(14px,1.15vw,17px);line-height:1.65;color:#443c38}.blog-article-content h2{font-size:clamp(25px,2.4vw,36px);line-height:1.2;color:#431f10;margin:1.4em 0 .35em}.blog-article-content p{margin:0 0 1.05em}.blog-article-content p:first-child{font-size:inherit;color:#2e2724}.blog-article-aside{position:sticky;top:24px;isolation:isolate;overflow:hidden;background:#fbe9df;border:1px solid transparent;border-radius:22px;padding:24px;color:#431f10}.blog-article-aside::before{content:"";position:absolute;z-index:-2;inset:-65%;background:conic-gradient(from 0deg,rgba(241,106,44,.9),rgba(255,210,107,.9),rgba(251,233,223,.05),rgba(241,106,44,.9));animation:blog-aside-border 8s linear infinite}.blog-article-aside::after{content:"";position:absolute;z-index:-1;inset:1px;border-radius:21px;background:#fbe9df}.blog-article-aside>*{position:relative;z-index:1}.blog-article-aside strong{display:block;font-size:20px;font-weight:900;line-height:1.2;margin-bottom:7px}.blog-article-aside p{margin:0 0 30px;line-height:1.6;font-size:15px}.blog-help-btn{display:inline-flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:999px;background:var(--grad-accent);color:#fff;text-decoration:none;font-size:13px;font-weight:800;box-shadow:0 8px 18px rgba(241,106,44,.24);transition:transform .2s ease,box-shadow .2s ease}.blog-help-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(241,106,44,.34)}.blog-help-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}.blog-article-nav{display:flex;justify-content:space-between;gap:12px;margin:clamp(32px,5vw,64px) auto 0;max-width:1040px;padding-top:22px;border-top:1px solid rgba(67,31,16,.15)}.blog-article-nav a{color:#431f10;font-weight:700;text-decoration:none}.blog-article-nav a:hover{color:#c44f21}.blog-empty{text-align:center;padding:80px 20px;color:#431f10} @keyframes blog-aside-border{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.blog-article-aside::before{animation:none}} .blog-footer{margin-top:0} @media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-card:nth-child(4){grid-column:auto}.blog-article-layout{grid-template-columns:1fr}.blog-article-aside{position:relative;top:auto;order:-1}.blog-article-aside p{display:inline;margin-inline-end:12px}} @media (max-width:1024px){.blog-main{padding-top:0}.blog-index-hero,.blog-article-hero{width:min(calc(100% - 48px),720px);height:auto;min-height:clamp(254px,35.5vw,314px);border-radius:36px;margin-top:-16px;margin-bottom:32px}.blog-index-title,.blog-article-title{font-size:clamp(52px,8.4vw,72px)}.blog-article-hero__copy{padding-inline:16px}.blog-article-crumb{font-size:clamp(15px,2.1vw,18px)}} @media (max-width:600px){.blog-shell{width:100%}.blog-index-hero,.blog-article-hero{width:calc(100% - 32px);height:auto;min-height:230.65px;border-radius:32px;margin-top:-16px;margin-bottom:16px}.blog-index-hero::before,.blog-article-hero::before{content:"";position:absolute;z-index:1;left:50%;top:-64.35px;width:91.35px;height:91.35px;transform:translateX(-50%);border-radius:50%;background:var(--cream);pointer-events:none}.blog-index-title,.blog-article-title{font-size:clamp(33px,10vw,52px)}.blog-grid,.blog-section-head,.blog-article-layout,.blog-article-nav{width:min(calc(100% - 28px),1240px);margin-inline:auto}.blog-grid{grid-template-columns:1fr;gap:16px}.blog-card:nth-child(4){grid-column:auto}.blog-card-body{padding:20px}.blog-article-hero{padding:30px 20px}.blog-article-layout{gap:18px}.blog-article-content,.blog-article-content p,.blog-article-content p:first-child{font-size:18px;line-height:1.6}.blog-article-aside{position:relative;top:auto;align-self:start;height:auto;min-height:0;display:block;padding:22px}.blog-article-aside strong{font-size:20px;margin-bottom:6px}.blog-article-aside p{margin-bottom:30px}.blog-article-nav{flex-direction:column}.blog-section-head{display:block}.blog-section-head p{margin-top:8px}} /* כרטיס התרומה משתמש באותו אפרסק מדויק של אזור "רוצים להיות חלק ממעגל הנתינה". */ .blog-article-aside{background:var(--jn-bg,#fff5f0)} .blog-article-aside::before{background:conic-gradient(from 0deg,rgba(241,106,44,.9),rgba(255,210,107,.9),rgba(255,245,240,.05),rgba(241,106,44,.9))} .blog-article-aside::after{background:var(--jn-bg,#fff5f0)} /* ניווט מאמרים מינימליסטי: תמונה קטנה, שם מאמר וחץ ברור. */ .blog-article-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;direction:ltr;gap:14px;margin:clamp(32px,5vw,64px) auto 0;max-width:1040px;padding-top:20px;border-top:1px solid rgba(67,31,16,.13)} .blog-nav-card{display:grid;grid-template-columns:68px minmax(0,1fr) 26px;align-items:center;gap:11px;min-width:0;padding:9px 11px;border:1px solid rgba(67,31,16,.1);border-radius:16px;background:#fff;color:#431f10;text-decoration:none;direction:rtl;box-shadow:0 6px 18px rgba(67,31,16,.06);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease} .blog-nav-card:hover{transform:translateY(-2px);border-color:rgba(241,106,44,.55);box-shadow:0 10px 22px rgba(67,31,16,.1)} .blog-nav-card img{width:68px;height:58px;object-fit:cover;border-radius:11px;display:block} .blog-nav-card__copy{display:flex;flex-direction:column;min-width:0;text-align:right} .blog-nav-card__copy small{margin-bottom:3px;color:#786b62;font-size:11px;font-weight:700} .blog-nav-card__copy strong{display:block;overflow:hidden;color:#431f10;font-size:15px;line-height:1.25;white-space:normal} .blog-nav-card__arrow{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--jn-bg,#fff5f0);color:#f16a2c;font-size:18px;line-height:1} .blog-nav-card--empty{visibility:hidden;box-shadow:none;border-color:transparent;background:transparent} @media (max-width:600px){.blog-article-content{text-align:center;font-size:16px;line-height:1.6}.blog-article-content p,.blog-article-content p:first-child{font-size:16px;line-height:1.6}.blog-article-aside{text-align:center;background:var(--jn-bg,#fff5f0)}.blog-article-aside p{margin-bottom:10px}.blog-help-btn{margin-inline:auto}.blog-article-nav{grid-template-columns:1fr;gap:10px;margin-top:36px}.blog-nav-card{grid-template-columns:58px minmax(0,1fr) 24px;padding:8px 10px}.blog-nav-card img{width:58px;height:50px}.blog-nav-card__copy strong{font-size:14px}.blog-nav-card--empty{display:none}} /* דסקטופ: מעטפת רחבה יותר וכרטיס תרומה דביק שאינו שובר את הכותרת. */ @media (min-width:1025px){ .blog-article-layout{max-width:1180px;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(34px,5vw,72px)} .blog-article-nav{max-width:1180px} .blog-article-aside{position:sticky;top:24px;align-self:start} .blog-article-aside strong{white-space:nowrap} } .blog-article-aside p{margin-bottom:20px} @media (max-width:600px){.blog-article-aside p{margin-bottom:20px}} /* בגלילה הכרטיס נשאר מתחת לפס ההידר הצף ולא נבלע מאחוריו. */ @media (min-width:901px){.blog-article-aside{top:calc(var(--hd-h,72px) + 16px)}} /* ארכיון הבלוג — התאמה למסך הארכיון מהאפיון. */ .blog-index-hero{margin-bottom:0} .blog-section-head{display:none} .blog-grid{width:min(1380px,calc(100% - 80px));grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(60px,6vw,92px) clamp(18px,2vw,38px);margin:clamp(96px,7vw,120px) auto 0} .blog-card:nth-child(4){grid-column:auto} .blog-card{position:relative;overflow:visible;border:0;border-radius:20px;background:#fff;box-shadow:0 4px 8px rgba(67,31,16,.16);min-height:0} .blog-card-media{position:absolute;z-index:2;top:-59px;left:50%;width:112px;height:112px;transform:translateX(-50%);aspect-ratio:1;border-radius:50%;overflow:visible;padding:5px;background:var(--cream);box-shadow:none} .blog-card-media::before{content:"";position:absolute;inset:-7px;border:2px dashed rgba(67,31,16,.86);border-radius:50%;pointer-events:none} .blog-card-media img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;transition:transform .35s ease} .blog-card:hover .blog-card-media img{transform:scale(1.04)} .blog-card-body{align-items:center;text-align:center;padding:67px 18px 23px;min-height:166px} .blog-card h3{margin:0 0 9px;color:var(--ink);font-size:clamp(18px,1.3vw,23px);line-height:1.15;font-weight:800} .blog-card p{margin:0;color:#80746e;font-size:clamp(12px,.9vw,14px);line-height:1.32;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .blog-read{margin-top:13px;padding-top:0;color:#c25624;font-size:13px;line-height:1.2;gap:4px} .blog-read span{font-size:15px} @media (max-width:1024px){.blog-grid{width:min(calc(100% - 56px),760px);grid-template-columns:repeat(2,minmax(0,1fr));gap:78px 24px;margin-top:104px}} @media (max-width:600px){.blog-grid{width:min(calc(100% - 32px),360px);grid-template-columns:1fr;gap:78px;margin-top:96px}.blog-card{border-radius:20px}.blog-card-body{padding:66px 22px 23px;min-height:166px}.blog-card h3{font-size:21px}.blog-card p{font-size:14px;line-height:1.4}.blog-card-media{width:108px;height:108px;top:-56px}.blog-read{font-size:13px}} /* מידות הארכיון בפריים: גריד קומפקטי, כרטיסים אחידים וטקסט קצר. */ .blog-grid{width:min(1380px,70vw)} .blog-card-body{height:172px;min-height:172px;box-sizing:border-box;padding:54px 16px 14px} .blog-card h3{font-size:clamp(17px,1.25vw,21px);line-height:1.12;margin-bottom:7px;min-height:2.24em} .blog-card p{font-size:clamp(11px,.8vw,13px);line-height:1.25;-webkit-line-clamp:3} .blog-read{margin-top:10px;font-size:12px} @media (max-width:1024px){.blog-grid{width:min(70vw,760px)}} @media (max-width:600px){.blog-grid{width:min(calc(100% - 32px),360px)}.blog-card-body{height:172px;min-height:172px;padding:54px 20px 14px}.blog-card h3{font-size:20px}.blog-card p{font-size:13px;line-height:1.3}.blog-read{font-size:13px}} .blog-card-body{flex:0 0 172px;overflow:hidden} /* כרטיס Figma: התמונה חוצה את השפה העליונה, והקשת המקווקוות נשארת בחוץ בלבד. */ .blog-card-media{box-sizing:border-box;width:50%;max-width:149px;height:auto;aspect-ratio:1;top:calc(-50% - 10px);padding:5px;background:var(--cream);border-radius:50%;overflow:visible} .blog-card-media::before{inset:-8px -8px auto;height:calc(50% + 14px);border:2px dashed rgba(67,31,16,.86);border-bottom:0;border-radius:999px 999px 0 0} .blog-card-media{top:0;transform:translate(-50%,-58%)} .blog-card-body{flex:0 0 auto;height:auto;min-height:166px;overflow:visible;padding:72px 16px 18px} .blog-card h3{min-height:2.24em} .blog-card p{display:block;overflow:visible;-webkit-line-clamp:unset;-webkit-box-orient:initial;font-size:clamp(11px,.8vw,13px);line-height:1.25} .blog-read{margin-top:12px} @media (max-width:600px){.blog-grid{gap:110px}.blog-card-body{min-height:166px;padding:72px 20px 18px}.blog-card p{font-size:13px;line-height:1.3}.blog-card-media{width:100px;max-width:100px}.blog-card-media::before{inset:-7px -7px auto;height:calc(50% + 12px)}} /* תיקון ארכיון: תגיות עדינות, גובה אחיד ומרווח שורות שמכיל את קשת התמונה. */ .blog-grid{row-gap:clamp(92px,7vw,120px)} .blog-card-body{display:flex;flex:0 0 263px;height:263px;min-height:263px;box-sizing:border-box;overflow:hidden;padding:66px 16px 18px} .blog-card-tags{display:flex;justify-content:center;align-items:center;gap:6px;height:24px;min-height:24px;margin:0 0 8px;direction:rtl} .blog-card-tags span{display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border:1px solid rgba(196,116,78,.22);border-radius:999px;background:#fff5f0;color:#8c5540;font-size:11px;line-height:1;white-space:nowrap} .blog-card h3{height:47px;min-height:47px;margin:0 0 7px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .blog-card p{height:3.9em;min-height:3.9em;margin:0;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} .blog-read{height:22px;min-height:22px;margin-top:10px} .blog-card-tags span{border:0;box-shadow:none;background:rgba(255,245,240,.88);color:#9a6048} .blog-card-media::before{inset:-10px -10px auto;height:calc(50% + 18px);border-width:1.5px;border-radius:999px 999px 0 0} .blog-card-media::before{display:none} /* Original Figma frame: 204 × 102 after rotation, around a 149.251px photo. Keep the exported curve and its 14/14 dashes proportional to the photo. */ .blog-card-dash{position:absolute;z-index:0;left:50%;top:50%;width:calc((100% - 10px) * 1.366827);height:auto;aspect-ratio:2 / 1;transform:translate(-50%,-90.28%);opacity:.7;pointer-events:none} .blog-card-dash::after{content:"";position:absolute;left:25%;top:-50%;width:50%;height:200%;background:url("/assets/blog/figma-card-arc.svg") center / 100% 100% no-repeat;transform:rotate(90deg)} .blog-card-media img{position:relative;z-index:1} .blog-read{display:inline-flex;align-items:center;justify-content:center;width:max-content;align-self:center;height:28px;min-height:28px;margin-top:10px;padding:4px 13px;border-radius:999px;background:var(--grad-accent);color:#fff;box-shadow:0 5px 12px rgba(241,106,44,.2);font-weight:700} .blog-read span{color:#fff} @media (max-width:600px){.blog-grid{width:min(calc(100% - 72px),320px);row-gap:120px;margin-top:104px}.blog-card-body{flex-basis:263px;height:263px;min-height:263px;padding:66px 14px 18px}.blog-card-media{width:118px;max-width:118px;height:auto}.blog-index-hero{min-height:200.65px}} /* 15.9.2026: גוף הכרטיס היה בגובה קבוע של 263px, ומתחת לכפתור "קרא עוד" נשארו 54 עד 62 פיקסלים ריקים. עכשיו הגובה נקבע לפי התוכן והריווח מתחת לכפתור הוא 30px בדיוק. התגיות, הכותרת והתקציר בגובה קבוע משלהם, ולכן כל הכרטיסים נשארים באותו גובה. */ .blog-card-body{flex:0 0 auto;height:auto;min-height:0;padding-bottom:30px} /* Let article text shrink within the grid and grow vertically when enlarged. */ .blog-article-content, .blog-article-aside { min-width: 0; } .blog-article-hero__copy { overflow-wrap: anywhere; } /* הכותרת מוצגת רק עד ש-blog.js מרנדר את העמוד; אם הסקריפט נכשל, היא נשארת ומספקת לעמוד כותרת ראשית אמיתית. */ .blog-fallback-title { width: min(1240px, calc(100% - 40px)); margin: 120px auto 40px; font-size: clamp(32px, 4vw, 58px); font-weight: 800; color: var(--ink); text-align: center; } /* =================================================================== 8.10.2026 · כרטיס הבלוג בנייד — המרווח והטבעת ------------------------------------------------------------------- חן דיווחה על שני דברים בנייד: מרווח גדול מדי בין הכותרת לטקסט, והקשת המקווקוות שלא יושבת טוב סביב התמונה. ⚠️ מדדתי קודם את שני האתרים — הקיים והריאקטי — ב-360, 390, 412 ו-428: הם **זהים בפיקסל**. אותה קשת, אותו מרווח של 7px, אותה תמונה 108×108. כלומר זו אינה רגרסיה של ההמרה, וזה נראה כך גם באתר הקיים. לכן התיקון כאן משותף לשניהם. **המרווח.** ‎.blog-card h3‎ מקובע ל-‎height:47px‎ עם חיתוך לשתי שורות. זה קיים כדי שכרטיסים ברשת יתיישרו זה מול זה — אבל בנייד הרשת היא **טור אחד**, ואין מול מה ליישר. כותרת בשורה אחת (21px) בתוך קופסה של 47px משאירה כ-23px חור, וזה בדיוק מה שנראה כמרווח מוגזם. כאן היא חוזרת לגדול לפי תוכנה. **הטבעת.** בנייד ‎.blog-card-media::before‎ הופכת לחצי טבעת (‎inset:-7px -7px auto‎ + ‎height:calc(50% + 12px)‎), והקצוות הקטועים בצדדים הם מה שנקרא "לא יושב טוב". כאן היא חוזרת להיות מעגל שלם וקונצנטרי לתמונה — אותה שפה כמו בדסקטופ. =================================================================== */ @media (max-width: 600px) { /* הכותרת גדלה לפי התוכן; אין רשת ליישר מולה */ .blog-card h3 { height: auto; min-height: 0; margin: 0 0 6px; } /* ושאר הכרטיס לא צריך להיות מקובע בגלל זה */ .blog-card-body { height: auto; } /* =================================================================== הקווקו — חצי קשת מעל התמונה, לא טבעת שלמה ------------------------------------------------------------------- ⚠️ בסבב הקודם החזרתי כאן טבעת מלאה, וזו הייתה טעות שלי: חן ציינה שהקווקו אמור להיות **רק מעל** התמונה. הצורה המקורית נשמרת — חצי קשת פתוחה למטה — ומה שמתוקן הוא רק מה שלא ישב: קשת ה-SVG הנפרדת, שרחבה מהתמונה ב-37% ומוזזת ‎-90.28%‎ אנכית, ולכן קצותיה נראו קטועים לצדדים. כאן הקשת מצוירת ב-CSS ולכן תמיד מיושרת לתמונה: אותו מרכז, אותו רדיוס, פתוחה למטה בדיוק. =================================================================== */ .blog-card-media::before { display: block; inset: -7px -7px auto; height: calc(50% + 12px); border: 1.5px dashed rgba(67, 31, 16, .86); border-bottom: 0; border-radius: 999px 999px 0 0; } /* קשת ה-SVG יורדת — היא זו שלא ישבה */ .blog-card-dash { display: none; } /* ⚠️ והתמונה חייבת להישאר **עיגול**. שני כללים סותרים מעליי נתנו לה רוחב 100px וגובה 108px — אליפסה. ‎aspect-ratio‎ ורוחב מפורש נועלים אותה לריבוע, וה-‎object-fit‎ מונע מהתצלום להימתח. */ .blog-card-media { width: 108px; max-width: 108px; height: 108px; aspect-ratio: 1; } .blog-card-media img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } } /* =================================================================== 9.10.2026 — רשת הכרטיסים ברוחב הרצועה החומה שמעליה ------------------------------------------------------------------- הכרטיסים היו צרים בהרבה מהכותרת "נתינה כל השנה" שמעליהם, ונמדד עד כמה: ההפרש הגיע ל-372 פיקסל ב-1440, ול-345 ב-1600. רוחב מסך רצועה חומה כרטיסים הפרש 1920 1465px 1344px 121px 1600 1465px 1120px 345px 1440 1380px 1008px 372px 1280 1220px 896px 324px המקור: ‎.blog-grid‎ קיבל ‎min(1380px, 70vw)‎, כלומר 70 אחוז מהמסך, בעוד הרצועה נשלטת בכלל מקובץ אחר. ‎blog.css‎ אמנם כותב לה ‎min(1465px, 100% - 80px)‎, אבל ‎internal-page-hero.css:69‎ מנצח אותו בסלקטוריות גבוהה יותר: body.internal-page .internal-hero { width:var(--internal-banner-width) } ולכן הרוחב האמיתי הוא המשתנה, ‎min(1465px,calc(100% - 48px))‎ בדסקטופ ו-‎calc(100% - 36 * var(--iph-unit))‎ מתחת ל-1024. העתקת הביטוי מ-‎blog.css‎ הייתה משאירה הפרש קבוע של 32 פיקסל, וכך אכן קרה במדידה הראשונה אחרי התיקון. לכן כאן נשאב **אותו משתנה עצמו**, ולא ביטוי מועתק. שתיהן גם יושבות באותו הורה (‎.blog-shell‎), ולכן זה רוחב זהה לפיקסל ולא "בערך". ⚠️ מתחת ל-600 פיקסל לא נוגעים: שם הרשת היא טור יחיד שכוון ידנית מול העיצוב ב-389 פיקסל. השורה האחרונה כאן מחזירה את הערך הקיים כדי שהכלל של הטאבלט לא יזלוג לטלפון. =================================================================== */ @media (min-width:1025px){ .blog-grid{ width: var(--internal-banner-width, min(1465px, calc(100% - 48px))); } } @media (min-width:601px) and (max-width:1024px){ .blog-grid{ width: calc(100% - 36 * var(--iph-unit, 1px)); } } @media (max-width:600px){ .blog-grid{ width: min(calc(100% - 72px), 320px); } }