/* Sokosumi shared design system. Both the homepage (index.html) and every server-rendered sub-page load this file. Homepage-only composition (hero, intro, how-it-works, org chart, Florian quote) lives in /assets/landing.css. Header/footer chrome lives in /assets/nav.css. */ :root { --background: #fafaf9; --ink: #0f0e0d; --card: #ffffff; --muted: #f2f1f0; --foreground: #0f0e0d; /* 0.55 measured 4.13-4.28 against the three light surfaces — under the 4.5 WCAG AA needs for body text, which failed the whole footer and the cookie banner. 0.60 clears it on all three (4.90-5.03) and is a small enough step from 0.55 to leave the hierarchy looking the same. */ --muted-foreground: rgba(15, 14, 13, 0.6); --border: rgba(15, 14, 13, 0.12); --hairline-dark: rgba(255, 255, 255, 0.16); --primary: #6400ff; --primary-soft: rgba(100, 0, 255, 0.08); /* #6400ff is a light-surface accent — luminance 0.10, so it goes muddy on ink. This is the app's own dark-theme purple, for the dark bands. */ --primary-on-dark: hsla(270, 64%, 63%, 1); --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --sans: "Inter", -apple-system, system-ui, sans-serif; /* Aliases so landing.css can say "serif" without shipping a second face. Both resolve to Inter — a real serif later is a token change, not a per-surface edit. */ --serif: "Inter", -apple-system, system-ui, sans-serif; --mono: "Inter", -apple-system, system-ui, sans-serif; } * { margin: 0; box-sizing: border-box; } /* `clip` rather than `hidden`: it stops a full-bleed band from ever producing a horizontal scrollbar without turning into a scroll container. */ html { scroll-behavior: smooth; overflow-x: clip; } /* No overflow-x on body: html's clip above already contains horizontal overflow, and overflow-x: hidden here made its own (never-scrolling) scroll container — which silently broke the sticky header, so it scrolled away with the page instead of pinning to the top. */ body { font-family: var(--sans); font-size: 15px; background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } button { font-family: inherit; } .container-app { max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 56px); } .muted { color: var(--muted-foreground); } .icon { flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ===== reveals (site.js) ===== */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(min(var(--i, 0), 4) * 55ms); } [data-reveal].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { transition: none; opacity: 1; transform: none; } } /* The first block on the page is the LCP element on nearly every route, and starting it at opacity 0 meant the largest paint could not happen until the deferred site.js had run its observer — about half a second of LCP bought for an animation nobody sees, because it is already in view on load. Everything below the fold still animates. */ .page-head[data-reveal], .page-head [data-reveal], .blk-hero[data-reveal], .hero [data-reveal] { opacity: 1; transform: none; } /* ===== buttons — same scale and states as the landing page ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--r-md); font-size: 14px; font-weight: 500; letter-spacing: 0; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--ink); color: #fff; } .btn-primary:hover { background: #2b2926; } .btn-outline { background: transparent; color: var(--foreground); border-color: var(--border); } .btn-outline:hover { border-color: rgba(15, 14, 13, 0.4); } .btn-ghost { background: transparent; color: var(--muted-foreground); } .btn-ghost:hover { color: var(--foreground); } .btn-sm { height: 34px; padding: 0 14px; font-size: 13px; } .btn-lg { height: 44px; padding: 0 22px; font-size: 14.5px; } .btn-lg.btn-outline { padding: 0 22px; } .btn .orb { display: none; } /* ===== header ===== The whole site header — bar, dropdown panels, burger, mobile drawer, and the homepage's transparent overlay state — lives in /assets/nav.css, the one stylesheet both index.html and the server-rendered sub-pages load. Do not re-add header rules here: that is exactly how the two surfaces drifted apart before. */ /* ===== breadcrumbs ===== */ .crumbs { padding: 18px clamp(24px, 4vw, 56px) 0; font-size: 12.5px; color: var(--muted-foreground); } .crumbs a { transition: color 0.25s var(--ease); } .crumbs a:hover { color: var(--foreground); } .crumbs .sep { margin: 0 4px; opacity: 0.5; } .crumbs .current { color: var(--foreground); } /* ===== page anatomy ===== */ main.page { min-height: 60vh; } .page-head { padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 44px); max-width: 820px; } .page-head .eyebrow { display: block; font-size: 13px; color: var(--muted-foreground); margin-bottom: 14px; } .page-head h1 { font-weight: 300; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; } .page-head .sub { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 58ch; text-wrap: pretty; } .page-head .meta-row { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted-foreground); } .page-section { padding: clamp(36px, 5vw, 56px) 0; border-top: 1px solid var(--border); } .page-section.flush { border-top: none; padding-top: 0; } .page-section > h2, .section-title { font-weight: 300; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 10px; } .page-section > .sub { font-size: 15.5px; color: var(--muted-foreground); max-width: 60ch; margin-bottom: 28px; } .section-gap { height: clamp(36px, 5vw, 64px); } /* ===== chips / labels (monochrome) ===== */ .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0.02em; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px 9px; background: transparent; } .kicker { font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); } .tag-quiet { font-size: 11px; letter-spacing: 0.05em; color: var(--muted-foreground); } /* ===== avatars ===== */ .avatar { width: 34px; height: 34px; border-radius: 999px; overflow: hidden; flex-shrink: 0; background: var(--muted); color: #fff; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar.lg { width: 44px; height: 44px; } .avatar.sm { width: 26px; height: 26px; font-size: 11px; } /* ===== vendor wordmarks ===== Aspect ratios vary wildly, so height is fixed and width follows. .invert flattens white-on-transparent marketplace artwork to ink so it reads on paper — the mirror of .band-dark .trust-logo on the landing page. */ .vendor-logo { display: inline-flex; align-items: center; flex-shrink: 0; } .vendor-logo img { height: 22px; width: auto; max-width: 190px; object-fit: contain; display: block; } .vendor-logo.sm { margin-right: 11px; vertical-align: middle; } .vendor-logo.sm img { height: 19px; max-width: 132px; } .vendor-logo.lg { margin-bottom: 18px; } .vendor-logo.lg img { height: 30px; max-width: 240px; } .vendor-logo.invert img { filter: brightness(0); } /* a vendor section head: wordmark, name, and the featured chip on one line. The name is a group label over a grid, not a headline — so it takes the quiet uppercase label treatment (.filter-label, .nav-intro-label) instead of the display h2. The tag stays an h2 for the document outline. */ .vendor-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .vendor-head h2 { margin-bottom: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); } .vendor-head .vendor-logo.sm { margin-right: 0; } .vendor-head .chip { align-self: center; } /* the wordmark and name link to the vendor's page; hover lifts the label to ink, the same move as .site-nav and .row-go */ .vendor-head-link { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .vendor-head-link h2 { transition: color 0.25s var(--ease); } .vendor-head-link:hover h2, .vendor-head-link:focus-visible h2 { color: var(--foreground); } /* the vendor's one-line CMS description, between the head and the count */ .vendor-desc { font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 60ch; margin-bottom: 6px; } /* ===== vendor pages (/vendors, /vendors/) ===== */ /* the computed facts row in the hero — counts derived from the catalog, so the line is always true without editing (reuses the .cw-stats look) */ .vendor-facts { margin-top: 20px; } /* a curated coworker as a colleague, not a link: portrait, role, what it does, and its chips. Builds on .card, so hover/border/go come for free. */ .vcw-card { gap: 12px; } .vcw-head { display: flex; align-items: center; gap: 14px; } .vcw-face { width: 56px; height: 56px; border-radius: var(--r-md); overflow: hidden; background: var(--muted); flex-shrink: 0; } .vcw-face img { width: 100%; height: 100%; object-fit: cover; display: block; } .vcw-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vcw-id .role { font-size: 13px; color: var(--muted-foreground); } .vcw-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; } .vcw-foot { margin-top: auto; padding-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* what the vendor's coworkers can do: one column per offer category, on the .uc-steps/.stat pattern — a rule, a quiet label with the count, the tasks */ .cap-grid { display: grid; gap: 22px 28px; grid-template-columns: 1fr; } @media (min-width: 680px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1020px) { .cap-grid { grid-template-columns: repeat(3, 1fr); } } .cap-col { border-top: 1px solid var(--foreground); padding-top: 14px; display: flex; flex-direction: column; align-items: flex-start; } .cap-label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; } .cap-label em { font-style: normal; font-variant-numeric: tabular-nums; opacity: 0.7; } .cap-task { display: block; padding: 5px 0; font-size: 14px; line-height: 1.45; transition: color 0.2s var(--ease); } .cap-task small { font-size: 12px; color: var(--muted-foreground); margin-left: 6px; white-space: nowrap; } .cap-task:hover { color: var(--primary); } .cap-more { margin-top: 5px; font-size: 12.5px; color: var(--muted-foreground); } .cap-browse { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 13.5px; color: var(--muted-foreground); transition: color 0.25s var(--ease); } .cap-browse:hover { color: var(--primary); } /* models + hosting, aggregated across the vendor's coworkers */ .stack-rows { display: flex; flex-direction: column; gap: 14px; max-width: 720px; } .stack-row { display: flex; align-items: baseline; gap: 10px 16px; flex-wrap: wrap; } .stack-label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); min-width: 72px; } .stack-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* run count / rating / credits under a marketplace agent's description */ .row-stats { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; } /* ===== agent vs coworker explainer (/ai-coworkers) ===== Two columns on the .stat/.uc-steps pattern: a rule, a quiet uppercase label, a short paragraph. Neither column is styled as the better one. */ .duo-grid { display: grid; gap: 20px; grid-template-columns: 1fr; max-width: 920px; } @media (min-width: 720px) { .duo-grid { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); } } .duo-col { border-top: 1px solid var(--foreground); padding-top: 16px; } .duo-label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); } .duo-col p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 46ch; } /* ===== use cases ===== */ /* ===== industry filter ===== Industries are a lens on the same set of workflows, so they read as a row of controls. They used to be bordered white cards in a grid, identical to the use-case cards below them, and nothing told a reader which was which. */ .filter-bar { padding-bottom: clamp(24px, 3vw, 34px); } .filter-label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 14px; } .ind-bar { display: flex; flex-wrap: wrap; gap: 8px; } .ind-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; font-size: 14px; color: var(--foreground); white-space: nowrap; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); } .ind-pill:hover { border-color: rgba(15, 14, 13, 0.4); background: var(--muted); } .ind-pill em { font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted-foreground); } .ind-pill:hover em { color: var(--foreground); } @media (min-width: 760px) { .uc-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .uc-grid { grid-template-columns: repeat(3, 1fr); } } .uc-card { padding-top: 20px; } /* The card's banner is the page's own seeded abstract field (templates/ art.js) at thumbnail size — the card previews the page it links to, and the composition varies per slug, so the colour still does the distinguishing without putting one coworker's face on the work. */ .uc-card.has-art { padding-top: 0; } .uc-art { display: block; margin: 0 -22px 6px; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; aspect-ratio: 5 / 2; background: var(--card); border-bottom: 1px solid var(--border); } .uc-art svg { width: 100%; height: 100%; display: block; } .uc-eyebrow { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 2px; } .avatar.xs { width: 22px; height: 22px; font-size: 10px; } .uc-steps { list-style: none; display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: none; } @media (min-width: 800px) { .uc-steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .uc-steps li { display: flex; flex-direction: column; gap: 7px; padding-top: 16px; border-top: 1px solid var(--foreground); } .uc-steps .n { font-size: 12px; letter-spacing: 0.08em; color: var(--muted-foreground); font-variant-numeric: tabular-nums; } .uc-steps strong { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; } .uc-steps li > span:last-child { font-size: 14px; line-height: 1.55; color: var(--muted-foreground); } /* ===== use-case detail: the HubSpot-shaped hero ===== Centred, outcome-led copy over a seeded abstract field (templates/art.js) — the platform is what the hero names, the way HubSpot's hero names the Hub; no coworker portrait fronts the page. The art layer is decorative and absolutely positioned, so a page whose field fails to generate is simply a plain centred hero. */ .uc-hero-hs { position: relative; text-align: center; padding: clamp(64px, 9vw, 126px) 0 clamp(44px, 6vw, 76px); } .uc-hero-art { position: absolute; inset: 0; pointer-events: none; } .uc-hero-art svg { width: 100%; height: 100%; display: block; } .uc-hero-copy { position: relative; } .uc-hero-hs h1 { margin-left: auto; margin-right: auto; max-width: 22ch; } .uc-hero-hs .sub { margin-left: auto; margin-right: auto; } .uc-hero-hs .cta-row { justify-content: center; } .uc-hero-hs .no-card { margin-top: 10px; } /* ===== use-case detail: the centred value-prop intro ===== The page's first rich text block, hoisted under the hero — HubSpot's "Use the Hub to…" paragraph. A centred measure, a touch larger than body prose; pages without rich text simply have no intro. */ .uc-intro .prose { max-width: 68ch; margin: 0 auto; font-size: 16.5px; line-height: 1.7; } .uc-intro .prose > p:first-child { font-size: 18px; color: var(--foreground); } /* ===== use-case detail: the mid-page CTA ===== The outcome restated after the capability sections, with the same two doors as the hero — HubSpot's mid-page close, kept lighter than the ink band the page still ends with. */ .uc-mid-cta { text-align: center; } .uc-mid-cta > h2 { max-width: 24ch; margin-left: auto; margin-right: auto; } .uc-mid-cta > .sub { margin-left: auto; margin-right: auto; margin-bottom: 24px; } .uc-mid-cta .cta-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .uc-mid-cta .no-card { margin-top: 12px; } /* ===== use-case detail: the numbered chapters ===== The steps block, promoted from three small cards to the spine of the page: a big purple numeral, a display-size title, room to breathe. */ /* the chapters' head is HubSpot's centred value-prop lead-in */ .blk-chapters .blk-head { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; } .blk-chapters .blk-head .sub { margin-left: auto; margin-right: auto; } .chapters { list-style: none; margin: 0; padding: 0; } .chapter { display: grid; grid-template-columns: minmax(56px, 92px) minmax(0, 1fr); gap: 10px clamp(20px, 4vw, 48px); padding: clamp(26px, 4vw, 42px) 0; border-top: 1px solid var(--foreground); } .ch-num { font-weight: 300; font-size: clamp(28px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.02em; color: var(--primary); font-variant-numeric: tabular-nums; } .chapter h3 { font-weight: 300; font-size: clamp(21px, 2.6vw, 30px); letter-spacing: -0.02em; line-height: 1.15; max-width: 26ch; text-wrap: balance; } .chapter p { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--muted-foreground); max-width: 58ch; } @media (max-width: 640px) { .chapter { grid-template-columns: 1fr; gap: 8px; } } /* ===== use-case detail: the team and their tasks ===== Named coworkers with the template tasks behind the workflow — the proof this site can honestly make: real work a visitor can open and run. */ .uc-team { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 760px) { .uc-team { grid-template-columns: repeat(2, 1fr); } } .uc-mate { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); } .uc-mate-tasks { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--border); padding-top: 12px; } .uc-mate-tasks a { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--muted-foreground); transition: color 0.25s var(--ease); } .uc-mate-tasks a:hover { color: var(--foreground); } .uc-mate-tasks .icon { position: relative; top: 1px; color: var(--primary); } /* the nav panel's "Browse by industry" link lands on the hub's filter bar */ .filter-bar { scroll-margin-top: 84px; } .vendor-list .row-item { grid-template-columns: minmax(150px, 330px) 1fr auto; } .vendor-list .row-title { display: inline-flex; align-items: center; } @media (max-width: 720px) { .vendor-list .row-item { grid-template-columns: 1fr auto; } } /* ===== quiet index rows (lists: guides, vendors, releases…) ===== */ .row-list { border-top: 1px solid var(--border); } .row-item { display: grid; grid-template-columns: minmax(150px, 260px) 1fr auto; gap: 10px clamp(24px, 4vw, 64px); align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--border); } /* h2 and h3 share one size here: the heading LEVEL follows the document outline (h2 when the card tier sits directly under the page h1), the type scale does not change with it */ .row-item h2, .row-item h3, .row-item .row-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; } .row-item p { font-size: 15px; line-height: 1.55; color: var(--muted-foreground); max-width: 62ch; } .row-go { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; color: var(--muted-foreground); transition: color 0.25s var(--ease); } .row-go .icon { transition: transform 0.3s var(--ease); } .row-item:hover .row-go { color: var(--foreground); } .row-item:hover .row-go .icon { transform: translate(2px, -2px); } @media (max-width: 720px) { .row-item { grid-template-columns: 1fr auto; } .row-item p { grid-column: 1 / -1; grid-row: 2; } } /* ===== card grids ===== */ .card-grid { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 680px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1020px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } /* A three-column track holding one card reads as a mistake. Collections that know their length cap the track instead of leaving two empty columns. */ @media (min-width: 680px) { .card-grid.cols-1 { grid-template-columns: minmax(0, 620px); } .card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 420px)); } } .card { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); } a.card:hover { border-color: rgba(15, 14, 13, 0.4); transform: translateY(-2px); } /* same note as .row-item: h2 vs h3 is document outline, not type scale */ .card h2, .card h3 { font-size: 16.5px; font-weight: 500; letter-spacing: -0.01em; } .card p { font-size: 13.5px; line-height: 1.55; color: var(--muted-foreground); } .card .card-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-foreground); } .card .card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .card .go { margin-left: auto; opacity: 0; transform: translate(-4px, 4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); display: inline-flex; } a.card:hover .go { opacity: 1; transform: none; } /* a card that leads with artwork: the image bleeds to the card's own edges */ .card.has-media { padding-top: 0; } .card .card-media { margin: 0 -22px 4px; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--muted); } .card .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* article lead image, sized to the prose measure rather than the full grid */ .post-cover { margin: 0 0 clamp(28px, 4vw, 44px); max-width: 860px; } /* aspect-ratio, not height:auto — the cover sits above the fold on articles, and without a reserved box the whole article jumped down by ~480px the moment the image arrived. The product screenshots are already 16:9, so cover crops nothing for them. */ .post-cover img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; border-radius: var(--r-lg); background: var(--muted); } /* ===== coworker tiles (index) ===== */ .cw-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .cw-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1020px) { .cw-grid { grid-template-columns: repeat(4, 1fr); } } .cw-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 0 14px; border-radius: var(--r-lg); overflow: hidden; background: var(--card); border: 1px solid var(--border); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); } .cw-tile:hover { border-color: rgba(15, 14, 13, 0.4); transform: translateY(-2px); } .cw-tile .portrait { width: 100%; aspect-ratio: 1; background: var(--muted); overflow: hidden; margin-bottom: 12px; } .cw-tile .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 0.8s var(--ease); } .cw-tile:hover .portrait img { transform: scale(1.12); } .cw-tile h3 { font-size: 16px; font-weight: 500; padding: 0 16px; } .cw-tile .role { font-size: 13px; color: var(--muted-foreground); padding: 0 16px; } .cw-tile .count { font-size: 12.5px; color: var(--muted-foreground); padding: 6px 16px 0; } /* ===== coworker profile ===== */ .cw-hero { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; padding: clamp(32px, 4vw, 56px) 0; align-items: start; } @media (min-width: 860px) { .cw-hero { grid-template-columns: minmax(260px, 380px) 1fr; } } .cw-portrait { border-radius: var(--r-lg); overflow: hidden; background: var(--muted); aspect-ratio: 1; } .cw-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } /* line-art icons stand for marketplace listings: contain and inset them so the strokes keep their weight instead of being cropped to fill a portrait frame */ .cw-portrait.is-icon { background: var(--card); border: 1px solid var(--border); } .cw-portrait.is-icon img { object-fit: contain; padding: 26%; } .portrait.is-icon img, .cw-tile .portrait.is-icon img { object-fit: contain; padding: 24%; } .avatar.is-icon { background: var(--muted); } .avatar.is-icon img { object-fit: contain; padding: 18%; } .cw-info { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 640px; } .cw-info .eyebrow { font-size: 13px; color: var(--muted-foreground); } .cw-info h1 { font-weight: 300; font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.025em; line-height: 1.05; } .cw-info .role { font-size: 16px; color: var(--muted-foreground); } .cw-tags { display: flex; flex-wrap: wrap; gap: 8px; } .cw-desc { font-size: 15.5px; line-height: 1.65; color: var(--muted-foreground); text-wrap: pretty; } .cw-cta { margin-top: 8px; } .cta-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted-foreground); max-width: 46ch; } /* the reassurance line under every signup button (never in the nav). Paper default. Dark surfaces override: .blk-cta .no-card below, and .hero .no-card in landing.css (white 0.5 on the ink hero). */ .no-card { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--muted-foreground); } .cta-action { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } /* two classes, so it outranks .blk-cta p (16px) */ .blk-cta .no-card { margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.55); } .cw-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 13.5px; color: var(--muted-foreground); } .cw-stats strong { color: var(--foreground); font-weight: 500; } /* ===== offer / task cards ===== */ .offers-grid { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 680px) { .offers-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1020px) { .offers-grid { grid-template-columns: repeat(3, 1fr); } } .offer-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); } .offer-card:hover { border-color: rgba(15, 14, 13, 0.4); transform: translateY(-2px); } .offer-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); } /* the output-type badge: per-type icon + label with one quiet tint each, so a wall of cards scans by what a task produces without turning into a rainbow. Hues are kept near-ink (low chroma, ≤10% alpha grounds); text is the only saturated-ish part and stays AA on the card white. */ .offer-type { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-sm); background: var(--muted); color: var(--muted-foreground); white-space: nowrap; } .offer-type[data-out="html"] { background: rgba(100, 0, 255, 0.07); color: #5b21c9; } .offer-type[data-out="pdf"] { background: rgba(178, 60, 44, 0.08); color: #96473a; } .offer-type[data-out="doc"] { background: rgba(43, 84, 156, 0.08); color: #3d5d99; } .offer-type[data-out="slides"] { background: rgba(176, 116, 24, 0.1); color: #8a651f; } .offer-type[data-out="image"] { background: rgba(26, 122, 103, 0.09); color: #2a6f60; } .offer-type[data-out="sheet"] { background: rgba(38, 125, 66, 0.09); color: #34694a; } /* on the task detail page the badge sits beside the kicker, not card-right */ .task-side .offer-type { margin-left: 0; font-size: 11px; } .offer-title { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; } .offer-desc { font-size: 13.5px; line-height: 1.55; color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .offer-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-foreground); border-top: 1px solid var(--border); } .offer-foot .go { margin-left: auto; opacity: 0; transform: translate(-4px, 4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); display: inline-flex; color: var(--foreground); } .offer-card:hover .offer-foot .go { opacity: 1; transform: none; } /* ===== task browse filters ===== */ .tasks-search { display: flex; align-items: center; gap: 10px; margin-top: 22px; width: min(560px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 14px; height: 46px; } .tasks-search:focus-within { border-color: rgba(15, 14, 13, 0.4); } .tasks-search input { flex: 1; border: none; outline: none; font-family: inherit; font-size: 14.5px; background: transparent; color: var(--foreground); min-width: 0; } .tasks-search input::placeholder { color: rgba(15, 14, 13, 0.4); } .ts-icon { color: var(--muted-foreground); display: inline-flex; } .tasks-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 26px; } .fchip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; padding: 7px 14px; border-radius: var(--r-md); background: transparent; color: var(--muted-foreground); border: 1px solid var(--border); transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .fchip span { font-size: 11.5px; opacity: 0.7; } .fchip:hover { border-color: rgba(15, 14, 13, 0.4); color: var(--foreground); } .fchip.active { background: var(--ink); color: #fff; border-color: var(--ink); } .fchip.active span { opacity: 0.7; } .tasks-empty { padding: 48px 0 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; color: var(--muted-foreground); } /* ===== task page ===== */ .task-layout { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); align-items: start; } @media (min-width: 980px) { .task-layout { grid-template-columns: 1.35fr 1fr; } } .task-side { display: flex; flex-direction: column; gap: 20px; max-width: 560px; } .task-side h1 { font-weight: 300; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.02em; line-height: 1.12; } .task-side .lede { font-size: 15.5px; line-height: 1.65; color: var(--muted-foreground); } .task-side .meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .deliverable { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; background: var(--card); } .deliverable .label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 6px; } .deliverable p { font-size: 14px; line-height: 1.55; } /* the composed "What you get" panel: an optional editorial lead (deliverable today, longDeliverable when the CMS grows it) over three fact rows that are always present, so the panel holds up when the lead is empty */ .wyg .label { margin-bottom: 10px; } .wyg-lead { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); } .wyg-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .wyg-facts li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.55; color: rgba(15, 14, 13, 0.75); } .wyg-facts .icon { margin-top: 2px; color: var(--muted-foreground); } .by-row { display: inline-flex; align-items: center; gap: 12px; transition: opacity 0.25s var(--ease); } .by-row:hover { opacity: 0.75; } .by-row .who { display: flex; flex-direction: column; line-height: 1.35; font-size: 14.5px; font-weight: 500; } .by-row .who small { font-size: 12.5px; font-weight: 400; color: var(--muted-foreground); } .task-actions { display: flex; flex-wrap: wrap; gap: 10px; } .task-actions .cta-note { flex-basis: 100%; margin-top: 2px; } /* ===== sample preview embeds ===== */ .task-preview { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--card); } /* loading veil for remote samples (IPFS pins, the Office viewer): sits on top of the embed while [data-loading] is set. The asset's load event lifts it; if that event never fires (dead pin, blocked viewer) a 15s delayed keyframe lifts it anyway, so nothing spins forever. templates/tasks.js adds a