/* Two themes, one file (#96). Every colour the shell paints is a token, and `:root[data-theme="dark"]` at the bottom re-declares exactly the ones that change. `data-theme` is stamped on before first paint by the guard in each page's , so there is no light flash and no second code path — "system" resolves to one of the two and keeps resolving while the tab is open. A colour added as a literal below is a colour dark mode misses. */ :root { /* --------------- the same in both themes, on purpose --------------- Coral is the brand's one clickable colour and emerald is the machine working; both keep their light-mode value as *fills* in the dark theme, because that is what Feel C draws — a coral button and a green track on a black ground. Their ink halves (--accent-ink, --signal-dim) are in the surface palette below, where dark lifts them. */ --brand-accent: #e8533a; /* coral: CTA only, nothing else */ --coral-hover: #d04530; --signal: #00b37e; /* emerald: the machine working */ /* Two typefaces, two owners. The studio's own type runs the product — the system stack, so it is SF on a Mac and Segoe on Windows — and never changes. A tenant's `font` token styles the deliverables only: the artifacts that carry their brand. The mono lives in the terminal and in literal code/URLs, nowhere else (#81: mono retreats to the terminal). */ --studio-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; --brand-font: var(--studio-font); --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --radius: 14px; /* The active area, matching the site's build card exactly. Dark whatever the tenant palette is — and whatever the theme is: the terminal is the machine's own surface, and it was already this colour in light mode. */ --term-bg: #1a1a18; --term-head: rgba(255, 255, 255, .03); --term-line: rgba(255, 255, 255, .09); --term-ink: rgba(255, 255, 255, .65); --term-muted: rgba(255, 255, 255, .45); --term-dim: rgba(255, 255, 255, .22); --term-gutter: rgba(255, 255, 255, .12); --term-green: #6ee7b7; --term-amber: #fde68a; } /* ----------------------- the light surface palette ----------------------- The Cupertino pass (#81): neutral ground, white shadow-lifted cards, system type. Shared with the website in its accents; the surfaces are not (the site keeps its warm cream — the tradeoff the operator picked). Declared twice on purpose. `:root` makes it the studio's default. Naming `.brand-scope` here is what keeps the **deliverables light in a dark studio**: a custom property declared on an element beats one inherited from , whatever the specificity, so the client's branded document comes out of the same rules with the same white paper in both themes. Feel C's own note is why — "the deliverables are the client's bright branded documents; reviewing them inside a dark shell is constant contrast whiplash." This list and the dark block below must hold the same property names. A token in one and not the other is a bug in the theme that is missing it — light if it is here, dark if it is there. */ :root, .brand-scope { --brand-surface: #f5f5f7; /* the neutral ground */ --brand-ink: #1d1d1f; --card: #ffffff; --sand: #e8e8ed; /* the neutral fill (menus, chips, tracks) */ --on-sand: #636366; /* 4.90:1 on --sand, where --muted is 4.15 */ --fill: rgba(120, 120, 128, .14); /* a control's gray fill */ --fill-input: rgba(120, 120, 128, .09); --line: rgba(0, 0, 0, .1); --hairline: rgba(0, 0, 0, .06); --muted: #6e6e73; /* secondary */ --faint: #86868b; /* tertiary */ /* Coral and emerald as *ink*. On a dark surface #e8533a and #00956a both fall under AA, so the dark theme lifts them instead of deepening them — and lifts their hovers toward white, because darkening an accent that is already light inverts the affordance. */ --accent-ink: var(--brand-accent); --accent-ink-hover: var(--coral-hover); --signal-dim: #00956a; --on-accent: #ffffff; /* ink on a solid coral or --bad fill */ --on-ink: #ffffff; /* ink on a solid --brand-ink fill */ --tint: rgba(232, 83, 58, .12); --tint-strong: rgba(232, 83, 58, .2); --mint: #e5f6f0; /* accent-bg */ --ok-wash: rgba(0, 179, 126, .1); --bad-wash: rgba(192, 57, 43, .09); --warn: #a5651a; --warn-bg: #fdf6e8; --warn-line: #e8d4a8; --bad: #c0392b; --bad-bg: #fdeceb; --bad-line: #edb6b1; --rail-bg: #f0f0f3; /* the sidebar, a shade off the ground */ --rail-line: rgba(0, 0, 0, .08); --hover-wash: rgba(0, 0, 0, .045); --active-wash: rgba(0, 0, 0, .075); --avatar: #d8d8dd; --on-avatar: #5c5c5e; /* the initials: 4.70:1, --muted was 3.57 */ --thumb: #ffffff; /* the selected segment of a sort row */ --knob: #ffffff; /* the face of a switch */ --track: rgba(120, 120, 128, .25); --sheen: #ffffff; /* the highlight that sweeps a skeleton */ --overlay: rgba(26, 26, 24, .45); --linkedin: #0a66c2; /* their blue, as ink */ --border-mark: transparent; /* the brand tile needs no edge on white */ --shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05); --shadow-soft: 0 1px 3px rgba(0, 0, 0, .08); --shadow-menu: 0 0 0 1px rgba(0, 0, 0, .06), 0 14px 34px rgba(0, 0, 0, .13); --shadow-panel: 0 0 0 1px rgba(0, 0, 0, .06), 0 18px 50px rgba(0, 0, 0, .22); --shadow-lift: 0 0 0 1px var(--hairline), 0 2px 12px rgba(0, 0, 0, .06); --shadow-knob: 0 1px 3px rgba(0, 0, 0, .2); --shadow-thumb: 0 1px 3px rgba(0, 0, 0, .1); --shadow-overlay: 0 18px 50px rgba(26, 26, 24, .28); } :root { color-scheme: light; } /* Re-declaring the tokens is only half of keeping a deliverable light: the surfaces inside it read --card and come out white, but `color` is an inherited property, so the text would still arrive from carrying the shell's near-white ink — white on white paper. The scope therefore lands its own ink, and takes the paper itself, so that a deliverable with no surface of its own (the one-pager is a bare
of headline and bullets) is on white too rather than adrift on a dark card. In light this is white-on-white and changes nothing — no padding moves, no text shifts. In dark it is the sheet of paper the client will actually be looking at, sitting on the studio's desk. Native widgets inside it — the edit form's textarea, a select — follow the paper, not the shell. */ .brand-scope { color-scheme: light; background: var(--card); color: var(--brand-ink); border-radius: var(--radius); } /* --------------------------------- dark --------------------------------- Feel C — Graphite, from the #81 design pass, built as the theme it was said to be ("better as a later dark mode than as the identity") rather than the identity it was not: ground #161617, cards #1f1f21, raised fill #2b2b2e, ink #f5f5f7, coral and emerald lifted so they still read as ink. Every pair clears WCAG AA on the surface it lands on; the tightest is coral ink on its own wash, 4.6:1. Gated on `screen` so that printing needs no second copy of the light palette: on paper the block simply does not apply and :root's own values stand. See the print rules at the foot of this file. */ @media screen { :root[data-theme="dark"] { color-scheme: dark; --brand-surface: #161617; --brand-ink: #f5f5f7; --card: #1f1f21; --sand: #2b2b2e; --on-sand: #98989d; /* 4.92:1 — --faint sat at 4.33 here too */ --fill: rgba(255, 255, 255, .11); --fill-input: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .14); --hairline: rgba(255, 255, 255, .09); --muted: #98989d; --faint: #8e8e93; --accent-ink: #ff6b52; /* "coral, lifted" — 5.9:1 on a card */ --accent-ink-hover: #ff8a76; --signal-dim: #6ee7b7; /* "emerald, lifted" */ --on-accent: #ffffff; --on-ink: #161617; /* --brand-ink is near-white here */ --tint: rgba(255, 107, 82, .16); --tint-strong: rgba(255, 107, 82, .26); --mint: rgba(110, 231, 183, .1); --ok-wash: rgba(110, 231, 183, .13); --bad-wash: rgba(255, 122, 110, .13); --warn: #e8b34a; --warn-bg: rgba(232, 179, 74, .13); --warn-line: rgba(232, 179, 74, .34); --bad: #ff7a6e; --bad-bg: rgba(255, 122, 110, .12); --bad-line: rgba(255, 122, 110, .34); --rail-bg: #121213; --rail-line: rgba(255, 255, 255, .1); --hover-wash: rgba(255, 255, 255, .055); --active-wash: rgba(255, 255, 255, .1); --avatar: #3a3a3e; --on-avatar: #a6a6ab; /* 4.67:1 — --muted sat at 3.94 */ --thumb: #47474b; --knob: #f5f5f7; --track: rgba(255, 255, 255, .18); --sheen: #3a3a3e; --overlay: rgba(0, 0, 0, .6); --linkedin: #6cb0f5; --border-mark: rgba(255, 255, 255, .22); /* Same geometry, heavier black — a shadow tuned for white cards does not read at all against #161617. */ --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .4); --shadow-soft: 0 1px 3px rgba(0, 0, 0, .4); --shadow-menu: 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 34px rgba(0, 0, 0, .55); --shadow-panel: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 50px rgba(0, 0, 0, .6); --shadow-lift: 0 0 0 1px var(--hairline), 0 2px 12px rgba(0, 0, 0, .35); --shadow-knob: 0 1px 3px rgba(0, 0, 0, .5); --shadow-thumb: 0 1px 3px rgba(0, 0, 0, .45); --shadow-overlay: 0 18px 50px rgba(0, 0, 0, .6); } } * { box-sizing: border-box; } body { margin: 0; font-family: var(--studio-font); background: var(--brand-surface); color: var(--brand-ink); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* The studio page lays out as rail + stage; share.html stays a column. */ body.studio { display: flex; align-items: stretch; min-height: 100vh; } /* The last thing in the document — the footer with Privacy, Terms and Cookies — must not spend its life under the notice. */ body { padding-bottom: var(--ppsc-inset, 0px); } a { color: inherit; } /* ------------------------------- chrome ------------------------------- The shell (#81): a grouped left sidebar with the workspace switcher at its head and Support + the signed-in user at its foot, beside a stage that holds everything else. share.html keeps a slim top bar instead — a stranger holding a link has no doors to group. */ .stage { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .stage main { flex: 1 1 auto; } .rail { flex: 0 0 236px; width: 236px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30; background: var(--rail-bg); border-right: 1px solid var(--rail-line); display: flex; flex-direction: column; } /* Room above each group label (#766, the operator: *"increase spacing between sections in the left-hand side navigation between Find / engage / teach"*): with the swatch and the tinted icons of #770 the spacing is what makes the three read as three blocks. Find sits under the ungrouped Getting started row and needs less. */ .sb-group { font-size: 11px; font-weight: 600; color: var(--faint); padding: 28px 14px 6px; } .sb-group-find { padding-top: 18px; } .sb-item { display: flex; align-items: center; gap: 9px; width: calc(100% - 16px); margin: 1px 8px; padding: 6px 10px; border-radius: 7px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 13px; color: var(--brand-ink); white-space: nowrap; } .sb-item svg { color: var(--accent-ink); flex: 0 0 auto; } /* The rail wears the three verbs' hues (#770): a swatch beside the group label and the icons under it in the same colour, so a group here and its column on Getting started read as one thing. Each rule reaches every row after its label; the next group's rule, later in the file, takes over from its own label down. */ .sb-group { display: flex; align-items: center; gap: 7px; } .sb-group .verb-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; } .sb-group-find .verb-swatch { background: var(--verb-find); } .sb-group-engage .verb-swatch { background: var(--verb-engage); } .sb-group-teach .verb-swatch { background: var(--verb-teach); } .sb-group-find ~ .sb-item svg { color: var(--verb-find); } .sb-group-engage ~ .sb-item svg { color: var(--verb-engage); } .sb-group-teach ~ .sb-item svg { color: var(--verb-teach); } .sb-item .sb-label { overflow: hidden; text-overflow: ellipsis; } .sb-item:hover { background: var(--hover-wash); } .sb-item[aria-current="page"] { background: var(--active-wash); font-weight: 600; } nav.segments { padding-bottom: 10px; } nav.segments .count { margin-left: auto; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; } nav.segments .count.live { color: var(--signal-dim); font-weight: 600; } /* `--ppsc-inset` is the cookie notice's height while it is on screen (#131), 0px otherwise. Without it the notice covers Support and the signed-in user at the foot of the rail — `npm run drive:consent` could not even click the launcher. */ .rail-foot { margin-top: auto; border-top: 1px solid var(--rail-line); padding: 8px 0 calc(10px + var(--ppsc-inset, 0px)); } .rail-user { display: flex; align-items: center; gap: 9px; margin: 1px 8px; padding: 6px 10px; font-size: 12px; color: var(--muted); } .rail-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--avatar); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 600; color: var(--on-avatar); } .rail-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The slim top bar a shared pitch keeps (share.html). */ header.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 11px 26px; background: var(--card); color: var(--brand-ink); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--hairline); width: 100%; } header.top .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; } header.top .brand img { display: block; border-radius: 8px; } header.top .wordmark { font-weight: 700; letter-spacing: -.02em; font-size: 16px; white-space: nowrap; } header.top .mark { font-size: 11px; font-weight: 600; color: var(--signal-dim); background: var(--mint); border-radius: 5px; padding: 3px 8px; white-space: nowrap; } /* The client, and everything about being signed in to it. In the studio the switcher is the rail's head; on a share the .account cell just holds the reader's email. */ .account { position: relative; justify-self: end; } .rail .account { padding: 8px 6px 4px; } .account-button { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; cursor: pointer; border: 0; border-radius: 8px; padding: 8px 8px; font: inherit; font-size: 13px; color: inherit; min-width: 0; } .account-button:hover { background: var(--hover-wash); } .account-button .logo { height: 20px; width: 20px; object-fit: contain; border-radius: 4px; flex: 0 0 auto; } .account-button .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--client-primary, var(--brand-ink)); flex: 0 0 auto; } .account-button .tenant { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-button .chev { color: var(--faint); flex: 0 0 auto; margin-left: auto; } .account-button[aria-expanded="true"] { background: var(--active-wash); } .account .menu { /* Wider than the rail on purpose (#86): the "(Agency)" tag costs a row about fifty pixels, and a popover that clipped the workspace name to make room for the badge would defeat the badge. */ position: absolute; left: 6px; right: 6px; top: calc(100% + 2px); min-width: 252px; z-index: 40; background: var(--card); border-radius: 12px; padding: 6px; box-shadow: var(--shadow-menu); } .account .menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 6px; } .account .menu-head .tenant { font-weight: 600; } .account .menu-head .who { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; } .account .menu button { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; padding: 9px 12px; border-radius: 8px; color: inherit; } .account .menu button:hover { background: var(--sand); } /* The workspace switcher (#46): every membership, current one marked. */ #menu-workspaces { border-bottom: 1px solid var(--hairline); margin-bottom: 6px; padding-bottom: 6px; } .account .menu .workspace-row { display: flex; align-items: center; gap: 8px; } .account .menu .workspace-row.current { cursor: default; font-weight: 600; } .account .menu .workspace-row.current:hover { background: none; } .workspace-tick { width: 14px; flex: 0 0 auto; color: var(--brand-accent, var(--brand-ink)); font-size: 12px; } .account .menu .workspace-row .workspace-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The one that rules the others (#86): a quiet designation in brackets, and the studios it created indented beneath it. Never bold — the row's own weight is reserved for "you are standing here". */ .workspace-tag { flex: 0 0 auto; font-size: 11.5px; font-weight: 400; color: var(--muted); } /* Depth 1. Deeper rows step by the same 26px from an inline style the renderer computes, because a stylesheet cannot know how deep a lineage goes (#359). */ .account .menu .workspace-row.under-agency { padding-left: 26px; } .workspace-row .pill { margin-left: auto; } /* Appearance in the account menu (#96). The menu styles every button as a full-width left-aligned row, which is right for a door and wrong for a segmented control, so the three segments opt back out. */ .account .menu .menu-appearance { border-top: 1px solid var(--hairline); margin: 6px 0 0; padding: 10px 12px 8px; display: grid; gap: 7px; } .account .menu .menu-label { font-size: 11px; font-weight: 600; color: var(--faint); } .account .menu .sort-row button { display: block; flex: 1 1 0; width: auto; min-width: 0; text-align: center; padding: 5px 4px; font-size: 12.5px; } .account .menu .sort-row button:hover { background: var(--hover-wash); } .account .menu .sort-row button[aria-pressed="true"], .account .menu .sort-row button[aria-pressed="true"]:hover { background: var(--thumb); box-shadow: var(--shadow-thumb); } /* ------------------------------ settings ------------------------------ */ /* The one sentence on the brief that says recording pays (#414). Quiet — it is a fact about the workspace, not a control — but not hidden. */ /* A screen whose body is a stack of cards puts its title above them rather than inside the first one (#414) — a card holding only a heading reads as an empty first section. */ .page-head { padding: 2px 4px 4px; margin-bottom: 18px; } .page-head h1 { margin-bottom: 0; } /* --------------------------- settings cards (#414) ----------------------- Settings was a CSS textarea on top of three shut
folds. It is a scrolling column of cards now: a title, one line saying what the card is, then the controls — nothing folded, so nothing can be rebuilt closed under the person who just used it (#352's bug, deleted rather than patched). */ .scard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow-soft); margin-top: 16px; } .scard:first-child { margin-top: 0; } .scard-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 0; } .scard-why { font-size: 13.5px; color: var(--muted); margin: 3px 0 0; max-width: 62ch; } .scard-body { margin-top: 16px; } .scard-body > .setting:first-of-type { border-top: 0; padding-top: 0; } .scard.danger { border-color: color-mix(in srgb, var(--bad) 34%, transparent); } .scard.danger .scard-title { color: var(--bad); } @media (max-width: 640px) { .scard { padding: 17px 16px; } } .setting { border-top: 1px solid var(--hairline); padding: 16px 0; display: grid; grid-template-columns: 190px 1fr; gap: 20px; } .setting:first-of-type { border-top: 0; } .setting .what { font-weight: 600; font-size: 14px; } .setting .why { font-size: 13px; color: var(--muted); margin-top: 2px; } /* --------------------------- Connect your apps --------------------------- #566. One grid where the doors used to be three separate cards. A tile is the whole button (`/style` rule 8: one primary action per card) — mark, name, category, state — and pressing it opens that app's panel below the grid. Nothing folds open by default: the grid is the screen, the panel is what you asked for. The mark is a neutral monogram, not a vendor logo, and that is a decision rather than a shortcut: HubSpot's trademark guidelines forbid placing their logo on a third-party site without written permission, and Slack's entitlement runs to apps listed in their Marketplace, which Prospektor is not yet. #566's own rule — a neutral mark rather than a guess — is what this renders. `--sand` for every tile, so no mark can read as a brand colour somebody has not licensed us. */ .apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; } .app { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); cursor: pointer; transition: background .12s ease, border-color .12s ease; } .app:hover { background: var(--hover-wash); } .app[aria-expanded="true"] { border-color: var(--brand-ink); background: var(--hover-wash); } .app-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--sand); color: var(--on-sand); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; } .app-name { font-size: 14px; font-weight: 600; color: var(--brand-ink); } .app-cat { font-size: 12px; color: var(--faint); } /* Coral is CTA-only in this palette, and seven tiles saying *Connect* in it would be seven primary actions on one screen. So the resting word is quiet and only a state worth noticing carries a colour: green connected, amber when a live connection's last call was refused. */ .app-state { font-size: 12px; font-weight: 600; color: var(--on-sand); margin-top: 8px; } .app-state.on { color: var(--signal-dim); } .app-state.off { color: var(--warn); } /* Not built yet, and on the grid on purpose: the roadmap a customer can see. Nothing to press, so it is not a button. */ .app.soon { cursor: default; opacity: .55; } .app.soon .app-state { color: var(--faint); } .app.ask { border-style: dashed; } .app-open { margin-top: 14px; border-top: 1px solid var(--hairline); padding-top: 14px; } .app-open-title { font-size: 14px; font-weight: 600; margin: 0 0 10px; } .scard-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; } .swatches { display: flex; gap: 10px; flex-wrap: wrap; } .swatch { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } .swatch i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); display: block; } main { max-width: 1120px; margin: 0 auto; padding: 30px 40px 70px; width: 100%; } /* A card is lifted, not outlined (#81): white on the neutral ground, a soft shadow doing the work the 1px border used to. */ .card { background: var(--card); border: 0; border-radius: 16px; padding: 26px; margin-bottom: 18px; box-shadow: var(--shadow-card); } h1 { font-size: 28px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.021em; line-height: 1.12; } h2 { font-size: 19px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.02em; } /* Section labels in the product's own voice: small, semibold, sentence case. The mono uppercase went back to the terminal (#81). */ h3 { font-size: 12.5px; font-weight: 600; margin: 24px 0 9px; color: var(--muted); letter-spacing: 0; } p.sub { margin: 0 0 20px; color: var(--muted); } .eyebrow { font-size: 12px; font-weight: 600; color: var(--muted); } .eyebrow.chip { background: var(--sand); border-radius: 6px; padding: 4px 9px; display: inline-block; } /* -------------------------------- forms -------------------------------- */ label.field { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; } label.field .opt { font-weight: 400; color: var(--muted); } /* One quiet sentence under a field saying what actually helps (#63). */ .field-help { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; max-width: 62ch; } /* * Every text-entry type, not a list of the three that happened to exist * (#171). The recovery number shipped as the product's first `type=tel` and * rendered as a browser default beside fields that did not — the operator * saw it within the hour. `tel`, `search`, `number`, `password` and `date` * are all here now so the next one to be used is styled before it is added, * which is the only version of this rule that cannot fall behind again. */ input[type=text], input[type=email], input[type=url], input[type=tel], input[type=search], input[type=number], input[type=password], input[type=date], textarea, select { width: 100%; padding: 11px 14px; font: inherit; color: inherit; border: 0; border-radius: 10px; background: var(--fill-input); } input::placeholder, textarea::placeholder { color: var(--faint); } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; } textarea { min-height: 84px; resize: vertical; } textarea.editor { min-height: 340px; font-family: var(--mono); font-size: 13px; line-height: 1.65; } .grid { display: grid; gap: 18px; } .grid.two { grid-template-columns: 1fr 1fr; } .target-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: end; } .target-row .or { padding-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--faint); } /* The target field: the one field the whole product turns on, so it keeps a little ceremony — a white lifted box where every other input is a quiet gray fill. */ .prompt { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 12px; padding: 5px 8px 5px 16px; box-shadow: var(--shadow-lift); } .prompt:focus-within { box-shadow: 0 0 0 2px var(--signal); } .prompt .sigil { color: var(--faint); font-size: 13px; } .prompt input { border: 0; padding: 8px 0; border-radius: 0; font-size: 14px; background: none; } .prompt input:focus-visible { outline: none; } .prompt .enter { font-size: 11px; font-weight: 600; color: var(--on-sand); background: var(--sand); border-radius: 5px; padding: 4px 8px; white-space: nowrap; } button.primary, a.primary { background: var(--brand-accent); color: var(--on-accent); border: 0; border-radius: 10px; padding: 11px 22px; font: inherit; font-weight: 600; cursor: pointer; transition: background .15s; } button.primary:hover, a.primary:hover { background: var(--coral-hover); } button.primary[disabled] { opacity: .5; cursor: default; filter: none; } button.ghost[disabled] { opacity: .5; cursor: default; } /* One rule for the whole product: if it is red, you can click it. The secondary control is a gray fill with coral text now — filled and tinted, never outlined (#81). */ .ghost { display: inline-block; background: var(--fill); border: 0; border-radius: 10px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--accent-ink); text-decoration: none; white-space: nowrap; } .ghost:hover { background: var(--tint); } /* The measured minutes on the Full pitch button (#308). Lighter and smaller than the label, never dimmer: it is information, not decoration, so it keeps the button's own contrast rather than fading out of it. */ .btn-note { font-weight: 400; font-size: 12px; } .ghost.did { color: var(--signal-dim); background: var(--mint); } a.go { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent-ink) 40%, transparent); } a.go:hover { text-decoration-color: currentColor; } .onward { display: block; margin: 26px 0 0; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent-ink); cursor: pointer; } .onward:hover { text-decoration: underline; } .teaches { font-size: 13px; color: var(--muted); margin: 0 0 12px; } /* The outputs are switches now (#81): emerald when on, because a toggle tells the machine what to produce — it is not a CTA. */ .checks { display: flex; flex-wrap: wrap; gap: 10px 24px; } .checks label { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; border: 0; border-radius: 0; padding: 3px 0; background: none; } .checks input { appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; width: 38px; height: 23px; border-radius: 999px; flex: 0 0 auto; background: var(--track); position: relative; transition: background .15s; } .checks input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--knob); box-shadow: var(--shadow-knob); transition: left .15s; } .checks input:checked { background: var(--signal); } .checks input:checked::after { left: 17px; } /* --------------------- Beast Mode (#49), the list door --------------------- */ .beast { border-top: 1px solid var(--hairline); margin-top: 24px; padding-top: 6px; } /* More options on New pitch (#652): the same fold, above the buttons. */ .more { margin-top: 18px; } .more .grid { padding: 4px 2px 8px; } .beast-head { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 12px 2px; font: inherit; font-size: 14px; cursor: pointer; } .beast-head .bolt { font-size: 15px; } .beast-head .meta { font-size: 13px; color: var(--muted); flex: 1; } .beast-head .caret { color: var(--faint); transition: transform .15s; } .beast-head[aria-expanded="true"] .caret { transform: rotate(180deg); } .beast-body { padding: 4px 2px 8px; } .beast-body .meta { font-size: 13px; color: var(--muted); margin: 0 0 12px; } .beast-body code { font-family: var(--mono); font-size: 12px; background: var(--sand); border-radius: 4px; padding: 1px 5px; } .beast-body textarea { font-family: var(--mono); font-size: 13px; line-height: 1.7; } .beast-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .beast-foot .meta { font-size: 13px; color: var(--muted); } .beast-foot .spacer { flex: 1; } /* Running, as a strip at the head of Library (#653): a hairline under it keeps the live work and the finished work apart without a second card. */ .running-strip { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline); } /* ------------------------------- banners ------------------------------- */ .banner { padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 14px; border: 1px solid; } .banner.warn { background: var(--warn-bg); border-color: var(--warn-line); } .banner.error { background: var(--bad-bg); border-color: var(--bad-line); } .banner.ok { background: var(--mint); border-color: color-mix(in srgb, var(--signal) 35%, transparent); } .banner.info { background: var(--sand); border-color: var(--line); } .banner .actions { display: flex; gap: 8px; margin-top: 11px; } /* A pointer inside a sentence, not a second button on the screen (#275): the banner says a reading is waiting, and this is the word that takes you to it. `.ghost` would make it a filled pill competing with the page's one primary action, which is exactly what the style standard forbids. */ .banner .linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .banner .linkish:hover { opacity: .7; } /* --------------------------- the run, and only the run --------------------------- The site's "how it works": human-readable steps on the left, the machine's own surface on the right. */ .run-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 30px; align-items: start; } .run-steps { padding-top: 4px; } ol.stepper { list-style: none; margin: 0; padding: 0; } ol.stepper > li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); } ol.stepper > li:last-child { border-bottom: 1px solid var(--line); } .step-mark { font-size: 11px; font-weight: 600; color: var(--faint); padding-top: 3px; font-variant-numeric: tabular-nums; } .step-label { font-weight: 600; font-size: 14.5px; color: var(--muted); letter-spacing: -.01em; } /* Who is doing this step (#218). A right-hand column rather than a chip: the rail is a list of work, and the agent is the answer to "by whom" — quiet while it waits, lit while it runs, settled once it is done. `margin-left: auto` keeps it off the label so the active step's blinking caret still sits against the words it belongs to. */ .step-head { display: flex; align-items: baseline; gap: 10px; } .step-agent { margin-left: auto; flex: none; white-space: nowrap; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); } li.is-done .step-agent { color: var(--muted); } li.is-active .step-agent { color: var(--signal); } li.is-active .step-mark, li.is-done .step-mark { color: var(--signal); } li.is-active .step-label, li.is-done .step-label { color: var(--brand-ink); } li.is-active .step-label::after { content: '▌'; color: var(--signal); margin-left: 5px; animation: blink .9s step-end infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* --------------------------- the rail that accumulates (#160) ------------- A step's fold is what that step established, and it never empties again. The terminal on the right is the run happening; this is what it found, and by the last step it is the brief. */ .step-fold:empty { display: none; } ul.fold { list-style: none; margin: 7px 0 0; padding: 0; font-size: 12.5px; line-height: 1.55; } ul.fold > li { color: var(--muted); padding-left: 15px; position: relative; margin-top: 3px; overflow-wrap: anywhere; } ul.fold > li::before { position: absolute; left: 0; top: 0; font-size: 11px; color: var(--faint); } /* What the step concluded — the words it chose, kept verbatim. */ .f-said { color: var(--brand-ink); } .f-said::before { content: '·'; color: var(--signal); font-weight: 700; } /* What it produced. */ .f-section::before { content: '✓'; color: var(--signal); } /* What it opened, and what it asked. Both are checkable, which is the point. A URL is one of the two things #81 leaves in mono, terminal or not. */ .f-read { font-family: var(--mono); font-size: 11.5px; } .f-read::before { content: '↗'; } .f-search::before { content: '⌕'; } .f-search { font-style: italic; } .f-more::before { content: '…'; } .f-more { color: var(--faint); } ul.fold a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); } ul.fold a:hover { color: var(--brand-ink); border-bottom-color: var(--signal); } .fold-count { margin-top: 6px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; } ul.fold.grew > li:last-child { animation: fold-in .3s ease-out; } @keyframes fold-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } .terminal { background: var(--term-bg); color: var(--term-ink); border-radius: var(--radius); border: 1px solid var(--term-line); overflow: hidden; font-family: var(--mono); box-shadow: 0 8px 32px rgba(0,0,0,.18); } .term-head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--term-head); border-bottom: 1px solid var(--term-line); font-size: 12.5px; } .lights { display: flex; gap: 7px; } .lights i { width: 11px; height: 11px; border-radius: 50%; display: block; } .lights i:nth-child(1) { background: #ff5f57; } .lights i:nth-child(2) { background: #febc2e; } .lights i:nth-child(3) { background: #28c840; } .term-head .title { color: var(--term-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .term-head .spacer { flex: 1; } .term-head .elapsed { color: var(--term-muted); font-variant-numeric: tabular-nums; } .term-body { padding: 16px 16px 8px; min-height: 300px; max-height: 460px; overflow-y: auto; } ol.term-lines { list-style: none; margin: 0; padding: 0; font-size: 12.5px; line-height: 1.85; } ol.term-lines > li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; } .ln { color: var(--term-gutter); text-align: right; user-select: none; } .tx { color: var(--term-ink); overflow-wrap: anywhere; } .tx.stage { color: #fff; font-weight: 500; } .tx.stage::before { content: '// '; color: var(--term-dim); } .tx.step { color: var(--term-muted); } .tx.step::before { content: '› '; color: var(--term-dim); } .tx.ok { color: var(--term-green); } .tx.ok::before { content: '✓ '; } .tx.err { color: #ff7a6e; } .tx.err::before { content: '✗ '; } li.fresh .tx { animation: type-in .26s ease-out; } @keyframes type-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } } .caret { color: var(--signal); animation: blink .9s step-end infinite; } .term-foot { border-top: 1px solid var(--term-line); padding: 12px 16px 13px; } /* Six segments, not one width. A run spends most of its life in one stage, so a bar that fills by fraction sits still for minutes; a lit segment that breathes says "this step is being worked" without claiming to know how much of it is left. */ .bar { display: flex; gap: 3px; height: 2px; } .bar i { flex: 1; background: rgba(255,255,255,.09); border-radius: 2px; transition: background .4s ease; } .bar i.is-done { background: var(--signal); } .bar i.is-active { background: var(--term-amber); animation: pulse 1.4s ease-in-out infinite; } .foot-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 12px; color: var(--term-muted); } .foot-row .spacer { flex: 1; } .foot-row .pct { font-variant-numeric: tabular-nums; } .chips { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 13px; font-size: 11px; color: rgba(255,255,255,.3); } .chip { display: flex; align-items: center; gap: 6px; } .chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .chip.is-done { color: var(--signal); } .chip.is-active { color: var(--term-amber); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .run-hint { color: var(--muted); font-size: 13px; margin: 20px 2px 0; } /* The way off the run screen. Under the terminal, where somebody watching it is already looking. */ .run-away { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 2px 0; } .run-away .spacer { flex: 1; } .run-away .meta { font-size: 13px; color: var(--muted); } /* The same six steps, told once, before anything is running. */ .how { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 26px; } .how > div { background: var(--card); padding: 16px 18px; } .how .n { font-size: 11px; font-weight: 600; color: var(--faint); display: block; margin-bottom: 5px; font-variant-numeric: tabular-nums; } .how .t { font-weight: 600; font-size: 14.5px; display: block; } .how .s { font-size: 13px; color: var(--muted); } @media (prefers-reduced-motion: reduce) { li.fresh .tx, .chip.is-active, .caret, li.is-active .step-label::after, ul.fold.grew > li:last-child { animation: none; } } /* -------------------------------- result ------------------------------- */ .result-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .result-head .who-they-are { flex: 1 1 300px; } .score { flex: 0 0 auto; text-align: right; } .score .num { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.03em; } .score .verdict { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 4px; } .score.is-strong .num { color: var(--signal-dim); } .band { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--radius); overflow: hidden; margin-top: 20px; background: var(--hairline); gap: 1px; box-shadow: 0 0 0 1px var(--hairline); } .band > div { background: var(--card); padding: 15px 18px; } .band .v { font-size: 21px; font-weight: 700; letter-spacing: -.02em; } .band .k { font-size: 12px; color: var(--muted); margin-top: 2px; } .band .v.flag { color: var(--bad); } .pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } /* Filled and quiet, never outlined: a pill is a fact, not a control. */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 999px; border: 0; background: var(--fill-input); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* #83 — "invite" on a member chip. A link, because it goes somewhere (an inbox); inert once it has, so a second click cannot double-send. */ .pill .member-invite:disabled { color: var(--muted); text-decoration: none; cursor: default; } /* #102 — who put this address here. The chip is unchanged; the line sits under it, so the access list still reads as a row of pills at a glance and answers "did I put that there?" the moment you look at one. */ .access-list { align-items: flex-start; row-gap: 12px; } .access-entry { display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-start; } .access-by { font-size: 11px; color: var(--muted); padding-left: 12px; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 8px; } /* #100 Slice 2 — the rung, on the chip and in the picker beneath it. The badge is drawn only for owner and admin: every named entry is at least a member, so a badge on all of them would be a badge on none. */ .pill .tiny-role { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; background: var(--ok-wash); color: var(--signal-dim); } /* #100 Slice 4 — the whole-company grant, and the queue of people nobody has answered yet. Both sit under the list rather than in it: everything in the list can sign in, and neither of these is a plain member's business to press. The grant line is a sentence first and buttons second, because what `@acme.com` actually admits is the part nobody knew. */ .grant { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); padding-left: 12px; margin-top: 1px; } .grant.settled { color: var(--muted); opacity: .85; } .pending-grants { margin-top: 12px; display: grid; gap: 6px; } .pending-grants .pill.waiting { background: var(--fill-input); color: var(--muted); border: 1px dashed var(--line); } .tiny-select { font: inherit; font-size: 11px; color: var(--muted); background: var(--fill-input); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; } .tiny-select:disabled { opacity: .5; } /* The agency relationship (#100 Slice 5). The two acts that settle it sit on one row under the sentence that explains them — a handover and a detach are answers to the same question, and separating them would read as two unrelated dangers rather than one choice with two ends. */ .agency-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } /* The capability table. A list of sentences, not a grid: each line is one thing you can or cannot do, and the rung that would is the only annotation it earns. */ .caps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; } .caps .cap { display: flex; gap: 10px; align-items: baseline; font-size: 13px; } .caps .cap::before { content: '·'; color: var(--muted); } .caps .cap-needs { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .muted-caps .cap { color: var(--muted); } .pill.strong { color: var(--signal-dim); background: var(--ok-wash); } .pill.bad { color: var(--bad); background: var(--bad-wash); } /* A comp inside its last week (#350). Amber, not the green `strong`: "ends in 3 days" is a thing to act on, and green says the opposite. Both themes already carry the tokens the warn banner uses. */ .pill.soon { color: var(--warn); background: var(--warn-bg); } .pill.accent { color: var(--signal-dim); background: var(--ok-wash); } /* A run that is still going, wherever it is shown. The dot is the only thing on a saved-pitches row that moves, which is the point of it. */ .pill.live { color: var(--signal-dim); background: var(--ok-wash); } .pill.live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: pulse 1.4s ease-in-out infinite; } .item.running { border-color: color-mix(in srgb, var(--signal) 28%, var(--line)); } .one-thing { margin: 20px 0; border-left: 3px solid var(--signal); background: var(--mint); padding: 15px 18px; border-radius: 0 10px 10px 0; } .one-thing .eyebrow { display: block; margin-bottom: 5px; } /* The connector's own draft, nested inside the ask it travels with (#356). */ /* The two readings disagreed (#651): outside the brief, and a buyer anyway. Sits under The one thing, and is deliberately quiet — it is a second reading rather than an alarm, and the screen already carries one number at the top. Bordered rather than filled so it reads as an aside. */ .off-brief { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--muted) 6%, transparent); font-size: 13.5px; line-height: 1.55; } .off-brief p { margin: 0; } .off-brief-head { margin-bottom: 4px; } .off-brief-foot { margin-top: 8px; } .one-thing .onward { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } /* The glance (#267 slice 1). One card, one look — so the score keeps the full-size numeral rather than #result-head's one-line version, because on this screen the score IS the point, and everything under it is one line per fact. No second column, no disclosure, nothing to configure: the reader is deciding exactly one thing, which is whether this company is worth the full run. */ #glance-card .result-head { align-items: flex-start; } #glance-card .who-they-are h1 { margin: 0 0 6px; } #glance-card .who-they-are .sub { margin: 0; } /* #288: the caveat that qualifies the score, directly under the argument it qualifies. Muted and one line — it is a footnote to the number, never a second thesis competing with it. */ .scored-as { margin: -10px 0 0; color: var(--muted); font-size: 13px; } /* ------------------------------------------------------------------ #403 Overriding a fit score, and teaching the studio why it was wrong. The score becomes the control, so it needs to *look* pressable without becoming a second primary action on a card whose one primary is `Get the full pitch` (style rule 8). A dotted underline on the verdict word and a hover tint is the whole affordance — no border, no fill, no colour change to the number itself, which stays the fact it always was. */ .score.as-control { background: none; border: 0; padding: 4px 6px; margin: -4px -6px; font: inherit; color: inherit; cursor: pointer; border-radius: 10px; } .score.as-control .verdict { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--faint); } .score.as-control:hover { background: var(--fill); } .score.as-control:hover .verdict { color: var(--accent-ink); text-decoration-color: currentColor; } /* #416: the re-score, made visible on the thing it is recomputing. The number goes dim rather than hidden — a reader mid-decision should still be able to see what it *was*, and a blank where a score used to be reads as an error. The pill is the only moving thing on the card, so it is also the answer to "is this working". */ .score.as-control.is-rescoring { cursor: default; } .score.as-control.is-rescoring:hover { background: none; } .score.is-rescoring .num, .score.is-rescoring .verdict { opacity: .35; } .rescoring { display: block; margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: var(--tint); color: var(--accent-ink); font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .rescoring { animation: rescore-beat 1.6s ease-in-out infinite; } @keyframes rescore-beat { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } } .rescore-line { margin: 10px 0 0; } .correct-panel { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .correct-panel .ask { font-weight: 600; margin: 0; } .correct-field { width: 100%; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--fill-input); color: var(--brand-ink); } .correct-field:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } /* The one line that says what was learned. Green because it is the studio getting better, which is the same thing --signal means everywhere else. */ .learned { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 16px; padding: 12px 15px; border-radius: 10px; background: var(--ok-wash); font-size: 14px; line-height: 1.5; } .learned .mark { color: var(--signal-dim); font-weight: 700; } .learned .meta { display: inline; } .learned.is-refused { background: var(--warn-bg); } .learned.is-refused .mark { color: var(--warn); } .learned .undo { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent-ink); cursor: pointer; text-decoration: underline; margin-left: auto; } .learned .undo:hover { color: var(--coral-hover); } .learned .undo:disabled { color: var(--faint); cursor: default; text-decoration: none; } /* The same corrections, read back on the brief — where they can be removed long after the card that made them was closed. */ .corrections { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .corrections li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; padding: 9px 12px; border-radius: 9px; background: var(--ok-wash); } .corrections li span { flex: 1; } .corrections .drop { background: none; border: 0; padding: 0 2px; font: inherit; font-size: 17px; line-height: 1; color: var(--faint); cursor: pointer; } .corrections .drop:hover { color: var(--bad); } .corrections .drop:disabled { color: var(--hairline); cursor: default; } /* The hunt list is the same component, positive rather than corrective — the neutral fill, because "keep looking for this" is a setting, not a repair. */ .corrections.is-hunt li { background: var(--fill-input); } /* ------------------------------------------------------------------ #408 Describe the leads you want. A tray, not paper: the bordered grey fill is what #277 established means "type here", and this is the one thing on the Leads screen that is a box to fill rather than a fact the studio holds. It sits between the shelf and Other actions, quiet enough that the tiles above it stay the screen's subject. */ .ask-leads { margin-top: 26px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--fill-input); display: flex; flex-direction: column; gap: 10px; } .ask-leads .eyebrow { display: block; } .ask-leads-field { width: 100%; font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--brand-ink); } .ask-leads-field:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .ask-leads-field::placeholder { color: var(--faint); } .ask-leads-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ------------------------------------------------------------------ #406 Who we hunt — read as a document, edited in place. Each part is a heading, the answer as a plain statement, and the editor under it. The answer is set in ink at reading size rather than in a form control, because the first job of this screen is to be *read*: somebody opens it to find out what the studio thinks it is hunting, and only then to change it. */ .hunt-part { padding: 18px 0; border-top: 1px solid var(--hairline); } .hunt-part:first-child { border-top: 0; padding-top: 6px; } .hunt-h { margin: 0 0 6px; font-size: 15px; font-weight: 600; } /* One company per line is the shape the question asks for, so the answer keeps it (#404) rather than running them into a paragraph. */ .hunt-said { margin: 0 0 10px; font-size: 16px; line-height: 1.5; white-space: pre-line; } /* The disqualifiers are shown here and edited on Suppress list, so they wear the muted fill of a fact rather than the wash of something written here. */ .corrections.is-never li { background: var(--fill); color: var(--muted); } .glance-signals, .glance-roles { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 9px; } .glance-signals li { display: flex; gap: 10px; align-items: baseline; } .glance-signals .mark { flex: 0 0 auto; font-weight: 700; font-size: 13px; } .glance-signals li.for .mark { color: var(--signal-dim); } .glance-signals li.against .mark { color: var(--bad); } .glance-roles li span { color: var(--muted); } .glance-roles li .meta { margin: 2px 0 0; } /* The people press (#270, slice 2): the button, then the live line, then the timing — one small row under the roles, never a second section. */ .glance-people-foot { margin-top: 12px; } .glance-people-foot .meta { margin: 0; } /* The asset presses (#271): one chip per deliverable, one row. */ .glance-assets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .glance-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); } .glance-foot .spacer { flex: 1; } /* The target is context, not the point: one line, always. Its profile is the Summary step, where it can be read rather than stepped over. */ #result-head { padding: 14px 22px; } #result-head h1 { font-size: 21px; margin: 0; } #result-head .who-they-are { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } #result-head .pills { margin-top: 0; } #result-head .score { display: flex; align-items: baseline; gap: 8px; } #result-head .score .num { font-size: 26px; } #result-head .score .verdict { margin-top: 0; } #result-head .head-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Reading tabs go quiet ink, not coral: coral is for acting, and picking a tab is reading (#81, per the mockup). */ .tabs { display: flex; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 20px; position: sticky; top: 0; z-index: 10; background: var(--brand-surface); } .tabs button { background: none; border: 0; padding: 10px 2px 12px; font: inherit; font-size: 13.5px; cursor: pointer; color: var(--muted); display: flex; align-items: center; gap: 7px; } .tabs button:hover { color: var(--brand-ink); } .tabs button[aria-selected=true] { color: var(--brand-ink); box-shadow: inset 0 -2px 0 var(--brand-ink); font-weight: 600; } /* The four assets live under one tab; this picks between them. */ .subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: -8px 0 18px; } .subtabs button { background: var(--fill-input); border: 0; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; color: var(--muted); } .subtabs button:hover { color: var(--brand-ink); } .subtabs button[aria-selected=true] { background: var(--brand-ink); color: var(--on-ink); font-weight: 600; } .panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .panel-head .primary { padding: 8px 16px; font-size: 13px; } .panel-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; } .panel-head .spacer { flex: 1; } .ghost.tiny { padding: 3px 10px; font-size: 11.5px; } /* An ⓘ that explains the section without giving the method away. Named info-tip, not info: "info" is also a banner tone, and the bare class turned every info banner into a 16px circle with a tooltip. */ .info-tip { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); display: inline-grid; place-items: center; font-size: 10px; color: var(--faint); cursor: help; position: relative; flex: 0 0 auto; font-weight: 600; } .info-tip:hover, .info-tip:focus-visible { border-color: var(--brand-ink); color: var(--brand-ink); outline: none; } .info-tip::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 8px); width: 320px; background: var(--term-bg); color: rgba(255,255,255,.88); border-radius: 10px; padding: 11px 13px; font-family: var(--studio-font); font-size: 12.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; z-index: 50; opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.22); } .info-tip:hover::after, .info-tip:focus-visible::after { opacity: 1; visibility: visible; } /* The case, before the argument. */ ul.case { margin: 0; padding-left: 20px; } ul.case li { margin-bottom: 9px; font-size: 15px; } /* What a push would write (#697): the list, the fold, one button. */ .dry-run { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 10px; } .dry-run .lead { margin: 0; font-weight: 600; } .dry-run ul { margin: 8px 0 0; padding-left: 18px; } .dry-run li { margin: 3px 0; font-size: 14px; } .dry-run details.more { margin-top: 10px; padding-top: 10px; } .dry-run .wire { display: grid; gap: 8px; margin-top: 8px; } .dry-run .wire pre { margin: 0; padding: 8px 10px; font-size: 11.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; background: color-mix(in srgb, var(--muted) 6%, transparent); border-radius: 6px; } .dry-run .row { display: flex; gap: 8px; align-items: center; margin-top: 12px; } details.more { margin-top: 22px; border-top: 1px solid var(--hairline); padding-top: 14px; } details.more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-ink); list-style: none; } details.more summary::-webkit-details-marker { display: none; } details.more summary::before { content: '▸ '; } details.more[open] summary::before { content: '▾ '; } details.more .prose { margin-top: 12px; } .two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; } .two-col h3 { margin-top: 0; } .item.signal.for { border-left: 3px solid color-mix(in srgb, var(--signal) 55%, transparent); } .item.signal.against { border-left: 3px solid color-mix(in srgb, var(--bad) 50%, transparent); } .signal-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 6px; font-size: 11.5px; color: var(--faint); } .strength { font-weight: 600; border-radius: 5px; padding: 2px 7px; /* #119: the sand fill has its own ink — --muted on it is 4.15:1 in light. */ background: var(--sand); color: var(--on-sand); } .strength.strong { background: var(--mint); color: var(--signal-dim); } /* No sand behind it, so the general secondary gray is the right ink again. */ .strength.weak { background: transparent; border: 1px solid var(--line); color: var(--muted); } .one-thing-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } /* The first deck's three answers (#670): one primary, two quiet, one row. */ .deck-answers { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; } /* A source is a number on the sentence (#671): hover for what the page said, press for the page. The tip is the `.info-tip` one, anchored to the mark. */ .cites { display: inline; margin-left: 4px; } .cite { position: relative; display: inline-block; vertical-align: super; font-size: 10.5px; line-height: 1; font-weight: 600; color: var(--accent-ink); text-decoration: none; padding: 0 2px; margin-right: 1px; } .cite:hover, .cite:focus-visible { color: var(--brand-ink); outline: none; } .cite::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 8px); width: 280px; background: var(--term-bg); color: rgba(255,255,255,.88); border-radius: 10px; padding: 11px 13px; font-family: var(--studio-font); font-size: 12.5px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; z-index: 50; white-space: normal; opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.22); } .cite:hover::after, .cite:focus-visible::after { opacity: 1; visibility: visible; } /* The last marks on a line would push the tip off the right edge. */ .cite:nth-child(n+6)::after { left: auto; right: 0; } .one-thing-head .eyebrow { flex: 1; } /* How close a lookalike is, said twice: a bar and a number. */ .similarity { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; } .similarity i { display: block; width: 54px; height: 4px; border-radius: 2px; background: var(--line); position: relative; } .similarity i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--signal); border-radius: 2px; } td .rank, .rank { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sand); font-size: 11px; font-weight: 600; color: var(--on-sand); /* #119 */ font-variant-numeric: tabular-nums; } tbody tr:first-child .rank { background: var(--brand-accent); color: var(--on-accent); } a.linkedin { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: #0a66c2; color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; font-family: var(--studio-font); } a.linkedin.search { background: none; color: var(--linkedin); border: 1px dashed var(--linkedin); opacity: .75; } a.linkedin.search:hover { opacity: 1; } /* The address beside the badge (#465): one line, never wrapped away from it. */ td.contact { white-space: nowrap; } td.contact a.email { margin-left: 8px; font-size: 13px; vertical-align: middle; } td.contact a.phone { margin-left: 8px; font-size: 13px; vertical-align: middle; font-variant-numeric: tabular-nums; } /* The phone press (#466): dashed like the search tiles — a lookup, never a number, until there is one. One small question per row, and nothing at all where the verb is off. */ button.phone-find { margin-left: 8px; font: inherit; font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 5px; border: 1px dashed var(--muted); background: none; color: var(--muted); cursor: pointer; opacity: .75; vertical-align: middle; line-height: 1.4; } button.phone-find:hover { opacity: 1; } button.phone-find:disabled { cursor: default; opacity: .4; } #glance-people button.phone-find { margin-left: 8px; } /* One look per person (#467): the name carries its confidence in a tooltip, an unverified one reads quieter, and the source is one small link after the why. */ table.people .person-name { font-weight: 600; } table.people .person-name.unverified { font-weight: 500; color: var(--muted); } table.people .meta.quiet { font-size: 12px; opacity: .75; } table.people td.contact .meta.quiet { display: block; margin-top: 4px; } table.people a.source { font-size: 12px; margin-left: 6px; white-space: nowrap; } th .info-tip { cursor: help; } /* The connection-degree chips (1st · 2nd · 3rd+) on the people table and its everyone-at line. Dashed like the table's search tiles — every one is a search, never a found profile. */ .who-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .who-links a { font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px; color: var(--linkedin); border: 1px dashed var(--linkedin); text-decoration: none; opacity: .8; } .who-links a:hover { opacity: 1; } .who-everyone { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 2px 0 14px; } .who-everyone .who-links { margin-top: 0; } /* Numbered how-to steps (the network import guide). */ .guide-steps { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; } .guide-steps li { color: var(--muted); font-size: 13.5px; line-height: 1.5; } /* --------------------- your network, minimal (#80) --------------------- * * One explicit grid with a gap — the fields can no longer land on top of * each other, whatever a browser extension inflates them to. The category * is a select (which extensions leave alone), and every explanation lives * behind the header's ⓘ or inside a folded door. */ .info-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; margin-left: 4px; vertical-align: 1px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font: 600 11px/1 var(--studio-font); cursor: pointer; } .info-dot:hover, .info-dot[aria-expanded="true"] { color: var(--brand-ink); border-color: var(--brand-ink); } .net-info { border-left: 3px solid var(--line); padding: 2px 0 2px 14px; margin: -6px 0 22px; } .net-info p { margin: 0 0 8px; font-size: 13px; color: var(--muted); max-width: 62ch; } .net-info p:last-child { margin-bottom: 0; } .net-form { display: grid; gap: 12px; } .net-cat-row { display: flex; gap: 10px; flex-wrap: wrap; } .net-cat-row select { width: auto; padding-right: 36px; } .net-cat-row input { flex: 1; min-width: 180px; } .net-form textarea { display: block; } .net-alt { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .net-guide { border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px 16px; margin-top: 12px; } .net-guide .sort-row { width: fit-content; } .net-guide .guide-steps { margin-top: 10px; } .net-guide .field-help { margin-top: 12px; } .net-file { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; } /* --------------------------- editing a block --------------------------- */ .block { position: relative; } .block:hover > .pencil, .pencil:focus-visible { opacity: 1; } /* An email's header already holds Copy, so its pencil takes the bottom. */ .block:has(.email) > .pencil { top: auto; bottom: 10px; } .pencil { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; background: #fff; border: 1px solid color-mix(in srgb, var(--accent-ink) 35%, transparent); color: var(--accent-ink); font-size: 13px; line-height: 1; opacity: 0; transition: opacity .12s ease; } .pencil:hover { background: var(--tint); } .slide.is-hero + .pencil { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; } .block-form { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: var(--card); display: grid; gap: 14px; margin-bottom: 12px; } .block-label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .block-field { font-family: var(--studio-font); font-size: 14px; } textarea.block-field { min-height: 0; line-height: 1.6; } .block-actions { display: flex; gap: 8px; } .proposal-section { padding-right: 44px; } .actions-menu { position: relative; } .actions-menu > .ghost { padding: 7px 12px; } .actions-menu .menu, .outcome-pick .menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; z-index: 30; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 5px; box-shadow: var(--shadow-menu); } .actions-menu .menu button, .outcome-pick .menu button { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; padding: 8px 11px; border-radius: 7px; color: inherit; } .actions-menu .menu button:hover, .outcome-pick .menu button:hover { background: var(--sand); color: var(--accent-ink); } /* The outcome picker (#414): the badge that was already on every card is the control, so recording "they replied" costs a press rather than a screen. */ .outcome-pick { position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; } .outcome-pick > .pill { cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; padding: 4px 12px; } .outcome-pick > .pill:hover { color: var(--accent-ink); } .outcome-pick > .pill.quiet { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--faint); } .outcome-pick > .pill.quiet:hover { box-shadow: inset 0 0 0 1px var(--accent-ink); color: var(--accent-ink); } .outcome-pick .menu { min-width: 210px; } .menu-rule { height: 1px; background: var(--hairline); margin: 5px 8px; } /* #287: a lookalike row carries its own Glance beside the pick. The button is a sibling of the label, never a child of it — a button inside a label ticks the checkbox on its way to being pressed. */ .item.pickable { display: flex; align-items: flex-start; gap: 12px; } .item.pickable > .pick-row { flex: 1; min-width: 0; } .item.pickable > button { flex: 0 0 auto; } .pick-row { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; } .pick-row input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--accent-ink); flex: 0 0 auto; } .pick-spacer { width: 16px; flex: 0 0 auto; } .pick-body { flex: 1; min-width: 0; } .refine { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); } .refine-row { display: flex; gap: 10px; align-items: center; } .refine-row input { flex: 1; font-size: 13.5px; } .refine .meta { display: block; margin-top: 8px; } /* Ask the studio (#50): a conversation, question right, answer left. */ .ask-log { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; max-height: 460px; overflow-y: auto; } .ask-q { align-self: flex-end; max-width: 82%; background: var(--sand); border: 1px solid var(--line); border-radius: 12px 12px 3px 12px; padding: 9px 14px; white-space: pre-wrap; } .ask-a { align-self: flex-start; max-width: 92%; border-left: 3px solid var(--signal); background: var(--mint); border-radius: 0 10px 10px 0; padding: 11px 15px; } .ask-a .prose p:last-child { margin-bottom: 0; } .ask-a.thinking { color: var(--muted, inherit); font-style: italic; } .ask-a .pill.bad { margin-top: 8px; display: inline-block; } .ask .meta { display: block; margin-top: 8px; } .item.fill input { margin-top: 9px; } .item.fill.done { border-color: color-mix(in srgb, var(--signal) 40%, transparent); background: color-mix(in srgb, var(--mint) 45%, transparent); } /* The deliverables are the client's copy, so they are set in the client's type with the client's tokens in scope. Everything outside — the fit thesis, the checks, the chrome — is the studio's own analysis and stays in the studio's type. One rule, rather than a list of selectors that drifts. */ .brand-scope { font-family: var(--brand-font); --accent: var(--client-accent, var(--brand-ink)); --primary: var(--client-primary, var(--brand-ink)); --surface: var(--client-surface, var(--card)); --ink: var(--client-ink, var(--brand-ink)); } /* ---------------------------------- deck --------------------------------- Slides, not paragraphs. Every rule here sits inside .brand-scope, so a client's brand.css can restyle any of it — these are their slides. */ .deck { display: grid; gap: 14px; } .slide { border: 0; border-radius: var(--radius); padding: 26px 28px; background: var(--card); box-shadow: var(--shadow-soft); } .slide-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .slide .slide-label { font-size: 11.5px; font-weight: 600; color: var(--muted); } .slide .slide-n { margin-left: auto; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; } .slide h4 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -.025em; line-height: 1.16; max-width: 26ch; } .slide .slide-sub { color: var(--muted); margin: 9px 0 0; font-size: 15px; max-width: 52ch; } .slide ul { margin: 16px 0 0; padding-left: 20px; } .slide li { margin-bottom: 7px; font-size: 15px; } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 20px; } .tile { border-radius: 10px; padding: 14px 16px; background: color-mix(in srgb, var(--client-accent, var(--brand-ink)) 9%, #fff); } .tile-v { font-size: 27px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; } .tile-l { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .tile-src { margin-top: 8px; } .tile.unsourced { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); } /* The opening slide is the one that has to land, so it gets the colour. */ .slide.is-hero { background: var(--client-primary, var(--brand-ink)); border-color: transparent; color: #fff; padding: 34px 32px; } .slide.is-hero .slide-label { color: rgba(255,255,255,.6); } .slide.is-hero .slide-n { color: rgba(255,255,255,.25); } .slide.is-hero h4 { font-size: 30px; } .slide.is-hero .slide-sub { color: rgba(255,255,255,.72); } .slide.is-hero .tile { background: rgba(255,255,255,.1); } .slide.is-hero .tile-v { color: #fff; } .slide.is-hero .tile-l { color: rgba(255,255,255,.65); } .slide.is-hero .pill { color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.28); background: none; } .slide.is-hero .go { color: #fff; } .slide.is-hero mark.ph { background: rgba(255,255,255,.2); border-bottom-color: rgba(255,255,255,.5); color: #fff; } .slide.is-hero .notes summary { color: rgba(255,255,255,.6); } .slide.is-hero .notes { border-top-color: rgba(255,255,255,.18); color: rgba(255,255,255,.6); } /* A phased slide reads left to right: the period, then what happens in it. */ .tiles.phased { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .tiles.phased .tile { background: color-mix(in srgb, var(--client-primary, var(--brand-ink)) 7%, #fff); } .tiles.phased .tile-v { font-size: 20px; } .tiles.phased .tile-l { font-size: 13px; color: var(--brand-ink); margin-top: 5px; } .slide.is-close { border-color: var(--brand-ink); border-width: 2px; } .notes { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13.5px; color: var(--muted); } .notes summary { cursor: pointer; font-size: 11.5px; font-weight: 600; list-style: none; color: var(--faint); } .notes summary::-webkit-details-marker { display: none; } .notes summary::before { content: '▸ '; } .notes[open] summary::before { content: '▾ '; } .notes > div { margin-top: 8px; } /* ------------------------------- one-pager ------------------------------- A designed, print-ready page (#261): white paper whatever the theme, the workspace's mark up top, the reader's stake before the sender's claim, and one call to action that cannot be missed. Sits inside .brand-scope, so a client's brand.css can restyle any of it. */ .one-pager { background: #fff; color: #1c1c1c; border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 44px 48px; max-width: 760px; } .one-pager .op-head { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; } .one-pager .op-logo { max-height: 44px; max-width: 180px; object-fit: contain; } .one-pager .op-from { font-weight: 700; letter-spacing: -.01em; color: var(--client-ink, #1c1c1c); } .one-pager .op-headline { margin: 0 0 18px; font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; max-width: 26ch; color: var(--client-ink, #1c1c1c); } .one-pager .op-value { margin: 0 0 16px; } .one-pager .op-value .eyebrow { color: var(--client-primary, var(--brand-ink)); } .one-pager .op-value p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.55; max-width: 62ch; } .one-pager .op-points { margin: 18px 0 0; padding-left: 20px; } .one-pager .op-points li { margin-bottom: 7px; font-size: 15px; } .one-pager .op-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; padding: 22px 24px; border-radius: 12px; background: var(--client-primary, var(--brand-ink)); color: #fff; } .one-pager .op-cta-words { flex: 1 1 260px; } .one-pager .op-cta-words strong { display: block; font-size: 17px; } .one-pager .op-cta-words div { margin-top: 4px; opacity: .85; font-size: 14px; } .one-pager .op-cta-button { display: inline-block; padding: 12px 22px; border-radius: 999px; background: #fff; color: var(--client-primary, var(--brand-ink)); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; } .one-pager .op-cta mark.ph { background: rgba(255,255,255,.2); border-bottom-color: rgba(255,255,255,.5); color: #fff; } .one-pager .op-cta mark.grounded { background: rgba(255,255,255,.18); box-shadow: inset 0 -1px 0 rgba(255,255,255,.45); } .email { border: 0; border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-soft); background: var(--card); } .email .email-head { display: flex; align-items: center; gap: 10px; padding: 11px 18px; background: var(--sand); border-bottom: 1px solid var(--line); } .email .email-head .spacer { flex: 1; } /* The head's colours are the client's to set, so the pill borrows whatever text colour the head has rather than assuming a light background. */ .email .email-head .pill { color: inherit; opacity: .75; background: none; border-color: color-mix(in srgb, currentColor 45%, transparent); } .email .email-head strong { font-size: 14px; } .email .subject { padding: 14px 18px 0; font-weight: 600; } .email .body { padding: 7px 18px 18px; white-space: pre-wrap; } .prose p { margin: 0 0 12px; } .prose h4 { margin: 20px 0 6px; font-size: 15px; font-weight: 700; } .cta { border: 1px solid var(--line); background: var(--sand); border-radius: var(--radius); padding: 18px 20px; margin-top: 16px; } .cta strong { display: block; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; } th { font-size: 11.5px; color: var(--muted); font-weight: 600; } /* Pill and source sit on one line whatever the word is, so the column does not go ragged between "likely" and "confirmed". */ td.confidence { white-space: nowrap; } td.confidence .go { font-size: 12px; margin-left: 8px; } /* ---------------------- client monitoring (#121) ---------------------- * * A wide table on an operator screen. It scrolls inside its own box rather * than widening the page, the numeric columns are tabular and right-aligned * so they can be read down as a column, and the headers sort. */ .monitor-wrap { overflow-x: auto; margin-top: 14px; } .monitor-wrap table { min-width: 940px; } /* Eight columns, not eleven (#126): the churn tables fit where the monitoring table cannot, and forcing them to the wider minimum would scroll a table that had no need to. */ .monitor-wrap.churn-wrap table { min-width: 660px; } .monitor-wrap th.num, .monitor-wrap td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .monitor-wrap td.who { min-width: 190px; } /* `.meta` is styled only inside `.item` everywhere else in this stylesheet, so a table cell's second line needs its own rule or it renders at body size in body colour. */ .monitor-wrap .meta { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; font-weight: 400; } .monitor-wrap th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } .monitor-wrap th.sortable:hover { color: var(--brand-ink); } .monitor-wrap th.sorted::after { content: ' ▾'; } .monitor-wrap th.sorted.asc::after { content: ' ▴'; } .monitor-wrap tr.quiet td.who strong { color: var(--bad); } .monitor-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; max-width: 78ch; } /* ------------------- which screens get used (#179) ------------------- * * Four narrow columns, so this one must not inherit the wide table's * minimum — it would scroll sideways for no reason. Rows for screens * nobody has ever opened are dimmed rather than hidden: they are the rows * the table exists for, and hiding them would answer the easy half. */ .monitor-screens { margin-top: 18px; border-top: 1px solid var(--hairline); padding-top: 12px; } .monitor-screens > summary { cursor: pointer; font-weight: 600; font-size: 14px; } .monitor-screens .monitor-wrap table { min-width: 420px; } .monitor-screens tr.cold td { color: var(--muted); } .monitor-screens tr.cold td:first-child::after { content: ' · never opened'; color: var(--bad); font-size: 12px; } .stack { display: grid; gap: 10px; } .item { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; } .item .meta { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; } .item.against { border-left: 3px solid color-mix(in srgb, var(--bad) 45%, transparent); } .item-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; } /* What next (#73): the step, the message to send, and what is owed. */ .next-step { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.35; } .next-draft { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--sand); } .next-draft .item-head { padding: 9px 14px 0; } .next-draft .body { padding: 8px 14px 14px; white-space: pre-wrap; line-height: 1.5; } .next-steps { list-style: none; margin: 14px 0 0; padding: 0; } .next-steps li { padding: 5px 0; border-top: 1px solid var(--line); } .next-steps label.check { display: flex; gap: 10px; align-items: baseline; cursor: pointer; } .next-steps label.check input { margin: 0; position: relative; top: 1px; } .next-steps li.done span:first-of-type { text-decoration: line-through; opacity: .55; } .next-steps .meta { margin-left: auto; white-space: nowrap; } /* Likely competitors (#338) — the first page of results for the phrase this client's buyers type. A ranked list is read down its numbers, so the position is a fixed column with tabular figures and everything else flows beside it; ten `.item` cards would be a wall where ten lines are a list. The numbers can skip (a domain that came back twice is kept once, at its better position), which is why they are printed rather than implied by order. */ .rank-standing { margin: 0 0 4px; font-size: 17px; font-weight: 600; } .rank-term { color: var(--muted); font-weight: 400; } .rank-list { display: grid; margin-top: 14px; } .rank-row { display: grid; grid-template-columns: 2.4ch minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--hairline); } .rank-row .pos { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } .rank-row .who { min-width: 0; } .rank-row .who a { overflow-wrap: anywhere; } .rank-row .note { color: var(--muted); font-size: 13px; margin-left: 8px; } /* Not a company: a listicle, a forum thread, a directory. Still on the list, because position 2 being a magazine is a real fact about the term — just never offered as something to research. */ .rank-row.other .who { color: var(--muted); } .rank-row.ours { background: color-mix(in srgb, var(--signal) 9%, transparent); border-radius: 8px; padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; } .rank-row.ours .who { font-weight: 600; } /* The block's own bottom margin lives here rather than on the slot: the footer is the last thing in it in every state that draws a list, and the form below must not read as part of the search. */ .rank-note { margin: 11px 0 30px; font-size: 12.5px; color: var(--muted); } /* Suggested competitors (#462). One row per rival: the name, the reason, the press. The reason is the row's whole value — a name without one is a keyword list with better manners — so it takes the width and the button sits at the end rather than competing with it for the eye. */ .rival-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0; } .rival-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head act" "why act"; gap: 2px 14px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); } .rival-head { grid-area: head; display: flex; align-items: baseline; gap: 8px; min-width: 0; } .rival-name { font-weight: 600; font-size: 15px; } .rival-source { font-size: 11.5px; color: var(--faint); text-decoration: none; } .rival-source:hover { color: var(--muted); text-decoration: underline; } .rival-why { grid-area: why; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); } .rival-row > button { grid-area: act; } @media (max-width: 560px) { .rival-row { grid-template-columns: 1fr; grid-template-areas: "head" "why" "act"; gap: 4px; } .rival-row > button { justify-self: start; margin-top: 8px; } } .rank-note .linky { font-size: 12.5px; } mark.ph { background: color-mix(in srgb, var(--warn) 16%, transparent); border-bottom: 1px dashed var(--warn); color: inherit; padding: 0 4px; border-radius: 3px; font-family: var(--mono); font-size: .9em; } mark.ph.filled { background: color-mix(in srgb, var(--signal) 12%, transparent); border-bottom-color: color-mix(in srgb, var(--signal) 55%, transparent); font-family: inherit; font-size: inherit; } /* Provenance for generated prose (#161): the sentences a draft owes to this company, and the line that counts them. Deliberately quieter than a placeholder — a placeholder is work outstanding, this is work done. */ mark.grounded { background: color-mix(in srgb, var(--signal) 13%, transparent); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--signal) 45%, transparent); color: inherit; border-radius: 3px; padding: 1px 0; } .slide.is-hero mark.grounded { background: rgba(255,255,255,.18); box-shadow: inset 0 -1px 0 rgba(255,255,255,.45); } .grounded-line { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; max-width: 78ch; } .grounded-line.none { color: var(--bad); font-weight: 600; } code { background: var(--sand); padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: var(--mono); } .finding { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; } .finding .sev { font-size: 11.5px; font-weight: 600; flex: 0 0 54px; } .finding.blocker .sev { color: var(--bad); } .finding.note .sev { color: var(--muted); } /* ---------------------------- autocomplete ---------------------------- */ .combo { position: relative; } ul.ac { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 7px 0 0; padding: 5px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-menu); max-height: 300px; overflow-y: auto; } /* * Above the box instead of below it, when below would sit on a primary * button (#507). `.combo` is the positioned parent either way, so this is * the same list, the same width, the same 7px of air — measured from the * other edge. */ ul.ac.up { top: auto; bottom: 100%; margin: 0 0 7px; } ul.ac li { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; cursor: pointer; font-size: 14px; } ul.ac li[aria-selected='true'] { background: var(--sand); } ul.ac .ac-name { font-weight: 600; } ul.ac .ac-domain { color: var(--muted); font-size: 13px; } ul.ac .ac-tag { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--muted); background: var(--fill-input); border-radius: 999px; padding: 2px 8px; } /* * `.empty` is the *whole-screen* empty state — centred, with 88px of air * around it, which is right when a screen has nothing on it at all. A small * slot inside a screen wants `.empty.inline`: the same quiet voice, left * aligned like every other word on the page and without the vertical air * (#195, where one sentence under a heading floated in the middle of the * suppress screen and read as a formatting fault). */ .empty { text-align: center; color: var(--muted); padding: 44px 20px; } .empty.inline { text-align: left; padding: 0; margin: 0 0 20px; max-width: 62ch; } .hidden { display: none !important; } footer { text-align: center; color: var(--faint); font-size: 12px; padding: 26px; } footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------ a shared pitch ---------------------------- The gate a recipient meets before they have an account, and the page the work lands on after. Everything below the gate is drawn by the same functions the studio uses, so there is nothing here about deliverables — only about being a stranger holding a link. */ /* Minting a link swaps the button for the link itself, because copying it is the only thing anyone wants to do next. */ .share { display: inline-flex; align-items: center; gap: 8px; } .share-url { width: 360px; max-width: 46vw; font-family: var(--mono); font-size: 12px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sand); color: var(--on-sand); /* #119 */ } /* Pausing or cancelling (#139). Deliberately NOT dressed as the danger zone below it: nothing here destroys anything, and a red border over a pause would tell the one lie the panel exists to correct. Plain card furniture, one fold above the one that does destroy things. */ .cancel-zone { margin-top: 12px; padding: 20px 22px; border-radius: var(--radius); /* Shell tokens, not `--surface`/`--ink`: those two are declared only inside `.brand-scope` (the deliverable renderer), so a panel on the settings screen using them would resolve to nothing and paint no background. */ border: 1px solid var(--line); background: var(--card); } .cancel-zone .why { font-size: 13px; color: var(--muted); margin: 0; } .cancel-zone .what { font-size: 14px; font-weight: 600; } .cancel-options { display: grid; gap: 2px; margin: 10px 0 0; } .cancel-option { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; line-height: 1.45; } .cancel-option:hover { background: var(--sand); } .cancel-option input { margin-top: 3px; flex: 0 0 auto; } .cancel-answer { margin-top: 4px; } .cancel-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } /* The one destructive control in the product. Set apart, and made to look like the thing it is. */ .danger { margin-top: 34px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); background: color-mix(in srgb, var(--bad) 4%, transparent); } /* What deletion does not do. Sits above the confirmation field because a warning read after the fact is a receipt, not a warning. */ .danger-billing { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); font-size: 13.5px; line-height: 1.55; } .danger-billing a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* And what happens to the workspaces this one made (#581). Same block, but deliberately NOT amber: it leads with the reassurance — the clients stay — and a second warning-coloured panel under the first would read as a second alarm about the thing it exists to say is safe. */ .danger-clients { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--muted) 8%, transparent); border: 1px solid var(--hairline); font-size: 13.5px; line-height: 1.55; } .danger h3 { margin: 0 0 6px; color: var(--bad); } .danger .why { font-size: 13px; color: var(--muted); margin: 0; } .danger-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .danger-row input { flex: 1 1 260px; } .danger-go { flex: 0 0 auto; border: 1px solid var(--bad); background: var(--card); color: var(--bad); border-radius: 10px; padding: 11px 22px; font: inherit; font-weight: 600; cursor: pointer; } .danger-go:hover:not([disabled]) { background: var(--bad); color: var(--on-accent); } .danger-go[disabled] { opacity: .4; cursor: default; } /* ------------------------------ the interview ----------------------------- One question at a time, with the research running above it. The strip is deliberately quiet: it is there to show the studio working, not to compete with the question being asked. */ .reading { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--sand); font-size: 13px; } .reading .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: 0 0 auto; animation: pulse 1.4s ease-in-out infinite; } .reading .what { font-weight: 600; } .reading .meta { font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; } .reading.done .dot { animation: none; } .reading.failed .dot { background: var(--bad); animation: none; } @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } } #ob-q-body textarea { min-height: 90px; } .q-foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; } /* Three manners, same message. Picking one is faster and truer than describing the voice you think you have. */ .sample { display: block; width: 100%; text-align: left; margin-bottom: 10px; cursor: pointer; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font: inherit; font-size: 14.5px; line-height: 1.55; transition: border-color .12s, background .12s; } .sample:hover { border-color: var(--brand-ink); } .sample.chosen { border-color: var(--accent-ink); background: var(--tint); box-shadow: inset 0 0 0 1px var(--accent-ink); } /* The first-run fork (#474): three doors, the most-pressed one already lit. Same card and same chosen grammar as .sample above — a second one invented for one screen is exactly the addition the design principle rules out — so all this adds is the two lines inside: what the door is, and the one line of what it gives you. */ .door-name { display: block; font-weight: 600; } .door-what { display: block; margin-top: 3px; font-size: 13px; color: var(--faint); } /* Example answers to question one, written for this workspace. They are whole sentences, so they are a short list to read down rather than a row of pills — a pill holding fifteen words is a pill in name only, and four of them wrapping into each other was the "funky" the operator was looking at. Quiet until hovered: this is the thing under the box, not the thing to do. */ .examples { margin-top: 20px; } .examples-label { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; color: var(--faint); } .example { display: block; width: 100%; text-align: left; cursor: pointer; position: relative; margin: 0 0 6px; padding: 9px 14px 9px 32px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--sand); font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--muted); transition: border-color .12s, color .12s, background .12s; } .example::before { content: '+'; position: absolute; left: 14px; top: 9px; color: var(--faint); transition: color .12s; } .example:hover { border-color: var(--accent-ink); background: var(--card); color: var(--brand-ink); } .example:hover::before { color: var(--accent-ink); } /* Short tokens — the partners found on their own site — which is what a pill is actually for. Solid and quiet, so clicking one reads as picking a name rather than as decoration. */ .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; } .chip-pick { border: 1px solid var(--hairline); background: var(--sand); color: var(--brand-ink); border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .12s, color .12s; } .chip-pick:hover { border-color: var(--accent-ink); color: var(--accent-ink); } /* Lit = its text is in the box right now (#264, multi-select): the same chosen grammar as .sample.chosen, and clicking a lit chip takes it out. */ .chip-pick.on { border-color: var(--accent-ink); background: var(--tint); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); } /* The signup fork (#128): the two chips that answer the screen's own headline. Same chip grammar as everywhere else — inventing a second one for the sake of one screen is exactly the addition the design principle rules out — a size up, because these answer an h1 rather than sit under a box, and separated from the line below so they read as the headline's answer rather than as the first field. */ .fork { margin: 14px 0 0; } .fork .chip-pick { font-size: 13.5px; padding: 7px 16px; } /* Where, and how big (#112) — two labelled boxes on one screen, each with a row of chips under it. Stacked rather than side by side at every width: the answers are sentences, and a two-column layout would give each of them half a line to be a sentence in. The chips sit closer to their own box than the default 18px, so it reads as one control and not as two things that happen to be near each other. */ .pair-field + .pair-field { margin-top: 22px; } .pair-field .chips { margin-top: 10px; } .pair-box { min-height: 54px; } /* ----------------------------- the first draft ---------------------------- What the studio has already made, shown before it asks anything (#162). Four blocks, each one saying where it came from, and three of them owned by a question — so the interview is three visible upgrades to something on screen rather than three questions in front of it. Quiet enough to read as a document rather than as a form: this is the deliverable, not the UI. */ .draft { margin: 0 0 26px; } .draft-head { margin: 0 0 18px; } .draft-head h2 { margin: 8px 0 0; font-size: 26px; letter-spacing: -.02em; line-height: 1.2; } .draft-head .sub { margin: 8px 0 0; } .draft-block { margin: 0 0 12px; padding: 14px 18px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--sand); } .draft-block:last-child { margin-bottom: 0; } /* Just changed by an answer. The point of the whole item is that an upgrade is watched happening, so it is announced for a moment and then settles. */ .draft-block.fresh { animation: draft-lit 1.6s ease-out 1; } @keyframes draft-lit { 0% { background: var(--tint); border-color: var(--accent-ink); } 100% { background: var(--sand); border-color: var(--hairline); } } .draft-label { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--faint); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .draft-from { font-weight: 500; color: var(--muted); } .draft-from.yours { color: var(--accent-ink); font-weight: 600; } .draft-line { margin: 7px 0 0; font-size: 15.5px; line-height: 1.45; font-weight: 600; } .draft-para { margin: 7px 0 0; font-size: 14.5px; line-height: 1.6; } .draft-points { margin: 8px 0 0; padding: 0; list-style: none; } .draft-points li { margin: 0 0 4px; padding-left: 16px; position: relative; font-size: 13px; line-height: 1.5; color: var(--muted); } .draft-points li::before { content: '·'; position: absolute; left: 6px; color: var(--faint); } /* A block only the client can fill. Said plainly rather than filled with something plausible — the empty line is the argument for answering. */ .draft-empty { margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: var(--faint); font-style: italic; } .draft-waiting { margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); } /* The evidence, folded (#374). Four blocks that describe the reader's own company sat at full length above the one thing they were meant to press; they are one disclosure now — reachable always, in the landing view never (`/style` rule 10). Quiet ink rather than coral: this is a way to read more, not the act the screen is for. */ .draft-sources { margin: 0 0 14px; } .draft-more { margin: 4px 0 0; } .draft-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 4px 0; } .draft-more > summary::-webkit-details-marker { display: none; } .draft-more > summary::before { content: '›'; display: inline-block; font-size: 15px; line-height: 1; transition: transform .15s ease; color: var(--faint); } .draft-more[open] > summary::before { transform: rotate(90deg); } .draft-more > summary:hover { color: var(--ink); } /* `--accent` is not a token this stylesheet defines (the studio's coral ink is `--accent-ink`), so this focus ring resolved to nothing and the control had no visible focus at all. Found making the same mistake in #381. */ .draft-more > summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; } .draft-more-body { margin-top: 12px; } @media (prefers-reduced-motion: reduce) { .draft-more > summary::before { transition: none; } } /* Where the goal at the top of Workspace settings came from. */ .goal-source { margin: -8px 0 0; font-size: 12.5px; color: var(--faint); max-width: 62ch; } /* ------------------------------- the wall --------------------------------- The free tier's upgrade screen (#422). Narrow and centred like the first cards below it, and for the same reason: one headline, one line, one button. Deliberately not the paused screen's full-page takeover — the rail stays, the library stays, and everything this workspace has made is one click away, because that is what is being sold. */ .upgrade { max-width: 560px; margin: 6vh auto 0; text-align: center; } .upgrade-title { margin: 12px 0 8px; font-size: 30px; letter-spacing: -.02em; } .upgrade .sub { margin: 0 auto; max-width: 44ch; } a.primary.upgrade-go { display: inline-block; margin: 26px 0 0; text-decoration: none; padding: 12px 26px; } .upgrade-fine { margin: 18px 0 0; font-size: 12.5px; color: var(--faint); } /* ---------------------------- the first cards ----------------------------- Three companies, one at a time, on the first screen inside a new workspace. Narrow on purpose: one company, a few facts and two buttons is the whole screen, and anything else on it turns a five-second judgement back into a decision. */ .first-run { max-width: 620px; margin: 2vh auto 0; } .fr-name { margin: 6px 0 2px; font-size: 30px; letter-spacing: -.02em; } /* One rule for affordance across the product: if it is coral, you can click it. A card with no website found says so in the same grey as everything else that is not a link. */ .fr-site { font-size: 13px; color: var(--faint); } a.fr-site { color: var(--accent-ink); } a.fr-site:hover { text-decoration: underline; } .fr-facts { list-style: none; padding: 0; margin: 22px 0 0; } .fr-facts li { position: relative; padding: 7px 0 7px 20px; font-size: 14.5px; border-bottom: 1px solid var(--hairline); } .fr-facts li:last-child { border-bottom: 0; } .fr-facts li::before { content: '·'; position: absolute; left: 4px; color: var(--faint); font-weight: 700; } .fr-why { margin: 20px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--sand); border: 1px solid var(--hairline); font-size: 14.5px; line-height: 1.5; } .fr-actions { display: flex; gap: 10px; align-items: center; margin-top: 24px; } /* The fourth card's one box (#364). The shared input rule above already gives it its fill, radius and focus ring; all this adds is the two things that differ — it sits under a heading rather than a label, and it is the whole question rather than one field among several. */ .fr-input { margin-top: 20px; font-size: 17px; font-weight: 500; } /* Getting started (#483). Numbered cards and nothing else above the fold — the one thing treg's screenshots got right that our rail did not. A done step keeps its number's place and its title and loses everything else, so the page shortens as it is worked rather than growing a column of ticks. */ /* No `.start-head h1` rule here on purpose (#781). There was one, at 26px and `margin: 0`, left from when this head was the *Getting started* headline — and being a class **and** a type it outranked `.start-greeting` below, so the greeting's size and the room under it were dead CSS. That is the whole of *"'Welcome back' and the 'search' are too squished together"*: the gap was not too small, it was never applied. The greeting is the only h1 this head has, so it styles itself. */ /* The greeting and the one box (#772, #781). ------------------------------------------------------------------------ #778 centred this screen in a 620px column to give it room, and the operator's verdict on it live was that it had become *"narrow(er) than all other screens"*. It had: `main` is 1120px for every screen in the studio, so a centred 620px block sits at a different left edge **and** a different width from the Library, the shelf and everything else, which reads as a different page rather than as a calm one. So the room stays and the centring goes: every block starts at `main`'s own left edge, like every other screen, and only the things that would look silly full width (the box, the two lists) carry a width of their own. */ :root { --start-col: 720px; } #view-start > * { max-width: var(--start-col); } #view-start { padding-top: 56px; } .start-head { margin: 0; } /* 30px read as glued to the box at this type size (the operator: *"'Welcome back' and the 'search' are too squished together"*), because a 36px line box eats most of it. */ .start-greeting { margin: 0 0 26px; font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; } /* The arrow sits **inside** the field. Beside it, it read as a second control with its own box; inside, the field is one thing to press. */ .start-ask-form { position: relative; } /* Card, not the app's grey field fill: at this size and with this much room around it the fill read as a box already filled in and switched off. */ .start-ask-form input { width: 100%; font-size: 16px; padding: 18px 62px 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); } .start-ask-form input:focus { border-color: var(--brand-ink); } .ask-go { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; cursor: pointer; background: var(--fill-input); color: var(--brand-ink); } .ask-go:hover { background: var(--hover-wash); } .ask-go[disabled] { opacity: .45; cursor: default; } /* What is waiting, as pills under the box (#781, the operator on Reevo's home screen: *"They use 'pills' to show tasks and 'what's next/ what's up' which is what we should do instead of an orphaned line of text"*). A muted sentence on its own line said what was waiting and gave a reader no reason to think it could be pressed; a pill with a mark, a border and a hover says *press me* without a word of explanation. */ .start-waiting { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .waiting-row { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; } .waiting-row:hover { border-color: var(--muted); background: var(--hover-wash); } .waiting-mark { display: inline-flex; flex: none; width: 22px; height: 22px; border-radius: 7px; align-items: center; justify-content: center; background: color-mix(in srgb, var(--pill) 14%, transparent); color: var(--pill); } .waiting-mark svg { width: 13px; height: 13px; } .waiting-n { font-variant-numeric: tabular-nums; font-weight: 600; } .start-step { display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start; padding: 18px 20px; margin: 0 0 12px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); } .start-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--fill-input); color: var(--muted); } .start-step.done .start-num { background: var(--mint, var(--fill-input)); color: var(--signal); } .start-step.done .start-step-title { color: var(--muted); } .start-body { min-width: 0; } .start-step-title { margin: 3px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; } .start-line { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); } .start-act { margin-top: 14px; } /* Getting started, in two steps (#495). The numerals moved **up** a level — from the three steps to the two sections — so `.start-num` is now a section marker and the steps carry a tick instead. Nothing else was invented: the step card is the one #483 shipped, and the six doors are `.sample` with `.door-name`/`.door-what` from the first-run fork (#474), which is why there is no `.start-door` paint here at all. A second card grammar for one screen is the addition the design principle rules out. */ .start-sec { display: flex; align-items: center; gap: 11px; margin: 30px 0 14px; } .start-sec:first-child { margin-top: 0; } /* One heading scale on this page (#771): the group names are the largest thing, the rows under them smaller. Reevo's columns are the reference. */ .start-sec h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; } .start-sec .start-num { background: var(--brand-ink); color: var(--on-ink); } .start-left { margin-left: auto; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--fill-input); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .start-left:empty { display: none; } /* A tick where the numeral was. Empty until it is earned — an unticked circle says "not yet" without saying which number you are on, because these three are a checklist and not an order. */ .start-tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px; font-size: 12px; font-weight: 700; line-height: 1; border: 1.5px solid var(--line); background: transparent; color: transparent; } .start-step.open .start-tick { border-color: var(--accent-ink); } .start-step.done .start-tick { background: var(--mint); border-color: var(--mint); color: var(--signal-dim); } /* A step that is neither done nor next is a title and nothing else, so it wants a row's height rather than a card's. */ .start-step:not(.open):not(.done) { padding-top: 13px; padding-bottom: 13px; } .start-step.done { padding-top: 13px; padding-bottom: 13px; } /* Step 1 as one row of three questions (#656): a card each, one Save and one Skip under the row. A done question is its title, a tick and one muted line, so the row shortens as it is answered rather than growing ticks. */ .start-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 820px) { .start-row { grid-template-columns: 1fr; } } .start-field { padding: 16px 18px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); min-width: 0; } .start-field-head { display: flex; align-items: flex-start; gap: 10px; } .start-field h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; } .start-field .start-tick { flex: none; margin-top: 1px; } .start-field.done h3 { color: var(--muted); } .start-field.done .start-tick { background: var(--mint); border-color: var(--mint); color: var(--signal-dim); } .start-field textarea { margin-top: 12px; min-height: 64px; font-size: 14px; } .start-field .chips { margin-top: 12px; gap: 6px; } .start-answer { margin: 8px 0 0 30px; font-size: 13.5px; color: var(--muted); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .start-actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; } /* One mark per door (#656): a tinted disc with the door's own shape, so the seven read apart at a glance. The hues live in one place each and are re-declared for dark, where a light-ground hue goes muddy. */ .start-door { display: flex; align-items: flex-start; gap: 14px; text-align: left; } .door-text { min-width: 0; } .door-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--door) 14%, transparent); color: var(--door); } .door-icon svg { width: 18px; height: 18px; } .door-shelf { --door: #E8533A; } .door-pitch { --door: #2F6FA8; } .door-counter { --door: #7A5EA8; } .door-lookalikes { --door: #00956A; } .door-people { --door: #B97E10; } .door-intro { --door: #0E8C8C; } .door-prep { --door: #5B6B7A; } :root[data-theme="dark"] .door-shelf { --door: #F0755F; } :root[data-theme="dark"] .door-pitch { --door: #6FA8D6; } :root[data-theme="dark"] .door-counter { --door: #A98FD6; } :root[data-theme="dark"] .door-lookalikes { --door: #2FBF8C; } :root[data-theme="dark"] .door-people { --door: #D99A2B; } :root[data-theme="dark"] .door-intro { --door: #3FB8B8; } :root[data-theme="dark"] .door-prep { --door: #9AA9B8; } /* Getting started as two columns (#770, calmed by #771): Find on the left, Engage on the right, each a swatch and a name over a stacked list of names. The hues are the three verbs' own and the rail wears the same ones (below), so a name here and the row it opens are one colour. The heading is the largest thing on the page and the rows under it are small: a 24px mark and a 14.5px name, a row that hugs its content, and the recommended one tinted where the name is rather than across the column. The columns stop at 340px each and sit 80px apart, so the block reads as two short lists with air around them rather than a screen-wide grid. */ :root { --verb-find: #E8533A; --verb-engage: #0E8C8C; --verb-teach: #7A5EA8; } :root[data-theme="dark"] { --verb-find: #F0755F; --verb-engage: #3FB8B8; --verb-teach: #A98FD6; } .verb-find { --verb: var(--verb-find); } .verb-engage { --verb: var(--verb-engage); } .verb-teach { --verb: var(--verb-teach); } /* Two lists with a line down the middle, not two blocks eighty pixels apart (#772, the operator's reference). The rule under each heading and the one between the columns are what let the rows breathe without the eye losing which column it is in — which is exactly what the gap was doing badly. */ .start-verbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; row-gap: 44px; margin-top: 12px; } .start-verb:first-child { padding-right: 34px; } .start-verb + .start-verb { padding-left: 34px; border-left: 1px solid var(--hairline); } @media (max-width: 720px) { .start-verbs { grid-template-columns: 1fr; row-gap: 34px; } /* One column, so the divider becomes the line between the two lists. */ .start-verb:first-child { padding-right: 0; } .start-verb + .start-verb { padding-left: 0; border-left: 0; } } /* The operator's **, twice over: between the box and the columns, and between the columns and what follows them. */ .start-head + .start-verbs { margin-top: 76px; } .verb-head { display: flex; align-items: center; gap: 11px; padding: 0 0 15px; margin: 0 0 18px; border-bottom: 1px solid var(--hairline); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; } .verb-swatch { flex: none; width: 20px; height: 20px; border-radius: 5px; background: var(--verb); } .verb-list { display: grid; gap: 14px; justify-items: start; } .verb-row { width: auto; align-items: center; gap: 12px; padding: 5px 12px 5px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; transition: background .12s; } .verb-row:hover { background: var(--hover-wash); } .verb-row.chosen { background: color-mix(in srgb, var(--verb) 10%, transparent); } .verb-row .door-icon { --door: var(--verb); width: 24px; height: 24px; border-radius: 6px; } .verb-row .door-icon svg { width: 14px; height: 14px; } .verb-row .door-name { font-weight: 500; } .verb-row.chosen .door-name { font-weight: 600; } /* The course sits well clear of the columns, and the tour is its first row (#771): the group rows' own shape, a play mark in the tick's circle. */ /* The operator's third **, before Learn Prospektor (#772). `renderCourse` moves the tour row into the course list (#771), so the element that actually follows the columns is this heading. */ .course-sec { margin-top: 84px; } .tour-session .start-tick { border-color: var(--accent-ink); color: var(--accent-ink); } .tour-session .start-tick svg { width: 11px; height: 11px; } .tour-session .path-name { font-weight: 600; } .start-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 720px) { .start-doors { grid-template-columns: 1fr; } } /* `.sample` carries a bottom margin for the stacked voice samples it was written for; inside a grid the gap does that job twice. */ .start-doors .sample { margin-bottom: 0; } /* An odd card would sit alone in a two-column row looking dropped. Spanning it reads as the last line of a paragraph rather than as a gap, and the rule holds for any count rather than for the seven that exist today. */ .start-doors > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* The course (#741): three groups, one row each, the open one a grid of cards in the website's blog idiom (`/resources/`: a picture, a topic in small caps, a title, a dek, a meta line). A closed group is a single line and a done group folds to its head and a tick, so the block is three lines tall once the course is read. The picture slot holds the day's number until #718's clips exist, and a done card holds a tick there. The open card spans the row with the picture beside the text, the how under both. The tick is `.start-tick` above, with `.done` on itself. */ .course { display: grid; gap: 8px; } .course-sec .ghost { margin-left: auto; } .path-session { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); } .path-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; } .path-head .start-tick { flex: none; margin-top: 0; } .path-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .path-session.done .path-name { color: var(--muted); font-weight: 500; } .path-time { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .start-tick.done { background: var(--mint); border-color: var(--mint); color: var(--signal-dim); } .lesson-grid { list-style: none; margin: 0; padding: 4px 16px 16px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .lesson { min-width: 0; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .12s, transform .1s; } .lesson:hover { border-color: var(--brand-ink); transform: translateY(-2px); } .lesson.chosen { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); transform: none; } .lesson-open { display: flex; flex-direction: column; gap: 5px; width: 100%; height: 100%; padding: 0 0 14px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; } .lesson-art { display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 8px; background: color-mix(in srgb, var(--accent-ink) 8%, var(--fill-input)); color: var(--accent-ink); font-family: var(--mono); font-size: 24px; font-weight: 500; letter-spacing: .04em; opacity: .85; } .lesson-art img { width: 100%; height: 100%; object-fit: cover; } .lesson.done .lesson-art { background: var(--mint); color: var(--signal-dim); } .lesson-topic, .lesson-meta { padding: 0 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; } .lesson-topic { color: var(--signal-dim); } .lesson-title { padding: 0 14px; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; } .lesson-dek { padding: 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted); flex: 1; } .lesson-meta { margin-top: 3px; color: var(--faint); text-transform: none; letter-spacing: .02em; font-size: 11px; } .lesson.done .lesson-title { color: var(--muted); font-weight: 600; } .lesson-panel { margin: 0 16px 16px; padding: 16px 18px; border: 1px solid var(--accent-ink); border-radius: var(--radius); background: var(--card); } .lesson-panel-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .lesson-panel ul { margin: 0 0 10px; padding-left: 18px; font-size: 14px; line-height: 1.55; } .lesson-panel li { margin: 0 0 3px; } .lesson-close { margin: 0 0 12px; font-size: 14px; line-height: 1.5; } .lesson-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; } /* Warm introductions (#497). The direction cards are the same `.sample` grammar as everywhere else, so all this adds is the two things a finding needs: a heading over the history, and a draft that reads as a draft. */ .intro-past { margin: 30px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .intro-run { padding: 16px 0; border-bottom: 1px solid var(--hairline); } .intro-run:last-child { border-bottom: 0; padding-bottom: 0; } .intro-run-head { margin: 0 0 10px; font-size: 14.5px; } .intro-draft { margin: 8px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--fill-input); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; } #intro-field { margin-top: 22px; } /* The portfolio roll-up (#452). A door is a company, the people who reach it, and one press — so it borrows the rival list wholesale and adds only the heading row and the mark that says whether this one has been pitched. */ .door-row { padding: 18px 0; border-bottom: 1px solid var(--hairline); } .door-row:last-child { border-bottom: 0; padding-bottom: 0; } .door-row-head { margin: 0 0 10px; font-size: 15px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .door-mark { margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--fill-input); color: var(--muted); white-space: nowrap; } .door-mark.pitched { background: var(--mint); color: var(--signal-dim); } .door-row-act { margin: 12px 0 0; } #intro-doors { margin-top: 4px; } /* The fifth card's five rows (#405). One line each and two taps: a probe is a two-second judgement, so it carries a name and one line where a real card carries facts, a score and an argument. The row is the whole control — nothing here is a link, because none of these companies is being offered. */ .fr-rates { list-style: none; padding: 0; margin: 22px 0 0; } .fr-rate { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hairline); } .fr-rate:last-child { border-bottom: 0; } .fr-rate-who { flex: 1; min-width: 0; } .fr-rate-name { display: block; font-size: 15px; font-weight: 600; } .fr-rate-line { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); } .fr-rate-pick { display: flex; gap: 6px; flex: none; } .rate-pick { min-width: 52px; padding: 7px 12px; font-size: 13.5px; font-weight: 600; border-radius: 999px; border: 1px solid var(--hairline); background: var(--card); color: var(--muted); cursor: pointer; } .rate-pick:hover { border-color: var(--brand-accent); color: var(--brand-ink); } /* Answered is a filled pill, and both answers fill the same way: a "no" that read as a rejection would make the cheap half of this the hard half. */ .rate-pick.on { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--on-ink); } .fr-learned { list-style: none; padding: 0; margin: 14px 0 0; } .fr-learned li { padding: 7px 0; font-size: 14.5px; line-height: 1.5; border-bottom: 1px solid var(--hairline); } .fr-learned li:last-child { border-bottom: 0; } @media (max-width: 520px) { .fr-rate { align-items: flex-start; } } /* Pressing "Run this one" used to swap in the next company with nothing said, so a decision that started real work looked like a card shuffling. This is the acknowledgement: the name that was decided, held for a beat, and the place the run went. Coral on the tick only — the rule holds, the tick is not a control, so it takes the ink colour and the weight instead. */ .fr-added { text-align: center; padding: 30px 0 8px; } .fr-check { margin: 0; font-size: 13px; color: var(--brand-ink); font-weight: 600; } .fr-added .fr-name { margin-top: 8px; } .fr-added-where { margin: 8px 0 0; color: var(--muted); font-size: 14px; } /* A beat, not a measurement — the run takes minutes and reports its real progress in the in-progress list. A bar that pretended to track it from here would be inventing the one number this screen cannot know. */ .fr-progress { height: 3px; margin: 22px auto 0; max-width: 260px; border-radius: 999px; background: var(--hairline); overflow: hidden; } .fr-progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--brand-accent); transition: width .82s cubic-bezier(.22,.61,.36,1); } .fr-progress span.go { width: 100%; } @media (prefers-reduced-motion: reduce) { .fr-progress span { transition: none; } .fr-progress span.go { width: 100%; } } /* A count that is also the way to go and look at what it counts. */ .linky { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; } /* Upload a customer list instead of typing it (#678). One line under the box it belongs to, and nothing else: the consequence is said in the banner the press answers with, never as standing copy (`/style` rule 8). */ .start-upload { margin-top: 8px; } /* The way out, on every screen that is not the studio itself. It is always present and always works — a screen without one is what this flow was rebuilt to remove. */ .fr-foot { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--hairline); } /* The lead deck's foot (#247): no divider, no second escape hatch — it only ever holds the running count, and collapses to nothing before one exists. */ .fr-foot.bare { border-top: 0; padding-top: 0; margin-top: 0; } .fr-foot.bare:has(.meta:not(:empty)) { margin-top: 18px; } /* The account-chores nudge on the dashboard (#248): one line, one button, quiet. It is the welcome card's door now that the card no longer stands in front of the studio. */ .account-nudge { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 10px 12px 10px 16px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--sand); font-size: 13.5px; color: var(--on-sand); } .account-nudge .ghost { margin-left: auto; flex-shrink: 0; } /* The empty shelf's task (#463). Same shape as the nudge above — one line, one button — because that is what this studio already means by "here is the next thing to do". It sits inside the shelf rather than above it: the nudge is about the account, this is about the shelf it replaces. */ .shelf-task { display: flex; align-items: center; gap: 14px; margin: 0 0 4px; padding: 12px 12px 12px 16px; border: 1px dashed var(--line); border-radius: 12px; font-size: 13.5px; color: var(--muted); } .shelf-task .ghost { margin-left: auto; flex-shrink: 0; } @media (max-width: 560px) { .shelf-task { align-items: flex-start; flex-direction: column; gap: 10px; } .shelf-task .ghost { margin-left: 0; } } /* A run drafted from a brief the studio had not finished writing. Said on the wait screen, on the result, and on the saved card, because a pitch written from a placeholder goal reads exactly like one written from a real brief. */ .partial { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); color: var(--brand-ink); } /* Your brief, in settings. The review step used to be a screen everybody passed through once; it is a thing you can come back to now. */ .brief-foot { display: flex; gap: 10px; align-items: center; margin-top: 12px; } /* The questions, finishable from settings. One per block, each naming what it improves — a reason to answer, not a form to complete. */ .sharpen-row { padding: 16px 0; border-top: 1px solid var(--hairline); } .sharpen-row:first-of-type { border-top: 0; } .sharpen-row textarea { margin-top: 10px; min-height: 64px; } .sharpen-row .sample { margin-top: 10px; } /* ------------------------- Your brief: one rule ------------------------- #277. The operator could not tell, by looking, which parts of this screen were things the studio knows and which were things they could type into: the brief was read-only prose in a lifted white card, and the questions were inputs in a lifted white card that looked exactly the same. So every block on the screen is now one of two shapes, and never both: .knows — STORED. Paper, lifted, an emerald rail down its left edge. Emerald is already the machine working everywhere else in the studio, so the rail reads as "the studio's own". .types — EDITABLE. No lift, a drawn border, and the same grey fill every input in the product already wears (--fill-input, the textarea's own background). Its boxes sit on paper inside it, which is the ordinary form-panel silhouette. The brief is the one block that is both, in sequence — `.knows.editing` swaps it to the editable shape when somebody presses Edit, which is the rule demonstrating itself. Coral stays where it always was: the single primary action, and nothing else. */ .knows { background: var(--card); box-shadow: var(--shadow-soft); border-left: 3px solid var(--signal); border-radius: 4px var(--radius) var(--radius) 4px; padding: 20px 24px; margin-top: 22px; } .knows.editing { background: var(--fill-input); box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius); } .knows.editing textarea { background: var(--card); } .types { background: var(--fill-input); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-top: 22px; } .types textarea, .types input[type=text] { background: var(--card); } .knows-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } .knows-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; } /* `.what` and `.why` were only ever styled inside `.setting`, so on this screen — the brief's own headings, each question's ask, every "improves" line — they all rendered at full body weight. That is the other half of "super busy": nothing on the page was quiet. */ #view-brief .what { font-weight: 600; font-size: 14px; } #view-brief .why { font-size: 13px; line-height: 1.55; color: var(--muted); } /* The meter, as one line beside that heading — a number, a short track and a count. It was a 38px figure, a full-width bar and a paragraph of its own explaining what a percentage is (#245). */ .know-meter { display: flex; align-items: center; gap: 10px; } .know-num { font-size: 14px; font-weight: 700; color: var(--signal-dim); font-variant-numeric: tabular-nums; } .know-bar { flex: 0 0 auto; width: 72px; height: 6px; border-radius: 999px; background: var(--sand); overflow: hidden; } .know-fill { height: 100%; border-radius: 999px; background: var(--signal); transition: width .4s ease; } .know-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Each question in the fold is an input, so each wears the editable shape. */ .task-card { background: var(--fill-input); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 10px; } .task-card textarea, .task-card input[type=text] { background: var(--card); } .task-card.done { background: transparent; border-color: var(--hairline); } /* The site read is a fact the studio states, not a box — so it states it. */ .task-card.stated { background: transparent; border: 0; } .task-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; padding: 13px 18px; color: inherit; } .task-head.static { cursor: default; } .task-mark { color: var(--faint); font-size: 11px; transition: transform .15s; flex: 0 0 auto; } .task-mark.open { transform: rotate(90deg); } .task-tick { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--mint); color: var(--signal-dim); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; } .task-ask { flex: 1; font-weight: 600; font-size: 14px; } .task-card.done .task-ask { font-weight: 500; color: var(--muted); } .task-chip { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--mint); color: var(--signal-dim); border: 1px solid color-mix(in srgb, var(--signal) 25%, transparent); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .task-meta { font-size: 11px; color: var(--faint); white-space: nowrap; } .task-body { padding: 0 18px 16px; } .task-body .sharpen-row { border-top: 0; padding: 0; } .task-body .sharpen-row > .what { display: none; } /* The brief as the document it is; the textarea appears on Edit. No card of its own since #277 — the `.knows` block around it is the paper, and a card inside a card was half of what made this screen read as busy. */ .brief-view { font-size: 14px; line-height: 1.6; } .brief-view p { margin: 8px 0; } .brief-view ul { margin: 8px 0; padding-left: 20px; } .brief-view .what:first-child { margin-top: 0 !important; } .brief-quote { border-left: 3px solid var(--sand); padding: 2px 0 2px 12px; color: var(--muted); font-size: 13px; margin: 8px 0; } /* ------------------------ Your brief, one document (#802) --------------- One column, read top to bottom: each section as its first three lines and a count of the rest, the studio's open questions drawn as blanks in the section their answer lands in, one button under it. The two columns, the draft blockquote and the *Read it whole* toggle went with the row. */ .brief-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } .brief-block h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; } .brief-block ul, .brief-top { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; } .brief-top { margin-bottom: 18px; } .brief-block li + li, .brief-top li + li { margin-top: 3px; } .brief-more { display: inline-block; margin-top: 6px; font-size: 12.5px; } /* A blank: the question where its answer will go, muted, with a dotted rule under it so it reads as a line still to be written rather than as a fact. The press opens the interview's own input in place. */ .brief-blank { list-style: none; margin-left: -18px; padding-left: 18px; position: relative; } .brief-blank::before { content: '·'; position: absolute; left: 6px; color: var(--faint); } .brief-blank-ask { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-align: left; cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--faint); text-underline-offset: 4px; } span.brief-blank-ask { cursor: default; } .brief-blank-ask:hover { color: var(--ink); } .brief-blank.open .brief-blank-ask { color: var(--ink); text-decoration: none; } .brief-blank-body { margin: 8px 0 12px; } .brief-blank-body .sharpen-row { border-top: 0; padding: 0; } .brief-blank-body .sharpen-row > .what { display: none; } /* The state, one sentence and only when true: no coloured box (#802). */ .brief-state { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--muted); } .brief-state.warn { color: var(--ink); } /* The bookkeeping at the foot: what the studio has learned, when the site was read. One quiet line each, under the paper. */ .brief-meta { margin: 18px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--faint); } .brief-meta .linky { color: var(--muted); } .brief-sources { margin-left: auto; font-size: 12.5px; color: var(--faint); } .brief-sources summary { cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; } .brief-sources summary::-webkit-details-marker { display: none; } .brief-sources ul { margin: 8px 0 0; padding-left: 18px; } .brief-foot { flex-wrap: wrap; } /* --------------------------- Who we hunt (#663) -------------------------- One form in Getting started's shape: the three-up row, the two-up row under it, one Save. The label is the field's own heading. */ .hunt-label { display: block; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; } .hunt-form .start-field textarea { margin-top: 10px; min-height: 56px; font-size: 14px; } .hunt-form .start-field textarea.hidden { display: none; } .hunt-form .start-field .examples-label { display: block; } .hunt-two { margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 820px) { .hunt-two { grid-template-columns: 1fr; } } .hunt-note { margin: 10px 0 0; font-size: 13px; } .hunt-never { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); } .hunt-never label.hunt-h { display: block; } .hunt-never textarea { margin-top: 8px; } .hunt-named { margin-top: 14px; } /* The named list: the kept-leads list's shape, in ink, a pill for the why. */ .never-list li { background: var(--fill-input); } .never-list .pill { font-size: 11px; vertical-align: 1px; } details.danger-fold > summary { color: var(--bad); } .danger-fold .danger { margin-top: 12px; } /* The gate is the only page a stranger ever sees, so it gets the room a first impression needs: one column, centred, nothing else competing. */ .gate { max-width: 620px; margin: 6vh auto 0; padding: 44px 44px 40px; text-align: center; } .gate-mark { margin-bottom: 22px; } .gate-mark img { border-radius: 12px; } .gate .eyebrow { margin: 0; } .gate-title { font-size: 27px; line-height: 1.28; font-weight: 400; color: var(--muted); letter-spacing: -.02em; margin: 10px 0 0; text-wrap: balance; } .gate-title strong { font-weight: 700; color: var(--brand-ink); } .gate-sub { margin: 16px auto 0; max-width: 46ch; } /* What is behind the gate, by name. Enough to be worth an account. */ .gate-contains { list-style: none; padding: 0; margin: 26px auto; max-width: 340px; text-align: left; border: 1px solid var(--hairline); border-radius: 12px; background: var(--sand); overflow: hidden; } .gate-contains li { padding: 10px 16px 10px 38px; font-size: 13.5px; position: relative; border-bottom: 1px solid var(--hairline); } .gate-contains li:last-child { border-bottom: 0; } .gate-contains li::before { content: '✓'; position: absolute; left: 16px; color: var(--signal); font-weight: 700; } .gate-cta { display: inline-block; text-decoration: none; background: var(--brand-accent); color: var(--on-accent); padding: 13px 26px; border-radius: 10px; font-weight: 600; transition: background .15s; } .gate-cta:hover { background: var(--coral-hover); } .gate-fine { font-size: 12.5px; color: var(--faint); margin: 22px auto 0; max-width: 42ch; } .dev-gate, .magic-gate { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hairline); text-align: left; } .dev-gate h3, .magic-gate h3 { margin-bottom: 4px; } /* A shared pitch is somebody's first sight of the product, so the way out of it is a control rather than a line of text at the bottom of the page. */ /* The answer is open and the pages are on the claim (#671). #161 removed a fold that hid the whole block — right, because a reader who never sees the working cannot doubt the answer — then eleven page entries became the largest thing on the Summary, #196 folded them, and nobody opened the fold. Now the identification and the ruled-out list are on screen here, and the pages are the `.cite` marks on the one thing above. The share page folds nothing: there this material has a tab to itself. */ .research { display: block; margin-top: 22px; border-top: 1px solid var(--hairline); padding-top: 16px; } /* #194: this was the one eyebrow in the product painted `--accent-ink` — 3.67:1 on a white card at 12px/600, and grey on its own sibling heading three inches below it. It inherits `--muted` like every other one now. Nothing here is a brand decision: #118 still owns whether coral ink is used for emphasis anywhere, and this was emphasis nobody chose. */ .research > .eyebrow { margin: 0; } .research > div { margin-top: 14px; } .top-right { display: flex; align-items: center; gap: 14px; justify-self: end; } .share-cta { display: inline-block; text-decoration: none; background: var(--brand-accent); color: var(--on-accent); padding: 9px 18px; border-radius: 10px; font-weight: 600; font-size: 13.5px; white-space: nowrap; transition: background .15s; } .share-cta:hover { background: var(--coral-hover); } .invite { text-align: center; } .invite .sub { max-width: 56ch; margin-left: auto; margin-right: auto; } .invite-actions { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 4px; } /* "Researched by Prospektor · 14 sources · 26 August 2026" (#302). Muted, small, centred, one line — a colophon, not a call to action, so it reads as provenance beside the invite above it rather than competing with it for the same press. On paper it is the only mark on the sheet, so it keeps a hairline above it there and nothing else changes. */ .researched-by { margin: 26px 0 0; text-align: center; font-size: 12px; color: var(--muted); letter-spacing: .01em; } .researched-by a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .researched-by a:hover { color: var(--ink); } /* ------------------------------ the shelf ------------------------------- */ /* Suggested companies above the target field: tiles, not cards, because a suggestion is a glance and a decision rather than a document. One coral control per tile — the same rule as everywhere else. */ .shelf { margin-bottom: 18px; } .shelf-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; } .shelf-state { font-size: 12px; color: var(--faint); } .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* The rendered prospects live in their own container (so scripts and drives can count them) but lay out as children of the grid above, with the static custom-pitch tile standing after them. */ #shelf-tiles { display: contents; } .tile { background: var(--card); border: 0; border-radius: var(--radius); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-soft); } /* The competitor overview (#339) — four cards of at most three bullets, sized so all four sit above the fold and the client list underneath them starts near the top of the page. The operator's constraint is the whole spec: "It should not take a lot of space on the page before you get to the lead list". Two columns rather than four, because a one-line bullet in a quarter-width column is not one line. */ /* The abstract (#332) — three labelled lines above the four fact cards. A label column and a text column, so the eye reads down the labels and stops at the one it wants; `/style` rule 5, a summary is one look. The left rule is what says this block is the summary of the cards below rather than a fifth card, and `How we win` is weighted because it is the only line on the screen written from the workspace's own brief. */ .counter-abstract { margin-top: 18px; padding-left: 14px; border-left: 3px solid color-mix(in srgb, var(--signal) 45%, transparent); display: grid; gap: 8px; } /* Wide enough for THEIR WEAKNESS on one line: `/style` rule 9 — a label that wraps mid-phrase gets more room or fewer words, never a smaller font. */ .ab-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: baseline; } .ab-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .ab-line { font-size: 15px; line-height: 1.45; } .ab-row.win .ab-label { color: var(--brand-ink); } .ab-row.win .ab-line { font-weight: 600; } @media (max-width: 560px) { .ab-row { grid-template-columns: 1fr; gap: 2px; } } .counter-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; } .counter-card { background: var(--card); border-radius: var(--radius); padding: 14px 16px 12px; box-shadow: var(--shadow-soft); } .counter-card-title { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } .counter-bullets { margin: 0; padding-left: 18px; display: grid; gap: 5px; } .counter-bullets li { font-size: 14px; line-height: 1.45; } /* A report written before the bullets existed shows its paragraph rather than hiding behind a disclosure (#340) — clamped, never cut, so the fold below it opens the same text whole. */ .counter-legacy { font-size: 13.5px; line-height: 1.5; margin: 0; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* The lead list is what the report is for, so it is allowed to look like a destination rather than a fifth heading: a rule to break from the overview, its own scale, and the count that says whether the run paid. */ .counter-leads-head { display: flex; align-items: baseline; gap: 10px; margin: 34px 0 4px; padding-top: 20px; border-top: 1px solid var(--line); } .counter-leads-title { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin: 0; color: var(--brand-ink); } /* Remove sits beside Run it again as a word, not a third button (#333). */ .counter-head-acts { display: flex; align-items: center; gap: 14px; } /* The one thing, and it leads the comparison because it is the answer to the question that asked for the screen: "what makes us unique" (#334). */ .counter-unique { margin: 10px 0 12px; font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: var(--brand-ink); max-width: 62ch; } .counter-leads-count { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } /* The fold carries a paragraph from a report written before the bullets existed, so it must not look like a second body: closed, quiet, small. */ .counter-card .more { margin-top: 10px; } .counter-card .more summary { font-size: 12.5px; } .counter-card .more p { font-size: 13.5px; line-height: 1.5; margin: 8px 0 0; } /* Not the mono system-label h3: a company name is content, not chrome. */ .tile-name { font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-transform: none; margin: 0; color: var(--brand-ink); } /* The number leads the tile (operator: "Fit %-age should be the leading indicator") and wears the same colours a finished run's verdict does: emerald for strong, ink for promising, muted for weak. Never coral — coral means "you can click this", and a score is a fact. */ .tile-score { font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; } .tile-score.strong { color: var(--signal-dim); } .tile-score.promising { color: var(--brand-ink); } .tile-score.weak { color: var(--faint); } /* The score and, when there is one, the adjacent-bet label share one row (#407) — the tile keeps the four rows it has always had, and a card with no label is byte-identical to what shipped before. */ .tile-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; } /* Quiet by construction: it is a fact about where the card came from, not a press and not a warning. Muted ink on a tinted ground, the same weight the rest of the tile's chrome wears. */ .tile-bet { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); border-radius: 999px; padding: 3px 8px; white-space: nowrap; } .tile-site { font-size: 12px; color: var(--muted); text-decoration: none; word-break: break-all; } .tile-site:hover { color: var(--brand-ink); text-decoration: underline; } /* What this company did and the day it did it (#298) — the one row on the tile that says why today rather than why them, so it carries the ink the site line gives up. The date is the link: it opens the page the claim was read on, and there is no second "source" press to compete with Prospekt. */ .tile-moved { font-size: 12.5px; font-weight: 600; color: var(--brand-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile-moved:hover { text-decoration: underline; } .tile-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } /* One line per fact — a stat, not a paragraph; the full text is on the title. The engine is asked for stat-shaped facts, this holds the old long ones to the same glance. */ .tile-facts li { font-size: 12.5px; color: var(--muted); padding-left: 14px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile-facts li::before { content: '·'; position: absolute; left: 2px; color: var(--faint); font-weight: 700; } /* The intro stays short on the card whatever the engine wrote. */ .tile-why { font-size: 13px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* The record behind the pick (#696): one quiet line, the weight a fact wears, ellipsised like the facts above it with the whole sentence on the title. Absent on most cards. */ .tile-from { font-size: 12.5px; color: var(--muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fr-wrap .tile-from { margin-top: 10px; white-space: normal; overflow: visible; text-overflow: clip; font-size: 13.5px; } .tile-actions { margin-top: auto; display: flex; align-items: center; gap: 14px; padding-top: 6px; } /* Prospekt is a tinted pill, Skip a quiet word (#81, per the mockup) — the card stays calm and the coral stays legible as "the act". */ /* Border, cursor and font came from `.primary` while every caller paired the two. The Counterprospekt tiles dropped `.primary` (#340) — twenty solid coral buttons made the loudest element on the page the one repeated twenty times — so the pill has to stand on its own now. */ .tile-go { padding: 7px 16px; font-size: 12.5px; font-weight: 700; border-radius: 999px; background: var(--tint); color: var(--accent-ink); border: 0; font-family: inherit; cursor: pointer; transition: background .15s; } .tile-go:hover { background: var(--tint-strong); } /* #287 swapped which press wears the pill: Glance is the tinted act now and the full run is the word beside it. Skip is pushed to the far edge so the two ways of spending a card read as a pair and the dismissal does not. */ /* #476: the row is two buttons and a dismiss. Glance keeps `.primary`'s colour but not its size — `button.primary` out-specifies `.tile-go`, so the tighter measure is set from the row. Prospekt is the product's own ghost (gray fill, coral text — #81's *never outlined*) at the same height, so the pair reads as one primary and one secondary. */ .tile-actions .tile-go, .tile-actions .ghost { padding: 7px 14px; font-size: 13px; font-weight: 600; border-radius: 8px; line-height: 1.3; } .tile-second { white-space: nowrap; } /* The removal, folded behind one quiet × at the far edge. */ .tile-dismiss { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--faint); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .tile-dismiss:hover, .tile-dismiss[aria-expanded="true"] { background: var(--fill); color: var(--brand-ink); } .tile-dismiss[disabled] { opacity: .4; cursor: default; } /* Asked in place: which kind of removal. Same two ghosts, same row. */ .tile-why-remove .ghost { white-space: nowrap; } /* ------------------------------- sign in ------------------------------- */ /* Nothing else is on this page, so the card sets its own width rather than inheriting the studio's. Google is a white button because Google requires one; the coral is spent on the email submit, which is the only control that does anything irreversible from here. */ .signin { display: flex; justify-content: center; padding: 6vh 0 0; } .signin-card { width: 100%; max-width: 380px; background: var(--card); border: 0; border-radius: 16px; padding: 34px 32px 30px; text-align: center; box-shadow: var(--shadow-card); } .signin-mark { display: block; margin: 0 auto 18px; border-radius: 10px; } /* The mark is a near-black tile with a white glyph, drawn for a light ground, and it is an — the file's own #1A1A18 cannot read a token. On a dark card that tile is 1.06:1 against the surface, so the rounded square dissolves and the glyph floats loose. A hairline gives the silhouette its edge back without touching the brand's own colours. */ :root[data-theme="dark"] .signin-mark { box-shadow: 0 0 0 1px var(--border-mark); } .signin-title { font-size: 23px; letter-spacing: -.03em; margin: 0 0 4px; } .signin-sub { color: var(--muted); font-size: 14.5px; margin: 0 0 24px; } .signin-google { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; box-sizing: border-box; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--brand-ink); font-weight: 600; font-size: 14.5px; text-decoration: none; transition: border-color .15s, box-shadow .15s; } .signin-google:hover { border-color: var(--muted); box-shadow: 0 1px 6px rgba(0,0,0,.07); } .signin-g { width: 18px; height: 18px; flex: 0 0 auto; } /* A hairline with the word sitting in it, so the two routes read as one choice rather than two sections. */ .signin-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; font-size: 11.5px; font-weight: 500; color: var(--faint); } .signin-or::before, .signin-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); } .signin-label { display: block; text-align: left; font-size: 13px; font-weight: 600; margin: 0 0 7px; } #view-signin input[type=email] { font-size: 14.5px; } .signin-submit { width: 100%; margin-top: 10px; padding: 12px 20px; font-size: 14.5px; } .signin-submit:hover { transform: none; } .signin-note { margin: 14px 0 0; padding: 12px 14px; background: var(--sand); border-radius: 10px; font-size: 13px; line-height: 1.5; color: var(--brand-ink); text-align: left; } .signin-fine { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--faint); text-align: left; } /* The passkey door (#155). Under Google rather than over it: for a first visit Google is still the front door, and a passkey button offered to somebody who has none is a dead end. It is a hairline button rather than a second white one so the card never reads as two equal choices — and for anyone who has enrolled, the browser offers the key in the email field's autofill before this button is ever pressed. */ .signin-passkey { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 12px 16px; background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--brand-ink); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; transition: border-color .15s, background .15s; } .signin-passkey:hover { border-color: var(--muted); background: var(--sand); } .signin-passkey svg { width: 18px; height: 18px; flex: 0 0 auto; } /* ------------------------- the account questions ----------------------- */ /* #156. One card, two questions, and a way past it — the same posture the interview takes: the workspace already exists behind this, so nothing here may be a wall. */ .welcome-field { text-align: left; margin-top: 18px; } .welcome-field label { display: block; font-size: 13.5px; font-weight: 600; margin: 0 0 6px; } .welcome-field .why { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); } .welcome-field input, .welcome-field select { width: 100%; box-sizing: border-box; font-size: 14.5px; } /* Country picker, then the number (#172). The picker is sized to its content rather than split 50/50: a dial code is four characters and the number is the field somebody is actually typing in. */ .phone-row { display: flex; gap: 8px; } .phone-row select { flex: 0 0 auto; width: auto; max-width: 46%; } .phone-row input { flex: 1 1 auto; min-width: 0; } /* Contact permissions (#173). Checkboxes, never switches: a switch reads as a setting somebody is changing, and these are permissions somebody is giving — which is also why not one of them starts ticked. */ .permits { margin-top: 18px; text-align: left; } .permits > .why { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--muted); } .permit { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 13.5px; line-height: 1.45; cursor: pointer; } .permit input[type=checkbox] { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--signal); } .permit .permit-what { font-weight: 600; } .permit .permit-why { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); } .welcome-foot { display: flex; align-items: center; gap: 12px; margin-top: 24px; } .welcome-foot .spacer { flex: 1 1 auto; } /* The passkey offer sits under the questions as an aside, not a third question: it is the one thing on this card that is purely a gift. */ .welcome-passkey { display: flex; align-items: center; gap: 12px; text-align: left; margin-top: 22px; padding: 14px 16px; background: var(--sand); border-radius: 10px; } .welcome-passkey .why { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .welcome-passkey .spacer { flex: 1 1 auto; } /* Concierge onboarding (#138). The same block as the passkey gift beside it — both are offers rather than demands — with a left rule in the brand accent, because this one is the card's only *recommended* action and a person skimming three identical panels takes none of them. */ .welcome-concierge { display: flex; align-items: center; gap: 12px; text-align: left; margin-top: 22px; padding: 14px 16px; border-radius: 10px; background: color-mix(in srgb, var(--brand-accent) 7%, var(--sand)); box-shadow: inset 3px 0 0 var(--brand-accent); } .welcome-concierge .why { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .welcome-concierge .spacer { flex: 1 1 auto; } /* The passkey list in Workspace settings. */ .passkey-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); } .passkey-row:last-of-type { border-bottom: 0; } .passkey-row .spacer { flex: 1 1 auto; } .passkey-row .meta { font-size: 12px; color: var(--faint); } /* ------------------------------ quick-prep ------------------------------ */ /* Which call is it — five stages, one chosen. Radio in behaviour, tiles in look; the chosen one is emerald because picking a stage is the person telling the machine, not a CTA. */ .stage-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; } .stage-pick { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; cursor: pointer; font: inherit; transition: border-color .15s, background .15s, box-shadow .15s; } .stage-pick:hover { border-color: var(--muted); } .stage-pick.chosen { border-color: color-mix(in srgb, var(--signal) 55%, transparent); background: var(--mint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal) 35%, transparent); } .stage-pick .stage-label { display: block; font-weight: 600; font-size: 13.5px; } .stage-pick .stage-hint { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--muted); } /* The sheet: one card, read top to bottom in the minutes before the call. The goal is set like a headline because it is the one line that matters; the closing ask carries the emerald bar because it is where the call is going, and coral stays reserved for buttons. */ .sheet-section { margin-top: 26px; } .sheet-section > .eyebrow { display: block; margin-bottom: 9px; } .sheet-goal { margin: 0; font-size: 19px; line-height: 1.45; letter-spacing: -.015em; font-weight: 600; } .sheet-prose { margin: 0; font-size: 14.5px; line-height: 1.65; } .sheet-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.75; } .sheet-close { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.5; border-left: 3px solid var(--signal); padding: 2px 0 2px 14px; } /* Skeleton tiles: the studio's first search, visibly in progress. */ .tile.skeleton { pointer-events: none; } .sk { border-radius: 7px; background: linear-gradient(100deg, var(--sand) 40%, var(--sheen) 50%, var(--sand) 60%); background-size: 200% 100%; animation: sk-pulse 1.6s ease-in-out infinite; } .sk-name { height: 17px; width: 55%; margin-bottom: 14px; } .sk-line { height: 11px; width: 90%; margin-bottom: 9px; } .sk-line.short { width: 70%; } .sk-btn { height: 32px; width: 110px; border-radius: 100px; margin-top: 16px; } @keyframes sk-pulse { from { background-position: 180% 0; } to { background-position: -20% 0; } } @media (prefers-reduced-motion: reduce) { .sk { animation: none; } } /* ------------------------------- home ---------------------------------- */ .library-tools { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } /* ------------------------------ library ------------------------------- */ .library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .library-head .sub { margin-bottom: 14px; } /* An iOS segmented control: gray track, white sliding pill. */ .sort-row { display: flex; gap: 2px; background: var(--fill); border-radius: 9px; padding: 2px; flex: 0 0 auto; } .sort-row button { font: inherit; font-size: 12.5px; font-weight: 500; color: var(--brand-ink); background: none; border: 0; border-radius: 7px; padding: 5px 13px; cursor: pointer; } .sort-row button[aria-pressed="true"] { background: var(--thumb); font-weight: 600; box-shadow: var(--shadow-thumb); } /* The tag filter (#279) borrows the same control, but its segments are the customer's own words rather than four fixed ones — so it wraps instead of overflowing the card, and it is absent entirely until a run carries a tag. */ .sort-row.tag-row { flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 0 0 14px; } /* The press that starts a selection (#381) — the same segment, said in the brand's own ink so the row reads as "filter these, or make one". */ .sort-row.tag-row .add { color: var(--accent-ink); font-weight: 600; } /* While a selection runs the row *is* the bar, and it sticks: fifteen cards of scrolling must not lose the control that finishes the job. */ .sort-row.tag-row.picking { position: sticky; top: 10px; z-index: 4; gap: 10px; padding: 5px 10px; } .sort-row.tag-row.picking .picked { font: 600 12.5px/1 "Public Sans", system-ui, sans-serif; color: var(--muted); align-self: center; padding-left: 3px; } .sort-row.tag-row.picking .go { color: var(--accent-ink); font-weight: 600; } .sort-row.tag-row.picking .go:disabled { color: var(--faint); font-weight: 500; cursor: default; } /* The tick itself, on a card that is being chosen. */ .item-head.picking { justify-content: flex-start; } .item-head.picking > .info { flex: 1; } .item-head .pick { accent-color: var(--accent-ink); width: 15px; height: 15px; margin: 0; flex: none; cursor: pointer; align-self: center; } /* Naming a Beast Mode list, under the paste box it names. */ .beast-body .list-name { margin-top: 10px; } /* Unread is a personal reminder, said with weight rather than a pill: the name goes heavy and a coral dot sits before it, and both vanish the moment this person opens the pitch. */ .item.unread > .item-head strong { font-weight: 700; } .item.unread > .item-head strong::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--brand-accent); margin-right: 8px; vertical-align: 2px; } .item-line { margin-top: 4px; font-size: 13.5px; color: var(--muted); } /* ------------------------- the Library, as cards ------------------------- */ /* #417, operator: "for full pitches it should also be card design as in 'suggested' and clicking any of them, open the pitch rather than having to click open. The 'long row' design with CTA at the end to 'open' is tedious." Two columns rather than the shelf's three: a library card carries a sentence and a meta line where a shelf tile carries three short facts, and a full sentence in a third-width column is not a sentence. Below 720px it is one column, which is the row shape again — correctly, because on a phone a row IS the card. */ .saved-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 720px) { .saved-grid { grid-template-columns: 1fr; } } /* The card lifts on hover and focus because the whole of it is the target now — without that the only thing saying "this is pressable" would be the cursor, which says nothing to a keyboard. */ .saved-tile { display: flex; flex-direction: column; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; } .saved-tile:hover, .saved-tile:focus-visible { border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--line)); box-shadow: var(--shadow-soft); } .saved-tile:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; } /* The head stops being a row with a button pinned right: the `⋯` is the only thing left in it, so the name takes the space the Open button had. */ .saved-tile .item-head { align-items: flex-start; } .saved-tile .info { min-width: 0; } /* The one press a glance still has (#413's answer), pushed to the foot so every card in the grid ends on the same line whatever its sentence length. */ .saved-tile .tile-foot { margin-top: auto; padding-top: 12px; } /* An outcome note is a dump — pasted email threads keep their line breaks, and a wall of someone's inbox stays scrollable rather than endless. */ .note-dump { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; max-height: 260px; overflow-y: auto; } /* A first-look estimate no longer dims — the number is the tile's leading indicator by operator ask; the tilde and its title carry the "estimate". */ /* ----------------------------- the free run ----------------------------- */ /* #167: the whole WHOM journey at a shareable URL, with no account. This is the one screen a stranger sees before anything asks them for anything, so it is deliberately quieter than the studio — no rail, no tabs, one column, and exactly one coral control on the page at a time. It borrows the shelf's tiles rather than inventing cards, because what a free run shows IS what a workspace's opening shelf shows: same engine, same scale, same three. A free surface that dressed its results better than the product would be selling something we do not ship. */ .fr-wrap { max-width: 760px; margin: 0 auto; } .fr-hero { text-align: center; padding: 26px 0 10px; } .fr-hero h1 { font-size: 34px; letter-spacing: -.03em; margin: 0 0 12px; } .fr-hero .sub { max-width: 48ch; margin: 0 auto 24px; font-size: 15.5px; } .fr-form { display: flex; gap: 10px; max-width: 520px; margin: 0 auto; } .fr-form input { flex: 1; } .fr-free { margin: 16px 0 0; font-size: 12.5px; color: var(--faint); } /* The rail of steps, named up front so the wait has a shape — the same reason lib/stages.js exists for a paid run. The fourth step is the point of the page: it is drawn, it is never run, and it says so. */ .fr-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; } .fr-steps li { background: var(--card); padding: 12px 16px; display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--muted); } .fr-steps .fr-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line); flex: 0 0 8px; } .fr-steps li.done { color: var(--brand-ink); } .fr-steps li.done .fr-dot { background: var(--signal); } .fr-steps li.live { color: var(--brand-ink); } .fr-steps li.live .fr-dot { background: var(--signal); animation: fr-pulse 1.4s ease-in-out infinite; } .fr-steps li.locked { color: var(--faint); } .fr-steps li.locked .fr-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); } .fr-steps .fr-tag { margin-left: auto; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); } @keyframes fr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .fr-steps li.live .fr-dot { animation: none; } } .fr-block { margin-bottom: 18px; } .fr-block > h2 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; font-weight: 600; } .fr-read p { margin: 0 0 12px; font-size: 15px; } .fr-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; padding: 0; list-style: none; } .fr-chips li { font-size: 12px; color: var(--muted); background: var(--sand); border-radius: 999px; padding: 5px 11px; } .fr-signals { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .fr-signals li { font-size: 13.5px; color: var(--muted); padding-left: 16px; position: relative; } .fr-signals li::before { content: '·'; position: absolute; left: 3px; color: var(--faint); font-weight: 700; } /* The goal, which is the one thing on this page the visitor can change. The scan's own schema calls it "shown back to them to correct" and until now there was nowhere to correct it. */ .fr-goal { font-size: 19px; line-height: 1.45; letter-spacing: -.01em; margin: 0 0 12px; color: var(--brand-ink); } .fr-goal-edit { display: grid; gap: 10px; } .fr-goal-edit textarea { min-height: 74px; resize: vertical; } .fr-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* The gate. Not blurred and not a teaser: it names exactly what the paid half produces, in the product's own words, and does not produce it. A smudged deliverable would be claiming we made something we did not. */ .fr-gate { border: 1px dashed var(--line); background: transparent; box-shadow: none; } .fr-gate h2 { color: var(--muted); } .fr-gate .fr-goal { font-size: 21px; } .fr-buys { list-style: none; margin: 14px 0 20px; padding: 0; display: grid; gap: 9px; } .fr-buys li { font-size: 14px; color: var(--muted); padding-left: 24px; position: relative; } .fr-buys li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 9px; height: 9px; border-radius: 2px; background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--accent-ink); } /* The shelf clips a fact to one line and hangs the rest on a title, because there it is a glance inside a dense grid that somebody is about to act on. A free run is a page a stranger reads, with no reason to hover anything — so here the facts wrap and the argument runs to its end. Same tiles, one deliberate difference, stated rather than left to be noticed. */ .fr-wrap .tile-facts li { white-space: normal; overflow: visible; text-overflow: clip; } .fr-wrap .tile-why { display: block; overflow: visible; } /* The inverse pitch (#237). Collapsed to one ghost control until it is wanted, because the gate below is this page's one primary action. The report itself borrows the studio's own counter-* classes: a stranger and a customer should be looking at one product, not at a funnel lookalike. */ .fr-rival .fr-rival-name { font-family: inherit; font-size: 22px; font-weight: 700; letter-spacing: -.02em; text-transform: none; margin: 0 0 2px; color: var(--brand-ink); } .fr-rival .counter-leads-head { margin-bottom: 12px; } /* The one line the funnel cannot write, in the slot the studio puts the answer in. Quiet rather than blurred — it is missing because it needs a brief, and it says which. */ .fr-locked .ab-label, .fr-locked .ab-line { color: var(--faint); font-weight: 500; } .fr-clients { display: grid; gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; } .fr-client { background: var(--card); padding: 12px 15px; } .fr-client .tile-name { font-size: 15px; } .fr-client-why { margin: 4px 0 0; font-size: 13px; color: var(--muted); } .fr-client-src { display: inline-block; margin-top: 5px; font-size: 12px; color: var(--accent-ink); } .fr-client-src:hover { text-decoration: underline; } .fr-sources { margin-top: 18px; } .fr-sources ul { margin: 10px 0 0; } .fr-rival .fr-cost { text-align: left; margin-top: 18px; } .fr-keep { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 20px; } .fr-keep .fr-form { margin: 0; max-width: none; } .fr-cost { font-size: 11.5px; color: var(--faint); margin: 26px 0 0; text-align: center; } @media (max-width: 720px) { .fr-hero h1 { font-size: 27px; } .fr-form { flex-direction: column; } } /* Narrow windows: the rail collapses to icons (#81 — the mockup's own note). Every door stays visible; the labels come back with the width. */ @media (max-width: 980px) { .rail { flex: 0 0 64px; width: 64px; } .rail .sb-label, .rail .sb-group, .rail .count, .rail .rail-email, .account-button .tenant { display: none; } .rail .sb-item, .rail .rail-user { justify-content: center; padding: 8px 0; } .account-button { justify-content: center; padding: 10px 0; } .account-button .chev { margin-left: 0; } .account .menu { position: fixed; left: 70px; right: auto; top: 12px; width: 270px; } } @media (max-width: 860px) { .run-grid, .two-col { grid-template-columns: 1fr; } .tiles { grid-template-columns: 1fr; } .counter-cards { grid-template-columns: 1fr; } .band { grid-template-columns: repeat(2, 1fr); } .info-tip::after { width: 240px; } } /* ------------------------ the phone's two controls --------------------- */ /* Both are `display: none` until the width above asks for them, so a desktop never draws either and the rail keeps every door in the open. */ .rail-open { display: none; position: fixed; top: 10px; left: 10px; z-index: 40; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--card); color: var(--brand-ink); cursor: pointer; box-shadow: var(--shadow-card); } .fab { display: none; position: fixed; right: 14px; z-index: 40; bottom: calc(14px + var(--ppsc-inset, 0px)); align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px; cursor: pointer; background: var(--brand-accent); color: var(--on-accent); font: inherit; font-weight: 600; box-shadow: var(--shadow-panel); } @media (max-width: 720px) { main { padding: 18px 14px 44px; } .grid.two, .target-row, .how { grid-template-columns: 1fr; } .target-row .or { padding: 0; } h1 { font-size: 25px; } /* ------------------------- the phone's nav (#661) -------------------- */ /* The rail stops being a column of the page and becomes a sheet over it. Everything it holds is unchanged, labels included: a 64px strip of unlabelled icons is a tablet pattern, and 980px above already serves tablets. Off screen by default, slid in by `.open`, and `main` gets the whole width back. */ .rail { position: fixed; inset: 0 auto 0 0; z-index: 60; flex: 0 0 auto; width: min(300px, 86vw); height: 100%; transform: translateX(-100%); box-shadow: var(--shadow-panel); } .rail.open { transform: translateX(0); } @media (prefers-reduced-motion: no-preference) { .rail { transition: transform .22s ease; } } /* The labels come back, and so does the room they need. */ .rail .sb-label, .rail .sb-group, .rail .count, .rail .rail-email, .account-button .tenant { display: revert; } .rail .sb-item, .rail .rail-user { justify-content: flex-start; padding: 9px 12px; } .account-button { justify-content: flex-start; padding: 12px 14px; } .account .menu { position: absolute; left: 10px; right: 10px; top: 58px; width: auto; } /* New pitch is the floating button at this width, so the row would be the same door twice. */ .rail .sb-item[data-view="new"] { display: none; } .rail-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .38); } .rail-open { display: inline-flex; } .fab { display: inline-flex; } /* The bubble stacks above New pitch rather than beside it — never two round buttons in one corner. `over-fab` is set by the same line that shows the button, so on the screen it is hidden the bubble drops back into the corner. */ .support.over-fab { --support-lift: 62px; } } /* A control the shell has hidden stays hidden, at every width. */ .rail-open.hidden, .fab.hidden { display: none; } /* ------------------------------ support ------------------------------- */ /* The live support bot (queue #75, evolving #54). Studio-only — share.html never renders it. The launcher is a bubble at the bottom right of every screen since #773, the icon alone: the rail's foot said Support on one screen's worth of chrome, and the operator asked for the affordance a person already looks for. Coral stays on Send, which is the one act in the panel. The panel opens above the bubble, on the same right edge. `--ppsc-inset` is the cookie notice's own height while it is on screen (#131, public/consent.js), 0px the rest of the time. Without it the notice sits on top of Send, which is exactly how the first run of `npm run drive:support` found it. The bubble takes the same lift, so the notice never covers the one way to ask for help either. */ /* `--support-lift` is the room New pitch needs under the bubble on a phone (#661, one floating action per corner), 0 everywhere else. The corner is held by `.support` itself, and the panel hangs off it, so the offsets are written once: a wrapper whose every child floats has no box of its own, and a box nobody can see is a launcher nobody can click. Below the rail's sheet and its scrim on a phone (60 and 50), above the page. */ .support { --support-lift: 0px; position: fixed; right: 14px; z-index: 45; bottom: calc(14px + var(--support-lift) + var(--ppsc-inset, 0px)); } .support-launchers { display: flex; flex-direction: column; } .support-launcher { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--hairline); border-radius: 999px; cursor: pointer; background: var(--card); color: var(--brand-ink); box-shadow: var(--shadow-panel); } .support-launcher:hover { border-color: var(--muted); } .support-panel { position: absolute; right: 0; bottom: 58px; width: min(360px, calc(100vw - 28px)); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-panel); display: flex; flex-direction: column; overflow: hidden; } .support-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--hairline); } .support-title { font-weight: 700; font-size: 15px; } .support-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .support-close { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--faint); cursor: pointer; padding: 2px 4px; } .support-close:hover { color: var(--brand-ink); } .support-log { padding: 14px 14px 6px; overflow-y: auto; max-height: min(46vh, 420px); min-height: 130px; display: flex; flex-direction: column; gap: 8px; } .support-msg { display: flex; } .support-msg.user { justify-content: flex-end; } .support-bubble { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--sand); color: var(--brand-ink); } .support-msg.user .support-bubble { background: var(--brand-ink); color: var(--on-ink); } /* Emerald is the machine working, here as everywhere. */ .support-typing { color: var(--signal-dim); background: var(--mint); font-style: italic; } .support-mail { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--hairline); background: var(--mint); } .support-mail-link { font-size: 13px; font-weight: 700; color: var(--signal-dim); text-decoration: none; } .support-mail-link:hover { text-decoration: underline; } /* A bot answer can point at a screen: the link renders as an inline take-me-there, coral because clicking it acts. */ .support-link { border: 0; background: none; padding: 0; cursor: pointer; display: inline; font: inherit; color: var(--accent-ink); font-weight: 700; text-decoration: underline; } /* The quiet line under a reply that really wrote a feedback note. */ .support-noted { font-size: 11.5px; color: var(--signal-dim); padding: 0 4px; } .support-ask { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--hairline); } .support-ask input { flex: 1; min-width: 0; } .support-foot { display: flex; padding: 0 14px 10px; } .support-feedback-open { border: 0; background: none; padding: 0; cursor: pointer; font: 600 12px/1.4 var(--studio-font); color: var(--muted); } .support-feedback-open:hover { color: var(--brand-ink); } /* Beta feedback (queue #67), a mode of the chat since #75: the 💡 toggle swaps the ask row for this one composer — never both at once. */ .feedback-form { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 10px; border-top: 1px solid var(--hairline); } .feedback-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .feedback-title { font-weight: 700; font-size: 13px; } .feedback-form textarea { resize: vertical; min-height: 68px; } .feedback-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .feedback-screen { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } /* The operator's transcript read on the admin screen (queue #75). */ .admin-transcript { margin-top: 4px; } details.item > summary { cursor: pointer; font-size: 13px; } /* ------------------------------- the tour ------------------------------- * * The guided tour (queue #66). One dimmed sheet, one card, and a ring that * floats over whichever piece of chrome the step is talking about. Above * the support launcher (z-index 60): the tour introduces it, so it must be * able to sit on top of it. * ------------------------------------------------------------------------ */ .tour { position: fixed; inset: 0; z-index: 80; } .tour-backdrop { position: absolute; inset: 0; background: var(--overlay); } .tour-ring { position: absolute; border: 2px solid var(--accent-ink); border-radius: 12px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-ink) 25%, transparent); pointer-events: none; transition: all .25s ease; } .tour-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-overlay); padding: 22px 24px 18px; text-align: left; } /* An anchored step's card travels to sit beside the thing it is talking about (#249) — left/top come inline from tourPlace(), so the centering transform has to come off, and the move is eased like the ring's. */ .tour-card.anchored { transform: none; transition: left .25s ease, top .25s ease; } .tour-count { font-size: 11.5px; font-weight: 600; color: var(--faint); } /* The chapter, in the rail's own hue, before the count (#766). */ .tour-chapter { display: inline-flex; align-items: center; gap: 6px; color: var(--verb); } .tour-chapter .verb-swatch { width: 9px; height: 9px; border-radius: 2px; } /* The opening card's three verbs: one row of buttons, each jumping to its chapter. */ .tour-chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .tour-chapter-go { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s; } .tour-chapter-go .verb-swatch { width: 12px; height: 12px; border-radius: 3px; } .tour-chapter-go:hover { background: color-mix(in srgb, var(--verb) 10%, transparent); border-color: var(--verb); } .tour-title { margin: 8px 0 0; font-size: 19px; letter-spacing: -.01em; } .tour-body { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); } .tour-again { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; cursor: pointer; } .tour-again input { accent-color: var(--accent-ink); width: 16px; height: 16px; } .tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; } .tour-dots { display: flex; gap: 6px; } .tour-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--line); display: block; transition: background .2s; } .tour-dots i.on { background: var(--brand-accent); } .tour-actions { display: flex; gap: 8px; } .tour-skip { display: block; margin: 16px auto 0; font-size: 12.5px; color: var(--faint); } .tour-skip:hover { color: var(--brand-ink); } @media (max-width: 720px) { /* On a small screen the card stays docked at the foot whatever the step — there is no room to sit beside an anchor, and the inline left/top from tourPlace() must not win over the dock. */ .tour-card, .tour-card.anchored { top: auto !important; bottom: 14px; left: 50% !important; transform: translateX(-50%); transition: none; } } /* ------------------------- print (#51, trimmed #376) ---------------------- */ /* Ctrl/Cmd-P turns whatever is on screen into paper: the application steps out of the way and the client's brand.css stays on the deliverables, because printing is exactly the moment "what the client's material looks like" matters most. Save as PDF in the same dialog is the PDF export — no server, no second renderer, no drift from what the screen shows. Inactive tab panels are display:none already, so the panel being read is the one that prints. #376 removed the two Print / PDF buttons — they duplicated a keystroke every browser already has, which is the *less is more* cut. It did NOT remove this block, and the reason is worth keeping: Ctrl/Cmd-P belongs to the browser and cannot be deleted, so deleting these rules would not remove the print surface, only degrade the one that remains — rails, nav and buttons on paper, and #302's mark below losing its dressing on a forwarded PDF. The feature cannot be deleted; only its quality can. */ @media print { @page { margin: 14mm; } /* Paper is light whatever the screen was: the dark block above is gated on `screen`, so :root's light palette is what prints. */ html, body { background: #fff; } body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* The application around the work — chrome, affordances, overlays. On paper there is nothing to press, so controls go as a class. */ .rail, .top, footer, #banners, .tabs, .subtabs, .invite, .support, .tour, .head-actions, .panel-head .spacer ~ *, .pencil, .info-tip, .more, .beast, .gate, .magic-gate, .dev-gate, button, select, textarea, input, label.check { display: none !important; } main { max-width: none; padding: 0; } .card { background: transparent; border: 0; box-shadow: none; padding: 0 0 18px; margin: 0 0 14px; } /* What must not tear across a page boundary: a slide, a list entry, the header block. Everything longer flows. */ .slide, .stack .item, .result-head, .email-card { break-inside: avoid; } /* #262 — a deck prints as a deck: one slide to a sheet, landscape, filling it rather than floating at the top of a portrait page. The named page only applies to sheets that carry a slide, so printing any other tab is untouched; a browser that ignores `page:` still gets one slide per page, which was the floor the ask set. */ @page slides { size: A4 landscape; margin: 12mm; } .deck > .block, .deck > .slide { page: slides; break-after: page; break-inside: avoid; } .deck > .block:last-child, .deck > .slide:last-child { break-after: auto; } .deck .slide { min-height: 160mm; display: flex; flex-direction: column; padding: 22px 24px; border-radius: 0; } .deck .slide h4 { font-size: 30px; } .deck .slide.is-hero h4 { font-size: 34px; } /* The figures sit at the foot of the sheet, where they do on the file. */ .deck .slide .tiles { margin-top: auto; } /* The one-pager prints as the page it claims to be: no card chrome, and the CTA band keeps its colour (print-color-adjust is set on body). */ .one-pager { box-shadow: none; border-radius: 0; padding: 0; max-width: none; break-inside: avoid; } /* #161's provenance is an aid to whoever is sending the work, not part of what gets sent: the count goes with the rest of the chrome, and the marked sentences flatten back into the prose they were always in. */ .grounded-line { display: none !important; } mark.grounded { background: transparent; box-shadow: none; } a { color: inherit; } /* #302 — the one thing that does not step aside. Everything above it in the hide list is chrome; this is the mark, and a forwarded PDF carried none before it. */ .researched-by { margin-top: 18px; padding-top: 10px; border-top: 1px solid #d9d9de; color: #6e6e73; break-inside: avoid; } }