/* ============================================================================ FACTURO · fx.css — מערכת עיצוב אחת לאתר ולאפליקציה. ---------------------------------------------------------------------------- ⛔⛔ **כל כלל פריסה כתוב במאפיינים לוגיים** (inline-start/end, block). הסיבה: עברית וערבית מקבלות dir="rtl" ב-, וזה חייב להספיק. ⛔ אין left/right/margin-left בשום כלל פריסה. אם צריך — זה באג. ⛔ אין backdrop-filter בשום מקום. הוא נראה טוב בצילום מסך ומוריד פריימים אמיתיים על מכונות אמיתיות. זה נשרף כבר ביותר מפרויקט אחד. ⚠ טווחי מספרים/תאריכים בעברית: .ltr עם unicode-bidi:isolate — בלעדיו "01/09–20/09" נקרא הפוך. ========================================================================== */ /* ⚠ הפונטים נטענים ב- מתוך fx_head() — ⛔ לא ב-@import, שהוא טורי וחוסם רינדור. שם גם נבחרת משפחת התצוגה לפי הכתב של השפה. */ :root{ --ink:#0b1020; /* רקע כהה — נחיתה */ --ink2:#131a33; --bg:#f5f6fa; /* רקע בהיר — אפליקציה */ --card:#ffffff; --line:#dfe3ee; --line2:#eceff5; --tx:#111629; --tx2:#4a5270; /* ⚠ #68718f נתן בדיוק **4.47:1** מול --bg (#f5f6fa) — חצי נקודת אחוז מתחת ל-WCAG AA, ב-84 צמתי טקסט. ⛔ "כמעט עובר" הוא לא עובר. הכהיה של שתי יחידות בלתי מורגשת לעין ומעלה ל-4.60. נמדד. */ --tx3:#666f8d; --accent:#4361ee; --accent2:#2f45c4; --accent-soft:#eef1ff; --gold:#e8b53d; --green:#12a870; --green-soft:#e6f7f0; --red:#d9455f; --red-soft:#fdecef; --amber:#e08e19; --amber-soft:#fdf3e3; --blue-soft:#e9f0ff; --cyan:#21c7df; --cyan-soft:#e7faff; --surface-raised:#ffffff; --surface-subtle:#f8f9fc; --focus-ring:rgba(67,97,238,.18); --r:14px; /* רדיוס */ --r-sm:9px; --sh:0 1px 2px rgba(16,22,45,.05),0 12px 30px rgba(16,22,45,.065); --sh-lg:0 2px 6px rgba(16,22,45,.06),0 28px 70px rgba(16,22,45,.13); --f:'Inter','Assistant',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; /* ⚠ משפחת התצוגה — הדבר היחיד שהופך "אתר SaaS" ל"מסמך של בנק". המשפחה בפועל נטענת לפי שפה ב-fx_font_url(); הנפילה לאחור היא סריף מערכתי, ⛔ לא sans, כדי שגם בלי רשת ההיררכיה תישמר. */ --fd:'Fraunces','Frank Ruhl Libre','Amiri',Georgia,'Times New Roman',serif; --gold-foil:linear-gradient(100deg,#f7e7b0,#e8b53d 38%,#b8862a 62%,#f2d98a); } [dir=rtl]{ --f:'Assistant','Inter',-apple-system,'Segoe UI',Arial,sans-serif; } *,*::before,*::after{ box-sizing:border-box; } html,body{ margin:0; padding:0; max-inline-size:100%; } html{ overflow-x:clip; } body{ font-family:var(--f); background:var(--bg); color:var(--tx); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; text-size-adjust:100%; font-optical-sizing:auto; } ::selection{ background:#dbe3ff; color:#111a3b; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.15; } /* ⚠ רק הכותרות הגדולות מקבלות את הסריף. ⛔ סריף בתוויות טופס ובטבלאות פוגע בקריאוּת ובצפיפות — שם ה-sans הנייטרלי עדיף. */ h1,h2{ font-family:var(--fd); font-weight:600; letter-spacing:-.015em; } h1{ font-size:clamp(32px,4.4vw,56px); line-height:1.08; } h2{ font-size:clamp(23px,2.7vw,34px); line-height:1.15; } [dir=rtl] h1,[dir=rtl] h2{ font-weight:700; letter-spacing:0; } h3{ font-size:19px; } p{ margin:0 0 1em; } small{ font-size:12.5px; color:var(--tx3); } hr{ border:0; border-block-start:1px solid var(--line); margin:22px 0; } .ic{ flex:none; } /* ⛔ המעטפת הזו היא הפתרון היחיד לטווחים ומספרים בתוך טקסט RTL. */ .ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; } .num{ font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; } .wrap{ max-width:1240px; margin-inline:auto; padding-inline:22px; } .narrow{ max-width:760px; } /* ------------------------------------------------------------- כפתורים -- */ .btn{ display:inline-flex; align-items:center; gap:7px; justify-content:center; min-block-size:42px; padding:10px 16px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card); color:var(--tx); font:inherit; font-weight:600; font-size:14px; cursor:pointer; white-space:nowrap; touch-action:manipulation; transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; } .btn:hover{ border-color:#cfd4e4; box-shadow:0 2px 8px rgba(16,22,45,.07); } .btn:active{ transform:translateY(1px); } .btn.accent{ background:var(--accent); border-color:var(--accent); color:#fff; } .btn.accent:hover{ background:var(--accent2); border-color:var(--accent2); box-shadow:0 6px 18px rgba(67,97,238,.28); } .btn.ghost{ background:transparent; border-color:transparent; color:var(--tx2); } .btn.ghost:hover{ background:rgba(17,22,41,.05); box-shadow:none; } .btn.danger{ color:var(--red); border-color:#f2ced5; background:#fff; } .btn.danger:hover{ background:var(--red-soft); } .btn.sm{ min-block-size:36px; padding:7px 12px; font-size:13px; } .btn.lg{ min-block-size:52px; padding:14px 26px; font-size:16px; border-radius:12px; } .btn.block{ width:100%; } .btn[disabled]{ opacity:.5; pointer-events:none; cursor:not-allowed; } .btn-row{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; } /* --------------------------------------------------------------- תגיות -- */ .badge{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.01em; white-space:nowrap; } .badge.gray{ background:#eef0f6; color:#5b6480; } .badge.blue{ background:var(--blue-soft); color:#2c4bbd; } .badge.green{ background:var(--green-soft); color:#0c7d53; } .badge.amber{ background:var(--amber-soft); color:#9a6208; } .badge.red{ background:var(--red-soft); color:#b12b45; } .pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; background:var(--accent-soft); color:var(--accent2); font-size:12.5px; font-weight:600; } /* --------------------------------------------------------------- כרטיס -- */ .card{ background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); } .card.pad{ padding:22px; } .card h3{ margin-block-end:14px; } .grid{ display:grid; gap:18px; } .g2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .g4{ grid-template-columns:repeat(4,minmax(0,1fr)); } /* --------------------------------------------------------------- טפסים -- */ .fld{ display:flex; flex-direction:column; gap:6px; margin-block-end:15px; } .fld label{ font-size:13px; font-weight:600; color:var(--tx2); } .fld label i{ font-style:normal; font-weight:400; color:var(--tx3); } .fld input,.fld select,.fld textarea,.inp{ font:inherit; font-size:14.5px; color:var(--tx); background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; width:100%; min-block-size:44px; transition:border-color .15s, box-shadow .15s, background .15s; } .fld textarea{ min-block-size:108px; resize:vertical; } .fld input::placeholder,.fld textarea::placeholder,.inp::placeholder{ color:#737c98; opacity:1; } .fld input:hover,.fld select:hover,.fld textarea:hover,.inp:hover{ border-color:#c9cfdf; } .fld input:focus,.fld select:focus,.fld textarea:focus,.inp:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 4px var(--focus-ring); } .fld input:disabled,.fld select:disabled,.fld textarea:disabled,.inp:disabled{ cursor:not-allowed; color:var(--tx3); background:#f1f3f7; } .fld input[type=checkbox]{ width:auto; } .fld small{ line-height:1.4; } .frow{ display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); } .frow.f3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .check{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500; cursor:pointer; } .check input{ width:18px; height:18px; accent-color:var(--accent); flex:none; } /* --------------------------------------------------------------- טבלה -- */ .tbl{ width:100%; border-collapse:collapse; font-size:14px; } .tbl th{ text-align:start; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--tx3); font-weight:700; padding:11px 12px; border-block-end:1px solid var(--line); white-space:nowrap; } .tbl td{ padding:13px 12px; border-block-end:1px solid var(--line2); vertical-align:middle; } .tbl tbody tr:hover{ background:#fafbff; } .tbl .r{ text-align:end; font-variant-numeric:tabular-nums; } .tbl .money{ text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; } .tbl a.lnk{ color:var(--accent2); font-weight:600; } .tbl a.lnk:hover{ text-decoration:underline; } .tbl-wrap{ overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-color:#c7ccda transparent; } /* --------------------------------------------------------------- ריק -- */ .empty{ text-align:center; padding:56px 24px; color:var(--tx3); } .empty h3{ color:var(--tx); margin-block-end:6px; } /* ------------------------------------------------------------ appbar -- */ .appbar{ background:#fff; border-block-end:1px solid var(--line); position:sticky; inset-block-start:0; z-index:40; } .appbar .wrap{ display:flex; align-items:center; gap:18px; height:62px; } .brand .logo{ display:inline-flex; align-items:center; gap:8px; color:var(--tx); } .brand .logo b{ font-size:17px; letter-spacing:-.03em; } .logo svg{ color:var(--accent); } /* ⚠ ה-wordmark חולק משפחה עם הכותרות — זה מה שגורם ללוגו להיראות חלק מהמערכת ולא מדבקה שהודבקה עליה. */ .logo b{ font-family:Inter,Arial,Helvetica,sans-serif; font-weight:800; letter-spacing:-.055em; font-feature-settings:"ss01" 1,"cv11" 1; } .logo .brand-mark{ display:block; flex:none; } [dir=rtl] .logo b{ font-weight:800; letter-spacing:-.055em; } .anav{ display:flex; gap:2px; margin-inline-start:8px; flex:1; } .anav a{ display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:8px; font-size:14px; font-weight:600; color:var(--tx2); } .anav a:hover{ background:#f1f3f9; color:var(--tx); } .anav a.on{ background:var(--accent-soft); color:var(--accent2); } .abright{ display:flex; align-items:center; gap:8px; } /* ------------------------------------------------------------ בורר -- */ .sw{ position:relative; } .sw summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:13px; font-weight:600; color:var(--tx2); background:#fff; } .sw summary::-webkit-details-marker{ display:none; } .sw summary:hover{ border-color:#cfd4e4; } .sw-cc{ font-variant-numeric:tabular-nums; } .sw-sep{ color:var(--tx3); } .sw-pop{ position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0; z-index:60; width:330px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-lg); padding:14px; } .sw-sec + .sw-sec{ margin-block-start:14px; padding-block-start:14px; border-block-start:1px solid var(--line2); } .sw-h{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--tx3); font-weight:700; margin-block-end:8px; } .sw-langs{ display:flex; flex-wrap:wrap; gap:5px; max-height:168px; overflow:auto; } .sw-l{ padding:4px 9px; border-radius:7px; font-size:13px; color:var(--tx2); border:1px solid transparent; } .sw-l:hover{ background:#f1f3f9; } .sw-l.on{ background:var(--accent-soft); color:var(--accent2); font-weight:700; } .sw-country select{ width:100%; font:inherit; font-size:14px; padding:9px 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; } .sw-note{ margin-block-start:12px; padding-block-start:12px; border-block-start:1px solid var(--line2); font-size:13px; color:var(--tx2); } .sw-warn{ margin-block-start:7px; padding:8px 10px; border-radius:8px; background:var(--amber-soft); color:#8a5a08; font-size:12.5px; line-height:1.45; } /* ------------------------------------------------------------ פלאש -- */ .flash{ margin:16px 0; padding:12px 16px; border-radius:var(--r-sm); font-weight:600; font-size:14px; } .flash.ok{ background:var(--green-soft); color:#0c7d53; } .flash.err{ background:var(--red-soft); color:#b12b45; } .flash.warn{ background:var(--amber-soft); color:#8a5a08; } .note{ padding:12px 14px; border-radius:var(--r-sm); font-size:13.5px; line-height:1.5; } .note.info{ background:var(--accent-soft); color:#2b3c86; } .note.warn{ background:var(--amber-soft); color:#8a5a08; } .note.err{ background:var(--red-soft); color:#b12b45; } .note ul{ margin:6px 0 0; padding-inline-start:20px; } /* ------------------------------------------------------------ עמוד -- */ .page{ padding-block:26px 60px; } .phead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-block-end:20px; flex-wrap:wrap; } .phead h1{ font-size:27px; letter-spacing:-.03em; } .phead .sub{ color:var(--tx3); font-size:14px; margin-block-start:3px; } /* --------------------------------------------------------------- KPI -- */ .kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-block-end:22px; } .kpi{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; } .kpi .k{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--tx3); } .kpi .v{ font-size:26px; font-weight:700; letter-spacing:-.03em; margin-block-start:6px; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; } .kpi .d{ font-size:12.5px; color:var(--tx3); margin-block-start:2px; } .kpi.hi .v{ color:var(--accent2); } .kpi.bad .v{ color:var(--red); } /* ======================================================== דף הנחיתה === */ .lp{ background:var(--ink); color:#e9ecf7; } .lp .wrap{ position:relative; z-index:2; } .lpbar{ height:70px; display:flex; align-items:center; gap:16px; } .lpbar .logo{ color:#fff; } .lpbar .logo svg{ color:#7f97ff; } .lpbar nav{ margin-inline-start:auto; display:flex; align-items:center; gap:10px; } .lp .btn{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#e9ecf7; } .lp .btn:hover{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.22); } .lp .btn.accent{ background:var(--accent); border-color:var(--accent); color:#fff; } .lp .btn.accent:hover{ background:#5b74f0; } .lp .sw summary{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#cdd4ec; } .lp .sw-pop{ background:#171f3d; border-color:rgba(255,255,255,.12); color:#e9ecf7; } .lp .sw-l{ color:#c3cbe6; } .lp .sw-l:hover{ background:rgba(255,255,255,.08); } .lp .sw-l.on{ background:rgba(127,151,255,.22); color:#cfd9ff; } .lp .sw-country select{ background:#0f1730; border-color:rgba(255,255,255,.14); color:#e9ecf7; } .lp .sw-note{ color:#b9c2e0; border-color:rgba(255,255,255,.1); } /* ⚠ ה"אורורה" היא שני רדיאלים סטטיים. ⛔ לא filter ולא אנימציה מתמדת — רקע שמצייר כל פריים הורג סוללה ולא מוסיף כלום. */ .hero{ position:relative; padding-block:64px 90px; overflow:hidden; } /* ⚠ הרדיאלים הישנים הוסרו: `.art-hero` (assets/fx-art.css) מחליף אותם בהרכב מלא — אורורה, רשת חרוטה, רוזטה ורעש. ⛔ ובמכוון **לא** משאירים אותם עם כלל `:has()` שיכבה אותם: `:has()` הוא סריקת עץ, וכאן הוא פשוט מיותר. שכבה אחת אחראית לרקע ההירו. */ .hero::after{ content:''; position:absolute; inset-block-end:-1px; inset-inline:0; height:180px; z-index:1; background:linear-gradient(180deg,rgba(11,16,32,0),var(--ink)); } .hero-in{ position:relative; z-index:2; max-width:780px; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); font-size:12.5px; font-weight:600; color:#c9d2f0; margin-block-end:18px; } .eyebrow b{ color:#fff; } .hero h1{ color:#fff; margin-block-end:16px; } .hero .lead{ font-size:clamp(16.5px,1.6vw,19.5px); color:#c3cbe6; max-width:640px; margin-block-end:28px; line-height:1.62; } .hero .cta{ display:flex; gap:11px; flex-wrap:wrap; align-items:center; } .hero .free{ margin-block-start:16px; font-size:13.5px; color:#8f9ac0; display:flex; align-items:center; gap:7px; } .hero .free svg{ color:var(--green); } /* דוגמת מסמך שמרחפת בהירו — ⚠ HTML אמיתי, לא צילום מסך. */ .demo{ position:relative; z-index:2; margin-block-start:-30px; background:#fff; color:var(--tx); border-radius:16px; box-shadow:0 40px 90px rgba(0,0,0,.45); overflow:hidden; border:1px solid rgba(255,255,255,.1); } .demo-top{ display:flex; align-items:center; gap:9px; padding:11px 15px; background:#f3f5fb; border-block-end:1px solid var(--line); } .demo-dot{ width:10px; height:10px; border-radius:50%; background:#d9dde9; } .demo-tabs{ margin-inline-start:10px; display:flex; gap:6px; flex-wrap:wrap; } .demo-tab{ font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:6px; background:#e6eaf5; color:#5b6480; } .demo-tab.on{ background:var(--accent); color:#fff; } .demo-body{ padding:22px; } .strip{ padding-block:34px; border-block-start:1px solid rgba(255,255,255,.08); } .strip-in{ display:flex; align-items:center; justify-content:center; gap:34px; flex-wrap:wrap; color:#8f9ac0; font-size:13px; font-weight:600; } /* ⚠ מספר גדול בסריף נקרא כמו נתון בדוח שנתי; אותו מספר ב-sans נקרא כמו מד בלוח בקרה. כאן רוצים את הראשון. */ .strip-in b{ font-family:var(--fd); color:#f4e6bd; font-size:30px; font-weight:600; display:block; line-height:1; margin-block-end:6px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .strip-i{ text-align:center; } .sec{ padding-block:74px; } .sec.light{ background:#fff; color:var(--tx); } .sec.tint{ background:var(--bg); color:var(--tx); } .sec-head{ max-width:660px; margin-block-end:38px; } .sec-head h2{ margin-block-end:10px; } .sec-head p{ color:var(--tx2); font-size:16px; } .lp .sec-head p{ color:#b8c1e0; } .feats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .feat{ padding:24px; border-radius:var(--r); background:#fff; border:1px solid var(--line); } .feat .fi{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent2); margin-block-end:14px; } .feat h3{ font-size:17px; margin-block-end:7px; } .feat p{ color:var(--tx2); font-size:14px; margin:0; line-height:1.55; } .steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; counter-reset:s; } .step{ position:relative; padding-block-start:12px; } .step::before{ counter-increment:s; content:counter(s); display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--accent); color:#fff; font-weight:700; font-size:14px; margin-block-end:12px; } .step h3{ font-size:17px; margin-block-end:6px; } .step p{ color:var(--tx2); font-size:14px; margin:0; } .lpfoot{ padding-block:34px; border-block-start:1px solid rgba(255,255,255,.08); color:#7f89ad; font-size:13px; } .lpfoot .wrap{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:space-between; } /* מסך כניסה */ .auth{ min-height:100vh; display:grid; place-items:center; padding:30px 20px; background:var(--ink); } .auth-card{ width:100%; max-width:430px; background:#fff; border-radius:18px; padding:32px; box-shadow:0 30px 80px rgba(0,0,0,.4); } .auth-card h1{ font-size:24px; margin-block-end:6px; } .auth-card .sub{ color:var(--tx3); font-size:14px; margin-block-end:22px; } .auth-alt{ margin-block-start:18px; text-align:center; font-size:14px; color:var(--tx3); } .auth-alt a{ color:var(--accent2); font-weight:600; } /* ==================================================== עורך המסמך === */ .editor{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; } .side{ position:sticky; inset-block-start:80px; display:grid; gap:16px; } .lines-tbl{ width:100%; border-collapse:collapse; } .lines-tbl th{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--tx3); font-weight:700; padding:8px 8px; text-align:start; } .lines-tbl td{ padding:5px 6px; vertical-align:top; } .lines-tbl input,.lines-tbl select{ font:inherit; font-size:14px; padding:8px 9px; width:100%; min-block-size:40px; border:1px solid var(--line); border-radius:8px; background:#fff; transition:border-color .15s,box-shadow .15s,background .15s; } .lines-tbl input:hover,.lines-tbl select:hover{ border-color:#c6cddd; } .lines-tbl input:focus,.lines-tbl select:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 4px var(--focus-ring); } .lines-tbl .num-in{ text-align:end; font-variant-numeric:tabular-nums; direction:ltr; } .lines-tbl .lt{ text-align:end; font-variant-numeric:tabular-nums; font-weight:600; padding-block:14px; white-space:nowrap; direction:ltr; unicode-bidi:isolate; } .lines-tbl .del{ display:grid; place-items:center; min-inline-size:36px; min-block-size:36px; background:none; border:0; color:var(--tx3); cursor:pointer; padding:8px; border-radius:7px; } .lines-tbl .del:hover{ background:var(--red-soft); color:var(--red); } .col-qty{ width:92px; } .col-price{ width:130px; } .col-disc{ width:78px; } .col-rate{ width:118px; } .col-tot{ width:130px; } .col-x{ width:40px; } .totals{ display:grid; gap:7px; font-size:14px; } .totals .row{ display:flex; justify-content:space-between; gap:14px; } .totals .row span:last-child{ font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; } .totals .row.sum{ border-block-start:1px solid var(--line); margin-block-start:6px; padding-block-start:11px; font-size:19px; font-weight:700; } .totals .row.muted{ color:var(--tx3); } .totals .row.tax{ color:var(--tx2); } .editor > .grid > .card{ position:relative; } .editor > .grid > .card::before{ content:''; position:absolute; inset-block-start:-1px; inset-inline:18px; block-size:2px; border-radius:999px; background:linear-gradient(90deg,transparent,rgba(67,97,238,.52),rgba(33,199,223,.42),transparent); } .editor .side .card:first-child{ border-color:#d7ddef; background:linear-gradient(145deg,#fff 0%,#fbfcff 68%,#f3f6ff 100%); box-shadow:0 20px 48px rgba(22,31,72,.1); } /* ================================================== אינטראקציות 2027 === */ /* טבעת אחת ברורה למקלדת בכל המערכת. שדות טופס שומרים על טבעת ה-focus הייעודית שלהם; כאן מכוסים קישורים, כפתורים ו-summary. */ a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; } .lp a:focus-visible,.lp button:focus-visible,.lp summary:focus-visible{ outline-color:#f4da8b; } @media (prefers-reduced-motion:no-preference){ /* תזוזה של פיקסל אחד בלבד: מספיק כדי לאשר שהאלמנט אינטראקטיבי בלי להפוך את הממשק לצעצוע. צבע וצל נשארים ב-CSS הקיים. */ @media (hover:hover) and (pointer:fine){ .btn:not([disabled]):hover{ transform:translateY(-1px); } .btn:not([disabled]):active{ transform:translateY(1px); } } .sw[open] > .sw-pop{ animation:fx-pop-in .18s cubic-bezier(.22,.72,.3,1) both; } .flash{ animation:fx-notice-in .28s cubic-bezier(.22,.72,.3,1) both; } .lrow.is-entering > td{ animation:fx-line-enter .3s cubic-bezier(.22,.72,.3,1) both; } } @keyframes fx-pop-in{ from{ opacity:0; translate:0 -5px; } to { opacity:1; translate:0 0; } } @keyframes fx-notice-in{ from{ opacity:0; translate:0 -4px; } to { opacity:1; translate:0 0; } } @keyframes fx-line-enter{ from{ opacity:0; translate:0 -6px; } to { opacity:1; translate:0 0; } } /* כל התוכן והפעולות נשארים זמינים; רק התנועה מבוטלת. הכיסוי הרחב מכוון: הוא מגן גם על שכבות הרחבה שנטענות אחרי קובץ הבסיס. */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto !important; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .btn:active,.btn:hover{ transform:none; } } /* ------------------------------------------------------------- רספונסיב -- ⛔ כל ה-breakpoints כאן הם `screen and (…)` בכוונה: רוחב עמוד מודפס קטן מהם, ובלי `screen` הדפסה מקבלת את פריסת המובייל. */ @media screen and (max-width:1080px){ .editor{ grid-template-columns:1fr; } .side{ position:static; } .feats,.steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media screen and (max-width:860px){ .anav span{ display:none; } .anav a{ padding:9px 10px; } } @media screen and (max-width:680px){ .feats,.steps,.g2,.g3,.g4,.frow,.frow.f3{ grid-template-columns:1fr; } .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } .appbar .wrap{ height:auto; padding-block:10px; flex-wrap:wrap; } .anav{ order:3; width:100%; overflow-x:auto; margin-inline-start:0; } .sw-pop{ width:min(330px,88vw); } .hero{ padding-block:38px 60px; } .sec{ padding-block:52px; } } @media screen and (max-width:460px){ .wrap{ padding-inline:15px; } .card.pad{ padding:18px 16px; } .btn-row{ align-items:stretch; } .btn-row > .btn{ flex:1 1 auto; } .lines-tbl th{ padding-inline:6px; } .lines-tbl td{ padding-inline:4px; } .phead{ align-items:stretch; } .phead > .btn-row{ inline-size:100%; } } /* Windows High Contrast נשאר שימושי: אין להסתמך על גרדיאנט או צל כדי לסמן פעולה, בחירה או גבול של שדה. */ @media (forced-colors:active){ .btn,.card,.fld input,.fld select,.fld textarea,.inp,.lines-tbl input,.lines-tbl select, .sw summary,.sw-pop{ border:1px solid CanvasText; box-shadow:none; } .btn.accent,.badge,.pill,.anav a.on{ forced-color-adjust:none; } .editor > .grid > .card::before{ display:none; } a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline-color:Highlight; } } /* ------------------------------------------------------------- הדפסה -- */ @media print{ .appbar,.lpbar,.no-print,.btn,.sw{ display:none !important; } body{ background:#fff; color:#000; text-rendering:geometricPrecision; } .editor > .grid > .card::before{ display:none; } } /* ======================================================================== MOBILE / RTL SAFETY NET · shared by the public site, app and documents. Keep this layer deliberately structural: the surface-specific visual work lives in the later stylesheets, while these rules prevent the viewport itself from becoming a second horizontal scroller. ======================================================================== */ html,body{ overflow-x:clip; } main,section,article,aside,nav,.wrap,.grid,.card,.tbl-wrap{ min-inline-size:0; } img,video,canvas{ max-inline-size:100%; block-size:auto; } button,input,select,textarea{ max-inline-size:100%; } /* Wide business tables remain available as a local, touch-friendly scroller. Clipping the page does not clip this element: it owns its own scrollport. */ .tbl-wrap{ inline-size:100%; max-inline-size:100%; min-inline-size:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-gutter:stable; contain:inline-size paint; } .tbl-wrap > table{ margin-inline:0; } .tbl a.lnk{ display:inline-flex; align-items:center; min-inline-size:24px; min-block-size:28px; } /* The base field ring used :focus so mouse clicks received the same strong treatment. Preserve it, and add an outline for keyboard/high-zoom users. */ .fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible, .inp:focus-visible,.lines-tbl input:focus-visible,.lines-tbl select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* Coarse pointers benefit from a 44px primary target without inflating dense desktop tables or inline legal links. */ @media screen and (pointer:coarse){ .btn,.sw > summary,.anav a,.lines-tbl .del{ min-block-size:44px; } .btn.sm{ min-block-size:42px; } input[type=checkbox],input[type=radio]{ min-inline-size:20px; min-block-size:20px; } } @media screen and (max-width:460px){ .sw-pop{ inline-size:min(330px,calc(100vw - 30px)); max-inline-size:calc(100vw - 30px); } .auth{ padding:18px 14px; } .auth-card{ padding:24px 18px; border-radius:16px; } } @media print{ @page{ margin:12mm; } html,body{ overflow:visible !important; max-inline-size:none; } *{ animation:none !important; transition:none !important; } .tbl-wrap{ overflow:visible !important; scrollbar-gutter:auto; } .card,.kpi{ box-shadow:none; break-inside:avoid; } a{ text-decoration:none; } }