swot-docs.css style reference

Design principles

The stylesheet is built to sit inside the existing Salesmatrix site without fighting it or leaking into it.

• Fully scoped. Every rule is qualified with .swot-doc, and the custom properties live on .swot-doc rather than :root, so nothing affects the rest of the site.
• Beats the site reset without !important. style.css flattens h1–h4 site-wide; class-qualified selectors (specificity 0,1,1+) restore a proper heading hierarchy.
• Palette borrowed, not invented. Colours come straight from style.css; only the amber caution tone is derived.
• Light only, on purpose. The host site has no dark mode, so a dark document inside it would look wrong. All colours are painted explicitly.
• Umbraco-ready. Key rules carry /**umb_name:…*/ comments so they show up as named styles in the Umbraco rich-text editor.

Palette

All tokens are CSS custom properties on .swot-doc. Reference them with var(--name) in any inline styles or SVG inside a document.

Fonts: Montserrat for text (--sans) and Cascadia Mono / Consolas for labels and code (--mono). Paragraph width is capped at --measure: 68ch for comfortable reading.

Page layout

A document is a single .shell grid: masthead across the top, a sticky contents rail on the left, content in main, and a footer across the bottom. Below 1000px the rail hides and the page becomes one column.

<body class="swot-doc">
  <div class="shell">
    <header class="masthead">   <!-- eyebrow, h1, standfirst, masthead-meta -->
    <nav class="rail">          <!-- rail-title + ol of anchor links, auto-numbered 01, 02… -->
    <main>                     <!-- one <section id="…"> per topic -->
    <footer>
  </div>
</body>

Masthead parts

Typography

This is an h2 section heading above, underlined with a thin rule. Body text uses soft ink with strong text in full ink, and links are underlined again, because the site stylesheet removes underlines globally and links need to stand out in prose.

This is an h3 subheading

Used to break a section into parts. Sans-serif, bold, dark ink.

This is an h4 label

A mono, uppercase label for small groupings like “Inputs” or “Example”.

Lists

• Unordered lists use square markers in brand blue.
• Items are evenly spaced using flex gap, not margins.

1. Ordered lists share the same rhythm.
2. Markers are also tinted brand blue.

Code

Inline code like .swot-doc .note.caution gets a pale blue chip. Blocks use <pre><code> with a brand-blue left border and horizontal scroll. Two optional highlight spans are available: .kw for keywords and .cmt for comments.

/* Load order matters */
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/docs/assets/swot-docs.css">

Tables

Wrap tables in .table-wrap for a bordered, horizontally scrollable panel. Headers are mono, uppercase and sticky; numbers use tabular figures; rows highlight on hover.

• .tag: white-on-blue mono badge for IDs or stages.
• .group-row: a tinted, uppercase divider row that groups the rows below it.
• .slot: italic grey placeholder for values not yet filled in.
• td.stage / td.key: cells that never wrap.

Callouts

Three severity levels, all built from .note with an optional modifier and a .note-label.

Numbered steps

Add class="steps" to an <ol> and wrap each item’s content in a <div>. The counter becomes a solid blue square badge.

1. Upload the stylesheet

   Place swot-docs.css in /docs/assets/.

2. Link it after style.css

   So the scoped rules win over the site-wide heading reset.

3. Wrap the document

   Add class="swot-doc" to the body or a container element, then use the components on this page.

Flow diagrams

Inline SVG inside .flow scrolls horizontally on small screens (min width 620px) and can colour itself with the variables --accent, --accent-wash, --surface and --surface-2.

Print & accessibility

Print

• The contents rail is hidden and the layout collapses to one column.
• Tables and code blocks avoid breaking across pages.
• Links print as plain dark text.

Accessibility

• Links and rail items get a visible 2px focus outline for keyboard users.
• Animations and transitions are switched off when the user prefers reduced motion.
• Sections have scroll-margin-top so anchor jumps don’t land flush against the viewport edge.