/**
* Monster HQ design tokens.
*
* THE @font-face BELOW IS LOAD-BEARING.
* PAGKAKI is a custom font uploaded through Divi (wp-content/uploads/et-fonts).
* Divi only emits its @font-face on pages where a Divi module explicitly picks
* that font from its own font list — and Divi's list does not contain it in a
* form our loop modules can select. So on the Cast page the family resolved
* correctly in CSS and still rendered as Helvetica, because the face was never
* declared. Declaring it here, once, everywhere, is what actually makes the
* brand face appear. The URL is Divi's own upload path; if the font is ever
* re-uploaded, update this src.
*
* One place for the type and colour every front-end surface shares — the
* performer dashboard, the events list, the cast grid, the bookings block and
* the public event page. Before this, each stylesheet made its own decisions
* and the pages drifted apart; anything that wants to look like the rest of the
* site now reads from here.
*
* Body copy was set at 14px in a mid grey on black, which measured fine and was
* genuinely hard to read. It is now 16px/600 Poppins at a contrast that holds up
* on a dark background.
*/
/* SHIPPED WITH THE PLUGIN, NOT UPLOADED ALONGSIDE IT.
*
* These used to point at /wp-content/uploads/et-fonts/, Divi's font upload
* directory. Two of the three files were not there. The server answered both
* the .woff2 and the .woff with its 404 page -- 332KB of HTML each, fetched on
* every uncached page load, discarded as not-a-font, and quietly fallen
* through to the .otf. Two thirds of a megabyte per visitor to end up on the
* slowest of the three formats.
*
* It looked fine from the outside, which is why it lasted: the face DID render,
* because the .otf was real. Only the Health check noticed.
*
* The font now lives in this plugin, next to this stylesheet. It is versioned
* with the plugin, it cannot be tidied out of an uploads folder by somebody
* cleaning up, and the path is relative so it is same-origin on every domain
* this site is served from -- which is the other thing that broke here once,
* when an absolute URL to the server's own directory name failed CORS and the
* browser discarded the font while the computed styles still said PAGKAKI.
*
* woff2 first: every browser this site supports takes it, and it is the
* smallest. woff second for anything that does not. The .otf is shipped too,
* for anybody who needs to install the face rather than serve it, and is
* deliberately NOT in the src list -- a 77KB desktop font is not a fallback
* worth downloading when the two web formats already cover everything.
*/
@font-face {
font-family: "PAGKAKI";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/pagkaki.woff2") format("woff2"),
url("../fonts/pagkaki.woff") format("woff");
}
/* Divi's own name for the same face. Declared as well, so a rule written
against either spelling resolves rather than silently falling back to
Helvetica. Same two files: the browser downloads one of them once. */
@font-face {
font-family: "PAGKAKI Regular";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/pagkaki.woff2") format("woff2"),
url("../fonts/pagkaki.woff") format("woff");
}
:root {
/* Type */
--mpr-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* The brand display face. Loaded by the theme as an @font-face named
exactly "PAGKAKI Regular" — the name has to match that declaration
character for character or the browser silently falls back to Helvetica. */
--mpr-font-display: "PAGKAKI", "PAGKAKI Regular", Helvetica, Arial, Lucida, sans-serif;
--mpr-font-size: 16px;
/*
* PAGKAKI's own line box is unusually tall -- ascender and descender
* together run to roughly 2 times the font size -- so a "normal" 1.x
* line-height leaves a page title sitting in a visibly larger box than
* the letters that fill it. Measured live on the homepage hero, the one
* H1 on the site that already looked right: 82px type set at 65px line
* height, a .79 ratio. Rounded to a value worth naming.
*/
--mpr-h1-line-height: 0.8;
/* How wide a Monster HQ page runs.
Kept equal to --mpr-event-width (public.css) on purpose, so a profile
page, the directory, the Showtime screen and an event page all read as
one site rather than four. Raised from 1080 to 1200 after a detailed
review of the profile page called 1080 too narrow for what a profile
page actually carries per row -- a portrait beside a name, two columns
of story and reference material, a three-across related-Monsters grid.
The problem was never the caps INSIDE it: a form capped again at 720
inside this container put the fields down the left third of an empty
row. Those are gone; this stays put. */
--mpr-page-width: 1200px;
--mpr-font-weight: 600;
/*
* Running prose is NOT 600.
*
* --mpr-font-weight is a UI weight: labels, table headers, meta lines, the
* short strings a Monster HQ screen is made of, where 600 reads as
* deliberate. It was also being applied to body paragraphs on the public
* sales pages, so every paragraph of every experience page was set semibold
* -- measured at 600 on the live Dirty Demon page. A full column of semibold
* reads as shouting and is harder to scan, which is the opposite of what a
* sell sheet needs.
*
* A separate token rather than changing the one above, because the admin
* depends on 600 and this stylesheet is loaded there too.
*/
--mpr-prose-weight: 400;
/*
* ── One type scale ───────────────────────────────────────────────────────
*
* Measured on a phone, one profile page was using eight sizes to do the
* work of three: 11.52, 14.08, 14.72, 15.2, 16, 16.64, 17 and 17.92px. Two
* of those sat inside the SAME card. None of it was decided -- it is what
* you get when every block picks its own rem value and they all land near
* each other, and it reads as sloppiness long before anybody can say why.
*
* Five steps, and everything picks one:
* --mpr-t-title the title of a card: a show, a related act
* --mpr-t-lede a tagline, an intro, the line that carries a section
* --mpr-t-body prose and the value half of a fact
* --mpr-t-small supporting text, list items inside a card, utilities
* --mpr-t-label a small-caps label on a fact or a field
*/
--mpr-t-title: 1.15rem;
--mpr-t-lede: 1.05rem;
--mpr-t-body: 1rem;
--mpr-t-small: .88rem;
--mpr-t-label: .7rem;
--mpr-line-height: 1.25;
/* Colour — tuned for the dark theme these pages actually live on */
--mpr-text: #F2F2F2; /* body copy: near-white, not pure white */
--mpr-text-muted: #C4C4C4; /* secondary: still comfortably readable */
--mpr-accent: #ED2124;
--mpr-surface: #000000;
/* No drawn lines on the public site (Michael, 2026-09-27): anything that
used this for a hairline now draws nothing; shade and space separate. */
--mpr-line: transparent;
--mpr-fill: #101010;
}
/* Every Monster HQ front-end surface. Scoped to our own containers so the rest
of the site is untouched.
The directory containers are on this list too. They were not, and the theme
was setting them instead -- which happened to be Poppins, so it looked fine
until it would not have. A surface that means to be Poppins should say so. */
.mpr-dashboard,
.mpr-ev-list,
.mpr-cast-grid,
.mpr-bookings-block,
.mpr-event,
.mpr-claim,
.mp-monster,
.mp-directory,
.mp-roster-index {
font-family: var(--mpr-font-body);
font-size: var(--mpr-font-size);
font-weight: var(--mpr-font-weight);
line-height: var(--mpr-line-height);
color: var(--mpr-text);
}
/* Paragraphs and secondary text inherit the same scale rather than shrinking
away — the "faint and small" problem was these two rules disagreeing.
*
* ── The weight, though, is prose weight ──────────────────────────────────
*
* --mpr-prose-weight was added the last time this came up, with the note
* "Running prose is NOT 600" — and then applied to the sales pages only. This
* rule kept the UI weight, so every paragraph of every public event page was
* semibold: measured at 600 on the live Cabaret of Wicked Wonders page, six
* paragraphs deep, which reads as shouting and is harder to scan.
*
* A container can stay 600 — it is inherited by labels and meta lines that
* want it. A is a sentence somebody reads. Those are different jobs and
* this rule was giving them the same answer.
*/
.mpr-dashboard p,
.mpr-bookings-block p,
.mpr-event p {
font-size: var(--mpr-font-size);
font-weight: var(--mpr-prose-weight);
line-height: var(--mpr-line-height);
color: var(--mpr-text);
}
/*
* The Monster profile page has the identical bug and was missing from the
* rule above: .mp-monster carries the 600 UI weight as a container (below),
* and nothing ever brought its
s or
s back down to prose weight, so
* the biography, the "available to book" card and every plain list on the
* page rendered semibold -- reported as "all the text is bold in the
* content." Weight only, not the rest of that rule's properties -- this
* page already sets its own font-size per element through the --mpr-t-*
* scale, and folding font-size/line-height/color in here would outrank
* those on specificity and undo them.
*/
.mp-monster p,
.mp-monster li {
font-weight: var(--mpr-prose-weight);
}
.mpr-dashboard .description,
.mpr-section-intro,
.mpr-booking-meta,
.mpr-cast-tagline,
.mpr-ev-desc,
.mpr-ev-location,
.mpr-ev-datetime {
color: var(--mpr-text-muted);
opacity: 1; /* opacity was doing the fading; colour does it deliberately now */
}
/* Form controls should read as the same family, not the browser default. */
.mpr-dashboard input,
.mpr-dashboard select,
.mpr-dashboard textarea,
.mpr-claim input {
font-family: var(--mpr-font-body);
font-size: var(--mpr-font-size);
line-height: var(--mpr-line-height);
}
.mpr-dashboard label {
color: var(--mpr-text);
}
/* ─── No tracking on the public site ──────────────────────────────────────
Every heading, label and eyebrow across these surfaces sets its own spacing
to zero, which only holds for the rules we wrote. This says it once for the
containers themselves, so a theme or module rule that tracks its text out
cannot reintroduce it inside one of our pages.
Deliberately not !important and deliberately on the container: anything that
genuinely wants tracking can still ask for it on its own element. */
.mp-monster,
.mp-monster *,
.mp-directory,
.mp-directory *,
.mpr-dashboard,
.mpr-dashboard *,
.mpr-ev-list,
.mpr-ev-list *,
.mpr-cast-grid,
.mpr-cast-grid *,
.mpr-bookings-block,
.mpr-bookings-block *,
.mpr-event,
.mpr-event *,
.mpr-claim,
.mpr-claim *,
.mpd-single-profile,
.mpr-roster-archive,
.mpr-roster-archive * {
letter-spacing: 0;
}
/* ─── Every H1 on the site ────────────────────────────────────────────────
One rule rather than a list of page-by-page exceptions. A page title is a
page title wherever it appears, and the brand face is the whole point of
having one.
Scoped away from the admin bar and the builder's own chrome — those are
interface, not content, and a display face there is unreadable at 12px. */
body:not(.wp-admin) h1,
h1.entry-title,
.et_pb_title_container h1,
.et_pb_heading h1,
.et_pb_text h1,
.et_pb_module h1 {
font-family: var(--mpr-font-display) !important;
color: #FFFFFF !important;
letter-spacing: 0;
/*
* One line-height for every PAGKAKI H1, sitewide -- see --mpr-h1-line-
* height above. !important because Divi's own per-page typography
* settings (a bare 1em default, a 0.8em global-typography rule, and on
* some templates an ID-rooted #main-content rule at 1.4em) render as
* plain declarations, not !important ones, so this is what actually
* wins the cascade rather than just winning specificity on paper.
*/
line-height: var(--mpr-h1-line-height) !important;
}
/* The Theme Builder's own title module wins the first round.
*
* Divi prints its per-module CSS AFTER plugin stylesheets and uses !important
* on the colour, so an equally specific !important from us loses on source
* order alone — which is why every Divi-rendered page title (the Gallery page,
* Culture, Experiences) rendered in the accent red while our own templates were
* correctly white. Two classes plus the element outrank it regardless of order. */
body:not(.wp-admin) .et_pb_title_container h1.entry-title,
body:not(.wp-admin) .et_pb_post_title h1.entry-title,
body:not(.wp-admin) .et_pb_title_container h1,
body:not(.wp-admin) article h1.entry-title,
body:not(.wp-admin) .et-l h1.entry-title {
color: #FFFFFF !important;
font-family: var(--mpr-font-display) !important;
}
/* Interface chrome keeps the system face. */
#wpadminbar h1,
.et-fb-settings-options h1,
.et-l--header h1 a,
#et-boc h1 img {
font-family: inherit !important;
}
/* ─── Display type ────────────────────────────────────────────────────────
Page titles and performer names carry the brand face, in white. Applied
from one place so the Cast page, event pages and the dashboard cannot
disagree about what a name looks like. */
.mpr-dashboard h1,
.mpr-ev-list h1,
.mpr-cast-grid h1,
.mpr-bookings-block h1,
.mpr-event h1,
.mpr-claim h1,
.mpr-event-title,
.mpr-section-title {
font-family: var(--mpr-font-display);
color: #FFFFFF;
}
/* Performer names, wherever they appear publicly: the cast grid, the cast
block on an event page, and the Divi Event Cast module. */
.mpr-cast-title,
.mpr-cast-name,
.mpr-cast-member .mpr-cast-name,
/* The Cast page renders through Divi's Loop Builder, so the performer name is
a divi/heading carrying this class rather than one of our own elements. Divi
will not set the family itself: PAGKAKI is a theme @font-face, not a font in
Divi's library, so its font picker never enqueues it and silently falls back.
Setting it here is the reliable route. */
.mpr-cast-title h1, .mpr-cast-title h2, .mpr-cast-title h3,
.mpr-cast-title h4, .mpr-cast-title .et_pb_heading_container,
.mpr-page-title h1, .mpr-page-title .et_pb_heading_container {
font-family: var(--mpr-font-display) !important;
color: #FFFFFF !important;
letter-spacing: 0;
}
/* ─── Monster profile pages ───────────────────────────────────────────────
The profile template is rendered by the profile plugin (.mpd-* markup), and
its stylesheet loads AFTER this one and uses !important. Single-class
selectors here therefore lost every colour argument while quietly winning
the font-family one — which is exactly the half-applied look on the page:
the right face in the wrong colour.
So these are deliberately written against the .mpd-* classes at two-class
specificity. Nothing subtler survives the cascade. */
.mpd-single-profile .mpd-intro h1,
.single-monster .et_pb_title_container h1 {
font-family: var(--mpr-font-display) !important;
color: #FFFFFF !important;
font-weight: 400 !important;
line-height: var(--mpr-h1-line-height) !important;
margin-top: 10px !important;
letter-spacing: 0;
}
/* The tagline: its own line, with clearance, and readable rather than hairline. */
.mpd-single-profile .mpd-eyebrow {
font-family: var(--mpr-font-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
letter-spacing: 0;
text-transform: uppercase;
color: var(--mpr-text-muted) !important;
margin: 0 0 14px !important;
}
.mpd-single-profile h2,
.mpd-single-profile h3,
.mpd-single-profile .mpd-creature-file h2,
.mpd-single-profile .mpd-creature-file h3 {
font-family: var(--mpr-font-body) !important;
color: var(--mpr-accent) !important;
text-transform: uppercase;
font-weight: 700 !important;
letter-spacing: 0;
}
/* Body copy was rendering at weight 100 — a hairline grey on black, which is
the "cannot read" complaint. 600 at 16/1.25 is the site body setting. */
.mpd-single-profile .mpd-bio,
.mpd-single-profile .mpd-bio p,
.mpd-single-profile .mpd-bio li,
.mpd-single-profile .mpd-creature-file li,
.mpd-single-profile .mpd-creature-file p,
.single-monster .entry-content p,
.single-monster .et_pb_text_inner p {
font-family: var(--mpr-font-body) !important;
font-size: var(--mpr-font-size) !important;
font-weight: var(--mpr-prose-weight) !important;
line-height: 1.6 !important;
color: var(--mpr-text) !important;
/*
* Divi puts padding-bottom: 1em on every paragraph, which lands on top of
* the margin rather than replacing it. Measured on the live page: 20px
* margin + 16px padding = 36px between paragraphs, near enough double
* spacing. The margin is the one this stylesheet controls, so the padding
* goes and the margin stays.
*/
padding-bottom: 0 !important;
}
/* 1.25 is right for headings and tight UI; at 16px across a full column of
prose it sets the lines touching, so the bio gets the reading measure. */
.mpd-single-profile .mpd-bio p {
margin: 0 0 20px !important;
}
.mpd-single-profile .mpd-bio p:last-child {
margin-bottom: 0 !important;
}
/* The hero left a hand's width of nothing between the name and the bio. */
.mpd-single-profile .mpd-hero {
margin-bottom: 40px !important;
}
/* "CREATURE FILE" was set at 49px inside a 240px column, so the word ran out
through the side of its own panel. */
.mpd-single-profile .mpd-creature-file h2,
.mpd-single-profile .mpd-creature-file h3 {
font-size: 28px !important;
line-height: 1.1 !important;
margin: 0 0 20px !important;
overflow-wrap: anywhere;
}
/* ─── Roster archives ─────────────────────────────────────────────────────
/monsters/, /sideshows/ and every roster after them share one page shell,
so the archive and any page built from the shortcode are indistinguishable. */
.mpr-roster-archive {
background: var(--mpr-surface);
padding: 70px 0 90px;
}
.mpr-roster-inner {
max-width: var(--mpr-page-width, 1200px);
margin: 0 auto;
padding: 0 24px;
}
.mpr-roster-archive .mpr-page-title {
font-family: var(--mpr-font-display);
color: #FFFFFF;
font-size: 60px;
line-height: 1.05;
text-align: center;
margin: 0 0 48px;
}
@media (max-width: 640px) {
.mpr-roster-archive .mpr-page-title { font-size: 38px; }
}