Template:Emperium/styles.css
Template page
More actions
/* The Emperium — page theme. Loaded only by [[The Emperium]] via TemplateStyles. */
.emp {
position: relative;
background-color: #0b0a0d;
background-image:
radial-gradient(ellipse at 15% 0%, rgba(150, 20, 30, 0.35), transparent 55%),
radial-gradient(ellipse at 90% 10%, rgba(212, 175, 55, 0.12), transparent 50%),
linear-gradient(180deg, #120d10 0%, #0b0a0d 40%);
color: #e8e3d8;
border: 1px solid #2a2226;
border-radius: 14px;
padding: 32px 40px 48px;
margin: 8px 0 24px;
line-height: 1.65;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
overflow: hidden;
}
/* ---------- Wiki dark mode ----------
The wiki's dark mode inverts the whole page. The panel is already dark, so it carries the
"mw-no-invert" class (inverted back to normal), and its images opt out of the extra image inversion. */
.emp img {
filter: none !important;
}
/* ---------- Links ---------- */
.emp a,
.emp a:visited {
color: #e0bd5a;
text-decoration: none;
transition: color 0.2s ease;
}
.emp a:hover {
color: #fff1c4;
text-decoration: underline;
}
.emp a.new,
.emp a.new:visited {
color: #d77a6f;
}
.emp b {
color: #fff;
}
/* ---------- Hero ---------- */
.emp-hero {
position: relative;
text-align: center;
padding: 16px 24px 40px;
margin: -32px -40px 32px;
background-image:
linear-gradient(120deg, rgba(120, 10, 20, 0.55), rgba(10, 8, 12, 0) 45%, rgba(120, 10, 20, 0.55)),
linear-gradient(180deg, #1a0f13, #0b0a0d);
background-size: 250% 100%, 100% 100%;
animation: emp-drift 14s ease-in-out infinite alternate;
border-bottom: 1px solid #3a2a20;
}
.emp-sigil {
position: relative;
display: inline-block;
width: 190px;
height: 190px;
margin-bottom: 6px;
line-height: 0;
}
.emp-sigil:before {
content: '';
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 50%;
background: radial-gradient(circle, rgba(200, 30, 40, 0.45), rgba(200, 30, 40, 0) 70%);
animation: emp-halo 4.8s ease-in-out infinite;
}
.emp-sigil img {
position: relative;
width: 190px;
height: auto;
image-rendering: pixelated;
}
.emp-title {
font-family: Georgia, 'Times New Roman', serif;
font-size: 40px;
font-weight: bold;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #f4ecd8;
text-shadow: 0 0 18px rgba(190, 30, 40, 0.55);
line-height: 1.2;
}
.emp-tagline {
margin-top: 8px;
font-size: 13px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #b9a98a;
}
/* ---------- Stat strip ---------- */
.emp-stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin-top: 24px;
}
.emp-stat {
min-width: 138px;
padding: 12px 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 10px;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.emp-stat:hover {
transform: translateY(-3px);
border-color: rgba(212, 175, 55, 0.7);
box-shadow: 0 8px 22px rgba(190, 30, 40, 0.25);
}
.emp-stat-value {
display: block;
font-family: Georgia, 'Times New Roman', serif;
font-size: 22px;
font-weight: bold;
color: #f0cf6a;
}
.emp-stat-label {
display: block;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #9d927f;
}
.emp-live {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 9px;
border-radius: 50%;
background: #4cd17a;
vertical-align: middle;
animation: emp-pulse 1.8s ease-out infinite;
}
/* ---------- Side-by-side photos ---------- */
.emp-shot img {
display: block;
width: 100%;
height: auto;
transition: transform 0.4s ease;
}
.emp-shot a {
display: block;
overflow: hidden;
border-radius: 10px;
}
.emp-shot a:hover img {
transform: scale(1.04);
}
/* Pairs that share one frame shape (edges trimmed to fit) */
.emp-crop-2x1 .emp-shot img {
aspect-ratio: 2 / 1;
object-fit: cover;
}
.emp-crop-16x9 .emp-shot img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* Square + 2.5:1 pairs: widths in proportion to shape, so tops and bottoms line up exactly */
.emp .emp-duo {
display: flex;
align-items: flex-start;
gap: 16px;
margin: 16px 0 32px;
}
.emp-duo-square {
flex: 1 1 0;
min-width: 0;
}
.emp-duo-wide {
flex: 2.5 1 0;
min-width: 0;
}
.emp-feature-caption {
margin-top: 8px;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #a89e8c;
text-align: center;
}
.emp .emp-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
align-items: start;
gap: 16px;
margin: 16px 0 32px;
}
.emp-pixel {
image-rendering: pixelated;
}
/* ---------- Top bar (identical on the wiki and on TheEmperium.com) ---------- */
.emp-topbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 24px;
margin-bottom: 40px;
text-align: left;
}
.emp-topbar-brand {
display: flex;
align-items: center;
gap: 10px;
line-height: 0;
}
.emp-topbar-brand img {
width: 36px;
height: 36px;
image-rendering: pixelated;
}
.emp-topbar-name {
line-height: 1.2;
}
.emp .emp-topbar-name a,
.emp .emp-topbar-name a:visited {
color: #f4ecd8;
font-family: Georgia, 'Times New Roman', serif;
font-size: 15px;
font-weight: bold;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
}
.emp-topbar-links {
display: flex;
flex-wrap: wrap;
gap: 4px 20px;
line-height: 1.6;
}
.emp .emp-topbar-links a,
.emp .emp-topbar-links a:visited {
color: #b9a98a;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
}
.emp .emp-topbar-links a:hover,
.emp .emp-topbar-name a:hover {
color: #f0cf6a;
text-decoration: none;
}
.emp .emp-topbar a.external {
padding-right: 0 !important;
background-image: none !important;
}
/* website card: a live snapshot of the other site inside the mock browser */
.emp-browser-shot {
flex: 1;
min-height: 0;
overflow: hidden;
line-height: 0;
background: #0b0a0d;
}
.emp-browser-shot a,
.emp-browser-shot span {
display: block;
height: 100%;
}
.emp-browser-shot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
transition: transform 0.4s ease;
}
.emp-site:hover .emp-browser-shot img {
transform: scale(1.03);
}
/* ---------- Discord invite (Discord's chat invite card with the splash as a banner) + website card ----------
Both cards share one column width so they match when stacked. */
.emp .emp-links {
display: grid;
grid-template-columns: minmax(0, 550px);
justify-content: center;
gap: 16px;
margin-top: 32px;
text-align: left;
}
.emp-invite,
.emp-site {
overflow: hidden;
background: #2b2d31;
border: 1px solid #3a3d44;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.emp-invite:hover,
.emp-site:hover {
transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(88, 101, 242, 0.25);
}
.emp-invite-banner {
line-height: 0;
}
.emp-invite-banner a {
display: block;
}
.emp-invite-banner img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 2.4 / 1;
object-fit: cover;
object-position: 50% 45%;
}
.emp-invite-inner {
padding: 12px 16px 14px;
}
.emp-invite-label {
margin-bottom: 10px;
font-size: 11px;
font-weight: bold;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #b5bac1;
}
.emp-invite-body {
display: flex;
align-items: center;
gap: 12px;
}
.emp-invite-icon {
flex: none;
width: 52px;
height: 52px;
line-height: 0;
}
.emp-invite-icon img {
width: 52px;
height: 52px;
border-radius: 14px;
transition: border-radius 0.25s ease;
}
.emp-invite:hover .emp-invite-icon img {
border-radius: 50%;
}
.emp-invite-info {
flex: 1;
min-width: 0;
}
.emp-invite-name {
display: block;
font-size: 16px;
font-weight: bold;
color: #f2f3f5;
}
.emp-invite-meta {
display: flex;
flex-wrap: wrap;
gap: 2px 12px;
font-size: 13px;
color: #b5bac1;
}
.emp-invite-count {
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.emp-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
.emp-dot-online { background: #23a55a; }
.emp-dot-members { background: #80848e; }
.emp .emp-invite-btn a,
.emp .emp-invite-btn a:visited {
display: inline-block;
padding: 8px 18px !important;
background: #248046 !important;
color: #fff;
font-weight: bold;
font-size: 14px;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.17s ease;
}
.emp .emp-invite-btn a:hover {
background: #1a6334 !important;
color: #fff;
text-decoration: none;
}
.emp-site {
display: flex;
flex-direction: column;
background: #1b1418;
border-color: rgba(212, 175, 55, 0.3);
}
.emp-site:hover {
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(190, 30, 40, 0.2);
}
/* mock browser chrome */
.emp-browser-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #26202a;
border-bottom: 1px solid #3a2f33;
}
.emp-browser-dots {
display: flex;
gap: 6px;
flex: none;
}
.emp-browser-dots span {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #4a3f44;
}
.emp-browser-dots span:first-child { background: #c8323f; }
.emp-browser-dots span:nth-child(2) { background: #c9a43f; }
.emp-browser-url {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
padding: 4px 8px;
background: #120e11;
border-radius: 6px;
font-size: 12px;
color: #b5aea3;
white-space: nowrap;
overflow: hidden;
}
.emp-favicon {
flex: none;
width: 16px;
height: 16px;
line-height: 0;
}
.emp-favicon img {
width: 16px;
height: 16px;
border-radius: 4px;
}
.emp-browser-page {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 16px;
text-align: center;
background: radial-gradient(ellipse at 50% 0%, rgba(142, 27, 37, 0.3), rgba(0, 0, 0, 0) 70%);
}
.emp-browser-page .emp-invite-label {
margin-bottom: 0;
}
.emp-site-name {
font-family: Georgia, 'Times New Roman', serif;
font-size: 20px;
font-weight: bold;
color: #f0cf6a;
}
/* placeholder "page content" lines with a slow shimmer */
.emp-skeleton {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 100%;
margin: 4px 0;
}
.emp-skeleton span {
display: block;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(212, 175, 55, 0.22), rgba(255, 255, 255, 0.05));
background-size: 200% 100%;
animation: emp-shimmer 2.4s linear infinite;
}
.emp-skeleton span:nth-child(1) { width: 80%; }
.emp-skeleton span:nth-child(2) { width: 64%; }
.emp-skeleton span:nth-child(3) { width: 72%; }
.emp-soon {
padding: 2px 9px;
border: 1px solid rgba(212, 175, 55, 0.5);
border-radius: 999px;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #e6c35c;
white-space: nowrap;
animation: emp-blink 2s ease-in-out infinite;
}
/* ---------- Wide screens: invite + website side by side ---------- */
@media (min-width: 1181px) {
.emp-hero {
padding: 20px 32px 48px;
}
.emp .emp-links {
grid-template-columns: minmax(0, 550px) 350px;
gap: 24px;
margin-top: 48px;
}
/* 4 x 219px + 3 x 16px gaps = 924px, the same width as the invite + website cards */
.emp-stat {
min-width: 177px;
}
}
/* ---------- Entrance animation for each block ---------- */
.emp > * {
animation: emp-rise 0.8s ease-out both;
}
.emp > *:nth-child(2) { animation-delay: 0.1s; }
.emp > *:nth-child(3) { animation-delay: 0.2s; }
.emp > *:nth-child(4) { animation-delay: 0.3s; }
.emp > *:nth-child(5) { animation-delay: 0.4s; }
.emp > *:nth-child(n+6) { animation-delay: 0.5s; }
.emp > .emp-hero {
animation: emp-drift 14s ease-in-out infinite alternate;
}
/* ---------- Headings ---------- */
.emp .mw-heading,
.emp h2,
.emp h3 {
border: 0;
}
.emp h2 {
font-family: Georgia, 'Times New Roman', serif;
font-size: 26px;
font-weight: bold;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #f4ecd8;
margin: 48px 0 8px;
padding: 0;
}
.emp .mw-heading2 {
margin-top: 48px;
margin-bottom: 16px;
padding-bottom: 8px;
background-image: linear-gradient(90deg, #c9a43f, #8e1b25 40%, rgba(142, 27, 37, 0));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 2px;
animation: emp-underline 1.2s ease-out both;
}
.emp .mw-heading2 h2 {
margin-top: 0;
}
.emp h3 {
font-family: Georgia, 'Times New Roman', serif;
font-size: 19px;
color: #e6c35c;
margin: 32px 0 8px;
padding-left: 12px;
border-left: 3px solid #8e1b25;
}
.emp .mw-editsection,
.emp .mw-editsection a {
color: #6f6658;
font-size: 12px;
}
/* ---------- Table of contents ---------- */
.emp .toc {
background: rgba(255, 255, 255, 0.03);
border: 1px solid #2f2629;
border-radius: 10px;
padding: 10px 18px;
color: #e8e3d8;
}
.emp .toc .toctitle h2 {
font-size: 14px;
letter-spacing: 0.2em;
color: #b9a98a;
margin: 0;
}
.emp .toc .tocnumber {
color: #8e1b25;
}
/* ---------- Infobox (overrides the shared template's inline colours) ---------- */
.emp .infobox {
background: #141015 !important;
color: #e8e3d8;
border: 1px solid #3a2a20;
border-radius: 12px;
border-collapse: separate;
overflow: hidden;
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.08);
margin: 0 0 18px 22px;
transition: box-shadow 0.3s ease;
}
.emp .infobox:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 22px rgba(190, 30, 40, 0.25);
}
.emp .infobox th,
.emp .infobox td {
border-top: 1px solid #241c1f;
padding: 6px 10px;
vertical-align: top;
}
.emp .infobox th[colspan] {
background: rgba(142, 27, 37, 0.35) !important;
color: #e6c35c;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.emp .infobox tr:first-child th {
background: linear-gradient(90deg, #5e0f17, #8e1b25, #5e0f17) !important;
color: #f6e7bb;
font-family: Georgia, 'Times New Roman', serif;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 12px;
border-top: 0;
}
.emp .infobox th[scope="row"] {
color: #b9a98a;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: left;
white-space: nowrap;
}
.emp .infobox img {
border-radius: 8px;
}
/* ---------- Contents | leader | info panel: one row, equal height; Ranking follows full width ---------- */
.emp .emp-trio {
display: grid;
grid-template-columns: 220px minmax(0, 1fr) 290px;
gap: 32px;
margin: 32px 0 16px;
}
.emp-trio-toc .toc {
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0;
padding: 16px;
}
.emp-trio .infobox {
float: none !important;
width: 100% !important;
height: 100%;
margin: 0 !important;
}
.emp-trio-leader {
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
padding: 16px 0;
background: radial-gradient(ellipse at 50% 40%, rgba(142, 27, 37, 0.3), rgba(0, 0, 0, 0) 65%);
}
.emp-council-title {
font-family: Georgia, 'Times New Roman', serif;
font-size: 13px;
font-weight: bold;
letter-spacing: 0.22em;
text-transform: uppercase;
text-align: center;
color: #b9a98a;
}
/* 3 x 2: leader top-centre, Omegas around */
.emp .emp-council {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: end;
gap: 24px 16px;
}
.emp-member {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
min-width: 0;
text-align: center;
}
.emp-member img {
display: block;
width: auto;
height: 160px;
margin-bottom: 4px;
filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.55)) !important;
}
/* the wrapper floats (not the image), on its own compositor layer, so the shadow is drawn once
and the movement is sub-pixel smooth instead of snapping 1px at a time */
.emp-member > span:first-child {
display: block;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
animation: emp-bob 5s ease-in-out infinite;
}
.emp-member:nth-child(2) > span:first-child { animation-delay: -1s; }
.emp-member:nth-child(3) > span:first-child { animation-delay: -2s; }
.emp-member:nth-child(4) > span:first-child { animation-delay: -3s; }
.emp-member:nth-child(5) > span:first-child { animation-delay: -4s; }
.emp-member:nth-child(6) > span:first-child { animation-delay: -2.5s; }
.emp-member-leader img {
height: 200px;
filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(212, 175, 55, 0.25)) !important;
}
.emp-member-name {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-weight: bold;
color: #f4ecd8;
}
.emp-member-name small {
font-weight: normal;
color: #9d927f;
}
.emp-member-leader .emp-member-name {
font-family: Georgia, 'Times New Roman', serif;
font-size: 17px;
}
.emp-member-role {
padding: 1px 10px;
border: 1px solid rgba(190, 40, 50, 0.55);
border-radius: 999px;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #e08a8f;
}
.emp-member-leader .emp-member-role {
border-color: rgba(212, 175, 55, 0.6);
color: #e6c35c;
}
@media (max-width: 1180px) {
.emp .emp-trio {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.emp-trio-toc .toc,
.emp-trio .infobox {
height: auto;
}
}
/* ---------- "Show more bases" toggle ---------- */
.emp .emp-more {
display: flex;
flex-direction: column-reverse;
margin-top: 2px;
}
.emp .emp-more .mw-collapsible-toggle {
float: none;
align-self: flex-start;
margin-top: 6px;
padding: 2px 10px;
background: rgba(212, 175, 55, 0.1);
border: 1px solid rgba(212, 175, 55, 0.45);
border-radius: 999px;
color: #e6c35c;
font-size: 11px;
letter-spacing: 0.06em;
cursor: pointer;
transition: background 0.2s ease;
}
.emp .emp-more .mw-collapsible-toggle:hover {
background: rgba(212, 175, 55, 0.22);
}
.emp .emp-more .mw-collapsible-toggle:before,
.emp .emp-more .mw-collapsible-toggle:after {
content: none;
}
.emp .emp-more .mw-collapsible-text {
color: #e6c35c;
}
/* ---------- Keep styled blocks beside floated boxes (infobox, images) instead of underneath ---------- */
.emp-ranks,
.emp-relations,
.emp-roster ul,
.emp-trivia ul,
.emp .mw-heading2,
.emp .mw-heading3 {
display: flow-root;
clear: left;
}
/* ---------- Ranking ladder ---------- */
.emp-ranks {
list-style: none;
margin: 16px 0 24px;
padding: 0;
counter-reset: emp-rank;
}
.emp-ranks li {
position: relative;
counter-increment: emp-rank;
margin: 0 0 8px;
padding: 10px 14px 10px 54px;
background: linear-gradient(90deg, rgba(142, 27, 37, 0.28), rgba(255, 255, 255, 0.02));
border: 1px solid #2f2629;
border-radius: 8px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 16px;
transition: transform 0.25s ease, border-color 0.25s ease;
}
.emp-ranks li:hover {
transform: translateX(6px);
border-color: rgba(212, 175, 55, 0.6);
}
.emp-ranks li:before {
content: counter(emp-rank);
position: absolute;
left: 12px;
top: 50%;
width: 28px;
height: 28px;
margin-top: -14px;
line-height: 28px;
text-align: center;
border-radius: 50%;
background: #8e1b25;
color: #f6e7bb;
font-size: 14px;
font-weight: bold;
}
.emp-ranks li:first-child {
border-color: rgba(212, 175, 55, 0.55);
background: linear-gradient(90deg, rgba(212, 175, 55, 0.25), rgba(255, 255, 255, 0.02));
}
.emp-ranks li:first-child:before {
background: #c9a43f;
color: #1a1208;
}
.emp-rank-note {
color: #9d927f;
font-family: sans-serif;
font-size: 13px;
}
/* ---------- Foreign relations ---------- */
.emp .emp-relations {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 10px;
margin: 14px 0;
}
.emp-rel {
padding: 10px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid #2f2629;
border-left-width: 4px;
border-radius: 8px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.emp-rel:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.emp-rel-name {
display: block;
font-weight: bold;
color: #e0bd5a; /* same gold as the linked names, for groups without a wiki page */
}
.emp-rel-status {
display: inline-block;
margin-top: 4px;
padding: 1px 8px;
border-radius: 999px;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.emp-ally { border-left-color: #3fa66b; }
.emp-ally .emp-rel-status { background: rgba(63, 166, 107, 0.18); color: #7fd9a3; }
.emp-war { border-left-color: #c8323f; }
.emp-war .emp-rel-status { background: rgba(200, 50, 63, 0.2); color: #f08a92; }
.emp-neutral { border-left-color: #7d7f8a; }
.emp .emp-neutral .emp-rel-name,
.emp .emp-neutral .emp-rel-name a,
.emp .emp-neutral .emp-rel-name a:visited { color: #7d7f8a; }
.emp .emp-neutral .emp-rel-name a:hover { color: #b0b2bc; }
.emp-neutral .emp-rel-status { background: rgba(125, 127, 138, 0.2); color: #c3c5cf; }
/* close allies in Minecraft "&b" aqua (#55FFFF): name, deeper stripe, pale tag on dark teal */
.emp-close { border-left-color: #2ec4c4; }
.emp .emp-close .emp-rel-name,
.emp .emp-close .emp-rel-name a,
.emp .emp-close .emp-rel-name a:visited { color: #55ffff; }
.emp .emp-close .emp-rel-name a:hover { color: #c8ffff; }
.emp-close .emp-rel-status { background: rgba(46, 196, 196, 0.16); color: #a8ffff; }
.emp-rel-note {
display: block;
margin-top: 4px;
font-size: 12px;
color: #9d927f;
}
/* ---------- Fallen & outlived relations: dimmed cards with a stamp; defeated ones get a red X ---------- */
.emp-rel {
position: relative;
overflow: hidden;
}
.emp-relations-note {
margin: 24px 0 8px;
font-size: 13px;
font-style: italic;
color: #9d927f;
}
.emp-relations-label {
display: block;
margin-bottom: 4px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #b9a98a;
}
/* fallen groups: 2 columns of wide cards; the right side is reserved for the stamp */
.emp .emp-relations-fallen {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
.emp .emp-relations-fallen {
grid-template-columns: minmax(0, 1fr);
}
}
.emp-fallen {
padding-right: 120px;
}
.emp-fallen .emp-rel-name,
.emp-fallen .emp-rel-status {
white-space: nowrap;
}
.emp-fallen .emp-rel-name,
.emp-fallen .emp-rel-status {
opacity: 0.5;
}
.emp-defeated:before,
.emp-defeated:after {
content: '';
position: absolute;
top: 50%;
left: -8%;
right: -8%;
height: 2px;
background: rgba(214, 52, 66, 0.85);
box-shadow: 0 0 6px rgba(214, 52, 66, 0.6);
}
.emp-defeated:before {
transform: rotate(14deg);
}
.emp-defeated:after {
transform: rotate(-14deg);
}
.emp-stamp {
position: absolute;
top: 50%;
right: 10px;
padding: 1px 6px;
border: 2px solid;
border-radius: 4px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 0.12em;
text-transform: uppercase;
transform: translateY(-50%) rotate(-12deg);
}
.emp-defeated .emp-stamp {
color: #ef4b59;
border-color: rgba(239, 75, 89, 0.85);
background: rgba(24, 8, 10, 0.7);
box-shadow: 0 0 0 2px rgba(24, 8, 10, 0.7), inset 0 0 0 1px rgba(239, 75, 89, 0.4);
}
.emp-outlived .emp-stamp {
color: #d4b354;
border-color: rgba(212, 179, 84, 0.7);
background: rgba(24, 18, 8, 0.6);
box-shadow: inset 0 0 0 1px rgba(212, 179, 84, 0.3);
}
/* ---------- Member rosters ---------- */
.emp .emp-roster ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 6px;
padding: 0;
list-style: none;
}
.emp-roster li {
display: flex;
align-items: center;
gap: 5px;
margin: 0;
padding: 4px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid #2f2629;
border-radius: 999px;
font-size: 14px;
transition: border-color 0.2s ease, background 0.2s ease;
}
.emp-roster li:hover {
border-color: rgba(212, 175, 55, 0.6);
background: rgba(142, 27, 37, 0.25);
}
.emp-roster-lead li {
border-color: rgba(212, 175, 55, 0.45);
background: rgba(212, 175, 55, 0.08);
}
/* tiny front-face heads; sized to sit inside the existing line height so tags don't grow */
.emp-head {
display: block;
flex: none;
width: 16px;
height: 16px;
margin-right: 1px;
line-height: 0;
}
.emp-head img {
width: 16px;
height: 16px;
border-radius: 3px;
image-rendering: pixelated;
}
.emp .emp-roster a.external {
padding-right: 0 !important;
background-image: none !important;
}
/* ---------- Trivia ---------- */
.emp-trivia ul {
list-style: none;
margin: 10px 0;
padding: 0;
}
.emp-trivia li {
margin: 0 0 8px;
padding: 10px 14px 10px 40px;
position: relative;
background: rgba(255, 255, 255, 0.03);
border: 1px solid #2f2629;
border-radius: 8px;
}
.emp-trivia li:before {
content: 'Ω';
position: absolute;
left: 14px;
top: 9px;
color: #c9a43f;
font-family: Georgia, 'Times New Roman', serif;
}
/* ---------- Animations ---------- */
@keyframes emp-halo {
0%, 100% { opacity: 0.55; transform: scale(0.92); }
50% { opacity: 1; transform: scale(1.08); }
}
@keyframes emp-drift {
from { background-position: 0% 0, 0 0; }
to { background-position: 100% 0, 0 0; }
}
@keyframes emp-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes emp-underline {
from { background-size: 0% 2px; }
to { background-size: 100% 2px; }
}
@keyframes emp-bob {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -6px, 0); }
}
@keyframes emp-shimmer {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
@keyframes emp-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
@keyframes emp-pulse {
0% { box-shadow: 0 0 0 0 rgba(76, 209, 122, 0.7); }
100% { box-shadow: 0 0 0 10px rgba(76, 209, 122, 0); }
}
/* ---------- Small screens ---------- */
@media (max-width: 720px) {
.emp {
padding: 24px 16px 32px;
}
.emp-hero {
margin: -24px -16px 24px;
padding: 12px 16px 32px;
}
.emp-topbar {
justify-content: center;
margin-bottom: 24px;
}
.emp-topbar-links {
justify-content: center;
}
.emp-title {
font-size: 28px;
letter-spacing: 0.14em;
}
.emp .emp-duo {
flex-direction: column;
}
.emp-duo-square,
.emp-duo-wide {
flex: none;
width: 100%;
}
.emp .infobox {
float: none;
width: 100% !important;
margin: 0 0 18px;
}
}
/* ---------- Respect reduced-motion settings ---------- */
@media (prefers-reduced-motion: reduce) {
.emp *,
.emp > *,
.emp-sigil:before {
animation: none !important;
transition: none !important;
}
}