/* White header (mkdocs.yml primary: white), matching the sibling module docs instead of a colored header bar. Canvas Builder's own blue lives in --cb-accent — used by every .cb-* component below instead of --md-primary-fg-color, which under `white` becomes the header's literal white background, not a brand color. --md-typeset-a-color/--md-accent-fg-color still need the [data-md-color-primary="white"] selector (not a plain :root rule) to win: that attribute lives on , closer to every link than a plain :root rule, so inheritance takes Material's own indigo default first otherwise — same mechanism the sibling module docs use. Material also special- cases .md-button--primary under `white` to read --md-typeset-a-color directly, so the primary CTA button picks this up for free. */ :root { --cb-accent: #0090ff; } [data-md-color-scheme="slate"] { --cb-accent: #3b9eff; } [data-md-color-primary="white"] { --md-typeset-a-color: var(--cb-accent); --md-accent-fg-color: #0d74ce; --md-accent-fg-color--transparent: rgb(0, 144, 255, 0.1); } [data-md-color-primary="white"][data-md-color-scheme="slate"] { --md-typeset-a-color: var(--cb-accent); --md-accent-fg-color: #6fbaff; --md-accent-fg-color--transparent: rgb(59, 158, 255, 0.15); } /* Every page title, site-wide — the one deliberate display choice, so a module page and a plain reference page both read as the same product the instant the title renders. The homepage hero's larger size (below) builds on this rather than replacing it. Full-strength ink, not the theme's own default (--md-default-fg-color--light, 54% — legible for a small eyebrow label, too washed out at display size). */ .md-typeset h1 { margin: 0 0 0.5rem; letter-spacing: -0.01em; color: var(--md-default-fg-color); font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.15; } /* Keep the site title in the header visible on scroll instead of Material's default crossfade to the current page title — same rule the sibling module docs use. */ .md-header__title--active .md-header__topic { z-index: 1; transform: translateX(0); pointer-events: auto; opacity: 1; } .md-header__title--active .md-header__topic + .md-header__topic { pointer-events: none; opacity: 0; } /* Body measure: prose stays comfortably scannable at wide viewports. Tables, code blocks, and the .cb-* grid components need the full content width, so this targets plain paragraphs and list text only. */ .md-typeset p, .md-typeset li { max-width: 68ch; } /* Homepage's CB/Motion/AI tiles: force a fixed 3-across row instead of mkdocs-material's default auto-fit wrap (which drops to 2-per-row at this card's natural min-width). Scoped to a min-width so mobile keeps the theme's normal 1-column stack. */ @media screen and (min-width: 960px) { .md-content .grid.cards { grid-template-columns: repeat(3, 1fr); } } /* The three tile images share one baked-in 4:3 canvas, so they can fill the card's full width and size themselves off their own intrinsic ratio — no cap/object-fit needed (that combination was pillarboxing them below the card width, leaving side gaps the surrounding text doesn't have). */ .md-content .grid.cards > ul > li img, .md-content .grid.cards > * img { width: 100%; height: auto; margin-top: 0.75rem; border-radius: 0.35rem; } /* A badge-icon grid.cards tile (For developers) is a click target over its whole card, not just the title text — same stretched-link technique as .cb-link-item elsewhere on the site. */ .md-typeset .grid.cards > ul > li:has(.cb-concept-icon--badge) { position: relative; } .md-typeset .grid.cards > ul > li:has(.cb-concept-icon--badge) a::after { position: absolute; content: ""; inset: 0; } /* Homepage's CB/Motion/AI tiles: same stretched-link technique, but the Canvas Builder card carries a second, smaller Toolbar link alongside its primary Style link — .cb-card-primary-link marks which one stretches over the whole tile, and the other link's own z-index keeps it clickable on top of that overlay instead of being swallowed by it. */ .md-typeset .grid.cards > ul > li:has(.cb-card-icon) { position: relative; } .md-typeset .grid.cards > ul > li:has(.cb-card-icon) a.cb-card-primary-link::after { position: absolute; content: ""; inset: 0; } .md-typeset .grid.cards > ul > li:has(.cb-card-icon) a:not(.cb-card-primary-link) { position: relative; z-index: 1; } /* --------------------------------------------------------------------- Homepage hero — serif display headline, subhead, CTA row, and a floating product-shot graphic on the right. ------------------------------------------------------------------- */ .cb-hero.grid { grid-template-columns: 1fr; align-items: center; margin-bottom: 3rem; } @media screen and (min-width: 76.25em) { .cb-hero.grid { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; } } /* Values matched to the sibling module docs' own eyebrow class — canvas_builder had drifted to a smaller, tighter-tracked, full-strength all-caps label instead of the shared muted, wider-set, natural-case one. */ .cb-eyebrow { display: block; margin: 0 0 0.5rem; letter-spacing: 0.02em; color: var(--md-default-fg-color--light); font-size: 0.8rem; font-weight: 700; } .cb-hero h1 { margin-bottom: 0.625rem; font-size: 4.25rem; line-height: 1.05; } /* At narrow widths 4.25rem doesn't leave room for "Canvas" or "Builder" to wrap at a word boundary, so the browser breaks mid-word instead — same fix as the sibling docs' .bc-hero h1. */ @media screen and (max-width: 44.9375em) { .cb-hero h1 { font-size: 2.75rem; } } /* A smaller single-column hero for a page that isn't the homepage but still wants a big title + subhead moment. Sized to match the sibling docs' own page-hero h1 exactly. */ .cb-page-hero h1 { margin: 0 0 0.75rem; font-size: 3rem; line-height: 1.08; } /* Kept only for any existing standalone usage; page heroes now use .cb-doc-lede (below) like every other lede on the site — see its own comment for why the bigger/bolder variant this used to be was dropped. */ .cb-hero-subhead { max-width: 46rem; margin: 0 0 1rem; color: var(--md-default-fg-color--light); font-size: 1.05rem; } .cb-hero .md-button { margin: 1.5rem 0.5rem 0 0; } .cb-hero-graphic { display: flex; justify-content: center; } .cb-hero-graphic img { width: 100%; height: auto; } /* --------------------------------------------------------------------- Module card icons — colored rounded-square glyph tile, one hue per module (illustrative only; interactive controls stay the site's single blue accent). ------------------------------------------------------------------- */ .cb-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 0.6rem; vertical-align: middle; border-radius: 0.65rem; font-size: 1.4rem; } .cb-card-icon img { width: 30px; height: 30px; margin: 0; border-radius: 0; box-shadow: none; } .cb-card-icon--cb { background: rgb(0, 144, 255, 0.12); } .cb-card-icon--motion { color: #b45309; background: rgb(245, 158, 11, 0.14); } .cb-card-icon--ai { color: #7c3aed; background: rgb(139, 92, 246, 0.14); } .md-typeset .grid.cards > * > p:first-child { display: flex; align-items: center; margin-bottom: 0.5rem; } /* --------------------------------------------------------------------- Shared documentation-page skeleton (Styles / Motion / AI): the same Overview / In the editor / Main controls / Common tasks / Important notes / Settings / Advanced details / Related documentation rhythm on every page, so switching between them feels like one product. ------------------------------------------------------------------- */ .cb-doc-lede { max-width: 46rem; margin: 0.25rem 0 1.5rem; color: var(--md-default-fg-color--light); font-size: 1.05rem; } /* Opts a specific intro paragraph out of the site's 68ch prose measure — for a section like "Main controls" that immediately hands off to a wide grid/screenshot below, the narrow column just reads as wasted width. */ .md-typeset p.cb-wide-p { max-width: none; } /* A bare markdown image is wrapped in its own

by the parser (glightbox further wraps it in an , so the img is a grandchild, not a direct child), and that

inherits the site's 68ch prose measure above — which silently caps a full-width screenshot to ~600px regardless of .cb-overview-shot's own width:100% (100% of an already-capped parent). Exempt it here. */ .md-typeset p:has(img.cb-overview-shot) { max-width: none; } /* Overview's orienting screenshot — full content width so it never leaves dead space beside a narrower intrinsic image size, same border treatment as .cb-controls img below so the two read as one system. */ .cb-overview-shot { display: block; width: 100%; height: auto; margin: 1.5rem 0; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.5rem; } /* A chrome-graphic tile (already framed in its own artwork) reads worse with a second border/lightbox around it than the plain screenshots this class otherwise carries — drop both, keep the sizing/spacing. */ .cb-overview-shot--plain { border: none; border-radius: 0; } /* A 50/50 text | image split for an Overview intro, image on the right — an alternative to the full-width stacked .cb-overview-shot above, used where the page wants the screenshot beside the copy instead of under it. Top-aligned, not centered: the copy is now just a couple of short sentences, and centering it against a much taller image left it floating in dead space instead of reading as the page's opening paragraph. */ .cb-overview-split { display: grid; grid-template-columns: 1fr; align-items: start; gap: 1.75rem; margin: 1.5rem 0; } @media screen and (min-width: 60em) { .cb-overview-split { grid-template-columns: 1fr 1fr; gap: 3rem; } } .cb-overview-split .cb-overview-shot { margin: 0; } /* Overview's compact concept legend — icon, label, one-line description, no card chrome. Answers "what is this module, in four words." */ .cb-concepts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem 2rem; margin: 1.75rem 0 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--md-default-fg-color--lightest); } .cb-concept-icon { display: block; margin-bottom: 0.4rem; color: var(--cb-accent); font-size: 1.4rem; } /* Optional badge treatment — a colored chip behind the icon, one hue per concept, matching the polish of the sibling module docs. Opt-in per icon; plain .cb-concept-icon (the module pages' Overview sections) stays a flat single-accent glyph. */ /* .md-typeset prefix is load-bearing: Material's own icon-font rule (.md-typeset .emojione/.gemoji/.twemoji) is two classes, beating a plain single-class .cb-concept-icon--badge on specificity regardless of source order — its height:1.125em was winning and squashing the badge into a flat pill instead of a rounded square. */ .md-typeset .cb-concept-icon--badge { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 0.75rem; font-size: 1.5rem; } .cb-concept-icon--blue { color: var(--cb-accent); background: rgb(0, 144, 255, 0.12); } .cb-concept-icon--purple { color: #7c3aed; background: rgb(139, 92, 246, 0.14); } .cb-concept-icon--amber { color: #b45309; background: rgb(245, 158, 11, 0.14); } .cb-concept-icon--rose { color: #be123c; background: rgb(244, 63, 94, 0.14); } .cb-concept-label { margin: 0 0 0.2rem; } .cb-concept-desc { margin: 0; color: var(--md-default-fg-color--light); font-size: 0.82rem; line-height: 1.45; } /* Icon-led heading — a small badge inline before a heading that names one specific, verified mechanism (a "per-component note," in the sibling docs' language) rather than a whole topic. Padding-based sizing, not fixed width/height: the icon's own intrinsic size plus padding decides the box, so there's no fixed-height property to lose to Material's higher-specificity .md-typeset .twemoji rule (the bug the big Overview badges above had to fix by out-specifying instead). One consistent accent tint, not a per-item hue — these are code-verified facts, not a multi-facet overview. */ .md-typeset .cb-icon-heading { display: flex; align-items: center; gap: 0.6rem; } .md-typeset .cb-icon-heading .twemoji { --md-icon-size: 1.15rem; box-sizing: content-box; padding: 0.4rem; color: var(--cb-accent); border-radius: 0.5rem; background: var(--md-accent-fg-color--transparent); } .md-typeset h2.cb-icon-heading .twemoji { --md-icon-size: 1.4rem; padding: 0.45rem; } /* "In the editor" — numbered workflow steps, each topped with a "canvas chrome" miniature (see below) instead of a generic icon. auto-fit (not a fixed column count) so a 3-step page's row stretches to fill the full width instead of leaving a dead trailing column sized for a 4th card. */ .cb-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin: 1.5rem 0 2.5rem; } /* For a group whose tiles carry more than a sentence or two — narrow to 2 columns instead of auto-fit's 3-4, so a long description gets a wide enough measure to read comfortably instead of wrapping into a tall, narrow ribbon. */ @media screen and (min-width: 45em) { .cb-steps--2col { grid-template-columns: repeat(2, 1fr); } } .cb-step { overflow: hidden; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.5rem; } .cb-step-body { padding: 1.1rem 1.25rem 1.25rem; } .cb-step-num { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; color: #fff; border-radius: 50%; background: var(--cb-accent); font-size: 0.85rem; font-weight: 700; } .cb-step-title { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.35rem; } .cb-step-desc { margin: 0; color: var(--md-default-fg-color--light); font-size: 0.85rem; line-height: 1.5; } /* --------------------------------------------------------------------- Canvas chrome — the site's one reusable illustration system for a supporting graphic: a schematic miniature of the real editor window (dark title strip over a light canvas), never a generic stock icon. Colors are hardcoded rather than theme tokens, deliberately: like a real screenshot, this chrome reads as "the editor" whether the docs site itself is in light or dark mode. Each modifier below is a rough synopsis of what that step's actual screen shows — no text, no icons, just shape, count, and one accent color standing in for the thing in focus. Reuse this (.cb-chrome + a --modifier) instead of inventing a one-off graphic per page. */ .cb-chrome { display: flex; flex-direction: column; border-bottom: 1px solid var(--md-default-fg-color--lightest); } .cb-chrome-bar { display: flex; gap: 0.3rem; padding: 0.55rem 0.7rem; background: #1c1c1e; } .cb-chrome-bar span { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: rgb(255, 255, 255, 0.28); } .cb-chrome-body { display: flex; align-items: center; height: 5.5rem; padding: 1rem; background: #fafafa; } /* Pick a starting point: a row of template choices, one chosen. */ .cb-chrome-body--grid { gap: 0.4rem; width: 100%; } .cb-chrome-body--grid span { flex: 1; align-self: stretch; border-radius: 0.25rem; background: #e4e4e7; } .cb-chrome-body--grid span:first-child { background: var(--cb-accent); } /* Generating: a short checklist, the active row in accent. */ .cb-chrome-body--list { flex-direction: column; align-items: stretch; justify-content: center; gap: 0.4rem; width: 100%; } .cb-chrome-body--list span { height: 0.4rem; border-radius: 0.2rem; background: #e4e4e7; } .cb-chrome-body--list span:nth-child(1) { width: 85%; } .cb-chrome-body--list span:nth-child(2) { width: 65%; } .cb-chrome-body--list span:nth-child(3) { width: 45%; background: var(--cb-accent); } /* Review: a result preview plus two style chips. */ .cb-chrome-body--card { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.4rem; width: 100%; } .cb-chrome-body--card span:first-child { width: 100%; height: 1.9rem; border-radius: 0.25rem; background: #e4e4e7; } .cb-chrome-body--card span:not(:first-child) { display: inline-block; width: 2.25rem; height: 0.55rem; border-radius: 0.275rem; background: #e4e4e7; } .cb-chrome-body--card span:last-child { background: var(--cb-accent); } /* Inserted: the built block on the canvas, with a placed marker. */ .cb-chrome-body--done { position: relative; width: 100%; } .cb-chrome-body--done span { display: block; width: 100%; height: 2.75rem; border-radius: 0.25rem; background: #e4e4e7; } .cb-chrome-body--done::after { position: absolute; top: 0.575rem; right: 0.575rem; width: 0.85rem; height: 0.85rem; content: ""; border: 2px solid #fafafa; border-radius: 50%; background: var(--cb-accent); } /* Adjust columns per viewport: the section's own column bands, the active ones in accent. */ .cb-chrome-body--columns { gap: 0.3rem; width: 100%; } .cb-chrome-body--columns span { flex: 1; align-self: stretch; border-radius: 0.2rem; background: #e4e4e7; } .cb-chrome-body--columns span:nth-child(1), .cb-chrome-body--columns span:nth-child(2) { background: var(--cb-accent); } /* Shared "nested box" primitive — an outer dashed frame with a solid inner box, for any step about drilling into or bounding a target. --nested offsets the inner box into a corner (walking into a child); --box centers it symmetrically (a padding/margin box-model diagram). */ .cb-chrome-body--nested, .cb-chrome-body--box { width: 100%; } .cb-chrome-nest { position: relative; align-self: stretch; width: 100%; border: 2px dashed #d4d4d8; border-radius: 0.35rem; } .cb-chrome-nest-inner { position: absolute; border-radius: 0.2rem; background: var(--cb-accent); } .cb-chrome-body--nested .cb-chrome-nest-inner { inset: 20% 15% 20% 45%; } .cb-chrome-body--box .cb-chrome-nest-inner { inset: 24%; } /* Select something on the canvas: nothing chosen yet — an empty dashed placeholder, no accent (there's nothing "active" to highlight). */ .cb-chrome-body--empty { justify-content: center; width: 100%; } .cb-chrome-body--empty span { display: block; width: 65%; height: 2.75rem; border: 2px dashed #d4d4d8; border-radius: 0.3rem; } /* Every component gets a Style tab: a row of tab pills, the active one in accent. */ .cb-chrome-body--tabs { gap: 0.5rem; width: 100%; } .cb-chrome-body--tabs span { flex: 1; height: 1.6rem; border-radius: 0.3rem; background: #e4e4e7; } .cb-chrome-body--tabs span:nth-child(2) { background: var(--cb-accent); } /* Pick a viewport: ascending device widths, the active one in accent. */ .cb-chrome-body--sizes { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.4rem; width: 100%; } .cb-chrome-body--sizes span { height: 0.4rem; border-radius: 0.2rem; background: #e4e4e7; } .cb-chrome-body--sizes span:nth-child(1) { width: 35%; } .cb-chrome-body--sizes span:nth-child(2) { width: 55%; } .cb-chrome-body--sizes span:nth-child(3) { width: 75%; background: var(--cb-accent); } .cb-chrome-body--sizes span:nth-child(4) { width: 95%; } /* "Main controls" — a grouped list of what each control does, with the panel screenshot featured full width underneath (it was a cramped 220-320px side column before; too small to actually read). The screenshot itself reuses .cb-overview-shot rather than its own rule. */ .cb-controls { display: flex; flex-direction: column; gap: 1.75rem; margin: 1.5rem 0 2.5rem; } .cb-controls-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem 2rem; } .cb-control-icon { display: block; color: var(--cb-accent); font-size: 1.15rem; } /* A linked control's whole row is the click target, not just its title text — the ::after stretch below, shared with .cb-link-item. */ .cb-control { position: relative; } .cb-control-title { margin: 0.3rem 0 0.15rem; } .cb-control-title a::after { position: absolute; content: ""; inset: 0; } .cb-control-desc { margin: 0; color: var(--md-default-fg-color--light); font-size: 0.85rem; line-height: 1.5; } /* Compact link grid — shared by "Common tasks" (a task index into the page below) and "Related documentation" (links to other pages). --4 widens to four columns for the related-docs footer; tasks stay at two. */ .cb-link-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 1.5rem 0 2.5rem; } @media screen and (min-width: 45em) { .cb-link-grid { grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 60em) { .cb-link-grid--4 { grid-template-columns: repeat(4, 1fr); } } .cb-link-item { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: start; padding: 0.85rem 1rem; column-gap: 0.75rem; transition: border-color 0.15s ease; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.5rem; row-gap: 0.15rem; } .cb-link-item:has(a:hover) { border-color: var(--cb-accent); } /* The icon shortcode's SVG is a , but markdown wraps it in its own

(not the span) is the actual grid child, so placement rules target it via the child combinator rather than the icon class. */ .cb-link-item > p:first-child { grid-row: 1 / 3; grid-column: 1; margin: 0.15rem 0 0; } .cb-link-icon { color: var(--cb-accent); font-size: 1.1rem; } .cb-link-item > p.cb-link-title { grid-column: 2; margin: 0 0 0.2rem; } .cb-link-title a { text-decoration: none; color: var(--md-default-fg-color); } .cb-link-title a:hover { color: var(--cb-accent); } .cb-link-title a::after { position: absolute; content: ""; inset: 0; } .cb-link-item > p.cb-link-desc { grid-column: 2; margin: 0; color: var(--md-default-fg-color--light); font-size: 0.8rem; line-height: 1.45; } /* A flat catalog — every Motion effect, AI section template, or AI blueprint, one tile each: an icon plus a small tag naming the item's group, so a reader can tell what's what without opening each one. */ .cb-effect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin: 1.5rem 0; } .cb-effect { padding: 0.85rem 1rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.5rem; } .cb-effect-icon { margin-right: 0.3rem; vertical-align: -0.2em; color: var(--cb-accent); font-size: 1.05rem; } .cb-effect-title { margin: 0 0 0.35rem; } .cb-effect-tag { display: inline-block; margin: 0 0 0.6rem; padding: 0.05rem 0.5rem; color: var(--md-default-fg-color--light); border: 1px solid var(--md-default-fg-color--lightest); border-radius: 999px; font-size: 0.7rem; } .cb-effect-desc { margin: 0; color: var(--md-default-fg-color--light); font-size: 0.8rem; line-height: 1.45; } /* A page-level disclaimer/posture statement, designed as a quiet closing card instead of an inline admonition breaking up the reading flow near the top of the page. Icon and text are just the two markdown-wrapped

s inside — display:flex lays them out side by side with no extra markup needed. */ .cb-disclaimer { display: flex; align-items: flex-start; gap: 1rem; margin: 2.5rem 0 0; padding: 1.25rem 1.5rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.5rem; } .cb-disclaimer-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: var(--cb-accent); border-radius: 0.65rem; background: var(--md-accent-fg-color--transparent); font-size: 1.2rem; } .cb-disclaimer p { margin: 0; color: var(--md-default-fg-color--light); font-size: 0.85rem; line-height: 1.6; }