, but it's nested one level deeper inside * .docs-layout, not a direct child of . An unscoped `main{}` here * matched that one too, stacking an extra 1.5rem of padding and a max-width/ * auto-margin centering pass on top of .docs-layout's own padding: content * squeezed into a narrow centered column, most visible on phones (that's * also why it only showed up on hamburger/side-nav pages — that's the only * place

ends up nested rather than a direct child). */ body > main { margin: 0 auto; padding: 0 1.5rem; } /* cds--css-grid sets its own centering/margin/padding, meant for a bare page * grid — redundant and doubled-up when nested inside main's own padding. */ body .cds--css-grid { max-inline-size: none; margin-inline: 0; padding-inline: 0; } section { padding: 4rem 0; border-bottom: 1px solid var(--line); } section:last-child { border-bottom: none; } h2 { font-size: var(--cds-heading-04-font-size); font-weight: var(--cds-heading-04-font-weight); line-height: var(--cds-heading-04-line-height); letter-spacing: var(--cds-heading-04-letter-spacing); margin: 0 0 0.6rem; } .sub { color: var(--muted); max-width: 46rem; font-size: var(--cds-body-01-font-size); margin: 0 0 2rem; } .more { display: inline-block; margin-top: 1.25rem; font-weight: 600; font-size: var(--cds-label-01-font-size); } /* numbers */ .ngrid { margin-top: 1.75rem; } /* Same hero-scale treatment as h1 (see the note above it): display-02's real * breakpoint table, transcribed from @carbon/type's source since the CDN * bundle only exposes its flat 42px base as a custom property. */ .nval { font-family: var(--mono); font-size: 2.625rem; font-weight: 600; line-height: 1.19; letter-spacing: 0; color: var(--accent); } @media (min-width: 66rem) { .nval { font-size: 3.375rem; } } @media (min-width: 82rem) { .nval { font-size: 3.75rem; line-height: 1.16; } } @media (min-width: 99rem) { .nval { font-size: 4.75rem; line-height: 1.13; } } .nunit { font-size: var(--cds-heading-03-font-size); margin-left: 0.1rem; } .nlabel { margin-top: 0.6rem; font-weight: 600; font-size: var(--cds-body-01-font-size); } .ncard p { margin: 0.3rem 0 0; color: var(--muted); font-size: var(--cds-label-01-font-size); } /* idea */ .idea { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2.5rem; align-items: start; } .idea-text p { color: var(--muted); } .idea-text .punch { color: var(--fg); } .idea-code { min-width: 0; } /* spyre — a prose-only section, held to a readable measure */ .spyre .idea-text { max-width: 46rem; } /* targets */ .tg { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 1rem 1.1rem; } .tg code { background: none; border: none; padding: 0; font-weight: 700; font-size: var(--cds-body-02-font-size); } .tg span { display: block; margin-top: 0.3rem; color: var(--muted); font-size: var(--cds-label-01-font-size); } /* getting started */ .conv { margin-top: 1.75rem; display: grid; gap: 0.75rem; } .conv > div { display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; } .conv > div > code { flex: none; } .conv span { color: var(--muted); font-size: 0.9rem; } /* docs */ .dgrid { margin-top: 1.75rem; } .dcard h3 { margin: 0 0 0.3rem; font-size: var(--cds-heading-01-font-size); font-weight: var(--cds-heading-01-font-weight); color: var(--accent-2); } .dcard p { margin: 0; color: var(--muted); font-size: var(--cds-label-01-font-size); } /* footer */ footer { border-top: 1px solid var(--line); padding: 2rem 1.5rem 3rem; text-align: center; color: var(--muted); font-size: 0.88rem; } footer .credit { max-width: 44rem; margin: 1rem auto 0; font-size: 0.82rem; line-height: 1.6; } @media (max-width: 800px) { .idea { grid-template-columns: 1fr; gap: 2rem; } .hero-body { padding: 2.5rem 1.5rem 3rem; } section { padding: 3rem 0; } } /* architectures page --------------------------------------------------------- * The controls and panes are real Carbon Web Components; what stays here is * the diff view, which has no Carbon component. Colors come from the aliases * at the top of this file plus --cds-support-success/error for the * added/removed lines, the same pair Carbon uses for success and error status. */ /* .archpage sits inside .docs-content (the shared docs-page container, see * "docs pages" above) so it picks up the same left-margin reservation for * the side-nav rail and the same horizontal gutter as every other page — * it only adds the vertical rhythm specific to this page's own sections. */ .archpage { padding: var(--cds-spacing-08) 0 var(--cds-spacing-10); } .archpage .sub { max-width: 46rem; } .archpage h2 { margin: var(--cds-spacing-10) 0 var(--cds-spacing-03); font-size: var(--cds-heading-03-font-size); font-weight: 400; line-height: 1.4; } /* controls */ .archbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--cds-spacing-05); margin: var(--cds-spacing-07) 0 var(--cds-spacing-05); } .archbar cds-select { min-width: 16rem; } .archbar cds-button { margin-bottom: 1px; } /* sit on the selects' baseline */ /* panes */ .archpane { padding: 0; min-width: 0; overflow: hidden; margin: 0 0 var(--cds-spacing-05); } .archpane .codehead { display: flex; justify-content: space-between; gap: var(--cds-spacing-05); border-bottom: 1px solid var(--line); } .archpane .cmeta { color: var(--muted); white-space: nowrap; } /* Carbon's precompiled styles.min.css never actually defines --cds-code-01-* * at :root (it's only defined, oddly, under an unrelated .cds--guidebanner * rule) — every var() reference to it needs its own literal fallback, or it * silently resolves to nothing. cds-code-snippet's own real compiled CSS * does exactly this (`font-size: var(--cds-code-01-font-size, .75rem)`, etc.) * — matched here, and again below for diff-view-element, so both code * views render at the same real Carbon code-01 size instead of drifting. */ .archcode { margin: 0; padding: var(--cds-spacing-03) 0; max-height: 32rem; overflow: auto; background: var(--bg-soft); font-family: var(--mono); font-size: var(--cds-code-01-font-size, 0.75rem); line-height: var(--cds-code-01-line-height, 1.33333); letter-spacing: var(--cds-code-01-letter-spacing, 0.32px); } /* Undo every part of the global `code {}` prose-chip rule above (font-size, * border, border-radius) that isn't already reset here — that rule is sized * for an inline snippet inside a sentence, and left alone it compounds an * extra 0.875em on top of .archcode's own already-correct code-01 size. */ .archcode code { display: block; background: none; border: 0; border-radius: 0; padding: 0; font-size: inherit; } /* diff-view-element (https://konnorrogers.github.io/diff-view-element/) does * its own diffing and PrismJS highlighting in shadow DOM. Every property set * below is one of the component's own real, documented hooks — either a * :host custom property it reads in default-theme.styles.js (--syntax-*, * --mono-*, --hue-*), or a ::part() name it puts on specific shadow elements * itself (table, line, character-diff--*) — never a shadow-piercing * selector. --mono/--cds-code-01-font-size is the same font cds-code-snippet * uses elsewhere in this file; --hue-2/3/4/6 are the exact colors .c-fn/ * .c-kw/.c-s/.c-n use for the hand-highlighted single-file pane, so the two * views agree; everything else (backgrounds, borders, inserted/deleted) maps * to the same --cds-* aliases the rest of the site uses, so it tracks * light/dark mode like everything else instead of PrismJS's own fixed * "One Light" palette. */ diff-view-element { --mono-1: var(--fg); --mono-2: var(--muted); --mono-3: var(--muted); --hue-1: var(--accent); --hue-2: var(--accent-2); --hue-3: #c792ea; --hue-4: #86d99a; --hue-5: var(--accent); --hue-6: #f2b05e; --syntax-bg: var(--bg-soft); --syntax-fg: var(--fg); --syntax-gutter: var(--muted); --syntax-guide: var(--line); --syntax-selection-color: color-mix(in srgb, var(--accent) 25%, transparent); --syntax-inserted-bg: color-mix(in srgb, var(--cds-support-success) 16%, transparent); --syntax-deleted-bg: color-mix(in srgb, var(--cds-support-error) 14%, transparent); display: block; max-height: 32rem; overflow: auto; } /* The shadow tree's own

/ carry the browser's UA-default
 * `font-family: monospace` — an explicit rule on those exact elements always
 * beats an inherited value from outside the shadow boundary, no matter what
 * the host's own font-family is set to. ::part(pre)/::part(code) target
 * those elements directly (real part names the component renders, see
 * basic-diff-view-element.js's render()), which is real author CSS and does
 * win over that UA default. */
diff-view-element::part(pre),
diff-view-element::part(code) {
  font-family: var(--mono);
  font-size: var(--cds-code-01-font-size, 0.75rem);
  line-height: var(--cds-code-01-line-height, 1.33333);
  letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
}

diff-view-element::part(table) { border-color: var(--line); }
diff-view-element::part(line) { border-color: var(--line); }
diff-view-element::part(character-diff--inserted) { background: color-mix(in srgb, var(--cds-support-success) 32%, transparent); }
diff-view-element::part(character-diff--deleted) { background: color-mix(in srgb, var(--cds-support-error) 28%, transparent); }

@media (max-width: 900px) {
  .archbar cds-select { min-width: 100%; }
}