Company logoTrust Center Documentation
Brand Customization

Full Custom CSS

Apply advanced CSS to the Trust Center

Full Custom CSS

The Brand → Advanced section lets you inject custom CSS into the Trust Center head. Use it for edge cases only; malformed rules can break layouts. Scripts and @import are stripped.

Use minimal, scoped overrides. Avoid global resets. Keep a copy of your CSS so you can quickly revert.

How to enable

  1. In Admin Center, go to Brand → Advanced (Brand-Extended CSS accordion).
  2. Paste your CSS into the editor and Save changes.
  3. Verify in the Trust Center; the CSS is injected before </head> and re-sanitized on save.

Available selectors

  • Global: .trust-center-body, .trust-center-shell[data-tc-surface]

  • Markdown: [data-tc-markdown] wrapper, .markdown-viewer (overview, hero, resource previews)

  • Tabs shell: [data-tc-tabs-root], [data-tc-tabs], [data-tc-tabs-header], [data-tc-tabs-list], [data-tc-tab-trigger], [data-tc-tabs-body]

  • Overview tab: [data-tc-tab-panel="overview"], [data-tc-overview-grid], [data-tc-overview-left], [data-tc-overview-right], [data-tc-overview-resources], [data-tc-overview-resources-item], [data-tc-overview-resources-item-title], [data-tc-overview-categories], [data-tc-overview-category], [data-tc-overview-category-doc], [data-tc-overview-category-doc-title], [data-tc-overview-subprocessors], [data-tc-overview-faq]

  • Other tabs: [data-state=active] on tab triggers; wrap styles with [data-tc-tab-panel="documentation"], [data-tc-tab-panel="subprocessors"], [data-tc-tab-panel="faq"]

  • FAQ (full tab): [data-tc-faq], [data-tc-faq-header], [data-tc-faq-list], [data-tc-faq-accordion], [data-tc-faq-item], [data-tc-faq-question], [data-tc-faq-answer]

  • Modals: [data-tc-modal] (generic), [data-tc-modal="base"], [data-tc-modal="alert"], [data-tc-modal="document"], [data-tc-modal="request-access"], [data-tc-modal="nda"]

  • Header search: [data-tc-search], [data-tc-search-input], [data-tc-search-results], [data-tc-search-result], [data-tc-search-section="knowledge"], [data-tc-search-section="documents"], [data-tc-search-section="subprocessors"], [data-tc-search-empty]

  • AI answers: [data-tc-search-answer-loading], [data-tc-search-ai-answer], [data-tc-search-answer-panel], [data-tc-search-answer="complete"], [data-tc-search-answer="error"]

  • Agent toolkit: [data-tc-agent-toolkit-trigger], [data-tc-agent-toolkit], [data-tc-agent-toolkit-action], [data-tc-agent-toolkit-copy]

  • Avatar: [data-tc-avatar], [data-tc-avatar-image], [data-tc-avatar-fallback]

  • UI atoms: .card, .badge, .button variants follow CSS variables; prefer tokens over hard-coded values

CSS tokens you can rely on

These map to tenant brand settings and system theming:

  • --primary, --primary-hover
  • --background, --foreground
  • --card, --card-foreground
  • --muted, --muted-foreground
  • --border, --input
  • --markdown-font-family

Use them for subtle tweaks instead of hard-coded colors when possible.

Full example

/* Soften page background and cards */
.trust-center-shell[data-tc-surface] {
  background: radial-gradient(circle at 20% 20%, #eef3ff, #ffffff 40%);
}

[data-tc-tabs-root] {
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--card));
}
[data-tc-tab-trigger][data-state="active"] {
  border: 1px solid hsl(var(--primary));
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
}

.trust-center-shell .card {
  border-radius: 18px;
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.25);
}

/* Typography tweaks for markdown */
.markdown-viewer h2 {
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: hsl(var(--primary));
}

.markdown-viewer a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Badge styling */
.badge,
.badge-outline {
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Overview panels */
[data-tc-tab-panel="overview"] [data-tc-overview-category],
[data-tc-overview-resources],
[data-tc-overview-compliance],
[data-tc-overview-subprocessors],
[data-tc-overview-faq] {
  border: 1px solid hsl(var(--border));
  border-radius: 18px;
  box-shadow: 0 14px 36px -24px rgba(0, 0, 0, 0.22);
  background: hsl(var(--card));
}
[data-tc-overview-resources-item],
[data-tc-overview-category-doc] {
  border-radius: 12px;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}
[data-tc-overview-resources-item]:hover,
[data-tc-overview-category-doc]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.3);
}
[data-tc-overview-resources-item-title],
[data-tc-overview-category-doc-title] {
  font-weight: 700;
}

/* FAQ (overview preview) */
[data-tc-overview-faq-item] {
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 10px 12px;
}
[data-tc-overview-faq-question] {
  font-weight: 700;
}
[data-tc-overview-faq-answer] {
  color: hsl(var(--muted-foreground));
}

/* FAQ tab */
[data-tc-faq-item] {
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background: hsl(var(--card));
}
[data-tc-faq-question] {
  font-weight: 700;
}
[data-tc-faq-answer] {
  color: hsl(var(--muted-foreground));
}

/* Preserve default spacing on mobile */
@media (max-width: 640px) {
  .trust-center-shell .card {
    padding: 14px;
  }
}

Targeted examples

Change overview card borders and shadow:

[data-tc-tab-panel="overview"] [data-tc-overview-category],
[data-tc-overview-resources],
[data-tc-overview-compliance] {
  border: 1px dashed hsl(var(--primary));
  border-radius: 18px;
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.25);
}

Style FAQ preview cards (overview):

[data-tc-overview-faq-item] {
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 10px 12px;
}

[data-tc-overview-faq-question] {
  font-weight: 700;
}
[data-tc-overview-faq-answer] {
  color: hsl(var(--muted-foreground));
}

Hide the agent toolkit:

[data-tc-agent-toolkit-trigger],
[data-tc-agent-toolkit] {
  display: none !important;
}

Style the header search input and results:

[data-tc-search-input] {
  border-radius: 999px;
  border-color: hsl(var(--primary));
}
[data-tc-search-results] {
  border: 1px solid hsl(var(--border));
  box-shadow: 0 24px 40px -32px rgb(0 0 0 / 0.35);
}
[data-tc-search-result]:hover {
  background: hsl(var(--primary) / 0.06);
}

Emphasize AI answers:

[data-tc-search-answer="complete"] {
  border-color: hsl(var(--primary));
  background: linear-gradient(
    135deg,
    hsl(var(--background)),
    hsl(var(--primary) / 0.08)
  );
}

Style the account avatar:

[data-tc-avatar] {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary));
}
[data-tc-avatar-fallback] {
  font-weight: 700;
  color: hsl(var(--primary));
}

Customize full FAQ tab accordion (scope-safe):

[data-tc-tab-panel="faq"] .accordion-item {
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  margin-bottom: 10px;
}

[data-tc-tab-panel="faq"] .accordion-trigger {
  font-weight: 600;
  padding: 12px 14px;
}

[data-tc-tab-panel="faq"] .accordion-content {
  padding: 0 14px 12px;
  color: hsl(var(--muted-foreground));
}

Experiment with tabs squared and flat:

```css
[data-tc-tabs-root] {
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--card));
}
[data-tc-tab-trigger] {
  border-radius: 6px;
  padding: 8px 12px;
  border: 1px solid transparent;
}
[data-tc-tab-trigger][data-state="active"] {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
}

FAQ neon (alternative):

[data-tc-faq-item] {
  position: relative;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #0f172a 0%, #111827 60%, #1e293b 100%);
  color: #e2e8f0;
  box-shadow:
    0 16px 40px -24px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: 6px 10px;
  overflow: hidden;
}
[data-tc-faq-item]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(
    circle at 20% 20%,
    rgba(59, 130, 246, 0.22),
    transparent 50%
  );
  pointer-events: none;
}
[data-tc-faq-question] {
  padding: 14px 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #e2e8f0;
}
[data-tc-faq-answer] {
  padding: 0 16px 16px 16px;
  color: #cbd5e1;
}

Tables squared with header background:

.markdown-viewer table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid hsl(var(--border));
}
.markdown-viewer th,
.markdown-viewer td {
  border: 1px solid hsl(var(--border));
  padding: 8px 10px;
}
.markdown-viewer thead {
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

Base modal theme:

[data-tc-modal] {
  border-radius: 16px;
  box-shadow: 0 24px 64px -32px rgba(0, 0, 0, 0.4);
  background: hsl(var(--card));
}

Per-modal overrides:

[data-tc-modal="document"] {
  border: 1px solid hsl(var(--primary));
}
[data-tc-modal="request-access"] {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}
[data-tc-modal="nda"] {
  background: linear-gradient(135deg, #0f172a, #1f2937);
  color: #e2e8f0;
}
[data-tc-modal="alert"] {
  border: 1px solid hsl(var(--destructive));
}

Modal buttons:

[data-tc-modal] .button,
[data-tc-modal] button {
  border-radius: 10px;
  font-weight: 600;
}

Safety limits and sanitization

  • Max length: ~50 KB of CSS.
  • Stripped: <script>, <style>, @import.

If the Trust Center looks broken after an update, clear or reduce your Brand-Extended CSS and save again.

How is this guide?

Brand Customization

Customize your Trust Center appearance with white-label branding, logos, colors, and themes for a professional customer experience

Certification Management

Manage compliance certifications, security badges, and trust credentials displayed on your Trust Center

On this page

Full Custom CSSHow to enableAvailable selectorsCSS tokens you can rely onFull exampleTargeted examplesModal styling examplesSafety limits and sanitization