/* ========================================================================== site.css — "Pure light": the design system of סגני (the personal assistant). Shared by every page. Each area adds its own file, linked by ui.page(): public.css (landing, sign-in, phone verification) · app.css (the customer's /my) · admin.css (owner pages). Mobile first (390px), excellent at 1280px. RTL: use logical properties (inline-start = right). Readability: body 17px, secondary text >= 14px, mock-UI text >= 12px; the grey second line of a heading (.soft) only at display sizes (>= 24px). On a computer the customer's and the owner's pages are denser (section 21): body 15px, secondary text >= 13px. Light for old PCs: no backdrop blur, no blur stacks. Decorative loops stop after a few runs. ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root { /* Color */ --bg: #ffffff; --bg-subtle: #f7f8fa; --bg-sunken: #f1f3f6; --surface: #ffffff; --ink: #0b0d12; --ink-2: #2c323d; --muted: #5d6471; /* 5.9:1 on white */ --soft: #848c9a; /* 3.4:1: ONLY for display text >= 24px */ --line: #e8eaef; --line-strong: #d6dae2; --control: #8a92a1; /* borders of inputs and checkboxes: 3:1 on white */ --control-hover: #5d6471; --accent: #1f5bff; /* 5.3:1 with white text */ --accent-hover: #1449e6; --accent-ink: #1645d1; /* accent text on white or on --accent-soft */ --accent-soft: #eef3ff; --accent-tint: #d9e4ff; --danger: #e5373b; --danger-ink: #b8211f; --danger-soft: #fff0ef; --success: #16a34a; --success-ink: #0f7a3a; --success-soft: #eaf8ef; --warning: #d97706; --warning-ink: #9a5a00; --warning-soft: #fff5e1; /* Type */ --font-sans: "Noto Sans Hebrew", "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-tech: "IBM Plex Sans Hebrew", "Noto Sans Hebrew", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --fs-mock: .75rem; /* 12px: text inside illustrations (phone mock, step art) only */ --fs-xs: .875rem; /* 14px: smallest real text (meta, badges, captions) */ --fs-sm: .9375rem; /* 15px: help text, secondary lines */ --fs-base: 1rem; /* 16px: inputs, buttons */ --fs-md: 1.0625rem; /* 17px: body */ --fs-lg: 1.1875rem; /* 19px: lead */ --fs-h3: 1.25rem; --fs-xl: 1.5rem; --fs-h1: clamp(2rem, 1.55rem + 1.9vw, 2.875rem); --fs-h2: clamp(2.125rem, 1.5rem + 2.6vw, 3.375rem); --fs-display: clamp(3rem, 1.55rem + 6.2vw, 6.75rem); /* Radius */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-full: 999px; /* Shadow: a hairline ring plus soft layered depth */ --ring: 0 0 0 1px rgba(15, 23, 42, .07); --shadow-1: 0 0 0 1px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .05); --shadow-2: 0 0 0 1px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px -8px rgba(15, 23, 42, .12); --shadow-3: 0 0 0 1px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04), 0 18px 36px -14px rgba(15, 23, 42, .18), 0 50px 100px -30px rgba(15, 23, 42, .20); --shadow-accent: 0 1px 2px rgba(22, 69, 209, .35), 0 10px 24px -10px rgba(31, 91, 255, .75); --focus-ring: 0 0 0 4px rgba(31, 91, 255, .2); /* Space */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 136px; --gutter: 16px; --maxw: 1160px; --header-h: 64px; /* Motion */ --ease: cubic-bezier(.2, .8, .2, 1); } @media (min-width: 720px) { :root { --gutter: 32px; } } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); } /* A link to a field ("לתיקון", #OWNER_NAME) scrolls so that the label above it stays visible too */ input, select, textarea { scroll-margin-top: 40px; } /* The admin header is two rows on phones and tablets (brand + tools, then the tabs) */ @media (max-width: 899px) { html:has(> body.area-admin) { scroll-padding-top: 132px; } } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-md); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } body > main { flex: 1 0 auto; } .area-app, .area-admin { background: var(--bg-subtle); } h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; } h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; } h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; } h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.35; } h4 { font-size: var(--fs-md); font-weight: 700; line-height: 1.4; } p + p { margin-top: .75em; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg { max-width: 100%; } b, strong { font-weight: 700; } [hidden] { display: none !important; } ::selection { background: var(--accent-tint); } /* Text links are underlined so they never depend on colour alone. Components (.btn, nav, .chip, .brand) opt out. */ a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(22, 69, 209, .35); } a:hover { text-decoration-color: currentColor; } /* Focus: an outline (not a box-shadow), so it survives forced-colors mode */ :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } /* The title of a page reached in place gets the focus (site.js), for the next Tab and for screen readers: no ring */ h1[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; } /* ---------- 3. Layout helpers ---------- */ .container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; } .container.mid { --maxw: 960px; } .container.narrow { --maxw: 640px; } .page { padding-block: var(--s-5) var(--s-8); } @media (min-width: 1024px) { .page { padding-top: var(--s-6); } } .section { padding-block: 80px; position: relative; } @media (min-width: 1024px) { .section { padding-block: 120px; } } .stack { display: flex; flex-direction: column; gap: var(--s-4); } .stack-sm { display: flex; flex-direction: column; gap: var(--s-2); } .stack-lg { display: flex; flex-direction: column; gap: var(--s-6); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-4); } .grid > .card { margin-bottom: 0; } .grid-2 { display: grid; gap: var(--s-4); } @media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; align-items: start; } } .spacer { flex: 1; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 599px) { .collapse-sm { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } .skip-link { position: absolute; inset-inline-start: 16px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; transition: top .2s var(--ease); } .skip-link:focus { top: 12px; } /* Numbers, phone numbers and dialing codes never break and never flip */ .ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; } .ltr-wrap { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; } /* long LTR text: e-mails, URLs (never numbers) */ input.ltr, textarea.ltr { text-align: right; } .num { font-family: var(--font-tech); font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } @media (min-width: 720px) { .nowrap-wide { white-space: nowrap; } } /* keeps a phrase together where it fits (a heading's first sentence) */ .muted { color: var(--muted); } .center { text-align: center; } /* ---------- 4. Typography ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-tech); font-size: var(--fs-xs); font-weight: 600; color: var(--accent-ink); letter-spacing: .01em; } .eyebrow .icon { width: 16px; height: 16px; } .display { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.04em; line-height: 1; text-wrap: balance; } .display .line { display: block; } .display .accent, .title .accent { color: var(--accent); } .title { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.032em; line-height: 1.06; text-wrap: balance; } /* The grey second line of a heading. Only inside display-size headings (.display, .title, .page-head h1) */ .display .soft, .title .soft, .page-head h1 .soft { color: var(--soft); display: block; } .lead { font-size: clamp(1.125rem, 1rem + .55vw, 1.375rem); line-height: 1.6; color: var(--muted); max-width: 46ch; text-wrap: balance; } .lead strong { color: var(--ink); font-weight: 600; } .sub { color: var(--muted); font-size: var(--fs-md); margin: 6px 0 var(--s-5); } .section-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; margin: var(--s-7) 0 var(--s-4); } .help { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; } .help + .help { margin-top: 6px; } .small { font-size: var(--fs-xs); } .error-text { color: var(--danger-ink); font-weight: 600; font-size: var(--fs-sm); } .error-text:empty { display: none; } /* ---------- 5. Icons ---------- */ .icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; } .icon.sm { width: 16px; height: 16px; } .icon.lg { width: 24px; height: 24px; } .icon.ok { color: var(--success); } .icon.warn { color: var(--warning); } .icon.bad { color: var(--danger); } .icon.accent { color: var(--accent); } .tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); } .tile .icon { width: 20px; height: 20px; } .tile.danger { background: var(--danger-soft); color: var(--danger); } .tile.ok { background: var(--success-soft); color: var(--success-ink); } .tile.warn { background: var(--warning-soft); color: var(--warning-ink); } .tile.ink { background: var(--ink); color: #fff; } .brand-mark { width: 30px; height: 30px; flex: none; } /* ---------- 6. Header (all areas) ---------- */ /* A page loaded as usual (another part of the site): a quick, quiet cross-fade instead of a white flash (in browsers that can), and the parts that are the same on every page (the header; in the customer's site also the side column and the menu at the bottom) stay in place. Most moves are in place (site.js), and they change the page at once, with no cross-fade, like tabs in one page. Not with "reduce motion" (below). */ @view-transition { navigation: auto; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .15s; } .site-header { view-transition-name: site-header; } /* Moving in place (site.js): a thin line at the top while the next page takes more than a moment, and a short message when a form could not be sent (at the top too, where a phone's keyboard does not hide it) */ .nav-progress { position: fixed; top: 0; inset-inline: 0; z-index: 300; height: 3px; background: var(--accent); pointer-events: none; transform-origin: right center; transform: scaleX(0); opacity: 0; } .nav-progress.is-on { opacity: 1; transform: scaleX(.9); transition: transform 8s cubic-bezier(.05, .75, .2, 1); } .nav-progress.is-done { opacity: 0; transform: scaleX(1); transition: transform .2s ease-out, opacity .25s .15s; } .nav-notice { position: fixed; z-index: 300; inset-inline: 16px; top: calc(12px + env(safe-area-inset-top)); max-width: 440px; margin-inline: auto; padding: 12px 16px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-weight: 600; text-align: center; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); } .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); border-bottom: 1px solid rgba(15, 23, 42, .07); } .site-header .bar { min-height: var(--header-h); display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-5); } @media (max-width: 399px) { .site-header .bar { column-gap: 12px; } } @media (max-width: 359px) { .site-header .brand-tag { display: none; } } @media (max-width: 899px) { .area-admin .site-header .bar { padding-top: 8px; } } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; white-space: nowrap; color: var(--ink); text-decoration: none; border-radius: 8px; } .brand .brand-mark { filter: drop-shadow(0 2px 4px rgba(31, 91, 255, .28)); } .brand-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-full); background: var(--bg-sunken); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; line-height: 1; } .header-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2); } .header-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: var(--r-full); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; } .header-link:hover { background: var(--bg-sunken); color: var(--ink); } .header-link .icon { width: 18px; height: 18px; } /* Public: page anchors, shown from 1024px (the CTA button stays visible on phones) */ .site-nav { display: none; align-items: center; gap: 2px; margin-inline-start: auto; } .site-nav a { padding: 8px 14px; border-radius: var(--r-full); color: var(--muted); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: color .2s, background-color .2s; } .site-nav a:hover { color: var(--ink); background: var(--bg-sunken); } .site-nav + .header-end { margin-inline-start: 0; } @media (min-width: 1024px) { .site-nav { display: flex; } } /* Admin: a segmented nav. Phones: its own full-width row under the brand. Desktop: inline. */ .app-nav { order: 3; flex-basis: 100%; display: flex; gap: 2px; padding: 4px; margin-bottom: 10px; border-radius: var(--r-full); background: var(--bg-sunken); } .app-nav a { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 12px; border-radius: var(--r-full); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; } .app-nav a .icon { width: 17px; height: 17px; } .app-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .7); } .app-nav a[aria-current="page"] { background: var(--ink); color: #fff; } .app-nav .nav-short { display: none; } @media (max-width: 559px) { /* four items in one row: the short names, and no icons under 480px */ .app-nav .nav-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .app-nav .nav-short { display: inline; } } @media (max-width: 479px) { .app-nav a { padding: 0 8px; } .app-nav a .icon { display: none; } } @media (min-width: 900px) { .app-nav { order: 0; flex-basis: auto; margin-bottom: 0; } .app-nav a { flex: none; padding: 0 16px; } } /* Customer: who is signed in */ .user { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); } .user-name { display: none; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 600px) { .user-name { display: inline; } } .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 1rem; line-height: 1; background: var(--accent-soft); color: var(--accent-ink); } .avatar .icon { width: 20px; height: 20px; } .avatar.urgent { background: var(--danger-soft); color: var(--danger-ink); } .avatar.out { background: var(--accent); color: #fff; } /* a call the assistant made */ .avatar.sm { width: 32px; height: 32px; font-size: .875rem; } .user .avatar { width: 32px; height: 32px; font-size: .875rem; background: linear-gradient(160deg, #3d74ff, #1645d1); color: #fff; box-shadow: 0 2px 6px -2px rgba(31, 91, 255, .5); } /* ---------- 7. Footer ---------- */ .site-footer { margin-top: auto; border-top: 1px solid var(--line); background: var(--bg); padding-block: var(--s-6) var(--s-7); font-size: var(--fs-xs); color: var(--muted); } .area-app .site-footer, .area-admin .site-footer { background: transparent; } .footer-row { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .footer-row .brand { font-size: .95rem; } .footer-row .brand-mark { width: 24px; height: 24px; } .footer-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .site-footer a { color: var(--ink-2); text-decoration-color: var(--line-strong); } .site-footer a:hover { color: var(--accent-ink); } .footer-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; } .footer-link .icon { width: 16px; height: 16px; } .footer-contact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .footer-contact > .icon { width: 16px; height: 16px; color: var(--accent); } .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; } @media (min-width: 720px) { .footer-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .footer-end { margin-inline-start: auto; } } /* ---------- 8. Page head (title area of app and admin pages) ---------- */ .page-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); } .page-head h1 { margin-top: 4px; overflow-wrap: anywhere; } /* a customer's name may be one long token (an e-mail): it wraps, the page never scrolls sideways */ .page-head .sub { margin: 8px 0 0; max-width: 62ch; } .page-head-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } @media (min-width: 1024px) { .page-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-bottom: var(--s-6); } } .back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink); text-decoration: none; } /* Text links that are tap targets on their own line: at least 44px tall (an older audience) */ .footer-nav a, .admin-link { display: inline-flex; align-items: center; min-height: 44px; } .back-link .icon { width: 16px; height: 16px; } .back-link:hover { text-decoration: underline; } /* A heading over a block of a page (messages, settings):

…

…
*/ .block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--s-4); } .block-head h2 { font-size: 1.5rem; letter-spacing: -.025em; } .block-head .count { font-family: var(--font-tech); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; } .block-head.stacked { display: grid; gap: 6px; margin-bottom: var(--s-5); } .block-head.stacked p { max-width: 62ch; font-size: var(--fs-base); color: var(--muted); } /* ---------- 9. Buttons ---------- */ .btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h); padding: 6px 22px; max-width: 100%; border-radius: var(--r-full); border: 0; font: inherit; font-size: var(--fs-base); font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--shadow-accent); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s var(--ease), color .2s var(--ease); } .btn:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.985); } .btn .icon { width: 18px; height: 18px; } .btn .arrow { transition: transform .3s var(--ease); } .btn:hover .arrow { transform: translateX(-4px); } .btn.secondary { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); } .btn.secondary:hover { background: #fff; color: var(--ink); box-shadow: var(--shadow-2); } .btn.quiet { background: transparent; color: var(--ink-2); box-shadow: none; } .btn.quiet:hover { background: var(--bg-sunken); color: var(--ink); transform: none; } .btn.danger { background: var(--danger-ink); color: #fff; box-shadow: 0 1px 2px rgba(184, 33, 31, .3); } .btn.danger:hover { background: #9a1a18; } .btn.danger-quiet { background: #fff; color: var(--danger-ink); box-shadow: 0 0 0 1px rgba(184, 33, 31, .35); } .btn.danger-quiet:hover { background: var(--danger-soft); color: var(--danger-ink); } .btn.sm, .btn.small { --h: 44px; padding: 4px 16px; font-size: var(--fs-sm); } .btn.lg { --h: 56px; padding: 8px 30px; font-size: var(--fs-md); } .btn.block { width: 100%; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; } /* A button whose form is on its way (site.js): a spinner in place of its icon, and it is not pressed again */ .btn.is-busy { opacity: .92; cursor: progress; pointer-events: none; } .btn.is-busy > .icon { display: none; } .btn-spin { display: inline-block; flex: none; width: 1.15em; height: 1.15em; border-radius: 50%; border: 2.4px solid currentColor; border-inline-end-color: transparent; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(1turn); } } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); } .row-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: var(--s-3); font-weight: 600; font-size: var(--fs-sm); } .row-actions a { display: inline-flex; align-items: center; gap: 6px; } /* ---------- 10. Forms ---------- */ .field { display: grid; gap: 8px; margin: 0 0 22px; min-width: 0; } .field:last-child { margin-bottom: 0; } .field > label, .field > .label, fieldset.field > legend { font-weight: 600; font-size: var(--fs-base); color: var(--ink); line-height: 1.4; } .field .optional { font-weight: 400; color: var(--muted); font-size: var(--fs-sm); } fieldset.field { border: 0; padding: 0; } fieldset.field > legend { padding: 0; margin-bottom: 8px; float: none; } fieldset.field > legend + * { margin-top: 0; } input[type=text], input[type=tel], input[type=email], input[type=number], input[type=password], input[type=url], input[type=search], input:not([type]), select, textarea { width: 100%; min-height: 48px; margin: 0; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--control); background: #fff; color: var(--ink); font: inherit; font-size: var(--fs-base); line-height: 1.45; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } input:hover, select:hover, textarea:hover { border-color: var(--control-hover); } input:focus, select:focus, textarea:focus { outline: 2px solid transparent; border-color: var(--accent); box-shadow: var(--focus-ring); } input[readonly], textarea[readonly] { background: var(--bg-subtle); color: var(--ink-2); } input[type=number] { max-width: 160px; } input::placeholder, textarea::placeholder { color: #697080; opacity: 1; } /* 4.96:1 on white, 4.67:1 on --bg-subtle */ input.ltr, input[type=tel] { direction: ltr; text-align: right; font-family: var(--font-tech); letter-spacing: .02em; } textarea { min-height: 128px; resize: vertical; line-height: 1.6; } select { appearance: none; -webkit-appearance: none; padding-inline-end: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6471' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: left 14px center; } [aria-invalid="true"] { border-color: var(--danger-ink) !important; background-color: #fffafa; } [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(229, 55, 59, .18); } .field-error { display: flex; align-items: flex-start; gap: 8px; color: var(--danger-ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; } .field-error .icon { width: 18px; height: 18px; margin-top: 2px; } .ta-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .counter { flex: none; font-family: var(--font-tech); font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .counter.is-near { color: var(--warning-ink); font-weight: 600; } /* Radio "choice cards":
…
… */ .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px; } .choices.stacked { grid-template-columns: 1fr; } .choice { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; font-weight: 600; font-size: var(--fs-base); line-height: 1.4; transition: border-color .2s, background-color .2s, box-shadow .2s; } .choice:hover { border-color: var(--control); } .choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } .choice:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 2px; } .choice b { display: block; font-weight: 600; } .choice small { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); } input[type=radio] { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 50%; border: 1.5px solid var(--control-hover); background: #fff; cursor: pointer; transition: border-width .2s var(--ease), border-color .2s; } input[type=radio]:checked { border: 6px solid var(--accent); } input[type=radio]:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; } /* Checkbox row: */ .check { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; cursor: pointer; line-height: 1.45; } input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 7px; border: 1.5px solid var(--control-hover); background: #fff center / 16px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; } input[type=checkbox]:checked { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.5 17 4 11.5'/%3E%3C/svg%3E"); } input[type=checkbox]:indeterminate { background-color: var(--accent); border-color: var(--accent); /* some of a list chosen */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); } input[type=checkbox]:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; } /* A read-only value with a copy button (admin URLs) */ .copy-field { display: flex; gap: 8px; align-items: center; } .copy-field input { flex: 1; min-width: 0; font-size: var(--fs-sm); } /* Two columns from 900px (fields side by side, or a field and its explanation) */ .split { display: grid; gap: 22px; } .split > * { min-width: 0; } .split > .field { margin-bottom: 0; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .split > .help { align-self: end; padding-bottom: 13px; } /* a short note beside a field: level with its input */ } /* "צור קשר": the form (a public page, or inside the customer's pages), and what is shown once it was sent */ .contact-us-head { margin-bottom: var(--s-5); } .contact-us-head h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); letter-spacing: -.03em; } .contact-us-head .lead { margin-top: var(--s-2); } .contact-us-lead { margin: 0 0 var(--s-4); color: var(--ink-2); line-height: 1.6; } .contact-us-form { padding: 24px 20px; } .contact-us-form .split { margin-bottom: 8px; } .contact-us-form .reach-help { margin: 0 0 22px; } .contact-us-form textarea { min-height: 150px; } .contact-us-done { display: grid; justify-items: center; gap: 10px; padding: 36px 20px; text-align: center; } .contact-us-done > .icon { width: 44px; height: 44px; color: var(--success-ink); } .contact-us-done h2 { margin: 0; font-size: 1.375rem; } .contact-us-done p { margin: 0 0 6px; color: var(--ink-2); line-height: 1.6; } .contact-us-other { margin: 0; text-align: center; font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; } @media (min-width: 600px) { .contact-us-form { padding: 32px; } } /* A field that people never see (it is off the screen, and hidden from screen readers and Tab): only robots fill it in, and then the message is not sent */ .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* An indented group of fields that belongs to the one above */ .sub-field { border-inline-start: 3px solid var(--accent-tint); padding-inline-start: 14px; } /* The save button at the end of a settings form (/my, admin settings and customer) */ .savebar { display: flex; flex-direction: column; align-items: stretch; margin-top: var(--s-4); } .savebar .btn { --h: 56px; font-size: var(--fs-md); } .savebar .btn .icon { width: 20px; height: 20px; stroke-width: 2.2; } @media (min-width: 600px) { .savebar { flex-direction: row; align-items: center; } .savebar .btn { min-width: 240px; padding-inline: 36px; } } /* Phones and tablets (where admin settings has no side index with its own save button): a panel that sticks to the bottom of the screen while its form is in view. Still a plain submit button. */ @media (max-width: 1099px) { .savebar { position: sticky; bottom: 0; z-index: 20; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-radius: var(--r-lg); background: linear-gradient(180deg, #f5f8ff, #fff); box-shadow: 0 0 0 1px var(--accent-tint), var(--shadow-2); } html:has(.savebar) { scroll-padding-bottom: 96px; } /* a field reached with Tab is not hidden under it */ } /* Live "how callers will hear the greeting" preview, under the name fields */ .preview { padding: 14px 16px; border-radius: var(--r-md); background: linear-gradient(180deg, #f5f8ff, #fff); box-shadow: inset 0 0 0 1px var(--accent-tint); } .preview-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); margin-bottom: 8px; } .preview-label .icon { width: 16px; height: 16px; color: var(--accent); } .preview .bubble { max-width: 100%; } .preview-note { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); } /* ---------- 11. Cards ---------- */ .card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--s-5) 20px; margin-bottom: var(--s-4); min-width: 0; } .card > h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 var(--s-4); } .card.flat { box-shadow: var(--shadow-1); } .card.subtle { background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--line); } .card.accent { box-shadow: 0 0 0 1.5px var(--accent), 0 2px 4px rgba(15, 23, 42, .04), 0 24px 48px -20px rgba(31, 91, 255, .35); } .card-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-5); } .card-head > div { min-width: 0; } .card-head h2, .card-head h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.35; } .card-head p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin-top: 2px; } .card-head .end { margin-inline-start: auto; } @media (min-width: 720px) { .card { padding: 28px; } } .set-grid { display: grid; gap: var(--s-3); } .set-grid > .card { margin-bottom: 0; } @media (min-width: 900px) { .set-grid { grid-template-columns: 1fr 1fr; align-items: start; } .set-grid > .wide { grid-column: 1 / -1; } } /* Floating cards (illustrations): white, deep shadow, no blur */ .float { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-3); text-align: start; } /* Key/value list:
…
…
…
*/ .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); font-size: var(--fs-sm); } .kv dt, .kv dd { padding: 9px 0; border-top: 1px solid var(--line); } .kv dt { color: var(--muted); padding-inline-end: 16px; white-space: nowrap; } .kv dd { font-weight: 500; text-align: end; min-width: 0; } /* ---------- 12. Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); } .stat { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 20px; display: grid; align-content: start; min-width: 0; } .stat .label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); } .stat .label .icon { width: 16px; height: 16px; color: var(--accent); } .stat .value { font-family: var(--font-tech); font-size: clamp(1.5rem, 7vw, 2.25rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; margin-top: 10px; font-variant-numeric: tabular-nums; overflow-wrap: normal; white-space: nowrap; unicode-bidi: isolate; } /* a number never breaks in the middle */ .stat .value.sm { font-size: 1.25rem; letter-spacing: -.01em; } .stat .hint { font-size: var(--fs-xs); color: var(--muted); margin-top: 8px; line-height: 1.45; } @media (min-width: 1024px) { .stat { padding: 24px; } .stat .value { font-size: 2.75rem; } .stat .value.sm { font-size: 1.375rem; } } /* ---------- 13. Badges, dots, chips, code pills ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 11px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; white-space: nowrap; background: var(--bg-sunken); color: var(--ink-2); } .badge .icon { width: 14px; height: 14px; stroke-width: 2.2; } .badge.urgent, .badge.bad { background: var(--danger-soft); color: var(--danger-ink); } .badge.live, .badge.ok { background: var(--success-soft); color: var(--success-ink); } .badge.info, .badge.transfer, .badge.out { background: var(--accent-soft); color: var(--accent-ink); } .badge.pending, .badge.warn { background: var(--warning-soft); color: var(--warning-ink); } .badge.away { background: #f0eefc; color: #4b3fb0; } /* a call outside the answering hours (hours.py) */ .badge.solid { background: var(--accent); color: #fff; } .badges { display: flex; flex-wrap: wrap; gap: 6px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; position: relative; } .dot.live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: ping 2s var(--ease) 6; } @keyframes ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.8); opacity: 0; } } /* A call that goes on (ui.live_badge): three small bars that move like a voice */ .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; } .eq i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: 50% 100%; transform: scaleY(.7); } .eq i:nth-child(2) { transform: scaleY(1); } .eq i:nth-child(3) { transform: scaleY(.5); } @media (prefers-reduced-motion: no-preference) { .eq i { animation: eq .9s ease-in-out infinite alternate; } .eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; } .icon.ring { transform-origin: 50% 55%; animation: ring-phone 1.4s ease-in-out infinite; } } @keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } } @keyframes ring-phone { 0%, 45%, 100% { transform: rotate(0); } 8%, 24% { transform: rotate(-14deg); } 16%, 32% { transform: rotate(14deg); } } /* Filter chips (links):
… */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-4); } .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 16px; border-radius: var(--r-full); background: #fff; box-shadow: var(--shadow-1); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: background-color .2s, color .2s, box-shadow .2s; } .chip:hover { color: var(--ink); box-shadow: var(--shadow-2); } .chip.active, .chip[aria-current] { background: var(--ink); color: #fff; box-shadow: none; } /* Dialing codes and other tech strings: LTR, never wraps */ .code, code.line { font-family: var(--font-tech); font-weight: 600; font-size: .95em; color: var(--ink); background: var(--bg-sunken); padding: 1px 8px; border-radius: 6px; direction: ltr; unicode-bidi: isolate; white-space: nowrap; } code { font-family: var(--font-tech); } pre { margin: 8px 0 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--line); font: 500 .875rem/1.6 var(--font-mono); direction: ltr; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); } /* Forwarding codes:
  • …**61*…#…