Custom CSS

Pro plans can fully restyle the public link page that members land on during the Steam ↔ Discord verify flow. Drop CSS into the dashboard editor and it is injected into every link page on your Org — no rebuild, no propagation delay, live on the next request.

How it works

• Your CSS is appended to the page's <style> block after the platform stylesheet, so any selector you write wins by source order alone — no !important needed for normal overrides.
• Changes take effect on the next page load. There is no build step and no cache to bust.
• Only CSS is accepted. <script>, <link>, and HTML tags are stripped server-side. CSS @import is allowed but discouraged — prefer self-contained rules for performance.
• Set the field to empty to revert to the default theme.

CSS variables

The fastest way to retheme is to override the design tokens at :root. Every surface, border, and accent on the page reads from these.

Colors

Shape, typography, motion

Page structure

Every link page renders the same skeleton. Target any of these selectors to restyle that region.

Recipes

1. Switch the brand accent to hot pink

Overriding --ember and friends retunes every primary button, glow, and focus ring at once.

:root {
  --ember:      #ff0050;
  --ember-1:    #e60048;
  --ember-2:    #cc0040;
  --ember-glow: rgba(255, 0, 80, 0.45);
  --line-warm:  rgba(255, 0, 80, 0.22);
}

2. Light theme

:root {
  --bg:        #f7f7f8;
  --bg-1:      #ffffff;
  --bg-2:      #f0f0f3;
  --surface:   #ffffff;
  --surface-1: #f5f5f7;
  --surface-2: #ebebef;
  --line:      rgba(0, 0, 0, 0.08);
  --line-2:    rgba(0, 0, 0, 0.12);
  --line-3:    rgba(0, 0, 0, 0.18);
  --fg:        #0a0a0b;
  --fg-1:      #2a2a2e;
  --fg-2:      #5a5e66;
  --fg-3:      #8a8d94;
}

3. Custom background image

body {
  background:
    linear-gradient(180deg, rgba(8,9,11,0.85) 0%, rgba(8,9,11,0.95) 100%),
    url('https://cdn.example.com/bg.jpg') center / cover no-repeat fixed;
}

.backdrop { display: none; }

4. Custom display font

/* @import is allowed; loaded once per page */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');

:root {
  --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

.work-h1 { letter-spacing: -0.02em; }

5. Hide the footbar

.footbar { display: none; }
.work    { padding-bottom: 32px; }

6. Glassmorphism rail

.rail {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

Tips

• Test on mobile. The page tightens at max-width: 640px. Wrap mobile-only overrides in the same media query.
• Prefer tokens over hex. If you re-tune the palette via :root variables, every component stays in sync automatically.
• Use !important sparingly. Source order already favors your CSS — reach for !important only when overriding an inline style.
• Validate visually. The dashboard editor is plain-text; open the link page in a new tab and refresh after each save to confirm.
• No JS. <script> tags are stripped. For dynamic behavior, file a feature request rather than trying to smuggle it through CSS.