/* Simple Modern Design Language — Simple Modern CRM. ONE stylesheet shared in spirit by every product: calm and white-dominant, the system SF stack, hairline borders, gentle shadows, generous whitespace, and exactly ONE accent per product (Simple Modern CRM magenta). The token block below is identical in every product repository apart from that accent ramp — if you change a value here, change it there. Light and dark are both first class: the palette follows the reader's system setting via prefers-color-scheme, and an explicit data-theme on wins in either direction. Every token is defined on bare :root first, so nothing depends on a media query having matched. */ *, *::before, *::after { box-sizing: border-box; } :root { color-scheme: light; /* surfaces */ --canvas: #f3f5f7; --sunken: #f3f5f7; --card: #ffffff; --side: #ffffff; --field: #ffffff; /* hairlines — the only borders this language draws */ --hair: #dfe3e8; --hair-soft: #e8ebef; --ring: var(--accent); /* ink */ --ink: #111418; --ink-2: #3d4550; /* Same failing grey as --ink-3 carried under a second name: the token was changed and the pages did not, because most quiet text reads --muted. Kept in step deliberately — two names for one ink must not drift. */ --muted: #616a7b; /* interaction */ --hover: #f3f5f7; --selected: var(--accent-soft); --btn2: #f8f9fb; /* chrome surfaces — what the shared shell (smdl-shell.css) paints with */ --surface: #ffffff; --surface-2: #f8f9fb; --surface-3: #eef1f4; /* Measured against every light surface this token is painted on: at #6b7488 it failed WCAG AA (4.5:1) on five of six — surface-2 4.19, surface-3 3.93, good-soft 4.17, bad-soft 4.10, warn-soft 4.27. #616a7b clears all of them, worst case 4.57 on surface-3. Dark mode already passes and is untouched. Changed in all six siblings together: the family's own test asserts that nothing but the accent differs between products. */ --ink-3: #616a7b; /* status — the same three hues in both products, used sparingly */ --good: #08764f; --good-soft: #e6f4ee; --bad: #b3261e; --bad-soft: #fbeae8; --warn: #8a5a06; --warn-soft: #fdf3e3; /* THE ONE THING A PRODUCT CHANGES — this application's seat colour, in the six variants the design language allows. tile fills shapes 16px and up; ink is coloured TEXT on light and clears 4.5:1; deep is that ink taken down until it clears 4.5:1 on soft, which is what a status pill needs; soft is a light tint of this same hue for selected rows; sidebar is the deep cut that paints the whole navigation rail, where white text clears 14:1; dark is this hue lifted for a near-black surface — never a different hue. Simple Modern CRM is magenta. */ --accent: #C52FA6; --accent-ink: #C52FA6; --accent-deep: #B81E9A; --accent-soft: #FDDDF2; --accent-quiet: rgba(197, 47, 166, 0.10); --on-accent: #ffffff; /* The rail is the room: the same deep cut on a light canvas and a dark one, with the seat lit in the lifted variant because the rail IS near-black. */ --app-sidebar: #3F1B36; --app-dark: #F270D1; --live: var(--accent-deep); --live-soft: var(--accent-soft); /* elevation, radii, type */ --shadow-card: 0 0 0 1px var(--hair); --shadow-pop: 0 8px 24px rgba(17,19,24,.08); /* Radii come from the shared shell (smdl-shell.css), which is loaded after this file and was silently overriding the 14/9 declared here with its own 12/8 for every consumer. One source, not two. */ /* The shell declares these too, and loads after this file — so declaring a different value here meant this stylesheet's geometry never applied. Same values, stated once per product so the token is visible where it is used. */ --radius: 8px; --radius-sm: 6px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Helvetica Neue", sans-serif; /* v6 (DESIGN.md §3) */ --line: #dfe3e8; --line-strong: #c3cad3; --line-soft: #e8ebef; --mark-quiet: #c8cfd8; --inset: #f3f5f7; --ink-4: #838c98; --ok: #08764f; --ok-soft: #e6f4ee; --danger: #b3261e; --danger-soft: #fbeae8; --info: #476780; --info-soft: #e9eff4; --off: #838c98; --off-soft: #eef1f4; --scrim: rgba(45,49,47,.40); --shadow-dlg: 0 18px 48px rgba(17,19,24,.14); --radius-lg: 10px; --radius-badge: 4px; --row: 44px; --row-dense: 40px; --row-two: 48px; --ctl: 32px; --ctl-dense: 28px; --ctl-lg: 36px; --w-fly-s: 400px; --w-fly-m: 480px; --w-fly-l: 640px; --pane: 380px; --pane-head: 44px; --pane-foot: 36px; --ease: cubic-bezier(.2,0,0,1); --dur-fly: 180ms; --dur-scrim: 120ms; --dur-exit: 120ms; --dur-swap: 90ms; --dur-toast: 160ms; --z-menu: 900; --z-fly: 1000; --z-confirm: 1050; --z-toast: 1100; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --canvas: #0c1016; --sunken: #10151d; --card: #151a23; --side: #151a23; --field: #10151d; --hair: #1f2630; --hair-soft: #1a2029; --ring: var(--accent); --ink: #edf0f6; --ink-2: #ccd4e2; --muted: #98a2b6; --hover: #1b212b; --selected: var(--accent-soft); --btn2: #1b212b; /* chrome surfaces — what the shared shell (smdl-shell.css) paints with */ --surface: #151a23; --surface-2: #1b212b; --surface-3: #222937; --ink-3: #98a2b6; --good: #5fc88c; --good-soft: #12251c; --bad: #fc6474; --bad-soft: #2c1417; --warn: #e3b341; --warn-soft: #2a2311; /* The accent lifts for a dark canvas — the same hue, not a different one. Leaving --accent at its light value made every filled control muddy. */ --accent: #F270D1; --accent-ink: #F270D1; --accent-deep: var(--accent-ink); --accent-soft: #33112B; --accent-quiet: rgba(242, 112, 209, 0.16); --on-accent: #3F1B36; --app-sidebar: #3F1B36; --app-dark: #F270D1; --shadow-card: 0 0 0 1px var(--hair); --shadow-pop: 0 8px 24px rgba(0,0,0,.45); /* v6 (DESIGN.md §3) */ --line: #1f2630; --line-strong: #2c3542; --line-soft: #1a2029; --mark-quiet: #39424f; --inset: #10151d; --ink-4: #6b7688; --ok: #5fc88c; --ok-soft: #12251c; --danger: #fc6474; --danger-soft: #2c1417; --info: #8fa9be; --info-soft: #18222b; --off: #6b7688; --off-soft: #1b212b; --scrim: rgba(0,0,0,.55); --shadow-dlg: 0 18px 48px rgba(0,0,0,.6); } } :root[data-theme="dark"] { color-scheme: dark; --canvas: #0c1016; --sunken: #10151d; --card: #151a23; --side: #151a23; --field: #10151d; --hair: #1f2630; --hair-soft: #1a2029; --ring: var(--accent); --ink: #edf0f6; --ink-2: #ccd4e2; --muted: #98a2b6; --hover: #1b212b; --selected: var(--accent-soft); --btn2: #1b212b; /* chrome surfaces — what the shared shell (smdl-shell.css) paints with */ --surface: #151a23; --surface-2: #1b212b; --surface-3: #222937; --ink-3: #98a2b6; --good: #5fc88c; --good-soft: #12251c; --bad: #fc6474; --bad-soft: #2c1417; --warn: #e3b341; --warn-soft: #2a2311; /* The accent lifts for a dark canvas — the same hue, not a different one. Leaving --accent at its light value made every filled control muddy. */ --accent: #F270D1; --accent-ink: #F270D1; --accent-deep: var(--accent-ink); --accent-soft: #33112B; --accent-quiet: rgba(242, 112, 209, 0.16); --on-accent: #3F1B36; --app-sidebar: #3F1B36; --app-dark: #F270D1; --shadow-card: 0 0 0 1px var(--hair); --shadow-pop: 0 8px 24px rgba(0,0,0,.45); /* v6 (DESIGN.md §3) */ --line: #1f2630; --line-strong: #2c3542; --line-soft: #1a2029; --mark-quiet: #39424f; --inset: #10151d; --ink-4: #6b7688; --ok: #5fc88c; --ok-soft: #12251c; --danger: #fc6474; --danger-soft: #2c1417; --info: #8fa9be; --info-soft: #18222b; --off: #6b7688; --off-soft: #1b212b; --scrim: rgba(0,0,0,.55); --shadow-dlg: 0 18px 48px rgba(0,0,0,.6); } html, body { max-width: 100%; overflow-x: hidden; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: var(--smdl-text-body); line-height: var(--smdl-leading-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } h1, h2, h3, h4 { letter-spacing: normal; font-weight: var(--smdl-weight-semibold); line-height: var(--smdl-leading-heading); margin: 0; } h1 { font-size: var(--smdl-text-heading); } h2, h3, h4 { font-size: var(--smdl-text-section); } b, strong { font-weight: var(--smdl-weight-semibold); } p { margin: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } code, .mono { font-family: var(--mono); font-size: var(--smdl-text-meta); } code { background: var(--selected); border-radius: 5px; padding: 1px 5px; } /* ------------------------------------------------------------------ shell */ /* The shell grid, corner switcher, top bar, sidebar and canvas all come from smdl-shell.css — the SAME file CORE serves, so the family is one chrome by construction. This stylesheet keeps only what the shell does not carry: the profile popover, the signed-out header, and this product's page furniture. */ .avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--accent-quiet); color: var(--accent-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 680; letter-spacing: 0; } /* profile popover — mirrors CORE's, on this stylesheet's tokens */ .user-menu { position: relative; } .user-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 260px; padding: 8px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-pop); z-index: 60; } .user-pop[hidden] { display: none; } .user-pop-id { display: flex; align-items: center; gap: 11px; padding: 10px 10px 14px; } .user-pop-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .user-pop-who b { font-size: var(--smdl-text-body); } .user-pop-who small { color: var(--ink-3); font-size: var(--smdl-text-meta); overflow: hidden; text-overflow: ellipsis; } .user-pop-appearance { padding: 2px 10px 16px; } .user-pop-label { display: block; color: var(--ink-3); font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); margin-bottom: 8px; } /* The same segmented control as everywhere else — see .smdl-seg in the shared shell for why the radii are concentric and why the chosen segment is lifted rather than filled with the accent. This carried its own numbers (8 and 6, against CORE's 999 and 999 for the same control), which is how one product's theme switcher came to look like a different component from another's. */ .theme-seg { display: flex; width: 100%; padding: 3px; gap: 2px; border: 0; box-shadow: inset 0 0 0 1px var(--hair); border-radius: var(--radius-sm); background: var(--surface-2); } .theme-seg button { flex: 1; height: 28px; padding: 0; border: 0; border-radius: var(--radius-badge, 4px); display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: none; color: var(--ink-2); font-family: var(--sans); font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); line-height: var(--smdl-leading-body); cursor: pointer; transition: background .14s ease, color .14s ease, box-shadow .14s ease; } .theme-seg button:hover { color: var(--ink); } .theme-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; } .theme-seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: var(--smdl-weight-semibold); box-shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(16, 24, 40, .06); } .theme-seg button .ic { width: 15px; height: 15px; font-size: 15px; } @media (prefers-reduced-motion: reduce) { .theme-seg button { transition: none; } } .user-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; font-family: var(--sans); font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); color: var(--ink-2); padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; } .user-pop-item .ic { font-size: 16px; opacity: 0.7; } .user-pop-item:hover { background: var(--surface-2); color: var(--ink); } .user-pop-item.danger-item:hover { color: var(--bad); background: var(--bad-soft); } .user-pop form { margin: 0; } /* the signed-out header (landing and error surfaces) */ .brand { display: flex; align-items: center; gap: 9px; font-weight: var(--smdl-weight-semibold); letter-spacing: normal; color: var(--ink); padding: 5px 8px; border-radius: var(--radius-sm); } .brand:hover { background: var(--hover); } .mark { width: 24px; height: 24px; flex: none; } .plain-actions { margin-left: auto; display: flex; gap: 8px; } /* the page inside the shell canvas */ .page { max-width: 1180px; margin: 0 auto; padding: 0 4px 64px; } /* A create or edit form is a single column of fields, and 760px is where that column stays comfortable to fill in -- a 1180px-wide input for a 200-character title helps nobody. The cap itself was right and was already in use, as an inline style repeated across ten templates. What was wrong is WHERE it sat: hard against the left of the 1180px measure, with 400px of nothing beside it on pages whose only content is that one card. It is centred in the measure now, and named, so the next form does not have to rediscover the number. */ .formpage { max-width: 760px; margin-inline: auto; } /* ----------------------------------------------------------------- pieces */ .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 20px; } .card + .card { margin-top: 16px; } .card h2 { font-size: var(--smdl-text-section); margin-bottom: 4px; } .card .card-sub { color: var(--muted); font-size: var(--smdl-text-meta); } .card-flush { padding: 0; overflow: hidden; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--smdl-control-height); height: auto; padding: var(--smdl-control-pad) 13px; border: 1px solid var(--hair); border-radius: var(--ctl-radius, 9px); background: var(--card); color: var(--ink); font-family: var(--sans); font-weight: var(--smdl-weight-medium); font-size: var(--smdl-text-control); cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--hover); } /* A filled control carries text, so it takes the deeper step of the hue: the tile itself clears 4.5:1 against white in only four of the six products. --accent stays the graphical value. */ .btn-primary { background: var(--accent-deep); border-color: transparent; color: var(--on-accent); } .btn-primary:hover { background: var(--accent-deep); filter: brightness(1.06); } .btn-quiet { background: transparent; border-color: transparent; color: var(--muted); } .btn-quiet:hover { background: var(--hover); color: var(--ink); } .btn-sm { min-height: var(--smdl-control-small); height: auto; padding: 6px 10px; font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .stats.overview-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 64rem) { .stats.overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 40rem) { .stats.overview-stats { grid-template-columns: minmax(0, 1fr); } } .stat { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 15px 16px; min-width: 0; } .stat .n { font-size: var(--smdl-text-metric); font-weight: var(--smdl-weight-semibold); letter-spacing: normal; line-height: var(--smdl-leading-heading); } .stat .k { color: var(--muted); font-size: var(--smdl-text-meta); margin-top: 2px; } .stat.is-accent .n { color: var(--accent-ink); } /* The count row is shared chrome and carries no margin of its own, so the page that places it decides how far the filters sit below it. Same 14px the filter row leaves under itself, so a list page has one rhythm down its left edge rather than three. */ .smdl-counts { margin-bottom: 14px; } /* filters */ .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; } /* One height on a filter row. These were 32 while .btn beside them was 34 and the enhanced select's trigger was 36 — three heights in every filter bar. */ .filters select, .filters input[type="search"], .filters input[type="text"] { width: auto; height: var(--ctl-h, 34px); border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-family: var(--sans); font-size: var(--smdl-text-control); padding: 0 10px; min-width: 0; font-weight: var(--smdl-weight-regular); } .filters input[type="search"] { min-width: 190px; flex: 1 1 190px; max-width: 320px; } /* tables scroll inside themselves; the page never scrolls sideways */ .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.list { width: 100%; border-collapse: collapse; font-size: var(--smdl-text-body); min-width: 640px; } table.list th { text-align: left; font-size: var(--smdl-text-meta); text-transform: none; letter-spacing: normal; color: var(--muted); font-weight: var(--smdl-weight-medium); padding: 12px 16px; border-bottom: 1px solid var(--hair-soft); white-space: nowrap; } table.list td { padding: 13px 16px; border-bottom: 1px solid var(--hair-soft); vertical-align: middle; } table.list tr:last-child td { border-bottom: 0; } table.list tbody tr:hover { background: var(--hover); } table.list .ref { font-family: var(--mono); font-size: var(--smdl-text-meta); color: var(--muted); white-space: nowrap; } table.list .subject { font-weight: var(--smdl-weight-medium); color: var(--ink); } table.list .subject a:hover { color: var(--accent-ink); } table.list .num { text-align: right; font-variant-numeric: tabular-nums; } table.list .when { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* chips */ /* A BADGE, NOT A PILL. The chip was a 999px capsule at 650 weight, which is the one shape on the page that says "tap me" without being tappable -- and next to a card at 8px and a control at 6px it was the only fully round thing left. It is the mockup's badge now: the shared badge radius, a shorter box, and the weight down to 500, because the tint is what carries a status and the label does not also have to shout. The four custom properties stay, so a context that needs a bigger chip still says so in one place. */ .chip { display: inline-flex; align-items: center; gap: 5px; height: var(--chip-h, 20px); padding: 0 var(--chip-pad, 6px); border-radius: var(--radius-badge); font-size: var(--smdl-text-meta); font-weight: var(--chip-fw, 500); letter-spacing: normal; background: var(--selected); color: var(--ink-2); white-space: nowrap; } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .chip-accent { background: var(--accent-quiet); color: var(--accent-deep); } .chip-quiet { background: transparent; color: var(--muted); border: 1px solid var(--hair); } /* Stage and status read by weight, not by a second hue: the accent marks what is live and everything else stays neutral. */ .chip-strong { background: var(--accent); color: var(--on-accent); } .chip-soft { background: var(--accent-quiet); color: var(--accent-deep); } .chip-good { background: var(--good-soft); color: var(--good); } .chip-bad { background: var(--bad-soft); color: var(--bad); } /* One margin, here, rather than three different inline values on five pages — one of which was a negative margin tuned to the desktop gutter and became a chip row touching the top bar once the gutter shrank on a phone. */ .pill-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 16px; } /* forms */ .field { display: block; margin-bottom: 14px; } .field > .label { display: block; font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); color: var(--ink-2); margin-bottom: 5px; } .field .help { font-size: var(--smdl-text-meta); color: var(--muted); margin-top: 5px; } input[type="text"], input[type="email"], input[type="date"], input[type="search"], input[type="file"], select, textarea { width: 100%; border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-family: var(--sans); font-size: var(--smdl-text-control); padding: 8px 11px; max-width: 100%; font-weight: var(--smdl-weight-regular); } textarea { min-height: 120px; resize: vertical; line-height: 1.55; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; } .form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .checkline { display: flex; align-items: center; gap: 8px; font-size: var(--smdl-text-body); color: var(--ink-2); } .checkline input { width: auto; } /* inline control forms on a detail page */ .control { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .control select { flex: 1 1 140px; height: 32px; padding: 0 10px; } /* two-column detail layout */ .split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } .aside { display: flex; flex-direction: column; gap: 16px; } .aside .card h2 { font-size: var(--smdl-text-section); text-transform: none; letter-spacing: normal; color: var(--muted); margin-bottom: 12px; } .kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 10px; font-size: var(--smdl-text-body); } .kv dt { color: var(--muted); } .kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; } /* thread */ .thread { display: flex; flex-direction: column; gap: 12px; } .note { border: 1px solid var(--hair-soft); border-radius: var(--radius); padding: 14px 16px; background: var(--card); } .note.internal { background: var(--sunken); border-style: dashed; } .note .who { display: flex; align-items: center; gap: 8px; font-size: var(--smdl-text-meta); margin-bottom: 7px; } .note .who b { font-weight: var(--smdl-weight-semibold); } .note .who .when { color: var(--muted); margin-left: auto; } .note .body { white-space: pre-wrap; color: var(--ink-2); line-height: 1.6; overflow-wrap: anywhere; } /* banners */ .banner { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--radius-sm); font-size: var(--smdl-text-body); margin-bottom: 16px; border: 1px solid var(--hair); } /* A refusal was a grey hairline and a success was painted in the product's accent, so "Saved." shouted and "That is not a date." whispered — the two exactly the wrong way round. Status colour comes from the status tokens, and a blocking warning gets the third one rather than reading as an aside. */ .banner-ok { background: var(--good-soft); border-color: transparent; color: var(--good); } .banner-err { background: var(--bad-soft); border-color: transparent; color: var(--bad); font-weight: var(--smdl-weight-medium); } .banner-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); font-weight: var(--smdl-weight-medium); } .banner-info { background: var(--sunken); color: var(--ink-2); } .empty { text-align: left; padding: 34px 20px; color: var(--muted); } /* The same block sat in a flush card on the list pages and in a padded one on Search and Approvals, so it was inset 20px in one place and 40px in another. */ .card:not(.card-flush) > .empty { padding: 14px 0 0; } .empty h2 { font-size: var(--smdl-text-section); color: var(--ink); margin-bottom: 6px; } .empty p + p { margin-top: 12px; } .empty h2 { font-size: var(--smdl-text-section); color: var(--ink); margin-bottom: 6px; } .empty p { max-width: 60ch; } /* ------------------------------------------------- landing and standalone */ .plain { min-height: 100vh; display: flex; flex-direction: column; } .plain-top { display: flex; align-items: center; gap: 12px; padding: 18px 24px; flex-wrap: wrap; } .landing { width: 100%; max-width: 660px; margin: 0 auto; padding: 72px 24px 96px; } .landing h1 { font-size: var(--smdl-text-heading); line-height: var(--smdl-leading-heading); font-weight: var(--smdl-weight-semibold); letter-spacing: normal; margin-bottom: 16px; } .landing .lede { font-size: var(--smdl-text-body); line-height: var(--smdl-leading-body); color: var(--ink-2); margin-bottom: 28px; } .ctas { display: flex; gap: 10px; flex-wrap: wrap; } .cta { display: inline-flex; align-items: center; height: 40px; padding: 0 19px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-weight: var(--smdl-weight-medium); font-size: var(--smdl-text-control); border: 1px solid transparent; } .cta.ghost { background: var(--card); color: var(--ink); border-color: var(--hair); } .hint { margin-top: 26px; color: var(--muted); font-size: var(--smdl-text-meta); } .orglist { display: flex; flex-direction: column; gap: 8px; margin: 26px 0 0; } .orglist a { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-card); font-weight: var(--smdl-weight-medium); } .orglist a:hover { box-shadow: var(--shadow-pop); } .orglist a .go { margin-left: auto; color: var(--muted); font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); } /* ------------------------------------------------------------ responsive */ /* 1280 and up gets the full three-zone shell above. */ @media (max-width: 1080px) { .split { grid-template-columns: minmax(0, 1fr); } .aside { flex-direction: row; flex-wrap: wrap; } .aside > .card { flex: 1 1 260px; } } /* 834 — tablet: the shell rail is handled by smdl-shell.css. */ @media (max-width: 900px) { .page { padding: 0 0 56px; } } /* 390 — phone. */ @media (max-width: 640px) { .page { padding: 0 0 48px; } .landing { padding: 44px 18px 72px; } .landing h1 { font-size: var(--smdl-text-heading); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv { grid-template-columns: 84px minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* --- Getting started guide -------------------------------------------------- */ .guide-head { display: flex; align-items: center; gap: 10px; } .guide-head h2 { margin: 0; } .guide-dismiss { margin-left: auto; } .guide-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .guide-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--hair); border-radius: var(--radius-sm); } /* Done is a state, not a fade. A blanket 0.62 on the row composited the supporting line down to about 2.3:1 on white — under the 3:1 floor, let alone 4.5. The struck link and the green check carry the signal instead. */ .guide-steps li.is-done { border-color: var(--hair-soft); } .guide-steps li.is-done .g-body a { text-decoration: line-through; } .guide-steps .g-mark { color: var(--muted); margin-top: 1px; } .guide-steps li.is-done .g-mark { color: var(--good); } .guide-steps .g-body { display: grid; gap: 1px; } .guide-steps .g-body a { font-weight: var(--smdl-weight-semibold); font-size: var(--smdl-text-body); } .guide-steps .g-body small { color: var(--muted); font-size: var(--smdl-text-meta); } /* ------------------------------------------------ this product's furniture */ /* Money is the loudest thing on a CRM page, so it is set once, here, and never restyled per surface: tabular figures, tight tracking, the page's own ink. */ .money { font-variant-numeric: tabular-nums; font-weight: var(--smdl-weight-semibold); letter-spacing: normal; } /* A stat tile holding money may be holding two currencies at once — this product never converts them — so it sets its own size and is allowed to wrap rather than pushing the tile sideways. */ .stat .n.money { font-size: var(--smdl-text-metric); line-height: var(--smdl-leading-heading); overflow-wrap: normal; } .money-summary { display: flex; flex-wrap: wrap; gap: .125em .3em; overflow-x: auto; } .money-amount { flex: 0 0 auto; white-space: nowrap; } .money-sub { color: var(--muted); font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); } .money-line { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } /* stage chips — one vocabulary, six values, drawn by weight not by six hues */ .stage { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); white-space: nowrap; background: var(--selected); color: var(--ink-2); } .stage .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .stage-live { background: var(--accent-quiet); color: var(--accent-deep); } .stage-negotiation { background: var(--accent); color: var(--on-accent); } .stage-won { background: var(--good-soft); color: var(--good); } .stage-lost { background: var(--bad-soft); color: var(--bad); } /* the pipeline board: columns scroll sideways inside themselves, never the page */ .board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; align-items: flex-start; } .board-col { flex: 0 0 268px; background: var(--sunken); border-radius: var(--radius); padding: 12px; min-height: 120px; } .board-col.is-terminal { background: transparent; box-shadow: 0 0 0 1px var(--hair-soft) inset; } .board-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } /* The board is a column of sections on Pipeline, where its headings are the page's own (h2), and a block inside a card on Overview, where they sit under that card's heading (h3). One component, two honest levels. */ .board-head h2, .board-head h3 { font-size: var(--smdl-text-section); } .board-head .count { margin-left: auto; color: var(--muted); font-size: var(--smdl-text-meta); font-variant-numeric: tabular-nums; } .board-total { color: var(--muted); font-size: var(--smdl-text-meta); margin-bottom: 10px; font-variant-numeric: tabular-nums; } .board-cards { display: flex; flex-direction: column; gap: 8px; } .deal-card { display: block; background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 11px 12px; } .deal-card:hover { box-shadow: var(--shadow-pop); } .deal-card .t { display: block; font-weight: var(--smdl-weight-semibold); font-size: var(--smdl-text-body); line-height: var(--smdl-leading-body); } .deal-card .c { display: block; color: var(--muted); font-size: var(--smdl-text-meta); margin-top: 2px; } .deal-card .m { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; } .deal-card .m .when { margin-left: auto; color: var(--muted); font-size: var(--smdl-text-meta); } .board-empty { color: var(--muted); font-size: var(--smdl-text-body); padding: 8px 2px; } /* attention lists on the overview */ .duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } .duo > .card { margin: 0; } .minilist { display: flex; flex-direction: column; margin-top: 10px; } .minilist a, .minilist .row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair-soft); } .minilist > :last-child { border-bottom: 0; } .minilist .t { font-weight: var(--smdl-weight-medium); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .minilist .meta { margin-left: auto; color: var(--muted); font-size: var(--smdl-text-meta); white-space: nowrap; font-variant-numeric: tabular-nums; } /* the activity timeline — one shape on every detail page */ .timeline { display: flex; flex-direction: column; gap: 0; margin-top: 12px; } .tl { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; position: relative; } .tl:not(:last-child)::before { content: ""; position: absolute; left: 12.5px; top: 26px; bottom: 0; width: 1px; background: var(--hair); } .tl .tl-mark { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-quiet); color: var(--accent-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; } .tl .tl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .tl .tl-head b { font-weight: var(--smdl-weight-semibold); font-size: var(--smdl-text-body); } .tl .tl-head .when { margin-left: auto; color: var(--muted); font-size: var(--smdl-text-meta); } .tl .tl-body { color: var(--ink-2); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 3px; } .tl .tl-who { color: var(--muted); font-size: var(--smdl-text-meta); margin-top: 4px; } /* stage history: the events behind the current stage */ .events { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; font-size: var(--smdl-text-body); } .events .ev { display: flex; align-items: baseline; gap: 8px; } .events .ev .when { margin-left: auto; color: var(--muted); white-space: nowrap; } .events .ev .arrow { color: var(--muted); } /* search results */ .resultset + .resultset { margin-top: 16px; } /* A direct child only. Declared later than .card h2 at equal specificity, this label styling won for any card heading nested inside a result set — so a group's own heading rendered smaller than the section above it. */ .resultset > h2 { font-size: var(--smdl-text-section); text-transform: none; letter-spacing: normal; color: var(--muted); margin-bottom: 8px; } /* honest, deliberate blank surfaces (approvals, no results) */ .quiet-note { color: var(--muted); font-size: var(--smdl-text-body); margin-top: 8px; max-width: 68ch; line-height: var(--smdl-leading-body); } @media (max-width: 640px) { .board-col { flex-basis: 232px; } } /* A filled swatch standing for another application's seat. Filled shapes wear the tile variant, and lift to that hue's dark value on a near-black canvas — never a different hue. */ .seat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--seat, var(--accent)); margin-right: 7px; vertical-align: baseline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seat-dot { background: var(--seat-dark, var(--accent)); } } :root[data-theme="dark"] .seat-dot { background: var(--seat-dark, var(--accent)); } /* Platform notifications: a quick triage panel in the shell and a full inbox in the canvas. The event store is in CORE; this product only renders the signed-in person's deliveries and sends read state back through its own authenticated server. */ .platform-notif { position: relative; } .platform-notif-bell { position: relative; } .platform-notif-badge { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--canvas); font-size: var(--smdl-text-meta); line-height: var(--smdl-leading-body); text-align: center; font-weight: var(--smdl-weight-medium); } .platform-notif-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; width: min(390px, calc(100vw - 28px)); overflow: hidden; border-radius: var(--radius-lg); background: var(--card); box-shadow: 0 0 0 1px var(--hair), 0 20px 54px -18px rgba(8, 11, 16, .42); } .platform-notif-panel[hidden] { display: none; } .platform-notif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; border-bottom: 1px solid var(--hair-soft); } .platform-notif-head strong { font-size: var(--smdl-text-body); } .text-link { appearance: none; border: 0; padding: 4px; background: none; color: var(--accent-ink); font: inherit; font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); cursor: pointer; } .platform-notif-tabs { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--hair-soft); } .platform-notif-tabs button { appearance: none; border: 0; border-radius: var(--radius-sm); padding: 6px 10px; background: transparent; color: var(--muted); font: inherit; font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); cursor: pointer; } .platform-notif-tabs button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); } .platform-notif-list { max-height: min(430px, 58vh); overflow-y: auto; } .platform-notif-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 14px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair-soft); } .platform-notif-item:hover { background: var(--surface-2); } .platform-notif-item .notif-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: transparent; } .platform-notif-item.is-unread .notif-dot { background: var(--accent); } .platform-notif-copy { min-width: 0; } .platform-notif-copy strong, .platform-notif-copy small { display: block; } .platform-notif-copy strong { font-size: var(--smdl-text-body); font-weight: var(--smdl-weight-semibold); overflow-wrap: anywhere; } .platform-notif-copy small { margin-top: 3px; color: var(--muted); font-size: var(--smdl-text-meta); line-height: var(--smdl-leading-body); overflow-wrap: anywhere; } .platform-notif-source { color: var(--muted); font-size: var(--smdl-text-meta); text-transform: none; letter-spacing: normal; } .platform-notif-empty { padding: 28px 16px; color: var(--muted); text-align: center; font-size: var(--smdl-text-body); } .platform-notif-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; color: var(--accent-ink); text-decoration: none; font-size: var(--smdl-text-meta); font-weight: var(--smdl-weight-medium); } .notification-feed { display: grid; gap: 0; } .notification-feed .platform-notif-item { grid-template-columns: 8px minmax(0, 1fr) auto; padding: 15px 16px; } .notification-feed .platform-notif-item:last-child { border-bottom: 0; } @media (max-width: 640px) { .platform-notif-panel { position: fixed; top: 58px; right: 10px; left: 10px; width: auto; } .platform-notif-item, .notification-feed .platform-notif-item { grid-template-columns: 8px minmax(0, 1fr); } .platform-notif-source { grid-column: 2; } } /* -------------------------------------------------------------------------- Small components the audit found inlined, missing, or invented per page. -------------------------------------------------------------------------- */ /* A card whose body is a table needs its heading padded while the table runs to the card's own edges. This was style="padding:20px 20px 0" written out five times, with one of the five a different value. */ .card-head { padding: 20px 20px 0; } .card-head + .tablewrap, .card-flush .tablewrap { margin-top: 12px; } /* A chip that is a link says so. The same "open the company" chip was neutral on one page and accent on another, and neither took a hover. */ .chip-link { background: var(--accent-quiet); color: var(--accent-deep); } a.chip { transition: background 120ms ease; } a.chip:hover { background: var(--hover); } a.chip-link:hover { background: var(--accent-soft); } /* Paging. Every list was capped and printed its own length as the total. */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .pager-count { color: var(--muted); font-size: var(--smdl-text-meta); } .pager-links { display: flex; gap: 8px; } .pager .btn.is-disabled { opacity: .5; pointer-events: none; } /* The stage history stored an actor and a note and rendered neither. */ .events .ev { flex-wrap: wrap; } .events .ev-who { color: var(--muted); } .events .ev-note { flex-basis: 100%; color: var(--ink-2); } /* An entry's own controls, inline in the byline rather than a row of buttons. */ .tl-inline { display: inline; } .tl-who .text-link { font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); } /* Visually hidden, for a column header that is a control rather than a word. */ .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The board's "N more" is a link, and was wearing the empty state's class. */ .board-more { color: var(--accent-deep); font-size: var(--smdl-text-control); font-weight: var(--smdl-weight-medium); padding: 8px 2px; } .board-more:hover { text-decoration: underline; } /* A money line is a flex row, so text-align cannot right-align it; the cell it sits in has to push it. Reports left-aligned its money against a Deals table that right-aligned the same figures. */ table.list td.num .money-line { justify-content: flex-end; }