/* Minification failed. Returning unminified contents. (73,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-secondary-color' (2420,14): run-time error CSS1030: Expected identifier, found '#leadOffer' (2420,38): run-time error CSS1031: Expected selector, found ')' (2420,38): run-time error CSS1025: Expected comma or open brace, found ')' (2449,10): run-time error CSS1030: Expected identifier, found '#leadOffer' (2449,34): run-time error CSS1031: Expected selector, found ')' (2449,34): run-time error CSS1025: Expected comma or open brace, found ')' (2454,14): run-time error CSS1030: Expected identifier, found '#leadOffer' (2454,38): run-time error CSS1031: Expected selector, found ')' (2454,38): run-time error CSS1025: Expected comma or open brace, found ')' (2739,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2741,24): run-time error CSS1039: Token not allowed after unary operator: '-kg-chart-btn-color' (2742,28): run-time error CSS1039: Token not allowed after unary operator: '-kg-chart-btn-color' (3144,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3145,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3146,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3147,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3148,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3149,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3150,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3151,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3152,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3153,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3154,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3155,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3156,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3177,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-active-color' (3178,28): run-time error CSS1039: Token not allowed after unary operator: '-bs-accordion-active-bg' (3493,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3494,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3495,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3496,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3497,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3498,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3499,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3500,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3501,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3502,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3503,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3507,154): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3508,34): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3509,34): run-time error CSS1039: Token not allowed after unary operator: '-kg-warn-bg' (3510,32): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft2' (3510,56): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3513,36): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft2' (3513,60): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3517,45): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3519,86): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3520,23): run-time error CSS1039: Token not allowed after unary operator: '-kg-pos' (3521,23): run-time error CSS1039: Token not allowed after unary operator: '-kg-neg' (3528,50): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3531,58): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (3532,137): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3533,38): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3535,93): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3542,55): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3544,45): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3545,62): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3570,97): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3578,30): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (3578,93): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3582,64): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3582,99): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3587,33): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3591,53): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3592,63): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3592,105): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3593,56): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (3593,79): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3600,30): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (3608,56): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3612,68): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3616,48): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (3620,46): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3625,70): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (3626,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3628,96): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3629,66): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3637,99): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3638,73): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3640,104): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3641,66): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3642,60): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3647,103): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3649,28): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3654,53): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3659,72): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3666,36): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3669,54): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3691,48): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (3701,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3704,66): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (3704,89): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3705,70): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3708,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (3708,45): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3709,30): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3711,71): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft2' (3711,95): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3760,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3763,53): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3767,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3768,30): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (3771,70): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3786,53): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft2' (3795,49): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3796,35): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (3800,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3800,62): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft2' (3807,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3811,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3816,52): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3816,76): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3819,70): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (3819,93): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3820,53): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3822,73): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3822,104): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3828,30): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (3828,93): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3855,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3855,64): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3869,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3874,58): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3880,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3884,71): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3888,86): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (3889,71): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3890,107): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3896,91): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3909,71): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3928,105): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3935,48): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (3937,65): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3938,57): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3941,30): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3941,54): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3944,67): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (3944,90): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3947,73): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (3949,69): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (3950,98): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (3951,81): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (3951,104): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (3952,73): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3953,58): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3960,55): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3965,48): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (3977,80): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (3995,75): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (3996,35): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4008,75): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4009,150): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4010,55): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (4013,40): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4016,73): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4018,69): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (4018,92): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (4021,80): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4064,48): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4068,53): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4071,28): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4081,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (4084,55): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4087,81): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4094,42): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4098,80): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (4100,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft2' (4100,46): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4104,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4107,64): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4111,49): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4112,51): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4123,96): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4127,53): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4131,57): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4139,30): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4139,93): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4143,63): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (4143,98): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4148,33): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (4152,52): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4153,62): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4153,104): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (4154,55): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (4154,78): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4169,48): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4174,61): run-time error CSS1039: Token not allowed after unary operator: '-kg-n' (4177,139): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4178,65): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4182,30): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4182,68): run-time error CSS1039: Token not allowed after unary operator: '-kg-fc' (4182,81): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (4189,81): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4191,70): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4195,61): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (4195,84): run-time error CSS1039: Token not allowed after unary operator: '-kg-neg' (4199,71): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4200,86): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4202,57): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4204,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4206,65): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (4206,89): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4208,69): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (4208,92): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (4215,70): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4220,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4222,59): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (4222,82): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4223,56): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (4223,86): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (4223,110): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4234,63): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (4250,48): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4255,70): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (4255,93): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (4259,69): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4270,35): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4270,79): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4272,75): run-time error CSS1039: Token not allowed after unary operator: '-kg-fc' (4272,88): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand' (4275,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4279,106): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4280,56): run-time error CSS1039: Token not allowed after unary operator: '-kg-pos' (4281,56): run-time error CSS1039: Token not allowed after unary operator: '-kg-neg' (4283,88): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft2' (4283,112): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4288,69): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4291,87): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4314,52): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4315,48): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4319,66): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4324,86): run-time error CSS1039: Token not allowed after unary operator: '-kg-n' (4328,106): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4332,94): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4344,112): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4345,91): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4346,144): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4350,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft2' (4350,46): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4355,64): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4373,80): run-time error CSS1039: Token not allowed after unary operator: '-kg-n' (4390,74): run-time error CSS1039: Token not allowed after unary operator: '-kg-n' (4434,82): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4438,48): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4456,55): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4468,55): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4484,71): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' (4490,22): run-time error CSS1039: Token not allowed after unary operator: '-kg-soft' (4490,58): run-time error CSS1039: Token not allowed after unary operator: '-kg-line' (4492,82): run-time error CSS1039: Token not allowed after unary operator: '-kg-ink' (4493,61): run-time error CSS1039: Token not allowed after unary operator: '-kg-brand-dark' (4515,17): run-time error CSS1039: Token not allowed after unary operator: '-kg-muted' */ /** * KupatGemel.aspx - Bootstrap 5 overrides and RTL for fund details page * Works with YMMasterPage (already has dir="rtl" on html) */ /* * וידוא ש-body ו-form לא מגבילים את המרכוז כשהדף הוא קופת גמל. * השימוש ב-body.kg-body (מתווסף ע"י inline script בדפי KupatGemel ו-CompareKupotGemelDetails) * מעניק תאימות מלאה לדפדפנים ישנים שלא תומכים ב-:has() (Safari <15.4, Firefox ישן). */ body.kg-body { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; } body.kg-body form#form1 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; } /* Override compareTables #main – full width on small screens, centered with max-width on desktop. .kg-main is added by inline script in KupatGemel.aspx ו-CompareKupotGemelDetails.aspx */ #main.kg-main { width: 100% !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; } /* RTL and layout for KupatGemel */ .kupat-gemel-page { direction: rtl; text-align: right; /* הוספת padding-bottom כדי לאפשר גלילה נוספת מתחת לכפתור הקבוע */ padding-bottom: 100px; /* בסיס קריאות: 16px — עקבי עם Bootstrap ו-NCAG לטקסט ראשי */ font-size: 1rem; } /* היררכיית כותרות עמוד (דריסת compareTables) */ .kupat-gemel-page .h1Title { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.35; font-weight: 700; } .kupat-gemel-page .h2Title { font-size: 1.125rem; line-height: 1.5; font-weight: 500; } /* Cards: keep original title styling for data sections */ .kupat-gemel-page .card-header.gemel-card-header { background-color: #829a2c; color: #fff; font-weight: bold; border: none; padding: 0.5rem 0.75rem; font-size: 1.0625rem; line-height: 1.35; } /* כיתוב משני אחיד (תחת גרפים, מיון) — 14px */ .kg-muted-caption { font-size: 0.875rem; line-height: 1.45; color: var(--bs-secondary-color); } .kg-page .card { margin-bottom: 1rem; border: 1px solid rgba(0, 0, 0, 0.125); } /* Tables inside cards - preserve original gemelTable look with Bootstrap */ .kg-page .table.gemelTable { margin-bottom: 0; /* דריסת compareTables 14px + איחוד עם תאים */ font-size: 1rem; line-height: 1.45; } .kg-page .table.gemelTable .titleCell, .kg-page .table.gemelTable th.titleCell { background-color: #829a2c; color: #fff; border-color: rgba(255, 255, 255, 0.3); } .kg-page .table.gemelTable .titleCell2 { background-color: #edf2f5; font-weight: 600; } .kg-page .table.gemelTable .gemelCellDetailsTitle, .kg-page .table.gemelTable .gemelCellDetailsBody, .kg-page .table.gemelTable th.gemelCellDetailsTitle { /* דריסת compareTables 12px — גוף טבלה בגודל בסיס קריא */ font-size: 1rem !important; line-height: 1.45; } .kg-page .table.gemelTable .gemelCellDetailsTitle { background-color: #f8f9fa; font-weight: 500; /* override compareTables.css text-indent:8px — יישור RTL נקי בכל טבלאות דף הקופה */ text-indent: 0; } /* מובייל: עמודת הכותרת ~30%, עמודת הערכים ~70% (ההפך מרוחב קבוע 265px שדוחק את המספרים) */ @media (max-width: 576px) { .kg-page .table.gemelTable { table-layout: fixed; width: 100%; } .kg-page .table.gemelTable td.gemelCellDetailsTitle { width: 30% !important; max-width: 30%; box-sizing: border-box; word-break: break-word; hyphens: auto; } .kg-page .table.gemelTable td.gemelCellDetailsBody { width: 70% !important; box-sizing: border-box; } /* יתרות: צמצום ~15% לעמודת הכותרות (מ־30% ל־25%) כדי לפנות מקום לערכים */ .kg-page .table.gemelTable.kg-mob-table-balances td.gemelCellDetailsTitle { width: 25% !important; max-width: 25%; } .kg-page .table.gemelTable.kg-mob-table-balances td.gemelCellDetailsBody { width: 75% !important; } /* חשיפות וחלוקה לנכסים: עמודה ראשונה מתחת ל־50%, table-layout כדי לדרוס Width="230px" */ .kg-page .table.gemelTable.kg-mob-3col-first-narrow { table-layout: fixed; } .kg-page .table.gemelTable.kg-mob-3col-first-narrow th:nth-child(1), .kg-page .table.gemelTable.kg-mob-3col-first-narrow td:nth-child(1) { width: 38% !important; max-width: 40% !important; min-width: 0; box-sizing: border-box; word-break: break-word; hyphens: auto; } /* עמודה 2 (אחוז) רחבה יותר מ-22% כדי שערכים כמו "95.15%" לא יישברו לשתי שורות; עמודה 3 (סכום) מצומצמת בהתאמה — הערכים שם בדרך כלל קצרים מספיק. */ .kg-page .table.gemelTable.kg-mob-3col-first-narrow th:nth-child(2), .kg-page .table.gemelTable.kg-mob-3col-first-narrow td:nth-child(2) { width: 28% !important; box-sizing: border-box; } .kg-page .table.gemelTable.kg-mob-3col-first-narrow th:nth-child(3), .kg-page .table.gemelTable.kg-mob-3col-first-narrow td:nth-child(3) { width: 34% !important; box-sizing: border-box; } /* שורות כותרת משנה (תא יחיד / colspan) */ .kg-page .table.gemelTable.kg-mob-3col-first-narrow tr > td:only-child, .kg-page .table.gemelTable.kg-mob-3col-first-narrow tr > th:only-child { width: 100% !important; max-width: 100% !important; } } .kg-page .table.gemelTable .coloredCell .gemelCellDetailsTitle, .kg-page .table.gemelTable tr.coloredCell td { background-color: #e8f4f0; } /* Positive/negative numbers */ .kg-page .text-positive { color: #006633; } .kg-page .text-negative { color: #D01D30; } /* Breadcrumb – רווחים נאותים, תמיכה ב-RTL (::after במקום ::before) */ .kg-page .breadcrumb { background: transparent; padding: 0.5rem 0; margin-bottom: 0; } .kg-page .breadcrumb-item { padding-inline: 0.35rem; } .kg-page .breadcrumb-item + .breadcrumb-item::before { content: none; } .kg-page .breadcrumb-item:not(:last-child)::after { padding-inline: 0.5rem; color: #17765a; content: "›"; } .kg-page .breadcrumb-item a { color: #17765a; text-decoration: none; } .kg-page .breadcrumb-item a:hover { color: #0f5a42; text-decoration: underline; } .kg-page .breadcrumb-item.active { color: #212529; } .kg-page .kupat-back-link { display: inline-block; margin-top: 0.5rem; } /* Quick search card above general data */ #kgQuickSearchCard .form-label { color: #1f2937; } #kgQuickSearchResults .list-group-item mark { background-color: #fff3bf; padding: 0; } #kgQuickSearchButton { min-height: 38px; } /* Insights מתחת לשורות טבלת היתרות */ .kg-flow-insight { display: flex; align-items: flex-start; gap: 0.35rem; margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.45; text-align: right; direction: rtl; color: #6c757d; } .kg-flow-insight-icon { flex-shrink: 0; margin-top: 0.08em; font-size: 1em; line-height: 1; opacity: 0.9; color: inherit; } .kg-flow-insight-text { flex: 1; min-width: 0; } /* סימולציית צבירה (דף קופה) */ .kg-sim-card-lead { font-size: 1.125rem; font-weight: 700; line-height: 1.4; color: #1a1a1a; margin: 0 0 0.875rem; } .kg-sim-warning-text { font-size: 0.9375rem; font-weight: 600; line-height: 1.45; color: #664d03; margin: 0; padding: 0.65rem 0.75rem; background: #fff8e6; border: 1px solid rgba(200, 150, 0, 0.35); border-radius: 0.375rem; } .kg-sim-warning-icon { margin-inline-end: 0.25rem; } .kg-accumulation-sim-card .form-label { font-weight: 600; color: #495057; font-size: 0.9rem; } .kg-sim-result-label { font-size: 0.8rem; color: #6c757d; margin-bottom: 0.25rem; } .kg-sim-result-value { font-size: 1.28rem; font-weight: 700; color: #1e4620; line-height: 1.3; } .kg-sim-result-value.kg-sim-result-value--negative { color: #d01d30; } @media (max-width: 576px) { .kg-sim-result-value { font-size: 1.08rem; } } /* כפתורי תקופה במחשבון הסימולציה — עקביות עם ערכת הצבעים */ .kg-accumulation-sim-card .kg-sim-period-btn.active { background-color: #1e4620; border-color: #1e4620; color: #fff; } /* גרף סימולציית צבירה — ערך תיק מול הפקדות מצטברות */ .kg-sim-chart-container { position: relative; width: 100%; height: 300px; min-height: 260px; } .kg-sim-chart-container canvas { display: block; width: 100% !important; height: 100% !important; } @media (max-width: 767.98px) { .kg-sim-chart-container { height: 280px; min-height: 240px; } } /* טיזר למחשבון ריבית דריבית (לפני גרף סימולציה) */ #kg-accumulation-sim-card .kg-sim-compound-teaser .kg-sim-compound-teaser-text { flex: 1 1 auto; min-width: 0; text-align: right; } #kg-accumulation-sim-card .kg-sim-compound-teaser a { white-space: normal; word-break: break-word; } /* ניתוח ביצועי הקופה — מתחת לטבלת נתונים כלליים (לא בתוך הטבלה) */ .kg-page .kg-fund-performance-analysis { margin-top: 0.75rem; padding: 0 0 0.875rem; background-color: #fafbf9; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.375rem; overflow: hidden; box-sizing: border-box; } .kg-page .kg-fund-performance-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: #fff; background-color: #829a2c; padding: 0.5rem 0.75rem; margin: 0 0 0.75rem; width: 100%; box-sizing: border-box; } /* מרווח תחתון כמו בין כרטיסי האזורים (תואם .kg-fund-summary-zone margin-bottom) */ .kg-page .kg-fund-performance-analysis .kg-fund-summary { padding: 0 0.75rem; margin: 0; } /* אזורים: תשואות / יתרות / דמי ניהול — כרטיסיות עם פס ירוק-זית כמו כותרות הכרטיס */ .kg-page .kg-fund-summary-zone { margin-bottom: 0.75rem; padding: 0.75rem 0.875rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.375rem; border-inline-start: 4px solid #829a2c; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .kg-page .kg-fund-summary-zone:last-child { margin-bottom: 0; } .kg-page .kg-fund-summary-zone-title { font-size: 1rem; font-weight: 700; line-height: 1.3; color: #5a6b20; margin: 0 0 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid #e9ecef; } .kg-page .kg-fund-summary-zone-body { font-size: 1rem; line-height: 1.5; color: #495057; } /* אזור יתרות: בלי ul/li — שורות div מיושרות לימין כמו שאר גוף הכרטיס (בלי ריווח שמאלי של רשימה) */ .kg-page .kg-fund-summary-zone--balances .kg-fund-summary-zone-body { direction: rtl; text-align: right; } .kg-page .kg-fund-summary-zone--balances .kg-fund-summary-flow.kg-fund-summary-flow--stacked { display: block; width: 100%; margin: 0; padding: 0; } .kg-page .kg-fund-summary-zone--balances .kg-fund-summary-flow-row { display: block; width: 100%; margin: 0; padding: 0; text-align: right; box-sizing: border-box; } .kg-page .kg-fund-summary-zone--balances .kg-fund-summary-flow-label { color: #495057; font-weight: 700; } @media (max-width: 576px) { .kg-page .kg-fund-performance-analysis .kg-fund-summary { padding: 0 0.65rem; } .kg-page .kg-fund-summary-zone { padding: 0.65rem 0.75rem; margin-bottom: 0.65rem; } .kg-page .kg-fund-summary-zone-title { font-size: 0.9375rem; } } /* תוכן ניתוח ביצועים — גודל גוף */ .kg-fund-summary { font-size: 1rem; line-height: 1.5; color: #495057; } .kg-fund-summary-inner .kg-fund-summary-return-line { border-inline-start: 3px solid #829a2c; padding-inline-start: 0.65rem; } .kg-fund-summary-inner .kg-fund-summary-missing { border-inline-start-color: #adb5bd; font-style: normal; color: #6c757d; } .kg-fund-summary-cross { background: #f8f9fa; border-radius: 0.25rem; padding: 0.5rem 0.65rem; font-size: 0.875rem; line-height: 1.45; } .kg-fund-summary-tier-line { color: #1e4620; } .kg-fund-summary-tier-badges { font-size: 1rem; display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: baseline; } .kg-fund-summary-badge { white-space: normal; } .kg-fund-summary-avg-note { color: #6c757d; font-size: 0.875rem; line-height: 1.45; } .kg-fund-summary-flow-label { font-weight: 600; color: #5c636a; } /* השוואה לממוצע בתקציר — ירוק מעל, אדום מתחת */ .kg-fund-summary .kg-vs-avg { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem; vertical-align: baseline; } .kg-fund-summary .kg-vs-avg-icon { flex-shrink: 0; font-size: 1em; line-height: 1; } .kg-fund-summary .kg-vs-avg-above .kg-vs-avg-text, .kg-fund-summary .kg-vs-avg-above .kg-vs-avg-strong { color: #006633; } .kg-fund-summary .kg-vs-avg-below .kg-vs-avg-text, .kg-fund-summary .kg-vs-avg-below .kg-vs-avg-strong { color: #d01d30; } .kg-fund-summary .kg-vs-avg-above .kg-vs-avg-icon { color: #006633; } .kg-fund-summary .kg-vs-avg-below .kg-vs-avg-icon { color: #d01d30; } /* תגי דירוג (מובילה / נגררת) */ .kg-fund-summary .kg-tier-pill { display: inline-flex; align-items: baseline; gap: 0.2rem; white-space: normal; } .kg-fund-summary .kg-tier-leading .kg-tier-pill-strong { color: #006633; } .kg-fund-summary .kg-tier-leading .kg-tier-pill-icon { color: #006633; } .kg-fund-summary .kg-tier-lagging .kg-tier-pill-strong { color: #d01d30; } .kg-fund-summary .kg-tier-lagging .kg-tier-pill-icon { color: #d01d30; } .kg-fund-summary .kg-tier-mid .kg-tier-pill-icon { color: #6c757d; } .kg-fund-summary .kg-lead-phrase-good { color: #006633; font-weight: 600; } .kg-fund-summary .kg-lead-phrase-bad { color: #d01d30; font-weight: 600; } /* Override global compareTables: charts must flow in document, not position:absolute */ .kg-page .chartBase, .kg-page .chart1, .kg-page .chart2, .kg-page .chart3 { position: static !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100%; border: 1px solid #bebebe; box-sizing: border-box; } /* Ensure data column and sidebar use flex flow, not float */ .kg-page .kg-data, .kg-page .kg-sidebar { float: none !important; } /* compareTables sets .lead { width:300px }. KupatGemel sidebar trust card spans the column — match lead block width + shell to .kg-trust-card (Wave 1.5). Mobile reparents #lead into #leadMobile; same visuals must apply there too. */ .kg-page.kupat-gemel-page .kg-sidebar #lead.lead, .kg-page.kupat-gemel-page #leadMobile #lead.lead, body.kg-body #leadMobile #lead.lead { width: 100%; max-width: 100%; box-sizing: border-box; float: none !important; border: 1px solid #d7eadf; border-radius: 8px; background: #f7fbf3; overflow: hidden; color: #1f3a33; } .kg-page.kupat-gemel-page .kg-sidebar #lead.lead .kg-lead-form-v2, .kg-page.kupat-gemel-page #leadMobile #lead.lead .kg-lead-form-v2, body.kg-body #leadMobile #lead.lead .kg-lead-form-v2 { padding: 0.95rem 1rem 1rem; } .kg-page.kupat-gemel-page #lead.lead .lead-legacy-font-reset, body.kg-body #leadMobile #lead.lead .lead-legacy-font-reset { font-size: 16px; } .kg-page.kupat-gemel-page #lead.lead .leadDescription, body.kg-body #leadMobile #lead.lead .leadDescription { font-size: inherit; } .kg-page.kupat-gemel-page #lead.lead .leadH3Title, body.kg-body #leadMobile #lead.lead .leadH3Title { height: auto; min-height: 2.35rem; margin: 0; padding: 0.5rem 0.75rem; border: 0; border-radius: 8px 8px 0 0; background: #17765a; color: #fff !important; font-family: Arial, Helvetica, sans-serif; font-size: 1.05rem !important; line-height: 1.35; text-align: center; } .kg-page.kupat-gemel-page .kg-sidebar #lead.lead .tbLead, .kg-page.kupat-gemel-page #leadMobile #lead.lead .tbLead, body.kg-body #leadMobile #lead.lead .tbLead { width: 100% !important; max-width: 100%; box-sizing: border-box; } .kg-page.kupat-gemel-page .kg-sidebar #lead.lead #expandYazranim, .kg-page.kupat-gemel-page #leadMobile #lead.lead #expandYazranim, body.kg-body #leadMobile #lead.lead #expandYazranim { width: 100%; max-width: 100%; box-sizing: border-box; } /* Desktop: table + chart side by side (row .kg-table-chart has col-lg-6 | col-lg-6) */ .kg-page .kg-table-chart .chartBase { min-width: 0; } .kg-page .kg-yitrot-chart-container { position: relative !important; min-height: 320px; padding: 0.5rem; } .kg-page .kg-yitrot-chart-container canvas { width: 100% !important; height: 100% !important; } /* Prevent table column from overflowing into chart column */ .kg-page .kg-table-chart > .col-12 { min-width: 0; } .kg-page .kg-table-chart .table-responsive { overflow-x: auto; } /* Override compareTables .assetsDiv (width: 370px) so card fills column */ .kg-page .assetsDiv { width: 100%; max-width: 100%; } /* Table + dynamic/chart pairs: main table right (RTL), secondary left; stack on mobile */ .kg-page .kg-table-pair > .col-12 { min-width: 0; } .kg-page .kg-dynamic-col .table-responsive, .kg-page .kg-chart-col .table-responsive { overflow-x: auto; } /* Mobile: stack table then chart; sidebar full width + תיקון HEADER + החלפת לוגיקת enquire */ @media (max-width: 767.98px) { .kg-page .kg-sidebar { max-width: 100%; } /* Show charts on mobile (supermarkerMobile.css hides .chartBase globally) */ .kg-page .chartBase { display: block !important; } .kg-page .kg-yitrot-chart-container { height: 360px; min-height: 360px; } /* תיקון HEADER במובייל: רווח מתחת ל-HEADER ב-em (מתאים עצמו לגודל פונט) */ #main.kg-main { padding-top: 1.55em !important; margin-top: 0 !important; /* mainNoMargin */ } #ymheader { margin-top: 0 !important; } #mainContainer { padding-top: 0 !important; } /* שימוש בהדר ברירת מחדל של האתר (עם לוגו וגובה סטנדרטי) */ .kg-page .gemelTable { width: 100% !important; } .kg-page .titleButtom { width: 39% !important; } .kg-page .mainIndex { margin-top: 0; } .kg-page.kupat-gemel-page .kg-sidebar #lead.lead, .kg-page.kupat-gemel-page #leadMobile #lead.lead, body.kg-body #leadMobile #lead.lead { width: 100%; max-width: 100%; box-sizing: border-box; border-radius: 6px; margin: 0; } .kg-page.kupat-gemel-page #lead.lead .leadH3Title, body.kg-body #leadMobile #lead.lead .leadH3Title { min-height: 2rem; padding: 0.38rem 0.55rem; font-size: 0.92rem !important; } .kg-page.kupat-gemel-page .kg-sidebar #lead.lead .kg-lead-form-v2, .kg-page.kupat-gemel-page #leadMobile #lead.lead .kg-lead-form-v2, body.kg-body #leadMobile #lead.lead .kg-lead-form-v2 { padding: 0.65rem 0.55rem 0.75rem; } } /* Narrow devices – same rules (no duplicate padding; 767.98px already covers this) */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { .kg-page .chartBase { display: block !important; } .kg-page .kg-yitrot-chart-container { height: 360px; min-height: 360px; } } /* ===== תשואות לאורך זמן – כותרת מרכזית וכפתורים נראים על רקע ירוק ===== */ #kg-returns-over-time-wrap .kg-returns-header { display: flex; justify-content: center; align-items: center; } #kg-returns-over-time-wrap .kg-returns-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1rem; } #kg-returns-over-time-wrap .gemel-card-header .kg-returns-period-btn { color: #fff; border: 1px solid rgba(255, 255, 255, 0.9); background: transparent; } #kg-returns-over-time-wrap .gemel-card-header .kg-returns-period-btn:hover { color: #1a1a1a; background-color: rgba(255, 255, 255, 0.95); border-color: #fff; } #kg-returns-over-time-wrap .gemel-card-header .kg-returns-period-btn.active { background-color: #fff; color: #1a1a1a; border-color: #fff; } /* כפתורי מיון מתחת לגרף תשואה–סיכון – מרווח סטנדרטי (צמוד לגרף) */ #kg-return-risk-chart-wrap .chart-container { margin-bottom: 0; } .kg-chart-sort-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 0.35rem; margin-bottom: 0; } .kg-chart-sort-actions .btn-group { display: inline-flex; } /* תג דירוג הקופה בכותרת טבלת דירוג (נטען מ-fundDetailsLoader) */ .kg-page .fund-ranking-section #rankingBadge.badge.bg-primary { font-size: 1rem; font-weight: 600; line-height: 1.35; padding: 0.45rem 0.8rem; } .kg-page .kg-ranking-filter { display: inline-flex; flex-wrap: wrap; gap: 0; margin-top: 0.65rem; border: 1px solid #17765a; border-radius: 0.5rem; overflow: hidden; background: #fff; } .kg-page .kg-ranking-filter__btn { border: 0; padding: 0.45rem 0.85rem; font-size: 0.95rem; font-weight: 700; color: #17765a; background: #fff; line-height: 1.25; } .kg-page .kg-ranking-filter__btn + .kg-ranking-filter__btn { border-right: 1px solid rgba(23, 118, 90, 0.24); } .kg-page .kg-ranking-filter__btn.is-active { color: #fff; background: #17765a; } .kg-page .kg-ranking-filter-note { margin-top: 0.45rem; } .kg-page .fund-ranking-table .kg-ranking-reference-row > td { background: #f1faf6; border-top: 2px solid #17765a; } .kg-page .kg-ranking-reference-badge { display: inline-block; margin-right: 0.35rem; padding: 0.16rem 0.45rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; line-height: 1.25; color: #0f5132; background: #dff3ea; white-space: nowrap; } @media (max-width: 575.98px) { .kg-page .kg-ranking-filter { display: flex; width: 100%; } .kg-page .kg-ranking-filter__btn { flex: 1 1 0; padding-inline: 0.45rem; font-size: 0.88rem; } .kg-page .kg-ranking-reference-badge { display: block; width: fit-content; margin: 0.25rem 0 0; white-space: normal; } } /* טבלת השוואת תשואות – סימון עמודת המיון הנבחרת */ .kg-page .fund-ranking-table thead th.sortable-header { cursor: pointer; user-select: none; transition: background-color 0.2s ease; } .kg-page .fund-ranking-table thead th.sortable-header:hover { background-color: #e9ecef !important; } .kg-page .fund-ranking-table thead th.sortable-header.sort-active { background-color: #0d6efd !important; color: #fff !important; font-weight: 600; } .kg-page .fund-ranking-table thead th.sortable-header.sort-active:hover { background-color: #0b5ed7 !important; color: #fff !important; } .kg-page .fund-ranking-table { font-size: 1rem; } .kg-page .fund-ranking-table th, .kg-page .fund-ranking-table td { font-size: 1rem; } /* טבלת דירוג: מספרים ב־LTR — מינוס לפני המספר (wrapNumericLtr ב-fundDetailsLoader) */ .kg-page .fund-ranking-table .kg-numeric-ltr { display: inline-block; unicode-bidi: isolate; direction: ltr; } /* גרף תשואות לאורך זמן – גובה קבוע, בלי שטח ריק מתחת */ .kg-returns-chart-container { position: relative; width: 100%; height: 380px; min-height: 320px; } .kg-returns-chart-container canvas { display: block; width: 100% !important; height: 100% !important; } /* הודעה במחשבון: ביקשו 5 שנים אך נטענה תקופה קצרה יותר (לחיצה בלבד) */ #kg-accumulation-sim-card .kg-sim-period-availability-note { border-inline-start: 3px solid #6c757d; padding: 0.5rem 0.65rem; background: #f5f6f7; color: #343a40; font-size: 0.875rem; line-height: 1.45; font-weight: 500; margin-bottom: 0.5rem; } /* הודעת fallback אחרי לחיצה על 5 שנים */ #kg-accumulation-sim-card .kg-sim-period-fallback-notice { border-inline-start: 3px solid #0d6efd; padding: 0.5rem 0.65rem; background: #eef5ff; color: #1a3a5c; font-size: 0.875rem; line-height: 1.45; font-weight: 500; margin-bottom: 0.5rem; } /* כפתורי תקופה מושבתים כשאין מספיק היסטוריה */ .kg-returns-period-btn:disabled, .kg-sim-period-btn:disabled { background: #f1f3f5 !important; border-color: #ced4da !important; color: #868e96 !important; cursor: not-allowed !important; opacity: 1 !important; box-shadow: none !important; } /* הסבר על היסטוריה חלקית / יישור חלון — גרף תשואות */ #kg-returns-over-time-wrap .kg-returns-disclaimer { border-inline-start: 3px solid #829a2c; padding: 0.5rem 0.65rem; background: #f8faf5; color: #3d4a2c; font-size: 0.875rem; line-height: 1.45; } #kg-returns-over-time-wrap .kg-returns-empty { margin-bottom: 0.5rem; font-size: 0.875rem; } .kg-returns-card-body { padding-bottom: 1rem; } @media (max-width: 767.98px) { .kg-returns-chart-container { height: 408px; /* +20% מ-340px לקריאות טובה יותר בין הקווים */ min-height: 360px; } } /* ===== CTA מתחת לפרטים כלליים וטבלת התשואות ===== */ .kg-cta-block { text-align: center; padding: 0.5rem 0; } /* Wave 1.4: dynamic CTA that reflects the simulator's final balance. Uses a subtle color shift once "data-sim-state=calculated" so returning scrollers notice the copy changed without a flashy animation. */ .kg-cta-block--dynamic { transition: background-color 0.3s ease; border-radius: 8px; padding: 0.75rem 0.5rem; } .kg-cta-block--dynamic[data-sim-state="calculated"] { background: #eaf6f1; } .kg-cta-headline { margin: 0 auto 0.75rem; max-width: 640px; font-size: 1.0625rem; font-weight: 600; color: #1f3a33; line-height: 1.45; } .kg-cta-block--dynamic[data-sim-state="calculated"] .kg-cta-headline strong { color: #17765a; white-space: nowrap; } .kg-cta-btn { display: inline-block; max-width: 420px; width: 100%; padding: 0.65rem 1.25rem; font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; color: #fff; background-color: #4a7c7c; border: none; border-radius: 8px; transition: background-color 0.2s ease, color 0.2s ease; } .kg-cta-btn:hover { background-color: #3d6b6b; color: #fff; } .kg-cta-sub { margin: 0.4rem 0 0; font-size: 0.85rem; color: #6c757d; } /* ===== כפתור "קבל הצעה" (leadOffer) – עיצוב מודרני, בלי קו תחתון, בלי תזוזה בלחיצה, צבע רקע אחד #17765a ===== */ #leadOffer.kg-lead-offer { display: flex; align-items: center; justify-content: center; min-height: 50px; background-color: #17765a; border-radius: 8px; transition: background-color 0.2s ease; } #leadOffer.kg-lead-offer:hover { background-color: #3d6b6b; } #openLead.kg-lead-cta-btn, .kg-lead-cta-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 50px; padding: 0.65rem 1.25rem; font-size: 1.125rem; font-weight: 600; text-align: center; text-decoration: none !important; color: #fff; background-color: #17765a; border: 2px solid transparent; border-radius: 8px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; user-select: none; } /* כפתור צף בלבד: רקע שקוף כדי שיראה צבע ה-div #leadOffer */ #leadOffer.kg-lead-offer .kg-lead-cta-btn { background-color: transparent; } #openLead.kg-lead-cta-btn:hover, #openLead.kg-lead-cta-btn:focus, .kg-lead-cta-btn:hover, .kg-lead-cta-btn:focus { text-decoration: none !important; color: #fff; background-color: #3d6b6b; border-color: transparent; } #leadOffer.kg-lead-offer .kg-lead-cta-btn:hover, #leadOffer.kg-lead-offer .kg-lead-cta-btn:focus { background-color: transparent; } #openLead.kg-lead-cta-btn:active, .kg-lead-cta-btn:active { text-decoration: none !important; color: #fff; background-color: #365a5a; border-color: transparent; padding: 0.65rem 1.25rem; } #leadOffer.kg-lead-offer .kg-lead-cta-btn:active { background-color: rgba(0,0,0,0.15); } #openLead.kg-lead-cta-btn:focus, .kg-lead-cta-btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(23, 118, 90, 0.5); } #openLead.kg-lead-cta-btn:focus-visible, .kg-lead-cta-btn:focus-visible { box-shadow: 0 0 0 2px rgba(23, 118, 90, 0.5); } /* מודל ליד – רוחב צמוד לטופס, כותרת מהליד (h3) בלבן על רקע ירוק, כפתור סגירה בפינה */ #leadBootstrapModal.modal .lead-modal-dialog { width: fit-content; max-width: 520px; margin: 1rem auto; } #leadBootstrapModal .lead-modal-content { position: relative; width: 100%; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); overflow: visible; } #leadBootstrapModal .lead-modal-close { position: absolute; top: 0.5rem; right: 0.5rem; left: auto; z-index: 10; opacity: 0.85; filter: invert(0); background-size: 1em; } #leadBootstrapModal [dir="rtl"] .lead-modal-close, [dir="rtl"] #leadBootstrapModal .lead-modal-close { right: auto; left: 0.1rem; } #leadBootstrapModal .lead-modal-close:hover { opacity: 1; } #leadBootstrapModal .modal-body { background: #f9f9f9; padding: 0; } /* כותרת הליד (h3) – טקסט לבן על רקע ירוק כמו במקור; ריווח עליון וצדדי כדי שכפתור הסגירה לא ידרוס */ #leadBootstrapModal .lead .h3Title, #leadBootstrapModal .lead .leadH3Title, #leadBootstrapModal .lead .leadTitle { background-color: #17765a; color: #fff !important; font-weight: 600; margin: 0; padding: 0.75rem; border-radius: 4px 4px 0 0; } [dir="rtl"] #leadBootstrapModal .lead .h3Title, [dir="rtl"] #leadBootstrapModal .lead .leadH3Title, [dir="rtl"] #leadBootstrapModal .lead .leadTitle { padding-left: 0.75rem; padding-right: 0.75rem; } /* במובייל: ריווח תחתון ל-#leadMobile כדי שהכפתור הדביק לא יכסה את הטופס (רק כשהוא בדף, לא בתוך המודל) */ @media (max-width: 767.98px) { #leadMobile { padding-bottom: 100px; /* גובה כפול מהכפתור (50px) */ } /* בתוך פופאפ/מודל – בלי ריווח תחתון מיותר */ .fancybox-wrap #leadMobile, .fancybox-inner #leadMobile, #leadBootstrapModal #leadMobile { padding-bottom: 0; } /* במובייל: מרווח מינימלי מכפתור הסגירה (X) כדי שלא ידרוס את הכותרת */ #leadBootstrapModal .lead .h3Title, #leadBootstrapModal .lead .leadH3Title, #leadBootstrapModal .lead .leadTitle { padding: 0.75rem; } [dir="rtl"] #leadBootstrapModal .lead .h3Title, [dir="rtl"] #leadBootstrapModal .lead .leadH3Title, [dir="rtl"] #leadBootstrapModal .lead .leadTitle { padding: 0.75rem; } } /* תיקון תזוזה ימינה כשפופאפ Fancybox נפתח - מקזזים את התרחבות ה-viewport (scrollbar נעלם) */ html.fancybox-lock #leadOffer.kg-lead-offer { right: calc(1% + 17px); } /* ===== Wave 2.5 (feature/kupat-gemel-cta-uplift): Sticky Mobile V2 — two-option ===== Split variant of the sticky bar. Renders only when KupatGemel.EnableStickyMobileV2=true (server-side gated in KupatGemel.aspx). Inherits the base .kg-lead-offer scroll-hide / reduced-motion rules, so only layout + per-option colors live here. */ .kg-lead-offer.kg-lead-offer--v2 { padding: 0; } /* compareTables .getOffer מגדיר רוחב 200px — ב-V2 שני כפתורים חייבים להופיע; מובייל/טאבלט מלא רוחב */ @media (max-width: 991.98px) { #leadOffer.kg-lead-offer.kg-lead-offer--v2 { width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0; z-index: 1040; box-sizing: border-box; } } .kg-lead-offer__split { display: flex; width: 100%; gap: 0; } .kg-lead-offer__opt { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.75rem 0.5rem; font-size: 0.95rem; font-weight: 700; text-decoration: none !important; color: #fff !important; line-height: 1.2; transition: background-color 0.15s ease, transform 0.15s ease; } .kg-lead-offer__opt i { font-size: 1.05em; flex-shrink: 0; } .kg-lead-offer__opt-label { white-space: nowrap; } .kg-lead-offer__opt--call { background: #17765a; border-inline-end: 1px solid rgba(255, 255, 255, 0.25); } .kg-lead-offer__opt--call:hover, .kg-lead-offer__opt--call:focus { background: #115c46; color: #fff !important; text-decoration: none !important; } .kg-lead-offer__opt--email { background: #2d6cdf; } .kg-lead-offer__opt--email:hover, .kg-lead-offer__opt--email:focus { background: #2458b8; color: #fff !important; text-decoration: none !important; } @media (prefers-reduced-motion: reduce) { .kg-lead-offer__opt { transition: none; } } /* ===== Wave 3.1 (feature/kupat-gemel-cta-uplift): Lead form V2 ===== Floating labels, progressive disclosure, trust badges, custom success state. Scoped under .kg-lead-form-v2 so it never leaks into the legacy V1 control rendered by the 70+ other pages that embed it. */ .kg-lead-form-v2 { padding: 0.75rem 0.5rem; direction: rtl; text-align: right; margin: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; font-size: 1rem; color: #1f3a33; } .kg-lead-form-v2 * { box-sizing: border-box; } /* טעינה בשליחת ליד V2 — מרכוז, צבע מותג (#17765a), בלי gif בפינה */ .kg-v2-submit-loader { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(31, 58, 51, 0.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; } .kg-v2-submit-loader.kg-v2-submit-loader--visible { opacity: 1; visibility: visible; pointer-events: auto; } .kg-v2-submit-loader__panel { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.75rem 2rem; background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(23, 118, 90, 0.18); border: 1px solid #cfe8de; max-width: 92vw; } .kg-v2-submit-loader__ring { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 3px solid rgba(23, 118, 90, 0.2); border-top-color: #17765a; animation: kg-v2-loader-spin 0.75s linear infinite; } .kg-v2-submit-loader__label { font-size: 1rem; font-weight: 600; color: #1f3a33; text-align: center; } @keyframes kg-v2-loader-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .kg-v2-submit-loader__ring { animation: none; border-top-color: #17765a; opacity: 0.85; } .kg-v2-submit-loader { transition: none; } } .kg-v2-lede { margin: 0; padding: 0.75rem 0.95rem 0; color: #1f4b40; line-height: 1.4; text-align: center; font-size: 1rem; font-weight: 700; } .kg-v2-stage { display: flex; flex-direction: column; gap: 0.7rem; } .kg-v2-stage-1 { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease; margin-top: 0; } .kg-v2-stage-1.is-open { max-height: 1200px; opacity: 1; margin-top: 0.7rem; } .kg-v2-field { position: relative; margin: 0; } .kg-v2-field .form-floating > .form-control, .kg-v2-field .form-floating > .form-select { min-height: 3.35rem; height: calc(3.35rem + 2px); border-radius: 8px; border: 1px solid #cfd7d4; font-size: 0.98rem; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; text-align: right; direction: rtl; color: #152420; } .kg-v2-field .form-floating > .form-select { padding-top: 1.45rem; padding-bottom: 0.35rem; line-height: 1.25; background-position: left 0.75rem center; } /* Placeholder / טקסט ריק — בדפדפנים רבים לא יורש מ-text-align; בעברית מקובל יישור ימין */ .kg-lead-form-v2 .kg-v2-field .form-floating > .form-control::placeholder { color: transparent; opacity: 0; text-align: right; direction: rtl; } .kg-lead-form-v2 .kg-v2-field .form-floating > .form-control::-webkit-input-placeholder { color: transparent; opacity: 0; text-align: right; direction: rtl; } .kg-lead-form-v2 .kg-v2-field .form-floating > .form-control::-moz-placeholder { color: transparent; opacity: 0; text-align: right; direction: rtl; } .kg-v2-field .form-floating { direction: rtl; } .kg-v2-field .form-floating > label { color: #667770; font-size: 0.88rem; padding-inline: 0.9rem; /* BS5 form-floating defaults to LTR anchor; ללא bootstrap.rtl — מיישרים לימין */ right: 0; left: auto; text-align: right; transform-origin: 100% 0; } /* מצב label צף (כמו placeholder) — כיוון translate מתאים ל-RTL */ .kg-v2-field .form-floating > .form-control:focus ~ label, .kg-v2-field .form-floating > .form-control:not(:placeholder-shown) ~ label, .kg-v2-field .form-floating > .form-control:-webkit-autofill ~ label, .kg-v2-field .form-floating > .form-select ~ label { transform: scale(0.85) translateY(-0.5rem) translateX(-0.15rem); } .kg-v2-field .form-floating > .form-control:focus, .kg-v2-field .form-floating > .form-select:focus { border-color: #17765a; box-shadow: 0 0 0 0.2rem rgba(23, 118, 90, 0.15); outline: 0; } .kg-v2-field.has-error .form-control, .kg-v2-field.has-error .form-select { border-color: #c0392b; } .kg-v2-field-error { display: block; color: #c0392b; font-size: 0.8rem; margin-top: 0.25rem; padding-inline-start: 0.25rem; line-height: 1.35; text-align: right; } .kg-v2-purpose { border: 1px solid #d9e8e2; border-radius: 8px; padding: 0.7rem 0.75rem; margin: 0; background: rgba(255, 255, 255, 0.45); } .kg-v2-purpose__legend { display: block; font-size: 0.85rem; color: #33534a; padding: 0; margin: 0; width: 100%; font-weight: 600; text-align: right; direction: rtl; } .kg-v2-purpose__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.45rem; } .kg-v2-purpose__opt { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: #2d3a38; cursor: pointer; padding: 0.32rem 0.45rem; border-radius: 6px; transition: background-color 0.15s ease; margin: 0; } .kg-v2-purpose__opt:hover { background: #f0f5f3; } .kg-v2-purpose__opt input { accent-color: #17765a; /* ירוק המותג, זהה לכפתור השליחה — תקן האתר */ margin: 0; flex-shrink: 0; } .kg-v2-yatzranim { margin-top: 0.25rem; } .kg-v2-yatzranim__toggle { display: inline-block; font-size: 0.85rem; color: #17765a; cursor: pointer; margin-bottom: 0.4rem; } .kg-v2-yatzranim__toggle:hover { text-decoration: underline; } .kg-v2-yatzranim__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 0.5rem; } .kg-v2-yatzranim__item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: #2d3a38; } .kg-v2-consent { display: flex; align-items: flex-start; gap: 0.45rem; margin-top: 0.9rem; padding-top: 0.5rem; border-top: 1px solid #e5ebe8; font-size: 0.84rem; line-height: 1.45; color: #33534a; } .kg-v2-consent input[type="checkbox"] { accent-color: #17765a; /* ירוק המותג, זהה לכפתור השליחה — תקן האתר */ margin-top: 0.2rem; flex-shrink: 0; } .kg-v2-consent__text a { color: #17765a; } .kg-v2-submit { margin-top: 0.75rem; } .kg-v2-submit__btn { display: block; width: 100% !important; margin: 0 !important; background: #17765a; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 8px; padding: 0.85rem 1rem; font-size: 1rem; font-weight: 700; line-height: 1.2; text-shadow: none !important; box-shadow: none; cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .kg-v2-submit__btn:hover, .kg-v2-submit__btn:focus { background: #115c46; outline: 0; } @media (hover: hover) { .kg-v2-submit__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(23, 118, 90, 0.3); } } .kg-v2-error { color: #c0392b; font-size: 0.85rem; margin: 0.4rem 0; padding: 0.4rem 0.6rem; background: #fdecea; border-radius: 6px; } .kg-v2-trust { list-style: none; margin: 0.7rem 0 0; padding: 0.55rem 0 0; border-top: 1px solid #e5ebe8; display: flex; flex-direction: column; gap: 0.4rem; } .kg-v2-trust li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; color: #435f56; line-height: 1.35; } .kg-v2-trust i { color: #17765a; font-size: 1.05rem; line-height: 1; flex-shrink: 0; } .kg-v2-success { padding: 1rem 0.75rem; text-align: center; } .kg-v2-success__icon { color: #17765a; font-size: 2.25rem; line-height: 1; margin-bottom: 0.4rem; } .kg-v2-success__title { font-size: 1.25rem; font-weight: 700; color: #1f4b40; margin: 0 0 0.35rem; } .kg-v2-success__lede { font-size: 0.9rem; color: #33534a; line-height: 1.5; margin: 0 0 0.75rem; } .kg-v2-success__related { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; } .kg-v2-success__related a { color: #17765a; font-size: 0.9rem; text-decoration: none; } .kg-v2-success__related a:hover { text-decoration: underline; } /* פריסת תוכן ההצלחה — flex column על עוטף פנימי קבוע (.kg-v2-success__inner), ולא על #successful עצמו. חשוב: אסור לכפות display על #successful — הוא מוסתר/מוצג דרך display (inline none בברירת מחדל, .show()/.hide() בריצה), ו-!important על display היה משאיר אותו גלוי תמיד. ה-flex על העוטף הפנימי כן יכול להיות !important (אין לו מצב מוסתר) — וזה מנצח כללי legacy שמצמידים inline-block לאלמנטים באזור הליד, כך שהאייקון/כותרת/טקסט/קישורים נערמים אנכית כמו בדסקטופ. */ .kg-v2-success__inner { display: flex !important; flex-direction: column !important; align-items: center; width: 100%; box-sizing: border-box; text-align: center; } .kg-v2-success__inner > * { float: none !important; width: 100%; max-width: 100%; box-sizing: border-box; } .kg-v2-success__related { display: flex !important; flex-direction: column !important; align-items: center; } .kg-v2-success__related li { display: block; width: 100%; text-align: center; } @media (prefers-reduced-motion: reduce) { .kg-v2-stage-1 { transition: none; } .kg-v2-submit__btn { transition: none; } .kg-v2-submit__btn:hover { transform: none; box-shadow: none; } } @media (max-width: 480px) { .kg-v2-lede { padding: 0.55rem 0.6rem 0; font-size: 0.82rem; line-height: 1.35; } .kg-v2-stage { gap: 0.5rem; } .kg-v2-stage-1.is-open { margin-top: 0.55rem; } .kg-v2-field .form-floating > .form-control, .kg-v2-field .form-floating > .form-select { min-height: 3.15rem; height: calc(3.15rem + 2px); font-size: 0.9rem; border-radius: 6px; } .kg-v2-field .form-floating > .form-select { padding-top: 1.35rem; padding-bottom: 0.45rem; line-height: 1.35; } .kg-v2-field .form-floating > label { font-size: 0.74rem; padding-inline: 0.65rem; } .kg-v2-field .form-floating > .form-control:focus ~ label, .kg-v2-field .form-floating > .form-control:not(:placeholder-shown) ~ label, .kg-v2-field .form-floating > .form-control:-webkit-autofill ~ label, .kg-v2-field .form-floating > .form-select ~ label { transform: scale(0.82) translateY(-0.45rem) translateX(-0.1rem); } .kg-v2-yatzranim__grid { grid-template-columns: 1fr; } /* מובייל: צמצום רווחים בתיבות הסימון (2 טורים) — חוסך גובה. align-items:flex-start מיישר את הצ'קבוקס לשורה הראשונה כשהתווית נשברת ל-2 שורות. */ .kg-v2-purpose__options { gap: 0.2rem 0.4rem; margin-top: 0.3rem; } .kg-v2-purpose__opt { padding: 0.15rem 0.25rem; align-items: flex-start; } .kg-v2-purpose { padding: 0.55rem 0.6rem; } .kg-v2-purpose__legend, .kg-v2-purpose__opt, .kg-v2-yatzranim__toggle, .kg-v2-yatzranim__item, .kg-v2-consent { font-size: 0.75rem; } .kg-v2-consent { margin-top: 0.65rem; } .kg-v2-submit__btn { padding: 0.72rem 0.85rem; font-size: 0.85rem; border-radius: 6px; } .kg-v2-trust li { font-size: 0.82rem; } .kg-v2-trust i { font-size: 0.98rem; } } /* ===== Wave 2.3 (feature/kupat-gemel-cta-uplift): Dynamic micro-badges + micro-CTA ===== */ .kg-micro-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.55rem; margin-inline-start: 0.4rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1.4; background: #eef2f5; color: #33534a; border: 1px solid transparent; white-space: nowrap; vertical-align: middle; } .kg-micro-badge--warn { background: #fff4e5; color: #8a5a1c; border-color: #f7d8a9; } .kg-micro-badge--good { background: #eaf6f1; color: #17765a; border-color: #bfdfcf; } .kg-micro-cta { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.35rem; padding: 0.25rem 0.55rem; font-size: 0.8125rem; font-weight: 600; border-radius: 6px; background: #fff4e5; color: #8a5a1c !important; border: 1px solid #f2c98f; text-decoration: none !important; line-height: 1.35; } .kg-micro-cta:hover, .kg-micro-cta:focus { background: #f9e3c4; color: #664219 !important; text-decoration: none !important; } .kg-micro-cta i { color: #d77a1b; font-size: 1em; flex-shrink: 0; } /* ===== Wave 2.4 (feature/kupat-gemel-cta-uplift): Exit-intent modal ===== Desktop-only Bootstrap 5 modal that appears once per 7 days when the cursor leaves the viewport through the top edge. CTA routes to the wizard, so this block is purely cosmetic. Kept intentionally restrained — trust + clarity over flashy animations — and disabled under prefers-reduced-motion. */ .kg-exit-modal .modal-dialog { max-width: 520px; } .kg-exit-modal__content { border: 0; border-radius: 14px; box-shadow: 0 20px 50px rgba(31, 75, 64, 0.25); overflow: hidden; } .kg-exit-modal__header { background: linear-gradient(135deg, #1f4b40 0%, #2f6a58 100%); color: #fff; border-bottom: 0; padding: 1rem 1.25rem; align-items: center; } .kg-exit-modal__title { font-size: 1.25rem; font-weight: 700; margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; line-height: 1.3; } .kg-exit-modal__title i { color: #ffd166; font-size: 1.15em; flex-shrink: 0; } .kg-exit-modal__header .btn-close { filter: invert(1) brightness(1.8); opacity: 0.85; } .kg-exit-modal__header .btn-close:hover { opacity: 1; } .kg-exit-modal__body { padding: 1.25rem 1.25rem 1rem; } .kg-exit-modal__lede { font-size: 1rem; line-height: 1.55; color: #2d3a38; margin-bottom: 0.85rem; } .kg-exit-modal__lede strong { color: #1f4b40; } .kg-exit-modal__bullets { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.35rem; } .kg-exit-modal__bullets li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: #33534a; line-height: 1.45; } .kg-exit-modal__bullets i { color: #17765a; font-size: 1.05em; flex-shrink: 0; } .kg-exit-modal__actions { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; } .kg-exit-modal__primary { background: #17765a; color: #fff !important; font-weight: 700; padding: 0.7rem 1rem; border-radius: 8px; border: 0; text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; font-size: 1rem; } .kg-exit-modal__primary:hover, .kg-exit-modal__primary:focus { background: #115c46; color: #fff !important; text-decoration: none !important; } .kg-exit-modal__secondary { background: transparent; color: #667770; border: 0; padding: 0.4rem 0.5rem; font-size: 0.875rem; font-weight: 500; text-decoration: underline; } .kg-exit-modal__secondary:hover, .kg-exit-modal__secondary:focus { color: #2d3a38; background: transparent; } .kg-exit-modal__fineprint { font-size: 0.75rem; color: #8a9794; line-height: 1.45; margin: 0; text-align: center; } @media (hover: hover) { .kg-exit-modal__primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(23, 118, 90, 0.3); } } @media (prefers-reduced-motion: reduce) { .kg-exit-modal__primary { transition: none; } .kg-exit-modal__primary:hover { transform: none; box-shadow: none; } .kg-exit-modal.fade, .kg-exit-modal.fade .modal-dialog { transition: none !important; } } /* ===== Wave 2.2 (feature/kupat-gemel-cta-uplift): Anchor navigation pill row ===== Horizontal row of section shortcuts. Active-pill highlighting is driven by the IntersectionObserver in KupatGemel.aspx, which toggles the `is-active` class. */ .kg-anchor-nav { margin: 0.75rem 0; /* Horizontal scroll on small screens so the pills don't wrap awkwardly. */ overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .kg-anchor-nav::-webkit-scrollbar { display: none; } .kg-anchor-nav__list { list-style: none; margin: 0; padding: 0.25rem 0; display: flex; gap: 0.4rem; flex-wrap: nowrap; width: max-content; min-width: 100%; justify-content: flex-start; } .kg-anchor-nav__link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: #ffffff; border: 1px solid #cfe8de; color: #2a4a41; font-size: 0.875rem; font-weight: 500; line-height: 1.2; text-decoration: none !important; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .kg-anchor-nav__link i { color: #17765a; font-size: 1em; flex-shrink: 0; } .kg-anchor-nav__link:hover, .kg-anchor-nav__link:focus { background: #eaf6f1; border-color: #17765a; color: #17765a; } .kg-anchor-nav__link.is-active { background: #17765a; border-color: #17765a; color: #fff; box-shadow: 0 2px 6px rgba(23, 118, 90, 0.18); } .kg-anchor-nav__link.is-active i { color: #fff; } .kg-anchor-nav__link--cta { border-color: #17765a; background: #eaf6f1; font-weight: 600; } @media (max-width: 575.98px) { .kg-anchor-nav__link { padding: 0.35rem 0.7rem; font-size: 0.8125rem; } } /* ===== Wave 2.1 (feature/kupat-gemel-cta-uplift): Sidebar wizard block + short-path ===== */ .kg-sidebar-wizard { text-align: center; padding: 0.5rem 0.25rem; margin-bottom: 0.5rem; } .kg-sidebar-wizard__hero img { max-width: 90%; height: auto; border-radius: 8px; } .kg-sidebar-wizard__title { margin: 0.5rem 0 0.25rem; font-size: 1.125rem; font-weight: 700; color: #17765a; line-height: 1.35; } .kg-sidebar-wizard__lede { margin: 0 0 0.25rem; font-size: 0.9rem; font-weight: 600; color: #3e5a52; } .kg-sidebar-wizard__sub { margin: 0 0 0.75rem; font-size: 0.95rem; font-weight: 600; color: #33534a; } .kg-sidebar-wizard__primary { margin-bottom: 0.55rem; } .kg-sidebar-wizard__primary-link { width: min(100%, 260px); min-height: 52px; display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; } /* רמז-מאמץ ("2 דק'") כשורת-משנה קטנה מתחת לתווית — נמנע משבירה מכוערת של "(2 דק')" באמצע ה-RTL, ונראה מכוון. עובד לכל אורכי-התוויות. */ .kg-cta-time { font-size: 0.72em; font-weight: 600; line-height: 1.1; margin-top: 2px; opacity: 0.95; } .kg-sidebar-wizard__secondary { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem 0.55rem; margin: 0.15rem auto 0.35rem; max-width: 280px; } .kg-sidebar-wizard__secondary-link, .kg-sidebar-wizard__secondary-link:link, .kg-sidebar-wizard__secondary-link:visited { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0.35rem 0.7rem; border: 1px solid rgba(23, 118, 90, 0.28); border-radius: 999px; background: #fff; color: #17765a; font: 700 0.86rem Arial, sans-serif; line-height: 1.25; text-decoration: none; } .kg-sidebar-wizard__secondary-link:hover, .kg-sidebar-wizard__secondary-link:active { border-color: rgba(23, 118, 90, 0.46); background: #f0faf6; color: #0f6048 !important; text-decoration: none; } /* האחדת צבע הכפתור הראשי ב-hero: מהליים הישן של ctaWizard2 (#42B72A) לירוק-הפעולה (#198754 = btn-success) — accent דומיננטי אחד, עקבי עם כפתורי ה-CTA המודרניים (kg-cta-card__btn / kg-lead-cta-btn). מנצח את ה-!important של ctaWizard2 בזכות ספציפיות גבוהה יותר (a.class). חל על כל ה-hero בכל הדפים שטוענים את הבאנדל. */ a.kg-sidebar-wizard__primary-link, a.kg-sidebar-wizard__primary-link:link, a.kg-sidebar-wizard__primary-link:visited { background-color: #198754 !important; } a.kg-sidebar-wizard__primary-link:hover, a.kg-sidebar-wizard__primary-link:active { background-color: #157347 !important; } .kg-sidebar-short-path-separator { margin-top: 0.65rem; margin-bottom: 0.45rem; } .kg-sidebar-short-path { text-align: center; margin: 0 0 0.65rem; } .kg-sidebar-short-path__hint { margin: 0; font-size: 0.98rem; line-height: 1.35; font-weight: 700; color: #1d4f42; } /* ===== Wave 1.7 (feature/kupat-gemel-cta-uplift): Micro-interactions + loading state ===== - All primary CTA buttons get a unified hover lift (no position: absolute tricks so we keep layout stable). - Calculator button gets a spinner swap when aria-busy="true". - prefers-reduced-motion disables lifts and spins. */ #openLead.kg-lead-cta-btn, .kg-lead-cta-btn, .kg-cta-card__btn, .kg-cta-btn, .ctaWizard, #kg-sim-calculate.kg-sim-calc-btn { transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s ease, color 0.2s ease; } @media (hover: hover) { #openLead.kg-lead-cta-btn:hover, .kg-lead-cta-btn:hover:not(:disabled):not([aria-busy="true"]), .kg-cta-card__btn:hover:not(:disabled), .kg-cta-btn:hover:not(:disabled), .ctaWizard:hover:not(:disabled), #kg-sim-calculate.kg-sim-calc-btn:hover:not([aria-busy="true"]):not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(23, 118, 90, 0.18); } } #openLead.kg-lead-cta-btn:active, .kg-lead-cta-btn:active, .kg-cta-card__btn:active, .kg-cta-btn:active, .ctaWizard:active, #kg-sim-calculate.kg-sim-calc-btn:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(23, 118, 90, 0.12); } /* Calculator button spinner swap */ .kg-sim-calc-btn { position: relative; } .kg-sim-calc-btn__spinner { display: none; vertical-align: -0.125em; margin-inline-start: 0.4rem; } .kg-sim-calc-btn[aria-busy="true"] { cursor: progress; opacity: 0.9; } .kg-sim-calc-btn[aria-busy="true"] .kg-sim-calc-btn__label { opacity: 0.75; } .kg-sim-calc-btn[aria-busy="true"] .kg-sim-calc-btn__spinner { display: inline-block; } @media (prefers-reduced-motion: reduce) { #openLead.kg-lead-cta-btn, .kg-lead-cta-btn, .kg-cta-card__btn, .kg-cta-btn, .ctaWizard, #kg-sim-calculate.kg-sim-calc-btn, .kg-cta-card--primary { transition: none !important; } #openLead.kg-lead-cta-btn:hover, .kg-lead-cta-btn:hover, .kg-cta-card__btn:hover, .kg-cta-btn:hover, .ctaWizard:hover, #kg-sim-calculate.kg-sim-calc-btn:hover { transform: none !important; } .kg-sim-calc-btn__spinner { animation: none !important; } } /* ===== Wave 1.6 (feature/kupat-gemel-cta-uplift): Structured disclaimer ===== The base .SMdisclaimer look (green-olive tint) is preserved via compareTables.css; we only add structure/typography rules for the new YMYL paragraphs. */ .kg-disclaimer { width: 100%; box-sizing: border-box; margin-right: 0; margin-left: 0; } .kg-disclaimer__body { margin: 0 0 0.5rem; line-height: 1.55; } .kg-disclaimer__body:last-child { margin-bottom: 0; } .kg-disclaimer__body--emphasis { font-weight: 600; color: #3e2f00; } .kg-disclaimer__micro { font-size: 0.85em; color: #595959; } /* ===== Wave 1.5 (feature/kupat-gemel-cta-uplift): Sidebar trust-signals card ===== Lives above the lead form. Kept visually quiet so it complements, not competes, with the form CTA below it. */ .kg-trust-card { border: 1px solid #d7eadf; border-radius: 10px; background: #fafdfb; padding: 0.85rem 1rem; } .kg-trust-card__title { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; color: #1f3a33; letter-spacing: 0.01em; } .kg-trust-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; color: #33534a; } .kg-trust-card__list li { display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.4; } .kg-trust-card__list i { color: #17765a; font-size: 1.05em; line-height: 1.35; flex-shrink: 0; } /* ===== Wave 1.3 (feature/kupat-gemel-cta-uplift): In-page CTA cards ===== Re-usable card style for CTA #1 (after returns table) and CTA #2 (after calculator). Visual weight + friendly reassurance line under the button. */ .kg-cta-card { border: 1px solid #cfe8de; border-radius: 10px; background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%); box-shadow: 0 1px 2px rgba(23, 118, 90, 0.04); transition: box-shadow 0.2s ease, transform 0.2s ease; } .kg-cta-card--primary { border-color: #17765a; box-shadow: 0 2px 8px rgba(23, 118, 90, 0.08); } .kg-cta-card .gemel-card-header { background: #17765a; color: #fff; font-weight: 600; border-radius: 10px 10px 0 0; } .kg-cta-card__body { color: #2a4a41; line-height: 1.55; } .kg-cta-card__btn { width: 100%; max-width: 360px; margin-top: 0.25rem; } .kg-cta-card__reassure { margin-top: 0.75rem; font-size: 0.8125rem; color: #4a6b63; display: flex; align-items: center; gap: 0.35rem; } .kg-cta-card__reassure i { color: #17765a; font-size: 1em; } /* Respect hover+focus without moving the whole card on touch devices */ @media (hover: hover) { .kg-cta-card--primary:hover { box-shadow: 0 6px 18px rgba(23, 118, 90, 0.14); transform: translateY(-1px); } } /* רשימת-בדיקה קומפקטית בכרטיס ה-CTA "בדיקה שנתית" שבסיידבר (kg-checkup-card) */ .kg-checkup-list { list-style: none; margin: 0 0 0.9rem; padding: 0; } .kg-checkup-list li { display: flex; align-items: flex-start; gap: 0.45rem; margin-bottom: 0.4rem; line-height: 1.4; color: #2a4a41; font-size: 0.9375rem; } .kg-checkup-list li i { color: #17765a; margin-top: 0.12em; flex: 0 0 auto; } /* ===== Wave 1.2 (feature/kupat-gemel-cta-uplift): Data trust-bar under H1 ===== Thin, calm data-credibility strip that lives between the share bar and breadcrumb. Conversion reassurance stays close to the lead form and CTAs. */ .kg-trust-bar { margin: 0.5rem 0 0.75rem; padding: 0.5rem 0.75rem; background: linear-gradient(90deg, #eaf6f1 0%, #f4fbf8 100%); border: 1px solid #cfe8de; border-radius: 8px; font-size: 0.9375rem; line-height: 1.4; color: #2a4a41; } .kg-trust-bar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: center; justify-content: center; } .kg-trust-bar__item { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; } .kg-trust-bar__icon { color: #17765a; font-size: 1.05em; line-height: 1; flex-shrink: 0; } @media (max-width: 575.98px) { .kg-trust-bar { padding: 0.4rem 0.6rem; font-size: 0.875rem; } .kg-trust-bar__list { gap: 0.25rem 0.85rem; } .kg-trust-bar__item { white-space: normal; } } /* ===== Wave 1.1 (feature/kupat-gemel-cta-uplift): Sticky mobile CTA behavior ===== - Hide entirely on desktop (>=992px): the sidebar form already covers that case. - Smooth fade + translate when the lead form enters the viewport (scroll-hide). - Respect prefers-reduced-motion. */ @media (min-width: 992px) { #leadOffer.kg-lead-offer { display: none !important; } /* Also zero out the spacer padding that body:has() injects, since the sticky is gone. */ body:has(#leadOffer.kg-lead-offer), body:has(.getOffer.kg-lead-offer), .kg-page:has(#leadOffer.kg-lead-offer), .kg-page:has(.getOffer.kg-lead-offer), .kupat-gemel-page:has(#leadOffer.kg-lead-offer), .kupat-gemel-page:has(.getOffer.kg-lead-offer) { padding-bottom: 0 !important; } } #leadOffer.kg-lead-offer { will-change: transform, opacity; transition: transform 0.2s ease, opacity 0.2s ease; } #leadOffer.kg-lead-offer.kg-lead-offer--hidden { transform: translateY(120%); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { #leadOffer.kg-lead-offer { transition: none; } #leadOffer.kg-lead-offer.kg-lead-offer--hidden { transform: none; visibility: hidden; } } /* הוספת padding-bottom לדף כדי לאפשר גלילה נוספת מתחת לכפתור הקבוע - גובה כפול מהכפתור (50px * 2 = 100px) */ body:has(#leadOffer.kg-lead-offer), body:has(.getOffer.kg-lead-offer) { padding-bottom: 100px; } /* Fallback לדפדפנים שלא תומכים ב-:has() - מוסיפים padding-bottom ל-container הראשי */ .kg-page:has(#leadOffer.kg-lead-offer), .kg-page:has(.getOffer.kg-lead-offer), .kupat-gemel-page:has(#leadOffer.kg-lead-offer), .kupat-gemel-page:has(.getOffer.kg-lead-offer) { padding-bottom: 100px; } /* Reset Bootstrap typography inside legacy lead control (YatzranimGemelPensia) - match compareTables 14px */ .lead-legacy-font-reset { font-size: 14px; } .lead-legacy-font-reset input, .lead-legacy-font-reset select, .lead-legacy-font-reset textarea, .lead-legacy-font-reset label, .lead-legacy-font-reset .leadFieldName { font-size: inherit; } .lead-legacy-font-reset .tbLead, .lead-legacy-font-reset .leadInputText { font-size: 14px !important; height: 32px !important; } .lead-legacy-font-reset .kidomet.selectLead, .lead-legacy-font-reset .kidomet { font-size: 14px !important; height: 34px !important; } .lead-legacy-font-reset #cbTnaim, .lead-legacy-font-reset input[type="checkbox"] { vertical-align: middle !important; } /* ===== מחשבונים (#calcs) – אייקון SVG וסגנון קישורים ===== */ #calcs .h3Heading .calc-heading-icon { float: left; vertical-align: middle; margin-left: 6px; color: inherit; flex-shrink: 0; } /* וידוא שהטבלה תופסת את כל הרוחב הזמין */ #calcs table { width: 100%; table-layout: auto; border-collapse: collapse; } #calcs .calcTD td { vertical-align: middle; width: 100%; padding: 0; } #calcs .calcTD td a { display: block; width: 100%; box-sizing: border-box; } #calcs a, #calcs .calcLinks, #calcs .calcLinksSubPage { color: #17765a; text-decoration: none; vertical-align: middle; line-height: 36px; height: 36px; display: block; width: 100%; box-sizing: border-box; } #calcs tr.calcTD:hover td, #calcs .calcTD .calcLinks:hover, #calcs .calcTD a:hover { background-color: #f7f7f3; } #calcs .calcTD td, #calcs .calcTD .calcLinks { transition: background-color 0.15s ease; } /* Mobile: full width links */ @media (max-width: 768px) { #calcs .calcTD td a { display: block !important; width: 100% !important; box-sizing: border-box; } #calcs .calcTD .calcLinks, #calcs .calcTD .calcLinksSubPage { display: block !important; width: 100% !important; } } /* ============================================ CompareKupotGemelDetails - Layout Bootstrap ============================================ */ /* Override gemelRight/gemelLeft floats for compare details page */ .kg-compare-details-page .kg-compare-row { margin-left: 0; margin-right: 0; } .kg-compare-details-page .kg-compare-titles .gemelTable, .kg-compare-details-page .kg-compare-content .gemelTable { width: 100% !important; } /* Fund columns - min width for horizontal scroll on mobile */ .kg-compare-details-page .kg-compare-fund-col { min-width: 220px; vertical-align: top; } /* Chart wrapper in each fund column */ .kg-compare-details-page .kg-compare-chart-wrap { direction: rtl; width: 100%; border: 1px solid #d1d1d1; text-align: center; margin-top: 10px; border-radius: 4px; } .kg-compare-details-page .kg-compare-chart-wrap canvas { max-width: 100%; } .kg-compare-details-page .kg-compare-chart-wrap .chart { max-width: 100%; width: 100% !important; } /* Horizontal scroll for comparison table on mobile */ .kg-compare-details-page .kg-compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .kg-compare-details-page .kg-compare-content .gemelLeftInner { width: 100%; position: static; right: auto; bottom: auto; } /* Mobile: stack titles above content, adjust spacing */ @media (max-width: 991.98px) { .kg-compare-details-page .kg-compare-titles { order: 1; } .kg-compare-details-page .kg-compare-content { order: 2; } .kg-compare-details-page .kg-compare-fund-col { min-width: 200px; } .kg-compare-details-page .kg-compare-table .kg-fund-col { min-width: 200px; } } /* Override gemelDetailsCell text-indent (from compareTables.css) - breaks RTL alignment when text wraps */ .kg-compare-details-page .gemelDetailsCell { text-indent: 0; } /* Override titleHight text-indent - same issue */ .kg-compare-details-page .titleHight { text-indent: 0; } /* Single compare table - fixed layout, widths from colgroup for equal fund columns */ .kg-compare-details-page .kg-compare-table { table-layout: fixed; width: 100%; } .kg-compare-details-page .kg-compare-table .kg-label-col { min-width: 180px; } .kg-compare-details-page .kg-compare-table .kg-fund-col { min-width: 200px; } /* Long fund names - wrap instead of expanding column */ .kg-compare-details-page .kg-compare-table .kg-fund-col .h1KupatGemel { overflow-wrap: break-word; word-break: break-word; } /* Exposures/Assets - two columns per fund, force LTR for correct left/right order */ .kg-compare-details-page .kg-compare-table .kg-exposure-cell { padding: 6px 8px; direction: ltr; } .kg-compare-details-page .kg-compare-table .kg-exposure-cell .kg-exposure-inner, .kg-compare-details-page .kg-compare-table .kg-exposure-cell .kg-exposure-header { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; align-items: center; } .kg-compare-details-page .kg-compare-table .kg-exposures-subheader td, .kg-compare-details-page .kg-compare-table .kg-assets-subheader td { background-color: #edf2f5; font-weight: 600; } .kg-compare-details-page .kg-compare-table .kg-exposures-subheader .kg-exposure-header, .kg-compare-details-page .kg-compare-table .kg-assets-subheader .kg-exposure-header { font-size: 12px; color: #495057; } /* Section title rows - background for visual separation (נתונים כלליים, יתרות, תשואות, מדדי סיכון, etc.) */ .kg-compare-details-page .kg-compare-table tr.kg-section-title-row td { background-color: #d8dbb0; font-weight: 600; } /* שורת נתונים כלליים עם כפתורי CTA – עמודת הכותרת תמלא את גובה השורה (43px) */ .kg-compare-details-page .kg-compare-table tr.kg-section-title-row-with-cta td.titleHight { min-height: 43px; } /* תאים עם כפתור CTA לליד – מרכוז הכפתור בעמודת הקופה */ .kg-compare-details-page .kg-compare-table td.kg-lead-cta-cell { text-align: center; vertical-align: middle; padding: 6px 0.5rem; } .kg-compare-details-page .kg-compare-table td.kg-lead-cta-cell .kg-chart-btn { white-space: nowrap; } /* Titles column: remove fixed widths, fix font size and background alignment */ .kg-compare-details-page .kg-compare-titles .titleHight, .kg-compare-details-page .kg-compare-content .titleHight, .kg-compare-details-page .kg-compare-table .titleHight { width: 100% !important; max-width: 100% !important; box-sizing: border-box; font-size: 14px; height: auto; min-height: 30px; padding: 6px 0.5rem 6px 0; line-height: 1.35; display: flex; align-items: center; } /* Rows with title + graph button: flex, consistent gap between title and button */ .kg-compare-details-page .kg-compare-titles td.kg-title-with-btn, .kg-compare-details-page .kg-compare-table td.kg-title-with-btn { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; max-width: 100%; padding-inline-end: 0.5rem; } .kg-compare-details-page .kg-compare-titles td.kg-title-with-btn .titleHight, .kg-compare-details-page .kg-compare-table td.kg-title-with-btn .titleHight { flex: 1 1 auto; min-width: 0; width: auto !important; } .kg-compare-details-page .kg-compare-titles td.kg-title-with-btn .graphButton, .kg-compare-details-page .kg-compare-titles td.kg-title-with-btn .kg-chart-btn, .kg-compare-details-page .kg-compare-table td.kg-title-with-btn .graphButton, .kg-compare-details-page .kg-compare-table td.kg-title-with-btn .kg-chart-btn { float: none; flex-shrink: 0; } /* כפתורי גרפים – מצב רגיל: רקע מלא (#17765a), Hover: רקע כהה יותר */ .kg-compare-details-page .kg-chart-btn { --kg-chart-btn-color: #17765a; color: #fff !important; border-color: var(--kg-chart-btn-color) !important; background-color: var(--kg-chart-btn-color) !important; font-weight: 600; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .kg-compare-details-page .kg-chart-btn:hover { color: #fff !important; background-color: #0f5c47 !important; border-color: #0f5c47 !important; } .kg-compare-details-page .kg-chart-btn i { margin-left: 0.35em; } /* ===== מודלים – מרכוז בדסקטופ ===== */ .kg-compare-details-page .modal { justify-content: center !important; align-items: center !important; } .kg-compare-details-page .modal .modal-dialog { margin: 1.75rem auto !important; } /* כותרת ממורכזת + כפתור סגירה בפינה הימנית */ .kg-compare-details-page .modal-header.kg-modal-header-centered { position: relative; justify-content: center; padding-inline-end: 3rem; } .kg-compare-details-page .modal-header.kg-modal-header-centered .modal-title { text-align: center; margin: 0; } .kg-compare-details-page .modal-header.kg-modal-header-centered .btn-close { position: absolute; right: 1rem; left: auto; top: 50%; transform: translateY(-50%); margin: 0; } /* מודל מדדי סיכון – רוחב. CookieManager.ascx מגדיר .modal-content { max-width: 600px } גלובלית – דריסה */ @media (min-width: 992px) { #modalTsuaSikon .modal-dialog.kg-modal-sikon-wider .modal-content { width: 1370px !important; max-width: 1370px !important; } } @media (max-width: 991.98px) { #modalTsuaSikon .modal-dialog.kg-modal-sikon-wider .modal-content { width: calc(100vw - 2rem) !important; max-width: none !important; } } /* מודל גרף תשואות – דריסת max-width:600px מ-CookieManager */ @media (min-width: 992px) { #modalTsuot .modal-content { width: 1140px !important; max-width: 1140px !important; } } @media (max-width: 991.98px) { #modalTsuot .modal-content { width: calc(100vw - 2rem) !important; max-width: none !important; } } /* מודל חלוקה לנכסים – דריסת max-width:600px מ-CookieManager */ @media (min-width: 992px) { #modalAssets .modal-content { width: 1140px !important; max-width: 1140px !important; } } @media (max-width: 991.98px) { #modalAssets .modal-content { width: calc(100vw - 2rem) !important; max-width: none !important; } } /* מודל חלוקה לנכסים – גרף עמודות מוערמות: גובה מספיק ל-chartArea (מקרא+צירים) במובייל */ #modalAssets .kg-modal-assets-bar-chart { position: relative; width: 100%; height: 320px; min-height: 320px; box-sizing: border-box; } @media (max-width: 991.98px) { #modalAssets .kg-modal-assets-bar-chart { height: 440px; min-height: 440px; } } /* גרפי מדדי סיכון – דסקטופ: זה לצד זה, גובה מוגדל */ .kg-sikon-charts-row { display: flex; flex-direction: row; gap: 1.5rem; width: 100%; } .kg-sikon-charts-row .kg-sikon-chart-container { position: relative; flex: 1; min-width: 380px; } .kg-sikon-charts-row .kg-sikon-chart-scatter { height: 420px; min-height: 420px; } .kg-sikon-charts-row .kg-sikon-chart-sharp { height: 380px; min-height: 380px; } /* מובייל – גרפים במבנה אנכי, גובה מספק */ @media (max-width: 991.98px) { .kg-sikon-charts-row { flex-direction: column; } .kg-sikon-charts-row .kg-sikon-chart-container { min-width: 0; } .kg-sikon-charts-row .kg-sikon-chart-scatter { height: 360px; min-height: 360px; } .kg-sikon-charts-row .kg-sikon-chart-sharp { height: 320px; min-height: 320px; } } /* טבלת מדדי סיכון במודל – קומפקטית (פחות מקום) */ .kg-compare-details-page #modalTsuaSikon .kg-modal-tsuot-table-wrap { width: 100%; padding: 0 0.5rem; margin-top: 1rem; } .kg-compare-details-page #modalTsuaSikon .kg-modal-sikon-table { background-color: #EDF1D8; font-weight: 600; font-size: 0.875rem; } .kg-compare-details-page #modalTsuaSikon .kg-modal-sikon-table .kg-modal-th { background-color: #d8dbb0; color: #1a1a1a; font-weight: 600; padding: 0.3rem 0.35rem; font-size: 0.8rem; border-color: rgba(0,0,0,0.1); vertical-align: middle; } .kg-compare-details-page #modalTsuaSikon .kg-modal-sikon-table td { padding: 0.25rem 0.35rem; font-size: 0.85rem; vertical-align: middle; border-color: rgba(0,0,0,0.1); } /* טבלת חלוקה לנכסים במודל */ .kg-modal-assets-table-wrap { width: 100%; padding: 0 0.5rem; margin-top: 1rem; } .kg-modal-assets-table { background-color: #EDF1D8; font-weight: 600; font-size: 0.875rem; } .kg-modal-assets-table .kg-modal-th { background-color: #d8dbb0; color: #1a1a1a; font-weight: 600; padding: 0.3rem 0.35rem; font-size: 0.8rem; border-color: rgba(0,0,0,0.1); vertical-align: middle; } .kg-modal-assets-table td { padding: 0.25rem 0.35rem; font-size: 0.85rem; vertical-align: middle; border-color: rgba(0,0,0,0.1); } /* טבלת תשואות במודל – עיצוב מודרני Bootstrap, בלי פינות תמונה */ .kg-compare-details-page #modalTsuot .kg-modal-tsuot-table-wrap { width: 100%; padding: 0 0.5rem; } .kg-compare-details-page #modalTsuot .kg-modal-tsuot-table { background-color: #EDF1D8; font-weight: 600; } .kg-compare-details-page #modalTsuot .kg-modal-tsuot-table .kg-modal-th { background-color: #d8dbb0; color: #1a1a1a; font-weight: 600; padding: 0.5rem 0.4rem; border-color: rgba(0,0,0,0.1); vertical-align: middle; } .kg-compare-details-page #modalTsuot .kg-modal-tsuot-table td, .kg-compare-details-page #modalTsuot .kg-modal-tsuot-table .gemelCell { padding: 0.4rem 0.4rem; vertical-align: middle; border-color: rgba(0,0,0,0.1); } /* מובייל – מדדי סיכון: טבלה מתחת לגרף, גרפים ברוחב מלא */ @media (max-width: 991.98px) { .kg-compare-details-page #modalTsuaSikon .modal-body { display: flex; flex-direction: column; padding: 0.75rem; } .kg-compare-details-page #modalTsuaSikon #kg-sikon-over-time-wrap { order: 1; width: 100%; } .kg-compare-details-page #modalTsuaSikon .kg-sikon-card-body { padding-inline: 0; } .kg-compare-details-page #modalTsuaSikon .kg-modal-tsuot-table-wrap { order: 2; width: 100%; margin-top: 1rem; padding: 0; } } /* מובייל – טבלה מתחת לגרף, ממורכזת */ @media (max-width: 991.98px) { .kg-compare-details-page #modalTsuot .modal-body { display: flex; flex-direction: column; padding: 1rem; } .kg-compare-details-page #modalTsuot #kg-returns-over-time-wrap { order: 1; width: 100%; } .kg-compare-details-page #modalTsuot .kg-modal-tsuot-table-wrap { order: 2; width: 100%; margin-top: 1rem; padding: 0; } .kg-compare-details-page #modalTsuot .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } } /* * דף KupatGemel בלבד — טבלת דירוג שנטענת ל־#kg-dynamic-returns-table (fundDetailsLoader). * גופן טבלה 15px; רוחב מינימלי ועמודות מוכפלים ב־×1.15 ביחס לבסיס הקודם. */ @media (max-width: 767.98px) { #kg-dynamic-returns-table .fund-ranking-section .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } #kg-dynamic-returns-table .fund-ranking-table { direction: rtl; table-layout: fixed; width: 100%; min-width: 736px; margin-bottom: 0 !important; } #kg-dynamic-returns-table .fund-ranking-table thead th, #kg-dynamic-returns-table .fund-ranking-table tbody td, #kg-dynamic-returns-table .fund-ranking-table tfoot td { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } #kg-dynamic-returns-table .fund-ranking-table thead th { font-size: 15px !important; line-height: 1.3 !important; vertical-align: top !important; padding-top: 0.4rem !important; padding-bottom: 0.5rem !important; white-space: normal; word-break: normal; overflow-wrap: normal; hyphens: manual; } #kg-dynamic-returns-table .fund-ranking-table tbody td, #kg-dynamic-returns-table .fund-ranking-table tfoot td { font-size: 15px !important; line-height: 1.28 !important; vertical-align: middle; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } #kg-dynamic-returns-table .fund-ranking-table thead th:nth-child(1), #kg-dynamic-returns-table .fund-ranking-table tbody td:nth-child(1) { width: 1.9rem; min-width: 1.9rem; max-width: 2.3rem; padding-inline-start: 0.1rem !important; /* מרווח מעמודת שם הקופה (ב־RTL — קצה משותף עם שם) */ padding-inline-end: 0.45rem !important; } #kg-dynamic-returns-table .fund-ranking-table thead th.fund-ranking-col-name, #kg-dynamic-returns-table .fund-ranking-table tbody td.fund-ranking-col-name { width: 10.7rem; min-width: 10.7rem; max-width: none; box-sizing: border-box; /* דוחף את «שם קופה» מעט שמאלה — ריווח מכותרת/תוכן דירוג */ padding-inline-start: 0.5rem !important; } #kg-dynamic-returns-table .fund-ranking-table thead th.fund-ranking-col-name { word-break: normal; overflow-wrap: normal; } #kg-dynamic-returns-table .fund-ranking-table tbody td.fund-ranking-col-name { word-break: break-word; overflow-wrap: break-word; } /* כותרות עמודות מספריות: רוחב מעט גדול יותר, שבירה רק בין מילים אם צריך */ #kg-dynamic-returns-table .fund-ranking-table thead th:nth-child(n+3):nth-child(-n+9) { width: 3.85rem; min-width: 3.68rem; max-width: 4.14rem; white-space: normal; word-break: normal; overflow-wrap: normal; } /* נתונים: שורה אחת כדי לשמור על גובה שורה נמוך */ #kg-dynamic-returns-table .fund-ranking-table tbody td:nth-child(n+3):nth-child(-n+9) { width: 3.85rem; min-width: 3.68rem; max-width: 4.14rem; white-space: nowrap; } #kg-dynamic-returns-table .fund-ranking-table thead th:nth-child(10), #kg-dynamic-returns-table .fund-ranking-table tbody td:nth-child(10) { width: 5.3rem; min-width: 4.9rem; max-width: 6.05rem; white-space: normal; word-break: normal; overflow-wrap: normal; } #kg-dynamic-returns-table .fund-ranking-table thead th:nth-child(10) { vertical-align: top !important; } #kg-dynamic-returns-table .fund-ranking-table .btn { padding: 0.22rem 0.4rem !important; font-size: 14px !important; line-height: 1.22 !important; } } /* ========================================================================== Wave 4.1 (feature/kupat-gemel-cta-uplift) - FAQ (Bootstrap 5 accordion) Themes default BS blue away; aligns with .kg-related / .kg-trust-card. CompareKupotGemel uses .faq-container in gemel-modern.css — same #17765a family there after the gemel-modern FAQ refresh. ========================================================================== */ .kg-faq { margin: 2rem 0 1.75rem; padding: 1.25rem 1.1rem 1.3rem; background: #fafdfb; border: 1px solid #d7eadf; border-radius: 10px; box-shadow: 0 1px 2px rgba(23, 118, 90, 0.04); } .kg-faq__title { font-size: 1.35rem; font-weight: 700; color: #1f3a33; margin: 0 0 1rem; line-height: 1.25; text-align: right; } /* Bootstrap 5.3 CSS variables (accordion lives inside .kg-faq) */ .kg-faq .kg-faq__accordion.accordion { --bs-accordion-color: #33534a; --bs-accordion-bg: #fff; --bs-accordion-border-color: #cfe8de; --bs-accordion-border-radius: 0.5rem; --bs-accordion-inner-border-radius: 0.375rem; --bs-accordion-btn-color: #1f3a33; --bs-accordion-btn-bg: #fff; --bs-accordion-btn-focus-border-color: #9ecfb8; --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(23, 118, 90, 0.18); --bs-accordion-active-color: #0f3d2e; --bs-accordion-active-bg: #e8f4f0; --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2317765a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23125a46'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .kg-faq .accordion-item { background-color: #fff; border: 1px solid #cfe8de; } .kg-faq .accordion-item:not(:last-child) { margin-bottom: 0.5rem; } .kg-faq .accordion-button { font-weight: 600; font-size: 1.02rem; line-height: 1.35; text-align: right; } .kg-faq .accordion-button:not(.collapsed) { box-shadow: none; color: var(--bs-accordion-active-color); background-color: var(--bs-accordion-active-bg); } .kg-faq .accordion-body { font-size: 0.95rem; line-height: 1.55; color: #33534a; text-align: right; padding-top: 0.5rem; } .kg-faq .accordion-body a { color: #17765a; text-decoration: underline; } .kg-faq .accordion-body a:hover, .kg-faq .accordion-body a:focus-visible { color: #125a46; } @media (prefers-reduced-motion: reduce) { .kg-faq .kg-faq__accordion.accordion * { transition: none !important; } } /* ========================================================================== Wave 4.3 (feature/kupat-gemel-cta-uplift) - Related funds block 3-4 same-specialization funds rendered as a responsive card grid. Color family aligned with .kg-trust-card / .kg-cta-card (#17765a, mint borders) — option A: same design language, not a full CTA clone. ========================================================================== */ .kg-related { margin: 2rem 0 1.75rem; padding: 1.25rem 1.1rem 1.3rem; background: #fafdfb; border: 1px solid #d7eadf; border-radius: 10px; box-shadow: 0 1px 2px rgba(23, 118, 90, 0.04); } .kg-related__head { margin-bottom: 1rem; } .kg-related__title { font-size: 1.35rem; font-weight: 700; color: #1f3a33; margin: 0 0 .35rem; line-height: 1.25; } .kg-related__lede { color: #33534a; font-size: .94rem; line-height: 1.45; margin: 0; } .kg-related__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .kg-related__card { background: #fff; border: 1px solid #cfe8de; border-radius: 10px; padding: 1rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .65rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } @media (hover: hover) { .kg-related__card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(23, 118, 90, 0.1); border-color: #9ecfb8; } } .kg-related__card-head { min-height: 3.1rem; } .kg-related__card-title { font-size: 1.02rem; font-weight: 700; line-height: 1.3; margin: 0 0 .2rem; } .kg-related__card-link { color: #1f2933; text-decoration: none; transition: color 0.15s ease; } .kg-related__card-link:hover, .kg-related__card-link:focus-visible { color: #17765a; text-decoration: underline; } .kg-related__card-company { font-size: .82rem; color: #4a5c56; margin: 0; line-height: 1.35; } .kg-related__card-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; border-top: 1px dashed #cfe8de; border-bottom: 1px dashed #cfe8de; padding: .7rem 0; } .kg-related__stat { display: flex; flex-direction: column; text-align: center; } .kg-related__stat-label { font-size: .72rem; color: #4a5c56; line-height: 1.2; margin-bottom: .2rem; } .kg-related__stat-value { font-size: .98rem; font-weight: 700; color: #1f2933; line-height: 1.2; direction: ltr; unicode-bidi: plaintext; } .kg-related__card-cta { margin-top: auto; align-self: flex-start; font-size: .9rem; font-weight: 600; color: #17765a; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; padding: .15rem 0; transition: color 0.15s ease; } .kg-related__card-cta:hover, .kg-related__card-cta:focus-visible { color: #125a46; text-decoration: underline; } .kg-related__fineprint { margin: 1rem 0 0; font-size: .78rem; color: #5a6b66; line-height: 1.45; } @media (max-width: 576px) { .kg-related { padding: 1rem .85rem 1.1rem; } .kg-related__grid { grid-template-columns: 1fr; } .kg-related__card-head { min-height: 0; } } @media (prefers-reduced-motion: reduce) { .kg-related__card { transition: none; } .kg-related__card:hover { transform: none; } } /* ---- FAQ accordion ---- */ .faq-item { background: #fafdfb; border: 1px solid #cfe8de; border-radius: 8px; box-shadow: 0 1px 3px rgba(23, 118, 90, 0.06); overflow: hidden; } .faq-question { display: flex; align-items: center; padding: 20px; cursor: pointer; background: #fff; border-bottom: 1px solid #e8f0ed; transition: background-color 0.3s ease; } .faq-question:hover { background: #f5fbf8; } .faq-question.active { background: #e8f4f0; border-bottom-color: #cfe8de; } .faq-icon { background: #17765a; color: white; width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; margin-right: 1em; flex-shrink: 0; transition: transform 0.3s ease; } .faq-question.active .faq-icon { transform: scale(1.1); } .faq-text { flex: 1; margin: 0; padding: 0; } h3.faq-text { margin: 0; padding: 0; font-size: 18px; font-weight: 600; color: #1f3a33; text-align: right; direction: rtl; width: 100%; margin-right: 1em; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: #fff; } .faq-answer.open { max-height: 1500px; } .faq-answer p { padding: 20px; margin: 0; font-size: 16px; line-height: 1.6; color: #33534a; text-align: right; } .faq-answer ul { padding: 20px; margin: 0; text-align: right; direction: rtl; } .faq-answer li { text-align: right; direction: rtl; } .faq-answer a { color: #17765a; text-decoration: underline; } .faq-answer a:hover, .faq-answer a:focus { color: #125a46; } @media (max-width: 768px) { .faq-question { padding: 15px; } .faq-icon { width: 25px; height: 25px; font-size: 16px; margin-right: 0.8em; } h3.faq-text { font-size: 16px; } .faq-answer p { padding: 15px; font-size: 16px; } .faq-answer ul { padding: 15px; } } /* ---- FAQ section: reset global compareTables.css width constraints inside detail page ---- */ .kg-data .indexArticle.supermarkerArticle { max-width: 100%; width: 100%; margin: 0; padding: 0; font-size: inherit; } #faq-services { display: flex; flex-direction: column; gap: 0.5rem; } /* ════════════════════════════════════════════════════════════════════════════ מערכת העיצוב המשותפת לדפי הגמל (2026-08, feature/compare-filters-modern — שלב 0.5) נטען בכל דפי הפרטים/ההשוואה דרך cssKupatGemel. tokens זהים ל-gemel-modern.css. רכיבים: תגיות · KPI · מפתח-ערך · כרטיס · seg · כפתור pill · פאנל הקופה בתוך הרשימה (kg-xp) ════════════════════════════════════════════════════════════════════════════ */ :root { --kg-brand: #17765a; --kg-brand-dark: #0f5a47; --kg-line: #dce8e3; --kg-soft: #eef4f1; --kg-soft2: #e3f3ec; --kg-ink: #263d35; --kg-muted: #5a6e66; --kg-warn: #c05a2e; --kg-warn-bg: #fdf1ea; --kg-pos: #1b7f4d; --kg-neg: #b3261e; } .kg-i { width: 1em; height: 1em; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } /* תגיות */ .kg-tag { display: inline-flex; align-items: center; gap: 4px; background: #f1f5f3; border-radius: 999px; padding: 3px 9px; font-size: 12px; color: var(--kg-ink); white-space: nowrap; line-height: 1.4; } .kg-tag--rank { background: var(--kg-brand); color: #fff; font-weight: bold; } .kg-tag--warn { background: var(--kg-warn-bg); color: #b3431a; font-weight: bold; } .kg-tag--ok { background: var(--kg-soft2); color: var(--kg-brand-dark); font-weight: bold; } .kg-tag--risk-h { background: #fdf1ea; color: #b3431a; } .kg-tag--risk-m { background: #fff6dc; color: #8a6a00; } .kg-tag--risk-l { background: var(--kg-soft2); color: var(--kg-brand-dark); } /* KPI */ .kg-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 12px 0; } .kg-kpi { background: #f7faf8; border: 1px solid #e3ede8; border-radius: 10px; padding: 8px 10px; text-align: center; min-width: 0; } .kg-kpi small { display: block; color: var(--kg-muted); font-size: 11.5px; white-space: nowrap; } .kg-kpi b { font-size: 16px; direction: ltr; unicode-bidi: isolate; display: inline-block; } .kg-kpi .kg-kpi__d { display: block; font-size: 11.5px; margin-top: 2px; color: var(--kg-muted); } .kg-pos { color: var(--kg-pos); font-weight: bold; } .kg-neg { color: var(--kg-neg); font-weight: bold; } .kg-pos, .kg-neg, .kg-num { direction: ltr; unicode-bidi: isolate; } span.kg-pos, span.kg-neg, b.kg-pos, b.kg-neg, .kg-num { display: inline-block; } /* מפתח-ערך */ .kg-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; font-size: 13.5px; margin: 0 0 12px; } .kg-dgrid > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #eef2f0; } .kg-dgrid > div > span:last-child { font-weight: bold; white-space: nowrap; direction: ltr; unicode-bidi: isolate; } .kg-dgrid > div > span:first-child { color: var(--kg-muted); } .kg-dgrid--one { grid-template-columns: 1fr; } /* seg */ .kg-seg { display: inline-flex; border: 1.5px solid var(--kg-line); border-radius: 999px; overflow: hidden; background: #fff; } .kg-seg button { border: 0; background: transparent; padding: 6px 14px; font-size: 13px; cursor: pointer; min-height: 34px; color: var(--kg-ink); font-family: inherit; white-space: nowrap; } .kg-seg button.on { background: var(--kg-brand); color: #fff; font-weight: bold; } /* לוגו-ראשי-תיבות */ .kg-logo { width: 40px; height: 40px; border-radius: 10px; background: #e7efeb; color: var(--kg-brand-dark); font-size: 13px; font-weight: bold; display: grid; place-items: center; flex: 0 0 auto; } /* ── הפאנל הנפתח בתוך הרשימה — גרסה 2 (FundDetailsConfig.panelVersion = 2) ── */ .kg-xp { background: #fff; border: 1.5px solid #cfe3da; border-radius: 14px; padding: 14px 16px 6px; margin-bottom: 12px; } .kg-xp__h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; } .kg-xp__t { min-width: 0; flex: 1; } .kg-xp__t h5 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; font-weight: bold; } .kg-xp__t h5 small { font-weight: normal; color: var(--kg-muted); font-size: 12.5px; } .kg-xp__meta { display: flex; gap: 6px; flex-wrap: wrap; } .kg-xp__link { font-size: 13px; color: var(--kg-brand-dark); white-space: nowrap; margin-inline-start: auto; text-decoration: none; align-self: flex-start; padding-top: 4px; } .kg-xp__link:hover { text-decoration: underline; color: var(--kg-brand-dark); } .kg-xp-seg { margin-inline-start: auto; } .kg-xp-hidden { display: none !important; } @media (max-width: 767px) { .kg-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kg-dgrid { grid-template-columns: 1fr; } .kg-xp__h { flex-wrap: wrap; } .kg-xp__link { margin-inline-start: 0; flex: 1 1 100%; } } /* panel v2: the legacy header + the two detail cards are replaced by .kg-xp */ .kg-xp-v2 > .fund-details-header, .kg-xp-v2 > .row.g-3.mb-4 { display: none !important; } .kg-xp-v2 .fund-ranking-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .kg-xp-v2 .fund-ranking-header .fund-ranking-title { margin: 0; } .kg-xp-v2 .fund-ranking-header .fund-specialization-info { flex: 1 1 auto; } /* ════════════════════════════════════════════════════════════════════════════ שלב 1ב — מעטפת המוקאפ על דף הקופה (2026-08-27, feature/compare-filters-modern) Opt-in בלבד: body.kg-fund-body / #main.kg-fund-page — היום רק KupatGemel.aspx. PensionFund / MenahalimInsurance טוענים את אותו קובץ ואינם מוסיפים את המחלקה → לא מושפעים. tokens (--kg-*) מוגדרים בבלוק "מערכת העיצוב" למעלה. ════════════════════════════════════════════════════════════════════════════ */ /* ── מעטפת: רקע + טיפוגרפיה ── */ body.kg-fund-body { background-color: #f4f7f6 !important; } #main.kg-fund-page { font-family: 'Noto Sans Hebrew', Arial, Helvetica, sans-serif; color: var(--kg-ink); } #main.kg-fund-page .h1Title, #main.kg-fund-page .h2Title, #main.kg-fund-page h2, #main.kg-fund-page h3 { font-family: inherit; } /* ── breadcrumb + "חזרה" כ-pill ── */ #main.kg-fund-page #sitemap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #main.kg-fund-page #sitemap .breadcrumb { margin: 0; flex: 1 1 auto; } #main.kg-fund-page .kupat-back-link { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--kg-line) !important; background: #fff !important; color: var(--kg-ink) !important; border-radius: 999px !important; padding: 6px 14px !important; font-size: 13.5px !important; min-height: 38px; text-decoration: none !important; box-shadow: none !important; } #main.kg-fund-page .kupat-back-link:hover { border-color: var(--kg-brand) !important; color: var(--kg-brand-dark) !important; } /* ── כפתורי pill של המערכת ── */ #main.kg-fund-page .kg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--kg-brand); color: #fff; border-radius: 999px; padding: 0 20px; min-height: 44px; font-size: 15px; font-weight: bold; cursor: pointer; text-decoration: none; white-space: nowrap; font-family: inherit; } #main.kg-fund-page .kg-btn:hover { background: var(--kg-brand-dark); color: #fff; } #main.kg-fund-page .kg-btn--o { background: #fff; color: var(--kg-brand-dark); border: 1.5px solid var(--kg-brand); } #main.kg-fund-page .kg-btn--o:hover { background: var(--kg-soft); color: var(--kg-brand-dark); } #main.kg-fund-page .kg-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; } /* ── חיפוש קופה אחרת — שורת pill (מוקאפ הערה 4) ── */ #main.kg-fund-page .kg-qrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; } #main.kg-fund-page .kg-qsearch { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--kg-line); border-radius: 999px; padding-inline-start: 14px; padding-inline-end: 6px; min-height: 44px; background: #fff; flex: 0 1 460px; min-width: 280px; } #main.kg-fund-page .kg-qsearch__ic { color: #8a9a93; font-size: 15px; } #main.kg-fund-page .kg-qsearch__in { flex: 1; min-width: 0; } #main.kg-fund-page .kg-qsearch__input { width: 100%; border: 0; outline: none; background: transparent; font-size: 14px; font-family: inherit; color: var(--kg-ink); min-height: 40px; } #main.kg-fund-page .kg-qsearch__input::placeholder { color: #8a9a93; } #main.kg-fund-page .kg-qsearch__in .list-group { top: 100%; right: 0; border-radius: 12px; overflow: hidden; } #main.kg-fund-page .kg-qrow__hint { font-size: 12.5px; color: var(--kg-muted); } /* ── כרטיסים: שפת המערכת במקום ירוק-זית ── */ #main.kg-fund-page .card { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 16px; } #main.kg-fund-page .card-header.gemel-card-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff !important; color: var(--kg-ink) !important; border-bottom: 0 !important; border-radius: 16px 16px 0 0 !important; padding: 16px 18px 4px !important; font-size: 17px; font-weight: bold; } #main.kg-fund-page .kg-card-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--kg-soft); color: var(--kg-brand); display: grid; place-items: center; flex: 0 0 auto; font-size: 17px; } #main.kg-fund-page .kg-card-title { margin: 0; font-size: 17px; font-weight: bold; color: var(--kg-ink); line-height: 1.3; } #main.kg-fund-page .kg-card-sub { font-size: 12.5px; color: var(--kg-muted); font-weight: normal; } /* ── hero (מוקאפ הערות 2–3, 17) ── */ #main.kg-fund-page .kg-hero-card { padding: 16px 18px; } #main.kg-fund-page .kg-hero-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; align-items: start; } #main.kg-fund-page .kg-hero-ttl { display: flex; gap: 14px; align-items: flex-start; } #main.kg-fund-page .kg-logo--lg { width: 60px; height: 60px; font-size: 18px; border-radius: 14px; } #main.kg-fund-page .kg-hero-ttl__t { min-width: 0; } #main.kg-fund-page .kg-hero-h1 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; color: var(--kg-ink); text-align: right; } #main.kg-fund-page .kg-hero-h1 small { font-weight: normal; color: var(--kg-muted); font-size: 14px; } #main.kg-fund-page .kg-hero-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; } #main.kg-fund-page .kg-hero-sub { margin: 0 0 6px; font-size: 13.5px; font-weight: normal; color: var(--kg-muted); text-align: right; line-height: 1.5; } #main.kg-fund-page .kg-hero-intro { margin: 0 0 6px; color: var(--kg-muted); font-size: 14px; max-width: 760px; } #main.kg-fund-page .kg-hero-facts { margin: 0; color: var(--kg-muted); font-size: 12.5px; } #main.kg-fund-page .kg-hero-desc { margin-top: 12px; background: #f7faf8; border: 1px solid #e3ede8; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; max-width: 760px; } #main.kg-fund-page .kg-hero-desc b { display: block; margin-bottom: 4px; font-size: 13px; color: var(--kg-brand-dark); } #main.kg-fund-page .kg-hero-desc p { margin: 0; color: var(--kg-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #main.kg-fund-page .kg-hero-desc--open p { display: block; -webkit-line-clamp: unset; } #main.kg-fund-page .kg-hero-desc__more { border: 0; background: transparent; color: var(--kg-brand-dark); font-weight: bold; cursor: pointer; padding: 4px 0 0; font-size: 13px; text-decoration: underline; font-family: inherit; } #main.kg-fund-page .kg-hero-actions { display: flex; flex-direction: column; gap: 8px; min-width: 230px; } #main.kg-fund-page .kg-kpis--hero { margin: 16px 0 0; } #main.kg-fund-page .kg-kpi b:empty::before { content: "—"; color: var(--kg-muted); font-weight: normal; } #main.kg-fund-page .kg-kpi .kg-kpi__d:empty { display: none; } /* trust bar בתוך ההירו */ #main.kg-fund-page .kg-trust-bar { margin: 12px 0 0; padding: 0; background: transparent; border: 0; } #main.kg-fund-page .kg-trust-bar__list { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--kg-muted); } #main.kg-fund-page .kg-trust-bar__item { display: inline-flex; gap: 6px; align-items: center; } #main.kg-fund-page .kg-trust-bar__icon { color: var(--kg-brand); } /* ── anchor nav דביק (מוקאפ הערה 5) ── */ /* ⚠️ אותו תיקון כמו בכותרת הדביקה של ההשוואה המפורטת (QA רונן סבב 2): שכבה שקופה-חלקית עם blur מעל תוכן שנע מחייבת רסטר מחדש בכל פריים ונראית כריצוד במובייל. רקע אטום בצבע הדף — מראה זהה, אפס עלות. חל על KupatGemel + PensionFund. */ #main.kg-fund-page .kg-anav-wrap { position: sticky; top: 0; z-index: 30; margin: 14px -6px 14px; padding: 8px 6px; background: #f4f7f6; } /* גולל אופקי בתוך אלמנט דביק — אותו נימוק כמו ב-kg-cmp-head. ⚠️ הגלילה הועברה מה-nav אל ה-ul, וה-nav חזר ל-overflow:visible. overflow על מכל שיש לו border-radius:999px גוזר את התוכן לפי צורת הגלולה, וכפתור ה-CTA יושב 8px בלבד מהקצה המעוגל — בדיוק בתוך העקומה. בגובה 50px רדיוס הפינה הוא 24.8px, הגזירה ב-x=8.4 נוחתת על 6.67px מלמטה והכפתור על 6.8px — מרווח של 0.13px. כל DPR שמעגל לצד השני גוזר את הפינה התחתונה של הכפתור (לקח 59: גבהים שבריים + עיגול פיקסלים). ה-ul מלבני ולכן אינו גוזר דבר, והמראה זהה. */ #main.kg-fund-page .kg-anchor-nav { overflow: visible; } #main.kg-fund-page .kg-anchor-nav__list { width: auto; overscroll-behavior-x: contain; } #main.kg-fund-page .kg-anchor-nav { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 999px; padding: 6px 8px; box-shadow: 0 2px 10px rgba(15, 90, 71, .06); margin: 0; } #main.kg-fund-page .kg-anchor-nav__list { display: flex; gap: 6px; align-items: center; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } #main.kg-fund-page .kg-anchor-nav__list::-webkit-scrollbar { display: none; } #main.kg-fund-page .kg-anchor-nav__link { text-decoration: none; border-radius: 999px; padding: 7px 13px; font-size: 13.5px; color: var(--kg-ink); min-height: 36px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 0; background: transparent; font-weight: normal; } #main.kg-fund-page .kg-anchor-nav__link:hover { background: var(--kg-soft); color: var(--kg-ink); } #main.kg-fund-page .kg-anchor-nav__link.is-active { background: var(--kg-brand); color: #fff; font-weight: bold; } #main.kg-fund-page .kg-anchor-nav__cta-li { margin-inline-start: auto; } #main.kg-fund-page .kg-anchor-nav__link--cta { background: var(--kg-soft); color: var(--kg-brand-dark); font-weight: bold; border: 1.5px solid var(--kg-brand); } #main.kg-fund-page .kg-anchor-nav__link--cta:hover { background: var(--kg-soft2); color: var(--kg-brand-dark); } /* עוגנים לא נבלעים מתחת לסרגל הדביק */ #main.kg-fund-page #kg-analysis-card, #main.kg-fund-page #kg-dynamic-returns-table, #main.kg-fund-page #kg-return-risk-chart-wrap, #main.kg-fund-page #kg-accumulation-sim-card, #main.kg-fund-page #kg-returns-over-time-wrap, #main.kg-fund-page #kg-assets-sec, #main.kg-fund-page #relatedFunds, #main.kg-fund-page #faq { scroll-margin-top: 76px; } /* ⚠️ QA רונן (סבב 4): בטלפונים cssSupermarker קובע ל-header של האתר (.searchBox, 68px) position:fixed בראש המסך עם z-index 99 — הסרגל נדבק ל-top:0 ונעלם מאחוריו, מה שנראה כאילו הוא "לא דביק". באותו media query בדיוק (device-width — כמו הכלל הישן, כדי ששני הכללים יידלקו/ייכבו יחד) מדביקים אותו מתחת ל-header ומגדילים את שולי העוגנים בהתאם. */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* ⚠️ QA רונן: "רווח קטן מה-header ואז ריצוד תוך כדי גלילה" — נמדד בפועל רצועה של 8px בין תחתית ה-header (‎#ebebeb‎, fixed 68px) לבין הכרטיס הלבן: זה ה-padding של המעטפת הדביקה, שנצבע ‎#f4f7f6‎ ולכן נראה כפס זר מתחת ל-header. הרצועה גם הופכת כל תזוזה של פיקסל בתפר בין ה-fixed ל-sticky לגלויה — ובמובייל השניים מתעדכנים במנגנונים שונים בזמן גלילה (סרגל כתובת שנסגר, קומפוזיטור), ולכן התפר "מרצד". התיקון: מקדימים את נקודת ההיצמדות ב-6px ומחזירים אותם כ-padding — הכרטיס נוחת בדיוק על 68 (אין רצועה), ו-6px של רקע אטום נשארים **מתחת ל-header** ככרית לתפר. ה-margin השלילי מבטל את התוספת בזרימה ⇒ אפס שינוי layout. */ /* ⚠️ QA רונן — שתי טעויות שלי מהסבב הקודם, שתיהן מתוקנות כאן: (1) **חצי פיקסל.** ‎top:62px‎ אצל רונן (DPR=1.25, תצוגת Windows ב-125%) יוצא 62×1.25 = **77.5** פיקסלי-מכשיר. אלמנט דביק שנעצר על חצי פיקסל נצמד מחדש לפיקסל אחר בכל פריים בזמן גלילה ⇒ רעד של פיקסל, בכל דף, בלי שום שינוי שנראה ב-layout. ‎60‎ נופל על שלם בכל ה-DPR הנפוצים (1 · 1.25 · 1.5 · 1.75 · 2 · 3), וכך גם ‎68‎ של ה-header עצמו. (2) **התעסקות מיותרת ב-margin.** ‎top‎ משפיע רק על מיקום ההיצמדות ולא על הזרימה — כדי שהכרטיס ינחת על 68 מספיק ‎top:60‎ עם ה-‎padding-top:8‎ שכבר היה. הקיזוזים ב-margin נמחקו והזרימה חוזרת בדיוק למה שהייתה. */ #main.kg-fund-page .kg-anav-wrap { top: 60px; } #main.kg-fund-page #kg-analysis-card, #main.kg-fund-page #kg-dynamic-returns-table, #main.kg-fund-page #kg-return-risk-chart-wrap, #main.kg-fund-page #kg-accumulation-sim-card, #main.kg-fund-page #kg-returns-over-time-wrap, #main.kg-fund-page #kg-assets-sec, #main.kg-fund-page #relatedFunds, #main.kg-fund-page #faq, #main.kg-fund-page #lead { scroll-margin-top: 144px; } } /* ── תקציר ניתוח הביצועים (מוקאפ הערה 6; summaryVersion=2) ── */ #main.kg-fund-page .kg-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #main.kg-fund-page .kg-sum__row { background: #f7faf8; border: 1px solid #e3ede8; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; min-width: 0; } #main.kg-fund-page .kg-sum__row > b { display: block; font-size: 14px; margin-bottom: 4px; } #main.kg-fund-page .kg-sum__bar { height: 8px; background: #e3ede8; border-radius: 999px; overflow: hidden; margin: 6px 0 4px; position: relative; } #main.kg-fund-page .kg-sum__bar i { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; background: var(--kg-brand); border-radius: 999px; display: block; } #main.kg-fund-page .kg-sum__bar i.kg-sum__bar-avg { background: #b7c8c0; } #main.kg-fund-page .kg-sum__row small { color: var(--kg-muted); font-size: 12px; } #main.kg-fund-page .kg-sum-more { margin-top: 12px; } #main.kg-fund-page .kg-sum-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--kg-brand-dark); font-weight: bold; font-size: 13.5px; border: 1.5px solid var(--kg-line); border-radius: 999px; padding: 7px 14px; background: #fff; } #main.kg-fund-page .kg-sum-more > summary::-webkit-details-marker { display: none; } #main.kg-fund-page .kg-sum-more > summary:hover { border-color: var(--kg-brand); } #main.kg-fund-page .kg-sum-more[open] > summary { margin-bottom: 10px; } #main.kg-fund-page .kg-sum-more[open] > summary i { transform: rotate(180deg); } /* ── dgrid בתוך הכרטיסים ── */ #main.kg-fund-page .card-body .kg-dgrid { margin-bottom: 0; } #main.kg-fund-page .kg-dgrid--flow > div > span:last-child { direction: rtl; unicode-bidi: normal; font-weight: normal; white-space: normal; } #main.kg-fund-page .kg-flow { display: flex; justify-content: flex-end; gap: 10px; align-items: center; flex-wrap: wrap; } #main.kg-fund-page .kg-flow .kg-pos, #main.kg-fund-page .kg-flow .kg-neg, #main.kg-fund-page .kg-flow .kg-num { font-weight: bold; font-size: 13.5px; } #main.kg-fund-page .kg-flow .kg-flow-insight { font-size: 11.5px; margin: 0; } #main.kg-fund-page .kg-dgrid__hl { background: var(--kg-soft2); border-radius: 8px; padding-inline: 8px !important; } #main.kg-fund-page .kg-micro-cta { flex: 1 1 100%; justify-content: flex-end; } /* ── טבלת הדירוג הדינמית (רכיב הפאנל — מוקאפ הערה 9) ── */ /* ⚠️ מבנה אחיד לשורת הכותרות (QA רונן 2026-08-27): לפני התיקון הגובה קפץ בין מיונים — העמודה הפעילה קיבלה font-weight אחר (600 מול 700), ורוחבי העמודות משתנים עם המיון (table-layout: auto + תוכן שמתחלף), ולכן טקסט הכותרת נשבר פעם לשורה אחת ופעם לשתיים. הפתרון: גובה קבוע לתא + יישור אנכי למרכז + משקל גופן זהה בכל המצבים. */ #main.kg-fund-page .fund-ranking-table thead th { background: #f1f5f3 !important; color: var(--kg-ink) !important; font-size: 12.5px; border-bottom: 1px solid var(--kg-line); white-space: normal; line-height: 1.25; height: 52px; vertical-align: middle !important; font-weight: bold !important; } #main.kg-fund-page .fund-ranking-table thead th.sort-active { color: var(--kg-brand-dark) !important; background: var(--kg-soft2) !important; } /* גם כותרת הבלוק (h6 + תגית הדירוג) לא משנה גובה: התגית תמיד בשורה משלה */ #main.kg-fund-page .fund-ranking-header .fund-ranking-title { display: block; } #main.kg-fund-page .fund-ranking-header #rankingBadge { display: block !important; /* גובר על d-md-inline-block של Bootstrap */ width: fit-content; margin: 6px 0 0; white-space: normal; background: var(--kg-brand) !important; border-radius: 999px; } #main.kg-fund-page .fund-ranking-table > tbody > tr.table-primary > td { background-color: #cdeadb !important; font-weight: bold; box-shadow: none; --bs-table-bg-state: #cdeadb; } #main.kg-fund-page .fund-ranking-table td { font-size: 13px; } #main.kg-fund-page .fund-ranking-table .btn, #main.kg-fund-page .fund-ranking-table .btn-outline-success { border-radius: 999px; border: 1.5px solid var(--kg-brand); color: var(--kg-brand-dark); background: #fff; font-size: 12.5px; padding: 3px 12px; } #main.kg-fund-page .fund-ranking-table .btn:hover { background: var(--kg-soft); color: var(--kg-brand-dark); } #main.kg-fund-page #rankingBadge { background: var(--kg-brand) !important; border-radius: 999px; font-weight: bold; } #main.kg-fund-page .kg-ranking-filter__btn { border-radius: 999px; } #main.kg-fund-page .kg-ranking-filter__btn.is-active { background: var(--kg-brand); border-color: var(--kg-brand); color: #fff; } /* ── קבוצות כפתורי מיון/תקופה → מראה seg (מוקאפ הערות 10–12) ── */ #main.kg-fund-page .kg-chart-sort-btn, #main.kg-fund-page .kg-returns-period-btn, #main.kg-fund-page .kg-sim-period-btn { border: 1.5px solid var(--kg-line) !important; background: #fff !important; color: var(--kg-ink) !important; font-size: 13px !important; min-height: 34px; box-shadow: none !important; } #main.kg-fund-page .btn-group .kg-chart-sort-btn:first-child, #main.kg-fund-page .btn-group .kg-returns-period-btn:first-child, #main.kg-fund-page .btn-group .kg-sim-period-btn:first-child { border-start-start-radius: 999px; border-end-start-radius: 999px; } #main.kg-fund-page .btn-group .kg-chart-sort-btn:last-child, #main.kg-fund-page .btn-group .kg-returns-period-btn:last-child, #main.kg-fund-page .btn-group .kg-sim-period-btn:last-child { border-start-end-radius: 999px; border-end-end-radius: 999px; } /* ⚠️ קבוצת «לפי מה לחשב?» לא היתה ברשימה שלמעלה, ולכן נפלה לכללי בוטסטראפ שמעגלים לפי צד פיזי (left/right) ולא לוגי — וב-RTL הפינות המעוגלות פנו פנימה, אל הכפתור השכן, במקום החוצה. הרדיוס זהה לקבוצת התקופה שמעליה באותו כרטיס. */ #main.kg-fund-page .btn-group .kg-sim-feemode-btn { border-radius: 0; } #main.kg-fund-page .btn-group .kg-sim-feemode-btn:first-child { border-start-start-radius: 999px; border-end-start-radius: 999px; } #main.kg-fund-page .btn-group .kg-sim-feemode-btn:last-child { border-start-end-radius: 999px; border-end-end-radius: 999px; } /* ⚠️ סכומי ש"ח בתוך משפט עברי: המחרוזת "10,000 ₪" בהקשר RTL מציבה את ה-₪ לשמאל הספרות (רווח מנטרל מנתק את ה-ET מרצף המספר), בעוד כרטיסי התוצאה באותו כרטיס (dir:ltr) מציבים אותו לימינן. אותה סימולציה, שתי צורות. isolate הופך כל סכום לאי LTR עצמאי — סדר המשפט סביבו לא מושפע. הכלל משותף לשלושת דפי המוצר (גמל, פנסיה, מנהלים) — אותה רובריקה בשלושתם. */ #main.kg-fund-page #kg-sim-out-contributions, #main.kg-fund-page #kg-sim-out-gain-before-fees { direction: ltr; unicode-bidi: isolate; } #main.kg-fund-page .kg-chart-sort-btn.active, #main.kg-fund-page .kg-returns-period-btn.active, #main.kg-fund-page .kg-sim-period-btn.active { background: var(--kg-brand) !important; border-color: var(--kg-brand) !important; color: #fff !important; font-weight: bold; } #main.kg-fund-page .kg-returns-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; width: 100%; } #main.kg-fund-page .kg-returns-header-title { display: inline-flex; align-items: center; gap: 10px; } /* ── CTA (מוקאפ הערות 8, 11) ── */ #main.kg-fund-page .kg-cta-card { border-color: #bfe0d2 !important; background: linear-gradient(180deg, #f3faf7, #fff) !important; } #main.kg-fund-page .kg-cta-card .card-header.gemel-card-header { background: transparent !important; font-size: 16px; } #main.kg-fund-page .kg-cta-card .kg-lead-cta-btn, #main.kg-fund-page .btn-success { background: var(--kg-brand) !important; border: 0 !important; border-radius: 999px !important; font-weight: bold; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; } #main.kg-fund-page .kg-cta-card .kg-lead-cta-btn:hover, #main.kg-fund-page .btn-success:hover { background: var(--kg-brand-dark) !important; } #main.kg-fund-page .kg-cta-block { background: linear-gradient(180deg, #f3faf7, #fff); border: 1.5px solid #bfe0d2; border-radius: 14px; padding: 14px 16px; } #main.kg-fund-page .kg-cta-block .kg-cta-btn { background: var(--kg-brand); color: #fff; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; font-weight: bold; text-decoration: none; } #main.kg-fund-page .kg-cta-block .kg-cta-btn:hover { background: var(--kg-brand-dark); } /* ── מחשבון הצבירה ── */ #main.kg-fund-page #kg-accumulation-sim-card .form-control, #main.kg-fund-page #kg-accumulation-sim-card .form-select { border: 1.5px solid var(--kg-line); border-radius: 10px; min-height: 42px; } #main.kg-fund-page .kg-sim-results .kg-sim-result-label { color: var(--kg-muted); font-size: 12px; } #main.kg-fund-page .kg-sim-results .kg-sim-result-value { font-size: 19px; font-weight: bold; color: var(--kg-brand-dark); direction: ltr; unicode-bidi: isolate; } /* ── חשיפות כסרגלים + נכסים כ-donut (מוקאפ הערה 13) ── */ #main.kg-fund-page .kg-bars { display: grid; gap: 10px; padding: 4px 0 8px; } #main.kg-fund-page .kg-bar-row { display: grid; grid-template-columns: 150px 1fr 60px; gap: 10px; align-items: center; font-size: 13.5px; } #main.kg-fund-page .kg-bar-row .kg-bar { height: 12px; background: #e3ede8; border-radius: 999px; overflow: hidden; } #main.kg-fund-page .kg-bar-row .kg-bar i { display: block; height: 100%; background: var(--kg-brand); border-radius: 999px; } #main.kg-fund-page .kg-bar-row b { text-align: left; } #main.kg-fund-page .kg-exposures-tablewrap--hidden { display: none; } #main.kg-fund-page .kg-assets-tables--collapsed { display: none; } #main.kg-fund-page .kg-donut { display: grid; grid-template-columns: 200px 1fr; gap: 16px 22px; align-items: center; padding: 4px 0 8px; } #main.kg-fund-page .kg-donut__chart { max-width: 200px; } #main.kg-fund-page .kg-donut__legend { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; font-size: 13px; } #main.kg-fund-page .kg-donut__legend li { display: flex; align-items: center; gap: 8px; } #main.kg-fund-page .kg-donut__legend li i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 auto; } #main.kg-fund-page .kg-donut__legend li b { margin-inline-start: auto; text-align: left; } /* סכומי ה-₪ מהטבלה — שורה משנית מתחת לאחוז (בייצור הם עמודה בטבלה) */ #main.kg-fund-page .kg-donut__amount, #main.kg-fund-page .kg-bar-row__amount { display: block; font-size: 11px; font-weight: normal; color: var(--kg-muted); margin-top: 1px; } #main.kg-fund-page .kg-bar-row > span { line-height: 1.25; } /* גרף היתרות (12 חודשים) בתוך כרטיס היתרות. ⚠️ הכלל הוותיק `.kg-page .kg-yitrot-chart-container` קובע min-height: 320px — צריך לאפס אותו במפורש, אחרת הקנבס מתנפח והכרטיס השמאלי גבוה פי שלושה מהימני. */ #main.kg-fund-page .kg-yitrot-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #eef2f0; } #main.kg-fund-page .kg-yitrot-chart-container { position: relative; height: 190px; min-height: 0; width: 100%; padding: 0; } /* שני הדונאטים המשניים: סחיר/לא סחיר · בארץ/חו"ל (בקשת רונן 2026-08-27) */ #main.kg-fund-page .kg-donut-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; } #main.kg-fund-page .kg-mini-donut { background: #f7faf8; border: 1px solid #e3ede8; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; } #main.kg-fund-page .kg-mini-donut__title { margin: 0; font-size: 13.5px; font-weight: bold; color: var(--kg-ink); } #main.kg-fund-page .kg-mini-donut__chart { width: 130px; max-width: 130px; } #main.kg-fund-page .kg-mini-donut .kg-donut__legend { width: 100%; margin: 0; font-size: 12.5px; } /* ── קופות דומות (מוקאפ הערה 14) ── */ #main.kg-fund-page .kg-related { background: transparent; border: 0; padding: 0; } #main.kg-fund-page .kg-related__card { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 14px; box-shadow: none; } #main.kg-fund-page .kg-related__card:hover { border-color: var(--kg-brand); box-shadow: 0 4px 14px rgba(15, 90, 71, .08); } #main.kg-fund-page .kg-related__card-link { color: var(--kg-ink); } #main.kg-fund-page .kg-related__card-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid var(--kg-brand); color: var(--kg-brand-dark); background: #fff; border-radius: 999px; min-height: 36px; padding: 0 14px; font-size: 13.5px; font-weight: bold; text-decoration: none; } #main.kg-fund-page .kg-related__card-cta:hover { background: var(--kg-soft); color: var(--kg-brand-dark); } /* ── FAQ (מוקאפ הערה 15) ── */ #main.kg-fund-page .kg-faq { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 16px; padding: 16px 18px; } #main.kg-fund-page .kg-faq__title { font-size: 17px; margin: 0 0 12px; } #main.kg-fund-page .kg-faq .accordion-item { border: 1px solid var(--kg-line); border-radius: 12px !important; margin-bottom: 8px; overflow: hidden; } #main.kg-fund-page .kg-faq .accordion-button { font-weight: bold; font-size: 14.5px; color: var(--kg-ink); background: #fff; box-shadow: none; } #main.kg-fund-page .kg-faq .accordion-button:not(.collapsed) { background: var(--kg-soft); color: var(--kg-brand-dark); } #main.kg-fund-page .kg-faq .accordion-button:focus { border-color: var(--kg-brand); box-shadow: 0 0 0 2px rgba(23, 118, 90, .18); } #main.kg-fund-page .kg-faq .accordion-body { color: var(--kg-muted); font-size: 13.5px; } /* ── גילוי נאות — כרטיס אפרפר עדין (כמו בדף הרשימה) ── */ #main.kg-fund-page .kg-disclaimer { background: #f5f7f6; border: 1px solid #e2e8e5; border-radius: 12px; padding: 14px 16px; margin-top: 14px; } #main.kg-fund-page .kg-disclaimer__body { color: var(--kg-muted); font-size: 12.5px; line-height: 1.6; margin: 0 0 8px; } #main.kg-fund-page .kg-disclaimer__body:last-child { margin-bottom: 0; } /* ── הסיידבר — בלוקים ככרטיסים (מוקאפ הערה 16) ── */ #main.kg-fund-page .kg-sidebar-wizard { background: #fff; border: 1.5px solid var(--kg-brand); border-radius: 14px; overflow: hidden; } #main.kg-fund-page .kg-sidebar .border-box { display: none; } /* המפריד שמתחת ל-header: קו דק במקום הליים 5px של הבאנדל הגלובלי — אותם ערכים שב-portfolio-modern.css וב-gemel-modern.css (סבב QA של רונן 2026-08-30). הכלל חוזר כאן כי דף המוצר וההשוואה המפורטת טוענים kupat-gemel.css בלבד. */ body.kg-fund-body #ymheader .border-box, body.kg-cmp-body #ymheader .border-box { display: block !important; border-top: 1px solid #d9e6e1 !important; padding-top: 0 !important; } #main.kg-fund-page .kg-sidebar-short-path__hint { font-size: 13px; color: var(--kg-muted); margin: 10px 2px 4px; } /* מרווח אחיד בין בלוקי הסיידבר (המפרידים הליים הוסתרו ואיתם ה-margin שלהם) */ #main.kg-fund-page .kg-sidebar > * { margin-bottom: 14px; } #main.kg-fund-page .kg-sidebar > *:last-child { margin-bottom: 0; } #main.kg-fund-page .kg-sidebar > .kg-sidebar-short-path { margin-bottom: 6px; } #main.kg-fund-page #lead { background: linear-gradient(180deg, #f3faf7, #fff); border: 1.5px solid #bfe0d2; border-radius: 14px; padding: 14px 16px; } /* כותרת הליד: טיפוגרפיה במקום פס ירוק שצף בתוך הכרטיס (כמו במוקאפ ובדפי הביטוח המשודרגים — life-insurance-modern / mortgage-insurance-modern). כך היא תופסת את מלוא רוחב הכרטיס ויושבת בול על הקו העליון של השדות. */ /* ⚠️ שלושת הסלקטורים: הכללים הוותיקים לכותרת הליד יושבים גם על `body.kg-body #leadMobile #lead.lead .leadH3Title` (2 ids + 3 classes + element) — צריך ספציפיות גבוהה מהם גם במובייל, אחרת הפס הירוק חוזר אחרי שה-JS מעביר את הטופס ל-#leadMobile. */ #main.kg-fund-page #lead.lead .leadH3Title, #main.kg-fund-page .kg-sidebar #lead.lead .leadH3Title, #main.kg-fund-page #leadMobile #lead.lead .leadH3Title { background: none !important; border: 0; border-bottom: 1px solid var(--kg-line); border-radius: 0; color: var(--kg-brand-dark) !important; font-family: inherit; font-size: 18px !important; font-weight: bold; line-height: 1.35; min-height: 0; padding: 0 0 10px; margin: 0 0 12px; text-align: right; } /* כותרת אחת בלבד: ה-h3 נושא את שורת התועלת, ולכן ה-lede של קונטרול ה-V2 (אותו טקסט) מוסתר כאן. הקונטרול המשותף לא משתנה — שאר המוצרים ממשיכים להציג אותו כרגיל. ⚠️ שני סלקטורים: leads-bootstrap.js מצמיד את #leadBootstrapModal לסוף ה-
, מחוץ ל-#main — בלי הסלקטור השני הכותרת חוזרת ומוכפלת בתוך המודל (QA רונן, סבב 3). */ #main.kg-fund-page #lead .leadDescription.kg-v2-lede, body.kg-fund-body #leadBootstrapModal .leadDescription.kg-v2-lede { display: none !important; } /* עוגן הגלילה במובייל (הסרגל הדביק מכסה 76px) */ #main.kg-fund-page #lead { scroll-margin-top: 76px; } #main.kg-fund-page .pm-calcs { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 14px; padding: 14px 16px; } #main.kg-fund-page .pm-calcs__title { margin: 0 0 8px; font-size: 15px; font-weight: bold; display: flex; align-items: center; gap: 8px; color: var(--kg-ink); } #main.kg-fund-page .pm-calcs__title .bi { color: var(--kg-brand); } #main.kg-fund-page .pm-calcs__item { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--kg-ink); border-bottom: 1px solid #eef2f0; font-size: 13.5px; } #main.kg-fund-page .pm-calcs__item:last-child { border-bottom: 0; } #main.kg-fund-page .pm-calcs__item:hover .pm-calcs__label { color: var(--kg-brand-dark); text-decoration: underline; } #main.kg-fund-page .pm-calcs__icon { width: 30px; height: 30px; border-radius: 8px; background: var(--kg-soft); color: var(--kg-brand); display: grid; place-items: center; flex: 0 0 auto; } #main.kg-fund-page .pm-calcs__chevron { margin-inline-start: auto; color: var(--kg-muted); } /* ── מובייל ── */ @media (max-width: 991px) { #main.kg-fund-page .kg-hero-head { grid-template-columns: 1fr; } #main.kg-fund-page .kg-hero-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; } #main.kg-fund-page .kg-sum { grid-template-columns: 1fr; } } @media (max-width: 767px) { /* gutter 16px (AGENTS: מובייל) — container-fluid נותן 12px כברירת מחדל */ #main.kg-fund-page .kg-page.container-fluid { padding-inline: 16px; } #main.kg-fund-page .kg-hero-h1 { font-size: 20px; } #main.kg-fund-page .kg-logo--lg { width: 48px; height: 48px; font-size: 15px; } #main.kg-fund-page .kg-qsearch { flex: 1 1 100%; min-width: 0; } #main.kg-fund-page .kupat-back-link { flex: 1 0 100%; justify-content: center; } #main.kg-fund-page .kg-anav-wrap { margin-inline: -4px; } #main.kg-fund-page .kg-bar-row { grid-template-columns: 110px 1fr 50px; } #main.kg-fund-page .kg-donut { grid-template-columns: 1fr; justify-items: center; } #main.kg-fund-page .kg-donut__side { width: 100%; } #main.kg-fund-page .kg-hero-card { padding: 14px; } } /* ── שלב 3ב (2026-08-28): תוספות לדף קרן הפנסיה, בתוך אותו scope של kg-fund-page ── עוגנים לכרטיסים שהפנסיה מוסיפה (איזון אקטוארי, יתרות) + ה-FAQ הלגאסי של דף הקרן + פרוזת מדיניות ההשקעה. ⚠️ #kg-assets-card / #kg-exposures-card קיימים גם בדף הקופה — שם הם כבר יושבים בתוך #kg-assets-sec שיש לו את אותו scroll-margin, ולכן התוספת היא no-op ויזואלי. שאר הכללים (kg-faq--legacy, kg-track-desc) ייחודיים לפנסיה. שום דבר כאן לא חל על 12 צרכני cssKupatGemel שאינם kg-fund-page. */ #main.kg-fund-page #kg-actuarial-card, #main.kg-fund-page #kg-balances-card, #main.kg-fund-page #kg-assets-card, #main.kg-fund-page #kg-exposures-card { scroll-margin-top: 76px; } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { #main.kg-fund-page #kg-actuarial-card, #main.kg-fund-page #kg-balances-card, #main.kg-fund-page #kg-assets-card, #main.kg-fund-page #kg-exposures-card { scroll-margin-top: 144px; } } /* FAQ לגאסי (microdata FAQPage + toggleFaq) — מראה זהה לאקורדיון של דף הקופה בלי לגעת במארקאפ, כדי לא לשבור את הסכימה המוטמעת ואת מנגנון הפתיחה (לקח 47). כל המידות כאן נמדדו מול ‎#faq .accordion-*‎ בדף הקופה (הערת רונן: "מראה אחיד"). */ #main.kg-fund-page .kg-faq--legacy { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 16px; padding: 16px 18px; margin-top: 32px; } #main.kg-fund-page .kg-faq--legacy > h2 { font-size: 17px; font-weight: bold; color: var(--kg-ink); margin: 0 0 12px; text-align: right; } #main.kg-fund-page .kg-faq--legacy .faq-item { border: 1px solid var(--kg-line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; background: #fff; box-shadow: none; } #main.kg-fund-page .kg-faq--legacy .faq-item:last-child { margin-bottom: 0; } /* שורת השאלה = ‎.accordion-button‎ של הגמל: 16/20 padding, בלי קו תחתון במצב סגור */ #main.kg-fund-page .kg-faq--legacy .faq-question { padding: 16px 20px; background: #fff; gap: 12px; align-items: center; border-bottom: 0; } #main.kg-fund-page .kg-faq--legacy .faq-question:hover { background: #f7faf8; } #main.kg-fund-page .kg-faq--legacy .faq-question.active { background: var(--kg-soft); border-bottom: 0; } #main.kg-fund-page .kg-faq--legacy .faq-text { font-size: 14.5px; font-weight: bold; color: var(--kg-ink); margin: 0; padding: 0; line-height: 1.4; flex: 1 1 auto; } #main.kg-fund-page .kg-faq--legacy .faq-question.active .faq-text { color: var(--kg-brand-dark); } /* ⚠️ הכלל הגלובלי (gemel-modern.css) נותן ל-.faq-icon ריבוע ירוק מלא עם טקסט לבן. דריסה חלקית של הצבע בלבד יצרה "+" ירוק על רקע ירוק — בלתי נראה. כאן הסמן הופך לסימן עדין בקצה השורה, במקום שבו יושב ה-chevron של האקורדיון בדף הקופה. */ #main.kg-fund-page .kg-faq--legacy .faq-icon { order: 2; margin: 0 0 0 0; margin-inline-start: auto; width: 22px; height: 22px; border-radius: 999px; background: transparent; color: var(--kg-muted); font-size: 16px; font-weight: bold; line-height: 1; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } #main.kg-fund-page .kg-faq--legacy .faq-question:hover .faq-icon { color: var(--kg-brand); } #main.kg-fund-page .kg-faq--legacy .faq-question.active .faq-icon { background: var(--kg-soft2); color: var(--kg-brand-dark); transform: none; } /* גוף התשובה = ‎.accordion-body‎ של הגמל (8/20/16, 13.5px, --kg-muted) */ #main.kg-fund-page .kg-faq--legacy .faq-answer p { color: var(--kg-muted); font-size: 13.5px; line-height: 1.55; padding: 8px 20px 16px; margin: 0; } #main.kg-fund-page .kg-faq--legacy .faq-answer a { color: var(--kg-brand-dark); } /* מדיניות השקעה / חשיפה למדדים — שני כרטיסים ייחודיים לפנסיה. הפרוזה נשארת כפי שהוגדרה בדף (kg-track-desc), רק הצבע והמידה מתיישרים למערכת. */ #main.kg-fund-page .kg-track-desc { color: var(--kg-ink); font-size: 14px; } #main.kg-fund-page .kg-track-desc a { color: var(--kg-brand-dark); } /* ════════════════════════════════════════════════════════════════════════════ שלב 1ג — ההשוואה המפורטת (2026-08-27, feature/compare-filters-modern) Opt-in בלבד: body.kg-cmp-body / #main.kg-cmp-page — היום רק CompareKupotGemelDetails.aspx. שאר 13 צרכני cssKupatGemel (KupatGemel, PensionFund, MenahalimInsurance...) אינם מוסיפים את המחלקה → לא מושפעים. tokens (--kg-*) מבלוק "מערכת העיצוב" למעלה. ════════════════════════════════════════════════════════════════════════════ */ /* ── מעטפת: רקע + טיפוגרפיה + כותרות ── */ body.kg-cmp-body { background-color: #f4f7f6 !important; } #main.kg-cmp-page { font-family: 'Noto Sans Hebrew', Arial, Helvetica, sans-serif; color: var(--kg-ink); } #main.kg-cmp-page .h1Title, #main.kg-cmp-page .h2Title, #main.kg-cmp-page h2, #main.kg-cmp-page h3 { font-family: inherit; } #main.kg-cmp-page .h1Title { background: none; border: 0; padding: 0; margin: 0 0 6px; font-size: 22px; font-weight: bold; color: var(--kg-ink); line-height: 1.35; } #main.kg-cmp-page .h2Title { background: none; border: 0; padding: 0; margin: 0 0 12px; font-size: 13.5px; font-weight: normal; color: var(--kg-muted); max-width: 900px; line-height: 1.5; } /* ── breadcrumb + "חזרה" כ-pill (אותו דפוס כמו בדף הקופה) ── */ #main.kg-cmp-page #sitemap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #main.kg-cmp-page #sitemap .breadcrumb { margin: 0; flex: 1 1 auto; } #main.kg-cmp-page .kupat-back-link { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--kg-line) !important; background: #fff !important; color: var(--kg-ink) !important; border-radius: 999px !important; padding: 6px 14px !important; font-size: 13.5px !important; min-height: 38px; text-decoration: none !important; box-shadow: none !important; } #main.kg-cmp-page .kupat-back-link:hover { border-color: var(--kg-brand) !important; color: var(--kg-brand-dark) !important; } /* ── כפתורי pill של המערכת ── */ #main.kg-cmp-page .kg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--kg-brand); color: #fff; border-radius: 999px; padding: 0 20px; min-height: 44px; font-size: 15px; font-weight: bold; cursor: pointer; text-decoration: none; white-space: nowrap; font-family: inherit; } #main.kg-cmp-page .kg-btn:hover { background: var(--kg-brand-dark); color: #fff; } #main.kg-cmp-page .kg-btn--o { background: #fff; color: var(--kg-brand-dark); border: 1.5px solid var(--kg-brand); } #main.kg-cmp-page .kg-btn--o:hover { background: var(--kg-soft); color: var(--kg-brand-dark); } #main.kg-cmp-page .kg-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; } /* ── הכותרת הדביקה (מוקאפ הערה 2) ── */ /* ⚠️ QA רונן סבב 2: הרקע היה ‎rgba(...,.94)‎ עם ‎backdrop-filter: blur(6px)‎ — שכבה שקופה-חלקית ומטושטשת מעל תוכן שנע. בכל פריים הדפדפן צריך לרסטר מחדש את הטשטוש מעל הפיקסלים החדשים שמתחת, ובמובייל זה נראה כריצוד רציף **תוך כדי גלילה** (להבדיל מהקפיצה החד-פעמית שתוקנה ב-spacer). רקע אטום בצבע הדף = אפס רסטר חוזר, אפס תוכן שמציץ מבעד, ואותה מראה בדיוק (הצבע זהה לרקע הדף ‎#f4f7f6‎). */ #main.kg-cmp-page .kg-cmp-head-wrap { position: sticky; top: 0; z-index: 40; margin: 10px -6px 14px; padding: 8px 6px; background: #f4f7f6; } #main.kg-cmp-page .kg-cmp-head { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 16px; padding: 10px 12px; box-shadow: 0 2px 10px rgba(15, 90, 71, .06); } #main.kg-cmp-page .kg-cmp-head-wrap.kg-stuck .kg-cmp-head { box-shadow: 0 8px 24px rgba(15, 90, 71, .12); } #main.kg-cmp-page .kg-cmp-fgrid { display: grid; grid-template-columns: 150px repeat(var(--kg-n, 4), minmax(0, 1fr)); gap: 10px; align-items: stretch; } #main.kg-cmp-page .kg-cmp-flbl { display: flex; flex-direction: column; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--kg-muted); padding: 4px 6px; } #main.kg-cmp-page .kg-cmp-flbl b { font-size: 15px; color: var(--kg-ink); } /* כרטיס קופה בכותרת — פס עליון בצבע הזיהוי (--kg-fc) */ #main.kg-cmp-page .kg-cmp-fcard { border: 1.5px solid var(--kg-line); border-top: 4px solid var(--kg-fc, var(--kg-brand)); border-radius: 14px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; min-width: 0; } #main.kg-cmp-page .kg-cmp-fcard__top { display: flex; gap: 8px; align-items: flex-start; } #main.kg-cmp-page .kg-cmp-fcard__nm { min-width: 0; flex: 1; } #main.kg-cmp-page .kg-cmp-fcard__nm h3 { margin: 0; font-size: 14px; line-height: 1.3; font-weight: bold; } #main.kg-cmp-page .kg-cmp-fcard__nm h3 small { font-weight: normal; color: var(--kg-muted); font-size: 11.5px; } #main.kg-cmp-page .kg-cmp-fcard__x { border: 0; background: transparent; cursor: pointer; color: var(--kg-muted); padding: 4px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; min-width: 26px; min-height: 26px; font-size: 14px; } #main.kg-cmp-page .kg-cmp-fcard__x:hover { background: var(--kg-soft); color: var(--kg-neg); } #main.kg-cmp-page .kg-cmp-fcard__tags { display: flex; gap: 4px; flex-wrap: wrap; } #main.kg-cmp-page .kg-cmp-fcard__acts { display: flex; gap: 8px; align-items: center; margin-top: auto; flex-wrap: wrap; } #main.kg-cmp-page .kg-cmp-fcard__cta { flex: 1; } #main.kg-cmp-page .kg-cmp-fcard__lnk { font-size: 12.5px; color: var(--kg-brand-dark); white-space: nowrap; text-decoration: none; } #main.kg-cmp-page .kg-cmp-fcard__lnk:hover { text-decoration: underline; color: var(--kg-brand-dark); } #main.kg-cmp-page .kg-cmp-fcard--add { border-style: dashed; border-top: 1.5px dashed var(--kg-line); align-items: center; justify-content: center; text-align: center; color: var(--kg-muted); font-size: 13px; gap: 6px; cursor: pointer; text-decoration: none; } #main.kg-cmp-page .kg-cmp-fcard--add:hover { border-color: var(--kg-brand); color: var(--kg-brand-dark); } #main.kg-cmp-page .kg-cmp-fcard__plus { width: 36px; height: 36px; border-radius: 50%; background: var(--kg-soft); color: var(--kg-brand); display: grid; place-items: center; font-size: 20px; } /* שורת הבקרה: ניווט מקטעים (מוקאפ הערה 3) + מתגים (הערה 4) */ #main.kg-cmp-page .kg-cmp-ctl { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--kg-line); } #main.kg-cmp-page .kg-cmp-snav { display: flex; gap: 6px; flex-wrap: wrap; } #main.kg-cmp-page .kg-cmp-snav a { text-decoration: none; border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--kg-ink); border: 1.5px solid transparent; white-space: nowrap; } #main.kg-cmp-page .kg-cmp-snav a:hover { background: var(--kg-soft); color: var(--kg-ink); } #main.kg-cmp-page .kg-cmp-snav a.on { background: var(--kg-soft); border-color: var(--kg-brand); color: var(--kg-brand-dark); font-weight: bold; } #main.kg-cmp-page .kg-cmp-tg { margin-inline-start: auto; display: flex; gap: 16px; flex-wrap: wrap; } #main.kg-cmp-page .kg-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; -webkit-user-select: none; user-select: none; margin: 0; } #main.kg-cmp-page .kg-toggle input { -webkit-appearance: none; appearance: none; width: 38px; height: 22px; border-radius: 999px; background: #cfd9d4; position: relative; margin: 0; cursor: pointer; transition: background .15s; border: 0; } #main.kg-cmp-page .kg-toggle input::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; } #main.kg-cmp-page .kg-toggle input:checked { background: var(--kg-brand); } #main.kg-cmp-page .kg-toggle input:checked::after { transform: translateX(-16px); } /* מצב stuck קומפקטי: רק שם + CTA + ניווט */ #main.kg-cmp-page .kg-cmp-head-wrap.kg-stuck .kg-cmp-fcard__tags, #main.kg-cmp-page .kg-cmp-head-wrap.kg-stuck .kg-cmp-fcard__lnk, #main.kg-cmp-page .kg-cmp-head-wrap.kg-stuck .kg-cmp-flbl small, #main.kg-cmp-page .kg-cmp-head-wrap.kg-stuck .kg-cmp-fcard__addtxt, #main.kg-cmp-page .kg-cmp-head-wrap.kg-stuck .kg-cmp-fcard .kg-logo, #main.kg-cmp-page .kg-cmp-head-wrap.kg-stuck .kg-cmp-tg { display: none; } #main.kg-cmp-page .kg-cmp-head-wrap.kg-stuck .kg-cmp-fcard { gap: 6px; padding: 8px 10px; } #main.kg-cmp-page .kg-cmp-head-wrap.kg-stuck .kg-cmp-fcard__cta { min-height: 32px; font-size: 12.5px; } #main.kg-cmp-page .kg-cmp-head-wrap.kg-stuck .kg-cmp-ctl { margin-top: 8px; padding-top: 8px; } /* ── כרטיסי המקטעים (מוקאפ הערה 5) ── */ #main.kg-cmp-page .kg-cmp-sec { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; scroll-margin-top: 158px; } #main.kg-cmp-page .kg-cmp-sec__h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; } #main.kg-cmp-page .kg-cmp-sec__ic { width: 34px; height: 34px; border-radius: 10px; background: var(--kg-soft); color: var(--kg-brand); display: grid; place-items: center; flex: 0 0 auto; font-size: 17px; } #main.kg-cmp-page .kg-cmp-sec__h h2 { margin: 0; font-size: 17px; } #main.kg-cmp-page .kg-cmp-sec__sub { font-size: 12.5px; color: var(--kg-muted); } /* ── טבלת ההשוואה .kg-cmp: עמודת שם דביקה, כותרות בצבע הזיהוי ── */ #main.kg-cmp-page .kg-cmp-tblwrap { overflow-x: auto; } #main.kg-cmp-page table.kg-cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; table-layout: fixed; margin: 0; } #main.kg-cmp-page table.kg-cmp col.kg-cmp-lcol { width: 220px; } #main.kg-cmp-page table.kg-cmp th, #main.kg-cmp-page table.kg-cmp td { padding: 9px 10px; border-bottom: 1px solid #eef2f0; text-align: right; vertical-align: middle; } #main.kg-cmp-page table.kg-cmp th { background: #f1f5f3; font-size: 12.5px; white-space: normal; line-height: 1.25; border-bottom: 1px solid var(--kg-line); font-weight: normal; color: var(--kg-ink); } #main.kg-cmp-page table.kg-cmp th.kg-cmp-fth { border-top: 3px solid var(--kg-fc, var(--kg-brand)); font-weight: bold; } #main.kg-cmp-page table.kg-cmp th.kg-cmp-lth { position: sticky; right: 0; z-index: 2; } #main.kg-cmp-page table.kg-cmp td.kg-cmp-l { color: var(--kg-muted); white-space: normal; background: #fbfdfc; position: sticky; right: 0; z-index: 1; } #main.kg-cmp-page table.kg-cmp td.kg-cmp-v { white-space: nowrap; font-weight: bold; direction: ltr; text-align: right; } #main.kg-cmp-page table.kg-cmp td.kg-cmp-v .kg-cmp-vsub { display: block; font-size: 11.5px; color: var(--kg-muted); font-weight: normal; } #main.kg-cmp-page .kg-cmp .text-positive { color: var(--kg-pos); } #main.kg-cmp-page .kg-cmp .text-negative { color: var(--kg-neg); } /* "הדגש את הטוב ביותר" — פעיל רק כשהמתג דולק (kg-best-on על #kgCmpSections) */ #main.kg-cmp-page #kgCmpSections.kg-best-on td.kg-cmp-v.kg-cmp-best { background: var(--kg-soft2); color: var(--kg-brand-dark); } #main.kg-cmp-page #kgCmpSections.kg-best-on td.kg-cmp-v.kg-cmp-best::after { content: " \2713"; font-size: 11px; } /* "הצג רק הבדלים" — שורות זהות מעומעמות תמיד, מוסתרות כשהמתג דולק */ #main.kg-cmp-page tr.kg-cmp-same td { opacity: .55; } #main.kg-cmp-page #kgCmpSections.kg-diff-only tr.kg-cmp-same { display: none; } #main.kg-cmp-page .kg-cmp-diffnote { font-size: 12.5px; color: var(--kg-muted); margin: 8px 0 0; } /* ── בלוקי הגרפים inline (מוקאפ הערות 6-7) ── */ #main.kg-cmp-page .kg-cmp-chart-block { margin-top: 16px; border-top: 1px dashed var(--kg-line); padding-top: 14px; } #main.kg-cmp-page .kg-cmp-chart-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } #main.kg-cmp-page .kg-cmp-chart-t { font-weight: bold; font-size: 15px; } #main.kg-cmp-page .kg-cmp-chart-h .kg-seg { margin-inline-start: auto; } #main.kg-cmp-page .kg-returns-chart-container { position: relative; height: 340px; background: #fbfdfc; border: 1px solid #e3ede8; border-radius: 12px; padding: 8px; } #main.kg-cmp-page .kg-cmp-sikon-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } #main.kg-cmp-page .kg-cmp-sikon-chart { position: relative; height: 300px; background: #fbfdfc; border: 1px solid #e3ede8; border-radius: 12px; padding: 8px; } /* ── חשיפות כסרגלים (מוקאפ הערה 8) ── */ #main.kg-cmp-page .kg-cmp-stack { display: grid; gap: 16px; } #main.kg-cmp-page .kg-cmp-xrow { display: grid; grid-template-columns: 190px 1fr; gap: 10px; align-items: start; font-size: 13px; } #main.kg-cmp-page .kg-cmp-xlbl { font-weight: bold; padding-top: 2px; } #main.kg-cmp-page .kg-cmp-xbars { display: grid; gap: 6px; } #main.kg-cmp-page .kg-cmp-xbar { display: flex; align-items: center; gap: 8px; } #main.kg-cmp-page .kg-cmp-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #e3ede8; flex: 1; min-width: 60px; } #main.kg-cmp-page .kg-cmp-bar i { display: block; height: 100%; } #main.kg-cmp-page .kg-cmp-xbar b { min-width: 52px; text-align: left; font-size: 12.5px; } #main.kg-cmp-page .kg-cmp-xbar small { color: var(--kg-muted); min-width: 70px; font-size: 11.5px; } #main.kg-cmp-page .kg-cmp-xempty { color: var(--kg-muted); font-size: 12.5px; } /* ── חלוקה לנכסים (מוקאפ הערה 9): סרגלים מוערמים + מתג עוגות ── */ #main.kg-cmp-page .kg-cmp-avrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } #main.kg-cmp-page .kg-cmp-avlbl { font-size: 12.5px; color: var(--kg-muted); } #main.kg-cmp-page .kg-cmp-assets-bars { display: grid; gap: 10px; } #main.kg-cmp-page .kg-cmp-arow { display: grid; grid-template-columns: 190px 1fr; gap: 10px; align-items: center; font-size: 13px; } #main.kg-cmp-page .kg-cmp-arow .kg-cmp-bar { height: 22px; } #main.kg-cmp-page .kg-cmp-albl { font-weight: bold; } #main.kg-cmp-page .kg-cmp-donuts { display: grid; grid-template-columns: repeat(var(--kg-n, 3), minmax(0, 1fr)); gap: 12px; margin-top: 6px; } #main.kg-cmp-page .kg-cmp-donut { text-align: center; font-size: 12.5px; } #main.kg-cmp-page .kg-cmp-donut__c { position: relative; height: 170px; } #main.kg-cmp-page .kg-cmp-donut b { display: block; margin-top: 6px; } #main.kg-cmp-page .kg-cmp-aleg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--kg-muted); margin-top: 12px; } #main.kg-cmp-page .kg-cmp-aleg span { display: inline-flex; gap: 5px; align-items: center; } #main.kg-cmp-page .kg-cmp-aleg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } #main.kg-cmp-page .kg-cmp-adetails { margin-top: 14px; } #main.kg-cmp-page .kg-cmp-adetails summary { cursor: pointer; font-size: 13.5px; color: var(--kg-brand-dark); font-weight: bold; } #main.kg-cmp-page .kg-cmp-atitle { font-size: 14px; margin: 14px 0 6px; } /* ── רצועת הליד בסוף (מוקאפ הערה 11; סבב QA 2: דו-עמודתית — צד תועלת + כרטיס הטופס) ── */ #main.kg-cmp-page .kg-cmp-lead-band { margin: 18px 0; background: linear-gradient(180deg, #f3faf7, #fff); border: 1.5px solid #bfe0d2; border-radius: 16px; padding: 26px 28px; /* QA סבב 3: זוג עמודות צמוד וממורכז במקום פריסה על כל הרוחב (הטקסט התרחק מהטופס) */ display: grid; grid-template-columns: minmax(0, 430px) minmax(320px, 470px); justify-content: center; gap: 18px 56px; align-items: center; } #main.kg-cmp-page .kg-cmp-lead-band__title { margin: 0 0 10px; font-size: 21px; font-weight: bold; color: var(--kg-brand-dark); line-height: 1.3; } #main.kg-cmp-page .kg-cmp-lead-band__sub { margin: 0 0 14px; font-size: 14px; color: var(--kg-muted); line-height: 1.55; max-width: 520px; } #main.kg-cmp-page .kg-cmp-lead-band__points { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 13.5px; color: var(--kg-ink); } #main.kg-cmp-page .kg-cmp-lead-band__points li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; } #main.kg-cmp-page .kg-cmp-lead-band__points li::before { content: "\2713"; flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; background: var(--kg-soft2); color: var(--kg-brand-dark); font-size: 11px; font-weight: bold; display: grid; place-items: center; margin-top: 1px; } #main.kg-cmp-page .kg-cmp-lead-band__form { min-width: 0; } #main.kg-cmp-page .kg-cmp-lead-band__form #lead.lead { display: block; background: #fff; border: 1.5px solid var(--kg-line); border-radius: 14px; padding: 16px 18px; } /* שורת השיתוף התחתונה נצמדה לתחתית העמוד (QA סבב 3) — ריווח לפני ואחרי. ⚠️ margin-bottom על הילד האחרון קורס אל מחוץ לקונטיינר — הריווח מהגבול התחתון נעשה ב-padding על הקונטיינר, שלא קורס (QA סבב 4). */ #main.kg-cmp-page .kg-cmp-lead-band + .sm-share-bar { margin: 16px 0 0; padding-bottom: 48px; } /* בתוך הרצועה הצד נושא את הכותרת — ה-h3 של הטופס מוסתר כאן, וחוזר כפס הכותרת של המודל */ #main.kg-cmp-page .kg-cmp-lead-band .leadH3Title { display: none !important; } /* ה-lede של קונטרול ה-V2 = אותו טקסט של כותרת המודל — מוסתר בדף הזה (לקח 11: גם במודל) */ #main.kg-cmp-page #lead .leadDescription.kg-v2-lede, body.kg-cmp-body #leadBootstrapModal .leadDescription.kg-v2-lede { display: none !important; } /* ── מובייל / טאבלט ── */ @media (max-width: 991px) { #main.kg-cmp-page .kg-cmp-sikon-row { grid-template-columns: 1fr; } #main.kg-cmp-page .kg-cmp-lead-band { grid-template-columns: 1fr; padding: 18px 16px; gap: 14px; } #main.kg-cmp-page .kg-cmp-lead-band__title { font-size: 19px; } #main.kg-cmp-page .kg-cmp-fgrid { grid-template-columns: 130px repeat(var(--kg-n, 4), minmax(170px, 1fr)); } /* ⚠️ QA רונן: "הסרגל הדביק עצמו רועד" באמולציית מובייל בדסקטופ. זה גולל אופקי מקונן **בתוך** אלמנט דביק (842px תוכן ב-338px), והוא היחיד מבין הגוללים שלא הסתיר סרגל גלילה: בדסקטופ כרום משתמש בסרגל שתופס מקום, והופעתו/היעלמותו בזמן גלילה משנה את גובה הסרגל הדביק ⇒ רעד. אחיו (kg-cmp-snav, kg-fbar__pills, kg-chips) כבר מסתירים אותו — כאן זה נשמט. ‎overscroll-behavior‎ מונע בנוסף שדלתות גלגלת/טראקפד יזלגו לגולל הפנימי ויסיטו את הכרטיסים הצידה. */ #main.kg-cmp-page .kg-cmp-head { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } #main.kg-cmp-page .kg-cmp-head::-webkit-scrollbar { display: none; } } @media (max-width: 767px) { /* gutter 16px (AGENTS: מובייל) — container-fluid נותן 12px כברירת מחדל */ #main.kg-cmp-page .kg-page.container-fluid { padding-inline: 16px; } #main.kg-cmp-page .h1Title { font-size: 19px; } #main.kg-cmp-page .kupat-back-link { flex: 1 0 100%; justify-content: center; } #main.kg-cmp-page .kg-cmp-head-wrap { margin-inline: -4px; } /* הכותרת נגללת אופקית: כרטיס לכל קופה, עמודת התווית יורדת (מוקאפ הערה 10) */ #main.kg-cmp-page .kg-cmp-fgrid { grid-template-columns: repeat(var(--kg-n, 3), minmax(200px, 1fr)); } #main.kg-cmp-page .kg-cmp-flbl { display: none; } #main.kg-cmp-page .kg-cmp-snav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; } #main.kg-cmp-page .kg-cmp-snav::-webkit-scrollbar { display: none; } #main.kg-cmp-page .kg-cmp-tg { margin-inline-start: 0; flex: 1 0 100%; } /* במצב stuck במובייל: רק כרטיסי הקופות (הניווט יורד — חוסך גובה) */ #main.kg-cmp-page .kg-cmp-head-wrap.kg-stuck .kg-cmp-ctl { display: none; } #main.kg-cmp-page table.kg-cmp { min-width: 620px; } #main.kg-cmp-page table.kg-cmp col.kg-cmp-lcol { width: 150px; } #main.kg-cmp-page .kg-cmp-sec { padding: 14px; scroll-margin-top: 120px; } #main.kg-cmp-page .kg-cmp-xrow, #main.kg-cmp-page .kg-cmp-arow { grid-template-columns: 110px 1fr; } #main.kg-cmp-page .kg-cmp-xbar small { min-width: 0; } #main.kg-cmp-page .kg-cmp-donuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } #main.kg-cmp-page .kg-returns-chart-container { height: 280px; } #main.kg-cmp-page .kg-cmp-sikon-chart { height: 260px; } } /* ⚠️ לקח 10: בטלפונים cssSupermarker קובע ל-header של האתר (.searchBox, 68px) position:fixed עם z-index 99 — אלמנט דביק ל-top:0 נעלם מאחוריו. באותו media query בדיוק (device-width, כמו הכלל הישן — כדי ששני הכללים יידלקו/ייכבו יחד) הכותרת נדבקת מתחתיו ושולי העוגנים גדלים. */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* ⚠️ QA רונן: "רווח קטן מה-header ואז ריצוד תוך כדי גלילה" — נמדד בפועל רצועה של 8px בין תחתית ה-header (‎#ebebeb‎, fixed 68px) לבין הכרטיס הלבן: זה ה-padding של המעטפת הדביקה, שנצבע ‎#f4f7f6‎ ולכן נראה כפס זר מתחת ל-header. הרצועה גם הופכת כל תזוזה של פיקסל בתפר בין ה-fixed ל-sticky לגלויה — ובמובייל השניים מתעדכנים במנגנונים שונים בזמן גלילה (סרגל כתובת שנסגר, קומפוזיטור), ולכן התפר "מרצד". התיקון: מקדימים את נקודת ההיצמדות ב-6px ומחזירים אותם כ-padding — הכרטיס נוחת בדיוק על 68 (אין רצועה), ו-6px של רקע אטום נשארים **מתחת ל-header** ככרית לתפר. ה-margin השלילי מבטל את התוספת בזרימה ⇒ אפס שינוי layout. */ /* ⚠️ QA רונן — שתי טעויות שלי מהסבב הקודם, שתיהן מתוקנות כאן: (1) **חצי פיקסל.** ‎top:62px‎ אצל רונן (DPR=1.25, תצוגת Windows ב-125%) יוצא 62×1.25 = **77.5** פיקסלי-מכשיר. אלמנט דביק שנעצר על חצי פיקסל נצמד מחדש לפיקסל אחר בכל פריים בזמן גלילה ⇒ רעד של פיקסל, בכל דף, בלי שום שינוי שנראה ב-layout. ‎60‎ נופל על שלם בכל ה-DPR הנפוצים (1 · 1.25 · 1.5 · 1.75 · 2 · 3), וכך גם ‎68‎ של ה-header עצמו. (2) **התעסקות מיותרת ב-margin.** ‎top‎ משפיע רק על מיקום ההיצמדות ולא על הזרימה — כדי שהכרטיס ינחת על 68 מספיק ‎top:60‎ עם ה-‎padding-top:8‎ שכבר היה. הקיזוזים ב-margin נמחקו והזרימה חוזרת בדיוק למה שהייתה. */ #main.kg-cmp-page .kg-cmp-head-wrap { top: 60px; } #main.kg-cmp-page .kg-cmp-sec { scroll-margin-top: 188px; } #main.kg-cmp-page #lead { scroll-margin-top: 188px; } } /* ── גרפי המשנה של הנכסים: סחיר/לא סחיר · בארץ/חו"ל ומט"ח (בקשת רונן, 2026-08-27) ── */ #main.kg-cmp-page .kg-cmp-av-bars { display: grid; gap: 10px; } #main.kg-cmp-page .kg-cmp-agroup { margin-top: 18px; border-top: 1px dashed var(--kg-line); padding-top: 14px; } #main.kg-cmp-page .kg-cmp-agtitle { font-size: 14.5px; font-weight: bold; margin: 0 0 10px; } #main.kg-cmp-page .kg-cmp-agbar { display: flex; align-items: center; gap: 8px; min-width: 0; } #main.kg-cmp-page .kg-cmp-agbar .kg-cmp-bar { flex: 1; } #main.kg-cmp-page .kg-cmp-agvals { color: var(--kg-muted); font-size: 11.5px; white-space: nowrap; } #main.kg-cmp-page .kg-cmp-donut__c--sm { height: 130px; } /* ════════════════════════════════════════════════════════════════════════════ שלב 3ג — תוספות ייחודיות לפנסיה בתוך אותה מעטפת (2026-08-28) ComparePensionFundsDetails.aspx מוסיף kg-cmp-page ונכנס לבלוק שלמעלה כמו שהוא; כאן רק מה שאין לו מקבילה בגמל: תא פרוזה (מדיניות השקעה), רשימת חשיפה למדדים, רצועת ה-CTA לשאלון, והריווח מתחת לרצועת הליד (בגמל התפקיד הזה על ShareBar). ⚠️ הכללים האלה ישבו עד היום ב-