My Awesome Vendor - Styling Guide

The style frontmatter field on index.md governs the visual identity of every page in the vendor hub.

How Styles Are Scoped

The platform wraps the style value in a .vendor-content { … } block and injects it as a <style> element. This means all your CSS rules apply only within this vendor's pages — they cannot leak into the rest of the platform.

CSS nesting is fully supported (Chrome 112+, Firefox 117+, Safari 16.5+), so you can target descendant elements cleanly:

.content-box-container {
  background: #fafafa !important;
}

h1, h2, h3 { color: #1e293b; }

a:not([class]) { color: #2563eb; }

Note: The !important flag is required to override the default styles.

Panel Background

.content-box-container is the white card that wraps the page content. Override its background to set the page's overall tone:

/* Soft warm tint */
.content-box-container {
  background: #fffbf5 !important;
}

/* Subtle gradient */
.content-box-container {
  background: linear-gradient(160deg, #f8f7ff 0%, #eef2ff 100%) !important;
}

/* Dark mode feel */
.content-box-container {
  background: #0f172a !important; color: #e2e8f0 !important;
}

Note: The !important flag is required to override the default styles.

Blockquotes

blockquote {
  border-left: 4px solid #7c3aed;
  background: #f5f3ff;
  padding: 0.75rem 1rem;
  border-radius: 0 6px 6px 0;
  margin: 1.5rem 0;
}
blockquote p { margin: 0; color: #334155; }

Inline Code

code:not(pre code) {
  background: #ede9fe;
  border-radius: 4px;
  color: #5b21b6;
  padding: 0.15em 0.45em;
  font-size: 0.875em;
}

The :not(pre code) selector ensures fenced code blocks are unaffected.

Tables

table { width: 100%; border-collapse: collapse; }
th {
  background: #ede9fe;
  color: #4f46e5;
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 1rem;
}
td { padding: 0.55rem 1rem; border-bottom: 1px solid #e2e8f0; }
tr:hover td { background: #f5f3ff; }

Complete Example

The sample vendor's full style field, combining all of the above:

.content-box-container {
  background: linear-gradient(160deg, #f8f7ff 0%, #eef2ff 100%) !important;
}

h1, h2, h3 {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

a:not([class]) { color: #4f46e5; font-weight: 500; }

blockquote {
  border-left: 4px solid #7c3aed;
  background: #f5f3ff;
  padding: 0.75rem 1rem;
  border-radius: 0 6px 6px 0;
  margin: 1.5rem 0;
}
blockquote p { margin: 0; color: #334155; }
blockquote p + p { margin-top: 0.5rem; }

code:not(pre code) {
  background: #ede9fe;
  border-radius: 4px;
  color: #5b21b6;
  padding: 0.15em 0.45em;
  font-size: 0.875em;
}

table { width: 100%; border-collapse: collapse; }
th { background: #ede9fe; color: #4f46e5; font-weight: 600; text-align: left; padding: 0.6rem 1rem; }
td { padding: 0.55rem 1rem; border-bottom: 1px solid #e2e8f0; }
tr:hover td { background: #f5f3ff; }