/* ========================================================================== Kinetiq — Premium RTL design system Palette sampled from the Kinetiq logo. ONE SHEET, TWO PRODUCTS (2026-09-23). It dresses KIVOICE and KICHAT alike and is served to accounts that hold either or both, so it is named for the house. Where a comment below names a product it is because that rule really is about that product, or about its logo file — those names are accurate and stay. ========================================================================== */ :root { /* ═══ THE SUBSTRATE (2026-08-04) ═══════════════════════════════════════════════════ A six-specialist design audit counted what this file ACTUALLY contained rather than what :root claimed: 36 font sizes across 103 declarations with ZERO referencing a token, 30 spacing values across 289 with two, 18 radius values bypassing the three tokens 27 times, and 76 distinct colours under 26 colour tokens — including two "success greens" two hex digits apart doing the same job 525 lines from each other. That is the answer to "לא מסודר" and to "אני לא רואה שהשתנה משהו": nothing lined up between components because nothing shared an increment, and nothing was decisively larger than anything else because five "card title" sizes differed by 0.3px. Neither is fixable by eye. The token blocks below are the fix. --n-* ONE cool neutral ramp. The ground left #EEEEEE — the only fully achromatic grey in the product, which made every cool surface above it read warm. One step of it was EVERY control boundary until 2026-09-19, when the four surfaces a control sits on stopped agreeing and --control-edge became a literal of its own — see the note beside that token. --*-ink The ink weight of a status, separate from its fill. A fill sits under a white glyph at 3:1; a word sits on the page and must clear 4.5:1. Deriving them per component is how two identical greens got into one file. --s1..7 One 4px scale. 1px and 2px are deliberately NOT on it — at that size the value is optical correction, not spacing, and snapping it is a visible misalignment rather than a tidier one. --r One corner for everything with an edge. There were six on a single page. --t-* Seven steps, with the body→title gap widened on purpose. Deduplicating the five title sizes onto ~1rem would have been tidier and invisible. TWO RULES FOR EDITING THIS BLOCK, both learned the hard way on 2026-08-04: 1. A bulk find-and-replace must never run over :root. One did, and left `--ok-ink: var(--ok-ink)` — a self-reference, which CSS treats as guaranteed- invalid, so every status word fell back to inherited grey while the file parsed perfectly and nothing warned. 2. If you stash comments to protect them from a rewrite, restore in a LOOP. A single re.sub pass does not re-scan its own replacements, so comments nested inside a stashed :root came back as literal placeholder text sitting in a declaration block. */ --kq-cyan-rgb: 0, 173, 181; --kq-ink-rgb: 34, 40, 49; --kq-cyan: #00ADB5; --kq-cyan-bright: #1AC4CC; --kq-azure: #0E8F96; --kq-blue: #00ADB5; --kq-blue-600: #0E8F96; --kq-indigo: #222831; --kq-violet: #00ADB5; --grad-brand: linear-gradient(135deg, #00ADB5 0%, #0E8F96 100%); --grad-brand-soft: linear-gradient(135deg, rgba(0,173,181,.13), rgba(0,173,181,.07)); --grad-sidebar: linear-gradient(185deg, #222831 0%, #393E46 100%); --grad-success: linear-gradient(135deg, #18BE66, #4BC140); --grad-violet: linear-gradient(135deg, #1AC4CC, #00ADB5); /* RE-SPACED FOR THE DARK FRAME (2026-09-19). One cool ramp still, moved so the three jobs that have a floor each land on their own step: --n-8 is the muted tier (7.6:1 on paper, 6.6:1 on the flat ground), --n-7 the faint tier (5.4:1 / 4.7:1), and the control boundary lives between --n-6 and --n-7 as it did before. */ --n-0: #FFFFFF; --n-1: #F7F9FB; --n-2: #EDF1F5; --n-3: #E3E8EE; --n-4: #D5DCE4; --n-5: #BFC8D2; --n-6: #8A94A1; --n-7: #616B79; --n-8: #4B5563; --n-9: #333B45; --ink: #12171D; /* SIDEBAR INK. Defaults are the values that used to be hard-coded below, so a dark brand renders byte-identically. BrandTheme overrides them only when the reseller picks a LIGHT secondary, where white text would erase the menu. --sb-veil is an rgb TRIPLE, not a colour: the rail's overlays are rgba() of it. */ --sb-ink: #fff; --sb-ink-2: #c2cad2; /* The rail's group heading is TEXT and needs 4.5:1. It reads --frame-ink-dim now, which is a literal measured against the frame rather than against a gradient that moved under it, so this token has no reader left in the sheet; it stays declared because Web/BrandTheme still emits it and a token a brand block writes must have a home here. */ --sb-ink-dim: color-mix(in srgb, var(--n-5) 60%, var(--n-6)); --sb-veil: 255,255,255; /* The rail's own background, as rgb TRIPLES because the frame is a color-mix OF them: 18% of this colour over #121821. Defaults are the exact values .sidebar used to hard-code (#222831 / #393E46), which is why the reseller's secondary never actually painted the rail: --grad-sidebar was overridden and read by nobody. */ --sb-bg-rgb: 34,40,49; /* The rail gradient's tail. The frame is flat, so no rule reads this any more; it stays declared because Web/BrandTheme still emits it and a token a brand block writes must have a home here. */ --sb-bg2-rgb: 57,62,70; /* ══ THE FRAME («מסגרת כהה», 2026-09-19) ════════════════════════════════════════════════ The rail, the top bar, the user menu and the save bar are ONE continuous deep frame and everything inside it is bright, flat paper. The frame is 18% of the reseller's rail colour over #121821. The percentage is not a taste: it is the largest tint that keeps the DIM tier — the rail's group headings, which are text and need 4.5:1 — above the floor for a near-white brand secondary. Measured at 26% a #F2F2F2 brand lifted the frame to L .044 and the dim tier fell to 3.5:1; at 18% it is 4.52:1 with the ink-2 tier at 6.4:1 and white at 11.5:1, and Kinetiq's own rail sits at 17.3:1 / 9.6:1 / 7.0:1. A brand is allowed to colour the frame. It is not allowed to lighten it. It is read through color-mix on --sb-bg-rgb AT USE TIME, so the reseller's colour still paints the frame whichever block wrote that triple — BrandTheme.StyleBlock() is emitted by _BrandHead AFTER this stylesheet. Everything else in the frame is decided HERE — a literal, or one of the --frame-* names this sheet owns and StyleBlock() never writes — and never an --sb-* token, so a brand block cannot flip the frame's ink to dark on a frame that is always dark. The one other brand token the frame reads is --rail-ink, and that is deliberate: BrandTheme derives it AGAINST the frame, which is the whole of why it may be read here. */ /* THE BASE, NAMED. --frame-bg below keeps the literal INSIDE its color-mix: that exact text is what frame-test.sh's formula check reads and what contrast-test.sh replaces to plant its «the base is lightened» control, so it may not become a var(). This restates the same base for the one other place that has to mix against it — the branding preview's rail, which is a miniature of the frame and was painting the raw brand colour instead. */ --frame-base: #121821; --frame-bg: color-mix(in srgb, rgb(var(--sb-bg-rgb)) 18%, #121821); --frame-ink: #FFFFFF; --frame-ink-2: #B8C2CE; --frame-ink-dim: #9AA6B4; /* THE VEIL — every overlay on the frame is white at an alpha, never a second colour. Two steps and no more: hover and selected. */ --frame-hover: rgba(255, 255, 255, .07); --frame-sel: rgba(255, 255, 255, .11); /* A CONTROL ON THE FRAME IS SUNK, NOT LIFTED — a black veil, where a selected nav item takes a white one. That is the material rule («you operate this» goes down, «you are here» comes up), and it is also the only version that survives a white label: a white-veiled control gets LIGHTER as the brand gets paler, and its dim text fell to 4.15:1 on the account pill under Kinetiq's own frame before this changed. Sunk, the control face is darker than the bar whatever the brand did to the bar, so light ink on it can only improve. The edge is still white, and it is what identifies the control: .45 measures 4.6:1 against the face it encloses and 4.1:1 against the bar around it. At .18 — what a tasteful hairline wants to be — it was 1.40:1, i.e. no boundary at all on the search field and the pill. */ --frame-ctl-bg: rgba(0, 0, 0, .22); --frame-ctl-edge: rgba(255, 255, 255, .45); /* THE FRAME'S OWN STATUS COLOURS AND ITS FOCUS HALO, on :root like every other colour in this sheet. The status tokens above are measured on PAPER and not one of them reads on a near-black bar (--warn-ink is 2.00:1 on the chip's own wash), so the frame carries its own — but they were written as literals ON the element, which put six findings on ds-gate's DS08 against a baseline of one. A NAME is as safe here as a literal: the ORDERING CONTRACT above forbids reading a token Web/BrandTheme re-emits, and it emits none of these, so no brand block can reach them. Measured on the bar (#151B24): the dots 9.93:1 and 10.36:1; the chip's ink 8.27:1 on its own wash and its edge 4.52:1 against the bar. */ --frame-dot-ok: #4ADE80; --frame-dot-warn: #FBBF24; --frame-warn-bg: rgba(217, 130, 7, .20); --frame-warn-edge: rgba(238, 213, 165, .55); --frame-warn-ink: #F6C87A; --frame-focus-halo: 0 0 0 4px rgba(10, 14, 20, .75); --ink-2: var(--n-9); --muted: var(--n-8); --line-strong: var(--n-6); --row-hover: #F2F6FA; --line: #DBE2EA; --line-2: #E3E8EE; --bg: var(--n-1); --card: var(--n-0); --panel: var(--n-0); /* ═══ ACTION vs BRAND (redesign 2026-09-17, A11Y-01 / A11Y-10 / DS-03) ══════════════════ The brand teal is DECORATION: the rail indicator, chart bars, a live dot. White on it is 2.6:1 and it is 2.75:1 as text on white, so it can never carry a word, a button face or a status. Everything the reader acts on reads the action tokens below instead — 5.6:1 for white on the fill, 5.4:1 as link text on the page ground. Web/BrandTheme.StyleBlock() re-emits these tokens for a reseller with the values that reseller has today, so no white label changes colour because of this block. */ /* Deepened one step for the dark frame and given a two-stop fill — the lighter stop is the one that has to hold white text and measures 5.38:1; the flat token under it is 6.0:1 and is what the edge and the hover read, so a gradient is never the thing proving a contrast. */ --kq-btn-bg: #0B6E75; --kq-btn-bg-hover: #07555B; --kq-btn-on: #fff; --kq-btn-fill: linear-gradient(180deg, #0C767D 0%, #0A666C 100%); --kq-link-ink: #0A6B72; --kq-link-hover: #07555B; --kq-action-soft: #E2F2F3; --kq-brand-raw: var(--kq-cyan); --kq-brand-on: #fff; /* THE WORDMARK SQUARE, and the one thing --kq-brand-raw is not allowed to be. The square is the only surface in the product that puts a LETTER on the brand colour, and at 15px in the rail that letter is ordinary text — so it cannot read a token whose whole job is to stay the reseller's exact colour whether or not anything can be read on it. White on the brand teal is 2.75:1; the action pair below is 5.6:1, and Web/BrandTheme replaces it with the reseller's own colour for every brand a letter CAN be read on. The square is never painted for Kinetiq itself — its own mark is an image — so this default is what the guard measures rather than what the product shows. */ --kq-mark-bg: var(--kq-btn-bg); --kq-mark-on: var(--kq-btn-on); --rail-ink: var(--kq-cyan-bright); --link: var(--kq-link-ink); /* STATUS. A FILL (--ok, --warn, --danger) paints bars and dots and needs 3:1; an INK carries a word and needs 4.5:1 on its own background; an EDGE frames a notice or a badge. One triple per meaning, so no component derives its own shade again. Neutral is a status too: zero, paused and "not known" are facts, not alarms. */ /* The inks are re-measured on the flat paper: ok 6.2:1, warn 6.5:1, danger 6.8:1, info 8.0:1, neutral 7.6:1 — every one of them a real body-text contrast, so a status word is as readable as the sentence around it. */ --ok: #17A05A; --warn: #D98207; --danger: #DC2626; --ok-ink: #0A7040; --ok-bg: #E9F7EF; --ok-edge: #B5E2C8; --warn-ink: #8A5100; --warn-bg: #FDF3E3; --warn-edge: #EED5A5; --danger-ink: #B02318; --danger-bg: #FDECEB; --danger-edge: #D9544C; --danger-wash: #FFF8F7; /* A BADGE'S EDGE, one step lighter than the notice's: --danger-edge round a pale tint reads as an alert a single word is not. It is a colour, so it is named here and not written into the badge (ds-gate DS08). */ --danger-edge-soft: #EDB6B1; --danger-strong: #8B1C14; --info-ink: #14528F; --info-bg: #E8EFF9; --info-edge: #B6CCE8; --info: var(--info-ink); --neutral-ink: var(--n-8); --neutral-bg: var(--n-2); --neutral-edge: var(--n-4); /* «יומנים» (2026-10-07): one hue per calendar, by its place in the account's own order — eight, chosen to stay apart from each other and to read as text on a white card. */ --cal-0: #1A73E8; --cal-1: #0B8043; --cal-2: #D9620B; --cal-3: #8E24AA; --cal-4: #C5221F; --cal-5: #A07800; --cal-6: #3F51B5; --cal-7: #00838F; /* ── THE DATA RAMP ────────────────────────────────────────────────────────────────────── Five hues, fixed, assigned BY POSITION and never by meaning — the dashboard's first tile is always teal whatever it counts. Each clears 4.2:1 on white, so a bar, a chip glyph and a 32px figure are all legible in it, and no two neighbours are within 25 degrees of hue. Status keeps its own ramp above: green here would be a promise this ramp cannot keep. */ --dv-1: #0E7C86; --dv-2: #3C5CCC; --dv-3: #B4690E; --dv-4: #A8375A; --dv-5: #4E6076; --dv-1-soft: color-mix(in srgb, var(--dv-1) 13%, var(--n-0)); --dv-2-soft: color-mix(in srgb, var(--dv-2) 12%, var(--n-0)); --dv-3-soft: color-mix(in srgb, var(--dv-3) 14%, var(--n-0)); --dv-4-soft: color-mix(in srgb, var(--dv-4) 12%, var(--n-0)); --dv-5-soft: color-mix(in srgb, var(--dv-5) 13%, var(--n-0)); --shadow-sm: 0 1px 2px rgba(16, 22, 32, .07); --shadow: 0 6px 18px rgba(16, 22, 32, .10); --shadow-lg: 0 20px 48px rgba(10, 14, 20, .30); --shadow-dialog: 0 28px 70px -20px rgba(10, 14, 20, .50); --shadow-drawer: 18px 0 44px -18px rgba(10, 14, 20, .38); --shadow-savebar: 0 -12px 26px -18px rgba(10, 14, 20, .55); --shadow-lift: 0 6px 16px -10px rgba(10, 14, 20, .45); --shadow-pop: 0 14px 34px -12px rgba(10, 14, 20, .30); --knob-shadow: 0 1px 3px rgba(0, 0, 0, .35); --ring: 0 0 0 3px color-mix(in srgb, var(--kq-btn-bg) 26%, transparent); /* the white half of the two-tone focus ring — see the keyboard-focus block at the end */ --focus-halo: 0 0 0 2px var(--n-0); /* A dark scrim that stays dark under every brand: a scrim derived from a light reseller secondary would brighten the page it is meant to push back. */ /* Deeper than the light shell's, because the thing it pushes back is now framed by something dark and needs a harder step to read as behind. Still no blur. */ --scrim: rgba(10, 14, 20, .58); /* THE PAGE GROUND, AND IT IS FLAT (2026-09-19). The three radials are off, not faded: with a dark frame giving the page its structure, a two-hue wash under white cards is the one thing on the screen that says «template». Turning it off also ends the per-pixel contrast argument — muted ink on the ground is 6.62:1 at every point of every page under every brand, where the wash made it a range that had to be re-measured each time a radial moved. The --wash-* tokens are gone with it. Web/BrandTheme still emits --wash-1-rgb/--wash-2-rgb; nothing reads them. */ --ground: #EDF0F4; /* ONE CONTROL BOUNDARY FOR EVERYTHING YOU OPERATE (2026-09-19, «מסגרת כהה»). #7A8593 is the single value that clears 3:1 against all four surfaces a control is ever drawn on: white paper 3.75:1, the sunk field face 3.55:1, the ghost face 3.41:1 and the page ground 3.34:1. It is a literal and not a mix of two ramp steps, because those four numbers are what it has to hold and a derivation moves whenever the ramp under it moves. The ground it is measured against is FLAT now, so there is one number per surface instead of a per-pixel range. The ghost face is its own step as well: --surface-sunk is the field's face, and a ghost button beside a field must not be the same surface as the field. ── --control-edge IS EVERY CONTROL BOUNDARY (2026-09-19) ──────────────────────────────── That fix reached the field and stopped there, and the split it implies was never written down — so the ghost button, the icon button and the agent card's five actions kept drawing themselves with --line and measured 1.24-1.35:1 against their own face. A ghost button's fill is --surface-sunk on a white card: 1.06:1. The frame is not decoration on those controls, it is the ONLY thing that says a control is there, and at 1.3:1 it is not there. So the two neutral edges mean two different things, and nothing may borrow the other's: --control-edge the boundary of something you OPERATE — a field, a select, a ghost or icon button, a card action, a choice card, a quick-link tile, the account button, the month pager. 3:1 minimum, WCAG 1.4.11. --line / --line-2 a RULE BETWEEN THINGS — a divider under a card head, the hairline between two rows, a frame round a group of fields, the edge of a notice or a read-only box. It is not a control, it has no floor, and raising it to 3:1 would box the product in. A hover on a control edge darkens to --n-7: with the resting edge at --n-6, the old hover (--n-5, --line-strong) either lightened it or did nothing at all. */ --control-bg: #F7F9FB; --control-edge: #7A8593; --ghost-bg: #F3F6F9; --premium-ink: #6B4300; --premium-fill: linear-gradient(135deg, #FFE7A0, #F2B63A); /* DENSITY PASS 2026-08-05 (owner: "תקטין לי את כל הדפים בממשק בהתאם להקטנה שביצענו בתפריט"). The rail was tightened first and he asked for the rest of the product to follow it. Done at the TOKENS, not rule by rule: 298 declarations reference these seven values, so a scale change here moves the whole interface at once and keeps it internally consistent — which is the entire reason the substrate was built. Editing paddings screen by screen is how the 30-spacing-value mess it replaced came about in the first place. ~0.85 of the old scale. --s1 stays 4px: it is the atom the others are multiples of, and below 4 a gap stops reading as deliberate and starts reading as a mistake. */ /* 2026-09-19: the 4px atom is kept and the middle of the scale comes in by about a step. This is a console somebody reads for eight hours, and every row recovered is a row they do not scroll for. Rhythm before decoration — 298 declarations read these seven values. */ --s1: 4px; --s2: 6px; --s3: 10px; --s4: 13px; --s5: 18px; --s6: 26px; --s7: 38px; /* ── THE MATERIAL: PAPER AND FLOAT (owner 2026-09-18, «זכוכית מדויקת») ───────────────── Supersedes the 2026-08-05 glass block ("תעשה לי זכוכית, ככה בכל הממשק בכל מקום קומפלט"). Glass is a statement about DEPTH — "this surface is in front of that one". Sampled off a screenshot of the tenant dashboard at 1440x900, the product was making that statement TEN times in one viewport (the rail, the bar, four figure tiles, four cards): 1,632,146 blurred pixels, 81.4% of the page, for about eight surfaces that are not in front of anything. When everything floats, nothing does. So the material splits in two, and the split IS the design: PAPER — everything that sits IN the page: cards, figure tiles, panels, the filter bar, the table, the tenant cards, the phone's call rows. Opaque, one real edge, a short lift, no blur at all. Its fill is --surface-material, which ~40 rules in this file already reference, so they went opaque without being touched. FLOAT — the five surfaces page content genuinely passes under, and no others: .topbar, .kq-savebar, .kq-drawer, .usermenu__panel and .cselect__list. Translucent, with a SHORT blur. The rail is NOT one of them any more: it is opaque at every width, so the blur it used to take as a phone overlay was rastering a layer whose result is hidden by the surface on top of it. The bar, the save bar and the user menu take the FRAME's glass (--frame-float*); the drawer and the select list keep the light one (--float-*), because they belong to the page and not to the tool. Measured after: 1 blurred layer over 3.6% of the dashboard at 1440 (2.0% at 390), 2 over 9.7% of a form with its save bar. Area × blur radius — which is how a Gaussian's cost grows — falls 41× on the dashboard and on the call journal, 76× on a phone dashboard. THE SCRIM DOES NOT GET A BLUR. It is the one place a blur would look dramatic and the one place it would cost a full-viewport raster; --scrim at .48 already pushes the page back, and the thesis here is fewer blurred pixels, not better-placed ones. */ /* #FFFFFF on the #EEF1F5 ground is 1.13:1 — a fill cannot draw its own edge, so the edge has to. --n-5 measured 1.34-1.43:1 against the washed ground under the five brand hues tested and 1.65:1 against the paper itself: visible from BOTH sides. The rgba(255,255,255,.55) it replaces never was — 1.04-1.08:1 against the card's own face, i.e. an edge that existed only on its outside, which is why the shadow had to be 36px tall to find the card at all. No new colour is born here: face, sunk face and edge are all steps of the --n-* ramp. */ /* THE DARK FRAME DOES THE SEPARATING, so the paper can stop shouting: one real edge at 1.41:1 against its own face and 1.24:1 against the ground — visible from both sides — and a shadow short enough to seat the card rather than float it. */ --surface-material: var(--n-0); --surface-sunk: var(--n-1); --surface-edge: #D2DAE3; /* A SHORT LIFT, NOT A HALO. The 36px-radius shadow this replaces was re-rasterised on every repaint, nine times over on one dashboard. With a real edge the shadow only has to seat the panel, so it comes down to 8px. --surface-seat is the strip form: five tiles in a row are one strip, not five objects, and a drop under each one made the row read as a pile. */ --surface-lift: 0 1px 2px rgba(16, 22, 32, .05), 0 6px 14px -10px rgba(16, 22, 32, .24); --surface-seat: 0 1px 2px rgba(16, 22, 32, .05); /* THE BAND BEHIND THE COLUMN NAMES IS THE FRAME (2026-09-19). The densest object in the product gets a hard top edge the eye can return to from row 25, and it is the same colour as the rail and the bar, so the journal reads as part of the tool rather than as a box that happens to be on the page. It stays a token because forced-colors has to replace it and because the callbacks group band (.cbk-group-head) is the same strip. THIS TOKEN CREATED THE CALLBACKS DEFECT, and an earlier note in this place said the opposite. .cbk-group-head fills with the band and its heading and its count went on writing the PAGE's inks on what had become the frame — 1.53:1 and 2.29:1, measured on painted pixels. Repointing --tbl-head-band here is what did that; the callbacks screen had not changed. Both inks moved to the frame's tiers on 2026-09-19 (:4918 and :4922), which are the same two tiers the column names take at :947 and :953. */ --tbl-head-band: var(--frame-bg); /* 90% for the light float and 92% for the frame's, and both are floors rather than averages: the number is chosen against the LIGHTEST thing that can pass under the surface, so every other thing that passes under it only improves the contrast. blur(10px) rather than 18px: 10px is already past the point where type behind a bar stops being readable as type, and a Gaussian's cost grows with its radius. saturate(1.2) rather than 1.6: 1.6 amplified whatever hue the reseller chose, so the more saturated the brand the more colour the surface took. */ /* TWO MATERIALS NOW, NOT ONE. --float-* stays LIGHT: the cselect list and the browser-call drawer are content and must not go dark. --frame-float-* is the chrome's own glass, and its opacity is set by the worst case rather than by taste: at 92% a white card scrolling under the top bar lifts it to #282E34, where white still reads 13.7:1 and the dim tier 6.5:1. Anything darker under the bar only raises those numbers, so 92% is a floor, not an average — which the light bar it replaces could never say. */ --float-bg: color-mix(in srgb, var(--n-0) 90%, transparent); --float-bg-strong: color-mix(in srgb, var(--n-0) 94%, transparent); --float-blur: saturate(1.2) blur(10px); --frame-float: color-mix(in srgb, var(--frame-bg) 92%, transparent); --frame-float-strong: color-mix(in srgb, var(--frame-bg) 97%, transparent); /* THE ONE EDGE THAT CATCHES LIGHT: an inset hairline along the side the light comes from, the top. The top bar does not take it — its top edge is the viewport's, so that line is a row of pixels nobody sees — and gets a defined bottom hairline and --float-drop instead, which is the edge it actually has to prove against whatever is scrolling under it. */ --float-shine: inset 0 1px 0 rgba(255, 255, 255, .9); --float-drop: 0 6px 16px -10px rgba(10, 14, 20, .40); --r: 8px; --r-card: 12px; --r-pill: 999px; --r-circle: 50%; --radius: var(--r); --radius-sm: var(--r); --radius-xs: var(--r); /* Body holds at 14px — Hebrew loses legibility faster than Latin and this is the size the owner reads all day. What moves (2026-09-19) is the DISTANCE between steps: the page title goes 21.6→23px and a figure 31.2→32px, while the card title comes 17→16px and takes 700 instead. Hierarchy is carried by weight and colour first, size second; five title sizes 0.3px apart is what made the old screens read flat, not the sizes themselves. NOT a duration — see the SHELL-V01 note further down; the motion token is --dur-base. */ --t-xs: .6875rem; --t-sm: .75rem; --t-md: .8125rem; --t-base: .875rem; --t-lg: 1rem; --t-xl: 1.4375rem; --t-2xl: 2rem; --sidebar-w: 240px; --kq-x: 1; /* DURATIONS ARE NOT SIZES. The 200ms token used to be called --t-base, which is also the name of the .89rem body step above — the second declaration won, so every `font-size: var(--t-base)` in the file was invalid and silently inherited its parent's size (SHELL-V01). Motion now has its own prefix. */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --e-out: cubic-bezier(.22, .61, .36, 1); --e-in: cubic-bezier(.55, 0, .68, .53); --e-standard: cubic-bezier(.4, 0, .2, 1); /* the sticky save bar's height, so a field focused near the bottom scrolls clear of it */ --kq-savebar-h: 58px; } /* ── THE TWO ESCAPES ──────────────────────────────────────────────────────────────────────── Each must produce the OPAQUE version of THIS design, not a leftover of the previous one. Paper needs no branch — it is already opaque, and the rail is opaque at every width now — so only the float surfaces are restated, and they are restated as tokens so no rule is written twice. The chrome's own glass (--frame-float*) falls back to the flat frame; the content glass falls back to paper. The ground needs no branch either: it has no wash left to turn off. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --frame-float: var(--frame-bg); --frame-float-strong: var(--frame-bg); --float-bg: var(--surface-material); --float-bg-strong: var(--surface-material); --float-blur: none; } } /* A reader who asked the system for less transparency gets no translucent surface anywhere. */ @media (prefers-reduced-transparency: reduce) { :root { --frame-float: var(--frame-bg); --frame-float-strong: var(--frame-bg); --float-bg: var(--surface-material); --float-bg-strong: var(--surface-material); --float-blur: none; } } /* THE REDUCED-MOTION GUARD. Nothing in this stylesheet honoured prefers-reduced-motion — the only such rule anywhere was inside vendored bootstrap. For a person who has asked their operating system to stop moving things, an interface that animates anyway is not a style choice, it is a symptom trigger. Motion is reduced to a hair rather than removed: a 0.01ms transition still fires its transitionend, so anything waiting on that event keeps working, and a state change still reads as a change rather than a jump-cut. */ @media (prefers-reduced-motion: reduce) { /* NOT the blanket `transition-duration: .01ms` reset. That kills the safe half too — an opacity fade carries no motion and is exactly what should survive — and it turns every state change into a jump-cut, which removes the causality cue the animation was there to give. Instead: keep the colour and opacity transitions, drop the travel. */ *, *::before, *::after { transition-property: opacity, color, background-color, border-color, box-shadow, outline-color, fill, stroke !important; animation-duration: var(--dur-fast) !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } /* the handful of places that displace an element on hover or press — decoration, so it goes */ .btn:hover, .btn:active, .card:hover, .nav__link:hover, .stat:hover, .tool-item:hover { transform: none !important; } /* The frame's own hover is a colour change, so it survives the guard intact and a reader who asked for stillness still sees the rail answer the pointer. */ .kq-fig, .card, .btn { transition-property: opacity, color, background-color, border-color, box-shadow !important; } } [dir="rtl"] { --kq-x: -1; } /* ========================================================================== Page transitions ========================================================================== */ /* Clicking a rail item blinks the whole window white today — the navy rail, the logo and the top bar all disappear and come back byte-identical. Pinning the shell with a view-transition-name and giving its group a 0s duration makes it HOLD STILL across a real HTTP navigation, so only the content cross-fades. Pure CSS: `script-src 'self'` never sees it, and browsers without support just navigate the way they do now. The exit is one step shorter than the enter and opacity-only — on the way out the user has already decided, and every millisecond of outro is dead time they paid for. */ @view-transition { navigation: auto; } .sidebar { view-transition-name: kq-rail; } .topbar { view-transition-name: kq-topbar; } ::view-transition-group(kq-rail), ::view-transition-group(kq-topbar) { animation-duration: 0s; } ::view-transition-old(root) { animation: kq-vt-out 90ms var(--e-in) both; } ::view-transition-new(root) { animation: kq-vt-in 180ms var(--e-out) both; } @keyframes kq-vt-out { to { opacity: 0; } } @keyframes kq-vt-in { from { opacity: 0; translate: 0 6px; } } /* Travel is the vestibular trigger, opacity is not — keep the fade, null the movement. The global reduced-motion block whitelists transition-property only; a keyframe still travels, so it has to be said again here. */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-fast); translate: none; } } /* The top bar is sticky, and nothing set scroll-padding — so every #anchor, every scrollIntoView and every focus() after a validation failure landed the target UNDERNEATH 73px of frosted white. The user sees the ring vanish and assumes focus was lost. */ /* AUTHORITATIVE, NOT OBSERVED. This was a measurement of what the topbar happened to come out to, and the density pass of 2026-08-05 made it 61px while this still said 73 — so the bot editor's sticky header, which pins itself to this number, floated 12px below the bar with a band of page content scrolling through the gap. The topbar now TAKES its height from this token, so the number cannot drift from the thing it describes again. */ :root { --kq-topbar-h: 58px; } /* ONE HEIGHT FOR EVERY CONTROL IN THE TOP BAR (SHELL-30, owner 2026-09-18). The account chip, the platform search and the user pill were each sized by their own padding — 31px, 37px and 40px, three nested pill sizes on one row — and the pill had no height of its own at all, so the tallest thing in a 61px bar was whatever the current user's name happened to do: 40px, 54.55px or 67.59px for the same rule with three different names, the last of them painting 3.8px above the viewport and 2.8px over the page below. The number is the bar's content box less a hair: --kq-topbar-h minus its padding-block and its hairline is 58 − 10 − 10 − 1 = 37, and the control stands one pixel inside it. Raise one and the other follows, which is what the two blocks below do. */ :root { --kq-bar-ctl-h: 36px; } /* THE BAR'S CONTROLS GO BACK TO 40px ON A PHONE — the hamburger, the folded search and the user pill are three neighbours at one size — and the bar's height follows them. This block must sit AFTER the two :root declarations above (same specificity, source order decides) and BEFORE the coarse-pointer block at the foot of this file, which raises both again for a thumb. */ @media (max-width: 820px) { :root { --kq-bar-ctl-h: 40px; --kq-topbar-h: 62px; } } html { scroll-padding-block-start: calc(var(--kq-topbar-h) + 12px); } * { box-sizing: border-box; } /* ═══ TYPEFACES — SELF-HOSTED (owner chose this 2026-08-04) ════════════════════════════ Was Heebo + Rubik off Google Fonts. Two problems, one of them not cosmetic: 1. That pair is the default free Google Hebrew pairing — the Hebrew equivalent of Inter + Poppins, what every template and every generated mockup ships — and the market research named it the single loudest "AI-made" tell in the product. 2. Typography was the ONLY system in this application still loading from a third party, while everything else runs under script-src 'self'. Two preconnects and a stylesheet link on every page, to a host we do not control, that can see every visitor. ASSISTANT for text (owner chose it 2026-08-05 from a live five-way specimen). It is the face most serious Israeli products set their interfaces in, and the reason is the reason he picked it: even colour and generous counters make it legible at 13px without asking to be noticed. "לא מקצועי מספיק" in a dense admin UI is nearly always a request for a QUIETER face, not a more characterful one. ASSISTANT IS THE ONLY FACE IN THE PRODUCT, digits included (owner 2026-08-05). IBM Plex Mono carried the figures until then; see the note at the @font-face block for what that cost and why he took it. OFL. ONE VARIABLE FILE PER SUBSET, not four static weights: Assistant ships variable, so 400 through 700 come from 7KB of Hebrew instead of four separate downloads. Two files total. Hebrew and Latin are separate files by unicode-range so a browser fetches only what the page actually contains: the Hebrew subset is 7KB for every weight. font-display:swap, because a console that is unreadable for 200ms is worse than one that reflows once. */ @font-face { font-family: "Assistant"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("/fonts/assistant-he.woff2") format("woff2"); unicode-range: U+0590-05FF, U+200F, U+FB1D-FB4F; } @font-face { font-family: "Assistant"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("/fonts/assistant-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AA, U+20AC, U+2122, U+2212; } /* THE FIGURES FACE IS GONE (owner 2026-08-05: "שגם הפונט של המספרים בכל הממשק יהיה ASSISTANT"). IBM Plex Mono used to carry every digit so that columns of timestamps and durations aligned. Assistant has NO tabular figures — measured on the live journal, its "1" is 9.02px against "0" at 9.84px, and font-variant-numeric changes nothing because the font ships no `tnum` feature. Those columns are now slightly ragged, and that is a trade the owner made knowingly in exchange for one typeface across the whole interface. The tabular-nums declarations are deliberately LEFT IN PLACE: they cost nothing, they document the intent, and they start working the day a face that supports them is chosen. */ html { -webkit-text-size-adjust: 100%; } /* FORM CONTROLS DO NOT INHERIT TYPE. Browsers set their own family on button/input/select, so a control that misses .btn or .control renders in Arial while the page around it is Assistant — and several did: the icon buttons and the user menu. Found by listing every distinct first font-family on a live page rather than by reading the sheet, because the sheet looked right. Declared once, on the elements, so no future control can be born without it. */ button, input, select, textarea, optgroup { font: inherit; } body { margin: 0; font-family: "Assistant", "Segoe UI", system-ui, -apple-system, sans-serif; /* FLAT GROUND, ONE COLOUR. The dark frame gives the page its structure, so the wash it used to carry is gone — see the --ground note in :root for what that buys. */ background: var(--ground); color: var(--ink); font-size: 14px; line-height: 1.55; /* NOT antialiased. It thins strokes, and Hebrew recognition depends on stroke weight far more than Latin does — there are no ascenders and descenders to identify a letter by. */ text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, .display { font-family: "Assistant", sans-serif; color: var(--ink); font-weight: 700; /* no negative tracking: Hebrew has no optical gaps to close and tightening shears the letterforms */ margin: 0 0 .4em; } a { color: var(--link); text-decoration: none; } /* --kq-indigo is the reseller's SECONDARY, which may be light — a hover that makes the link disappear. The hover is the action ink one step darker instead. */ @media (hover: hover) { a:hover { color: var(--kq-link-hover); } } .muted { color: var(--muted); } .text-center { text-align: center; } .small { font-size: var(--t-sm); } /* ========================================================================== App shell ========================================================================== */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); /* THE RAIL IS PART OF THE FRAME, AND IT IS OPAQUE AT EVERY WIDTH. Flat, not a gradient: the frame is one continuous colour from the rail through the top bar to the save bar, and a gradient down the rail is that seam showing. Every value here is a LITERAL and never an --sb-* token, so a brand block emitted after this sheet cannot flip the frame's ink to dark on a frame that is always dark. */ background: var(--frame-bg); border-inline-start: 0; /* the seam that faces the work — the only edge of the rail anyone ever sees */ border-inline-end: 1px solid rgba(255, 255, 255, .07); color: var(--frame-ink-2); position: fixed; inset-block: 0; inset-inline-start: 0; /* RTL: right edge */ display: flex; flex-direction: column; z-index: 40; /* no lift on a desktop: the rail is flush against the viewport and has nothing to lift off. The ≤820px block gives it one, where it really is an overlay. */ box-shadow: none; } /* A STATED HEIGHT (SHELL-30), and it is the top bar's own: the rail's head and the bar beside it are one line across the top of the frame. The block had none and the rail's logo cap had been removed, so the first row of the menu — and with it the top of every item below — sat at a different height for every tenant: 55.89px with the KIVOICE logo, 71px with a reseller wordmark that wrapped, 175px with a square logo, which pushed the first nav item 118.72px down a rail that was densified precisely to avoid a scrollbar. */ .sidebar__brand { display: flex; align-items: center; justify-content: center; block-size: var(--kq-topbar-h); flex: none; padding-block: 0; padding-inline: var(--s4); border-bottom: 1px solid rgba(255, 255, 255, .09); } .sidebar__logo { width: 150px; max-width: 100%; max-height: 40px; height: auto; display: block; margin: 0 auto; } /* IMPERSONATION (a platform owner or a reseller acting inside a customer account). OPAQUE AND LIGHT, not a tint over the rail (A11Y-02). A translucent orange wash took whatever the rail was underneath it, so on a reseller with a light secondary the white customer name sat on near-white and vanished — the one line on the screen that says whose data you are editing. On its own warm ground every word clears 4.5:1 whatever the rail colour is. */ .imp-banner { margin: var(--s3) var(--s3) var(--s1); padding: var(--s3); background: var(--warn-bg); border: 1px solid var(--warn-edge); border-inline-start: 4px solid var(--warn-ink); border-radius: var(--r); } .imp-banner__label { display: flex; align-items: center; gap: var(--s2); color: var(--warn-ink); font-size: var(--t-xs); font-weight: 600; } .imp-banner__label svg { width: 15px; height: 15px; } .imp-banner__tenant { color: var(--ink-2); font-size: var(--t-xs); margin-top: var(--s2); } /* ONE LINE, then cut, with the full name on the element's title. It used to take two lines when the customer's name was long, which moved the banner from 127.86px to 144.94px and every nav item under it with it — the rail's whole rhythm decided by a string a customer typed. */ .imp-banner__name { color: var(--ink); font-weight: 700; font-size: var(--t-base); line-height: 1.2; min-inline-size: 0; overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .imp-banner__exit { display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; min-block-size: var(--kq-bar-ctl-h); margin-top: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--radius-xs); cursor: pointer; background: var(--n-0); color: var(--warn-ink); border: 1px solid var(--warn-edge); font: inherit; font-weight: 600; font-size: var(--t-md); transition: background var(--dur-fast) var(--e-standard); } @media (hover: hover) { .imp-banner__exit:hover { background: var(--warn-bg); } } .imp-banner__exit svg { width: 16px; height: 16px; } /* RAIL DENSITY (owner 2026-08-05: "שהכפתורים בתפריט הראשי יהיו פחות גדולים שיכנסו יותר כפתורים בלי שיפתח SCROLL"). Each row was 12px padding + a 20px icon + 12px = 44px, plus a 4px gap — 48px per item. Ten items plus the brand block and the scope card overflowed a laptop viewport, so the last items in the rail were reachable only by scrolling a menu, which is the one thing a menu is supposed to save you from. Now 34px per row on a 2px gap: 36px per item, a quarter off, and the whole rail fits. Density is not the opposite of professional here — it is what dense admin products look like; what read as unprofessional was a navigation that ran out of room. */ .nav { padding: var(--s2) var(--s2) var(--s4); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .nav__section { color: var(--frame-ink-dim); font-size: var(--t-xs); font-weight: 600; padding: var(--s4) var(--s3) var(--s2); } .nav__link { display: flex; align-items: center; gap: var(--s2); min-block-size: 34px; padding: var(--s2) var(--s3); border-radius: var(--r); color: var(--frame-ink-2); font-size: var(--t-md); font-weight: 500; transition: background-color var(--dur-fast) var(--e-standard), color var(--dur-fast) var(--e-standard), border-color var(--dur-fast) var(--e-standard); position: relative; } .nav__link svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .78; } /* the row is 35px and nothing in it may change that: the two items that carry a trailing element were 37.22px, a 2.22px step in a list whose gap is 2px. No label clips at 244px today, but nothing guarded it either, so a longer one would have moved the row instead of cutting. */ .nav__link > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* THE SELECTED ITEM IS A FILLED PILL AND A BAR, not a bar alone. On a flat frame a 3px accent with no field behind it is the only thing marking the row, and at rail density that is 3px of colour against 240px of dark; the pill is what the eye finds, the bar is what names the edge. */ .nav__link.active { background: var(--frame-sel); color: var(--frame-ink); font-weight: 600; box-shadow: none; } .nav__link.active svg { opacity: 1; color: var(--rail-ink); } /* THE INDICATOR SITS ON THE EDGE THAT FACES THE WORK, not on the rail's outer edge. The rail is flush against the viewport, so a bar at inset-inline-start is a stripe of colour along the side of the screen — it reads as a rendering artefact rather than as a mark, and an overscroll clips it. On the inner edge it sits on the seam the eye crosses to get back to the menu. */ .nav__link.active::before { content: ""; position: absolute; inset-inline-start: auto; inset-inline-end: 0; top: 5px; bottom: 5px; width: 3px; border-radius: var(--r) 0 0 var(--r); background: var(--rail-ink); } .sidebar__foot { margin-top: auto; padding: var(--s2); border-top: 1px solid rgba(255, 255, 255, .09); } .main { flex: 1; min-width: 0; margin-inline-start: var(--sidebar-w); display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); height: var(--kq-topbar-h); box-sizing: border-box; padding: var(--s3) var(--s5); /* DARK GLASS, and part of the frame. What passes under it is unknown — a white card, the ground, the one dark code panel — so the opacity is chosen against the LIGHTEST of those and the bottom hairline is the edge it has to prove: white at .12 measures 2.0:1 against the bar and, over a white card, the bar itself is 3.9:1 against the page below. The light bar this replaces proved its edge at 1.65:1 and only against a surface it happened to be over. No shine: an inset line along the top edge of a bar whose top edge IS the viewport's paints a row of pixels nobody sees. A short drop instead, so the bar has a below. */ background: var(--frame-float); -webkit-backdrop-filter: var(--float-blur); backdrop-filter: var(--float-blur); border-bottom: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--float-drop); color: var(--frame-ink); } /* THE BAR'S TITLE SLOT, ONE RULE (SHELL-30). The

a page opts into with KqTopbarHeading and the

phones get are the same slot in the same place, and they used to render at two sizes: at 768px the paragraph was 16.96px and the h1 14.24px, because the phone block overrode one and not the other. They also carried two separate copies of the ellipsis rule. One rule now, so the first page that opts the h1 in cannot inherit a mismatch. The groups themselves (.topbar__start / .topbar__end) are owned by the SHELL section at the foot of this file — they are shell markup, and a second copy here silently lost to it. */ .topbar__start > h1, .topbar__title { margin: 0; min-inline-size: 0; font-size: var(--t-base); font-weight: 600; line-height: 1.3; color: var(--frame-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .content { padding: var(--s5) var(--s6) var(--s7); max-width: 1240px; width: 100%; } /* USER MENU The pill is a fixed-height control (--kq-bar-ctl-h) with two single lines in it. Before SHELL-30 it had no height and no wrapping guard outside the phone block: «בר יחזקאל» broke across two lines and «בעל פלטפורמה» across two more — `overflow-wrap: anywhere` let the name break between any two letters and the role had no `white-space`, so the column collapsed to the min-content of its longest word and the pill grew to 67.59px inside a 40px content box. It stays one line now and cuts with an ellipsis; the full text is still in the DOM, so the button's accessible name and its tooltip both carry it whole. */ .usermenu { position: relative; flex: none; } .usermenu__btn { display: flex; align-items: center; gap: var(--s2); block-size: var(--kq-bar-ctl-h); max-inline-size: 16rem; background: var(--frame-ctl-bg); border: 1px solid var(--frame-ctl-edge); color: var(--frame-ink); border-radius: var(--r-pill); padding-block: 0; padding-inline: var(--s2) var(--s3); cursor: pointer; transition: background-color var(--dur-fast) var(--e-standard), color var(--dur-fast) var(--e-standard), border-color var(--dur-fast) var(--e-standard); } @media (hover: hover) { .usermenu__btn:hover { background: rgba(0, 0, 0, .34); border-color: rgba(255, 255, 255, .62); box-shadow: none; } } .usermenu__btn .who { display: flex; flex-direction: column; text-align: start; line-height: 1.2; min-inline-size: 0; } .usermenu__btn .who .n, .usermenu__btn .who .r { min-inline-size: 0; overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .usermenu__btn .who .n { font-weight: 600; font-size: var(--t-md); color: var(--frame-ink); } .usermenu__btn .who .r { font-size: var(--t-xs); color: var(--frame-ink-dim); } /* the chevron is 16px like the account chip's glyph beside it (approved Topbar board); without `flex: none` it was the first thing the squeeze took and rendered 18.73px, then 14.70px, then 24px on three screens — the same glyph at three sizes, set by the length of a person's name */ .usermenu__btn > svg { flex: none; inline-size: 16px; block-size: 16px; color: var(--frame-ink-dim); } /* Anchored to the BAR, not to the button: at `top: calc(100% + 8px)` the panel moved down with every extra line the name took, and in the healthy state it opened 7px ABOVE the bar's bottom edge, with the hairline running across its top. The containing block starts at the bar's padding edge, so the bar's height less that padding lands the panel on the edge, plus s2. */ .usermenu__panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(var(--kq-topbar-h) - var(--s3) + var(--s2)); /* THE MENU THAT HANGS OFF THE BAR IS PART OF THE FRAME. It is chrome — it commands the tool, not the page — so it takes the frame's own glass rather than the light float the cselect list and the call drawer keep. A pop-over is opened OVER whatever was there and nothing reflows for it, so the blur is what keeps a list of commands off the text behind it. No --float-shine: a white inset hairline on a dark panel is the light material showing. */ background: var(--frame-float-strong); -webkit-backdrop-filter: var(--float-blur); backdrop-filter: var(--float-blur); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-card); box-shadow: var(--shadow-lg); inline-size: 15rem; min-inline-size: 0; padding: var(--s2); display: none; } .usermenu.open .usermenu__panel { display: block; } .usermenu__panel a, .usermenu__panel button { display: flex; align-items: center; gap: var(--s2); width: 100%; min-block-size: 34px; padding: var(--s2) var(--s3); border-radius: var(--r); background: none; border: 0; cursor: pointer; color: var(--frame-ink-2); font: inherit; text-align: start; } /* the only 24px icons in the product were in here — 18px is the step .nav__link and .btn use */ .usermenu__panel a svg, .usermenu__panel button svg { flex: none; inline-size: 18px; block-size: 18px; color: var(--frame-ink-dim); } .usermenu__sep { height: 1px; background: rgba(255, 255, 255, .12); margin: var(--s1) var(--s1); } /* avatar */ .avatar { width: 38px; height: 38px; border-radius: var(--r-circle); display: inline-flex; align-items: center; justify-content: center; background: var(--kq-btn-fill); color: var(--kq-btn-on); font-weight: 700; font-size: var(--t-md); font-family: "Assistant", sans-serif; flex: 0 0 auto; box-shadow: none; } .avatar.lg { width: 52px; height: 52px; font-size: var(--t-lg); } .avatar.sm { width: 30px; height: 30px; font-size: var(--t-xs); } /* ========================================================================== Cards, stats ========================================================================== */ /* PAPER. The page's main surface: opaque, one real edge, the full (short) lift. It is the one panel a reader looks THROUGH nothing to read, and it carries the densest text in the product, so it is the surface that gains most from being brand-invariant — #FFFFFF under every reseller hue, body ink 17.67:1 and muted 6.67:1, where the 68% version drifted to #F5F7FC…#FAF6FB and 6.17-6.36:1 depending on which colour the customer picked. */ .card { background: var(--surface-material); border: 1px solid var(--surface-edge); border-radius: var(--r-card); box-shadow: var(--surface-lift); } .card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); } .card__head h2, .card__head h3 { margin: 0; font-size: var(--t-lg); font-weight: 700; display: inline-flex; align-items: center; gap: var(--s2); } .card__head h2 svg, .card__head h3 svg { flex: 0 0 auto; } /* The head's glyph: 17px in the faint ink. Eight screen sections below restate it at 18px at a higher specificity and win wherever they apply — that was already true before this language was merged in, and it is left alone rather than silently changed. The eighth, the call page's `.call-sec__h`, was BELOW this rule at (0,1,1) until 2026-09-19 and lost to it. */ .card__head h2 > svg, .card__head h3 > svg { width: 17px; height: 17px; color: var(--n-7); } .card__body { padding: var(--s5); } .card__body.tight { padding: 0; } /* A card whose body is a table clips to its own radius, so the dark column-name rule is the top of the card rather than a rectangle sitting inside a rounded one. Scoped by :has so nothing with a dropdown in it — an agent card's number picker — is ever given overflow. */ .card:has(> .card__body.tight), .card.cl-card, .card:has(> .table-wrap) { overflow: hidden; } .grid { display: grid; gap: var(--s4); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } /* A row of figure tiles is a STRIP, not a row of objects: with an opaque face and a real edge the drop under each one is what made the row read as a pile, so it comes down to the seat. */ .stat { background: var(--surface-material); border: 1px solid var(--surface-edge); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--surface-seat); position: relative; overflow: hidden; } .stat__icon { width: 46px; height: 46px; border-radius: var(--r); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s3); } .stat__icon svg { width: 24px; height: 24px; } /* one fill for every variant: white on the brand teal was 2.6:1, and the colour names were never a meaning a reader could act on */ .stat__icon, .stat__icon.blue, .stat__icon.green, .stat__icon.orange, .stat__icon.cyan { background: var(--kq-btn-fill); color: var(--kq-btn-on); } .stat__value { font-family: "Assistant", sans-serif; font-size: var(--t-2xl); font-weight: 700; line-height: 1; } .stat__label { color: var(--muted); font-size: var(--t-md); margin-top: var(--s1); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font: inherit; font-weight: 600; font-size: var(--t-md); min-block-size: 34px; padding: var(--s2) var(--s4); border-radius: var(--r); border: 1px solid transparent; cursor: pointer; position: relative; /* box-shadow is deliberately NOT in this list. Its blur radius is re-rasterised every frame and cannot be composited, so a hover over a toolbar of buttons repaints the whole strip; the shadow moved to the ::after layer below, where only opacity moves. `translate` rather than `transform` so the press composes with anything else. */ transition: translate var(--dur-fast) var(--e-standard), background var(--dur-fast) var(--e-standard), border-color var(--dur-fast) var(--e-standard), color var(--dur-fast) var(--e-standard); white-space: nowrap; text-decoration: none; } /* Down at 0ms, back up over --dur-fast. A transitioned press-down reads as lag on the one interaction where latency is most obvious — every save button in the product. */ .btn:active { transition-duration: 0ms; translate: 0 1px; } .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) linear; } /* A neutral lift, never a brand-coloured glow: a teal halo under a reseller's violet button was Kinetiq showing through the white label. */ .btn-primary::after { box-shadow: var(--shadow-lift); } .btn svg { width: 17px; height: 17px; } /* THE ACTION PAIR (A11Y-01). The face reads --kq-btn-fill (a flat colour for Kinetiq, the reseller's own gradient through the bridge); the edge and the hover read the solid tokens, so a gradient never has to be the thing that proves the contrast. */ .btn-primary { background: var(--kq-btn-fill); color: var(--kq-btn-on); border-color: var(--kq-btn-bg); box-shadow: var(--shadow-sm); } /* A GHOST BUTTON IS A BUTTON, and its frame is the only thing that says so: the fill is --surface-sunk, 1.06:1 against the white card it sits on. On --line it measured 1.31:1 against its own face — a control whose boundary has to be guessed (A11Y / WCAG 1.4.11). */ .btn-ghost { background: var(--ghost-bg); border-color: var(--control-edge); color: var(--ink-2); } /* DEPRECATED — kept so no screen loses its styling before the screens move to .btn-ghost. A frame in the status ink, never a filled green button: a fill says "the main action here". */ .btn-success { background: var(--ghost-bg); border-color: var(--ok-ink); color: var(--ok-ink); } /* Consequential actions. Framed, never subtle (SHELL-21): the old #f3c9c9 edge was 1.4:1 and the button read as plain text. The FILLED variant is the confirm button of a danger dialog only. */ .btn-danger { background: var(--n-0); border-color: var(--danger-edge); color: var(--danger-ink); } .btn-danger-solid { background: var(--danger-ink); border-color: var(--danger-ink); color: var(--n-0); } /* DEPRECATED, like .btn-success: the ink carries the word and the frame, both at 4.5:1+. */ .btn-warn { background: var(--n-0); border-color: var(--warn-ink); color: var(--warn-ink); } .btn-sm { min-block-size: 28px; padding: var(--s1) var(--s3); font-size: var(--t-sm); border-radius: var(--r); } .btn-block { width: 100%; } /* aria-disabled too: a control that must stay focusable so its reason can be read. A BUSY button is also aria-disabled (kq-feedback) and keeps full strength — it is working, not refused. */ .btn[disabled], .btn[aria-disabled="true"]:not([aria-busy="true"]) { opacity: .55; cursor: not-allowed; } .btn-lg { min-block-size: 42px; padding: var(--s3) var(--s5); font-size: var(--t-base); } /* CENTRING IS NOT INHERITED FROM .btn. Every icon button in the product is `class="btn-icon"` WITHOUT `btn` — so the `display:inline-flex; align-items:center; justify-content:center` that .btn declares never reached any of them. The glyph sat wherever the default inline flow put it: baseline-aligned, and nudged off-centre by the descender space under it. Invisible on the 34px desktop button, obvious on the 40px hamburger (owner 2026-08-06: "לא ממוקם באמצע"). Declared here rather than by adding `btn` to every call site: this is what the class is for, and a markup fix would have to be repeated on each of them and remembered on the next one. */ .btn-icon { width: 34px; height: 34px; padding: 0; border-radius: var(--r); /* An icon button carries no word, so the box IS the control: on --line it was a 1.35:1 frame round a glyph, which reads as an icon printed on the page rather than a thing to press. */ background: var(--n-0); border: 1px solid var(--control-edge); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; } .btn-icon > svg { display: block; } .topbar .btn-icon { background: var(--frame-ctl-bg); border-color: var(--frame-ctl-edge); color: var(--frame-ink); width: var(--kq-bar-ctl-h); height: var(--kq-bar-ctl-h); } /* ========================================================================== Tables ========================================================================== */ .table-wrap { overflow-x: auto; } table.tbl { width: 100%; border-collapse: collapse; } /* THE COLUMN NAMES SIT ON THE FRAME. That is this language's one structural move on the content side: the densest object in the product gets a hard top edge the eye can return to from row 25, and it is the same colour as the rail and the bar, so the journal reads as part of the tool rather than as a box that happens to be on the page. Contrast on the band: the names at --frame-ink-2 measure 9.4:1 and a sort link's hover at white 17.3:1 — both far past what a grey band could give at any tone light enough to sit under black text. Scoped to `> thead > tr > th` and not to `th`: below 820px .is-cardable hides the thead and every value carries its own column name, so the band must not be able to follow the names into the cards. */ table.tbl > thead > tr > th { /* through the token, not a second copy of its value: the token is what the forced-colours branch and the phone card layout both have to be able to take away */ background: var(--tbl-head-band); color: var(--frame-ink-2); font-size: var(--t-sm); font-weight: 600; padding: 9px var(--s4); border-bottom: 0; white-space: nowrap; } table.tbl > thead > tr > th a, table.tbl > thead > tr > th .cl-sort { color: var(--frame-ink-2); } table.tbl > thead > tr > th a svg { opacity: .55; } table.tbl > thead > tr > th .cl-sort.is-sorted { color: var(--frame-ink); } table.tbl > thead > tr > th .cl-sort.is-sorted svg { opacity: 1; color: var(--rail-ink); } table.tbl th { text-align: start; font-size: var(--t-sm); color: var(--n-8); font-weight: 500; padding: var(--s2) var(--s4) var(--s3); border-bottom: 1px solid var(--n-5); white-space: nowrap; } /* Sort-link headers (call journal) look exactly like every other th — muted, not link-teal (owner screenshot 2026-07-22); the accent appears only on hover / the active sort arrow. */ table.tbl th a { color: var(--muted); text-decoration: none; } @media (hover: hover) { table.tbl th a:hover { color: var(--kq-link-hover); } } /* 36px rows: 7px of lead, 13px text at 1.6 and a hairline. That is four more rows per 900px of viewport than the 10px padding it replaces — on a journal somebody reads all day, four rows is a scroll they do not make. The coarse-pointer block at the foot of this file puts the room back where a finger needs it. */ table.tbl td { padding: 7px var(--s4); vertical-align: middle; } /* The row separator is drawn on the ROW, not on each cell. A cell that is itself a flex container (.row-actions) is pulled out of table-cell layout, so it sizes to its own content instead of the row — its cell border then landed above the neighbouring cells' and the separator looked stepped whenever another cell was taller (a role