/* ============================================================================ msl-lab-kit.css — שפת-העיצוב של מעבדת התוכן הלימודי נגזר מ-msl-design-kit (הקיט החי של msl.org.il): נייבי + אמבר, Heebo בלבד. מקור-האמת של הקיט: msl-strategy/design-kit/CANONICAL.md · reference.md נכתב: 14.9.2026 · מפקחת-התוכן -------------------------------------------------------------------------- איך משתמשים בדגם: ← kids | school | teen כל דגם נשאר קובץ אחד שנפתח מהדיסק; הקיט הוא הקובץ המשותף היחיד. -------------------------------------------------------------------------- 🔴 הפונט בצילומים — נמדד 14.9.2026 ותוקן: בסביבות-הצילום שלנו הדפדפן לא מושך פונטים מהרשת, ולכן צילומים יצאו בפונט ברירת-מחדל בן 20 שנה — וזה נראה כמו הפונט שלנו, וזה לא. לפני כל צילום, התקן את Heebo על מכונת-הצילום: mkdir -p ~/.fonts curl -sL -o ~/.fonts/Heebo-var.ttf \ "https://raw.githubusercontent.com/google/fonts/main/ofl/heebo/Heebo%5Bwght%5D.ttf" fc-cache -f בדיקה שהוא באמת נטען (הרוחב חייב להשתנות בין משקלים): c.font='200 40px Heebo' מול c.font='900 40px Heebo' ============================================================================ */ @import url("https://fonts.googleapis.com/css2?family=Heebo:wght@200;400;500;700;800;900&display=swap"); /* ---------- 1. טוקנים — הערכים של msl.org.il, אל תשנה ---------- */ :root{ /* מותג */ --msl-navy:#06142b; --msl-navy-2:#0b1e3f; --msl-navy-3:#102541; --msl-amber:#d4a04a; /* על כהה */ --msl-amber-soft:#f4e0b3; --msl-amber-deep:#8a5e18; /* על בהיר — עובר ניגודיות */ --msl-cream:#f6efe2; --msl-cream-2:#ede4cf; --msl-ink:#1f2937; --msl-ink-strong:#06142b; --msl-muted:#5f6773; --msl-on-navy:#f6efe2; /* סמנטי */ --msl-up:#2f7340; --msl-down:#c93a3a; /* 🔴 רק לפעולה הרסנית. לא לטעות של תלמיד */ --msl-warn:#7a4a00; --msl-info:#0c447c; /* משטחים */ --lab-bg:#ffffff; --lab-surface:#ffffff; --lab-surface-2:var(--msl-cream); --lab-line:#dcd6c8; --lab-line-soft:#ebe5d8; --lab-shadow:0 1px 2px rgba(6,20,43,.07); /* טיפוגרפיה */ --msl-font:"Heebo",-apple-system,"Segoe UI",Arial,sans-serif; --lab-body:17px; --lab-h1:clamp(28px,5vw,44px); --lab-h2:clamp(21px,3vw,28px); --lab-h3:19px; --lab-meta:13px; --lab-num:40px; --lab-num-xl:64px; /* ריווח */ --lab-gap:16px; --lab-pad:18px; --lab-radius:10px; --lab-tap:44px; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --lab-bg:var(--msl-navy); --lab-surface:var(--msl-navy-2); --lab-surface-2:var(--msl-navy-3); --lab-line:#1e3357; --lab-line-soft:#16294a; --lab-shadow:0 1px 2px rgba(0,0,0,.45); --msl-ink:var(--msl-on-navy); --msl-ink-strong:#ffffff; --msl-muted:#9fb0c7; --msl-amber-deep:var(--msl-amber); --msl-cream:#0e2038; --msl-cream-2:#132a47; --msl-up:#63c187; } } :root[data-theme="dark"]{ --lab-bg:var(--msl-navy);--lab-surface:var(--msl-navy-2);--lab-surface-2:var(--msl-navy-3); --lab-line:#1e3357;--lab-line-soft:#16294a;--lab-shadow:0 1px 2px rgba(0,0,0,.45); --msl-ink:var(--msl-on-navy);--msl-ink-strong:#fff;--msl-muted:#9fb0c7; --msl-amber-deep:var(--msl-amber);--msl-cream:#0e2038;--msl-cream-2:#132a47;--msl-up:#63c187; } /* ---------- 2. התאמות גיל — משנות גודל ומרווח בלבד, לא צבע ---------- */ .lab--kids{ --lab-body:20px; --lab-h1:clamp(30px,6vw,46px); --lab-h3:22px; --lab-tap:64px; --lab-gap:22px; --lab-pad:22px; --lab-radius:16px; } .lab--school{ --lab-body:17px; --lab-tap:48px; } .lab--teen{ --lab-body:17px; --lab-radius:8px; } /* ---------- 3. בסיס ---------- */ *{box-sizing:border-box} html{color-scheme:light dark} body.lab{ margin:0;background:var(--lab-bg);color:var(--msl-ink); font-family:var(--msl-font);font-size:var(--lab-body);line-height:1.65; direction:rtl;text-align:right; } .msl-wrap{max-width:860px;margin:0 auto;padding-inline:18px;padding-block:0 56px} .msl-wrap--reading{max-width:720px} .msl-wrap--wide{max-width:1080px} /* ---------- 4. טיפוגרפיה — חוקי הקיט ---------- */ .msl-h1{font-size:var(--lab-h1);line-height:1.15;margin:0;font-weight:200;letter-spacing:-.01em;color:var(--msl-ink-strong)} .msl-h1 b,.msl-h1 strong{font-weight:800} /* חוק: כל H1 מערבב ≥2 משקלים */ .msl-h1 .msl-key{font-weight:900;color:var(--msl-amber-deep)} .msl-h2{font-size:var(--lab-h2);line-height:1.3;margin:0;font-weight:800;color:var(--msl-ink-strong)} .msl-h2 .msl-key{color:var(--msl-amber-deep);font-weight:900} /* חוק: אמבר על מילת-המשמעות */ .msl-h3{font-size:var(--lab-h3);margin:0;font-weight:700;color:var(--msl-ink-strong)} .msl-kicker{font-size:var(--lab-meta);letter-spacing:.06em;font-weight:500;color:var(--msl-muted);text-transform:none} .msl-meta,.msl-note{font-size:var(--lab-meta);color:var(--msl-muted)} .msl-lead{font-size:calc(var(--lab-body) + 2px);color:var(--msl-ink)} p{margin:0} .msl-stack{display:flex;flex-direction:column;gap:var(--lab-gap)} .msl-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center} /* 🔴 מתמטיקה בתוך עברית — חובה בכל ביטוי. ספרות וסימנים בלבד בפנים. */ .m{unicode-bidi:isolate;direction:ltr;display:inline-block;font-variant-numeric:tabular-nums} .msl-num{font-weight:900;font-size:var(--lab-num);line-height:1;color:var(--msl-amber-deep);font-variant-numeric:tabular-nums} .msl-num--xl{font-size:var(--lab-num-xl)} /* ---------- 5. משטחים ---------- */ .msl-card{background:var(--lab-surface);border:1px solid var(--lab-line);border-radius:var(--lab-radius); padding:var(--lab-pad);box-shadow:var(--lab-shadow)} .msl-card--cream{background:var(--lab-surface-2);border-color:var(--lab-line-soft);box-shadow:none} .msl-card--grid{background: linear-gradient(rgba(6,20,43,.05) 1px,transparent 1px) 0 0/22px 22px, linear-gradient(90deg,rgba(6,20,43,.05) 1px,transparent 1px) 0 0/22px 22px, var(--lab-surface)} .msl-on-dark{background:var(--msl-navy);color:var(--msl-on-navy);border-radius:var(--lab-radius);padding:var(--lab-pad)} .msl-on-dark .msl-h2,.msl-on-dark .msl-h3,.msl-on-dark .msl-h1{color:var(--msl-on-navy)} .msl-on-dark .msl-key,.msl-on-dark .msl-num{color:var(--msl-amber)} .msl-on-dark .msl-meta,.msl-on-dark .msl-note{color:#b9c6d8} /* חריג הקיט: כפתור-רפאים על כרטיס בהיר בתוך אזור כהה */ .msl-on-dark .msl-card .msl-btn--ghost{color:var(--msl-ink-strong);border-color:var(--lab-line)} /* ---------- 6. כפתורים ושדות ---------- */ .msl-btn{font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;border:0;border-radius:8px; padding:11px 20px;min-height:var(--lab-tap);background:var(--msl-navy);color:var(--msl-cream)} .msl-btn:hover{background:var(--msl-navy-2)} .msl-btn--amber{background:var(--msl-amber);color:var(--msl-navy);font-weight:700} .msl-btn--ghost{background:transparent;color:var(--msl-ink-strong);border:1px solid var(--lab-line)} .msl-btn--ghost:hover{border-color:var(--msl-amber-deep);color:var(--msl-amber-deep)} .msl-btn--sm{padding:7px 14px;font-size:14px;min-height:0} .msl-input{font-family:inherit;font-size:var(--lab-body);padding:10px 12px;min-height:var(--lab-tap); width:130px;text-align:center;border:1px solid var(--lab-line);border-radius:8px; background:var(--lab-surface);color:var(--msl-ink);font-variant-numeric:tabular-nums} .msl-btn:focus-visible,.msl-input:focus-visible,.msl-choice:focus-visible,[role="button"]:focus-visible{ outline:2px solid var(--msl-amber-deep);outline-offset:2px} .msl-slider{width:100%;accent-color:var(--msl-amber-deep);min-height:var(--lab-tap)} /* ---------- 7. משוב — 🔴 חוק המעבדה: טעות היא אמבר, לעולם לא אדום ---------- */ .msl-fb{border-radius:8px;padding:12px 14px;font-size:calc(var(--lab-body) - 1px);display:none} .msl-fb.is-on{display:block} .msl-fb--try{background:#fdf3e0;color:var(--msl-warn);border:1px solid var(--msl-amber)} .msl-fb--ok{background:#e6f2ea;color:var(--msl-up);border:1px solid var(--msl-up)} .msl-hint{background:var(--lab-surface-2);border:1px solid var(--lab-line-soft);border-radius:8px; padding:11px 13px;font-size:calc(var(--lab-body) - 1px);margin-top:8px} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .msl-fb--try{background:#3a2a10;border-color:var(--msl-amber);color:var(--msl-amber-soft)} :root:not([data-theme="light"]) .msl-fb--ok{background:#14301f;color:var(--msl-up)} } :root[data-theme="dark"] .msl-fb--try{background:#3a2a10;border-color:var(--msl-amber);color:var(--msl-amber-soft)} :root[data-theme="dark"] .msl-fb--ok{background:#14301f;color:var(--msl-up)} /* ---------- 8. שער-שליטה ---------- */ .msl-gate{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between; border:1px dashed var(--lab-line);border-radius:var(--lab-radius);padding:13px 15px;font-size:15px} .msl-gate.is-open{border-style:solid;border-color:var(--msl-up);background:#e6f2ea;color:var(--msl-up)} .msl-dots{display:flex;gap:7px} .msl-dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--lab-line);background:transparent} .msl-dot.is-on{background:var(--msl-amber-deep);border-color:var(--msl-amber-deep)} /* ---------- 9. בחירה בתוך טקסט (קריאה גדורה) ---------- */ .msl-choice{font-family:inherit;font-size:inherit;cursor:pointer;background:transparent; border:1px solid var(--msl-amber-deep);color:var(--msl-amber-deep);border-radius:6px;padding:1px 10px;margin-inline:3px} .msl-choice.is-ok{background:#e6f2ea;border-color:var(--msl-up);color:var(--msl-up)} .msl-choice.is-try{background:#fdf3e0;border-color:var(--msl-amber);color:var(--msl-warn)} .msl-locked{color:var(--msl-muted);font-style:italic;font-size:15px} /* ---------- 10. איור ---------- */ .msl-figure{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between} .msl-figure svg{width:100%;max-width:420px;height:auto;flex:1 1 280px;touch-action:none} .msl-handle{fill:var(--msl-amber-deep);cursor:grab} .msl-handle:active{cursor:grabbing} .msl-readout{flex:1 1 190px;min-width:180px;display:flex;flex-direction:column;gap:8px} .msl-kv{display:flex;justify-content:space-between;gap:10px;font-size:15px; border-bottom:1px dotted var(--lab-line);padding-bottom:5px} .msl-kv b{font-weight:500;font-variant-numeric:tabular-nums} .msl-formula{direction:ltr;unicode-bidi:isolate;text-align:center;font-variant-numeric:tabular-nums; background:var(--msl-cream);color:var(--msl-amber-deep);border:1px solid var(--lab-line-soft); border-radius:8px;padding:10px 12px;font-size:19px;font-weight:700} /* ---------- 11. טבלה ---------- */ .msl-table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums} .msl-table th,.msl-table td{text-align:right;padding:8px 10px;border-bottom:1px solid var(--lab-line-soft)} .msl-table th{font-weight:500;font-size:13px;color:var(--msl-muted);letter-spacing:.03em} .msl-table--zebra tbody tr:nth-child(even){background:var(--msl-cream)} .msl-scroll-x{overflow-x:auto} /* ---------- 12. חובה בכל דגם ---------- */ .msl-selftest{font-size:var(--lab-meta);color:var(--msl-muted);border-top:1px solid var(--lab-line-soft); padding-top:10px;margin-top:18px} .msl-selftest b{color:var(--msl-up);font-weight:700} .msl-selftest.is-bad b{color:var(--msl-warn)} .msl-disclaimer{font-size:var(--lab-meta);color:var(--msl-warn);background:#fdf3e0; border:1px solid var(--msl-amber);border-radius:8px;padding:9px 12px} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .msl-disclaimer{background:#3a2a10;color:var(--msl-amber-soft)}} :root[data-theme="dark"] .msl-disclaimer{background:#3a2a10;color:var(--msl-amber-soft)} /* ---------- 13. מסך צר ---------- */ @media (max-width:560px){ .msl-wrap{padding-inline:16px} .msl-figure{gap:12px} .msl-num{font-size:32px} .msl-num--xl{font-size:44px} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}