/* ═══════════════════════════════════════════════════════════════════ YS FINANCE · מרכז ידע (Knowledge Center) — shared stylesheet Loaded by knowledge/index.html and every knowledge/.html article. Reuses the exact brand tokens from the homepage so the section reads as one site. This file is intentionally EXTERNAL (not inlined like the homepage) so 30–50 article pages stay tiny and consistent. RTL · mobile-first. ═══════════════════════════════════════════════════════════════════ */ :root{ /* 04/08/2026 · האתר בהיר בלבד. בלי ההצהרה הזו, מצב הלילה האוטומטי של כרום/סמסונג באנדרואיד הופך את הצבעים אלגוריתמית: רקעים לבנים הפכו לשחורים, ה-tint לאפור כהה, והכחול נעשה תכלת — בעוד הלוגואים (תמונות) נשארו בהירים ו"קפצו" מהרקע. מלווה ב- בכל עמוד. */ color-scheme:only light; --navy-900:#061220;--navy-800:#0A1A2F;--navy-700:#122642;--navy-600:#1B3A5E; --white:#FFFFFF;--grey-50:#F7F9FC;--grey-100:#EFF3F8;--grey-200:#E2E8F1; --ink:#0A1626;--ink-2:#425063;--ink-3:#5F6E82;--ink-4:#93A0B2; --blue:#1D5A9E;--blue-2:#2C74C4;--blue-3:#63A0E0;--blue-tint:#EAF1FA;--blue-soft:#D9E7F7; --gold:#C9A227;--gold-2:#E3C25E;--gold-soft:#F5EDD6; --on-navy:#D6E2F0;--on-navy-2:#9FB2C9; --ok:#12704B;--rej:#B4432B; --line:rgba(10,22,38,.10);--line-2:rgba(10,22,38,.055); --line-d:rgba(214,226,240,.16);--line-d2:rgba(214,226,240,.3); --r-sm:8px;--r:14px;--r-lg:22px; --e:cubic-bezier(.2,.72,.24,1);--e-out:cubic-bezier(.16,1,.3,1); --pad:20px;--max:1240px; --sh-sm:0 1px 2px rgba(10,22,38,.04),0 4px 12px -6px rgba(10,22,38,.10); --sh:0 2px 6px rgba(10,22,38,.04),0 22px 48px -24px rgba(10,22,38,.3); --sh-lg:0 4px 12px rgba(10,22,38,.05),0 38px 76px -40px rgba(10,22,38,.42); } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%} body{ background:var(--white);color:var(--ink);text-align:start;overflow-wrap:break-word; font-family:'Heebo',system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16.5px;line-height:1.76; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit} h1,h2,h3,h4{font-weight:700;line-height:1.18;letter-spacing:-.01em} .dsp{font-family:'Frank Ruhl Libre',Georgia,serif;font-weight:700;letter-spacing:-.02em} /* visually-hidden (RTL-safe: clip, never left:-9999px) */ .sr{position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px} .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} :focus-visible{outline:3px solid var(--gold-2);outline-offset:2px} .i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .i-sm{width:18px;height:18px} /* ─────────── buttons ─────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:inherit;font-size:15px;font-weight:600;cursor:pointer; padding:13px 22px;min-height:48px;border-radius:100px;border:1px solid transparent; background:var(--navy-800);color:#fff;text-decoration:none;white-space:nowrap; transition:background .3s var(--e),transform .3s var(--e),box-shadow .3s var(--e)} .btn:hover{background:var(--navy-700);transform:translateY(-2px);box-shadow:var(--sh-sm)} .btn .i{stroke:currentColor} .btn-gold{background:var(--gold);color:var(--navy-900)} .btn-gold:hover{background:var(--gold-2)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{background:var(--grey-50);border-color:var(--ink-4)} /* 🔴 שומר-מקום להדר המוזרק — מונע Layout Shift (נוסף 05/08/2026) ───────────────────────────────────────────────────────────────────────────── kb.js מזריק את ההדר ל-afterbegin של אחרי טעינת defer. עד לרגע הזה התוכן יושב 67px גבוה מדי, ואז נדחף למטה בבת אחת. נמדד לפני התיקון: מאמר במובייל CLS 0.78 · עמוד מחשבון במובייל CLS 1.00 · אינדקס 0.25 (עמודי השורש לא סבלו מזה כי ההדר שלהם כתוב ב-HTML ולא מוזרק.) הפסאודו-אלמנט תופס בדיוק את גובה ההדר — 67px, נמדד זהה ב-320/390/600/900/ 1100/1440 ולכן אין צורך ב-media query — ונעלם ברגע ש-kb.js מוסיף .kb-ready, באותה פעולה סינכרונית שבה ההדר נכנס. הדפדפן מצייר רק את המצב הסופי. ⚠️ שינית את גובה ההדר (min-height ב-.kb-nav-in)? עדכן כאן את אותו מספר. */ body:not(.kb-ready)::before{content:'';display:block;height:67px} /* קישור הדילוג (WCAG 2.4.1 רמה A). מוסתר עד שהוא מקבל פוקוס במקלדת. ⚠️ RTL: להסתרה משתמשים ב-right:-9999px ולא ב-left — בדיוק כמו .skip בעמודי השורש. left שלילי ב-RTL דוחף החוצה לצד הגלילה ומרחיב את הדף. */ .kb-skip{position:absolute;right:-9999px;top:10px;z-index:200;background:var(--blue); color:#fff;padding:13px 22px;border-radius:var(--r-sm);text-decoration:none;font-weight:600} .kb-skip:focus{right:14px} /* ═════════ HEADER (locked to the "stuck" white style — no dark hero here) ═════════ */ .kb-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(10,22,38,.03)} .kb-nav-in{display:flex;align-items:center;gap:18px;min-height:66px; max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} .kb-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto} .kb-brand img{height:40px;width:auto} .kb-brand b{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.1} /* 🔴 --ink-3 ולא --gold. נמדד ע"י axe-core: זהב על לבן ב-9.5px נותן 2.42:1 — כשל WCAG AA (נדרש 4.5:1), ב-48 עמודי המרכז. --ink-3 נותן 5.30:1. זו אינה החלטת עיצוב חדשה: עמודי השורש כבר צובעים את אותו "YS FINANCE" ב---ink-3 בדיוק כשההדר לבן (.brand span{color:var(--ink-3)}), וההדר כאן נעול ללבן לצמיתות. הזהב פשוט לא עודכן כשההדר ננעל. זהות המותג נשמרת בלוגו ובאייקונים. ⚠️ אל תחזירו ל---gold — זה מחזיר כשל נגישות. */ .kb-brand span{display:block;font-size:9.5px;letter-spacing:.22em;color:var(--ink-3);font-weight:600} .kb-menu{display:flex;align-items:center;gap:2px;margin-inline-start:auto} .kb-menu a{font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none; padding:9px 12px;border-radius:8px;white-space:nowrap;transition:color .25s,background .25s} .kb-menu a:hover{color:var(--ink);background:var(--grey-50)} .kb-menu a.on{color:var(--blue);font-weight:600} /* CTA יחיד, יושב בתוך .kb-menu. margin-inline-start שומר על אותו מרווח מהקישורים שהיה קודם כשהכפתור היה אלמנט נפרד מחוץ לתפריט (gap:18px של .kb-nav-in). */ .kb-nav-cta{flex:0 0 auto;white-space:nowrap;margin-inline-start:14px} /* 🔴 04/08/2026 · תיקון קריטי. ה-CTA בהדר הוא , אבל הוא יושב בתוך .kb-menu — ולכן הכלל ‎.kb-menu a‎ (ספציפיות 0,1,1) דרס את ‎.btn‎ ו-‎.btn-gold‎ (0,1,0): הכפתור קיבל color:var(--ink-2) על רקע זהב = ניגודיות 3.39:1 → כשל WCAG AA (נדרש 4.5:1), וגם border-radius:8px במקום 100px — הכפתור המרובע היחיד באתר. הופיע ב-50 עמודי המרכז. השחזור חייב להיות ספציפי יותר מ-‎.kb-menu a‎, ומכאן a.btn. אל תוריד את ה-a. */ .kb-menu a.btn{font-size:15px;font-weight:600;padding:13px 22px;border-radius:100px} .kb-menu a.btn-gold,.kb-menu a.btn-gold:hover{color:var(--navy-900)} .kb-menu a.btn:hover{background:var(--navy-700);color:#fff} .kb-menu a.btn-gold:hover{background:var(--gold-2)} .kb-burger{display:none;flex-direction:column;justify-content:center;gap:5px; width:46px;height:46px;border:1px solid var(--line);border-radius:10px;background:#fff; cursor:pointer;margin-inline-start:auto} .kb-burger span{display:block;width:20px;height:2px;background:var(--ink);margin-inline:auto; transition:transform .3s,opacity .3s} .kb-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .kb-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .kb-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:900px){ .kb-menu{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:0; background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh); padding:10px var(--pad) 18px;transform:translateY(-12px);opacity:0;pointer-events:none; transition:transform .3s var(--e-out),opacity .3s;max-height:calc(100vh - 66px);overflow:auto} .kb-menu.open{transform:none;opacity:1;pointer-events:auto} .kb-menu a{padding:13px 6px;border-bottom:1px solid var(--line-2);border-radius:0} /* אותה סיבה כמו למעלה: הכלל שמעליו הוסיף קו תחתון ורדיוס 0 גם לכפתור שבמגירה. */ .kb-menu a.btn{padding:13px 22px;border:1px solid transparent;border-radius:100px} .kb-nav-cta{margin-top:12px;margin-inline-start:0;align-self:flex-start} .kb-burger{display:flex} } /* ═════════ HERO ═════════ */ .kb-hero{position:relative;background: radial-gradient(1200px 380px at 80% -20%,rgba(45,116,196,.28),transparent 60%), linear-gradient(160deg,var(--navy-800),var(--navy-900)); color:#fff;padding:56px 0 48px;overflow:hidden} .kb-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5} /* 🔴 כחול ולא זהב. gold-2 על לבן = 1.73:1 — כשל WCAG AA חמור (axe-core). זהו בדיוק הדפוס שכבר קיים בעמודי השורש: שם `.eyebrow` כחול כברירת מחדל, ורק `.on-navy .eyebrow` הוא זהב — כי על נייבי הזהב עובר. כאן הרקע לבן תמיד. זהות הזהב נשמרת בקו השיער שב-::before, בדיוק כמו בדף הבית. */ .kb-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600; letter-spacing:.14em;color:var(--blue);text-transform:uppercase;margin-bottom:14px} .kb-eyebrow::before{content:"";width:22px;height:1px;background:var(--gold)} /* 04/08/2026 · 46px הרגיש כמו מוצר אחר לצד ה-H2 בן 56px של האתר הראשי. 54px מקרב את מרכז הידע לסולם הטיפוגרפי של המותג בלי לגעת בפריסה. */ .kb-hero h1{font-size:clamp(30px,5vw,54px);color:#fff;margin-bottom:14px} .kb-hero p{font-size:clamp(15px,2.2vw,18px);color:var(--on-navy);max-width:56ch} /* ─────────── search ─────────── */ .kb-searchwrap{margin-top:28px;max-width:560px;position:relative} .kb-search{width:100%;height:56px;border-radius:100px;border:1px solid var(--line-d2); background:rgba(255,255,255,.97);padding:0 54px 0 20px;font-family:inherit;font-size:16px; color:var(--ink);box-shadow:var(--sh-sm);transition:box-shadow .3s,border-color .3s} .kb-search::placeholder{color:var(--ink-3)} .kb-search:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 4px rgba(227,194,94,.25)} .kb-search-ic{position:absolute;inset-inline-end:20px;top:50%;transform:translateY(-50%); stroke:var(--ink-3);pointer-events:none} .kb-search-clear{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%); width:34px;height:34px;border-radius:50%;border:0;background:var(--grey-100);cursor:pointer; display:none;place-items:center;color:var(--ink-2)} .kb-search-clear.show{display:grid} /* ═════════ CATEGORY CHIPS ═════════ */ .kb-cats{display:flex;flex-wrap:wrap;gap:10px;padding:26px 0 4px} .kb-chip{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:13.5px; font-weight:600;color:var(--ink-2);background:var(--white);border:1px solid var(--line); border-radius:100px;padding:9px 16px;min-height:42px;cursor:pointer;white-space:nowrap; transition:border-color .25s,background .25s,color .25s,box-shadow .25s} .kb-chip .i{width:16px;height:16px;stroke:var(--ink-3)} .kb-chip:hover{border-color:var(--ink-4);box-shadow:var(--sh-sm)} .kb-chip.on{background:var(--navy-800);border-color:var(--navy-800);color:#fff} .kb-chip.on .i{stroke:var(--gold-2)} /* --ink-4 נתן 2.65:1 על לבן — כשל AA (axe-core). --ink-3 נותן 5.30:1. המצב הפעיל (.kb-chip.on) יושב על נייבי ומטופל בשורה שאחריה. */ .kb-chip .k-count{font-size:11.5px;color:var(--ink-3);font-weight:600} .kb-chip.on .k-count{color:var(--on-navy-2)} /* ═════════ ARTICLE GRID + CARDS ═════════ */ .kb-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;padding:22px 0 6px;border-top:1px solid var(--line-2);margin-top:8px} .kb-count{font-size:13.5px;color:var(--ink-3)} .kb-count b{color:var(--ink);font-weight:700} .kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px;padding:22px 0 12px} .kb-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit; box-shadow:var(--sh-sm);transition:transform .4s var(--e-out),box-shadow .4s var(--e-out),border-color .4s} .kb-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:transparent} .kb-card-cover{position:relative;aspect-ratio:16/10;overflow:hidden; background:linear-gradient(158deg,var(--navy-700),var(--navy-900))} .kb-card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e-out)} .kb-card:hover .kb-card-cover img{transform:scale(1.05)} .kb-card-cover .kb-emblem{position:absolute;inset:0;display:grid;place-items:center;opacity:.5} .kb-card-cover .kb-emblem .i{width:54px;height:54px;stroke:var(--kb-accent,var(--gold-2));stroke-width:1.3} /* tag now sits below the cover (title lives on the image) — inline pill, category-tinted icon */ .kb-card-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700; letter-spacing:.04em;color:var(--ink-2);background:var(--grey-100);border-radius:100px;padding:5px 11px} .kb-card-tag .i{width:13px;height:13px;stroke:var(--kb-accent,var(--gold-2))} .kb-card-body{display:flex;flex-direction:column;flex:1;padding:18px 18px 20px} .kb-card p{font-size:14px;color:var(--ink-2);line-height:1.62;margin-bottom:16px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .kb-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:auto; font-size:12px;color:var(--ink-3);border-top:1px solid var(--line-2);padding-top:14px} .kb-card-meta span{display:inline-flex;align-items:center;gap:5px} .kb-card-meta .i{width:14px;height:14px;stroke:var(--ink-4)} /* empty / no-results state */ .kb-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--ink-3)} .kb-empty .i{width:52px;height:52px;stroke:var(--ink-4);margin:0 auto 16px;stroke-width:1.4} .kb-empty h3{font-size:20px;color:var(--ink);margin-bottom:8px} .kb-empty p{font-size:15px;max-width:44ch;margin:0 auto} /* ═════════ BREADCRUMB ═════════ */ .kb-crumb{font-size:13px;color:var(--ink-3);padding:16px 0} .kb-crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px} /* 04/08/2026 · יעד המגע היה 19px — מתחת למינימום 24×24 של WCAG 2.2 (2.5.8), ובאותו דפוס שכבר תוקן בקישורי הפוטר. display:inline נשמר (שרשרת טקסט אחת), ולכן הריפוד האנכי מרחיב את שטח הלחיצה בלי לשנות את גובה השורה — אפס layout shift. */ .kb-crumb a{color:var(--ink-3);text-decoration:none;padding:7px 2px} .kb-crumb a:hover{color:var(--blue)} .kb-crumb li[aria-current]{color:var(--ink);font-weight:600} .kb-crumb .sep{color:var(--ink-4)} /* ═════════ ARTICLE PAGE ═════════ */ .kb-article{max-width:760px;margin-inline:auto;padding:8px 0 20px} .kb-article-head{margin-bottom:26px} .kb-article-cat{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700; letter-spacing:.06em;color:var(--blue);margin-bottom:14px} .kb-article-cat .i{width:16px;height:16px;stroke:var(--blue)} .kb-article h1{font-size:clamp(27px,4.4vw,40px);color:var(--ink);margin-bottom:16px} .kb-article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:16px; font-size:13px;color:var(--ink-3);padding-bottom:20px;border-bottom:1px solid var(--line)} .kb-article-meta span{display:inline-flex;align-items:center;gap:6px} .kb-article-meta .i{width:15px;height:15px;stroke:var(--ink-4)} .kb-cover{margin:26px 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)} .kb-cover img{width:100%;height:auto} /* branded cover art (no photos → zero copyright risk). Built by kb.js from the category. */ .kb-hero-art{--kb-accent:#E3C25E;position:relative;aspect-ratio:21/9;border-radius:var(--r-lg); overflow:hidden;margin:22px 0 8px;display:grid;place-items:center;box-shadow:var(--sh); background:linear-gradient(158deg,var(--navy-700),var(--navy-900))} /* accent glow is category-driven (set inline by kb.js). color-mix has a graceful fallback above. */ .kb-hero-art{background: radial-gradient(700px 240px at 82% -30%,color-mix(in srgb,var(--kb-accent) 34%,transparent),transparent 60%), linear-gradient(158deg,var(--navy-700),var(--navy-900))} .kb-hero-art::before{content:"";position:absolute;inset:0;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:34px 34px;mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent)} .kb-hero-art .i{width:74px;height:74px;stroke:var(--kb-accent);stroke-width:1.2;opacity:.95;position:relative} @media(max-width:600px){.kb-hero-art{aspect-ratio:16/9}.kb-hero-art .i{width:58px;height:58px}} /* auto table of contents ("בעמוד זה") — built by kb.js from the h2/h3 in .kb-prose */ .kb-toc{background:var(--grey-50);border:1px solid var(--line);border-radius:var(--r); padding:18px 20px;margin:26px 0} .kb-toc-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em; color:var(--ink-3);text-transform:uppercase;margin-bottom:10px} .kb-toc-h .i{width:16px;height:16px;stroke:var(--gold)} .kb-toc ol{list-style:none;counter-reset:toc;display:grid;gap:2px} .kb-toc li{counter-increment:toc} .kb-toc li.lvl3{margin-inline-start:18px} .kb-toc a{display:flex;gap:9px;align-items:baseline;text-decoration:none;color:var(--ink-2); font-size:14.5px;padding:6px 8px;border-radius:8px;transition:background .2s,color .2s} .kb-toc a::before{content:counter(toc);font-size:11px;font-weight:700;color:var(--gold);flex:0 0 auto} .kb-toc li.lvl3 a::before{content:"•";color:var(--ink-4)} .kb-toc a:hover{background:#fff;color:var(--ink)} .kb-toc a.on{color:var(--blue);font-weight:600;background:#fff} .kb-prose :is(h2,h3){scroll-margin-top:84px} /* prose typography — the article body */ .kb-prose{font-size:17.5px;line-height:1.85;color:var(--ink-2)} .kb-prose>*+*{margin-top:1.15em} .kb-prose h2{font-family:'Frank Ruhl Libre',Georgia,serif;font-size:26px;color:var(--ink); margin-top:1.7em;letter-spacing:-.01em} .kb-prose h3{font-size:20px;color:var(--ink);margin-top:1.5em} .kb-prose p{color:var(--ink-2)} .kb-prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px} .kb-prose a:hover{color:var(--blue-2)} .kb-prose strong{color:var(--ink);font-weight:700} .kb-prose ul,.kb-prose ol{padding-inline-start:1.3em} .kb-prose li{margin-top:.5em} .kb-prose li::marker{color:var(--gold)} .kb-prose blockquote{border-inline-start:3px solid var(--gold);background:var(--grey-50); padding:16px 20px;border-radius:0 var(--r) var(--r) 0;color:var(--ink-2);font-size:16.5px} .kb-prose img{border-radius:var(--r);margin:1.4em 0} .kb-prose hr{border:0;border-top:1px solid var(--line);margin:2em 0} .kb-callout{background:var(--blue-tint);border:1px solid var(--blue-soft);border-radius:var(--r); padding:16px 18px;font-size:15.5px;color:var(--ink-2)} .kb-prose ul.kb-check{list-style:none;padding:0;display:grid;gap:10px} .kb-prose ul.kb-check li{margin-top:0;display:flex;gap:11px;align-items:flex-start} .kb-prose ul.kb-check li .i{width:20px;height:20px;stroke:var(--ok);flex:0 0 auto;margin-top:3px} .kb-faq{margin-top:.6em} .kb-faq dt{font-weight:700;color:var(--ink);font-size:17px;margin-top:1.1em} .kb-faq dd{margin:.35em 0 0;color:var(--ink-2)} /* tables (converted from the Word pipe-tables) — scrollable on mobile */ .kb-tablewrap{margin:1.3em 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)} .kb-prose table{width:100%;border-collapse:collapse;font-size:15px;min-width:420px} .kb-prose thead th{background:var(--navy-800);color:#fff;font-weight:600;text-align:start;padding:11px 14px} .kb-prose tbody td{padding:11px 14px;border-top:1px solid var(--line-2);color:var(--ink-2);vertical-align:top} .kb-prose tbody td:first-child{font-weight:600;color:var(--ink)} .kb-prose tbody tr:nth-child(even){background:var(--grey-50)} /* "see also" cross-link box between complementary articles */ .kb-seealso{display:flex;align-items:center;gap:12px;margin:1.4em 0;padding:14px 18px; background:var(--blue-tint);border:1px solid var(--blue-soft);border-radius:var(--r); font-size:15px;color:var(--ink-2)} .kb-seealso .i{width:20px;height:20px;stroke:var(--blue);flex:0 0 auto} .kb-seealso a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px} /* subcategory group heading inside a filtered category view */ .kb-subhead{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:20px 0 -4px; font-family:'Frank Ruhl Libre',Georgia,serif;font-size:19px;font-weight:700;color:var(--ink)} .kb-subhead:first-child{margin-top:4px} .kb-subhead::after{content:"";flex:1;height:1px;background:var(--line)} .kb-subhead .k-n{font-size:12px;color:var(--ink-4);font-weight:600;font-family:'Heebo',sans-serif} /* article footer: share + disclaimer + related */ .kb-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin-top:34px;padding-top:22px;border-top:1px solid var(--line)} .kb-share span{font-size:13px;color:var(--ink-3);font-weight:600} .kb-share a{width:42px;height:42px;border:1px solid var(--line);border-radius:50%; display:grid;place-items:center;color:var(--ink-2);text-decoration:none;transition:.25s} .kb-share a:hover{border-color:var(--gold);background:var(--gold);color:var(--navy-900)} .kb-note{margin-top:24px;font-size:12.5px;line-height:1.7;color:var(--ink-3); background:var(--grey-50);border:1px solid var(--line-2);border-radius:var(--r);padding:16px 18px} /* ─── ייחוס מחבר (E-E-A-T) — מוזרק ע"י kb.js לכל עמודי המאמר ─── */ .kb-byline a{color:var(--ink-2);font-weight:600;text-decoration:none; border-bottom:1px solid var(--line);transition:color .2s,border-color .2s} .kb-byline a:hover{color:var(--blue);border-color:var(--blue)} .kb-authorbox{display:flex;flex-direction:column;gap:16px;margin-top:48px; background:var(--grey-50);border:1px solid var(--line);border-radius:var(--r);padding:22px} .kb-authorbox img{width:72px;height:72px;border-radius:50%;object-fit:cover; object-position:50% 12%;border:1px solid var(--line);flex:0 0 auto} /* זהב על רקע ה-authorbox (#F7F9FC) נתן 2.29:1 — כשל AA. --ink-3 נותן 5.03:1. תווית עזר קטנה מעל שם המחבר; --ink-3 הוא הגוון הנכון לתווית מושתקת, ואותה בחירה כבר נעשתה ב-.tc-tag מאותה סיבה בדיוק (מתועד ב-CLAUDE.md). */ .kb-ab-lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.22em; color:var(--ink-3);margin-bottom:7px} .kb-authorbox b{display:block;font-size:17px;color:var(--ink);font-weight:700;margin-bottom:7px} .kb-authorbox p{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin:0 0 12px} .kb-authorbox>div>a{display:inline-flex;align-items:center;gap:7px;font-size:14px; font-weight:600;color:var(--blue);text-decoration:none} .kb-authorbox>div>a:hover{text-decoration:underline} @media(min-width:600px){ .kb-authorbox{flex-direction:row;align-items:flex-start;gap:20px;padding:26px} } .kb-related{margin-top:48px} .kb-related h2{font-family:'Frank Ruhl Libre',Georgia,serif;font-size:22px;margin-bottom:18px} .kb-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px} .kb-rel{display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--white); border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit; box-shadow:var(--sh-sm);transition:transform .35s var(--e-out),box-shadow .35s var(--e-out),border-color .35s} .kb-rel:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:transparent} .kb-rel-cat{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700; letter-spacing:.04em;color:var(--blue)} .kb-rel-cat .i{width:14px;height:14px;stroke:var(--blue)} .kb-rel h3{font-size:16px;line-height:1.35;color:var(--ink)} .kb-rel span{margin-top:auto;font-size:12px;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px} .kb-rel span .i{width:13px;height:13px;stroke:var(--ink-4)} /* internal link inside prose that points to another article */ .kb-prose a.kb-xref{font-weight:600;text-decoration-color:var(--gold)} /* ═════════ FOOTER ═════════ */ .kb-ft{background:var(--navy-900);color:var(--on-navy-2);font-size:14px;line-height:1.78; padding:48px 0 26px;margin-top:64px} .kb-ft img{height:40px;filter:brightness(0) invert(1);opacity:.9;margin-bottom:16px} .kb-ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px; padding-bottom:30px;border-bottom:1px solid var(--line-d)} .kb-ft h3{font-size:10.5px;letter-spacing:.2em;color:#fff;margin-bottom:14px;font-weight:700} .kb-ft a{color:var(--on-navy-2);text-decoration:none;display:flex;align-items:center; min-height:40px;transition:color .3s} .kb-ft a:hover{color:var(--gold-2)} .kb-ft p{max-width:42ch} .kb-socials{display:flex;gap:10px;margin-top:16px} .kb-socials a{width:42px;height:42px;border:1px solid var(--line-d2);border-radius:50%; display:grid;place-items:center;min-height:0;transition:.3s} .kb-socials a:hover{border-color:var(--gold);background:var(--gold);color:var(--navy-900)} .kb-ft .disc{margin-top:22px;font-size:12px;line-height:1.75;color:#6E7F94} .kb-ft .disc b{color:var(--on-navy)} .kb-ft-bot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between; padding-top:20px;margin-top:20px;border-top:1px solid var(--line-d);font-size:12.5px} .kb-ft-bot a{display:inline-flex} @media(max-width:760px){.kb-ft-grid{grid-template-columns:1fr;gap:22px}} /* back to top */ .kb-totop{position:fixed;inset-inline-end:18px;bottom:18px;z-index:90;width:46px;height:46px; border-radius:50%;background:var(--navy-800);color:#fff;border:0;cursor:pointer; display:grid;place-items:center;opacity:0;transform:translateY(10px);pointer-events:none; box-shadow:var(--sh);transition:opacity .3s,transform .3s} .kb-totop.show{opacity:1;transform:none;pointer-events:auto} .kb-totop .i{stroke:#fff} /* section rhythm */ .kb-section{padding:20px 0 8px} .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} .reveal{opacity:1;transform:none;transition:none} .kb-card,.kb-card-cover img{transition:none} } /* ═══════════ קריאת פעולה למחשבון בתוך מאמר (מוזרק ע"י kb.js) ═══════════ */ .kb-toolcta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:30px 0 6px; background:radial-gradient(120% 130% at 88% 0%,var(--navy-700),var(--navy-900) 62%);color:var(--on-navy); border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--sh-sm)} .kb-toolcta .tc-em{flex:0 0 auto;width:48px;height:48px;border-radius:12px;display:grid;place-items:center; background:rgba(255,255,255,.06);border:1px solid var(--line-d)} .kb-toolcta .tc-em .i{width:26px;height:26px;stroke:var(--gold-2)} .kb-toolcta .tc-tx{flex:1 1 220px} .kb-toolcta .tc-tx b{display:block;color:#fff;font-size:16px;margin-bottom:3px} .kb-toolcta .tc-tx p{color:var(--on-navy-2);font-size:13.5px;line-height:1.5} .kb-toolcta .btn{flex:0 0 auto} @media(max-width:520px){.kb-toolcta .btn{width:100%;justify-content:center}} /* ─── "יש לכם שאלה?" (.ask-cta) — נקודת כניסה למרכז ההתייעצות ─── 🔴 רכיב זהה חייב להתקיים גם ב-index.html (CSS inline נפרד) — אין CSS משותף בין דף הבית למרכז הידע. שינית כאן? סנכרן ידנית לשם, אחרת ה-CTA ייראה שונה. מוזרק ע"י kb.js לעמודי מאמר, לעמוד האינדקס ולעמודי מחשבון. */ .ask-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap; background:var(--white);border:1px solid var(--line);border-inline-start:3px solid var(--gold); border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--sh-sm)} .ask-cta .ask-em{flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:grid; place-items:center;background:var(--gold-soft)} .ask-cta .ask-em .i{width:26px;height:26px;stroke:var(--gold)} .ask-cta .ask-tx{flex:1 1 250px} .ask-cta .ask-tx b{display:block;font-family:'Frank Ruhl Libre',Georgia,serif; font-size:19px;color:var(--ink);margin-bottom:5px;line-height:1.35} .ask-cta .ask-tx p{color:var(--ink-2);font-size:14.5px;line-height:1.6} .ask-cta .btn{flex:0 0 auto} .ask-cta.on-dark{background:radial-gradient(120% 130% at 88% 0%,var(--navy-700),var(--navy-900) 62%); border-color:var(--line-d);border-inline-start-color:var(--gold-2)} .ask-cta.on-dark .ask-em{background:rgba(255,255,255,.06);border:1px solid var(--line-d)} .ask-cta.on-dark .ask-em .i{stroke:var(--gold-2)} .ask-cta.on-dark .ask-tx b{color:#fff} .ask-cta.on-dark .ask-tx p{color:var(--on-navy-2)} @media(max-width:560px){.ask-cta{padding:22px}.ask-cta .btn{width:100%;justify-content:center}} /* מרווחים לפי הקשר ההזרקה */ .kb-article .ask-cta{margin:34px 0 6px} .kb-index-ask{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 8px} .calc-ask{max-width:960px;margin:26px auto 0}