Hypernova Docs - UI Themes Advanced Modification

What Advanced Modification Means In Hypernova

advancedCss is a second layer above tokens. Tokens define your color/material language. advancedCss.rules maps that language to specific selectors, states, and pseudo-elements.

Compatibility: missing advancedCss keys fall back to default behavior automatically.
Scope control: you can target one menu (for example Season Pass) without touching others.
Premium styling: complex finishes (marble, stripe overlays, micro-trim) are achieved by combining custom variables + selector rules.

Imperial Inkstorm Case Study (How The Look Is Built)

Layer	Key Variables	Rule Mapping	Result
Material Base	`--ui-imperial-card`, `--ui-imperial-edge`	`.ccb-start, .ccb-group, .ccb-tile`	Matte obsidian base with premium trim.
Marble Detail	`--ui-imperial-marble-a/b/c`	`background-image` on panel selectors	Subtle white marble movement instead of flat gradients.
Interaction	`--ui-imperial-card-hover`	`.menu-btn:hover`, `.ccb-tile:hover`	Controlled hover lift, no cheap glow.
Module Polish	same variable set	`#seasonPassModal ...`, `#inboxModal ...`, `#bountyBoardModal ...`	Theme consistency across every major menu.
Cinematic Exception	none (rule choice)	`.bounty-market-scene::before/::after`	Keep broker fade where needed while other modules stay clean.

Comic Sketchboard Variant (How To Build It Correctly)

If you want a hand-drawn, black-and-white board with irregular paint accents, treat it as a three-layer system:

Sketch layer: dark paper base + chalk/ink lines.
Paint splash layer: low-opacity color splashes placed with gradients, not uniform fills.
UI legibility layer: keep text and critical controls high contrast so style never harms readability.

Goal	Variable/Rule	Implementation	Where Visible
Paper + ink base	`--ui-advanced-flat-surface` + panel rules	Near-black matte surfaces with bright hand-drawn borders.	Main menu panels, modals, cards.
Sketch lines	`backgroundImage` with repeating gradients	Thin crossed lines at low alpha to mimic pen texture.	Panel interiors and modal shells.
Random paint	pseudo-element overlays	Use `::before`/`::after` radial splashes with low opacity.	Card corners, hero panels, selected states.
Readability guard	`--ui-text-primary`, button and input rules	Light text, constrained accent usage, stronger hover contrast.	All menus, especially Stats/Research/Inbox.

Reference Snippet (Imperial-Style Advanced Block)

{
  "advancedCss": {
    "variables": {
      "--ui-imperial-card": "linear-gradient(180deg, rgba(18,18,18,0.98), rgba(12,12,12,0.98))",
      "--ui-imperial-card-hover": "linear-gradient(180deg, rgba(28,24,16,0.98), rgba(18,16,12,0.98))",
      "--ui-imperial-edge": "rgba(206,206,206,0.78)",
      "--ui-imperial-marble-a": "rgba(255,255,255,0.03)",
      "--ui-imperial-marble-b": "rgba(238,238,238,0.02)",
      "--ui-imperial-marble-c": "rgba(216,188,106,0.08)"
    },
    "rules": {
      ".ccb-start, .ccb-group, .ccb-tile": {
        "background": "var(--ui-imperial-card)",
        "backgroundImage": "linear-gradient(165deg, rgba(255,255,255,0.025), transparent 38%), repeating-linear-gradient(118deg, var(--ui-imperial-marble-a) 0 1px, transparent 1px 20px)",
        "border": "1px solid var(--ui-imperial-edge)"
      },
      ".menu-btn:hover": {
        "background": "var(--ui-imperial-card-hover)",
        "borderColor": "rgba(228,228,228,0.92)"
      },
      "#seasonPassModal .season-pass-track-fill": {
        "background": "linear-gradient(90deg, #c8c8c8 0%, #d8bc6a 56%, #ebd8a5 100%)"
      }
    }
  }
}

Reference Snippet (Comic Sketchboard Block)

{
  "advancedCss": {
    "variables": {
      "--ui-sketch-base": "rgba(12,12,12,0.96)",
      "--ui-sketch-ink": "rgba(236,236,236,0.82)",
      "--ui-sketch-splash-a": "rgba(220,88,74,0.20)",
      "--ui-sketch-splash-b": "rgba(110,182,214,0.18)",
      "--ui-sketch-splash-c": "rgba(230,196,112,0.16)"
    },
    "rules": {
      ".ccb-start, .ccb-group, .ccb-tile, .modal-content": {
        "background": "var(--ui-sketch-base)",
        "border": "1px solid var(--ui-sketch-ink)",
        "backgroundImage": "repeating-linear-gradient(118deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px), repeating-linear-gradient(62deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 22px)"
      },
      ".ccb-group::before, .season-pass-panel::before, .stats-panel::before": {
        "content": "''",
        "position": "absolute",
        "inset": "0",
        "pointerEvents": "none",
        "background": "radial-gradient(circle at 18% 22%, var(--ui-sketch-splash-a), transparent 42%), radial-gradient(circle at 78% 68%, var(--ui-sketch-splash-b), transparent 46%), radial-gradient(circle at 55% 18%, var(--ui-sketch-splash-c), transparent 40%)"
      },
      ".menu-btn:hover, .close-btn:hover": {
        "background": "rgba(238,238,238,0.16)",
        "borderColor": "rgba(255,255,255,0.92)"
      }
    }
  }
}

Use this as a template block and adapt only colors/alphas first. Keep selector names unchanged until your first working pass is stable.

Implementation Workflow

Define your advanced variables first (material, border, hover, shadow, accent).
Map variables to main menu shells (.ccb-*) and button states.
Add module-specific blocks for Season Pass, Research, Bounty, Inbox.
Use pseudo-element rules only for decorative control.
Validate in this order: main menu -> season pass -> research -> bounty -> inbox -> account/theme picker.

Common Failure Modes

Default colors still visible: missing modal-scoped selectors (for example #seasonPassModal ...).
Cross-theme leakage in previews: global selector too broad; add scoped card-level overrides.
Visual noise: too many gradients + glow layers; keep one material layer and one interaction layer.

theme.json Reference

Complete variable catalog including advanced variables.

cssRules Reference

Selector targeting patterns by module.

Examples

Drop-in snippets for quick iteration.