/* ‎crm — מערכת העיצוב. * * ‎========================================================================== * ‎⚠️ חריג מתועד מהכלל "הדף מודפס, לא מואר" שב-CLAUDE.md בשורש * ‎========================================================================== * * ‎התקן אוסר `box-shadow`, `blur` ו-`glow` "באף גיליון במערכת". הנימוק * ‎שכתוב שם הוא **מסווג התוכן של נטפרי**, והוא נולד עבור `tickets` * ‎שפונה לקהל החרדי — שם פלטה שקטה היא חלק מהאות שהמסווג קורא. * * ‎`crm` הוא CRM אוניברסלי לשוק הכללי. הקהל אחר, המסווג אינו בתמונה, * ‎והחריג אושר במפורש ב-12/08/2026. ראה `docs/decisions.md` סעיף 13. * * ‎**מה כן נשמר מהתקן, ואינו חלק מהחריג:** * ‎ · חוק ברזל 10 — אפס משאבים חיצוניים. הכל מהשרת שלנו. * ‎ · חוק ברזל 11 — ה-HTML נשלח במצב הסופי. אין `opacity:0` התחלתי. * ‎ · חוק ברזל 7 — עברית RTL. * ‎ · ניגודיות 4.5:1 לטקסט — **בשני המצבים**, בהיר וכהה. יש טסט. * * ‎========================================================================== * * ‎★ הצבע אינו נושא מידע לבדו. * ‎כל תגית מצב נושאת גם **טקסט**, וכל אייקון צבעוני יושב ליד תווית. * ‎מי שאינו מבחין בין ירוק לאדום חייב לקבל את אותה מערכת. */ :root { color-scheme: light; /* ‎— משטחים ————————————————————————————————————— */ --bg: #F6F8FB; /* קרקע הדף */ --surface: #FFFFFF; /* כרטיס, טבלה */ --surface-2: #F1F5F9; /* שקע — כותרת עמודה, ריחוף */ --surface-3: #E2E8F0; /* מפריד חזק */ /* ‎— טקסט ——————————————————————————————————————— */ --text: #0F172A; /* ראשי — 16.9:1 על --surface */ --text-2: #475569; /* משני — 7.5:1 */ --text-3: #5F6E85; /* מטא — 4.87:1 על --bg */ --text-on-brand: #FFFFFF; /* ★ על מבטא — ראה האזהרה למטה */ --text-on-danger:#FFFFFF; /* על גוון סכנה מלא (מונה, תגית) */ /* ‎— המבטא ——————————————————————————————————————— */ --brand: #2563EB; /* ‎5.2:1 מול לבן — עובר כטקסט וכרכיב */ --brand-strong: #1D4ED8; /* ריחוף, מצב לחוץ */ --brand-soft: #EFF6FF; /* רקע עדין לצ'יפ אייקון */ --brand-border: #BFDBFE; /* ‎— סרגל הצד ————————————————————————————————— */ /* ‎נשאר כהה **גם במצב בהיר**, בדיוק כמו במערכת המקורית. */ --nav-bg: #0B1220; --nav-text: #CBD5E1; /* ‎9.9:1 על --nav-bg */ --nav-text-mute: #94A3B8; /* ‎5.7:1 — כותרת קבוצה */ --nav-active-bg: #1E293B; --nav-active: #FFFFFF; --nav-rule: #1E293B; /* ‎— מצבים סמנטיים ————————————————————————————— */ /* ‎הערכים נבחרו כך ש-`--x` על `--x-soft` עובר 4.5:1. יש טסט. */ --ok: #15803D; --ok-soft: #DCFCE7; --ok-border: #86EFAC; --warn: #B45309; --warn-soft: #FEF3C7; --warn-border: #FCD34D; --danger: #B91C1C; --danger-soft: #FEE2E2; --danger-border:#FCA5A5; --info: #1D4ED8; --info-soft: #DBEAFE; --info-border: #93C5FD; --violet: #6D28D9; --violet-soft: #EDE9FE; /* ‎— קווים ——————————————————————————————————————— */ --border: #E2E8F0; --border-strong: #CBD5E1; /* ‎— עומק ——————————————————————————————————————— * ‎זה החריג. שלוש רמות בלבד: כרטיס, מוגבה, צף. * ‎יותר מזה הופך ל"הכל מרחף" ואז שום דבר לא בולט. */ --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.10); --shadow-2: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06); --shadow-3: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.08); /* ‎— טיפוגרפיה ————————————————————————————————— */ /* ‎המצגת מציינת Manrope. אין לו עברית, ולכן Heebo — שכבר על * ‎השרת, נושא ₪ ואת הגרש של 'צ׳ק', וספרותיו ברוחב אחיד. */ --font: 'Heebo', system-ui, -apple-system, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; /* ‎— מרווח ————————————————————————————————————— */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-full: 999px; --nav-w: 15.5rem; } /* ‎===================== מצב כהה ===================== * * ‎⚠️ **בהיר הוא ברירת המחדל, ובמכוון.** * * ‎קודם היה כאן גם בלוק ``@media (prefers-color-scheme: dark)``, ולכן * ‎מי שמערכת ההפעלה שלו כהה קיבל מערכת כהה **בלי שביקש**. עבור CRM * ‎עסקי זו הפתעה: המסך נראה אחרת אצל כל עובד באותו משרד, וצילום מסך * ‎שנשלח בוואטסאפ אינו נראה כמו מה שהנמען רואה. * * ‎המצב הכהה **לא הוסר** — הוא פשוט דורש בחירה מפורשת בכפתור, והיא * ‎נשמרת ב-localStorage. מי שרוצה אותו מקבל אותו; מי שלא נגע מקבל * ‎בהיר, תמיד ובכל מכשיר. */ :root[data-theme='dark'] { color-scheme: dark; --bg: #0B1220; --surface: #111C2E; --surface-2: #1A2740; --surface-3: #24354F; --text: #F1F5F9; --text-2: #CBD5E1; --text-3: #94A3B8; /* ⚠️ **החלפת גוון מבטא אינה החלפת ערך אחד.** * ‎בבהיר המבטא כהה ולכן לבן יושב עליו. כאן הוא **מובהר** כדי * ‎להיקרא על רקע כהה — ואז לבן עליו מודד 2.54 ונכשל. * ‎לכן `--text-on-*` מתהפכים. נתפס בטסט, לא בעין. */ --brand: #60A5FA; --brand-strong: #93C5FD; --text-on-brand: #0B1220; --text-on-danger:#0B1220; --brand-soft: #1A2740; --brand-border: #2D4A7A; --nav-bg: #070D18; --nav-active-bg: #172236; --ok: #4ADE80; --ok-soft: #12301F; --ok-border: #166534; --warn: #FBBF24; --warn-soft: #332208; --warn-border: #92400E; --danger: #F87171; --danger-soft: #3B1414; --danger-border:#991B1B; --info: #60A5FA; --info-soft: #12233F; --info-border: #1E40AF; --violet: #A78BFA; --violet-soft: #221A3D; --border: #24354F; --border-strong: #33496B; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.45); --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.50); } /* ‎===================== הפונטים ===================== * ‎שני קבצים, ושניהם חובה: העברית אינה מכילה ספרות והלטינית אינה * ‎מכילה עברית. ראה static/fonts/README.md. */ @font-face { font-family: 'Heebo'; src: url("/static/fonts/heebo-hebrew.de80852899c5.woff2") format('woff2'); font-weight: 100 900; font-display: swap; /* ‎U+20AA הוא ₪; U+05F3 הוא הגרש של 'צ׳ק'. */ unicode-range: U+0590-05FF, U+20AA, U+FB1D-FB4F, U+200C-200E; } @font-face { font-family: 'Heebo'; src: url("/static/fonts/heebo-latin.480b1d24f2aa.woff2") format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122; } /* ‎===================== איפוס ===================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--text-base); line-height: 1.6; /* ‎★ ספרות ברוחב אחיד — בלי זה עמודת סכומים רוקדת בין שורות. */ font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.3; color: var(--text); } h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } p { margin: 0 0 var(--s3); } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-strong); text-decoration: underline; } svg { flex: none; } /* ‎טבעת מיקוד גלויה בכל מקום. הסרתה היא הסרת הניווט במקלדת. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); } img { max-width: 100%; height: auto; } /* ‎===================== חוק ברזל 11 ===================== * ‎ה-HTML נשלח במצב הסופי הגלוי. אין כאן `opacity: 0` ואין * ‎`transform` התחלתי בשום מצב מנוחה — יש טסט שנכשל עליהם. * * ‎כל הצהרת תנועה יושבת בתוך השאילתה הזו, ולכן מי שביקש פחות תנועה * ‎לא מקבל אותה — ומי שה-JS שלו לא נטען מקבל את התוכן במלואו. */ @media (prefers-reduced-motion: no-preference) { a, button, .btn, .nav__link, .card, .row-link { transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } } /* ‎===================== עזרים ===================== */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; inset-inline-start: -9999px; } .skip:focus { inset-inline-start: var(--s4); top: var(--s4); z-index: 60; background: var(--surface); color: var(--brand); padding: var(--s2) var(--s4); border: 2px solid var(--brand); border-radius: var(--radius); }