/* ============================================================================ FACTURO · fx.css — מערכת עיצוב אחת לאתר ולאפליקציה. ---------------------------------------------------------------------------- ⛔⛔ **כל כלל פריסה כתוב במאפיינים לוגיים** (inline-start/end, block). הסיבה: עברית וערבית מקבלות dir="rtl" ב-, וזה חייב להספיק. ⛔ אין left/right/margin-left בשום כלל פריסה. אם צריך — זה באג. ⛔ אין backdrop-filter בשום מקום. הוא נראה טוב בצילום מסך ומוריד פריימים אמיתיים על מכונות אמיתיות. זה נשרף כבר ביותר מפרויקט אחד. ⚠ טווחי מספרים/תאריכים בעברית: .ltr עם unicode-bidi:isolate — בלעדיו "01/09–20/09" נקרא הפוך. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Assistant:wght@400;600;700&display=swap'); :root{ --ink:#0b1020; /* רקע כהה — נחיתה */ --ink2:#131a33; --bg:#f5f6fa; /* רקע בהיר — אפליקציה */ --card:#ffffff; --line:#e4e7f0; --line2:#eef0f6; --tx:#111629; --tx2:#4a5270; --tx3:#7b83a0; --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; --r:14px; /* רדיוס */ --r-sm:9px; --sh:0 1px 2px rgba(16,22,45,.05), 0 8px 24px rgba(16,22,45,.06); --sh-lg:0 2px 6px rgba(16,22,45,.06), 0 24px 60px rgba(16,22,45,.12); --f:'Inter','Assistant',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; } [dir=rtl]{ --f:'Assistant','Inter',-apple-system,'Segoe UI',Arial,sans-serif; } *,*::before,*::after{ box-sizing:border-box; } html,body{ margin:0; padding:0; } 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; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.15; } h1{ font-size:clamp(30px,4.2vw,52px); } h2{ font-size:clamp(22px,2.6vw,32px); } 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; 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; 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{ padding:7px 12px; font-size:13px; } .btn.lg{ padding:14px 26px; font-size:16px; border-radius:12px; } .btn.block{ width:100%; } .btn[disabled]{ opacity:.5; pointer-events:none; } .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(--card); 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%; transition:border-color .15s, box-shadow .15s; } .fld input:focus,.fld select:focus,.fld textarea:focus,.inp:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(67,97,238,.14); } .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:17px; height:17px; accent-color:var(--accent); } /* --------------------------------------------------------------- טבלה -- */ .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; } /* --------------------------------------------------------------- ריק -- */ .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); } .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; } .hero::before{ content:''; position:absolute; inset:-40% -20% auto -20%; height:820px; z-index:0; background: radial-gradient(680px 420px at 18% 12%, rgba(67,97,238,.42), transparent 62%), radial-gradient(560px 380px at 82% 4%, rgba(232,181,61,.20), transparent 60%), radial-gradient(760px 520px at 55% 46%, rgba(18,168,112,.16), transparent 66%); } .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(16px,1.6vw,19px); color:#b8c1e0; max-width:640px; margin-block-end:26px; line-height:1.6; } .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; } .strip-in b{ color:#e9ecf7; font-size:17px; display:block; font-variant-numeric:tabular-nums; } .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%; border:1px solid var(--line); border-radius:8px; background:#fff; } .lines-tbl input:focus,.lines-tbl select:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(67,97,238,.13); } .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{ 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); } /* ------------------------------------------------------------- רספונסיב -- ⛔ כל ה-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 print{ .appbar,.lpbar,.no-print,.btn,.sw{ display:none !important; } body{ background:#fff; } }