# Full Custom CSS

URL: /en/docs/user-guide/brand/full-custom-css
Last Updated: 2026-07-30T21:15:44.289Z

## Description
Apply advanced CSS to the Trust Center

## Available Actions
- Navigate to related topics
- View step-by-step instructions
- Get best practices

## Content
import { ShieldAlert, Code, Info } from "lucide-react";

# 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.

<div className="not-prose my-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 flex gap-2">
  <ShieldAlert className="h-4 w-4 mt-0.5" />

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

## 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

```css
/* 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:

```css
[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):

```css
[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:

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

Style the header search input and results:

```css
[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:

```css
[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:

```css
[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):

````css
[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):

```css
[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:

```css
.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));
}
```

### Modal styling examples

Base modal theme:

```css
[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:

```css
[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:

```css
[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.


## Code Examples Found
- css: /* Soften page background and cards */
.trust-center-shell[data-tc-surface] {
  background: radial-g...
- css: [data-tc-tab-panel="overview"] [data-tc-overview-category],
[data-tc-overview-resources],
[data-tc-o...
- css: [data-tc-overview-faq-item] {
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  paddi...
- css: [data-tc-agent-toolkit-trigger],
[data-tc-agent-toolkit] {
  display: none !important;
}...
- css: [data-tc-search-input] {
  border-radius: 999px;
  border-color: hsl(var(--primary));
}
[data-tc-sea...
- css: [data-tc-search-answer="complete"] {
  border-color: hsl(var(--primary));
  background: linear-gradi...
- css: [data-tc-avatar] {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary));
}
...
- css: [data-tc-tab-panel="faq"] .accordion-item {
  border: 1px solid hsl(var(--border));
  border-radius:...
- css: [data-tc-faq-item] {
  position: relative;
  border: 0;
  border-radius: 18px;
  background: linear-...
- css: .markdown-viewer table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid hsl(var(--b...
- css: [data-tc-modal] {
  border-radius: 16px;
  box-shadow: 0 24px 64px -32px rgba(0, 0, 0, 0.4);
  backg...
- css: [data-tc-modal="document"] {
  border: 1px solid hsl(var(--primary));
}
[data-tc-modal="request-acce...
- css: [data-tc-modal] .button,
[data-tc-modal] button {
  border-radius: 10px;
  font-weight: 600;
}...