Crucible Codex Styles Guide

This page is a working reference for the full Codex stylesheet.

It is meant to show the wrappers, navigation blocks, subsite skins, and reusable content components that currently exist in the CSS, including the newer canonical codex-* component names and the older legacy aliases that still render.

Use the canonical patterns for all new pages. Legacy names are documented here so older pages remain understandable.

Canonical Page Pattern

For all new subsite pages, use this general structure:

{{HeaderTemplate}}
<div class="codex-page codex-page--subsite">

= Page Title =

Page content here.

{{NavTemplate}}
</div>

For nav templates, use this general structure:

<includeonly>
<div class="codex-navbox codex-navbox--subsite">
<strong class="codex-nav-title">Subsite Codex</strong>
[[Subsite:Home|Home]] • [[Subsite:Character Creation|Character Creation]]
</div>
</includeonly>

Shared Foundation

These styles affect the whole wiki, not just one subsite.

Global Page Skin

The site-wide body, headings, links, forms, tables, infoboxes, TOC, code blocks, and images all have a shared dark Codex treatment.

Reusable selectors documented in CSS include:

html, body, .mw-page-container, .vector-body
.mw-body
#firstHeading, .mw-first-heading, .mw-parser-output h1-h6
.vector-pinned-container, .vector-column-start, #mw-panel, .vector-menu, .vector-user-links
.vector-header-container, .vector-header, .mw-header, .vector-page-toolbar, .vector-sticky-header, .vector-page-titlebar
.vector-search-box, .vector-search-box-vue, .vector-typeahead-search-container, #searchInput
.wikitable, .infobox, .portable-infobox
#toc, .toc, .catlinks
pre, code
.thumb, .thumbinner, .mw-file-element, .floatright, .floatleft
.mw-editsection and related section-edit selectors are hidden globally

Shared Banner

<div class="codex-banner">
[[File:Banner.jpg|900px]]
</div>

Use:

codex-banner for a standard centered banner
codex-header for shared header wrappers where needed

Shared Page Wrapper

This is the default shared codex-page wrapper. It gives the page its centered panel, padding, line spacing, rounded corners, and drop-shadow.

<div class="codex-page">
Your page content here.
</div>

Shared Navigation Wrapper

Codex Navigation Home • Help • All Pages

<div class="codex-navbox">
<strong>Codex Navigation</strong>
[[Main Page|Home]] • [[Help:Contents|Help]] • [[Special:AllPages|All Pages]]
</div>

Canonical Reusable Components

These are the newer, future-facing shared component names. Use these for all new work where practical.

codex-nav-title

Example Codex Home • Help

<div class="codex-navbox codex-navbox--subsite">
<strong class="codex-nav-title">Subsite Codex</strong>
[[Subsite:Home|Home]]
</div>

codex-subtitle

A short italic subtitle placed beneath a major heading.

<div class="codex-subtitle">A short italic subtitle.</div>

codex-panel And codex-panel-title

Panel Title

Panel text goes here.

<div class="codex-panel">
<div class="codex-panel-title">Panel Title</div>
Panel text goes here.
</div>

codex-callout And codex-callout-title

Callout Title

This is a reusable callout block.

<div class="codex-callout">
<div class="codex-callout-title">Callout Title</div>
Callout text here.
</div>

codex-lead

This is lead paragraph styling for an opening paragraph or emphasized introduction.

<p class="codex-lead">Opening paragraph text.</p>

codex-smallcaps

Small Caps Example

<span class="codex-smallcaps">Small Caps Example</span>

codex-grid And codex-card

Card One
Example card text.

Card Two
Example card text.

<div class="codex-grid">
<div class="codex-card">Card One</div>
<div class="codex-card">Card Two</div>
</div>

codex-divider

<hr class="codex-divider">

Variant Callouts

Stormbringer and Hawkmoon define special canonical variant names:

codex-callout--chaos
codex-callout--doom
codex-callout--gm

Nightcats Skin

Canonical Wrapper

<div class="codex-page codex-page--nightcats">
...
</div>

Canonical Nav

<div class="codex-navbox codex-navbox--nightcats">
<strong class="codex-nav-title">Nightcats Codex</strong>
...
</div>

Example

Nightcats Example

This is paragraph text in the Nightcats skin.

Jungle Lore

The canonical codex-panel is supported here, and maps to the older Nightcats panel styling.

Legacy Nightcats Panel

The legacy Nightcats class still works too.

Strength	d8
Agility	d6

Tags: Beast, Jungle, Rare

The jungle remembers what men forget.

Nightcats-Specific Classes

nightcats-header
nightcats-panel
nightcats-panel-title
nightcats-panel-subtitle
nightcats-panel--beast
nightcats-panel--hazard
nightcats-panel--sorcery
nightcats-stats
nightcats-tags
nightcats-panel-grid
nightcats-panel-grid--two
nightcats-panel-image-top
nightcats-frame right for responsive image behavior in the CSS

Nightcats Example Markup

<div class="codex-page codex-page--nightcats">
<div class="nightcats-panel nightcats-panel--beast">
<div class="nightcats-panel-image-top">
[[File:Tiger.jpg|380px]]
</div>
<div class="nightcats-panel-title">Tiger</div>
A silent killer of the green dark.
</div>
</div>

Five Fists / Burning Temple Skin

Canonical Wrapper

<div class="codex-page codex-page--ffbt">
...
</div>

Canonical Nav

<div class="codex-navbox codex-navbox--ffbt">
<strong class="codex-nav-title">Burning Temple Codex</strong>
...
</div>

Example

Burning Temple Example

Master’s Saying

Patience is also a weapon.

Disciplined Style

Style Box

Use this for schools, techniques, or doctrine summaries.

Master Iron Crane
Agility d8, Smarts d6, Spirit d8, Strength d6, Vigor d8

Tiger Style

Relentless, fierce, direct.

Crane Style

Precise, elegant, evasive.

Maneuver	Effect
Throw	Put the foe on the ground

Martial Discipline

FFBT-Specific Classes

ffbt-header
ffbt-callout
ffbt-seal
ffbt-stylebox
ffbt-statblock
ffbt-divider
ffbt-quote
ffbt-grid
ffbt-card
ffbt-quicklinks
ffbt-table
ffbt-tag

FFBT Example Markup

<div class="codex-page codex-page--ffbt">
<div class="ffbt-callout">
<strong>Master’s Saying</strong>
Patience is also a weapon.
</div>

<div class="ffbt-grid">
<div class="ffbt-card">Tiger</div>
<div class="ffbt-card">Crane</div>
</div>
</div>

Sigil Lands Skin

Canonical Wrapper

<div class="codex-page codex-page--sigil">
...
</div>

Canonical Nav

<div class="codex-navbox codex-navbox--sigil">
<strong class="codex-nav-title">Sigil Lands Codex</strong>
...
</div>

Example

Sigil Lands Example

A skin for chronicles, lore essays, and older-world material.

This wrapper is suited to historical or reflective setting text.

Realm	Condition
Angharais	Enduring
Vorghol	Shrouded

Sigil Notes

The Sigil skin uses fewer custom component classes than the other subsites. The important styles are the wrapper, nav, and the canonical codex-subtitle and codex-nav-title hooks.

Stormbringer Skin

Canonical Wrapper

<div class="codex-page codex-page--stormbringer">
...
</div>

Canonical Nav

<div class="codex-navbox codex-navbox--stormbringer">
<strong class="codex-nav-title">Stormbringer Codex</strong>
...
</div>

Legacy nav aliases still supported in CSS:

stormbringer-nav
codex-nav--stormbringer

Example

Stormbringer Example

A world of dying empires and bargains best left unmade.

Storm Panel
Use this for sidebars, lore capsules, or boxed rules.

Chaos Callout
Use this for uncanny, mutating, or destabilizing material.

Doom Callout
Use this for prophecy, corruption, price, or fatal consequence.

Power	Cost
Sorcery	Corruption

Stormbringer-Specific Classes

storm-subtitle
storm-panel
storm-callout-chaos
storm-callout-doom
storm-nav-title
thumbcaption is also styled within this skin

Stormbringer Example Markup

<div class="codex-page codex-page--stormbringer">
<div class="storm-subtitle">A dying age.</div>

<div class="storm-panel">
Lore text.
</div>

<div class="storm-callout-doom">
All victories are temporary.
</div>
</div>

Hawkmoon Skin

Canonical Wrapper

<div class="codex-page codex-page--hawkmoon">
...
</div>

Canonical Nav

<div class="codex-navbox codex-navbox--hawkmoon">
<strong class="codex-nav-title">Hawkmoon Codex</strong>
...
</div>

Legacy aliases still supported:

hawkmoon-theme
hawkmoon-navbox

<div class="hawkmoon-banner">
[[File:HawkmoonBanner.jpg|900px]]
</div>

Example

Hawkmoon Example

This is the lead paragraph styling for Hawkmoon pages.

Granbretan At A Glance

Dark science, ruin, masks, and empire.

GM Note
Use this for campaign guidance, ominous secrets, or behind-the-screen material.

The Tragic Millenium is ash, iron, and old cruelty.

Hawkmoon-Specific Classes

hawkmoon-banner
hawkmoon-banner-image
hawkmoon-panel
hawkmoon-panel-title
hawkmoon-gm
hawkmoon-lead
hawkmoon-smallcaps
hawkmoon-nav-title

Hawkmoon Example Markup

<div class="codex-page codex-page--hawkmoon">
<p class="hawkmoon-lead">Opening paragraph.</p>

<div class="hawkmoon-panel">
<div class="hawkmoon-panel-title">Forbidden Science</div>
Panel text.
</div>

<div class="hawkmoon-gm">
GM-only note.
</div>
</div>

Apes Skin

Canonical Wrapper

<div class="codex-page codex-page--apes">
...
</div>

Canonical Nav

<div class="codex-navbox codex-navbox--apes">
<strong class="codex-nav-title">Apes Codex</strong>
...
</div>

Example

Age Of The Covenant Example

A parchment-and-bronze historical adventure skin.

Field Note

The Covenant remains uneasy even in peace.

This skin also defines a decorative drop cap class for opening paragraphs.

Apes-Specific Classes

apes-subtitle
apes-divider
apes-callout
apes-callout-title
apes-dropcap
apes-nav-title
career-portrait appears in responsive rules tied to this section

Apes Example Markup

<div class="codex-page codex-page--apes">
<div class="apes-subtitle">A doubtful peace.</div>

<div class="apes-callout">
<div class="apes-callout-title">Field Note</div>
Callout text.
</div>

<hr class="apes-divider">

<p><span class="apes-dropcap">T</span>he bridge still stands.</p>
</div>

Legacy Alias Summary

These legacy names are still supported and are worth knowing when reading older pages:

Subsite	Canonical Pattern	Legacy Names Still Supported
Nightcats	`codex-page codex-page--nightcats`, `codex-navbox codex-navbox--nightcats`, `codex-panel`	`nightcats-panel`, `nightcats-panel-title`, related Nightcats panel classes
Burning Temple	`codex-page codex-page--ffbt`, `codex-navbox codex-navbox--ffbt`, `codex-callout`, `codex-grid`, `codex-card`	`ffbt-callout`, `ffbt-grid`, `ffbt-card`, `ffbt-stylebox`
Sigil Lands	`codex-page codex-page--sigil`, `codex-navbox codex-navbox--sigil`	none of major importance beyond standard wrapper usage
Stormbringer	`codex-page codex-page--stormbringer`, `codex-navbox codex-navbox--stormbringer`, `codex-callout--chaos`, `codex-callout--doom`	`storm-subtitle`, `storm-panel`, `storm-callout-chaos`, `storm-callout-doom`, `stormbringer-nav`, `codex-nav--stormbringer`
Hawkmoon	`codex-page codex-page--hawkmoon`, `codex-navbox codex-navbox--hawkmoon`, `codex-callout--gm`, `codex-lead`, `codex-smallcaps`	`hawkmoon-theme`, `hawkmoon-navbox`, `hawkmoon-panel`, `hawkmoon-gm`, `hawkmoon-lead`
Apes	`codex-page codex-page--apes`, `codex-navbox codex-navbox--apes`, `codex-callout`, `codex-divider`	`apes-subtitle`, `apes-callout`, `apes-callout-title`, `apes-divider`

Quick Lookup

Shared

codex-banner
codex-page
codex-navbox
codex-nav-title
codex-subtitle
codex-panel
codex-panel-title
codex-callout
codex-callout-title
codex-lead
codex-smallcaps
codex-grid
codex-card
codex-divider

Nightcats

codex-page--nightcats
codex-navbox--nightcats
nightcats-panel
nightcats-stats
nightcats-tags

Burning Temple

codex-page--ffbt
codex-navbox--ffbt
ffbt-callout
ffbt-seal
ffbt-stylebox
ffbt-statblock
ffbt-grid
ffbt-card
ffbt-table
ffbt-tag

Sigil Lands

codex-page--sigil
codex-navbox--sigil

Stormbringer

codex-page--stormbringer
codex-navbox--stormbringer
storm-subtitle
storm-panel
storm-callout-chaos
storm-callout-doom
storm-nav-title

Hawkmoon

codex-page--hawkmoon
codex-navbox--hawkmoon
hawkmoon-banner
hawkmoon-panel
hawkmoon-gm
hawkmoon-lead
hawkmoon-smallcaps
hawkmoon-nav-title

Apes

codex-page--apes
codex-navbox--apes
apes-subtitle
apes-divider
apes-callout
apes-callout-title
apes-dropcap
apes-nav-title