/* NOTE: shell chrome + login colors ONLY. This file defines no chart/data colors — the platform emerald ramp lives in powerleads/frontend/src/styles/color-tokens.css. ONE deliberate borrow: the status tokens at the end of this file take the emerald and the CRM amber for kit chips that say whether a connection is alive; they are status semantics, never chart or identity colour. Full color index: ARCHITECTURE-MAP.md §9. */ .power-suite-portal-body { background: #ffffff; margin: 0 !important; overflow: hidden; } .power-suite-admin-wrap { margin: 0; padding: 0; } .power-suite-admin-wrap .power-suite-shell { inset: 0; position: fixed; z-index: 100000; } /** * The palette. * * The single source of every colour in the Suite. Nothing outside this block * may state a colour: a component references a shade, or a token that resolves * to one. * * Several tokens defined further down are already aliases of this scale and * are noted as such. They are kept rather than replaced so nothing that * renders today changes. */ :root { --transparent: transparent; --full-white: #fff; /* Neutral */ --shade-00: #2d2f34; --shade-05: #3f434a; /* = --pl-text-color */ --shade-10: #5e646e; --shade-20: #6a707c; --shade-30: #9da3af; --shade-40: #d8dadf; --shade-45: #ecedef; --shade-50: #f1f2f4; /* = --pl-border-color */ --shade-60: #f6f7f9; /* = --pl-surface-muted, --pl-shell-sidebar */ --shade-100: #fdfdfd; --alpha-shade-40: #65789f3d; --alpha-shade-45: #78849b1f; --alpha-shade-50: #68769214; /* = --pl-shell-selected */ --alpha-shade-55: #686f7d0f; --alpha-shade-60: #686f7d0a; /* Blue */ --blue-00: #1c3254; --blue-10: #0d3c82; --blue-15: #0e43a4; --blue-20: #0a4ecd; --blue-30: #1668e3; --blue-35: #2e77e5; --blue-40: #4588ed; --blue-45: #74a6f1; --blue-50: #a3c4f5; --blue-60: #c8dbf9; --blue-70: #e8f0fd; --alpha-blue-10: #1668e37a; --alpha-blue-20: #1668e366; --alpha-blue-30: #1668e352; --alpha-blue-40: #1668e33d; --alpha-blue-45: #1668e31f; --alpha-blue-50: #1668e314; /* Purple */ --purple-00: #323562; --purple-10: #383c85; --purple-15: #3e43a3; --purple-20: #4b51c3; --purple-30: #5f65d3; --purple-35: #6b70d6; --purple-40: #7b80db; --purple-45: #979be2; --purple-50: #b3b6ea; --purple-60: #d4d6f2; --purple-70: #e8e9f8; --alpha-purple-10: #6b70d67a; --alpha-purple-20: #6b70d666; --alpha-purple-30: #6b70d652; --alpha-purple-40: #6b70d63d; --alpha-purple-45: #6b70d61f; --alpha-purple-50: #6b70d614; } /** * The sign-in screen. * * Colours a customer may rebrand are exposed here; the ones the Settings * application writes (--ps-login-image, --ps-login-wash, --ps-login-orb-*) * arrive as inline custom properties on and override these defaults. */ :root { /* The field behind everything — G1 Dusk, see docs/design/preview-login-g1.html */ --ps-login-base: #2a1a3e; --ps-login-field: none; /* G1's five blobs, on screen blending over the plum ground. */ --ps-login-blob-1: #c2417a; --ps-login-blob-2: #5b3fd6; --ps-login-blob-3: #e8724b; --ps-login-blob-4: #2f6fe0; --ps-login-blob-5: #f0a63c; /* Frosted glass. Saturation BELOW 100%: glass scatters light and desaturates what is behind it. Raising it turns glass into tint. */ /* * The card no longer lifts what is behind it, it sinks it. The form sits * directly on the field with white text and hairline rules instead of * filled wells, so the backdrop has to recede far enough to carry that * contrast on its own. Brightness below 100% is doing the work the input * wells used to do. * * 62% read as black and lost the field entirely; 82% read as a grey veil * with the field barely visible. 72% is the landing point between them. */ --ps-login-blur: 44px; --ps-login-desaturate: 80%; --ps-login-lift: 100%; /* * The CARD's glass, held apart from the board's above because the two are * not one material: the board is a near-opaque panel that happens to have a * blurred backdrop, the card is a pane you look through. Sharing one set of * numbers is what forced every change to the card to also disturb the board. * * Chosen from a four-way comparison rendered over a hard-edged spectrum * (A current, B faint border, C these values, D both). The border was the * suspect going in; B ruled it out, changing nothing. C is the pick. * * blur 44px over a field whose smallest feature is already blurred * 60px is a blur of a blur — a full-screen GPU pass that * changes nothing the eye can read. 28px softens the rake in * login.css without erasing it. * * saturate This reverses the rule in login.css's header, deliberately. * That rule is right for glass scattering light REFLECTED off a * surface; this field is five blurred lamps, and glass in front * of a light source concentrates colour rather than draining * it. At 80% the pane read as grey fog. */ --ps-login-card-blur: 28px; --ps-login-card-saturate: 85%; --ps-login-card-lift: 100%; /* * The rake's band — see .ps-login-rake in login.css. * * COOL, and not white, which is the whole trick. The card amplifies chroma * and white has none, so a white band is the one thing a saturating glass * cannot pick up: it stayed invisible through the card while showing on the * open field, the exact opposite of what it is for. Against a magenta field * a cool band is the furthest thing from the backdrop in hue, so the card * concentrates it hardest while it stays a whisper outside. */ --ps-login-rake-band: #6fd8ff17; /* G1's glass: a milky card with clearly translucent field wells inside it. Matching the card and the wells made the fields disappear. */ /* * The board is OPAQUE, and deliberately so. * * The reference (docs/design/preview-three.html) paints the board as white * at 95%/86% — but over a near-black ground, #16121e. Composited, that is * not white: it is grey. Our field is bright plum, so the same declaration * composites to #fdfdfd and the board reads as a white rectangle, which is * why the frosted panel, its edge and the ball's 50/50 split all vanished. * * These two values ARE the reference, resolved: * #ffffff @ 242/255 over rgb(22,18,30) -> rgb(243,243,244) * #ffffff @ 219/255 over rgb(22,18,30) -> rgb(222,222,223) * Stating the result rather than the recipe makes the board render exactly * as the reference regardless of what the field behind it is doing. */ --ps-login-board-top: #ffffff73; --ps-login-board-bottom: #ffffff59; /* The board's own shadow. The reference's is shallower than the card's. */ --ps-login-board-shadow: 0 24px 60px #0a041480; /* * The form's glass. At 77%/66% white this was a near-solid panel with a * blur behind it doing nothing visible — the field could not be seen * moving through it, which is the entire point of putting it on glass. * At 45%/35% the field reads through clearly and stays legible, because * the heavy blur and the desaturation below carry the contrast instead of * opacity doing all the work. * * Lowered again from 18%/12% to 14%/7% alongside the card optics above: * once the pane actually refracts, its own white film is what mutes the * colour it has just concentrated. These two are card-only. */ --ps-login-glass-top: #ffffff24; --ps-login-glass-bottom: #ffffff12; /* Still drawn by .ps-login-board, which is a light panel and needs its edge. The card no longer draws one at all. */ --ps-login-glass-edge: #ffffff38; /* * The card's edge, separate from the board's above. The board is a light * panel and needs a bright rim to sit off the field; the card is a pane, * and a bright outline is what makes a pane read as a drawn rectangle * rather than as glass. */ --ps-login-card-edge: #ffffff38; /* * The field is a rule, not a well. A filled input needs an edge to separate * it from the card; an underlined one needs only the rule, and the * placeholder carries the label. */ --ps-login-field-rule: #ffffffb3; --ps-login-field-rule-active: #ffffff; --ps-login-field-text: #ffffff; --ps-login-field-placeholder: #ffffffdb; --ps-login-field-height: 44px; --ps-login-field-gap: 22px; --ps-login-field-size: 15px; --ps-login-field-transition: 160ms ease; /* Text that sits on the darkened card rather than in a well. */ --ps-login-on-glass: #ffffffe6; --ps-login-on-glass-strong: #ffffff; /* * The heading carries the card. Everything else on it is ExtraLight, so * the heading gains presence from size, not from weight — 300 against the * body's 200 is one step, which is the whole contrast the card needs. */ --ps-login-heading-size: 38px; --ps-login-heading-size-sm: 36px; --ps-login-heading-size-xs: 26px; --ps-login-heading-weight: 300; /* * The submit is the one solid object on the card, so it is true black * rather than the near-black used for text, and it casts a real shadow to * sit above the glass. Its label stays ExtraLight like the rest of the * card — the shape carries the emphasis, not the type. */ --ps-login-submit-bg: #000000; --ps-login-submit-bg-hover: #121212; --ps-login-submit-text: #ffffff; --ps-login-submit-weight: 200; --ps-login-submit-height: 52px; --ps-login-submit-radius: 999px; --ps-login-submit-shadow: 0 12px 28px #0000006b, 0 2px 6px #00000052; /* Square like the rules, filled white when on. */ --ps-login-check-size: 16px; --ps-login-check-radius: 3px; --ps-login-check-idle: #ffffff29; --ps-login-check-on: #ffffff; --ps-login-check-mark: #000000; --ps-login-check-gap: 9px; --ps-login-panel-tint: #ffffff2e; --ps-login-panel-edge: #ffffff38; --ps-login-shadow: 0 36px 90px #1408288c; /* * The board object — the ball and the horizon both read from these. * * The ball FOLLOWS THE FIELD, but it does not copy it. Binding the colours * straight to a blob is what made the ball a hot amber disc: the blobs are * fully saturated because they are 60px-blurred light, while the reference * ball is a muted body lit by a cream specular and cooled to lavender at * the rim. So only the HUE is taken from the field; saturation and * lightness are pinned to the reference's, measured off preview-three.html: * * hue sat light * core +3.841deg 100% 88.43% #ffe2c4 the specular at 36% 34% * from (hue) 73.26% 66.27% #e8a26a the body * to 240deg 16.06% 62.16% #8f8fae the cool rim * * The rim's hue is FIXED, not rotated with the source. Deriving it as * "source +213deg" reproduced the reference exactly but only because that * lands on 240 for the reference's own warm; from a rose field it came out * teal, and from a cyan one it came out warm khaki — a warm "cool rim", * which is a contradiction. The rim is shading, not brand colour: it reads * as the shadowed side of a lit sphere, and as the band under a horizon, * precisely because it stays cool whatever the light is. * * Feed it any hue and you get that same lit sphere in that hue — it can no * longer go hot. The two offsets are the reference's own relationships, so * a source of #e8a26a reproduces the reference exactly. * * The object FOLLOWS THE FIELD by default, so rebranding the background * moves the object with it and no one has to remember a second colour. * * The source is the field's OVERALL cast — all five blobs in equal parts, * chained through color-mix. Pointing it at a single blob was wrong: the * warm blob sits bottom-right and is nothing like what you see behind the * board, so the object stayed peach while the background read plum and * rose. Averaging the five gives the colour the field actually is. * * The weights step 1/2, 1/3, 1/4, 1/5 from the inside out, which is what * makes each blob contribute exactly one fifth. * * Settings -> "Object colour" set to "Pin to the approved warm" uses * --ps-login-orb-reference instead, and "Object colour, from" set to a hex * overrides it outright; core and rim re-derive from either, so one colour * still yields a coherent object. */ --ps-login-orb-source: color-mix(in srgb, var(--ps-login-blob-5) 20%, color-mix(in srgb, var(--ps-login-blob-4) 25%, color-mix(in srgb, var(--ps-login-blob-3) 33.333%, color-mix(in srgb, var(--ps-login-blob-2) 50%, var(--ps-login-blob-1))))); /* The reference's own warm, for when the object is pinned rather than following the field. Kept here so no colour is stated in PHP. */ --ps-login-orb-reference: #e8a26a; --ps-login-orb-from: hsl(from var(--ps-login-orb-source) h 73.26% 66.27%); --ps-login-orb-core: hsl(from var(--ps-login-orb-from) calc(h + 3.841) 100% 88.43%); --ps-login-orb-to: hsl(240 16.06% 62.16%); --ps-login-orb-mid: var(--ps-login-orb-from); /* Background image, set by the Settings application. */ --ps-login-image: none; --ps-login-wash: 0.25; /* Grain. */ --ps-login-grain-opacity: 0.12; --ps-login-grain-fine-opacity: 0.07; /* The phone sheet: how much of the width the form covers. The remainder is the strip of moving field left showing down the right-hand side. */ --ps-login-sheet-width: 90%; /* The card and board corner. Its own token, NOT --pl-surface-radius: that is 8px and using it here shrank both panels from the approved 20px. */ --ps-login-radius: 20px; } :root { /* Stacking inside the sign-in document. */ --pl-layer-field: 0; --pl-layer-grain: 1; --pl-layer-stage: 2; --pl-layer-dropdown: 100; --pl-layer-popover: 1000; --pl-layer-modal: 100100; --pl-layer-sidepanel: 100200; --pl-overlay-gutter: 8px; } /** * Control tokens. * * Every value below was measured from the live PowerLeads select on * 2026-07-31 rather than read off a class name, because the root font size is * 12.6px and Tailwind's rem scale therefore does not produce its nominal * pixel values. Sizes stay in rem so a control renders identically wherever * it is mounted, regardless of the local font-size context. * * These describe the design that already exists. Changing one changes the * whole Suite, so a change here is a design decision, not a tweak. */ :root { /* Trigger */ --pl-control-height: 2.25rem; --pl-control-height-sm: 2rem; --pl-control-padding-y: 0.5rem; --pl-control-padding-x: 0.625rem; --pl-control-gap: 0.5rem; --pl-control-radius: 6px; --pl-control-border: 1px; --pl-control-font-size: 0.75rem; --pl-control-surface: #ffffff; --pl-control-text: #475569; /* Grouped forms and editable detail cards. These separate quiet structural borders from the stronger affordances needed by interactive fields. */ --pl-form-plate: #f6f7f9; --pl-form-card-surface: #ffffff; --pl-form-card-border: #e4e7ec; --pl-form-card-divider: #dfe3e9; --pl-form-card-shadow: 0 1px 3px rgb(16 20 34 / 0.1); --pl-field-height: 36px; --pl-field-surface-hover: #f4f5f8; --pl-field-border: #8b929d; --pl-field-focus: #3080ff; --pl-field-focus-ring: rgb(48 128 255 / 0.16); --pl-field-label: #6e7280; --pl-focus-ring-width: 3px; --pl-heading-letter-spacing: -0.02em; --pl-heading-line-height: 1.2; /* Icons inside controls */ --pl-control-icon-size: 1rem; --pl-control-icon-opacity: 0.5; /* Panel */ --pl-panel-surface: #ffffff; --pl-panel-border-color: oklch(0.869 0.022 252.894); --pl-panel-radius: 6px; --pl-panel-padding: 0.25rem; --pl-panel-min-width: 8rem; --pl-panel-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* Panel rows */ --pl-panel-item-padding: 0.375rem 2rem 0.375rem 0.5rem; --pl-panel-item-radius: 4px; --pl-panel-item-text: oklch(0.372 0.044 257.287); --pl-panel-item-indicator-size: 0.875rem; /* Anchored panels sit above the app rail and contextual menu. Kept separate from --pl-layer-popover so existing overlays are untouched. */ --pl-layer-select: 100000; /* Muted text, previously written as literals in three stylesheets. */ --pl-text-muted: #6b7280; --pl-text-subtle: #9aa1ab; /* Checkbox. Measured from the live PowerLeads table checkbox, 2026-07-31. */ --pl-checkbox-size: 1rem; --pl-checkbox-radius: 4px; --pl-checkbox-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* Table. Measured from the live PowerLeads leads table, 2026-07-31. */ --pl-table-cell-height: var(--pl-control-height); --pl-table-cell-padding-x: 0.5rem; --pl-table-head-text: rgb(63 67 74 / 0.8); --pl-table-row-hover: #f9fafb; --pl-table-group-surface: var(--pl-surface-muted); /* Grid lines and group rules come straight off the neutral scale. An earlier version mixed its own greys, which produced values that sit between shades and belong to no palette. */ --pl-table-grid-color: var(--shade-40); --pl-table-rule-color: var(--shade-30); /* Shared long-form settings pages. These metrics belong to the Suite kit so every module can adopt the same hierarchy without copying a page. */ --pl-settings-page-max-width: 92rem; --pl-settings-copy-max-width: 48rem; --pl-settings-section-gap: 1.25rem; --pl-settings-layout-gap: 1.5rem; --pl-settings-section-padding: 1.5rem; --pl-settings-section-radius: 0.875rem; --pl-settings-field-gap: 1rem; --pl-settings-heading-size: 1.75rem; --pl-settings-section-heading-size: 1rem; --pl-settings-body-font-size: 0.8125rem; --pl-settings-help-font-size: 0.75rem; --pl-settings-description-leading: 1.55; --pl-settings-section-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 12px 32px rgb(16 24 40 / 0.06); --pl-settings-action-shadow: 0 -8px 24px rgb(16 24 40 / 0.06); --pl-settings-header-surface: var(--pl-surface-muted); --pl-settings-field-surface: var(--full-white); --pl-settings-field-border: var(--pl-form-card-divider); /* Shared line tabs. These mirror the established Companies workspace. */ --pl-tabs-height: var(--pl-control-height); --pl-tabs-gap: 1.25rem; --pl-tabs-padding-x: calc(var(--pl-control-padding-y) / 2); --pl-tabs-indicator-width: var(--pl-control-border); --pl-action-primary-surface: var(--theme-accent); --pl-action-primary-text: var(--full-white); } /** * Suite surface tokens. * * These were declared on `.power-suite-shell`, which meant every Suite surface * OUTSIDE the shell element — the sign-in screen above all — consumed tokens * that did not exist there and fell back to browser defaults: no borders, no * weights, serif type. They belong on :root, where every surface can reach * them and where `all: initial` still inherits them into the shell. * * The values are unchanged, so nothing that renders today moves. */ :root { /* The rem context. Every rem in this file and in the shared components is written against 12.6px; without it the same control is 36px here and 28.34px inside an application. */ font-size: 12.6px; --background: oklch(0.98 0.002 250); --foreground: var(--pl-text-color); --card: oklch(1 0 0); --card-foreground: var(--pl-text-color); --primary: oklch(0.55 0.2 255); --primary-foreground: oklch(0.98 0 0); --muted: oklch(0.94 0.002 250); --muted-foreground: oklch(0.45 0.01 250); --border: var(--pl-border-color); --ring: oklch(0.55 0.2 255); --radius: 8px; --pl-shell-sidebar: #f6f7f9; --pl-shell-selected: #68769214; --pl-shell-workspace: oklch(1 0 0); --pl-surface-muted: #f6f7f9; --pl-surface-muted-hover: #f1f5f9; --pl-surface-radius: 8px; --pl-border-color: #f1f2f4; --pl-text-color: #3f434a; --pl-control-active-bg: #eaf3ff; --pl-control-active-border: #cfe2f7; --pl-control-active-text: #536d92; --pl-icon-stroke-width: 1.25; --pl-mobile-touch-target: 40px; --pl-font-weight-regular: 300; --pl-font-weight-medium: 400; --pl-font-weight-strong: 500; --pl-font-weight-bold: 600; --pl-sidebar-hover: #eef2f7; /* * Three tokens, because two were doing three jobs. * * --pl-app-rail-width is REBOUND to the collapsed value by * .is-rail-collapsed further down, which is what the wide grid wants. The * narrow layout has its own expanded state, and reading the rebound token * there meant expanding the rail resolved back to 56px whenever the wide * layout happened to be collapsed — the control set its flag and nothing * moved. The expanded width needs a name that nothing rebinds. */ --pl-app-rail-expanded-width: 168px; --pl-app-rail-width: var(--pl-app-rail-expanded-width); --pl-app-rail-collapsed-width: 56px; --pl-app-menu-width: 196px; /* * Below the navigation breakpoint the view menu is wider than its desktop * column, because there it shares the screen with only an icon rail rather * than sitting as one column of three. */ --pl-app-menu-drawer-width: 230px; /* One duration for every navigation width change, so the rail's peek and anything that follows it stay in step. */ --ps-nav-transition: 160ms ease; --theme-accent: #007bff; --theme-accent-light: #007bff33; --theme-accent-hover: #0062cc; --pl-font-family: "Inter", ui-sans-serif, system-ui, sans-serif; } .power-suite-shell { all: initial; background: var(--pl-shell-sidebar); color: var(--foreground); display: grid; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 11.5px; font-weight: var(--pl-font-weight-regular); grid-template-columns: var(--pl-app-rail-width) var(--pl-app-menu-width) minmax(0, 1fr); height: 100vh; line-height: 1.5; min-height: 100vh; overflow: hidden; width: 100%; } .power-suite-shell.is-rail-collapsed { --pl-app-rail-width: var(--pl-app-rail-collapsed-width); } .power-suite-shell { /* Default mode. responsive.css overrides this to `narrow` inside its media query, and shell.js reads it back instead of duplicating the pixel value. */ --ps-nav-mode: wide; } .power-suite-shell, .power-suite-shell * { box-sizing: border-box; scrollbar-color: #d9dee7 transparent; scrollbar-width: thin; } .power-suite-shell ::-webkit-scrollbar { height: 7px; width: 7px; } .power-suite-shell ::-webkit-scrollbar-track { background: transparent; } .power-suite-shell ::-webkit-scrollbar-thumb { background: #d9dee7; border-radius: 999px; } .power-suite-shell :where(button, input, textarea, select) { font-family: inherit; font-size: inherit; line-height: inherit; } .power-suite-shell :where(h1, h2, h3, h4, h5, h6, p) { color: inherit; margin: 0; } .power-suite-shell :where(button):focus-visible, .power-suite-shell :where(input, textarea, select):focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent) !important; outline: none !important; } .power-suite-shell .screen-reader-text, .power-suite-context { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } [data-suite-floating] { z-index: var(--pl-layer-popover) !important; } [data-suite-overlay-scope="content"] { bottom: var(--power-suite-content-bottom, 0px) !important; left: var(--power-suite-content-left, 0px) !important; right: var(--power-suite-content-right, 0px) !important; top: var(--power-suite-content-top, 0px) !important; } [data-suite-overlay-layer="modal"] { z-index: var(--pl-layer-modal) !important; } [data-suite-overlay-layer="sidepanel"] { z-index: var(--pl-layer-sidepanel) !important; } /* ── Status + accent tokens (2026-09-02) ──────────────────────────────── Read by the kit's chip (ps-chip) and monogram tile (ps-tile). Positive is the owner's platform emerald ramp; caution is the CRM palette's amber. Borrowed for status semantics only — see the NOTE up top. */ :root { --pl-status-positive-surface: #e8f8ec; --pl-status-positive-text: #2c6c33; --pl-status-positive-dot: #68d272; --pl-status-caution-surface: #fdf3e3; --pl-status-caution-text: #92600a; --pl-status-caution-dot: #f0a92e; --pl-status-neutral-surface: var(--alpha-shade-50); --pl-status-neutral-text: var(--pl-text-muted); --pl-status-neutral-dot: #97a2b5; --pl-status-info-surface: var(--alpha-blue-50); --pl-status-info-text: var(--pl-control-active-text); --pl-status-info-dot: #1668e3; /* The entity table's rhythm, on the settings scale: the sign-in Settings sections set the reference for breathing room, and the table consumes their tokens rather than inventing its own. */ --pl-table-row-padding-y: 1rem; --pl-table-row-padding-x: var(--pl-settings-section-padding); --pl-table-head-padding-y: 0.75rem; --pl-table-font-size: var(--pl-settings-body-font-size); --pl-table-detail-font-size: var(--pl-settings-help-font-size); /* Accent ink for monogram tiles, one per tint the kit offers. */ --pl-accent-blue: #1668e3; --pl-accent-purple: #6b70d6; --pl-accent-emerald: #2c6c33; --pl-accent-amber: #92600a; --pl-accent-slate: #6b7280; }