/**
* Planet Mado — Battle-HUD site theme (Claude Design "Battle HUD" turn 4).
*
* Site-wide chrome (header / nav / footer) plus the character-page skin,
* layered OVER style.css as a pure re-skin: same DOM, same behavior — dark
* #08090b surfaces, #0c0e11 panels with 1px rgba-white borders, Barlow
* Condensed display type, IBM Plex Mono readouts, cyan #4fd6e8 / amber
* #f0a02a accents. The map's rendering is deliberately untouched.
*
* Lives on the ui-redesign branch — deleting this file (and its enqueue)
* restores the classic look wholesale.
*/
/* ── Design tokens + reusable HUD kit ───────────────────────────────────────
* The site-wide vocabulary. New pages should build from these classes and
* variables rather than copying values — the member page is being migrated
* onto them progressively.
*
* .pm-panel bordered dark panel .pm-panel-title Barlow heading
* .pm-kicker dim letterspaced label .pm-chip(-good/-bad/-amber)
* .pm-hud-kv label/value rows .pm-btn HUD block button
*/
:root {
--pm-bg: #08090b;
--pm-surface: #0a0c0f;
--pm-panel: #0c0e11;
--pm-line: rgba(255, 255, 255, .10);
--pm-line-soft: rgba(255, 255, 255, .05);
--pm-text: #e6edf2;
--pm-dim: rgba(230, 237, 242, .45);
--pm-faint: rgba(230, 237, 242, .4);
--pm-cyan: #4fd6e8;
--pm-cyan-bright: #9beef7;
--pm-cyan-line: rgba(79, 214, 232, .45);
--pm-amber: #f0a02a;
--pm-amber-soft: #f5d9a8;
--pm-green: #7ce8a4;
--pm-red: #f08a5a;
--pm-font-display: 'Barlow Condensed', sans-serif;
--pm-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
.pm-panel {
border: 1px solid var(--pm-line);
background: var(--pm-panel);
padding: 16px;
color: var(--pm-text);
font-family: var(--pm-font-mono);
}
.pm-panel-title {
font-family: var(--pm-font-display);
font-size: 21px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pm-text);
margin: 0 0 12px;
text-align: left;
}
.pm-kicker {
font-family: var(--pm-font-mono);
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--pm-faint);
}
.pm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 12px;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(230, 237, 242, .16);
border-radius: 0;
cursor: pointer;
font-family: var(--pm-font-display);
font-size: 18px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--pm-text);
transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.pm-btn:hover:not(:disabled) {
border-color: rgba(79, 214, 232, .6);
background: rgba(79, 214, 232, .08);
color: var(--pm-cyan-bright);
}
.pm-btn:disabled { opacity: .38; cursor: default; }
/* ── Interior "doc" pages (design turn 5: How to Play) ──────────────────────
* Every WP page gets the dark article frame: kicker + big Barlow title +
* meta row, sticky numbered TOC (js/page-doc.js, 3+ sections), numbered
* section headings, capped measure, amber callouts, framed figures. */
body:not(.single-member) {
background: var(--pm-bg);
color: var(--pm-text);
}
.site-main article.page,
.site-main article.post {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 34px 30px 40px;
box-sizing: border-box;
background: var(--pm-bg);
border: 1px solid var(--pm-line);
color: var(--pm-text);
font-family: var(--pm-font-mono);
}
.pm-doc-kicker {
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(230, 237, 242, .35);
}
.pm-doc-header .entry-title {
margin: 8px 0 0;
font-family: var(--pm-font-display);
font-size: clamp(38px, 5vw, 58px);
font-weight: 700;
letter-spacing: .02em;
line-height: 1.02;
text-transform: uppercase;
color: var(--pm-text);
max-width: 820px;
}
.pm-doc-meta {
display: flex;
flex-wrap: wrap;
gap: 26px;
margin-top: 20px;
padding-bottom: 22px;
border-bottom: 1px solid var(--pm-line);
font-size: 13px;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(230, 237, 242, .4);
}
.pm-doc-meta b { font-weight: 400; color: var(--pm-text); }
/* Layout: sticky index + article column (single column until JS confirms
* the page has enough sections). */
.pm-doc-layout { padding-top: 26px; }
.pm-doc-layout.pm-has-toc {
display: grid;
grid-template-columns: 212px minmax(0, 1fr);
gap: 38px;
align-items: start;
}
.pm-doc-toc {
position: sticky;
top: 16px;
display: flex;
flex-direction: column;
gap: 2px;
}
.pm-doc-toc-label {
font-size: 11.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(230, 237, 242, .35);
padding: 0 0 10px;
}
.pm-doc-toc-items { display: flex; flex-direction: column; gap: 2px; }
.pm-doc-toc-item {
display: block;
padding: 7px 11px;
border-left: 2px solid transparent;
font-size: 13.5px;
letter-spacing: .06em;
color: rgba(230, 237, 242, .5) !important;
text-decoration: none;
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.pm-doc-toc-item:hover { color: var(--pm-text) !important; border-left-color: rgba(79, 214, 232, .4); }
.pm-doc-toc-item.is-active {
border-left-color: var(--pm-cyan);
background: rgba(79, 214, 232, .09);
color: var(--pm-cyan-bright) !important;
}
@media (max-width: 1000px) {
.pm-doc-layout.pm-has-toc { display: block; }
.pm-doc-toc { position: static; margin-bottom: 24px; }
}
/* Page header with a featured image: image sits beside the title in the
* t7 frame (content-page.php reuses the .pm-post-fig kit). */
.pm-doc-headrow.has-fig {
display: grid;
grid-template-columns: minmax(0, 1fr) 440px;
gap: 34px;
align-items: start;
}
/* .pm-post-fig carries grid-area:fig from the post header — no such area
* exists in this grid (it would exile the figure to an implicit track), so
* pin both children to their columns explicitly. */
.pm-doc-headrow.has-fig .pm-doc-header {
grid-column: 1;
grid-row: 1;
min-width: 0;
}
.pm-doc-headrow.has-fig .pm-post-fig {
grid-area: auto;
grid-column: 2;
grid-row: 1;
}
@media (max-width: 1240px) {
.pm-doc-headrow.has-fig { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 900px) {
.pm-doc-headrow.has-fig { display: block; }
.pm-doc-headrow .pm-post-fig { margin-top: 14px; }
}
/* Article typography (pages + posts). */
.page-template-default .site-main article.page .entry-content,
.site-main article.post .entry-content {
max-width: 720px;
}
.site-main article.page .entry-content > p,
.site-main article.post .entry-content > p {
font-size: 15px;
line-height: 1.8;
color: #e6edf2;
max-width: 90ch;
text-wrap: pretty;
margin: 0 0 14px;
}
.site-main article.page .entry-content strong,
.site-main article.post .entry-content strong { color: var(--pm-cyan-bright); font-weight: 600; }
.site-main article.page .entry-content a,
.site-main article.post .entry-content a { color: var(--pm-cyan-bright); }
.site-main article.page .entry-content a:hover,
.site-main article.post .entry-content a:hover { color: #fff; }
/* Numbered section headings ("02 | HOW TO PLAY"). */
.site-main article.page .entry-content,
.site-main article.post .entry-content { counter-reset: pm-doc-section; }
.site-main article.page .entry-content h2,
.site-main article.post .entry-content h2 {
display: flex;
align-items: baseline;
gap: 12px;
margin: 34px 0 16px;
padding-bottom: 9px;
border-bottom: 1px solid var(--pm-line);
font-family: var(--pm-font-display);
font-size: 32px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--pm-text);
}
.site-main article.page .entry-content h2::before,
.site-main article.post .entry-content h2::before {
counter-increment: pm-doc-section;
content: counter(pm-doc-section, decimal-leading-zero);
font-family: var(--pm-font-mono);
font-size: 13px;
letter-spacing: .16em;
color: var(--pm-cyan);
flex: none;
}
.site-main article.page .entry-content h3,
.site-main article.post .entry-content h3 {
margin: 24px 0 10px;
font-family: var(--pm-font-display);
font-size: 22px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
.site-main article.page .entry-content ul,
.site-main article.page .entry-content ol,
.site-main article.post .entry-content ul,
.site-main article.post .entry-content ol {
font-size: 15px;
line-height: 1.8;
color: rgba(230, 237, 242, .75);
max-width: 64ch;
}
/* Tables: the race-table treatment — mono, hairline rows, dim uppercase
* headers, numeric last column right-aligned. */
.site-main article.page .entry-content table,
.site-main article.post .entry-content table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin: 0 0 18px;
}
.site-main article.page .entry-content th,
.site-main article.post .entry-content th {
text-align: left;
font-weight: 400;
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(230, 237, 242, .4);
padding: 8px 10px;
border-bottom: 1px solid var(--pm-line);
}
.site-main article.page .entry-content td,
.site-main article.post .entry-content td {
padding: 9px 10px;
border-bottom: 1px solid var(--pm-line-soft);
color: rgba(230, 237, 242, .75);
}
.site-main article.page .entry-content th:last-child,
.site-main article.page .entry-content td:last-child,
.site-main article.post .entry-content th:last-child,
.site-main article.post .entry-content td:last-child { text-align: right; }
/* Blockquotes become the amber gated/danger callout. */
.site-main article.page .entry-content blockquote,
.site-main article.post .entry-content blockquote {
margin: 0 0 16px;
border-left: 2px solid var(--pm-amber);
background: linear-gradient(90deg, rgba(240, 160, 42, .10), transparent);
padding: 12px 14px;
font-size: 14px;
line-height: 1.75;
color: rgba(245, 217, 168, .85);
max-width: 64ch;
}
.site-main article.page .entry-content blockquote p,
.site-main article.post .entry-content blockquote p { margin: 0; color: inherit; font-size: inherit; }
/* Quote block "Cyan Tip" style variant (register_block_style in
* inc/block-patterns.php): same callout shape, cyan = helpful/actionable
* instead of amber = gated/dangerous. */
.site-main article.page .entry-content blockquote.is-style-pm-tip,
.site-main article.post .entry-content blockquote.is-style-pm-tip {
border-left-color: var(--pm-cyan);
background: linear-gradient(90deg, rgba(79, 214, 232, .09), transparent);
color: rgba(230, 237, 242, .7);
}
.site-main article.page .entry-content blockquote.is-style-pm-tip strong,
.site-main article.post .entry-content blockquote.is-style-pm-tip strong { color: var(--pm-cyan-bright); }
/* ── Content pattern kit (inc/block-patterns.php) ───────────────────────────
* Classes behind the "Planet Mado HUD" block patterns, usable on any page
* or post. Built from core Group/Paragraph blocks, so the kit also resets
* the block-layout margins WP injects between children. */
/* Option card: numbered bordered row (design t5 fighting section).
* Variants: .is-cyan (actionable) / .is-amber (dangerous) / neutral. */
.pm-option-row {
display: flex;
gap: 14px;
align-items: flex-start;
border: 1px solid var(--pm-line);
padding: 13px 15px;
margin: 0 0 8px;
}
.pm-option-row.is-cyan {
border-color: rgba(79, 214, 232, .35);
background: rgba(79, 214, 232, .06);
}
.pm-option-row.is-amber {
border-color: rgba(240, 160, 42, .35);
background: rgba(240, 160, 42, .05);
}
.pm-option-row > *,
.pm-option-body > * { margin-block-start: 0; margin-block-end: 0; }
p.pm-option-num {
flex: none;
width: 26px;
margin: 0;
padding-top: 3px;
font-family: var(--pm-font-mono);
font-size: 12px;
letter-spacing: .14em;
color: rgba(230, 237, 242, .45);
}
.pm-option-row.is-cyan p.pm-option-num { color: var(--pm-cyan); }
.pm-option-row.is-amber p.pm-option-num { color: var(--pm-amber); }
.pm-option-body { flex: 1; min-width: 0; }
p.pm-option-title {
margin: 0;
font-family: var(--pm-font-display);
font-size: 20px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--pm-text);
max-width: none;
}
.pm-option-row.is-cyan p.pm-option-title { color: var(--pm-cyan-bright); }
.pm-option-row.is-amber p.pm-option-title { color: var(--pm-amber-soft); }
.pm-option-body p:not(.pm-option-title) {
margin: 5px 0 0;
font-size: 13.5px;
line-height: 1.7;
color: rgba(230, 237, 242, .6);
max-width: 58ch;
text-wrap: pretty;
}
.pm-option-row.is-amber .pm-option-body p:not(.pm-option-title) { color: rgba(245, 217, 168, .7); }
/* Change row: BUFF / NERF / FIX entries (design t7 patch notes).
* Variants: .is-buff (green) / .is-nerf (ember) / neutral. */
.pm-change-row {
display: flex;
gap: 14px;
align-items: flex-start;
border: 1px solid rgba(255, 255, 255, .12);
padding: 12px 14px;
margin: 0 0 7px;
}
.pm-change-row.is-buff {
border-color: rgba(124, 232, 164, .3);
background: rgba(124, 232, 164, .05);
}
.pm-change-row.is-nerf {
border-color: rgba(232, 99, 42, .3);
background: rgba(232, 99, 42, .04);
}
.pm-change-row > * { margin-block-start: 0; margin-block-end: 0; }
p.pm-change-label {
flex: none;
width: 52px;
margin: 0;
padding-top: 2px;
font-family: var(--pm-font-mono);
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(230, 237, 242, .45);
}
.pm-change-row.is-buff p.pm-change-label { color: var(--pm-green); }
.pm-change-row.is-nerf p.pm-change-label { color: var(--pm-red); }
.pm-change-row p:not(.pm-change-label) {
flex: 1;
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: rgba(230, 237, 242, .72);
max-width: none;
}
/* Images: framed inset "readout" panels. */
.page-template-default .site-main article.page .entry-content img {
display: block;
max-width: 100%;
height: auto;
border: 1px solid var(--pm-line);
background: var(--pm-surface);
padding: 8px;
box-sizing: border-box;
}
.site-main article.page .entry-content figcaption,
.site-main article.page .entry-content .wp-caption-text {
font-size: 12.5px;
line-height: 1.7;
letter-spacing: .06em;
color: rgba(230, 237, 242, .45);
text-align: left;
margin-top: 8px;
}
/* ── Global chrome ────────────────────────────────────────────────────────── */
.site-header {
background: #08090b;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header .top-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header .site-title,
.site-header .site-title a {
font-family: 'Barlow Condensed', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: .24em;
text-transform: uppercase;
color: #f0a02a;
text-decoration: none;
margin: 0;
}
.site-header .site-title a:hover { color: #f5d9a8; }
.site-header .site-description {
margin: 0;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(230, 237, 242, .4);
}
.site-header .main-navigation {
background: transparent;
}
.site-header .main-navigation a {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 13.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(230, 237, 242, .6);
text-decoration: none;
/* !important: style.css:1447 changes padding AND adds a border on hover
* (non-important) — locking the base padding stops the whole tab row
* shifting when any link is hovered. */
padding: 12px 0 !important;
border: none !important;
transition: color .15s ease, box-shadow .15s ease;
}
.site-header .main-navigation a:hover { color: #e6edf2; }
/* Active page marker: inset box-shadow, not a border — immune to the
* theme's hover border rules. */
.site-header .main-navigation .current-menu-item > a,
.site-header .main-navigation .current_page_item > a {
color: #9beef7;
box-shadow: inset 0 -2px 0 #4fd6e8;
}
.site-header #site-navigation {
padding: 0 24px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
/* The classic theme paints this bar orange — the design is dark. */
background: #08090b !important;
}
.site-header #site-navigation ul,
.site-header #site-navigation li,
.site-header #primary-menu,
.site-header #primary-menu li {
background: transparent !important;
background-color: transparent !important;
}
/* The menu container gets SOLID dark (not transparent): in sticky mode it
* position:fixes over page content and must not be see-through. */
.site-header #site-navigation > div,
.site-header .menu-top-container,
.menu-top-container.sticky {
background: #08090b !important;
}
/* Dropdown panels need ID-strength to beat the transparent ul rule above. */
.site-header #site-navigation ul ul {
background: #0c0e11 !important;
}
.site-header #primary-menu li.scroll-lg { display: none !important; }
/* Link + submenu states: dim mono at rest, cyan on hover/open; parents with
* children behave the same (their ▾ arrow inherits the color). Dropdown
* panels are dark HUD surfaces, never the classic orange/white. */
/* Hover: color shift only — never a border, and no padding jump (the theme's
* hover rule also changes padding, hence the !importants). */
.site-header .main-navigation a:hover,
.site-header .main-navigation li:hover > a,
.site-header .main-navigation li.focus > a {
color: #9beef7 !important;
background: transparent !important;
border: none !important;
}
/* ── Navigation rework (paired with js/navigation.js) ──────────────────────
* Desktop (≥901px): horizontal tabs; dropdowns are dark panels revealed on
* hover / focus-within / .sub-open (the injected chevron buttons cover
* touch + keyboard). Mobile (≤900px): the hamburger opens a stacked panel
* and submenus accordion via .sub-open. The legacy max-height reveal from
* style.css is disabled outright. */
.site-header .main-navigation li {
position: relative;
background: transparent !important;
}
/* Kill the theme's ▼ arrow. Desktop shows no submenu markers (hover
* reveals); the injected .pm-subnav-toggle chevron is a MOBILE control —
* hidden here, shown in the mobile block below. */
#site-navigation ul li.menu-item-has-children > a::after { content: none !important; }
.site-header .pm-subnav-toggle { display: none; }
/* Dropdown panels — the legacy max-height mechanism is dead. */
.site-header .main-navigation ul ul {
max-height: none !important;
overflow: visible !important;
display: block;
position: absolute !important;
top: 100%;
left: 0;
z-index: 99999;
min-width: 220px;
background: #0c0e11 !important;
border: none !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, .6);
padding: 4px 0;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s !important;
}
.site-header .main-navigation ul ul ul { top: 0; left: 100%; }
.site-header .main-navigation li:hover > ul,
.site-header .main-navigation li:focus-within > ul,
.site-header .main-navigation li.sub-open > ul {
opacity: 1;
visibility: visible;
transform: none;
}
.site-header .main-navigation ul ul li {
background: transparent !important;
border: none;
width: 100%;
}
.site-header .main-navigation ul ul a {
display: block;
flex: 1;
width: auto !important;
padding: 10px 14px !important;
border-bottom: none !important;
font-size: 13px;
color: rgba(230, 237, 242, .65) !important;
}
.site-header .main-navigation ul ul a:hover,
.site-header .main-navigation ul ul li:hover > a,
.site-header .main-navigation ul ul li.focus > a {
color: #9beef7 !important;
background: rgba(79, 214, 232, .08) !important;
border: none !important;
}
/* Hamburger button: HUD block, hidden on desktop. */
.site-header #site-navigation .menu-toggle {
display: none !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 8px 0;
padding: 0;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(230, 237, 242, .16);
border-radius: 0;
color: #e6edf2;
cursor: pointer;
}
.site-header #site-navigation .menu-toggle:hover { border-color: rgba(79, 214, 232, .6); color: #9beef7; }
.site-header #site-navigation .menu-toggle svg { width: 22px; height: 22px; }
.site-header #site-navigation .menu-icon-times { display: none; }
.site-header #site-navigation.toggled .menu-icon-times { display: block; }
.site-header #site-navigation.toggled .menu-icon-bars { display: none; }
/* Desktop: always-visible horizontal tabs. */
@media (min-width: 901px) {
.site-header #site-navigation ul.nav-menu {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 28px;
}
/* Submenu indicator: a chevron after any parent item's label so it's
* clear the item opens a dropdown. Same glyph as the mobile disclosure
* toggle (js/navigation.js). Points down at rest, flips up when the
* dropdown is open (hover / focus-within); nested side-flyout parents
* point right. Overrides the theme-arrow kill rule above by specificity. */
.site-header #site-navigation ul li.menu-item-has-children > a::after {
content: "" !important;
display: inline-block;
width: 10px;
height: 7px;
margin-left: 7px;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
opacity: .55;
transition: transform .18s ease, opacity .15s ease;
}
.site-header #site-navigation li.menu-item-has-children:hover > a::after,
.site-header #site-navigation li.menu-item-has-children:focus-within > a::after,
.site-header #site-navigation li.menu-item-has-children.sub-open > a::after {
opacity: 1;
transform: rotate(180deg);
}
/* Nested submenu parents open to the side — chevron points right. */
.site-header #site-navigation ul ul li.menu-item-has-children > a::after {
transform: rotate(-90deg);
}
.site-header #site-navigation ul ul li.menu-item-has-children:hover > a::after,
.site-header #site-navigation ul ul li.menu-item-has-children:focus-within > a::after {
transform: rotate(-90deg);
opacity: 1;
}
}
/* Mobile: rebuilt from scratch. The theme's header is two OVERLAPPING
* position:fixed bars (branding z-9 over nav z-8) — on mobile that whole
* scheme goes away: the header becomes two normal-flow rows (logo row with
* the hamburger top-right, then the slide-down menu panel). */
@media (max-width: 900px) {
.site-header { position: relative; background: #08090b; }
/* Row 1: branding back into normal flow, logo visible left. */
.site-header .top-header {
position: static !important;
display: flex !important;
align-items: center;
justify-content: flex-start;
max-width: none;
margin: 0 !important;
padding: 10px 64px 10px 12px; /* right space = hamburger's seat */
}
/* Row 2: the nav — normal flow under the branding row. */
.site-header #site-navigation {
position: static !important;
width: 100%;
margin: 0;
padding: 0;
box-shadow: none;
float: none !important;
}
.site-header #site-navigation > div,
.site-header .menu-top-container {
width: 100%;
max-height: none;
overflow: visible;
}
/* Hamburger: pinned top-right of the header, in line with the logo. */
.site-header #site-navigation .menu-toggle {
display: inline-flex !important;
position: absolute !important;
top: 10px;
right: 12px;
z-index: 20;
margin: 0;
}
/* The panel: closed by default, full-width stacked rows when toggled.
* !important throughout — the legacy `.main-navigation.toggled ul
* { display:block }` matches SUBMENUS too and was blowing them all open. */
.site-header #site-navigation ul.nav-menu { display: none !important; }
.site-header #site-navigation.toggled ul.nav-menu {
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0 12px 10px;
background: #08090b !important;
border-top: 1px solid rgba(255, 255, 255, .08);
}
/* Parent rows split: link (navigates) + chevron disclosure button
* (toggles). The chevron is the visible "has a submenu" indicator. */
.site-header .main-navigation .nav-menu > li {
border-bottom: 1px solid rgba(255, 255, 255, .06);
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.site-header .main-navigation .nav-menu > li:last-child { border-bottom: none; }
.site-header .main-navigation .nav-menu > li > a {
flex: 1;
min-width: 0;
display: block;
padding: 14px 4px !important;
font-size: 15px;
}
.site-header .pm-subnav-toggle {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex: none;
cursor: pointer;
color: rgba(230, 237, 242, .45);
border-left: 1px solid rgba(255, 255, 255, .06);
transition: color .15s ease;
}
.site-header .pm-subnav-toggle svg { transition: transform .18s ease; }
.site-header .pm-subnav-toggle:focus-visible { outline: 1px solid rgba(79, 214, 232, .6); }
/* Open state: parent + chevron go cyan, chevron flips. */
.site-header .main-navigation li.sub-open > a { color: #9beef7 !important; }
.site-header .main-navigation li.sub-open > .pm-subnav-toggle { color: #9beef7; }
.site-header .main-navigation li.sub-open > .pm-subnav-toggle svg { transform: rotate(180deg); }
/* Submenu panel: clearly differentiated — inset, cyan-tinted, own left
* rule; closed unless .sub-open (chevron toggles both ways). */
.site-header .main-navigation ul ul {
display: none !important;
position: static !important;
flex-basis: 100%;
width: 100%;
min-width: 0;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
background: rgba(79, 214, 232, .05) !important;
border: none !important;
border-left: 2px solid rgba(79, 214, 232, .5) !important;
margin: 0 0 12px;
padding: 4px 0 4px 14px;
transition: none !important;
}
.site-header .main-navigation li.sub-open > ul { display: block !important; }
.site-header .main-navigation ul ul li {
border: none;
border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.site-header .main-navigation ul ul li:last-child { border-bottom: none; }
.site-header .main-navigation ul ul a {
padding: 12px 4px !important;
font-size: 14px;
}
}
.site-header #site-navigation ul { gap: 28px; }
.site-header .menu-toggle { color: #e6edf2; background: transparent; border: 1px solid rgba(255, 255, 255, .14); }
.site-footer {
background: #08090b;
border-top: 1px solid rgba(255, 255, 255, .08);
color: rgba(230, 237, 242, .3);
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
}
.site-footer a { color: rgba(230, 237, 242, .5); text-decoration: none; }
.site-footer a:hover { color: #9beef7; }
/* ── Character page ───────────────────────────────────────────────────────── */
body.single-member {
background: #08090b;
color: #e6edf2;
}
/* Content width: the classic theme grids `main` to 8 of 12 columns with a
* 4-column sidebar — the design is a full-width 1180px frame. The member
* page takes all 12 columns; the sidebar falls below the content. */
/* The 12-col grid rules live outside the repo (Customizer CSS), so these
* overrides are deliberately heavy-handed: whatever the container is, the
* member page content takes the full track and centers at ~1220px. */
@media screen and (min-width: 47.5em) {
body.single-member main#primary {
grid-column: 1 / -1 !important;
grid-row: auto !important;
width: 100% !important;
max-width: none !important;
}
body.single-member aside {
grid-column: 1 / -1 !important;
grid-row: auto !important;
}
}
body.single-member .page.single-member {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 26px 24px 30px;
box-sizing: border-box;
}
/* The theme's article container is white — the design is one dark surface.
* This is the single highest-impact rule on the page. */
body.single-member .page.single-member,
body.single-member .site-main,
body.single-member .entry-content.member {
background: #08090b;
color: #e6edf2;
}
body.single-member .page.single-member {
border: 1px solid rgba(255, 255, 255, .10);
}
.single-member .entry-content.member {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
/* style.css:1708 caps .entry-content at 47em/96% with overflow:hidden —
* the design is a ~1180px frame. The article provides the frame; the
* content fills it. overflow:visible so absolutely-positioned map UI
* (movement pill) and tooltips aren't clipped. */
max-width: none;
width: 100%;
margin: 0;
padding-top: 0;
padding-bottom: 0;
/* clip (not hidden): stops fixed-width children (map tiles etc.) forcing
* horizontal page scroll WITHOUT becoming a scroll container. Vertical
* stays visible; tooltips are unaffected (they portal to ). */
overflow-x: clip;
overflow-y: visible;
}
/* Panel headings sit left in the design — the templates center them inline,
* so this needs the hammer. */
.single-member .member .stats-area .flex-col h3,
.single-member .member .stats-area .flex-col h4 {
text-align: left !important;
}
/* Main grid (design 4a): character strip spans the top, map + chat left
* (660fr), portrait/PL/info/quests right. Grid AREAS place the strip first
* even though member-stats renders after member-map in source order.
* Everything not assigned to a column (Items, Jobs, Description, Misc,
* bases, hidden modal templates) falls full-width below. */
.pm-hud-maingrid {
display: grid;
grid-template-columns: minmax(0, 660fr) minmax(0, 400fr);
grid-template-areas: "head head" "left right";
gap: 18px;
align-items: start;
}
.pm-hud-maingrid > .pm-hud-left { grid-area: left; min-width: 0; }
.pm-hud-maingrid > .pm-hud-right {
grid-area: right;
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.pm-hud-maingrid > .pm-hud-charhead { grid-area: head; margin-bottom: 0; }
.pm-hud-maingrid > *:not(.pm-hud-left):not(.pm-hud-right):not(.pm-hud-charhead) {
grid-column: 1 / -1;
}
@media (max-width: 1100px) {
.pm-hud-maingrid {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "head" "left" "right";
}
}
/* Character header strip (design 4a): kicker + big name left, stat strip right. */
.pm-hud-charhead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
border-bottom: 1px solid rgba(255, 255, 255, .10);
padding-bottom: 14px;
margin-bottom: 18px;
}
.pm-hud-kicker {
font-size: 12px;
letter-spacing: .18em;
color: rgba(230, 237, 242, .4);
}
.pm-hud-charname {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(38px, 5vw, 56px);
font-weight: 700;
letter-spacing: .04em;
line-height: 1;
text-transform: uppercase;
}
.pm-hud-statstrip { display: flex; gap: 34px; font-size: 13px; letter-spacing: .1em; }
/* Only the LABEL spans stack — value markup (e.g. the known-moves count
* spans inside ABILITIES) stays inline. */
.pm-hud-statstrip > div > span { display: block; color: rgba(230, 237, 242, .4); }
.pm-hud-statstrip b { display: block; margin-top: 5px; font-weight: 400; white-space: nowrap; }
.pm-hud-statstrip b span {
display: inline !important;
font-size: inherit !important;
color: inherit;
letter-spacing: inherit;
}
.pm-hud-statstrip .pm-hud-cyan { color: #4fd6e8; }
/* The strip replaces the old entry title's role — hide the duplicate name. */
.single-member .entry-header { display: none; }
/* Big Barlow name header, like the design's "MAJIN" title block. */
.single-member .entry-header .entry-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(36px, 5vw, 56px);
font-weight: 700;
letter-spacing: .04em;
line-height: 1;
text-transform: uppercase;
color: #e6edf2;
border-bottom: 1px solid rgba(255, 255, 255, .10);
padding-bottom: 14px;
}
/* Cards: the cut-corner ::before shape becomes a sharp HUD panel. */
.single-member .member .stats-area .flex-col,
.single-member .stats-card {
color: #e6edf2;
}
.single-member .member .stats-area .flex-col::before,
.single-member .stats-card::before {
clip-path: none;
background-color: #0c0e11;
border: 1px solid rgba(255, 255, 255, .10);
}
/* Panel headings: Barlow Condensed section titles. */
.single-member .member .stats-area .flex-col h2,
.single-member .member .stats-area .flex-col h3,
.single-member .member .stats-area .flex-col h4 {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #e6edf2;
}
.single-member .member .stats-area .flex-col h3 { font-size: 21px; }
/* Body copy + stat rows: mono readouts, dim labels. */
.single-member .member .stats-area .flex-col p,
.single-member .member .stats-area .flex-col li,
.single-member .member .stats-area .flex-col span {
font-size: 14px;
}
.single-member .member .stats-area .flex-col strong {
color: rgba(230, 237, 242, .45);
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
font-size: 13px;
}
.single-member .member a { color: #9beef7; }
.single-member .member a:hover { color: #4fd6e8; }
/* Selects + inputs inside the page follow the HUD data-row look. */
.single-member .member select,
.single-member .member input[type="text"],
.single-member .member input[type="number"],
.single-member .member textarea {
background: #0c0e11;
color: #e6edf2;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 0;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.single-member .member select:focus,
.single-member .member input:focus,
.single-member .member textarea:focus {
outline: none;
border-color: rgba(79, 214, 232, .6);
}
/* SVG-border action buttons: sharp HUD blocks (same treatment as the fight
* panel), replacing the cut-corner SVG everywhere on the page. */
.single-member .member .svg-border-button {
padding: 9px 12px;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(230, 237, 242, .16);
border-radius: 0;
transition: border-color .18s ease, background .18s ease;
}
.single-member .member .svg-border-button > svg { display: none; }
.single-member .member .svg-border-button,
.single-member .member .svg-border-button span {
font-family: 'Barlow Condensed', sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: #e6edf2;
}
.single-member .member .svg-border-button:hover:not(:disabled) {
border-color: rgba(79, 214, 232, .6);
background: rgba(79, 214, 232, .08);
color: #9beef7;
}
.single-member .member .svg-border-button:disabled { opacity: .38; }
/* Chat panel: mono lines, cyan player names (existing chat classes keep
* their colors; this darkens the shell). */
.single-member .member #local-chat,
.single-member .member .chat-area,
.single-member .member .chat-messages {
background: transparent;
color: rgba(230, 237, 242, .75);
}
/* Movement-energy bar (design 4a): bolt + segmented bar + countdown +
* NEXT ACTION, its own panel above the map. Duplicates the map pill's IDs
* (this bar is first in the DOM so the JS drives it); the pill itself is
* hidden below. Selectors carry the ID to out-rank dbz-rpg.css's
* #movement-indicator pill rules. */
.single-member .game-map .movement-status-compact { display: none !important; }
#movement-indicator.pm-hud-energybar {
display: flex;
align-items: center;
gap: 14px;
border: 1px solid rgba(255, 255, 255, .10);
background: #0c0e11;
padding: 12px 16px;
margin-bottom: 14px;
position: static;
}
#movement-indicator.pm-hud-energybar .movement-squares {
flex: 1 1 auto;
display: flex;
gap: 4px;
margin: 0;
max-width: none;
}
#movement-indicator.pm-hud-energybar .spirit-square {
flex: 1 1 0;
width: auto;
max-width: none;
aspect-ratio: auto;
height: 10px;
border: none;
border-radius: 0;
background: rgba(79, 214, 232, .14);
animation: none;
}
#movement-indicator.pm-hud-energybar .spirit-square::after {
inset: 0;
border-radius: 0;
background: #4fd6e8;
}
#movement-indicator.pm-hud-energybar .reset-timer {
flex: none;
margin: 0;
font-size: 14px;
letter-spacing: .06em;
color: #9beef7;
white-space: nowrap;
}
#movement-indicator.pm-hud-energybar .pm-hud-energylabel {
flex: none;
font-size: 12px;
letter-spacing: .1em;
color: rgba(230, 237, 242, .4);
white-space: nowrap;
}
/* Portrait + POWERLEVEL side by side (design 4a). */
.pm-hud-toprow { display: flex; gap: 14px; align-items: stretch; }
.pm-hud-toprow > .member-top {
width: 170px;
flex: none;
margin: 0;
padding: 0;
}
.pm-hud-toprow > .member-top .featured-image { padding: 0; }
.pm-hud-toprow > .member-top img {
border: 1px solid rgba(255, 255, 255, .12);
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.pm-hud-toprow > .pm-hud-plcard { flex: 1; min-width: 0; margin: 0; }
/* LOCATION panel (design 4a): frame + kicker header AROUND the map — the
* map rendering inside is deliberately untouched. */
.pm-hud-mappanel {
border: 1px solid rgba(255, 255, 255, .10);
background: #0a0c0f;
padding: 14px 14px 12px;
margin-bottom: 14px;
}
.pm-hud-panelhead {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(230, 237, 242, .4);
}
.pm-hud-panelhead-right { color: rgba(79, 214, 232, .7); letter-spacing: .12em; }
/* Local chat (design 4a): dark panel, Barlow title, cyan names, SEND block.
* Selectors target the existing chat markup — behavior untouched. */
.single-member .pm-hud-left .chat-container {
border: 1px solid rgba(255, 255, 255, .10);
background: #0c0e11;
padding: 16px;
}
.single-member .pm-hud-left .chat-container h3,
.single-member .pm-hud-left .chat-container h4 {
font-family: 'Barlow Condensed', sans-serif;
font-size: 21px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
text-align: left;
margin: 0 0 12px;
}
.single-member .pm-hud-left .chat-messages,
.single-member .pm-hud-left #chat-box {
background: transparent;
border: none;
font-size: 14px;
line-height: 1.6;
color: rgba(230, 237, 242, .75);
}
.single-member .pm-hud-left .chat-messages strong { color: #4fd6e8; }
.single-member .pm-hud-left .chat-messages .chat-time { color: rgba(230, 237, 242, .3); font-size: 12px; }
.single-member .pm-hud-left #chat-message,
.single-member .pm-hud-left .chat-input input[type="text"] {
background: #0c0e11;
border: 1px solid rgba(255, 255, 255, .14);
color: #e6edf2;
border-radius: 0;
padding: 11px 13px;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 14px;
}
.single-member .pm-hud-left #send-chat {
padding: 0;
border: 1px solid rgba(79, 214, 232, .5);
background: rgba(79, 214, 232, .12);
border-radius: 0;
font-family: 'Barlow Condensed', sans-serif;
font-size: 17px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #9beef7;
cursor: pointer;
}
.single-member .pm-hud-left #send-chat:hover { background: rgba(79, 214, 232, .22); }
/* Training messages read as terminal output — no light card backgrounds. */
.single-member #training-messages {
font-size: 14px;
line-height: 1.6;
color: rgba(230, 237, 242, .75);
}
.single-member #training-messages .training-message,
.single-member .training-message {
background: transparent !important;
color: inherit;
border: none;
box-shadow: none;
}
/* Stat chips (weighted clothing & friends) — design 4a's bordered tags. */
.pm-hud-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-chip {
display: inline-block;
padding: 5px 9px;
font-size: 13px !important;
letter-spacing: .04em;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, .18);
}
.pm-chip-good { border-color: rgba(124, 232, 164, .35); color: #7ce8a4; }
.pm-chip-bad { border-color: rgba(232, 99, 42, .35); color: #f08a5a; }
.pm-chip-good span, .pm-chip-bad span { font-size: inherit !important; color: inherit; }
/* Fighting Spirit: 4a's flat segmented bar — full-width, 7px amber segments.
* Scoped to .spirit-block so the map's movement-energy squares (also
* .spirit-square) keep their untouched rendering. */
.single-member .spirit-block { width: 100%; box-sizing: border-box; }
.single-member .spirit-block .spirit-squares { max-width: none; width: 100%; display: flex; gap: 3px; }
.single-member .spirit-block .spirit-square {
flex: 1 1 0;
max-width: none;
aspect-ratio: auto;
height: 7px;
border: none;
border-radius: 0;
background: rgba(240, 160, 42, .16);
}
.single-member .spirit-block .spirit-square::after { inset: 0; border-radius: 0; }
/* POWERLEVEL ring (design 4a): cyan arc on a faint track, Barlow % readout.
* Same SVG/classes the JS updates (pmUpdatePlCircle) — colors/type only. */
.single-member .member .background-circle { stroke: rgba(255, 255, 255, .08); }
.single-member .member .foreground-circle { stroke: #4fd6e8; }
.single-member .member .percentage-text {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
color: #9beef7;
}
/* Attacks & Abilities (design 4a): moves render as bordered chips grouped
* under dim mono category labels. The chips keep their accordion behavior —
* clicking still expands the detail block full-width below the chip row. */
.single-member #pm-player-attacks .flex-col { display: block; }
.single-member #pm-player-attacks .moves-container,
.single-member #pm-player-attacks .moves-column { display: contents; }
.single-member #pm-player-attacks h4.ability-category {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 400;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(230, 237, 242, .4);
margin: 16px 0 8px;
}
.single-member #pm-player-attacks h4.cat-abilities,
.single-member #pm-player-attacks h4.cat-ki-attacks { color: rgba(79, 214, 232, .7); }
.single-member #pm-player-attacks h4.cat-transformations { color: rgba(240, 160, 42, .75); }
.single-member #pm-player-attacks h4.cat-life-skills { color: rgba(124, 232, 164, .8); }
/* Martial Arts style sub-heading (Karate / Aikido / …): nested under the
* category label, cyan with a left rail; its belts flow as chips below. */
.single-member #pm-player-attacks h5.ma-style-heading {
font-family: 'IBM Plex Mono', ui-monospace, monospace;
font-size: 11.5px;
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(79, 214, 232, .7);
margin: 12px 0 8px;
padding-left: 10px;
border-left: 2px solid rgba(79, 214, 232, .35);
}
.single-member #pm-player-attacks h5.ma-style-heading .ability-count { color: rgba(230, 237, 242, .35); }
.single-member #pm-player-attacks .ma-style-belts { margin: 0 0 4px; }
/* Move chips: ONE consistent look for every category (per user — no cyan
* or amber variants). Clicking opens the details modal; the details div is
* only a hidden content source. */
.single-member #pm-player-attacks p.pm-move-chip {
display: inline-block;
border: 1px solid rgba(255, 255, 255, .12);
background: transparent;
padding: 9px 12px;
margin: 0 7px 7px 0;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.single-member #pm-player-attacks p.pm-move-chip strong {
color: #e6edf2;
font-weight: 400;
font-size: 14px;
letter-spacing: .04em;
text-transform: uppercase;
}
.single-member #pm-player-attacks p.pm-move-chip:hover {
border-color: #4fd6e8;
background: rgba(79, 214, 232, .06);
}
.single-member #pm-player-attacks p.pm-move-chip .flaticon {
font-size: 11px;
color: rgba(230, 237, 242, .35);
}
.single-member #pm-player-attacks .pm-move-details { display: none !important; }
/* Move details modal body. */
#pm-move-modal-body p { font-size: 14px; line-height: 1.7; }
#pm-move-modal-body em { color: rgba(230, 237, 242, .75); }
/* Key/value panels (Basic Info, Misc — design 4a's DESCRIPTION rows):
* label left, value right, hairline separators. Only direct children —
* nested blocks (spirit bar, chips) keep their own layout. */
.single-member .pm-hud-kv > p {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
border-bottom: 1px solid rgba(255, 255, 255, .05);
padding-bottom: 8px;
margin-bottom: 0;
}
.single-member .pm-hud-kv > p:last-child { border-bottom: none; padding-bottom: 0; }
.single-member .pm-hud-kv > .spirit-block,
.single-member .pm-hud-kv > .weighted-bonus {
border-bottom: 1px solid rgba(255, 255, 255, .05);
padding-bottom: 10px;
}
/* Active quests (design 4a): the map-group headers are the visible rows —
* bordered, cyan hover, amber variant when a quest is ready to turn in. */
.single-member #pm-active-quests h4 {
font-family: 'Barlow Condensed', sans-serif;
letter-spacing: .05em;
text-transform: uppercase;
}
.single-member #pm-active-quests .pm-quest-map-header {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(255, 255, 255, .10);
padding: 12px 13px;
margin: 0 0 7px;
font-size: 19px;
font-weight: 600;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.single-member #pm-active-quests .pm-quest-map-header .flaticon-right-chevron {
margin-left: auto;
color: rgba(230, 237, 242, .4);
}
.single-member #pm-active-quests .pm-quest-map-header:hover {
border-color: rgba(79, 214, 232, .6);
background: rgba(79, 214, 232, .06);
}
.single-member #pm-active-quests .pm-quest-map-header:has(.pm-quest-offer-indicator--turnin) {
border-color: rgba(240, 160, 42, .35);
background: rgba(240, 160, 42, .06);
color: #f5d9a8;
}
.single-member #pm-active-quests .pm-quest-map-header:has(.pm-quest-offer-indicator--turnin):hover {
border-color: #f0a02a;
background: rgba(240, 160, 42, .12);
}
/* Individual quest rows inside an expanded group get the same row chrome. */
.single-member #pm-active-quests .pm-active-quest {
border: 1px solid rgba(255, 255, 255, .10);
padding: 10px 12px;
margin-bottom: 7px;
transition: border-color .15s ease;
}
.single-member #pm-active-quests .pm-active-quest:hover { border-color: rgba(79, 214, 232, .5); }
.single-member #pm-active-quests .pm-active-quest.is-ready { border-color: rgba(240, 160, 42, .35); }
.single-member #pm-active-quests .pm-active-quest-list > li {
border: 1px solid rgba(255, 255, 255, .10);
padding: 12px 13px;
margin-bottom: 7px;
transition: border-color .15s ease, background .15s ease;
}
.single-member #pm-active-quests .pm-active-quest-list > li:hover {
border-color: rgba(79, 214, 232, .6);
background: rgba(79, 214, 232, .06);
}
/* Bottom band (design 4a): Attacks & Abilities left, Jobs/Description/Misc
* stacked right. Direct child of the main grid → spans both columns. */
.pm-hud-bottomgrid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.pm-hud-bottomleft { min-width: 0; }
.pm-hud-bottomright {
min-width: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
@media (max-width: 1100px) {
.pm-hud-bottomgrid { grid-template-columns: minmax(0, 1fr); }
}
/* Mobile bottom utility bar: character page · moon phase · logout snaps to
* the bottom edge, centered in two rows: icon-only character-page and
* login/logout side by side on top, the moon phase underneath. The
* quick-dock handle sits above at z-index 100000. */
@media (max-width: 900px) {
.site-header #top-header-navigation {
position: fixed !important;
left: 0;
right: 0;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
margin-left: auto;
margin-right: auto;
z-index: 90000;
background: #0a0c0f !important;
border-top: 1px solid rgba(255, 255, 255, .1) !important;
padding: 0 12px !important;
box-sizing: border-box;
}
.site-header #top-header-navigation ul {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
column-gap: 24px;
row-gap: 0;
}
/* Top row goes icon-only (font-size:0 hides the label text nodes;
* icons restored). */
.site-header #top-header-navigation a:not(:has(.moon-phase)) {
font-size: 0 !important;
padding: 10px 6px !important;
line-height: 0;
}
.site-header #top-header-navigation a .flaticon,
.site-header #top-header-navigation a .fas,
.site-header #top-header-navigation a i,
.site-header #top-header-navigation a svg {
font-size: 19px !important;
padding: 0;
}
.site-header #top-header-navigation a img { height: 17px; width: auto; }
/* Content never hides behind the (now two-row) bar. */
body { padding-bottom: 76px; }
}
/* ≤761px: the moon phase (the last menu item) drops to its own centered
* second row, leaving the two icon items side by side on the row above. The
* .moon-phase class is on the
itself (add_moon_phase_to_menu), so target
* it directly — flex-basis:100% forces the wrap in the ≤900 flex-wrap row. */
@media (max-width: 761px) {
.site-header #top-header-navigation li.moon-phase {
flex-basis: 100%;
display: flex;
justify-content: center;
padding-top: 4px;
}
}
/* Responsive touch-ups. */
/* The map grid is fixed-width tiles (rendering untouched) — on screens
* narrower than the grid, the LOCATION panel scrolls internally instead of
* stretching the page. */
.pm-hud-mappanel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) {
body.single-member .page.single-member { padding: 16px 10px 20px; }
.pm-hud-statstrip { gap: 18px; flex-wrap: wrap; }
.pm-hud-mappanel { padding: 10px 10px 8px; }
/* Stat cards: the 2rem side padding eats too much width on phones. */
.single-member .member .stats-area .flex-col,
.single-member .stats-card { padding: 1rem; }
/* Portrait + PL ring stack when the row can't fit both. */
.pm-hud-toprow { flex-wrap: wrap; }
.pm-hud-toprow > .member-top { width: 130px; }
/* Energy bar: segments drop to their own full-width line. */
#movement-indicator.pm-hud-energybar {
flex-wrap: wrap;
gap: 8px 12px;
padding: 10px 12px;
}
#movement-indicator.pm-hud-energybar .movement-squares {
flex-basis: 100%;
order: 5;
}
/* Chat input row never overflows. */
.single-member .pm-hud-left .chat-input { display: flex; gap: 8px; }
.single-member .pm-hud-left .chat-input input { min-width: 0; flex: 1; }
}
/* ── Top-right header menu (character page · moon phase · logout) ─────────
* Mockup: plain dim mono items at the very top right — the theme styles
* this as a fixed gray bottom bar (#272727 + border), all stripped here. */
.site-header #top-header-navigation {
position: static !important;
background: transparent !important;
border: none !important;
width: auto !important;
padding: 0 !important;
bottom: auto !important;
}
.site-header #top-header-navigation ul {
display: flex;
align-items: center;
gap: 26px;
margin: 0;
padding: 0;
list-style: none;
background: transparent !important;
}
.site-header #top-header-navigation li {
background: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0;
padding: 0;
}
.site-header #top-header-navigation a,
.site-header #top-header-navigation .moon-phase,
.site-header #top-header-navigation li > span {
font-family: var(--pm-font-mono) !important;
font-size: 13px !important;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(230, 237, 242, .5) !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
text-decoration: none;
}
.site-header #top-header-navigation a:hover { color: #e6edf2 !important; }
.site-header #top-header-navigation img { vertical-align: middle; }
.site-header #top-header-navigation .moon-phase { font-size: 12px !important; }
/* Mobile bottom bar (≤900): style.css puts .login/.logout at order:3, which
* would drop them BELOW the moon phase row — neutralize inside the bar so
* the icons stay side by side on the top row. (These sit after the base ul
* rules above because later-in-file wins at equal specificity.) */
@media (max-width: 900px) {
.site-header #top-header-navigation .logout,
.site-header #top-header-navigation .login {
order: 0;
}
}
@media (max-width: 759px) {
.site-header #top-header-navigation ul {
gap: 0;
padding: 0 1rem;
}
}
/* ── Header/nav alignment with the content frame ────────────────────────────
* Mockup: the brand row, top-right menu, and nav tabs share the SAME left
* edge as the page content (the centered 1400px frame + 24px padding). The
* header bars stay full-bleed; their content is inset to the frame. */
@media (min-width: 901px) {
.site-header .top-header {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
background: #08090b;
box-sizing: border-box;
padding: 10px max(24px, calc((100% - 1400px) / 2 + 24px)) !important;
}
.site-header #site-navigation { padding: 0 !important; }
.site-header #site-navigation > div,
.site-header .menu-top-container,
.site-header > nav > ul#primary-menu {
box-sizing: border-box;
padding-left: max(24px, calc((100% - 1400px) / 2 + 24px)) !important;
padding-right: max(24px, calc((100% - 1400px) / 2 + 24px)) !important;
}
}
/* ── Buttons, site-wide ─────────────────────────────────────────────────────
* Every .svg-border-button becomes the HUD block (same treatment as the
* fight panel): SVG cut-corner hidden, sharp 1px border, Barlow label,
* cyan hover. body-prefixed + !important to out-rank the per-context
* button rules scattered through style.css / dbz-rpg.css. */
body .svg-border-button {
position: relative;
padding: 9px 12px;
background: rgba(255, 255, 255, .03) !important;
border: 1px solid rgba(230, 237, 242, .16) !important;
border-radius: 0 !important;
box-shadow: none;
color: var(--pm-text) !important;
font-family: var(--pm-font-display);
font-size: 17px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
transition: border-color .18s ease, background .18s ease, color .18s ease;
}
body .svg-border-button > svg { display: none; }
body .svg-border-button span { font-family: inherit; color: inherit; }
body .svg-border-button:hover:not(:disabled) {
border-color: rgba(79, 214, 232, .6) !important;
background: rgba(79, 214, 232, .08) !important;
color: var(--pm-cyan-bright) !important;
}
body .svg-border-button:disabled { opacity: .38; cursor: default; }
/* The inventory modal's clip-path button variant returns to the standard block. */
#inventory-action-buttons .svg-border-button::before,
#inventory-action-buttons .svg-border-button::after { display: none !important; }
/* ── Modals, site-wide ──────────────────────────────────────────────────────
* All modal shells (player modal, item/pickup, scouter, IT targets, confirm,
* craft — they share these content classes) become dark HUD panels: no more
* white clip-path cards. */
body .main-player-modal-content,
body .pickup-modal-content,
body #inventory-modal .modal-content,
body #scouter-recordings-modal .modal-content,
body #scouter-confirm-modal .modal-content,
body #it-targets-modal .modal-content,
body .modal .modal-content {
background-color: var(--pm-panel) !important;
color: var(--pm-text) !important;
border: 1px solid var(--pm-cyan-line);
border-radius: 0;
clip-path: none !important;
box-shadow: 0 24px 64px rgba(0, 0, 0, .75);
font-family: var(--pm-font-mono);
}
body .main-player-modal-content h3,
body .pickup-modal-content h3,
body .modal .modal-content h3,
body .modal .modal-content h4,
body .main-player-modal-content h4 {
font-family: var(--pm-font-display);
font-size: 21px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pm-text) !important;
}
body .modal .modal-content p,
body .pickup-modal-content p { font-size: 14px; }
body .modal .modal-content strong,
body .pickup-modal-content strong {
color: var(--pm-dim);
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
font-size: 13px;
}
body .modal .modal-content input,
body .modal .modal-content select,
body .modal .modal-content textarea,
body .main-player-modal-content input,
body .main-player-modal-content select {
background: var(--pm-surface);
color: var(--pm-text);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 0;
font-family: var(--pm-font-mono);
}
/* The ✕ close buttons (span ids all end in -cancel). */
body .modal .modal-content span[id$="-cancel"],
body #main-player-modal-cancel {
color: var(--pm-dim);
transition: color .15s ease;
}
body .modal .modal-content span[id$="-cancel"]:hover,
body #main-player-modal-cancel:hover { color: var(--pm-cyan-bright); }
/* ── Section rhythm (design 4a) ─────────────────────────────────────────────
* The wrapper gaps ARE the spacing: 18px between grid cells / bottom stack,
* 14px inside the columns. The theme's clamp() margins on .stats-area were
* doubling up on top of them — killed here. */
.single-member .member .stats-area { margin-bottom: 0 !important; }
.single-member .pm-hud-left {
display: flex;
flex-direction: column;
gap: 14px;
}
.single-member .pm-hud-left > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.single-member .pm-hud-right > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.single-member .pm-hud-bottomright > * { margin-top: 0 !important; margin-bottom: 0 !important; }
/* ── Craft modal (own class family — pm-craft-modal) on the HUD skin ─────── */
body .pm-craft-modal-content {
background: var(--pm-panel) !important;
color: var(--pm-text) !important;
border: 1px solid var(--pm-cyan-line);
border-radius: 0;
clip-path: none !important;
box-shadow: 0 24px 64px rgba(0, 0, 0, .75);
font-family: var(--pm-font-mono);
}
body .pm-craft-modal-content h3,
body .pm-craft-modal-content h4 {
font-family: var(--pm-font-display);
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pm-text) !important;
}
body .pm-craft-modal-content input,
body .pm-craft-modal-content select {
background: var(--pm-surface);
color: var(--pm-text);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 0;
font-family: var(--pm-font-mono);
}
/* ── OS-style modal title bar ───────────────────────────────────────────────
* Like a desktop window: title pinned top-left, ✕ top-right, and a full-width
* cyan divider under the whole top strip. Applied when the modal has a
* direct-child title (:has-gated, so title-less dynamic modals keep
* their plain padding). */
/* The bar is STICKY, not absolute — modals scroll internally (max-height +
* overflow), and like an OS window the title strip and ✕ must stay pinned
* while the body scrolls beneath them. The content becomes a flex column so
* the title (order:-2) and the ✕ (order:-1, pulled up into the bar) lead
* the flow regardless of where the template put them in the DOM. */
body .modal .modal-content:has(> h3:first-of-type),
body .pickup-modal-content:has(> h3:first-of-type),
body .pm-craft-modal-content:has(> h3:first-of-type),
body .main-player-modal-content:has(> h3:first-of-type) {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0 20px 20px !important;
}
body .modal .modal-content > h3:first-of-type,
body .pickup-modal-content > h3:first-of-type,
body .pm-craft-modal-content > h3:first-of-type,
body .main-player-modal-content > h3:first-of-type {
order: -2;
flex: none;
position: sticky;
top: 0;
z-index: 5;
height: 46px;
margin: 0 -20px 16px !important;
padding: 0 52px 0 16px !important;
display: flex;
align-items: center;
text-align: left !important;
font-size: 18px !important;
letter-spacing: .1em;
/* Opaque — scrolled content must disappear under it, not show through. */
background: #101216;
border-bottom: 1px solid var(--pm-cyan-line);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Draggable title bar (js/modal-drag.js): grab the bar to move the window.
* touch-action:none so a touch-drag moves the modal instead of scrolling its
* body; user-select:none so the title text never highlights mid-drag. */
body .modal-content > h3:first-of-type,
body .main-player-modal-content > h3:first-of-type,
body .pickup-modal-content > h3:first-of-type,
body .pm-craft-modal-content > h3:first-of-type {
cursor: grab;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
body .pm-modal-dragging > h3:first-of-type { cursor: grabbing; }
/* The ✕ inside a title-bar modal: sticky beside the title, pinned with it. */
body .modal .modal-content:has(> h3:first-of-type) span[id$="-cancel"],
body .pickup-modal-content:has(> h3:first-of-type) span[id$="-cancel"],
body .pm-craft-modal-content:has(> h3:first-of-type) .pm-craft-modal-close,
body .main-player-modal-content:has(> h3:first-of-type) #main-player-modal-cancel {
order: -1;
position: sticky !important;
top: 9px !important;
right: auto !important;
align-self: flex-end;
flex: none;
margin: -53px -11px 25px 0 !important;
z-index: 6;
}
/* ── Consistent modal close button ──────────────────────────────────────────
* Every modal's ✕ becomes the same bordered app-style control, top-right —
* centered in the 46px title bar when one exists.
* !importants beat the inline styles the templates put on these spans. */
body .modal .modal-content span[id$="-cancel"],
body .pickup-modal-content span[id$="-cancel"],
body .pm-craft-modal-content .pm-craft-modal-close,
body #main-player-modal-cancel {
position: absolute !important;
top: 9px !important;
right: 9px !important;
width: 28px;
height: 28px;
z-index: 2; /* above the title-bar strip */
display: flex !important;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, .16);
background: rgba(255, 255, 255, .03);
color: var(--pm-dim) !important;
font-size: 17px !important;
line-height: 1 !important;
cursor: pointer;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
body .modal .modal-content span[id$="-cancel"]:hover,
body .pickup-modal-content span[id$="-cancel"]:hover,
body .pm-craft-modal-content .pm-craft-modal-close:hover,
body #main-player-modal-cancel:hover {
border-color: rgba(79, 214, 232, .6);
background: rgba(79, 214, 232, .12);
color: var(--pm-cyan-bright) !important;
}
/* Stance / Form chip picker (quick-dock; js/member-actions.js). Reuses the
* .pm-craft-modal shell; chips mirror the Attacks & Abilities move chips. */
#pm-picker-modal .pm-craft-modal-content { width: min(26rem, 92vw); }
#pm-picker-modal .pm-picker-group {
font-family: var(--pm-font-mono);
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(79, 214, 232, .7);
margin: 14px 0 8px;
padding-left: 10px;
border-left: 2px solid rgba(79, 214, 232, .35);
}
#pm-picker-modal .pm-picker-chips {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
#pm-picker-modal .pm-picker-chip {
all: unset;
box-sizing: border-box;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, .12);
background: transparent;
padding: 9px 12px;
font-family: var(--pm-font-mono);
font-size: 14px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--pm-text);
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
#pm-picker-modal .pm-picker-chip:hover {
border-color: var(--pm-cyan);
background: rgba(79, 214, 232, .06);
}
#pm-picker-modal .pm-picker-chip.is-active {
border-color: var(--pm-cyan);
background: rgba(79, 214, 232, .14);
color: var(--pm-cyan-bright);
}
/* Player-modal PL ring matches the page ring (cyan on faint track). */
body #main-player-modal-actions .background-circle { stroke: rgba(255, 255, 255, .08); }
body #main-player-modal-actions .foreground-circle { stroke: var(--pm-cyan); }
body #main-player-modal-actions .percentage-text {
color: var(--pm-cyan-bright);
font-family: var(--pm-font-display);
font-weight: 700;
}
/* ── Home page (design turn 6: 6a desktop / 6b mobile) ──────────────────────
* front-page.php. One 1180px framed column: hero (copy + screenshot cluster),
* live-server ticker, news + sidebar grid. Existing header/footer chrome
* untouched. Mobile (≤900px): stacked hero, swipe rails, sticky CTA sitting
* above the bottom utility bar. */
main.pm-home {
width: 100%;
/* Matches the header content and the character page frame (not the
* mockup's raw 1180 canvas). */
max-width: 1400px;
margin: 0 auto;
background: var(--pm-bg);
border: 1px solid var(--pm-line);
box-sizing: border-box;
color: var(--pm-text);
font-family: var(--pm-font-mono);
}
/* Hero */
.pm-home-hero {
position: relative;
padding: 44px 30px 38px;
border-bottom: 1px solid var(--pm-line);
overflow: hidden;
}
.pm-home-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(70% 90% at 78% 20%, rgba(79, 214, 232, .13), transparent 62%),
radial-gradient(60% 70% at 10% 90%, rgba(240, 160, 42, .09), transparent 65%);
}
.pm-home-hero::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px);
pointer-events: none;
}
.pm-home-hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 640px;
gap: 44px;
align-items: center;
}
.pm-home-badge {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(79, 214, 232, .4);
background: rgba(79, 214, 232, .08);
padding: 6px 11px;
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--pm-cyan-bright);
}
.pm-home-badge-dot {
width: 6px;
height: 6px;
background: var(--pm-green);
animation: pm-home-kipulse 2s infinite;
}
@keyframes pm-home-kipulse {
0%, 100% { opacity: .55; }
50% { opacity: 1; }
}
.pm-home-title {
margin: 16px 0 0;
font-family: var(--pm-font-display);
font-size: clamp(48px, 6.5vw, 78px);
font-weight: 700;
letter-spacing: .01em;
line-height: .96;
text-transform: uppercase;
text-align: left;
color: var(--pm-text);
}
.pm-home-lede {
margin: 18px 0 0;
max-width: 52ch;
font-size: 16px;
line-height: 1.8;
color: rgba(230, 237, 242, .7);
text-wrap: pretty;
}
.pm-home-ctas {
display: flex;
flex-wrap: wrap;
align-items: stretch; /* both buttons always the same height */
gap: 12px;
margin-top: 26px;
}
.pm-home-cta {
display: inline-flex;
align-items: center;
gap: 12px;
white-space: nowrap;
box-sizing: border-box;
padding: 15px 26px;
font-family: var(--pm-font-display);
font-size: 26px;
font-weight: 700;
letter-spacing: .08em;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
transition: background .18s ease, border-color .18s ease;
}
.pm-home-cta.is-primary {
border: 1px solid var(--pm-cyan);
background: rgba(79, 214, 232, .14);
color: var(--pm-cyan-bright);
}
.pm-home-cta.is-primary:hover {
background: rgba(79, 214, 232, .26);
color: var(--pm-cyan-bright);
}
.pm-home-cta.is-secondary {
border: 1px solid rgba(255, 255, 255, .16);
background: transparent;
padding: 15px 22px;
font-weight: 600;
color: rgba(230, 237, 242, .75);
}
.pm-home-cta.is-secondary:hover {
border-color: rgba(230, 237, 242, .5);
color: var(--pm-text);
}
.pm-home-stats {
display: flex;
gap: 34px;
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid var(--pm-line);
}
.pm-home-stat-num {
display: block;
font-family: var(--pm-font-display);
font-size: 32px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
.pm-home-stat-num.is-cyan { color: var(--pm-cyan-bright); }
.pm-home-stat-label {
display: block;
margin-top: 4px;
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pm-faint);
}
/* Screenshot cluster: one large map frame + two smaller beside it. */
.pm-home-shots {
display: grid;
grid-template-columns: minmax(0, 1fr) 172px;
gap: 10px;
min-width: 0;
}
.pm-home-shot {
position: relative;
margin: 0;
border: 1px solid rgba(255, 255, 255, .12);
background: var(--pm-surface);
background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 8px, transparent 8px 16px);
height: 146px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.pm-home-shot.is-map {
grid-column: 1 / -1;
height: 340px;
border-color: rgba(79, 214, 232, .28);
background-image: repeating-linear-gradient(135deg, rgba(79, 214, 232, .07) 0 8px, transparent 8px 16px);
}
.pm-home-shot.is-transform {
border-color: rgba(240, 160, 42, .28);
background-image: repeating-linear-gradient(135deg, rgba(240, 160, 42, .07) 0 8px, transparent 8px 16px);
}
/* Real captures fill the frame. WebP Express may wrap these in on
* full page loads — target both depths, never `>` the img directly. */
.pm-home-shot img,
.pm-home-shot picture img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pm-home-shot picture { position: absolute; inset: 0; }
.pm-home-shot-placeholder {
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(230, 237, 242, .35);
text-align: center;
padding: 0 10px;
}
.pm-home-shot-tag {
position: absolute;
left: 0;
bottom: 0;
background: rgba(5, 7, 10, .85);
padding: 6px 11px;
font-size: 11.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(230, 237, 242, .55);
}
.pm-home-shot-tag.is-cyan { color: rgba(155, 238, 247, .8); }
.pm-home-shot-tag.is-amber { color: rgba(245, 217, 168, .7); }
/* Live-server ticker strip */
.pm-home-ticker {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 13px 30px;
border-bottom: 1px solid var(--pm-line);
background: var(--pm-surface);
font-size: 12.5px;
letter-spacing: .12em;
text-transform: uppercase;
}
.pm-home-tick { color: var(--pm-faint); white-space: nowrap; }
.pm-home-tick b { font-weight: 500; color: var(--pm-text); }
.pm-home-tick b.is-amber { color: var(--pm-amber); }
.pm-home-tick b.is-green { color: var(--pm-green); }
/* News + sidebar grid */
.pm-home-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 34px;
padding: 30px 30px 40px;
align-items: start;
}
/* style.css:1068 has generic element rules (`aside { grid-column: span 4 }`
* + side padding) left over from a 12-col layout whose grid container no
* longer exists. Inside this real grid they exile the aside to its own
* full-width row and shrink the news column with phantom implicit tracks —
* pin both children back to normal auto-placement. */
.pm-home-grid > .pm-home-news {
grid-column: auto;
grid-row: auto;
min-width: 0;
}
aside.pm-home-side {
grid-column: auto;
grid-row: auto;
padding: 0;
}
.pm-home-news-head {
display: flex;
align-items: baseline;
justify-content: space-between;
border-bottom: 1px solid var(--pm-line);
padding-bottom: 10px;
margin-bottom: 16px;
}
.pm-home-news-head-left {
display: flex;
align-items: baseline;
gap: 12px;
}
.pm-home-news-title {
margin: 0;
font-family: var(--pm-font-display);
font-size: 32px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
text-align: left;
color: var(--pm-text);
}
.pm-home-news-sub {
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(230, 237, 242, .35);
}
.pm-home-news-all {
font-size: 13px;
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none;
color: var(--pm-cyan);
}
.pm-home-news-all:hover { color: var(--pm-cyan-bright); }
.pm-home-news-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.pm-home-news-empty { margin: 0; font-size: 14.5px; color: var(--pm-dim); }
.pm-home-news-item {
display: block;
border: 1px solid var(--pm-line);
background: var(--pm-panel);
padding: 18px 20px;
text-decoration: none;
color: var(--pm-text);
transition: border-color .18s ease;
}
.pm-home-news-item:hover { border-color: var(--pm-cyan); color: var(--pm-text); }
.pm-home-news-item.is-featured {
border-color: rgba(79, 214, 232, .35);
background: rgba(79, 214, 232, .05);
}
.pm-home-news-item.is-event {
border-color: rgba(240, 160, 42, .35);
background: rgba(240, 160, 42, .05);
}
.pm-home-news-item.is-event:hover { border-color: var(--pm-amber); }
.pm-home-news-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 9px;
}
.pm-home-news-chip {
border: 1px solid rgba(255, 255, 255, .16);
color: rgba(230, 237, 242, .6);
padding: 3px 8px;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
}
.pm-home-news-item.is-featured .pm-home-news-chip {
border-color: rgba(79, 214, 232, .5);
color: var(--pm-cyan-bright);
}
.pm-home-news-item.is-event .pm-home-news-chip {
border-color: rgba(240, 160, 42, .5);
color: var(--pm-amber-soft);
}
.pm-home-news-date {
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pm-faint);
}
.pm-home-news-new {
margin-left: auto;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pm-green);
}
.pm-home-news-item.is-event .pm-home-news-new { color: var(--pm-amber); }
.pm-home-news-headline {
display: block;
font-family: var(--pm-font-display);
font-size: 28px;
font-weight: 700;
letter-spacing: .03em;
line-height: 1.1;
text-transform: uppercase;
margin-bottom: 8px;
}
.pm-home-news-item.is-event .pm-home-news-headline { color: var(--pm-amber-soft); }
.pm-home-news-excerpt {
display: block;
font-size: 14.5px;
line-height: 1.8;
color: rgba(230, 237, 242, .65);
max-width: 70ch;
text-wrap: pretty;
}
.pm-home-news-item.is-event .pm-home-news-excerpt { color: rgba(245, 217, 168, .7); }
.pm-home-news-tags {
display: flex;
gap: 8px;
margin-top: 11px;
}
.pm-home-news-tag {
border: 1px solid rgba(255, 255, 255, .12);
padding: 4px 9px;
font-size: 12px;
text-transform: uppercase;
color: rgba(230, 237, 242, .55);
}
/* Sidebar */
.pm-home-side {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.pm-home-card {
border: 1px solid var(--pm-line);
background: var(--pm-panel);
padding: 18px;
}
.pm-home-card.is-start {
border-color: rgba(79, 214, 232, .35);
background: rgba(79, 214, 232, .07);
}
.pm-home-card-kicker {
font-size: 11.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(155, 238, 247, .7);
margin-bottom: 9px;
}
.pm-home-card-title {
font-family: var(--pm-font-display);
font-size: 26px;
font-weight: 700;
letter-spacing: .04em;
line-height: 1.1;
text-transform: uppercase;
color: var(--pm-cyan-bright);
margin-bottom: 9px;
}
.pm-home-card-text {
margin: 0 0 14px;
font-size: 13.5px;
line-height: 1.75;
color: rgba(230, 237, 242, .6);
text-wrap: pretty;
}
.pm-home-card-btn {
display: block;
border: 1px solid var(--pm-cyan);
background: rgba(79, 214, 232, .16);
padding: 12px;
text-align: center;
text-decoration: none;
font-family: var(--pm-font-display);
font-size: 21px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pm-cyan-bright);
transition: background .18s ease;
}
.pm-home-card-btn:hover { background: rgba(79, 214, 232, .3); color: var(--pm-cyan-bright); }
.pm-home-card-headrow {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 13px;
}
.pm-home-card-heading {
margin: 0 0 13px;
font-family: var(--pm-font-display);
font-size: 21px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
text-align: left;
color: var(--pm-text);
}
.pm-home-card-headrow .pm-home-card-heading { margin-bottom: 0; }
.pm-home-card-note {
font-size: 11.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(230, 237, 242, .35);
}
.pm-home-do {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 11px;
font-size: 13.5px;
line-height: 1.7;
color: rgba(230, 237, 242, .65);
}
.pm-home-do li { display: flex; gap: 11px; }
.pm-home-do li span:last-child { text-wrap: pretty; }
.pm-home-do-num { color: var(--pm-cyan); flex: none; }
/* Battle reports feed: latest pm_fight_log outcomes, names only — no
* powerlevels (in-world those need a scouter). */
.pm-home-feed {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
font-size: 13.5px;
}
.pm-home-feed li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--pm-line-soft);
padding-bottom: 8px;
}
.pm-home-feed li:last-child { border-bottom: none; padding-bottom: 0; }
.pm-home-feed-line {
min-width: 0;
text-transform: uppercase;
line-height: 1.6;
}
.pm-home-feed-line em {
font-style: normal;
text-transform: lowercase;
color: var(--pm-dim);
}
.pm-home-feed-time {
flex: none;
font-size: 11.5px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pm-faint);
}
.pm-home-feed-empty {
margin: 0;
font-size: 13.5px;
line-height: 1.7;
color: var(--pm-dim);
}
/* ── Single post page (design turn 7: 7a desktop / 7b mobile) ───────────────
* template-parts/content-post.php. Breadcrumbs, headline beside the featured
* image, byline strip, article + sticky meta rail (IN THIS POST scrollspy via
* js/page-doc.js, CTA card, related), author box, prev/next cards. Sidebar
* cards reuse the .pm-home-card kit. */
.site-main article.post.pm-post { padding: 0; }
.pm-post-crumbs {
padding: 16px 30px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pm-faint);
}
.pm-post-crumbs a {
color: inherit;
text-decoration: none;
background-image: none; /* opt out of the swipe-fill link animation */
}
.pm-post-crumbs a:hover { color: var(--pm-cyan-bright); }
.pm-post-crumbs .sep { opacity: .4; padding: 0 4px; }
.pm-post-crumbs .current { color: rgba(230, 237, 242, .7); }
/* Header zone: chips + headline + lede left, featured image right.
* Mobile flips to the 7b arrangement via grid areas. */
.pm-post-head {
display: grid;
grid-template-columns: minmax(0, 1fr) 440px;
grid-template-areas:
"chips fig"
"title fig"
"lede fig";
grid-template-rows: auto auto 1fr;
column-gap: 34px;
padding: 32px 30px 26px;
align-items: start;
}
.pm-post-chips {
grid-area: chips;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.pm-post-chip {
border: 1px solid rgba(255, 255, 255, .14);
color: rgba(230, 237, 242, .55);
padding: 4px 10px;
font-size: 11.5px;
letter-spacing: .16em;
text-transform: uppercase;
}
.pm-post-chip.is-cat {
border-color: rgba(79, 214, 232, .5);
background: rgba(79, 214, 232, .1);
color: var(--pm-cyan-bright);
}
.pm-post-new {
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pm-green);
}
.pm-post .entry-title {
grid-area: title;
margin: 16px 0 0;
font-family: var(--pm-font-display);
font-size: clamp(32px, 4.5vw, 56px);
font-weight: 700;
letter-spacing: .01em;
line-height: 1.02;
text-transform: uppercase;
text-align: left;
color: var(--pm-text);
}
.pm-post-lede {
grid-area: lede;
margin: 14px 0 0;
max-width: 52ch;
font-size: 16px;
line-height: 1.8;
color: rgba(230, 237, 242, .68);
text-wrap: pretty;
}
.pm-post-fig { grid-area: fig; margin: 0; min-width: 0; }
.pm-post-fig-frame {
position: relative;
border: 1px solid rgba(79, 214, 232, .25);
background: var(--pm-surface);
background-image: repeating-linear-gradient(135deg, rgba(79, 214, 232, .07) 0 8px, transparent 8px 16px);
height: 248px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* WebP Express may wrap the img in on full loads — cover both. */
.pm-post-fig-frame img,
.pm-post-fig-frame picture img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pm-post-fig-frame picture { position: absolute; inset: 0; }
.pm-post-fig-placeholder {
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(230, 237, 242, .35);
}
.pm-post-fig-tag {
position: absolute;
left: 0;
bottom: 0;
background: rgba(5, 7, 10, .85);
padding: 6px 11px;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(155, 238, 247, .8);
}
/* Byline strip */
.pm-post-byline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 22px;
margin: 0 30px;
padding: 16px 0;
border-top: 1px solid var(--pm-line);
border-bottom: 1px solid var(--pm-line);
}
.pm-post-by-author { display: flex; align-items: center; gap: 12px; }
.pm-post-by-avatar img {
display: block;
width: 44px;
height: 44px;
object-fit: cover;
border: 1px solid rgba(79, 214, 232, .4);
}
.pm-post-by-label {
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(230, 237, 242, .35);
}
.pm-post-by-name {
margin-top: 2px;
font-family: var(--pm-font-display);
font-size: 22px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
}
.pm-post-by-value {
margin-top: 5px;
font-size: 14px;
text-transform: uppercase;
color: rgba(230, 237, 242, .7);
}
.pm-post-by-value .dim { color: var(--pm-faint); }
.pm-post-by-sep { width: 1px; height: 38px; background: var(--pm-line); }
/* Article + sticky meta rail */
.pm-post-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 40px;
padding: 34px 30px 40px;
align-items: start;
}
.pm-post-main { max-width: 720px; min-width: 0; }
.pm-post-side {
position: sticky;
top: 16px;
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
/* Same style.css:1068 legacy-aside landmine as the homepage grid: pin the
* rail back to auto placement and kill the element rule's side padding. */
aside.pm-post-side {
grid-column: auto;
grid-row: auto;
padding: 0;
}
/* The TOC becomes an "IN THIS POST" card inside the rail (page-doc.js fills
* it and unhides at 3+ sections; scrollspy shared with interior pages). */
.pm-post-side .pm-doc-toc {
position: static;
border: 1px solid var(--pm-line);
background: var(--pm-panel);
padding: 16px;
}
.pm-post-side .pm-doc-toc-label { padding-bottom: 11px; }
/* Author box after the article */
.pm-post-authorbox {
border-top: 1px solid var(--pm-line);
margin-top: 30px;
padding-top: 22px;
display: flex;
align-items: center;
gap: 16px;
}
.pm-post-authorbox img {
display: block;
width: 56px;
height: 56px;
flex: none;
object-fit: cover;
border: 1px solid rgba(79, 214, 232, .4);
}
.pm-post-authorbox-body { flex: 1; min-width: 0; }
.pm-post-authorbox-name {
font-family: var(--pm-font-display);
font-size: 24px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
}
.pm-post-authorbox-bio {
margin: 5px 0 0;
font-size: 14px;
line-height: 1.7;
color: rgba(230, 237, 242, .55);
max-width: 62ch;
text-wrap: pretty;
}
.pm-post-authorbox-all {
font-size: 13px;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
background-image: none;
color: var(--pm-cyan);
}
.pm-post-authorbox-all:hover { color: var(--pm-cyan-bright); }
/* Prev / next cards */
.pm-post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 30px;
}
.pm-post-nav-card {
display: block;
border: 1px solid var(--pm-line);
background: var(--pm-panel);
padding: 16px;
text-decoration: none;
background-image: none;
color: var(--pm-text);
transition: border-color .18s ease;
}
.pm-post-nav-card:hover { border-color: var(--pm-cyan); color: var(--pm-text); }
.pm-post-nav-card.is-next { text-align: right; }
.pm-post-nav-label {
font-size: 11.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(230, 237, 242, .35);
margin-bottom: 9px;
}
.pm-post-nav-title {
font-family: var(--pm-font-display);
font-size: 21px;
font-weight: 600;
letter-spacing: .04em;
line-height: 1.2;
text-transform: uppercase;
}
.pm-post-nav-date {
margin-top: 7px;
font-size: 12px;
letter-spacing: .1em;
color: var(--pm-faint);
}
/* Related card rows */
.pm-post-rel { display: flex; flex-direction: column; }
.pm-post-rel a {
display: block;
padding: 11px 0 0;
margin-top: 11px;
border-top: 1px solid rgba(255, 255, 255, .06);
text-decoration: none;
background-image: none;
transition: opacity .15s ease;
}
.pm-post-rel a:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.pm-post-rel a:hover { opacity: .8; }
.pm-post-rel-cat {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(79, 214, 232, .7);
margin-bottom: 5px;
}
.pm-post-rel-cat.is-event { color: rgba(240, 160, 42, .75); }
.pm-post-rel-title {
font-size: 14px;
line-height: 1.5;
color: rgba(230, 237, 242, .75);
}
/* ── Comments (design t7): composer card + badge-tagged comment cards ─────── */
.pm-comments {
border-top: 1px solid var(--pm-line);
margin-top: 30px;
padding-top: 26px;
font-family: var(--pm-font-mono);
}
.pm-comments-head {
display: flex;
align-items: baseline;
gap: 12px;
border-bottom: 1px solid var(--pm-line);
padding-bottom: 10px;
margin-bottom: 18px;
}
.pm-comments-title {
margin: 0;
font-family: var(--pm-font-display);
font-size: 30px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
text-align: left;
color: var(--pm-text);
}
.pm-comments-count {
font-size: 13px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pm-faint);
}
/* Composer card (comment_form output). */
.pm-comments .comment-respond {
border: 1px solid rgba(79, 214, 232, .35);
background: rgba(79, 214, 232, .05);
padding: 18px;
margin-bottom: 22px;
}
.pm-comments .comment-reply-title {
margin: 0 0 12px;
font-family: var(--pm-font-display);
font-size: 21px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
text-align: left;
color: var(--pm-cyan-bright);
}
.pm-comments .comment-reply-title small { margin-left: 10px; }
.pm-comments .comment-reply-title small a {
font-family: var(--pm-font-mono);
font-size: 12px;
letter-spacing: .1em;
color: var(--pm-faint);
background-image: none;
text-decoration: none;
}
.pm-comments .comment-reply-title small a:hover { color: var(--pm-cyan-bright); }
.pm-comments .logged-in-as,
.pm-comments .comment-notes {
margin: 0 0 12px;
font-size: 12.5px;
letter-spacing: .06em;
color: rgba(230, 237, 242, .45);
}
.pm-comments .logged-in-as a,
.pm-comments .comment-notes a {
color: rgba(230, 237, 242, .6);
background-image: none;
}
.pm-comments .logged-in-as a:hover,
.pm-comments .comment-notes a:hover { color: var(--pm-cyan-bright); }
.pm-comments .comment-form label {
display: block;
margin-bottom: 5px;
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(230, 237, 242, .45);
}
.pm-comments .comment-form textarea,
.pm-comments .comment-form input[type="text"],
.pm-comments .comment-form input[type="email"],
.pm-comments .comment-form input[type="url"] {
width: 100%;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 0;
background: rgba(5, 7, 10, .5);
padding: 13px 14px;
font-family: var(--pm-font-mono);
font-size: 14.5px;
line-height: 1.7;
color: var(--pm-text);
}
.pm-comments .comment-form textarea { min-height: 88px; }
.pm-comments .comment-form textarea:focus,
.pm-comments .comment-form input:focus {
outline: none;
border-color: rgba(79, 214, 232, .6);
}
.pm-comments .comment-form-cookies-consent {
display: flex;
align-items: baseline;
gap: 8px;
}
.pm-comments .comment-form-cookies-consent label {
display: inline;
margin: 0;
text-transform: none;
letter-spacing: .04em;
}
.pm-comments .form-submit {
margin: 12px 0 0;
display: flex;
justify-content: flex-end;
}
.pm-comments .form-submit .submit {
border: 1px solid var(--pm-cyan);
border-radius: 0;
background: rgba(79, 214, 232, .16);
padding: 11px 22px;
cursor: pointer;
font-family: var(--pm-font-display);
font-size: 19px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pm-cyan-bright);
transition: background .18s ease;
}
.pm-comments .form-submit .submit:hover { background: rgba(79, 214, 232, .3); }
/* Thread: top-level comments as cards, replies on a cyan rail. */
.pm-comments .comment-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.pm-comments .comment-list > li {
border: 1px solid var(--pm-line);
background: var(--pm-panel);
padding: 16px 18px;
}
.pm-comments .comment-list > li.bymoderator {
border-color: rgba(240, 160, 42, .3);
background: rgba(240, 160, 42, .04);
}
.pm-comments .comment-body {
position: relative;
padding-left: 50px;
}
.pm-comments .comment-author .avatar {
position: absolute;
left: 0;
top: 0;
width: 38px;
height: 38px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 0;
object-fit: cover;
}
.pm-comments .bypostauthor > .comment-body .comment-author .avatar { border-color: rgba(79, 214, 232, .45); }
.pm-comments .bymoderator > .comment-body .comment-author .avatar { border-color: rgba(240, 160, 42, .4); }
.pm-comments .comment-meta {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.pm-comments .comment-author { display: flex; align-items: baseline; gap: 10px; }
.pm-comments .comment-author .fn {
font-family: var(--pm-font-display);
font-size: 21px;
font-weight: 600;
font-style: normal;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--pm-text);
}
.pm-comments .comment-author .fn a { color: inherit; background-image: none; text-decoration: none; }
.pm-comments .says { display: none; }
/* Role badges: MODERATOR (amber) unless the comment is the post author's
* (cyan AUTHOR wins — that rule comes later). */
.pm-comments .bymoderator > .comment-body .fn::after {
content: "Moderator";
margin-left: 10px;
vertical-align: 2px;
border: 1px solid rgba(240, 160, 42, .5);
color: var(--pm-amber-soft);
padding: 2px 6px;
font-family: var(--pm-font-mono);
font-size: 10px;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
}
.pm-comments .bymoderator > .comment-body .fn { color: var(--pm-amber-soft); }
.pm-comments .bypostauthor > .comment-body .fn { color: var(--pm-cyan-bright); }
.pm-comments .bypostauthor > .comment-body .fn::after {
content: "Author";
margin-left: 10px;
vertical-align: 2px;
border: 1px solid rgba(79, 214, 232, .5);
color: var(--pm-cyan-bright);
padding: 2px 6px;
font-family: var(--pm-font-mono);
font-size: 10px;
font-weight: 400;
letter-spacing: .12em;
text-transform: uppercase;
}
.pm-comments .comment-metadata {
font-size: 11.5px;
letter-spacing: .1em;
text-transform: uppercase;
}
.pm-comments .comment-metadata a {
color: rgba(230, 237, 242, .3);
background-image: none;
text-decoration: none;
}
.pm-comments .comment-metadata a:hover { color: var(--pm-cyan-bright); }
.pm-comments .comment-content {
margin-top: 9px;
font-size: 14.5px;
line-height: 1.8;
color: rgba(230, 237, 242, .75);
max-width: 66ch;
text-wrap: pretty;
}
.pm-comments .comment-content p { margin: 0 0 8px; font-size: inherit; color: inherit; }
.pm-comments .comment-content p:last-child { margin-bottom: 0; }
.pm-comments .bymoderator > .comment-body .comment-content { color: rgba(245, 217, 168, .8); }
.pm-comments .reply { margin-top: 11px; }
.pm-comments .reply .comment-reply-link {
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pm-faint);
background-image: none;
text-decoration: none;
}
.pm-comments .reply .comment-reply-link:hover { color: var(--pm-cyan-bright); }
.pm-comments .comment-awaiting-moderation {
display: block;
margin-top: 9px;
border: 1px dashed rgba(255, 255, 255, .14);
padding: 10px 14px;
font-size: 12px;
font-style: normal;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(230, 237, 242, .35);
}
/* Replies: indented on a cyan rail, plain (no card chrome), smaller. */
.pm-comments .comment-list .children {
list-style: none;
margin: 14px 0 0 50px;
padding: 0 0 0 16px;
border-left: 1px solid rgba(79, 214, 232, .25);
display: flex;
flex-direction: column;
gap: 14px;
}
.pm-comments .children .comment-body { padding-left: 44px; }
.pm-comments .children .comment-author .avatar { width: 32px; height: 32px; }
.pm-comments .children .comment-author .fn { font-size: 19px; }
.pm-comments .children .comment-content { font-size: 14px; max-width: 62ch; }
/* Pagination + closed note. */
.pm-comments .comment-navigation {
margin-top: 14px;
border: 1px solid rgba(255, 255, 255, .12);
padding: 13px;
transition: border-color .18s ease;
}
.pm-comments .comment-navigation:hover { border-color: var(--pm-cyan); }
.pm-comments .comment-navigation .nav-links {
display: flex;
justify-content: center;
gap: 24px;
}
.pm-comments .comment-navigation a {
font-family: var(--pm-font-display);
font-size: 19px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(230, 237, 242, .7);
background-image: none;
text-decoration: none;
}
.pm-comments .comment-navigation a:hover { color: var(--pm-cyan-bright); }
.pm-comments .no-comments {
margin: 14px 0 0;
font-size: 13.5px;
color: var(--pm-dim);
}
@media (max-width: 900px) {
.pm-comments .comment-list > li { padding: 13px 14px; }
.pm-comments .comment-list .children { margin-left: 14px; padding-left: 12px; }
.pm-comments .children .comment-body { padding-left: 42px; }
}
@media (max-width: 1240px) {
.pm-post-head { grid-template-columns: minmax(0, 1fr) 360px; }
.pm-post-fig-frame { height: 204px; }
}
/* Mobile (7b): image tucks beside the headline, byline wraps, rail stacks
* under the article with the TOC dropped. */
@media (max-width: 900px) {
.pm-post-crumbs { padding: 12px 14px; font-size: 11.5px; }
.pm-post-head {
grid-template-columns: minmax(0, 1fr) 132px;
grid-template-areas:
"chips chips"
"title fig"
"lede lede";
column-gap: 12px;
padding: 18px 14px 16px;
}
.pm-post .entry-title { margin-top: 13px; font-size: 32px; line-height: 1.04; }
.pm-post-fig { margin-top: 13px; }
.pm-post-fig-frame { height: 112px; }
.pm-post-fig-tag { display: none; }
.pm-post-lede { margin-top: 11px; font-size: 14.5px; }
.pm-post-byline { margin: 0 14px; gap: 14px; }
.pm-post-by-sep { display: none; }
.pm-post-grid {
grid-template-columns: minmax(0, 1fr);
gap: 26px;
padding: 20px 14px 26px;
}
.pm-post-side { position: static; }
.pm-post-side .pm-doc-toc { display: none !important; }
.pm-post-nav { grid-template-columns: 1fr; }
.pm-post-nav-card.is-next { text-align: left; }
}
/* Middle widths: shrink the screenshot column before stacking. */
@media (max-width: 1460px) {
.pm-home-hero-inner { grid-template-columns: minmax(0, 1fr) 560px; }
.pm-home-shot.is-map { height: 300px; }
.pm-home-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1240px) {
.pm-home-hero-inner { grid-template-columns: minmax(0, 1fr) 440px; gap: 30px; }
.pm-home-shot.is-map { height: 240px; }
}
@media (max-width: 1080px) {
.pm-home-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; }
}
/* Mobile (6b): everything stacks; screenshots + ticker become swipe rails;
* the primary CTA pins above the bottom utility bar. */
@media (max-width: 900px) {
.pm-home-hero { padding: 20px 14px 0; }
.pm-home-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
.pm-home-title { font-size: 48px; line-height: .98; }
.pm-home-lede { font-size: 14.5px; }
/* CTAs stack in place: CREATE/CONTINUE above HOW TO PLAY, full width. */
.pm-home-ctas { flex-direction: column; align-items: stretch; }
.pm-home-cta { justify-content: center; }
.pm-home-cta.is-primary { padding: 13px 18px; font-size: 23px; }
.pm-home-cta.is-secondary { padding: 12px 18px; font-size: 21px; }
.pm-home-stats { gap: 24px; margin-top: 18px; padding-top: 15px; }
.pm-home-stat-num { font-size: 26px; }
.pm-home-stat-label { font-size: 10.5px; letter-spacing: .12em; margin-top: 3px; }
.pm-home-shots {
display: flex;
gap: 9px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
scrollbar-width: none;
margin: 18px -14px 0;
padding: 0 14px 14px;
}
.pm-home-shots::-webkit-scrollbar { display: none; }
.pm-home-shot,
.pm-home-shot.is-map {
flex: none;
width: 260px;
height: 172px;
}
.pm-home-ticker {
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
scrollbar-width: none;
padding: 11px 14px;
font-size: 12px;
}
.pm-home-ticker::-webkit-scrollbar { display: none; }
.pm-home-grid {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
padding: 20px 14px 26px;
}
.pm-home-news-title { font-size: 26px; }
.pm-home-news-item { padding: 14px; }
.pm-home-news-headline { font-size: 23px; line-height: 1.15; }
.pm-home-news-excerpt { font-size: 13.5px; }
}