/* Values mirror libs/web/ui/src/styles/ui.css (the app's Quiet set); change there first, then here. */ :root { color-scheme: light; --bg: #ffffff; --surface: #ffffff; --card: #f4f4f7; --card-hover: #ececf1; --hover: #f1f1f4; --text: #1a1a1f; --text-2: #66666f; --text-3: #9a9aa3; --line: #e6e6ea; --line-2: #f0f0f3; --line-strong: #d4d4da; --accent: #1e7a4e; --accent-hover: #17663f; --accent-soft: #e4f2ea; --accent-ink: #ffffff; --danger: #c2412f; --danger-soft: #fcedea; --ok: #1e7a4e; --warn: #c4841a; --curve-map: #1a1a1f; --emo-n2: #c9463b; --emo-n1: #d98a2b; --emo-z: #9a9aa3; --emo-p1: #6fa53a; --emo-p2: #1e7a4e; --shadow-pop: 0 12px 32px -8px rgba(20, 20, 30, 0.22), 0 1px 3px rgba(20, 20, 30, 0.08); --r: 6px; --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --focus: var(--accent); --selection: #cfe9da; --btn-hover: #2e2e36; --pip: #ebc9c3; --scroll: #cfcfd6; --scroll-hover: #b8b8c1; } /* dark: a designed set, not an inversion; the head script stamps data-theme on before first paint. */ :root[data-theme='dark'] { color-scheme: dark; --bg: #141418; --surface: #1b1b21; --card: #24242b; --card-hover: #2c2c34; --hover: #26262e; --text: #ededf0; --text-2: #a6a6b0; --text-3: #7c7c88; --line: #2a2a32; --line-2: #232329; --line-strong: #3b3b45; --accent: #45b078; --accent-hover: #5cc48e; --accent-soft: #172e20; --accent-ink: #0e1f16; --danger: #ee7466; --danger-soft: #3b201d; --ok: #45b078; --warn: #e3a73f; --curve-map: #ededf0; --emo-n2: #ee7466; --emo-n1: #e3a73f; --emo-z: #7c7c88; --emo-p1: #9acb5e; --emo-p2: #45b078; --shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line); --selection: #234b36; --btn-hover: #ffffff; --pip: #4a2a27; --scroll: #3b3b45; --scroll-hover: #4a4a56; } /* site-only tokens on top of the shell set: the frosted bar and the quote highlight */ :root { --site-bar: rgba(255, 255, 255, 0.92); --mark: #f3e8b3; } :root[data-theme='dark'] { --site-bar: rgba(20, 20, 24, 0.86); --mark: #4a3f1a; } :root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } /* Self-hosted Onest, copied from @fontsource/onest: latin and latin-ext at the three weights the design uses. The .woff2 files live in src/assets/fonts — a weight added here needs its files copied too. */ @font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/onest-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/onest-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/onest-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/onest-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/fonts/onest-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/fonts/onest-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Base document rules, then the base/shell rules the site actually uses, in source order: generated from the rendered mockup by the script in docs/superpowers/plans/2026-09-13-p28-site.md. Regenerate, never extend by hand. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } kbd { font: inherit; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ic { display: inline-block; vertical-align: middle; flex: none; fill: currentColor; } :focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 2px; } ::selection { background: var(--selection); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--scroll); border: 3px solid transparent; background-clip: padding-box; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-hover); } ::-webkit-scrollbar-corner { background: transparent; } button:disabled { cursor: default; opacity: 0.45; } .card:focus-visible, .emo__dot:focus-visible { outline: none; } .stack { display: flex; flex-direction: column; gap: var(--stack-gap, 8px); min-height: var(--stack-min, 80px); position: relative; } .card { position: relative; user-select: none; } .card__footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .card__personas { display: inline-flex; } .card__personas .avatar + .avatar { margin-left: -5px; } .card__comments { display: inline-flex; align-items: center; gap: 3px; } .pips { display: inline-flex; gap: 2px; } .pip { width: 6px; height: 6px; border-radius: 50%; } .avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex: 0 0 auto; letter-spacing: 0px; line-height: 1; } .card__personas .avatar:nth-child(1) { z-index: 3; } .card__personas .avatar:nth-child(2) { z-index: 2; } .card__personas .avatar:nth-child(3) { z-index: 1; } .chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .field { display: flex; flex-direction: column; gap: 5px; min-width: 0px; } .input { width: 100%; min-width: 0px; } .input--area { resize: vertical; } .comments { list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: 10px; } .comment { display: flex; gap: 8px; } .comment p { margin: 2px 0px 0px; } .comment__meta { display: block; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease; } .btn:active, .iconbtn:active, .pchip:active, .chip button:active { transform: scale(0.97); } .pop-wrap { position: relative; display: inline-flex; } .pop { position: absolute; z-index: 60; opacity: 0; transform: scale(0.95); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); will-change: transform, opacity; } .btn { height: 28px; padding: 0px 11px 0px 9px; border-radius: var(--r); background: var(--text); color: var(--surface); font-weight: 500; } .btn:hover { background: var(--btn-hover); } .btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line); } .btn--ghost:hover { background: var(--hover); } .btn--sm { height: 26px; padding: 0px 9px; font-size: 12px; } .avatar { border-radius: 50%; background: var(--pc); color: rgb(255, 255, 255); } .field__label { font-size: 11.5px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 6px; } .input { height: 30px; padding: 0px 9px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); transition: border-color 120ms, box-shadow 120ms; } .input--area { height: auto; padding: 7px 9px; line-height: 1.45; } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input::placeholder { color: var(--text-3); } select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2366666F'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 13px; padding-right: 26px; } .chip { height: 24px; padding: 0px 5px 0px 8px; border-radius: 999px; background: color-mix(in srgb, var(--cc) 12%, var(--surface)); color: var(--text); font-weight: 500; font-size: 12px; } .chip--persona { padding-left: 3px; } .chip--persona .avatar { width: 16px; height: 16px; font-size: 7px; } .chip--add { --cc: var(--text-3); background: transparent; border: 1px dashed var(--line-strong); color: var(--text-2); gap: 4px; padding: 0px 9px 0px 6px; } .chip--add:hover { background: var(--hover); color: var(--text); border-style: solid; } .comment .avatar { width: 22px; height: 22px; font-size: 9px; } .comment__meta { font-size: 11px; color: var(--text-3); } .comment p { font-size: 12.5px; } .pop { top: calc(100% + 6px); left: 0px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-pop); } .list__icon { width: 30px; height: 30px; border-radius: var(--r); background: var(--card); display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); flex: 0 0 auto; } .list__body { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; } .list__name { font-weight: 500; } .list__meta { color: var(--text-3); font-size: 12px; } .switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--line-strong); transition: background-color 150ms; flex: 0 0 auto; cursor: pointer; } .switch input { position: absolute; inset: 0px; opacity: 0; margin: 0px; cursor: pointer; } .switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgb(255, 255, 255); transition: transform 160ms var(--ease-out); box-shadow: rgba(20, 20, 30, 0.2) 0px 1px 2px; } .switch:has(input:checked) { background: var(--accent); } .switch:has(input:checked)::after { transform: translateX(14px); } .switch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .toggle-row { display: flex; align-items: flex-start; gap: 12px; } .toggle-row__text { display: flex; flex-direction: column; gap: 2px; } .fpill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0px 7px 0px 9px; border-radius: var(--r); color: var(--text-2); font-weight: 500; } .fpill:hover, .fpill[aria-expanded='true'] { background: var(--hover); color: var(--text); } .fpill.is-on { color: var(--accent); background: var(--accent-soft); } .stack { padding: 8px 6px; border-right: 1px solid var(--line-2); min-height: 100%; } .card { padding: 9px 11px; background: var(--card); border-radius: var(--r); display: flex; flex-direction: column; gap: 5px; transition: background-color 120ms, box-shadow 120ms; } .card.is-selected, .card.is-selected:hover { background: var(--surface); box-shadow: 0 0 0 2px var(--accent); } .card__text { font-size: 13px; line-height: 1.45; } .card__footer { color: var(--text-3); font-size: 11px; margin-top: 1px; } .card__personas .avatar { width: 18px; height: 18px; font-size: 7.5px; box-shadow: 0 0 0 1.5px var(--card); } .card.is-selected .card__personas .avatar { box-shadow: 0 0 0 1.5px var(--surface); } .card__overline { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--text-3); } .card__overline--pain { color: var(--danger); } .card__overline--opportunity { color: var(--accent); } .pip { background: var(--pip); } .pip.is-on { background: var(--danger); } .card__meta { font-size: 11px; color: var(--text-3); } .card__meta b { font-weight: 500; color: var(--text-2); } .card__kpi-label { font-size: 11.5px; color: var(--text-2); } .card__kpi-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } .card__kpi-unit { font-size: 12px; font-weight: 500; color: var(--text-3); margin-left: 3px; letter-spacing: 0px; } .card__kpi-trend { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 500; color: var(--text-3); } .card__kpi-trend.is-up { color: var(--ok); } .pop.is-open { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .pop, .btn, .iconbtn, .pchip, .card { transition-duration: 1ms !important; } .pop { transform: none; } } /* Marketing site chrome: the site bar with its menus, the footer, the lede. Shared by every page. */ html { scroll-padding-top: 76px; } body { display: block; min-height: 100vh; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; } a { color: inherit; } h1, h2, h3 { text-wrap: balance; } /* site bar */ .site { position: sticky; top: 0; z-index: 50; background: var(--site-bar); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site .wrap { display: flex; align-items: center; gap: 2px; height: 60px; } .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 19px; letter-spacing: -0.03em; text-decoration: none; margin-right: 22px; color: var(--text); } .site__nav { display: flex; gap: 2px; } .site__link { display: inline-flex; align-items: center; gap: 3px; height: 32px; /* site links stay on one line: the 32px box has no room for a wrapped label */ white-space: nowrap; padding: 0 10px; border-radius: var(--r); color: var(--text-2); font-weight: 500; font-size: 14px; text-decoration: none; background: none; } .site__link:hover, .site__link[aria-expanded='true'] { background: var(--hover); color: var(--text); } .site__right { margin-left: auto; display: flex; align-items: center; gap: 6px; } .site__burger { display: none; width: 36px; height: 36px; border-radius: var(--r); align-items: center; justify-content: center; color: var(--text); } .site__burger:hover { background: var(--hover); } .site__theme { width: 32px; height: 32px; border-radius: var(--r); display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); } .site__theme:hover { background: var(--hover); color: var(--text); } .btn { height: 32px; padding: 0 13px; font-size: 14px; text-decoration: none; } .btn--accent { background: var(--accent); color: var(--accent-ink); } .btn--accent:hover { background: var(--accent-hover); } .btn--lg { height: 40px; padding: 0 18px; font-size: 15px; border-radius: 7px; } .pop--mega { top: calc(100% + 8px); left: 0; width: 760px; padding: 18px 18px 14px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-pop); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 18px; transform-origin: top left; } .mega__h { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); font-weight: 500; margin: 0 0 6px; padding: 0 8px; } .mega__col { display: flex; flex-direction: column; } .mega__item { display: flex; gap: 10px; padding: 8px; border-radius: var(--r); text-decoration: none; } .mega__item:hover { background: var(--hover); } .mega__item .ic { color: var(--text-2); margin-top: 3px; } .mega__item b { display: block; font-weight: 500; font-size: 14px; line-height: 1.3; } .mega__item span { color: var(--text-3); font-size: 12.5px; line-height: 1.35; } .site__link[aria-current] { color: var(--text); } .pop--menu a.menu__item { text-decoration: none; } .pop--menu .menu__item { height: 30px; } .lede { font-size: 17px; line-height: 1.5; color: var(--text-2); max-width: 54ch; margin: 0; } .lede a { color: var(--accent); } /* footer */ .foot { border-top: 1px solid var(--line); padding: 52px 0 40px; font-size: 13.5px; } .foot__cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; } .foot h4 { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); font-weight: 500; margin: 0 0 12px; } .foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .foot a { text-decoration: none; color: var(--text-2); } .foot a:hover { color: var(--text); } /* A footer column heading that links its section hub is a link, so it takes the footer link colour, not the label's. */ .foot h4 a { color: var(--text-2); } .foot h4 a:hover { color: var(--text); } .foot__tag { color: var(--text-2); margin: 10px 0 0; max-width: 30ch; } /* The cookie control is the withdrawal route the privacy policy names, so unlike the plain spans beside it, it is underlined, one step darker for AA and padded to a 24px target without changing the row's height; the base button reset already strips its chrome. */ .foot__link { color: var(--text-2); padding-block: 3px; margin-block: -3px; text-decoration: underline; text-underline-offset: 3px; } .foot__link:hover { color: var(--text); } .foot__bottom { display: flex; gap: 20px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line-2); color: var(--text-3); font-size: 12.5px; } @media (max-width: 960px) { .site__nav { display: none; } .foot__cols { grid-template-columns: 1fr 1fr; } } /* blog cards, shared by the home section and the blog page */ .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .section__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; text-decoration: none; color: var(--text-2); white-space: nowrap; padding-bottom: 4px; } .section__more:hover { color: var(--text); } .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; } .post { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; min-width: 0; } .post__cover { aspect-ratio: 8 / 3; background: var(--card); border-radius: 8px; overflow: hidden; transition: background-color 120ms ease; } .post__cover svg { width: 100%; height: 100%; display: block; } .post:hover .post__cover { background: var(--card-hover); } .post__body { display: flex; flex-direction: column; gap: 6px; } .post__meta { display: flex; gap: 6px; font-size: 12.5px; color: var(--text-3); } .post__title { font-size: 17px; font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -0.01em; } .post:hover .post__title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .post__desc { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; } @media (max-width: 960px) { .posts { grid-template-columns: 1fr; } } /* hover menus: an invisible bridge covers the gap between the trigger and its menu */ .site__nav .pop::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .pop--mega[data-cols='2'] { width: 520px; grid-template-columns: 1fr 1fr; } .mega__card { background: var(--card); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 8px; align-self: start; } .mega__card b { font-weight: 600; font-size: 14px; } .mega__card p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.45; } .mega__card a { font-weight: 500; font-size: 13px; color: var(--accent); text-decoration: none; } .mega__card a:hover { text-decoration: underline; } /* ---- shared by the landing and the page template ---- */ .modules { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .modules a { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 46px; padding: 0 12px 0 14px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; font-weight: 500; font-size: 14px; } .modules a:hover { background: var(--hover); } .modules .ic { color: var(--text-3); } /* feature blocks */ .feature { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; padding: 72px 0; border-top: 1px solid var(--line-2); } .feature h2 { font-size: 26px; } .feature--flip { grid-template-columns: 7fr 5fr; } .feature--flip .feature__text { order: 2; } .feature__text .lede { font-size: 15.5px; margin-top: 12px; } .points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .points li { display: flex; gap: 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; } .points .ic { color: var(--accent); flex: none; margin-top: 4px; } .points b { color: var(--text); font-weight: 500; } .frame { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; font-size: 13px; line-height: 1.45; } .frame__bar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); white-space: nowrap; } .frame__bar b { font-weight: 500; color: var(--text); } .frame__bar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .frame__bar .grow { flex: 1; } .frame__body { padding: 16px; } /* 1 editor: a stack beside the version history */ .edit { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 16px; } .edit .stack { min-height: 0; padding: 0; border: 0; } .hist { border-left: 1px solid var(--line); padding-left: 16px; } .hist .panel__h { margin-top: 0; } /* 2 curves */ .curves svg { display: block; width: 100%; height: auto; } .legend { display: flex; gap: 18px; margin-top: 8px; font-size: 12.5px; color: var(--text-2); } .legend span { display: inline-flex; align-items: center; gap: 7px; } .legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--pc); } /* 3 research */ .insights { display: flex; flex-direction: column; gap: 10px; } .ins { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; gap: 7px; } .ins__head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); } .ins__head b { color: var(--text); font-weight: 500; } .ins__state { margin-left: auto; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; } .ins__state--ok { background: var(--accent-soft); color: var(--accent); } .ins__state--new { background: var(--card); color: var(--text-2); } .ins__text { font-weight: 500; } .ins__quote { margin: 0; color: var(--text-2); } .ins__quote mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 2px; } .ins__foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); } .ins__foot .key { font-size: 11px; color: var(--text-2); padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; font-weight: 500; } .ins__acts { display: flex; gap: 4px; margin-left: auto; } .ins__acts .btn { height: 24px; padding: 0 8px; font-size: 12px; } .prompt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--text-2); } .prompt .ic { color: var(--accent); } .prompt b { color: var(--text); font-weight: 500; } .prompt .btn { margin-left: auto; height: 26px; padding: 0 10px; font-size: 12.5px; } /* 4 portfolio */ .chart svg { display: block; width: 100%; height: auto; } .chart__cap { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-3); } .chart__cap span { display: inline-flex; gap: 14px; } .chart__cap i { display: inline-flex; align-items: center; gap: 5px; font-style: normal; } .chart__cap i::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); } /* 5 metrics */ .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .metrics .card { gap: 6px; } .spark { display: block; width: 100%; height: 34px; margin-top: 4px; } .bars { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; font-size: 12px; } .bars div { display: grid; grid-template-columns: 44px 1fr 30px; align-items: center; gap: 8px; color: var(--text-2); } .bars i { height: 6px; border-radius: 3px; background: var(--text); width: var(--w); } .bars .is-warn i { background: var(--warn); } .bars b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); } .thresh { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--warn); margin-top: 2px; } /* around the map */ .around { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin-top: 36px; border-top: 1px solid var(--line-2); } .around > div { padding: 22px 0; border-bottom: 1px solid var(--line-2); } .around h3 { font-size: 15px; font-weight: 600; margin: 0 0 5px; display: flex; align-items: center; gap: 8px; } .around .ic { color: var(--text-3); } .around p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; } /* mini map (the "map" and "industry" visuals) */ .frame--map .frame__body { padding: 0; overflow-x: auto; } .mm { display: grid; grid-template-columns: 104px repeat(var(--n), minmax(132px, 1fr)); min-width: 640px; font-size: 12px; } .mm__corner, .mm__stage { height: 34px; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--line); font-weight: 600; } .mm__stage { border-left: 1px solid var(--line-2); } .mm__lane { display: flex; align-items: center; gap: 6px; padding: 10px; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--line-2); } .mm__lane .ic { color: var(--text-3); } .mm__cell { padding: 8px 6px; border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); } .mm__cell .card { padding: 7px 9px; font-size: 12px; gap: 4px; } .mm__cell .card__text { font-size: 12px; line-height: 1.4; } .mm__cell .card__overline { font-size: 10.5px; } .mm__cell .card__meta { font-size: 10.5px; } .mm__emo { height: 84px; border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 6px 0; } .mm__emo svg { width: 100%; height: 100%; display: block; } .mm__personas { display: inline-flex; align-items: center; gap: 4px; } .mm__personas .avatar { width: 20px; height: 20px; font-size: 8px; } .mm__persona { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; } /* templates */ .tpls9 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .tpl9 { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; font-weight: 500; font-size: 13px; } .tpl9 .ic { color: var(--text-2); } .tpl9--blank { background: transparent; border: 1px dashed var(--line-strong); color: var(--text-2); } /* personas */ .pcards { display: flex; flex-direction: column; gap: 10px; } .pcard { flex-direction: row; gap: 12px; align-items: flex-start; } .pcard .avatar { width: 34px; height: 34px; font-size: 12px; } .pcard b { display: block; font-weight: 600; } .pcard > div > span { display: block; color: var(--text-2); font-size: 12.5px; } .sliders { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .sliders div { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 8px; font-size: 11px; color: var(--text-3); } .sliders div span:last-child { text-align: right; } .sliders i { position: relative; height: 3px; border-radius: 2px; background: var(--line-strong); } .sliders i::after { content: ''; position: absolute; top: -4px; left: var(--x); width: 11px; height: 11px; border-radius: 50%; background: var(--text); transform: translateX(-50%); } .pcards__row { display: flex; gap: 6px; flex-wrap: wrap; } /* blueprint */ .bp { display: grid; grid-template-columns: 110px repeat(3, 1fr); gap: 8px 8px; align-items: stretch; } .bp__lane { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-2); font-size: 12.5px; } .bp__lane .ic { color: var(--text-3); } .bp__vis { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .bp__vis::before, .bp__vis::after { content: ''; flex: 1; border-top: 1px dashed var(--line-strong); } .card--back { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); } /* collaboration */ .collab { display: flex; flex-direction: column; gap: 14px; } .collab .comments { gap: 12px; } .collab .comment .avatar { width: 26px; height: 26px; font-size: 10px; } .collab .comment b { font-weight: 600; } .collab .comment p { margin: 2px 0 0; color: var(--text-2); } .collab .comment__meta { color: var(--text-3); font-size: 12px; } .collab__roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .collab__role { padding: 8px 10px; background: var(--card); border-radius: var(--r); font-size: 12px; } .collab__role b { display: block; font-weight: 600; } .collab__role span { color: var(--text-2); } .collab__audit { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); padding-top: 10px; border-top: 1px solid var(--line-2); } .collab__audit b { color: var(--text); font-weight: 500; } /* integrations */ .integ { display: flex; flex-direction: column; gap: 14px; } .integ__row { display: flex; align-items: center; gap: 12px; } .integ__tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; } .integ__tbl th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 11.5px; padding: 4px 8px; border-bottom: 1px solid var(--line); } .integ__tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line-2); } .integ__tbl td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; } .integ__note { color: var(--text-3); font-size: 12px; } /* security */ .sec { display: flex; flex-direction: column; gap: 10px; } .sec__link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--card); border-radius: var(--r); font-size: 12.5px; } .sec__link span:first-of-type { flex: 1; color: var(--text-2); } .sec .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); } .sec .toggle-row__text b { display: block; font-weight: 500; } .sec .toggle-row__text span { color: var(--text-3); font-size: 12px; } .sec__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 4px; } .sec__facts div { font-size: 12px; } .sec__facts b { display: block; font-weight: 600; } .sec__facts span { color: var(--text-2); } /* the editor shot: 1120px by design, scaled down on narrow screens */ .shot-fit { position: relative; overflow: hidden; } .shot { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 32px 56px -40px rgba(20, 20, 30, 0.35); font-size: 13px; line-height: 1.45; } /* Doubled `.shot` for 0,3,0: the generated hero block at the end of this file repeats these selectors at 0,2,0 and must not win. */ .shot.shot--editor { height: 584px; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: 44px minmax(0, 1fr); } .shot.shot--editor .rail { grid-row: 1 / 3; grid-column: 1; } .shot.shot--editor .top, .shot.shot--editor .main { grid-column: 2; } .shot.shot--editor .main { overflow: hidden; } .shot.shot--editor .grid { padding-bottom: 0; } .shot.shot--editor .crumb { white-space: nowrap; } .shot.shot--editor .crumb__name { max-width: 220px; } /* The frozen picture shows no interaction cursor; `*` adds no specificity, so `.shot` is tripled to clear the generated block. */ .shot.shot--editor, .shot.shot.shot--editor * { cursor: default; } /* mobile sheet */ body.menu-open { overflow: hidden; } .sheet { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 49; background: var(--surface); overflow: auto; padding: 4px 20px 40px; } .sheet__group { padding: 14px 0; border-bottom: 1px solid var(--line-2); } .sheet__h { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); font-weight: 500; margin: 0 0 4px; } .sheet__group a { display: block; padding: 9px 0; font-size: 16px; font-weight: 500; text-decoration: none; } .sheet__cta { display: flex; gap: 8px; padding-top: 18px; flex-wrap: wrap; } @media (max-width: 960px) { .wrap { padding: 0 20px; } .site .wrap { height: 56px; } .site__nav, .site__right .site__link, .site__right .btn--ghost { display: none; } .site__burger { display: inline-flex; } .site__right { gap: 8px; } .feature { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; } .feature--flip { grid-template-columns: 1fr; } .feature--flip .feature__text { order: 0; } .feature h2 { font-size: 24px; } .modules { grid-template-columns: 1fr 1fr; } .around { grid-template-columns: 1fr; } .edit { grid-template-columns: 1fr; } .hist { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; } .metrics { grid-template-columns: 1fr; } .collab__roles { grid-template-columns: 1fr 1fr; } .bp { grid-template-columns: 1fr; } .bp__lane { padding-top: 6px; } .foot__cols { grid-template-columns: 1fr 1fr; gap: 24px; } .form { grid-template-columns: 1fr; } .frame__bar { overflow: hidden; } } /* request forms (landing access section, contact page) */ .form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form .field--wide { grid-column: 1 / -1; } .form .input { height: 36px; font-size: 14px; } .form .input--area { height: auto; min-height: 84px; } .form__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 4px; color: var(--text-3); font-size: 12.5px; } .thanks { padding: 20px 22px; border: 1px solid var(--line); border-radius: 10px; } .thanks h3 { margin: 0 0 6px; font-size: 17px; } .thanks p { margin: 0; color: var(--text-2); } .hist__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 12.5px; } .hist__row b { display: block; font-weight: 500; } .hist__row span { color: var(--text-3); font-size: 11.5px; } .hist__h { font-weight: 600; margin-bottom: 4px; } .hist__hint { color: var(--text-3); font-size: 12px; margin: 0 0 8px; line-height: 1.45; } /* the logo on hover: the journey draws itself, waypoint by waypoint, and ends well */ .brand__mark { overflow: visible; } .mark__dot, .mark__end { transform-box: fill-box; transform-origin: center; } @media (prefers-reduced-motion: no-preference) { .brand:hover .mark__curve { stroke-dasharray: 1; animation: mark-draw 0.55s cubic-bezier(0.4, 0, 0.2, 1) both; } .brand:hover .mark__dot { animation: mark-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; } .brand:hover .mark__dot:nth-of-type(2) { animation-delay: 0.18s; } .brand:hover .mark__dot:nth-of-type(3) { animation-delay: 0.36s; } .brand:hover .mark__end { animation: mark-land 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.5s both; } } @keyframes mark-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes mark-pop { from { transform: scale(0); } to { transform: scale(1); } } @keyframes mark-land { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } } /* hero */ .hero { padding: 76px 0 0; } .hero h1 { font-size: 48px; line-height: 1.08; letter-spacing: -0.028em; font-weight: 600; margin: 0; max-width: 15ch; } .hero .lede { margin-top: 18px; } .hero__cta { display: flex; gap: 8px; margin-top: 28px; } .shot-fit { margin-top: 52px; } /* Sized by the frozen editor's own ratio (1120 × 584), not by the fit script: the page below must not move when the deferred main.js scales the shot into this box. */ .hero .shot-fit { aspect-ratio: 1120 / 584; } /* sections */ .section { padding: 76px 0; border-top: 1px solid var(--line-2); } .section h2, .feature h2, .cta h2 { font-size: 30px; line-height: 1.15; letter-spacing: -0.022em; font-weight: 600; margin: 0; } .section .lede { margin-top: 12px; } .tpls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; padding: 22px 0; margin-top: 48px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); color: var(--text-2); font-size: 14px; } /* The nine names are links; the lead sentence stays the strip's first and only span. */ .tpls > span, .tpls > a { padding: 0 13px; border-left: 1px solid var(--line); line-height: 1.2; white-space: nowrap; } .tpls > span:first-child { border-left: 0; padding-left: 0; color: var(--text); font-weight: 500; } .tpls > a { color: inherit; text-decoration: none; } .tpls > a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } /* hosting and use cases */ .band { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } .uc { list-style: none; margin: 22px 0 0; padding: 0; } .uc li { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 14.5px; } .uc b { font-weight: 500; min-width: 172px; } .uc span { color: var(--text-2); } /* access */ .cta { padding: 84px 0; border-top: 1px solid var(--line); } .cta .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .cta .lede { margin-top: 14px; } @media (max-width: 960px) { .hero { padding-top: 36px; } .hero h1 { font-size: 34px; } .hero .lede { font-size: 16px; } .hero__cta { flex-wrap: wrap; } .shot-fit { margin-top: 32px; } .section { padding: 48px 0; } .section h2, .cta h2 { font-size: 26px; } .tpls > span, .tpls > a { white-space: normal; } .band, .cta .wrap { grid-template-columns: 1fr; gap: 32px; } .form { grid-template-columns: 1fr; } .cta { padding: 56px 0; } } /* ---- blog index: the same site chrome, the posts as cards, the latest one wide ---- */ .blog .wrap { padding-top: 64px; padding-bottom: 96px; } .blog__head h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; margin: 0; } .blog__head .lede { margin-top: 14px; } .blog__filter { display: flex; gap: 6px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-2); } .posts--blog { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; } .post--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 7fr 5fr; gap: 36px; align-items: center; padding-bottom: 32px; border-bottom: 1px solid var(--line-2); } .post--wide .post__title { font-size: 26px; letter-spacing: -0.02em; } .post--wide .post__desc { font-size: 15.5px; } .post--wide .post__body { gap: 10px; } @media (max-width: 960px) { .posts--blog, .post--wide { grid-template-columns: 1fr; } } /* ---- page template: platform, solutions, guide, prose, pricing, contact, help, posts ---- */ .pg__hero { padding: 56px 0 8px; } .pg__hero .wrap { display: grid; gap: 48px; align-items: center; } .pg__hero--split .wrap { grid-template-columns: 5fr 7fr; } .pg__hero--center { text-align: center; } .pg__hero--center .lede, .pg__hero--center .pg__crumbs { margin-left: auto; margin-right: auto; justify-content: center; } .pg__crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--text-3); margin-bottom: 18px; } .pg__crumbs a { color: var(--text-2); text-decoration: none; } .pg__crumbs a:hover { color: var(--text); } .pg h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; margin: 0; } .pg h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; margin: 0; } .pg__hero .lede { margin-top: 16px; } .pg__hero .hero__cta { margin-top: 24px; display: flex; gap: 8px; flex-wrap: wrap; } .pg__vis { min-width: 0; } .pg__blocks .feature:first-child { border-top: 0; padding-top: 40px; } .pg__section { padding: 64px 0; border-top: 1px solid var(--line-2); } .pg__section--first { border-top: 0; padding-top: 28px; } .pg__section .lede { margin-top: 12px; } .pg__section .around { margin-top: 28px; } .faq { margin-top: 24px; border-top: 1px solid var(--line-2); max-width: 760px; } .faq details { border-bottom: 1px solid var(--line-2); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 500; font-size: 16px; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary .ic { color: var(--text-3); flex: none; transition: transform 160ms ease; } .faq details[open] summary .ic { transform: rotate(180deg); } .faq__a { padding: 0 0 18px; color: var(--text-2); max-width: 64ch; line-height: 1.55; } .faq__a a { color: var(--accent); } .modules--related { max-width: 760px; grid-template-columns: repeat(2, 1fr); } .ctaband { padding: 72px 0; border-top: 1px solid var(--line); } .ctaband .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .ctaband .lede { margin-top: 10px; } .ctaband .hero__cta { display: flex; gap: 8px; } /* prose */ .prose { max-width: 68ch; font-size: 16px; line-height: 1.65; } .prose h2 { font-size: 22px; margin: 36px 0 10px; letter-spacing: -0.015em; } .prose h2:first-child { margin-top: 0; } .prose p { margin: 0 0 16px; } .prose .lead { font-size: 18px; color: var(--text-2); } .prose ul, .prose ol { padding-left: 22px; margin: 0 0 16px; } .prose li { margin-bottom: 8px; } .prose a { color: var(--accent); } .prose hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; } .prose .frame { margin: 24px 0 28px; } .prose h3 { font-size: 17px; margin: 24px 0 8px; } .prose .updated { color: var(--text-3); font-size: 14px; margin-bottom: 24px; } .prose .tblwrap { margin: 0 0 24px; } .prose .compare { min-width: 480px; } /* guide */ .guide { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; padding-top: 36px; padding-bottom: 64px; align-items: start; } .toc { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; } .toc .lbl { margin: 0 8px 8px; } .toc a { padding: 6px 8px; border-radius: var(--r); font-size: 13.5px; color: var(--text-2); text-decoration: none; } .toc a:hover { background: var(--hover); color: var(--text); } .toc a.is-active { color: var(--text); background: var(--hover); } /* pricing */ .period { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; margin-top: 28px; } .period button { height: 30px; padding: 0 14px; border-radius: 999px; font-weight: 500; color: var(--text-2); } .period button:hover { color: var(--text); } .period button[aria-pressed='true'] { background: var(--text); color: var(--surface); } .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .plan { border: 1px solid var(--line); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 14px; } .plan--featured { box-shadow: 0 0 0 1px var(--text); border-color: var(--text); } .plan__name { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; } .plan__badge { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .plan__price { font-size: 38px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; } .plan__price small { display: block; font-size: 13px; font-weight: 400; color: var(--text-3); letter-spacing: 0; margin-top: 6px; } .plan__note { margin: -8px 0 0; font-size: 12.5px; color: var(--text-3); min-height: 18px; } .plan__desc { color: var(--text-2); margin: 0; } .plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; flex: 1; } .plan li { display: flex; gap: 8px; } .plan li .ic { color: var(--accent); flex: none; margin-top: 3px; } .tblwrap { overflow-x: auto; margin-top: 24px; } .compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; } .compare th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 12px; border-bottom: 1px solid var(--line); } .compare td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); } .compare td + td { color: var(--text-2); } .compare tr.group td { font-weight: 600; color: var(--text); padding-top: 24px; border-bottom: 1px solid var(--line); } .compare .ic { color: var(--accent); } /* contact */ .contact { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } .way { padding: 14px 0; border-bottom: 1px solid var(--line-2); } .way b { display: block; font-weight: 600; margin-bottom: 2px; } .way span { color: var(--text-2); font-size: 14.5px; } .way a { color: var(--accent); } /* help */ .help h2 { font-size: 20px; margin-top: 44px; } .help h2:first-child { margin-top: 0; } .help .faq { margin-top: 12px; } /* post */ .post-head { max-width: 760px; padding: 56px 0 24px; } .post-head .meta { font-size: 13px; color: var(--text-3); display: flex; gap: 6px; flex-wrap: wrap; } .post-head .meta a { color: var(--text-2); text-decoration: none; } .post-head h1 { margin-top: 12px; } .post-body { padding-bottom: 56px; } .author { display: flex; gap: 12px; align-items: center; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-2); color: var(--text-2); font-size: 14px; max-width: 68ch; } .author .avatar { width: 34px; height: 34px; font-size: 13px; } .author b { color: var(--text); font-weight: 600; } .post-nav { display: flex; gap: 18px; margin-top: 24px; } .post-nav a { font-weight: 500; text-decoration: none; color: var(--text-2); } .post-nav a:hover { color: var(--text); } @media (max-width: 960px) { .pg__hero { padding-top: 32px; } .pg__hero .wrap { gap: 28px; } .pg__hero--split .wrap, .guide, .contact, .plans, .modules--related { grid-template-columns: minmax(0, 1fr); } .toc { flex-direction: row; flex-wrap: wrap; gap: 4px; } .toc .lbl { width: 100%; margin: 0 0 4px; } .toc a { font-size: 13px; padding: 5px 9px; background: var(--card); } .pg h1 { font-size: 30px; } .pg h2 { font-size: 24px; } .pg__section { padding: 44px 0; } .pg__blocks .feature:first-child { padding-top: 24px; } .toc { position: static; } .guide { gap: 24px; } .post-head { padding-top: 32px; } .ctaband { padding: 48px 0; } } /* landing-only: the skip link, the Netlify honeypot, the 404 */ .skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 12px; background: var(--text); color: var(--surface); border-radius: var(--r); } .skip-link:focus { top: 16px; } .hp { position: absolute; left: -9999px; } .notfound { min-height: 60dvh; display: grid; place-items: center; text-align: center; padding: 48px 20px; } /* Cookie banner: rendered only when `site.gaId` is set, `hidden` until main.js reads the stored choice. Above `.pop` (60) so a menu left open cannot cover it. */ .consent { position: fixed; left: 16px; bottom: 16px; z-index: 70; width: min(360px, calc(100vw - 32px)); padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); font-size: 13.5px; color: var(--text-2); } .consent__title { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--text); } .consent__text { margin: 0; } .consent__text a { color: var(--accent); } .consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } /* On the panel's surface `--line` fades to nothing in dark, so the outlines take the stronger token. */ .consent .btn { height: 34px; width: 100%; border-color: var(--line-strong); } /* The phone sheet covers the page from z 49; the banner at z 70 would otherwise sit on top of it. */ body.menu-open .consent { display: none; } @media (prefers-reduced-motion: no-preference) { .consent:not([hidden]) { animation: consent-in 180ms var(--ease-out) both; } } @keyframes consent-in { from { opacity: 0; transform: translateY(8px); } } @media (max-width: 600px) { .consent { right: 16px; width: auto; } } /* Template previews: the starter's grid in the hero shot's vocabulary. The hero rules above fix a 584px rail layout and the generated block below assumes the editor; this addendum unfixes both and covers the card kinds the hero never shows (actor/owner lines, pips). */ .shot.shot--editor.shot--tpl { display: block; height: auto; width: max-content; max-width: none; } .shot--tpl .top { height: 44px; font-size: 13px; } .shot--tpl .top b { font-weight: 600; } .shot--tpl .top span { color: var(--text-3); } .shot.shot--editor.shot--tpl .main { overflow: visible; } .shot.shot--editor.shot--tpl .grid { --ghost-w: 24px; padding-bottom: 8px; } .shot--editor.shot--tpl .grid__head, .shot--editor.shot--tpl .lane__head { position: static; } .shot--editor.shot--tpl .card__channels li { width: auto; height: 26px; padding: 0 8px 0 6px; gap: 5px; font-size: 12px; } .shot--tpl .card__meta { font-size: 11.5px; color: var(--text-2); } .shot--tpl .card__pips { display: inline-flex; gap: 2px; margin-left: auto; } /* The whole severity scale is drawn; the overline's colour drives the pips that are on. */ .shot--tpl .card__pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); } .shot--tpl .card__pips i.is-on { background: currentColor; } /* The note label sits inside the band, so it knocks the curve and the baseline out behind it. */ .shot--tpl .emo__label { fill: var(--text-2); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; } /* The template shot floors at its data-min-scale (see fitShots) and pans; the sizer carries the scaled box so this fit scrolls and the page does not. */ .tpl__shot .shot-fit { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .shot-fit__sizer { position: relative; } .tpl__shot { margin-top: 40px; } .tpl__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; margin-top: 24px; } .tpl__facts h3 { margin: 0 0 10px; font-size: 15px; } .tpl__stages { margin: 0; padding-left: 22px; line-height: 1.7; } .tpl__lanes { margin: 0; } .tpl__lanes div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--line-2); } .tpl__lanes dt { font-weight: 500; } .tpl__lanes dd { margin: 0; color: var(--text-3); } /* The copy keeps the prose measure and rhythm, but .prose h2 would shrink the two section headings that sit inside it; these track the .pg h2 scale at both widths instead. */ .tpl__copy h2 { font-size: 26px; letter-spacing: -0.02em; } @media (max-width: 960px) { .tpl__copy h2 { font-size: 24px; } } /* The fill-in order is the information the list carries, so each step wears the map's two-digit stage numeral. It sits above the sentence, never beside it: a numeral in a gutter would push the steps off the one left edge every other block in the column shares. */ .tpl__steps { list-style: none; counter-reset: tplstep; margin: 24px 0 0; padding: 0; max-width: 68ch; font-size: 16px; line-height: 1.65; border-top: 1px solid var(--line-2); } .tpl__steps li { counter-increment: tplstep; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line-2); color: var(--text-2); } .tpl__steps li::before { content: counter(tplstep, decimal-leading-zero); display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; /* The label rung, not meta: text-3 at this size misses AA on white. */ color: var(--text-2); } .tpl__steps b { font-weight: 600; color: var(--text); } /* The downloads: two file rows at the column's left edge, the file's own preview beside them. Row grammar, never the hero's buttons: these stay secondary to the page CTA. */ .tpl__dl { display: grid; gap: 28px; margin-top: 24px; max-width: 760px; } /* The split needs 800px; under it the rows are too narrow to hold their second line. */ @media (min-width: 800px) { .tpl__dl { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } } .tpl__dl-get { display: grid; gap: 10px; align-content: start; } .tpl__dlink { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease; } .tpl__dlink:hover { border-color: var(--line-strong); background: var(--hover); } .tpl__dlink .ic { flex: none; color: var(--text-3); } .tpl__dlink:hover .ic { color: var(--text-2); } .tpl__dlink-t { display: grid; min-width: 0; } .tpl__dlink-t b { font-weight: 600; font-size: 14.5px; } .tpl__dlink-t span { font-size: 13px; color: var(--text-2); } .tpl__dlink-go { margin-left: auto; } .tpl__dl-note { margin: 6px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.55; } .tpl__dl-shot img { display: block; width: 100%; height: auto; } /* "How to choose" on /templates/: the app's label-and-text row grammar, three rows deep. */ .tpl__choose { margin: 24px 0 0; max-width: 860px; border-top: 1px solid var(--line-2); } .tpl__choose > div { display: grid; gap: 4px 28px; padding: 16px 0; border-bottom: 1px solid var(--line-2); } @media (min-width: 700px) { .tpl__choose > div { grid-template-columns: 220px minmax(0, 1fr); } } .tpl__choose dt { font-weight: 600; } .tpl__choose dd { margin: 0; color: var(--text-2); line-height: 1.6; } .tpl__choose a { color: var(--accent); } .tpl__note { margin: 24px 0 0; color: var(--text-2); } .tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 24px; } .tcard { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease; } .tcard:hover { border-color: var(--line-strong); background: var(--hover); } .tcard__name { margin: 0; font-size: 15px; font-weight: 600; } .tcard p { margin: 0; font-size: 13.5px; color: var(--text-2); } .tcard small { font-size: 12px; /* Wording, not meta: text-3 at this size misses AA on both themes. */ color: var(--text-2); } .tcard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .tcard__chip { padding: 2px 8px; border-radius: 999px; background: var(--card); font-size: 11.5px; color: var(--text-2); } /* The hub lists its guide tiles inside an article column, where .prose sets a link colour, an h3 rung and a reading line-height. The card keeps the shape it has everywhere else. */ .prose a.tcard { color: inherit; line-height: 1.55; } .prose h3.tcard__name { margin: 0; font-size: 15px; } /* A section-hub tile's name carries the icon the header menu shows; the tile keeps its shape. */ .tcard__name--icon { display: flex; align-items: center; gap: 8px; } .tcard__name--icon .ic { color: var(--text-3); } /* The how-to guides at /guide//; the hub's .guide grid and .toc carry the frame. Two block languages and no third: a flat `card` fill for what the reader only reads, a hairline box for what the reader can open. Every block in the article column opens on one text left edge. */ .howto__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; font-size: 13px; /* Wording, not meta: text-3 at this size misses AA on white. */ color: var(--text-2); } /* The three lines a reader who stops at the top should still leave with. */ .howto__take { margin-top: 28px; padding: 22px 24px; border-radius: 10px; background: var(--card); } .howto__take-h { /* Indented over the text, not over the check column, so the box holds one inner left edge. */ margin: 0 0 14px 26px; font-size: 13px; font-weight: 600; color: var(--text-2); } .howto__take ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 32px; } @media (min-width: 900px) { .howto__take ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .howto__take li { display: flex; gap: 10px; line-height: 1.55; } .howto__take .ic { margin-top: 3px; color: var(--accent); } /* The article fills the column and every block in it keeps the reading measure, so a new block type is capped by default; a framed visual opts out and takes the column's real width. The measure is a rem length, never `ch`, which would resolve against each child's own font-size. */ .prose.howto { max-width: none; } .howto > * { max-width: 45rem; } .howto > .howto__fig { max-width: none; } /* A bullet would sit in a gutter and push the item's text off the one left edge, so guide lists carry no marker: a bold lead opens the item instead. */ .prose.howto ul { list-style: none; padding-left: 0; } .prose.howto ul li { margin-bottom: 12px; } /* The steps: the map's two-digit stage numeral above the title, never beside it, so the numeral, the title and the body all begin on the column's one left edge. The rules close the ladder. */ .howto__step { padding: 18px 0 20px; border-bottom: 1px solid var(--line-2); } .howto__step--first { margin-top: 22px; border-top: 1px solid var(--line-2); } .howto__step-n { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; /* The label rung, not meta: text-3 at this size misses AA on white. */ color: var(--text-2); } .howto .howto__step h3 { margin: 6px 0 8px; font-size: 19px; letter-spacing: -0.01em; } .howto .howto__step p:last-child { margin-bottom: 0; } .howto__fig { margin: 26px 0 30px; } .prose .howto__fig .frame { margin: 0; } .howto__fig figcaption { max-width: 45rem; margin-top: 10px; font-size: 14px; line-height: 1.5; /* A caption is a sub-line, but text-3 at this size misses AA on white. */ color: var(--text-2); } .howto__shot { display: block; transition: border-color 150ms ease; } .howto .howto__shot:hover { border-color: var(--line-strong); } .howto__shot img { display: block; width: 100%; height: auto; } /* Tip and Common mistake. The label names the variant and the icon repeats it, so the two never rest on colour: both are drawn in the same ink. */ .howto__note { margin: 26px 0 28px; padding: 16px 20px; border-radius: 10px; background: var(--card); color: var(--text-2); font-size: 15px; } .howto .howto__note-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text); } .howto__note-h .ic { color: var(--text-2); } .howto .howto__note p { margin: 0 0 10px; } .howto .howto__note p:last-child { margin-bottom: 0; } /* The starter a section is about: the site's file-row grammar, the whole surface one link. */ .howto__tpl { display: flex; align-items: flex-start; gap: 14px; margin: 26px 0 28px; padding: 14px 16px; min-height: 56px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease; } .howto .howto__tpl { color: inherit; } .howto__tpl:hover { border-color: var(--line-strong); background: var(--hover); } .howto__tpl .ic { color: var(--text-2); } .howto__tpl-t { display: grid; gap: 2px; min-width: 0; } .howto__tpl-t b { font-size: 15px; font-weight: 600; } .howto__tpl-sub { font-size: 13px; color: var(--text-2); } .howto__tpl-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--text-2); } .howto__tpl:hover .howto__tpl-go { color: var(--text); } /* Two or more starters together. The cards keep their own margins off, so the first column still opens on the article's left edge. */ .howto__tpls { display: grid; gap: 12px; margin: 26px 0 28px; } @media (min-width: 700px) { .howto__tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .howto__tpls .howto__tpl { margin: 0; } /* The other guides and the hub. The track count is declared, never auto-fitted, which would give a short set one tile to a row. */ .howto__more { display: grid; gap: 14px; margin-top: 24px; } @media (min-width: 640px) { .howto__more { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .howto__more { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .howto__take { padding: 18px; } } /* The hero shot: generated from the mockup's rendered editor by the script in docs/superpowers/plans/2026-09-13-p28-site.md; regenerate, never hand-edit. */ .shot--editor kbd { font: inherit; } .shot--editor .ic { display: inline-block; vertical-align: middle; flex: 0 0 auto; fill: currentcolor; } .shot--editor .grid { width: max-content; min-width: 100%; --ghost-w: 148px; } .shot--editor .grid__head, .shot--editor .lane { display: grid; grid-template-columns: var(--head-w) repeat(var(--cols), var(--col-w)) var( --ghost-w ); align-items: start; } .shot--editor .grid__head { position: sticky; top: var(--sticky-top, 0px); z-index: 5; } .shot--editor .grid__corner, .shot--editor .lane__head { position: sticky; left: var(--sticky-left, 0px); z-index: 4; } .shot--editor .grid__corner { z-index: 6; } .shot--editor .lane { position: relative; } .shot--editor .stack { display: flex; flex-direction: column; gap: var(--stack-gap, 8px); min-height: var(--stack-min, 80px); position: relative; } .shot--editor .stack__add { opacity: 0; transition: opacity 120ms; } .shot--editor .lane__band { position: relative; min-width: 0px; } .shot--editor .emo { display: block; } .shot--editor .emo__dot { cursor: grab; touch-action: none; } .shot--editor .emo__label { text-anchor: middle; font-size: 11px; font-weight: 600; pointer-events: none; } .shot--editor .emo__area { pointer-events: none; } .shot--editor .card { position: relative; user-select: none; } .shot--editor .card__footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .shot--editor .card__personas { display: inline-flex; } .shot--editor .card__personas .avatar + .avatar { margin-left: -5px; } .shot--editor .card__comments { display: inline-flex; align-items: center; gap: 3px; } .shot--editor .card__channels { list-style: none; margin: 0px; padding: 0px; display: flex; flex-wrap: wrap; gap: 6px; } .shot--editor .card__channels li { display: inline-flex; } .shot--editor .pips { display: inline-flex; gap: 2px; } .shot--editor .pip { width: 6px; height: 6px; border-radius: 50%; } .shot--editor .avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex: 0 0 auto; letter-spacing: 0px; line-height: 1; } .shot--editor .card__personas .avatar:nth-child(1) { z-index: 3; } .shot--editor .card__personas .avatar:nth-child(2) { z-index: 2; } .shot--editor .card__personas .avatar:nth-child(3) { z-index: 1; } .shot--editor .iconbtn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease; } .shot--editor .grip { display: inline-flex; cursor: grab; flex: 0 0 auto; } .shot--editor .pop-wrap { position: relative; display: inline-flex; } .shot--editor .pchip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 150ms ease, box-shadow 150ms ease; } .shot--editor .pchip__swatch { width: 14px; height: 3px; border-radius: 2px; background: var(--pc); } .shot--editor .rail { grid-area: 1 / 1 / -1; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); min-width: 0px; } .shot--editor .rail__brand { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0px 0px 0px 18px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); white-space: nowrap; overflow: hidden; } .shot--editor .rail__mark { flex: 0 0 auto; color: var(--text); } .shot--editor .rail__word { font-weight: 600; letter-spacing: -0.01em; } .shot--editor .rail__items { display: flex; flex-direction: column; gap: 2px; padding: 10px 0px 0px; } .shot--editor .rail__item { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; margin: 0px 8px; padding: 0px 10px; border-radius: var(--r); color: var(--text-2); font-weight: 500; text-decoration: none; white-space: nowrap; overflow: visible; transition: background-color 120ms, color 120ms; } .shot--editor .rail__item .ic { flex: 0 0 auto; } .shot--editor .rail__item.is-active { background: var(--accent-soft); color: var(--accent); } .shot--editor .rail__sep { height: 1px; background: var(--line-2); margin: 6px 14px; } .shot--editor .rail__foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 0px 12px; } .shot--editor .rail__me { margin: 2px 0px 0px 14px; } .shot--editor .rail__avatar { position: relative; } .shot--editor .rail__brand { padding: 0px; justify-content: center; } .shot--editor .rail__label { display: none; } .shot--editor .rail__item { width: 40px; margin: 0px auto; padding: 0px; justify-content: center; } .shot--editor .rail__me { margin: 2px auto 0px; } .shot--editor kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0px 5px; border-radius: 4px; border: 1px solid var(--line); color: var(--text-3); font-size: 11px; } .shot--editor .top { display: flex; align-items: center; gap: 6px; padding: 0px 12px 0px 14px; border-bottom: 1px solid var(--line); background: var(--surface); } .shot--editor .crumbs { display: flex; align-items: center; gap: 2px; } .shot--editor .crumb { height: 28px; padding: 0px 7px; border-radius: var(--r); color: var(--text-2); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .shot--editor .crumb__sep { color: var(--line-strong); padding: 0px 2px; } .shot--editor .crumb__name { font-weight: 600; padding: 4px 7px; border-radius: var(--r); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; } .shot--editor .save { font-size: 11.5px; color: var(--text-3); margin-left: 8px; } .shot--editor .top__center { margin: 0px auto; display: flex; align-items: center; gap: 2px; } .shot--editor .top__right { display: flex; align-items: center; gap: 2px; } .shot--editor .iconbtn { width: 28px; height: 28px; border-radius: var(--r); color: var(--text-2); } .shot--editor .search { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0px 5px 0px 8px; border-radius: var(--r); border: 1px solid var(--line); color: var(--text-3); min-width: 190px; margin: 0px 6px; } .shot--editor .search span { flex: 1 1 0%; text-align: left; font-weight: 500; } .shot--editor .avatar { border-radius: 50%; background: var(--pc); color: rgb(255, 255, 255); } .shot--editor .avatar--neutral { --pc: var(--card-hover); color: var(--text-2); } .shot--editor .avatar--me { width: 28px; height: 28px; font-size: 11px; --pc: var(--text); color: var(--surface); } .shot--editor .members { display: inline-flex; margin-right: 4px; } .shot--editor .members .avatar { width: 24px; height: 24px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--surface); } .shot--editor .members .avatar + .avatar { margin-left: -6px; } .shot--editor .pchip { height: 28px; padding: 0px 9px 0px 5px; border-radius: 999px; color: var(--text-2); font-weight: 500; } .shot--editor .pchip.is-active { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--pc); } .shot--editor .pchip .avatar { width: 18px; height: 18px; font-size: 7.5px; } .shot--editor .pchip__swatch { margin: 0px 3px; } .shot--editor .pchip--add { color: var(--text-3); padding-left: 7px; } .shot--editor .main { overflow: auto; overscroll-behavior: contain; scroll-padding: 44px 24px 24px 232px; } .shot--editor .grid { --sticky-top: 0px; --sticky-left: 0px; --stack-gap: 6px; --stack-min: 84px; --ghost-w: 140px; padding-bottom: 96px; } .shot--editor .grid__head { background: var(--surface); border-bottom: 1px solid var(--line-strong); } .shot--editor .grid__corner { display: flex; align-items: center; gap: 4px; padding: 0px 8px 0px 10px; height: 40px; background: var(--surface); border-right: 1px solid var(--line); } .shot--editor .corner__filter { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0px 9px 0px 7px; border-radius: var(--r); color: var(--text-2); font-weight: 500; } .shot--editor .stage { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0px 4px 0px 10px; border-right: 1px solid var(--line-2); } .shot--editor .stage__index { display: none; } .shot--editor .stage__name { font-weight: 600; flex: 1 1 0%; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 4px; border-radius: 4px; } .shot--editor .stage__count { font-size: 11px; color: var(--text-3); } .shot--editor .stage .grip, .shot--editor .lane__head .grip { color: var(--text-3); opacity: 0; transition: opacity 120ms; } .shot--editor .stage__menu, .shot--editor .lane__menu { width: 24px; height: 24px; opacity: 0; } .shot--editor .grid__ghost { display: flex; align-items: center; height: 40px; padding: 0px 8px; } .shot--editor .ghost__add { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0px 10px 0px 8px; border-radius: var(--r); color: var(--text-3); font-weight: 500; } .shot--editor .lane { border-bottom: 1px solid var(--line); } .shot--editor .lane__head { display: flex; align-items: center; gap: 6px; padding: 10px 6px 10px 10px; background: var(--surface); border-right: 1px solid var(--line); align-self: stretch; height: 100%; } .shot--editor .lane__name { font-weight: 600; flex: 1 1 0%; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 4px; border-radius: 4px; } .shot--editor .lane__icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--text-3); } .shot--editor .stack { padding: 8px 6px; border-right: 1px solid var(--line-2); min-height: 100%; } .shot--editor .stack__add { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; height: 26px; padding: 0px 8px 0px 6px; border-radius: var(--r); color: var(--text-3); font-size: 12px; font-weight: 500; } .shot--editor .card { padding: 9px 11px; background: var(--card); border-radius: var(--r); display: flex; flex-direction: column; gap: 5px; transition: background-color 120ms, box-shadow 120ms; } .shot--editor .card__text { font-size: 13px; line-height: 1.45; } .shot--editor .card__footer { color: var(--text-3); font-size: 11px; margin-top: 1px; } .shot--editor .card__personas .avatar { width: 18px; height: 18px; font-size: 7.5px; box-shadow: 0 0 0 1.5px var(--card); } .shot--editor .card__channels li { width: 28px; height: 28px; border-radius: 5px; background: var(--surface); color: var(--text-2); align-items: center; justify-content: center; } .shot--editor .card__overline { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--text-3); } .shot--editor .card__overline--pain { color: var(--danger); } .shot--editor .card__overline--opportunity { color: var(--accent); } .shot--editor .pip { background: var(--pip); } .shot--editor .pip.is-on { background: var(--danger); } .shot--editor .emo__grid { stroke: var(--line-2); } .shot--editor .emo__grid--base { stroke: var(--line-strong); stroke-dasharray: 2, 4; } .shot--editor .emo__sep { stroke: var(--line-2); } .shot--editor .emo__curve { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .shot--editor .emo__curve--bg { stroke-width: 1.25; opacity: 0.3; } .shot--editor .emo__area { opacity: 0.05; } .shot--editor .emo__dot { fill: var(--surface); stroke-width: 2; r: 6; transition: r 120ms; } .shot--editor .emo__note { fill: var(--warn); }