/** * PULSE GENERIC — app.css * * DIRECTION * --------- * Every inline spacing, border and alignment rule below uses CSS *logical* * properties (margin-inline-*, padding-inline-*, border-inline-*, text-align: * start/end, inset-inline-*). Setting dir="rtl" on flips the whole * application. There are no [dir=rtl] patch rules and there is no * `if (locale === 'he')` anywhere in the codebase. * * VISUAL DIRECTION * ---------------- * A surveyor's plan sheet: cool paper, ink, one deep teal used only for * things you can act on, and a monospaced utility face for record ids, * hostnames and adapter contracts — the machine-readable half of the product * kept visually distinct from the human-readable half. */ :root { --ink: #0f1c26; --ink-soft: #4a6072; --ink-faint: #7d8f9c; --paper: #e9eef0; --surface: #ffffff; --surface-sunk: #f4f7f8; --line: #ccd8de; --line-strong: #9fb3bd; --accent: #0d5f70; --accent-strong: #094a58; --accent-wash: #e2f0f2; --ok: #2c6e4f; --warn: #8a5a12; --alert: #97362f; --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif; --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --r: 3px; --gap: 20px; --shadow: 0 1px 0 rgba(15, 28, 38, .06), 0 8px 24px -18px rgba(15, 28, 38, .5); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; } h1, h2, h3 { margin: 0 0 .4em; line-height: 1.15; letter-spacing: -.015em; } h2 { font-size: 1.6rem; font-weight: 650; } h3 { font-size: 1.05rem; font-weight: 650; } p { margin: 0 0 .6em; } a { color: var(--accent); } .muted { color: var(--ink-soft); } .note { color: var(--ink-soft); font-size: .84rem; border-inline-start: 2px solid var(--line-strong); padding-inline-start: 10px; } .eyebrow { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); margin: 0 0 .4em; } /* ------------------------------------------------------------------ */ /* Shell */ /* ------------------------------------------------------------------ */ .shell { min-height: 100vh; display: flex; flex-direction: column; } .shell-head { background: var(--surface); border-block-end: 1px solid var(--line); padding: 14px 28px 0; display: grid; gap: 12px; position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: baseline; gap: 10px; } .brand-mark { color: var(--accent); font-size: 1.2rem; } .brand-name { font-weight: 700; letter-spacing: .04em; } .brand-version { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); } .shell-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .shell-count { font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); } .search-input { min-width: 260px; flex: 1 1 260px; } .locale-switch { display: flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .locale-btn { background: var(--surface); border: 0; padding: 7px 12px; font: inherit; font-size: .85rem; cursor: pointer; color: var(--ink-soft); } .locale-btn + .locale-btn { border-inline-start: 1px solid var(--line); } .locale-btn.is-active { background: var(--accent); color: #fff; } .nav { display: flex; gap: 4px; flex-wrap: wrap; } .nav-link { padding: 9px 14px; text-decoration: none; color: var(--ink-soft); font-size: .92rem; border-block-end: 2px solid transparent; } .nav-link:hover { color: var(--ink); } .nav-link.is-active { color: var(--accent-strong); border-block-end-color: var(--accent); font-weight: 600; } .shell-main { padding: 26px 28px 60px; flex: 1; max-width: 1400px; width: 100%; } /* ------------------------------------------------------------------ */ /* Page head */ /* ------------------------------------------------------------------ */ .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-block-end: 20px; padding-block-end: 14px; border-block-end: 1px solid var(--line); } .page-title { margin: 0; } .page-sub { margin: 4px 0 0; color: var(--ink-soft); font-size: .92rem; } .page-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ------------------------------------------------------------------ */ /* Controls */ /* ------------------------------------------------------------------ */ .btn { font: inherit; font-size: .9rem; padding: 8px 14px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; } .btn:hover { border-color: var(--accent); color: var(--accent-strong); } .btn:focus-visible, .input:focus-visible, .nav-link:focus-visible, .locale-btn:focus-visible, .map-list-item:focus-visible, .plot-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-strong); color: #fff; } .btn-quiet { border-color: transparent; color: var(--ink-faint); } .btn-icon { padding: 2px 8px; line-height: 1.4; } .btn[disabled] { opacity: .35; cursor: default; } .link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-align: start; } .input { font: inherit; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); width: 100%; } textarea.input { resize: vertical; } .field { display: block; margin-block-end: 14px; } .field-label { display: block; font-size: .82rem; color: var(--ink-soft); margin-block-end: 4px; } .field-hint { display: block; font-size: .78rem; color: var(--ink-faint); margin-block-start: 4px; } .form-row { display: flex; gap: 12px; flex-wrap: wrap; } .form-row > .field { flex: 1 1 160px; } .form-actions { display: flex; gap: 8px; margin-block-start: 8px; } .form-error { color: var(--alert); font-size: .85rem; min-height: 1em; } .form-compact .field { margin-block-end: 8px; } .inline-field { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-soft); } .inline-field .input { width: auto; min-width: 170px; } .checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; margin-inline-end: 14px; } .checkrow { display: flex; flex-wrap: wrap; gap: 4px; } /* ------------------------------------------------------------------ */ /* Cards, grid, stats */ /* ------------------------------------------------------------------ */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gap); } .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); align-items: start; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); margin-block-end: var(--gap); } .card-wide { grid-column: 1 / -1; } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 14px; } .stat-row { display: flex; gap: 22px; flex-wrap: wrap; margin: 12px 0 4px; } .stat { display: flex; flex-direction: column; } .stat-value { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; color: var(--ink); } .stat-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); } .badge { display: inline-block; font-family: var(--mono); font-size: .7rem; padding: 2px 7px; border-radius: 2px; border: 1px solid var(--line-strong); color: var(--ink-soft); background: var(--surface-sunk); white-space: nowrap; } .badge-ok { color: var(--ok); border-color: currentColor; } .badge-warn { color: var(--warn); border-color: currentColor; } .badge-alert { color: var(--alert); border-color: currentColor; } .badge-accent { color: var(--accent); border-color: currentColor; background: var(--accent-wash); } .badge-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-block-end: 14px; } .id-tag { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); } .mono-line { font-family: var(--mono); font-size: .8rem; color: var(--accent-strong); } .mono-list { font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); padding-inline-start: 18px; margin: 0; } .mono-list li { margin-block-end: 3px; } .empty { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 40px; text-align: center; color: var(--ink-soft); } .empty h3 { color: var(--ink); } .plain-list { list-style: none; padding: 0; margin: 0; } .plain-list li { padding: 6px 0; border-block-end: 1px solid var(--line); display: flex; gap: 8px; align-items: center; } .product-title { flex: 1; } .table { width: 100%; border-collapse: collapse; font-size: .9rem; } .table th, .table td { text-align: start; padding: 8px 10px; border-block-end: 1px solid var(--line); vertical-align: top; } .table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); } .hours { border-collapse: collapse; font-size: .9rem; width: 100%; } .hours th { text-align: start; font-weight: 500; color: var(--ink-soft); padding: 4px 10px 4px 0; } .hours td { font-family: var(--mono); font-size: .82rem; padding: 4px 0; } .hours-row { display: flex; align-items: center; gap: 8px; margin-block-end: 6px; } .hours-day { flex: 0 0 90px; font-size: .85rem; color: var(--ink-soft); } .hours-row .input { width: auto; } .section-list { margin: 0; padding-inline-start: 22px; } .section-list li { display: flex; align-items: center; gap: 6px; padding: 3px 0; } .section-name { flex: 1; } .match-list { list-style: none; padding: 0; margin: 8px 0 0; } .match-list li { display: flex; gap: 8px; align-items: center; font-size: .88rem; padding: 3px 0; } /* ------------------------------------------------------------------ */ /* SIGNATURE — the area spine */ /* Zones drawn as levels on a rail: floors in a mall, districts in a */ /* city, lanes in a market. The spatial model is shown, not described. */ /* ------------------------------------------------------------------ */ .spine { list-style: none; margin: 18px 0 6px; padding: 0; border-inline-start: 2px solid var(--line-strong); padding-inline-start: 0; } .spine-level { display: flex; align-items: center; gap: 14px; padding: 10px 0 10px 0; margin-inline-start: -2px; border-inline-start: 2px solid transparent; padding-inline-start: 16px; position: relative; } .spine-level::before { content: ""; position: absolute; inset-inline-start: -5px; inset-block-start: 50%; width: 8px; height: 8px; background: var(--accent); transform: translateY(-50%) rotate(45deg); } .spine-tick { font-family: var(--mono); font-size: .8rem; color: var(--accent-strong); background: var(--accent-wash); border-radius: 2px; padding: 1px 7px; min-width: 30px; text-align: center; } .spine-name { font-weight: 600; } .spine-count { margin-inline-start: auto; font-family: var(--mono); font-size: .78rem; color: var(--ink-faint); } /* ------------------------------------------------------------------ */ /* Map */ /* ------------------------------------------------------------------ */ .map-controls { display: flex; gap: 18px; flex-wrap: wrap; margin-block-end: 14px; } .map-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr); gap: var(--gap); } .map-stage { min-height: 460px; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .map-stage .leaflet-container { height: 460px; width: 100%; } .map-note { font-size: .8rem; color: var(--ink-faint); padding: 10px; margin: 0; } .map-plot { width: 100%; height: auto; display: block; } .plot-grid { stroke: var(--line); stroke-width: 1; } .plot-pin circle { fill: var(--accent); stroke: #fff; stroke-width: 2; cursor: pointer; } .plot-pin text { font-family: var(--sans); font-size: 15px; fill: var(--ink); } .plot-pin:hover circle { fill: var(--accent-strong); r: 11; } .map-list { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow: auto; } .map-list-item { display: flex; align-items: center; gap: 8px; padding: 10px; border-block-end: 1px solid var(--line); cursor: pointer; } .map-list-item:hover { background: var(--accent-wash); } .map-list-name { font-weight: 600; } .map-list-meta { font-size: .8rem; color: var(--ink-faint); margin-inline-start: auto; } /* ------------------------------------------------------------------ */ /* Generated business site */ /* ------------------------------------------------------------------ */ .site { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 34px; box-shadow: var(--shadow); max-width: 860px; } .site-hero { border-block-end: 1px solid var(--line); padding-block-end: 22px; margin-block-end: 22px; } .site-eyebrow { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); margin: 0 0 8px; } .site-name { font-size: 2.2rem; margin: 0; } .site-lede { font-size: 1.05rem; color: var(--ink-soft); margin-block-start: 10px; } .site-section { margin-block-end: 26px; } .site-section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); font-family: var(--mono); font-weight: 500; border-block-end: 1px solid var(--line); padding-block-end: 6px; margin-block-end: 12px; } .site-list { list-style: none; margin: 0; padding: 0; } .site-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-block-end: 1px dotted var(--line); } .site-products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .site-product { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 6px; } .site-product-title { font-weight: 600; } .site-price { font-family: var(--mono); color: var(--accent-strong); } .site-foot { display: flex; justify-content: space-between; gap: 10px; border-block-start: 1px solid var(--line); padding-block-start: 14px; font-size: .78rem; color: var(--ink-faint); } /* Themes are configuration. One renderer, four skins, no duplicated HTML. */ .site-theme-clean { } .site-theme-classic { --accent: #4a3b2a; --accent-strong: #2f2519; --accent-wash: #f0eae0; } .site-theme-classic .site-name { font-family: Georgia, "Times New Roman", serif; } .site-theme-premium { background: #10202a; color: #eef3f5; border-color: #10202a; } .site-theme-premium .site-lede, .site-theme-premium .site-section-title, .site-theme-premium .site-foot { color: #9fb3bd; } .site-theme-premium .site-hero, .site-theme-premium .site-section-title, .site-theme-premium .site-list li, .site-theme-premium .site-product, .site-theme-premium .site-foot { border-color: #2b3f4c; } .site-theme-premium .site-price { color: #7fd0c8; } .site-theme-colorful { --accent: #b8452c; --accent-strong: #8d3220; --accent-wash: #fbeae5; } .site-theme-colorful .site-hero { background: #fbeae5; margin: -34px -34px 22px; padding: 34px; border-radius: var(--r) var(--r) 0 0; } /* ------------------------------------------------------------------ */ /* Toast */ /* ------------------------------------------------------------------ */ .toast { position: fixed; inset-block-end: 22px; inset-inline-start: 50%; transform: translateX(-50%) translateY(10px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--r); font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 40; } .toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media (max-width: 860px) { .shell-head { padding: 12px 16px 0; } .shell-main { padding: 18px 16px 50px; } .map-grid { grid-template-columns: 1fr; } .site { padding: 22px; } } /* ------------------------------------------------------------------ */ /* Catalog intake */ /* ------------------------------------------------------------------ */ .file-input { padding: 14px; border-style: dashed; background: var(--surface-sunk); cursor: pointer; } .row-actions { white-space: nowrap; } .row-actions .btn { margin-inline-end: 4px; } .candidate-row { align-items: flex-start; flex-wrap: wrap; } .candidate-main { flex: 1 1 260px; } .candidate-main .note { margin-block-start: 4px; } /* ------------------------------------------------------------------ */ /* Business structure tree */ /* ------------------------------------------------------------------ */ .tree { list-style: none; margin: 0; padding: 0; } .tree-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-block-end: 1px solid var(--line); } .tree-depth-1 { padding-inline-start: 26px; } .tree-depth-2 { padding-inline-start: 52px; } .tree-depth-1 > .tree-level, .tree-depth-2 > .tree-level { opacity: .75; } .tree-level { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); min-width: 92px; } .tree-name { font-weight: 600; font-size: 1rem; } .tree-counts { margin-inline-start: auto; display: flex; gap: 6px; } .price-input { max-width: 120px; } /* ------------------------------------------------------------------ */ /* Record detail bubble */ /* Every record chip and every table row opens the same bubble: full */ /* information about that one item, and a bar for what is still missing.*/ /* ------------------------------------------------------------------ */ .id-tag-open { border: 1px solid var(--line); background: var(--surface-sunk); border-radius: 2px; padding: 1px 6px; cursor: pointer; font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); } .id-tag-open:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-wash); } .is-inspectable { cursor: pointer; } .is-inspectable:hover { background: var(--accent-wash); } .bubble-overlay { position: fixed; inset: 0; background: rgba(15, 28, 38, .45); z-index: 50; display: none; align-items: center; justify-content: center; padding: 18px; } .bubble-overlay.is-open { display: flex; } .bubble { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 50px -12px rgba(15, 28, 38, .55); width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; } .bubble-head { background: var(--surface-sunk); border-block-end: 1px solid var(--line); padding: 14px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .bubble-head h3 { margin: 0; } .bubble-sub { margin: 3px 0 0; font-size: .84rem; color: var(--ink-soft); } .bubble-body { padding: 16px 18px; overflow: auto; } .bubble-group { margin-block-end: 16px; } .bubble-group h4 { margin: 0 0 6px; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-faint); font-weight: 500; } .bubble-table { width: 100%; border-collapse: collapse; font-size: .86rem; } .bubble-table th { text-align: start; font-weight: 500; color: var(--ink-soft); padding: 5px 12px 5px 0; width: 42%; vertical-align: top; } .bubble-table td { padding: 5px 0; vertical-align: top; word-break: break-word; } .tone-ok { color: var(--ok); font-weight: 600; } .tone-warn { color: var(--warn); font-weight: 600; } .tone-alert { color: var(--alert); font-weight: 600; } .bubble-bar { margin-block-end: 14px; } .bubble-bar-label { display: block; font-size: .76rem; color: var(--ink-soft); margin-block-end: 4px; } .pbar { height: 9px; background: var(--line); border-radius: 4px; overflow: hidden; } .pbar i { display: block; height: 100%; background: var(--accent); } .pbar i.full { background: var(--ok); } .pbar i.none { background: var(--warn); } .bubble-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-block-start: 1px solid var(--line); } .bubble-image { width: 96px; height: 96px; object-fit: contain; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--r); float: inline-start; margin-inline-end: 14px; margin-block-end: 10px; } .catalog-thumb { width: 34px; height: 34px; object-fit: contain; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 3px; } /* ------------------------------------------------------------------ */ /* Catalog: shop sidebar + dense product table */ /* Layout after the price-comparison interface — sidebar with live */ /* counts, filter toggles, summary line, sticky table head. */ /* ------------------------------------------------------------------ */ .catalog-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--gap); align-items: start; } .catalog-main { min-width: 0; } .catalog-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 6px; position: sticky; top: 150px; max-height: calc(100vh - 170px); overflow: auto; } .catalog-side-head { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-faint); margin: 10px 8px 4px; } .catalog-side-link { display: flex; justify-content: space-between; gap: 8px; align-items: center; width: 100%; text-align: start; font: inherit; font-size: .82rem; font-weight: 600; padding: 6px 8px; border: 0; background: none; color: var(--ink); border-radius: 3px; cursor: pointer; border-block-end: 1px solid var(--line); } .catalog-side-link:hover { background: var(--accent-wash); } .catalog-side-link.is-active { background: var(--accent); color: #fff; } .catalog-side-link.is-active .catalog-side-count { color: #d5eaee; } .catalog-side-all { background: var(--accent-wash); font-weight: 700; } .catalog-side-all.is-active { background: var(--accent); } .catalog-side-count { font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); font-weight: 600; } .catalog-side-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .catalog-side-node { font-weight: 500; font-size: .78rem; } .catalog-side-depth-0 { padding-inline-start: 18px; } .catalog-side-depth-1 { padding-inline-start: 30px; } .catalog-side-depth-2 { padding-inline-start: 42px; } .catalog-toolbar { margin-block-end: 12px; } .catalog-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .catalog-filters .input { width: auto; flex: 1 1 220px; min-width: 180px; } .toggle { font: inherit; font-size: .76rem; font-weight: 600; padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink-soft); cursor: pointer; } .toggle:hover { border-color: var(--accent); color: var(--accent-strong); } .toggle.is-on { background: var(--accent); border-color: var(--accent); color: #fff; } .catalog-summary { margin: 10px 0 2px; font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); } .catalog-table { table-layout: auto; } .catalog-table thead th { position: sticky; top: 118px; z-index: 3; background: var(--surface-sunk); box-shadow: 0 1px 0 var(--line); } .catalog-table td { vertical-align: middle; } .catalog-table .col-idx { width: 40px; text-align: center; } .catalog-table .col-img { width: 54px; } .catalog-table .nm { font-weight: 600; } .catalog-table .bc { font-family: var(--mono); font-size: .74rem; color: var(--ink-soft); } .thumb-empty { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px dashed var(--line-strong); border-radius: 3px; color: var(--ink-faint); font-size: .7rem; } @media (max-width: 900px) { .catalog-layout { grid-template-columns: 1fr; } .catalog-side { position: static; max-height: none; } } .empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-block-start: 14px; }