body.single-monster,
body.post-type-archive-monster,
body.single-monster #page-container,
body.post-type-archive-monster #page-container,
body.single-monster #main-content,
body.post-type-archive-monster #main-content,
.mpd-single-profile,
.mpd-profile-grid,
.mpd-archive {
background: var(--mpd-bg, #000000) !important;
color: var(--mpd-body, #ffffff) !important;
}
body.single-monster #main-content,
body.post-type-archive-monster #main-content {
min-height: 80vh;
}
.mpd-single-profile,
.mpd-archive {
max-width: 1120px;
margin: 0 auto;
padding: clamp(28px, 3.5vw, 52px) 24px clamp(56px, 7vw, 96px);
}
.mpd-hero {
display: grid;
grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
gap: clamp(22px, 3vw, 42px);
align-items: center;
margin-bottom: clamp(34px, 4vw, 54px);
}
.mpd-portrait {
max-width: 360px;
}
.mpd-portrait img,
.mpd-card-image img,
.mpd-gallery-item img {
display: block;
width: 100%;
height: auto;
}
.mpd-portrait img {
aspect-ratio: 1 / 1;
object-fit: cover;
border: 0;
background: #050505;
}
.mpd-eyebrow,
.mpd-tagline {
color: var(--mpd-headline, #b00020) !important;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 10px;
}
.mpd-single-profile h1,
.mpd-single-profile h2,
.mpd-archive h1,
.mpd-profile-card h3,
.mpd-profile-card h3 a,
.mpd-creature-file h2,
.mpd-gallery-wrap h2 {
color: var(--mpd-headline, #b00020) !important;
}
.mpd-single-profile h1 {
font-size: clamp(3.4rem, 6vw, 5.45rem);
line-height: 0.94;
letter-spacing: -0.028em;
font-weight: 900;
margin: 0 0 18px;
max-width: 720px;
}
.mpd-single-profile h2,
.mpd-archive h1,
.mpd-gallery-wrap h2,
.mpd-creature-file h2 {
font-size: clamp(2rem, 3vw, 3.05rem);
line-height: .95;
font-weight: 900;
margin: 0 0 24px;
}
.mpd-single-profile p,
.mpd-single-profile li,
.mpd-single-profile span,
.mpd-profile-card p,
.mpd-archive p,
.mpd-bio,
.mpd-bio p {
color: var(--mpd-body, #ffffff) !important;
}
.mpd-single-profile a,
.mpd-profile-grid a,
.mpd-archive a {
color: var(--mpd-link, #e0002a) !important;
text-decoration: none;
}
.mpd-single-profile a:hover,
.mpd-profile-grid a:hover,
.mpd-archive a:hover {
color: #ff304f !important;
}
.mpd-socials {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.mpd-socials a,
.mpd-threshold {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--mpd-body, #ffffff) !important;
padding: 9px 13px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0;
font-size: 0.76rem;
}
.mpd-socials a:hover,
.mpd-threshold:hover {
background: var(--mpd-headline, #b00020);
color: #ffffff !important;
}
.mpd-profile-content {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: clamp(26px, 4vw, 48px);
align-items: start;
margin-bottom: clamp(44px, 5vw, 72px);
}
.mpd-bio {
font-size: clamp(1.08rem, 1.16vw, 1.2rem);
line-height: 1.72;
max-width: 710px;
color: rgba(255, 255, 255, 0.9) !important;
}
.mpd-bio p {
margin: 0 0 1.15em;
} body.single-monster .mpd-bio,
body.single-monster .mpd-bio::before,
body.single-monster .mpd-bio::after {
background: transparent !important;
background-color: transparent !important;
min-height: 0 !important;
}
body.single-monster .mpd-bio:empty {
display: none !important;
}
body.single-monster .mpd-profile-content:has(.mpd-bio:empty) {
grid-template-columns: 1fr;
}
.mpd-creature-file {
background: var(--mpd-card, #080808) !important;
border: 0;
padding: clamp(22px, 2.4vw, 30px);
margin-top: 0;
box-shadow: none;
width: 100%;
}
.mpd-file-row {
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding: 14px 0;
}
.mpd-file-row:first-of-type {
border-top: 0;
}
.mpd-file-row span {
display: block;
color: rgba(255, 255, 255, 0.62) !important;
text-transform: uppercase;
letter-spacing: 0;
font-size: 0.72rem;
font-weight: 900;
margin-bottom: 4px;
}
.mpd-file-row strong {
color: var(--mpd-body, #ffffff) !important;
font-weight: 800;
}
.mpd-gallery-wrap {
clear: both;
}
.mpd-gallery-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
align-items: stretch;
}
.mpd-gallery-item {
display: block;
overflow: hidden;
background: #050505;
border: 0;
min-height: 0;
}
.mpd-gallery-item img {
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform 220ms ease, opacity 220ms ease;
}
.mpd-gallery-item:hover img {
transform: scale(1.035);
opacity: 0.86;
} .mpd-bio p,
.mpd-bio li,
.mpd-bio blockquote {
color: rgba(255, 255, 255, 0.9) !important;
}
.mpd-bio blockquote {
border-left: 2px solid rgba(255, 255, 255, 0.18);
margin: 1.35em 0 0;
padding: 0 0 0 18px;
color: rgba(255, 255, 255, 0.78) !important;
}
.mpd-gallery-grid .mpd-gallery-item:only-child {
max-width: 380px;
}
.mpd-gallery-grid .mpd-gallery-item:nth-last-child(1):nth-child(3n + 1) {
grid-column: 1 / 2;
}
.mpd-gallery-grid .mpd-gallery-item img {
min-height: 100%;
}
.mpd-profile-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.mpd-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mpd-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mpd-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mpd-profile-card {
background: var(--mpd-card, #080808) !important;
border: 0;
overflow: hidden;
}
.mpd-card-image {
display: block;
background: #050505;
}
.mpd-card-image img {
aspect-ratio: 1 / 1;
object-fit: cover;
}
.mpd-card-body {
padding: 22px;
}
.mpd-card-body h3 {
font-size: 1.65rem;
line-height: 1;
font-weight: 900;
margin: 0 0 10px;
}
.mpd-card-body p {
margin-bottom: 18px;
}
@media (max-width: 980px) {
.mpd-single-profile,
.mpd-archive {
max-width: 760px;
}
.mpd-hero,
.mpd-profile-content {
grid-template-columns: 1fr;
}
.mpd-hero {
gap: 24px;
margin-bottom: 34px;
}
.mpd-portrait {
max-width: 420px;
}
.mpd-creature-file {
max-width: 420px;
}
.mpd-profile-grid,
.mpd-columns-2,
.mpd-columns-3,
.mpd-columns-4,
.mpd-gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.mpd-single-profile,
.mpd-archive {
padding: 28px 18px 56px;
}
.mpd-single-profile h1 {
font-size: clamp(2.7rem, 15vw, 4rem);
letter-spacing: -0.045em;
}
.mpd-profile-grid,
.mpd-columns-2,
.mpd-columns-3,
.mpd-columns-4,
.mpd-gallery-grid {
grid-template-columns: 1fr;
}
} .mpd-portrait img,
.mpd-creature-file,
.mpd-gallery-item,
.mpd-profile-card {
border: 0 !important;
box-shadow: none !important;
}
.mpd-socials a,
.mpd-threshold {
border-color: rgba(255, 255, 255, 0.22) !important;
}
.mpd-bio blockquote {
border-left-color: rgba(255, 255, 255, 0.18) !important;
}