/* ==========================================================================
SilverMU · Season 22 — sitewide skin (loads AFTER css/citadel.css).
Scope: html[data-site-template="citadel"] (S22 keeps Citadel's page
structure; this sheet re-skins it). Contract: _settings_s22/dev/SILVERMU_DESIGN.md
Token names below are a shared contract — extend, never rename.
========================================================================== */
html[data-site-template="citadel"] {
/* Night & stone */
--sv-night-0: #04060b;
--sv-night-1: #070a12;
--sv-night-2: #0c111c;
--sv-night-3: #121a29;
--sv-stone: #1a2232;
/* Moonlit silver (metal ramp, dark → bright) */
--sv-silver-900: #2a3140;
--sv-silver-700: #5b6578;
--sv-silver-500: #8e98ab;
--sv-silver-300: #c3cad8;
--sv-silver-100: #eef2f8;
--sv-silver: #cfd6e4;
--sv-metal: linear-gradient(180deg, #f7f9fc 0%, #cfd6e4 38%, #7f899c 52%, #dfe5ef 64%, #9aa4b6 100%);
--sv-metal-dim: linear-gradient(180deg, #c9d0dc 0%, #8f99ab 50%, #5d6678 100%);
/* Arcane ice (magic, focus, links) */
--sv-ice: #7cc8ff;
--sv-ice-2: #3f8fe0;
--sv-ice-glow: rgba(124, 200, 255, 0.45);
/* Dragonfire (primary CTA, heat, alerts) */
--sv-fire-1: #ffd27a;
--sv-fire-2: #ff8a2b;
--sv-fire-3: #e2401c;
--sv-fire-4: #8e1a10;
--sv-fire: linear-gradient(180deg, #ffb25a 0%, #f2662a 45%, #b8261a 100%);
--sv-fire-glow: rgba(255, 122, 47, 0.5);
/* Text */
--sv-text-strong: #f3f6fb;
--sv-text: #c9d1de;
--sv-text-muted: #8a94a7;
/* Surfaces & frames */
--sv-panel: linear-gradient(180deg, rgba(20, 27, 41, 0.92) 0%, rgba(9, 13, 21, 0.96) 100%);
--sv-panel-solid: #0d121d;
--sv-border: rgba(195, 202, 216, 0.22);
--sv-border-strong: rgba(214, 222, 236, 0.46);
--sv-radius: 14px;
--sv-radius-sm: 8px;
--sv-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(255, 255, 255, 0.04) inset;
--sv-focus: 0 0 0 3px rgba(124, 200, 255, 0.45);
/* Type (self-hosted, see css/citadel.css @font-face) */
--sv-font-display: "Cinzel", "Trajan Pro", Georgia, serif;
--sv-font-body: "EB Garamond", Georgia, "Times New Roman", serif;
--sv-font-ui: "Oswald", "Segoe UI", system-ui, sans-serif;
/* Motion */
--sv-ease: cubic-bezier(0.22, 1, 0.36, 1);
--sv-dur: 420ms;
}
/* ==========================================================================
1. Skin tokens (additions) + Citadel token re-pointing
========================================================================== */
html[data-site-template="citadel"] {
--sv-header-h: 78px;
--sv-header-h-compact: 62px;
--sv-gutter: max(16px, var(--shell-gutter, 1.2rem));
--sv-edge-light: rgba(255, 138, 43, 0.32);
--sv-steel: linear-gradient(180deg, #3a4456 0%, #1c2433 48%, #0f1520 100%);
--sv-steel-hover: linear-gradient(180deg, #4a5568 0%, #243046 48%, #121a28 100%);
--sv-inset: linear-gradient(180deg, #04070d 0%, #0a0f19 100%);
--sv-corner: url("data:image/svg+xml,");
--sv-corner-tr: url("data:image/svg+xml,");
--sv-corner-bl: url("data:image/svg+xml,");
--sv-corner-br: url("data:image/svg+xml,");
--sv-chevron: url("data:image/svg+xml,");
/* Layered panel face: four filigree corners, a faint ember edge-light from
below (the reference's lit stone frame), a cool top sheen, the glass. */
--sv-panel-face:
var(--sv-corner) left 7px top 7px / 24px 24px no-repeat,
var(--sv-corner-tr) right 7px top 7px / 24px 24px no-repeat,
var(--sv-corner-bl) left 7px bottom 7px / 24px 24px no-repeat,
var(--sv-corner-br) right 7px bottom 7px / 24px 24px no-repeat,
radial-gradient(130% 55% at 50% 118%, rgba(255, 122, 47, 0.12), transparent 62%),
linear-gradient(180deg, rgba(214, 222, 236, 0.05), transparent 120px),
linear-gradient(180deg, rgba(18, 25, 39, 0.94) 0%, rgba(9, 13, 21, 0.97) 100%);
--sv-panel-face-plain:
radial-gradient(130% 55% at 50% 118%, rgba(255, 122, 47, 0.1), transparent 62%),
linear-gradient(180deg, rgba(214, 222, 236, 0.045), transparent 90px),
linear-gradient(180deg, rgba(18, 25, 39, 0.94) 0%, rgba(9, 13, 21, 0.97) 100%);
--sv-panel-shadow:
0 0 0 1px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(238, 242, 248, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.6),
inset 0 0 0 1px rgba(255, 255, 255, 0.015),
0 26px 60px -24px rgba(0, 0, 0, 0.85),
0 22px 46px -34px rgba(255, 122, 47, 0.5);
/* Re-point the Citadel structure tokens at the SilverMU palette so every
component that reads them follows without per-rule overrides. */
--page-bg: var(--sv-night-0);
--surface-0: #0d121d;
--surface-1: #0a0e17;
--surface-2: #121a29;
--surface-soft: #0c111b;
--text-strong: var(--sv-text-strong);
--text: var(--sv-text);
--text-muted: #9aa4b6;
--accent: var(--sv-silver);
--accent-2: var(--sv-silver-500);
--brand-1: var(--sv-fire-3);
--brand-2: var(--sv-fire-2);
--gold: var(--sv-silver);
--gold-tone: var(--sv-silver);
--blue: var(--sv-ice-2);
--rift: var(--sv-ice);
--border: rgba(195, 202, 216, 0.16);
--border-2: rgba(214, 222, 236, 0.32);
--border-light: rgba(195, 202, 216, 0.16);
--glass: rgba(7, 10, 18, 0.82);
--glass-2: rgba(10, 14, 23, 0.94);
--focus-ring: var(--sv-focus);
--panel-bg: linear-gradient(180deg, rgba(18, 25, 39, 0.94) 0%, rgba(9, 13, 21, 0.97) 100%);
--panel-bg-soft: linear-gradient(180deg, rgba(22, 30, 46, 0.9) 0%, rgba(11, 15, 24, 0.95) 100%);
--panel-border: var(--sv-border);
--panel-border-strong: var(--sv-border-strong);
--control-bg: #070b13;
--control-border: rgba(195, 202, 216, 0.24);
--ember: var(--sv-fire-3);
--edge-gold: rgba(214, 222, 236, 0.55);
--face-crimson: var(--sv-fire);
--face-obsidian: linear-gradient(180deg, #1a2232 0%, #0c111c 45%, #070a12 100%);
--shadow-md: 0 22px 58px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(238, 242, 248, 0.05);
--ranking-box-bg: #0d121d;
--ranking-tab-bg: linear-gradient(180deg, #161e2d, #0b1019);
--ranking-tab-active-bg: linear-gradient(180deg, #ffb25a 0%, #f2662a 45%, #b8261a 100%);
--ranking-table-header-bg: #0b111c;
--ranking-badge-bg: #121a29;
--ornament-rule: url("data:image/svg+xml,");
background: var(--sv-night-0);
scroll-padding-top: calc(var(--site-header-offset, 78px) + 14px);
}
/* ==========================================================================
2. Page background: deep night, moon glow, drifting mist, star-dust, embers
========================================================================== */
html[data-brand="silvermu"] body {
padding-top: var(--sv-header-h);
color: var(--sv-text);
background:
radial-gradient(1100px 620px at 50% -12%, rgba(124, 200, 255, 0.1), transparent 62%),
radial-gradient(900px 640px at 92% 108%, rgba(255, 122, 47, 0.075), transparent 62%),
radial-gradient(800px 600px at 4% 96%, rgba(63, 143, 224, 0.06), transparent 62%),
linear-gradient(180deg, #0a0f1a 0%, #070a12 42%, #05070d 100%);
background-color: var(--sv-night-0);
background-attachment: fixed;
scrollbar-color: #4b5568 #05070d;
}
html[data-brand="silvermu"] body.sv-header-overlay {
padding-top: 0;
}
/* Citadel's diagonal hairline texture is retired: the sky below replaces it. */
html[data-brand="silvermu"] body::before {
content: none;
}
html[data-brand="silvermu"] .citadel-ambient {
display: none !important;
}
.sv-sky {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
contain: strict;
}
.sv-sky > span {
position: absolute;
display: block;
}
/* Only the drifting layers get their own compositor layer (5 in total). */
.sv-sky__stars,
.sv-sky__mist:not(.sv-sky__mist--low),
.sv-sky__embers {
will-change: transform;
}
.sv-sky__moon {
top: -260px;
left: 50%;
width: 920px;
height: 620px;
margin-left: -460px;
background:
radial-gradient(closest-side, rgba(238, 242, 248, 0.16), rgba(207, 214, 228, 0.07) 38%, rgba(124, 200, 255, 0.035) 62%, transparent 100%);
opacity: 0.9;
}
.sv-sky__stars {
inset: -420px 0 0 0;
background: url("/assets/silver/brand/stardust.svg?v=1") 0 0 / 420px 420px repeat;
opacity: 0.5;
animation: svSkyDrift 240s linear infinite;
}
.sv-sky__stars--near {
inset: -300px 0 0 0;
background-size: 300px 300px;
background-position: 137px 61px;
opacity: 0.32;
animation: svSkyDriftNear 150s linear infinite;
}
.sv-sky__mist {
left: -30vw;
bottom: -12vh;
width: 160vw;
height: 62vh;
background:
radial-gradient(42% 46% at 28% 62%, rgba(150, 168, 196, 0.09), transparent 70%),
radial-gradient(36% 40% at 70% 70%, rgba(124, 200, 255, 0.06), transparent 70%),
radial-gradient(50% 50% at 50% 100%, rgba(195, 202, 216, 0.06), transparent 70%);
animation: svMist 70s ease-in-out infinite alternate;
}
.sv-sky__mist--low {
bottom: -20vh;
height: 48vh;
opacity: 0.8;
background:
radial-gradient(40% 50% at 64% 58%, rgba(150, 168, 196, 0.08), transparent 70%),
radial-gradient(30% 40% at 20% 72%, rgba(255, 122, 47, 0.035), transparent 70%);
animation: none;
}
/* One 2px ember, cloned by box-shadow: cheap (a single layer, transform/opacity
only) yet reads as a scatter of sparks rising from below. */
.sv-sky__embers {
left: 0;
top: 100%;
width: 2px;
height: 2px;
border-radius: 50%;
color: rgba(255, 150, 60, 0.9);
background: currentColor;
box-shadow:
6vw -4vh 2px 0 currentColor, 14vw -22vh 3px 0 rgba(255, 190, 110, 0.8),
23vw -9vh 2px 0 currentColor, 31vw -31vh 2px 1px rgba(255, 110, 40, 0.7),
42vw -14vh 3px 0 currentColor, 51vw -2vh 2px 0 rgba(255, 200, 130, 0.8),
58vw -27vh 2px 1px currentColor, 66vw -11vh 3px 0 rgba(255, 120, 45, 0.8),
74vw -36vh 2px 0 currentColor, 81vw -6vh 2px 0 rgba(255, 190, 110, 0.7),
88vw -19vh 3px 0 currentColor, 95vw -29vh 2px 0 rgba(255, 130, 50, 0.8);
opacity: 0;
animation: svEmbers 26s linear infinite;
}
.sv-sky__embers--slow {
left: 3vw;
color: rgba(255, 180, 100, 0.8);
transform: scale(0.8);
animation-duration: 38s;
animation-delay: -17s;
}
@keyframes svSkyDrift { to { transform: translate3d(0, 420px, 0); } }
@keyframes svSkyDriftNear { to { transform: translate3d(0, 300px, 0); } }
@keyframes svMist {
from { transform: translate3d(-6vw, 0, 0); }
to { transform: translate3d(8vw, -2vh, 0); }
}
@keyframes svEmbers {
0% { transform: translate3d(0, 0, 0); opacity: 0; }
8% { opacity: 0.85; }
70% { opacity: 0.55; }
100% { transform: translate3d(2vw, -118vh, 0); opacity: 0; }
}
html[data-brand="silvermu"] body > main,
html[data-brand="silvermu"] body > footer,
html[data-brand="silvermu"] body > .container,
html[data-brand="silvermu"] body > section {
position: relative;
z-index: 1;
}
html[data-brand="silvermu"] ::selection {
background: rgba(124, 200, 255, 0.32);
color: #ffffff;
}
html[data-brand="silvermu"] ::-webkit-scrollbar {
width: 12px;
height: 12px;
background: #05070d;
}
html[data-brand="silvermu"] ::-webkit-scrollbar-thumb {
border: 3px solid #05070d;
border-radius: 20px;
background: linear-gradient(180deg, #8e98ab, #4b5568 55%, #2a3140);
}
html[data-brand="silvermu"] ::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #c3cad8, #5b6578 55%, #2a3140);
}
html[data-brand="silvermu"] :focus-visible {
outline: 2px solid var(--sv-ice);
outline-offset: 3px;
}
html[data-brand="silvermu"] .skip-link {
border-color: var(--sv-border-strong);
background: var(--sv-night-2);
color: var(--sv-text-strong);
font-family: var(--sv-font-ui);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ==========================================================================
3. Header — glass bar, silver filigree edge, wordmark + crest, engraved nav
========================================================================== */
.sv-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: var(--sv-header-h);
color: var(--sv-text);
transition: height 0.38s var(--sv-ease);
}
.sv-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(214, 222, 236, 0.05), transparent 40%),
linear-gradient(180deg, rgba(11, 16, 27, 0.86) 0%, rgba(6, 9, 16, 0.8) 100%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
transition: background 0.38s var(--sv-ease), box-shadow 0.38s var(--sv-ease);
}
.sv-header.is-compact {
height: var(--sv-header-h-compact);
}
.sv-header.is-compact::before {
background:
linear-gradient(180deg, rgba(214, 222, 236, 0.04), transparent 40%),
linear-gradient(180deg, rgba(8, 12, 21, 0.95) 0%, rgba(5, 7, 13, 0.93) 100%);
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
}
.sv-header__bar {
position: relative;
display: flex;
align-items: center;
gap: clamp(0.75rem, 1.4vw, 1.75rem);
box-sizing: border-box;
width: min(var(--shell-fluid, 93%), var(--shell, 1440px));
height: 100%;
margin: 0 auto;
padding-inline: var(--shell-gutter, 1.2rem);
}
/* Silver filigree lower edge: tapered hairline, an ember under-glow and a
central gem ornament. */
.sv-header__filigree {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg, transparent 0%, rgba(195, 202, 216, 0.16) 14%, rgba(238, 242, 248, 0.7) 50%, rgba(195, 202, 216, 0.16) 86%, transparent 100%);
}
.sv-header__filigree::before {
content: "";
position: absolute;
left: 50%;
top: -11px;
width: 260px;
height: 24px;
margin-left: -130px;
background: url("/assets/silver/brand/filigree.svg?v=1") center / 260px 24px no-repeat;
filter: drop-shadow(0 0 6px rgba(124, 200, 255, 0.45));
transition: opacity 0.38s var(--sv-ease), transform 0.38s var(--sv-ease);
}
.sv-header__filigree::after {
content: "";
position: absolute;
left: 22%;
right: 22%;
top: 0;
height: 14px;
background: radial-gradient(50% 100% at 50% 0%, rgba(255, 122, 47, 0.22), transparent 70%);
}
.sv-header.is-compact .sv-header__filigree::before {
opacity: 0.75;
transform: scale(0.82);
}
/* Brand: crest + metallic wordmark */
.sv-brand {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 0.6rem;
color: inherit;
text-decoration: none !important;
border-radius: 10px;
}
.sv-brand__crest {
display: block;
width: 48px;
height: 48px;
overflow: visible;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 12px rgba(124, 200, 255, 0.22));
transition: transform 0.45s var(--sv-ease), width 0.38s var(--sv-ease), height 0.38s var(--sv-ease);
}
.sv-header.is-compact .sv-brand__crest {
width: 40px;
height: 40px;
}
.sv-brand:hover .sv-brand__crest,
.sv-brand:focus-visible .sv-brand__crest {
transform: translateY(-1px) scale(1.06);
}
.sv-brand__text {
display: flex;
flex-direction: column;
gap: 0.28rem;
line-height: 1;
}
.sv-brand__word {
font-family: var(--sv-font-display);
font-size: 1.62rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
line-height: 0.9;
background: var(--sv-metal);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 0 14px rgba(124, 200, 255, 0.18));
}
.sv-brand__mu {
background: linear-gradient(180deg, #ffffff 0%, #d9f0ff 38%, #6fb6f0 56%, #cfeaff 74%, #8fc7f2 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.sv-brand__season {
font-family: var(--sv-font-ui);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.46em;
text-transform: uppercase;
color: #ffb25a;
text-shadow: 0 0 10px rgba(255, 122, 47, 0.55), 0 1px 0 rgba(0, 0, 0, 0.8);
padding-left: 0.12em;
}
/* Nav: engraved uppercase, glow + growing underline, gem on the active item */
.sv-nav {
display: flex;
flex: 1 1 auto;
justify-content: center;
min-width: 0;
}
.sv-nav__list {
display: flex;
align-items: center;
gap: clamp(0rem, 0.35vw, 0.4rem);
margin: 0;
padding: 0;
list-style: none;
}
.sv-nav__list li {
margin: 0;
padding: 0;
}
.sv-nav__link {
position: relative;
display: flex;
align-items: center;
height: 44px;
padding: 0 clamp(0.45rem, 0.75vw, 0.95rem);
border-radius: 6px;
color: var(--sv-silver-300) !important;
font-family: var(--sv-font-ui);
font-size: clamp(0.8rem, 0.25vw + 0.56rem, 0.9rem);
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 -1px 0 rgba(255, 255, 255, 0.05);
transition: color 0.25s ease, text-shadow 0.25s ease, background-color 0.25s ease;
}
.sv-nav__link::after {
content: "";
position: absolute;
left: 0.75rem;
right: 0.75rem;
bottom: 7px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--sv-ice), transparent);
box-shadow: 0 0 8px var(--sv-ice-glow);
transform: scaleX(0);
transition: transform 0.45s var(--sv-ease);
}
.sv-nav__link:hover,
.sv-nav__link:focus-visible {
color: #ffffff !important;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 0 14px rgba(124, 200, 255, 0.55);
}
.sv-nav__link:hover::after,
.sv-nav__link:focus-visible::after {
transform: scaleX(1);
}
.sv-nav__link.is-active {
color: var(--sv-text-strong) !important;
background: radial-gradient(70% 80% at 50% 100%, rgba(124, 200, 255, 0.14), transparent 75%);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 0 12px rgba(214, 222, 236, 0.45);
}
.sv-nav__link.is-active::after {
transform: scaleX(1);
background: linear-gradient(90deg, transparent, var(--sv-silver-100), transparent);
}
.sv-nav__link.is-active::before {
content: "";
position: absolute;
left: 50%;
bottom: 4px;
width: 6px;
height: 6px;
margin-left: -3px;
background: linear-gradient(135deg, #ffffff, var(--sv-ice) 55%, var(--sv-ice-2));
box-shadow: 0 0 8px var(--sv-ice), 0 0 2px #fff;
transform: rotate(45deg);
}
.sv-nav__drawer-cta {
display: none;
}
/* Actions: CTAs, language, burger */
.sv-header__actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 0.55rem;
margin-left: auto;
}
/* Long-locale fallback before the drawer: tighter tracking, same row. */
html.sv-nav-tight .sv-nav__list { gap: 0; }
html.sv-nav-tight .sv-nav__link { padding: 0 0.5rem; letter-spacing: 0.07em; }
.sv-header__cta {
display: flex;
align-items: center;
gap: 0.5rem;
}
.sv-lang {
position: relative;
display: flex;
align-items: center;
height: 38px;
border: 1px solid var(--sv-border);
border-radius: 8px;
background: var(--sv-inset);
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.04);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sv-lang:hover {
border-color: rgba(124, 200, 255, 0.4);
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 14px -4px rgba(124, 200, 255, 0.35);
}
/* Focus is distinct from hover (WCAG 2.4.11 / 1.4.11): solid ice outline +
the shared focus ring, since the select itself draws no outline. */
.sv-lang:focus-within {
border-color: var(--sv-ice);
outline: 2px solid var(--sv-ice);
outline-offset: 2px;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), var(--sv-focus);
}
.sv-lang__icon {
position: absolute;
left: 9px;
color: var(--sv-silver-500);
pointer-events: none;
}
html[data-brand="silvermu"] .sv-lang select {
height: 100%;
min-height: 0;
margin: 0;
padding: 0 26px 0 30px;
border: 0 !important;
border-radius: 8px;
outline: 0;
appearance: none;
-webkit-appearance: none;
background: transparent var(--sv-chevron) no-repeat right 9px center / 10px 7px !important;
box-shadow: none !important;
color: var(--sv-silver-100);
font-family: var(--sv-font-ui);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.12em;
cursor: pointer;
}
html[data-brand="silvermu"] .sv-lang select option {
background: #0c111c;
color: #e6ebf3;
}
.sv-burger {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--sv-border-strong);
border-radius: 8px;
background: var(--sv-steel);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 16px rgba(0, 0, 0, 0.45);
color: var(--sv-silver-100);
cursor: pointer;
}
.sv-burger__bars {
position: relative;
display: block;
width: 20px;
height: 14px;
}
.sv-burger__bars span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
border-radius: 2px;
background: currentColor;
box-shadow: 0 0 6px rgba(124, 200, 255, 0.35);
transition: transform 0.35s var(--sv-ease), opacity 0.2s ease, top 0.35s var(--sv-ease);
}
.sv-burger__bars span:nth-child(1) { top: 0; }
.sv-burger__bars span:nth-child(2) { top: 6px; width: 70%; left: 30%; }
.sv-burger__bars span:nth-child(3) { top: 12px; }
.sv-burger[aria-expanded="true"] .sv-burger__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.sv-burger[aria-expanded="true"] .sv-burger__bars span:nth-child(2) { opacity: 0; }
.sv-burger[aria-expanded="true"] .sv-burger__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.sv-nav-scrim {
display: none;
}
/* ==========================================================================
4. Shared components (contract §3)
========================================================================== */
/* --- Buttons -------------------------------------------------------------- */
.sv-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55em;
min-height: 46px;
padding: 0 1.45em;
overflow: hidden;
border: 1px solid var(--sv-border-strong);
border-radius: 6px;
background: var(--sv-steel);
color: var(--sv-silver-100) !important;
font-family: var(--sv-font-ui);
font-size: 0.86rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
cursor: pointer;
isolation: isolate;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
inset 0 -2px 0 rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(0, 0, 0, 0.55),
0 10px 22px -10px rgba(0, 0, 0, 0.8);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
transition: transform 0.25s var(--sv-ease), box-shadow 0.3s var(--sv-ease), filter 0.25s ease, border-color 0.25s ease;
}
/* Sheen sweep on hover */
.sv-btn::after {
content: "";
position: absolute;
inset: -2px auto -2px -60%;
z-index: -1;
width: 45%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
transform: skewX(-18deg) translateX(0);
opacity: 0;
transition: transform 0.7s var(--sv-ease), opacity 0.3s ease;
}
.sv-btn:hover::after,
.sv-btn:focus-visible::after {
opacity: 1;
transform: skewX(-18deg) translateX(420%);
}
.sv-btn:hover,
.sv-btn:focus-visible {
transform: translateY(-1px);
}
.sv-btn:active {
transform: translateY(1px);
}
.sv-btn--fire {
border-color: rgba(255, 210, 122, 0.7);
background: linear-gradient(180deg, #ffbe6a 0%, #f2662a 44%, #b8261a 100%);
color: #fff9ef !important;
text-shadow: 0 1px 0 rgba(96, 22, 4, 0.75);
box-shadow:
inset 0 1px 0 rgba(255, 238, 205, 0.7),
inset 0 -2px 0 rgba(96, 18, 6, 0.6),
0 0 0 1px rgba(0, 0, 0, 0.55),
0 10px 26px -8px rgba(255, 90, 30, 0.6),
0 0 26px -10px rgba(255, 138, 43, 0.75);
}
.sv-btn--fire:hover,
.sv-btn--fire:focus-visible {
filter: brightness(1.08) saturate(1.05);
box-shadow:
inset 0 1px 0 rgba(255, 238, 205, 0.8),
inset 0 -2px 0 rgba(96, 18, 6, 0.6),
0 0 0 1px rgba(0, 0, 0, 0.55),
0 14px 32px -8px rgba(255, 90, 30, 0.75),
0 0 40px -6px rgba(255, 138, 43, 0.75);
}
.sv-btn--steel {
border-color: rgba(214, 222, 236, 0.42);
background: var(--sv-steel);
color: var(--sv-silver-100) !important;
}
.sv-btn--steel:hover,
.sv-btn--steel:focus-visible {
border-color: rgba(124, 200, 255, 0.7);
background: var(--sv-steel-hover);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -2px 0 rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(0, 0, 0, 0.55),
0 10px 24px -10px rgba(0, 0, 0, 0.8),
0 0 22px -6px rgba(124, 200, 255, 0.55);
}
.sv-btn--sm {
min-height: 38px;
padding: 0 1.05em;
font-size: 0.76rem;
letter-spacing: 0.14em;
}
.sv-btn--lg {
min-height: 56px;
padding: 0 2.1em;
font-size: 0.98rem;
}
.sv-btn--block {
display: flex;
width: 100%;
}
.sv-btn[disabled],
.sv-btn[aria-disabled="true"] {
filter: grayscale(0.7) brightness(0.7);
cursor: not-allowed;
transform: none;
}
/* --- Round CTA orb (the reference's "New player? Register now") --------- */
.sv-orb {
position: relative;
display: inline-grid;
place-content: center;
gap: 0.15rem;
width: var(--sv-orb-size, 148px);
height: var(--sv-orb-size, 148px);
border-radius: 50%;
border: 2px solid rgba(238, 242, 248, 0.75);
background:
radial-gradient(circle at 50% 28%, rgba(255, 236, 200, 0.55), transparent 42%),
radial-gradient(circle at 50% 60%, #f2662a 0%, #b8261a 58%, #5e0f08 100%);
color: #fff9ef !important;
font-family: var(--sv-font-ui);
text-align: center;
text-transform: uppercase;
text-decoration: none !important;
text-shadow: 0 1px 0 rgba(96, 22, 4, 0.8), 0 0 12px rgba(255, 138, 43, 0.6);
box-shadow:
0 0 0 5px rgba(7, 10, 18, 0.85),
0 0 0 6px rgba(195, 202, 216, 0.5),
inset 0 2px 0 rgba(255, 238, 205, 0.55),
inset 0 -10px 24px rgba(60, 8, 2, 0.6),
0 0 46px rgba(255, 122, 47, 0.55);
transition: transform 0.45s var(--sv-ease), box-shadow 0.45s var(--sv-ease);
}
.sv-orb::before {
content: "";
position: absolute;
inset: -14px;
border-radius: 50%;
border: 1px dashed rgba(195, 202, 216, 0.35);
animation: svSpin 28s linear infinite;
}
.sv-orb small {
font-size: 0.7rem;
letter-spacing: 0.22em;
opacity: 0.9;
}
.sv-orb strong {
font-size: 1.05rem;
letter-spacing: 0.12em;
line-height: 1.05;
}
.sv-orb:hover,
.sv-orb:focus-visible {
transform: scale(1.05);
box-shadow:
0 0 0 5px rgba(7, 10, 18, 0.85),
0 0 0 6px rgba(238, 242, 248, 0.7),
inset 0 2px 0 rgba(255, 238, 205, 0.7),
inset 0 -10px 24px rgba(60, 8, 2, 0.6),
0 0 70px rgba(255, 122, 47, 0.8);
}
@keyframes svSpin { to { transform: rotate(360deg); } }
/* --- Panel --------------------------------------------------------------- */
.sv-panel {
position: relative;
isolation: isolate;
padding: clamp(1rem, 2vw, 1.6rem);
border: 1px solid rgba(195, 202, 216, 0.24);
border-radius: var(--sv-radius);
background: var(--sv-panel-face);
box-shadow: var(--sv-panel-shadow);
color: var(--sv-text);
}
/* Brushed-steel bevel: a 1px gradient ring (bright top-left, ember bottom). */
.sv-panel::before {
content: "";
position: absolute;
inset: -1px;
z-index: -1;
padding: 1px;
border-radius: inherit;
background: linear-gradient(160deg, rgba(247, 249, 252, 0.6), rgba(91, 101, 120, 0.25) 28%, rgba(195, 202, 216, 0.14) 62%, rgba(255, 138, 43, 0.45) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
pointer-events: none;
}
.sv-panel--plain {
background: var(--sv-panel-face-plain);
}
.sv-panel__head {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin: calc(-1 * clamp(1rem, 2vw, 1.6rem)) calc(-1 * clamp(1rem, 2vw, 1.6rem)) clamp(0.9rem, 1.6vw, 1.2rem);
padding: 0.85rem clamp(1rem, 2vw, 1.6rem);
border-bottom: 1px solid rgba(195, 202, 216, 0.16);
border-radius: var(--sv-radius) var(--sv-radius) 0 0;
background:
linear-gradient(180deg, rgba(214, 222, 236, 0.09), rgba(214, 222, 236, 0.02)),
linear-gradient(90deg, transparent, rgba(124, 200, 255, 0.06), transparent);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.55);
}
.sv-panel__head::after {
content: "";
position: absolute;
left: 50%;
bottom: -4px;
width: 7px;
height: 7px;
margin-left: -3.5px;
background: linear-gradient(135deg, #fff, var(--sv-ice) 55%, var(--sv-ice-2));
box-shadow: 0 0 8px var(--sv-ice);
transform: rotate(45deg);
}
.sv-panel__head :where(h2, h3, h4, .sv-panel__title) {
margin: 0;
color: var(--sv-silver-100);
font-family: var(--sv-font-ui);
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 -1px 0 rgba(255, 255, 255, 0.04);
}
/* --- Metallic display title ---------------------------------------------- */
.sv-title {
margin: 0;
font-family: var(--sv-font-display);
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.05;
text-transform: uppercase;
background: var(--sv-metal);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 0 18px rgba(124, 200, 255, 0.16));
}
.sv-title--fire {
background: linear-gradient(180deg, #fff3d6 0%, #ffd27a 30%, #ff8a2b 62%, #e2401c 100%);
-webkit-background-clip: text;
background-clip: text;
}
/* --- Ornamental divider with a central gem ------------------------------- */
.sv-divider {
position: relative;
display: block;
height: 24px;
margin: clamp(1.25rem, 3vw, 2rem) auto;
border: 0;
background: url("/assets/silver/brand/filigree.svg?v=1") center / 260px 24px no-repeat;
}
.sv-divider::before,
.sv-divider::after {
content: "";
position: absolute;
top: 50%;
width: calc(50% - 140px);
height: 1px;
}
.sv-divider::before {
left: 0;
background: linear-gradient(90deg, transparent, rgba(195, 202, 216, 0.4));
}
.sv-divider::after {
right: 0;
background: linear-gradient(90deg, rgba(195, 202, 216, 0.4), transparent);
}
/* --- Badge ---------------------------------------------------------------- */
.sv-badge {
display: inline-flex;
align-items: center;
gap: 0.4em;
min-height: 24px;
padding: 0.2em 0.75em;
border: 1px solid rgba(195, 202, 216, 0.32);
border-radius: 999px;
background: linear-gradient(180deg, rgba(42, 49, 64, 0.85), rgba(14, 19, 29, 0.9));
color: var(--sv-silver-100);
font-family: var(--sv-font-ui);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.14em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sv-badge--fire {
border-color: rgba(255, 178, 90, 0.55);
background: linear-gradient(180deg, rgba(242, 102, 42, 0.32), rgba(184, 38, 26, 0.24));
color: #ffd9b0;
}
.sv-badge--ice {
border-color: rgba(124, 200, 255, 0.5);
background: linear-gradient(180deg, rgba(63, 143, 224, 0.28), rgba(22, 58, 102, 0.3));
color: #d4ecff;
}
.sv-badge--live::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 8px #4ade80;
}
/* --- Stat ----------------------------------------------------------------- */
.sv-stat {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
}
.sv-stat__label {
color: var(--sv-text-muted);
font-family: var(--sv-font-ui);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.sv-stat__value {
font-family: var(--sv-font-display);
font-size: clamp(1.35rem, 2.2vw, 1.9rem);
font-weight: 700;
line-height: 1;
font-variant-numeric: lining-nums tabular-nums;
background: var(--sv-metal);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.sv-stat__bar {
position: relative;
height: 6px;
overflow: hidden;
border-radius: 6px;
background: var(--sv-inset);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.sv-stat__bar > span {
position: absolute;
inset: 0 auto 0 0;
width: var(--sv-fill, 0%);
border-radius: inherit;
background: linear-gradient(90deg, var(--sv-ice-2), var(--sv-ice));
box-shadow: 0 0 10px var(--sv-ice-glow);
}
/* --- Empty state (DB offline etc.) ----------------------------------------- */
.sv-empty {
display: grid;
justify-items: center;
gap: 0.6rem;
padding: clamp(1.5rem, 4vw, 2.5rem) 1rem;
color: var(--sv-text-muted);
text-align: center;
font-style: italic;
}
.sv-empty::before {
content: "";
width: 34px;
height: 34px;
background: url("/assets/silver/brand/crest.svg?v=1") center / contain no-repeat;
opacity: 0.5;
filter: grayscale(0.4);
}
/* ==========================================================================
5. Existing page structure re-skinned (Citadel classes)
========================================================================== */
/* --- Headings: metallic display face (clip lines always repeated) --------- */
html[data-brand="silvermu"] main :where(h2, h3, h4) {
color: var(--sv-silver-100);
font-family: var(--font-display, var(--sv-font-display));
}
html[data-brand="silvermu"] main :where(strong, b) {
color: var(--sv-text-strong);
}
html[data-brand="silvermu"] main :where(p, li, td, dd) a:not([class]) {
color: #9fd6ff;
text-decoration-color: rgba(124, 200, 255, 0.4);
text-underline-offset: 3px;
}
html[data-brand="silvermu"] main :where(p, li, td, dd) a:not([class]):hover {
color: #ffffff;
text-decoration-color: var(--sv-ice);
}
/* --- Panels: white-box + the card family --------------------------------- */
html[data-brand="silvermu"][data-site-template="citadel"] :is(.white-box, .ranking-main-container, .news-archive-shell, .account-panel):not(.page-header-box) {
border: 1px solid rgba(195, 202, 216, 0.22) !important;
border-radius: var(--sv-radius) !important;
background: var(--sv-panel-face) !important;
box-shadow: var(--sv-panel-shadow) !important;
}
html[data-brand="silvermu"][data-site-template="citadel"]
:is(
.news-card,
.news-feature,
.news-item,
.news-archive-item,
.news-more,
.class-panel,
.side-widget,
.hero-card,
.info-block,
.guide-card,
.account-card,
.card,
.glass-card,
.panel,
.acc-card,
.table-shell,
.event-card,
.guides-featured-card,
.community-shell,
.community-card,
.media-gallery-box,
.media-card,
.muor-panel,
.muor-guide-card,
.muor-command-card,
.ih-card,
.ih-event-card,
.rates-overview,
.faq-item,
.related-item,
.guild-card,
.char-card,
.server-card,
.servers-card,
.resource-card,
.skill-detail-hero,
.skill-detail-block,
.decide-cta,
.not-for-you,
.payments-card,
.pkg-card,
.pay-card,
.bonus-box,
.vipbox,
.account-info-box,
.account-action-panel,
.points-card,
.realm-banner
) {
border: 1px solid rgba(195, 202, 216, 0.2) !important;
border-radius: 12px !important;
background: var(--sv-panel-face-plain) !important;
box-shadow: var(--sv-panel-shadow) !important;
}
html[data-brand="silvermu"]
:where(.muor-stat-card, .ih-cur-card, .kpi, .skill-meta-pill, .map-filter-item, .table-wrap, .responsive-table) {
border-color: rgba(195, 202, 216, 0.18) !important;
background: linear-gradient(180deg, rgba(20, 28, 43, 0.9), rgba(10, 14, 23, 0.94)) !important;
}
@media (hover: hover) {
html[data-brand="silvermu"]
:where(.event-card, .guides-featured-card, .community-card, .media-card, .related-item, .resource-card, .points-card, .kpi):hover {
border-color: rgba(124, 200, 255, 0.45) !important;
box-shadow: var(--sv-panel-shadow), 0 0 0 1px rgba(124, 200, 255, 0.18), 0 0 34px -10px rgba(124, 200, 255, 0.4) !important;
}
}
/* Panel headings keep Citadel's clipped metal face; they must NOT carry a
text-shadow — with transparent glyphs the shadow shows through the letters. */
html[data-brand="silvermu"] .white-box > h2 {
letter-spacing: 0.03em;
text-shadow: none;
}
/* --- Breadcrumbs ----------------------------------------------------------- */
html[data-brand="silvermu"] :where(.breadcrumb-nav, .account-breadcrumb) {
color: var(--sv-text-muted);
font-family: var(--sv-font-ui);
font-weight: 500;
letter-spacing: 0.14em;
}
html[data-brand="silvermu"] :where(.breadcrumb li + li, .breadcrumb-nav li + li)::before {
color: var(--sv-ice);
text-shadow: 0 0 6px var(--sv-ice-glow);
}
html[data-brand="silvermu"] :where(.breadcrumb a, .breadcrumb-nav a, .account-breadcrumb a) {
color: var(--sv-silver-300);
}
html[data-brand="silvermu"] :where(.breadcrumb a, .breadcrumb-nav a, .account-breadcrumb a):hover {
color: #ffffff;
}
/* --- Mastheads: silver-framed banner, distant citadel, dragon, ember glow -- */
html[data-brand="silvermu"][data-site-template="citadel"] :is(.page-header-box, .ranking-heading-card, .hero-404, .mu-hero-article, .mu-hero-banner, .account-titlebar, .sp-hero, .buygp-hero) {
position: relative;
overflow: hidden;
border: 1px solid rgba(214, 222, 236, 0.4) !important;
border-radius: var(--sv-radius) !important;
background:
var(--sv-corner) left 8px top 8px / 24px 24px no-repeat,
var(--sv-corner-tr) right 8px top 8px / 24px 24px no-repeat,
var(--sv-corner-bl) left 8px bottom 8px / 24px 24px no-repeat,
var(--sv-corner-br) right 8px bottom 8px / 24px 24px no-repeat,
/* Title side scrim: solid night under the copy, clear over the dragon. */
linear-gradient(90deg, rgba(5, 7, 13, 0.94) 0%, rgba(5, 7, 13, 0.86) 28%, rgba(5, 7, 13, 0.52) 46%, rgba(5, 7, 13, 0.1) 64%, transparent 78%),
linear-gradient(180deg, rgba(5, 7, 13, 0.3) 0%, transparent 38%, rgba(5, 7, 13, 0.55) 100%),
radial-gradient(30% 80% at 86% 122%, rgba(255, 122, 47, 0.24), transparent 70%),
/* Real-time 3D still (js/silver-3d.js): moon + citadel, silver dragon
breathing fire, right third. Left third is baked to night. */
url("/assets/silver/brand/masthead-citadel.webp?v=5") right 34% / cover no-repeat,
#05070d !important;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 0 0 1px rgba(255, 255, 255, 0.03),
0 30px 70px -30px rgba(0, 0, 0, 0.9),
0 26px 50px -36px rgba(255, 122, 47, 0.6) !important;
}
html[data-brand="silvermu"][data-site-template="citadel"] :is(.page-header-box, .ranking-heading-card)::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(90deg, transparent 8%, rgba(238, 242, 248, 0.55) 50%, transparent 92%) top / 100% 1px no-repeat,
linear-gradient(90deg, transparent 20%, rgba(255, 138, 43, 0.5) 50%, transparent 80%) bottom / 100% 1px no-repeat;
opacity: 1;
transform: none;
}
html[data-brand="silvermu"][data-site-template="citadel"] :is(.page-header-box, .ranking-heading-card)::after {
content: none;
}
html[data-brand="silvermu"] .page-header-box .page-title,
html[data-brand="silvermu"] .ranking-heading-card :where(h1, h2) {
font-family: var(--sv-font-display);
font-weight: 700;
letter-spacing: 0.03em;
background: var(--sv-metal);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 0 22px rgba(124, 200, 255, 0.18));
}
html[data-brand="silvermu"] .page-header-box .page-kicker {
border: 1px solid rgba(255, 178, 90, 0.45) !important;
background: linear-gradient(180deg, rgba(242, 102, 42, 0.22), rgba(184, 38, 26, 0.14)) !important;
color: #ffd9b0 !important;
font-family: var(--sv-font-ui);
letter-spacing: 0.24em;
text-shadow: 0 0 10px rgba(255, 122, 47, 0.5);
box-shadow: none !important;
}
html[data-brand="silvermu"] .page-header-box .page-count-pill {
border: 1px solid rgba(124, 200, 255, 0.45) !important;
background: rgba(7, 10, 18, 0.72) !important;
color: #d4ecff !important;
font-family: var(--sv-font-ui);
letter-spacing: 0.12em;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* Download-page sub hero: same family, taller, bigger dragon. */
html[data-brand="silvermu"][data-site-template="citadel"] .rift-hero.rift-hero--sub {
border-bottom: 1px solid rgba(214, 222, 236, 0.22);
background:
radial-gradient(40% 62% at 50% 48%, rgba(5, 7, 13, 0.72), rgba(5, 7, 13, 0.3) 70%, transparent 100%),
linear-gradient(90deg, rgba(5, 7, 13, 0.55) 0%, transparent 34%),
linear-gradient(180deg, rgba(5, 7, 13, 0.2) 0%, transparent 40%, rgba(5, 7, 13, 0.96) 100%),
radial-gradient(34% 60% at 82% 112%, rgba(255, 122, 47, 0.3), transparent 70%),
url("/assets/silver/brand/masthead-citadel.webp?v=5") right 30% / cover no-repeat,
#05070d !important;
}
html[data-brand="silvermu"] .rift-hero--sub :where(.rift-hero__bg, .rift-hero__art) {
display: none !important;
}
html[data-brand="silvermu"] .rift-hero__title {
background: var(--sv-metal);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 0 26px rgba(124, 200, 255, 0.2));
}
html[data-brand="silvermu"] .hero-kicker,
html[data-brand="silvermu"] .rift-hero__kicker {
color: #ffc98a !important;
letter-spacing: 0.32em;
text-shadow: 0 0 12px rgba(255, 122, 47, 0.55), 0 1px 0 rgba(0, 0, 0, 0.8);
}
/* --- Buttons in existing markup ------------------------------------------- */
html[data-brand="silvermu"] :where(.btn, .btn-primary, .btn--primary, .news-btn, .filter-btn, .pagination-list a, .ranking-tab, .hero-download-btn) {
--btn-bg: var(--sv-steel);
--btn-bg-hover: var(--sv-steel-hover);
--btn-border: rgba(214, 222, 236, 0.4);
--btn-fg: var(--sv-silver-100);
--btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.45), 0 10px 22px -10px rgba(0, 0, 0, 0.8);
font-family: var(--sv-font-ui);
letter-spacing: 0.12em;
}
html[data-brand="silvermu"] :where(.btn-primary, .btn--primary, .news-btn, .btn--gold) {
--btn-bg: linear-gradient(180deg, #ffbe6a 0%, #f2662a 44%, #b8261a 100%);
--btn-bg-hover: linear-gradient(180deg, #ffcb85 0%, #ff7838 44%, #c82e1e 100%);
--btn-border: rgba(255, 210, 122, 0.7);
--btn-fg: #fff9ef;
--btn-shadow: inset 0 1px 0 rgba(255, 238, 205, 0.7), inset 0 -2px 0 rgba(96, 18, 6, 0.6), 0 10px 26px -8px rgba(255, 90, 30, 0.6);
}
html[data-brand="silvermu"] :where(.button, .buy-gp-btn, button[type="submit"], .main-register-btn):not(.btn--ghost):not(.sv-btn):not(.sv-burger) {
border-color: rgba(255, 210, 122, 0.7) !important;
background: linear-gradient(180deg, #ffbe6a 0%, #f2662a 44%, #b8261a 100%) !important;
color: #fff9ef !important;
font-family: var(--sv-font-ui);
letter-spacing: 0.12em;
text-shadow: 0 1px 0 rgba(96, 22, 4, 0.75);
box-shadow: inset 0 1px 0 rgba(255, 238, 205, 0.7), inset 0 -2px 0 rgba(96, 18, 6, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 10px 26px -8px rgba(255, 90, 30, 0.55) !important;
}
html[data-brand="silvermu"] :where(.button, .buy-gp-btn, button[type="submit"], .main-register-btn):not(.btn--ghost):not(.sv-btn):not(.sv-burger):hover {
filter: brightness(1.08);
}
html[data-brand="silvermu"]
:where(.action-btn, .back-btn, .class-link-btn, .attr-btn, .event-filter-btn, .ih-chip, .community-action, .realm-chip, .meta-chip, .hero-ghost-btn, .reward-secondary-btn, .export-secondary-btn, .copy-link-btn, .gb-btn):not(.is-active):not(.active) {
border-color: rgba(214, 222, 236, 0.32) !important;
background: var(--sv-steel) !important;
color: var(--sv-silver-100) !important;
}
html[data-brand="silvermu"]
:where(.action-btn, .back-btn, .class-link-btn, .attr-btn, .event-filter-btn, .ih-chip, .community-action, .realm-chip, .meta-chip, .hero-ghost-btn, .reward-secondary-btn, .export-secondary-btn, .copy-link-btn, .gb-btn):not(.is-active):not(.active):hover {
border-color: rgba(124, 200, 255, 0.6) !important;
background: var(--sv-steel-hover) !important;
}
/* --- Tabs (rankings, filters) ---------------------------------------------- */
html[data-brand="silvermu"] :where(.ranking-tab, [role="tab"], .tab-btn, .event-filter-btn, .filter-btn) {
font-family: var(--sv-font-ui);
letter-spacing: 0.14em;
text-transform: uppercase;
}
html[data-brand="silvermu"] :where(.ranking-tab, [role="tab"], .tab-btn, .event-filter-btn, .filter-btn):is(.active, .is-active, [aria-selected="true"]) {
border-color: rgba(255, 210, 122, 0.7) !important;
background: linear-gradient(180deg, #ffbe6a 0%, #f2662a 44%, #b8261a 100%) !important;
color: #fff9ef !important;
text-shadow: 0 1px 0 rgba(96, 22, 4, 0.75);
box-shadow: inset 0 1px 0 rgba(255, 238, 205, 0.6), 0 0 22px -6px rgba(255, 122, 47, 0.7) !important;
}
/* --- Tables ---------------------------------------------------------------- */
html[data-brand="silvermu"] main table {
border-collapse: separate;
border-spacing: 0;
}
html[data-brand="silvermu"] main :where(table) :where(th) {
border-bottom: 1px solid rgba(214, 222, 236, 0.26) !important;
background: linear-gradient(180deg, #172032 0%, #0c121d 100%) !important;
color: var(--sv-silver-100) !important;
font-family: var(--sv-font-ui);
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
html[data-brand="silvermu"] main :where(table) :where(td) {
border-bottom: 1px solid rgba(195, 202, 216, 0.08) !important;
}
html[data-brand="silvermu"] main :where(table) :where(tbody tr:nth-child(even) td) {
background-color: rgba(195, 202, 216, 0.025);
}
html[data-brand="silvermu"] main :where(table) :where(tbody tr:hover td) {
background-color: rgba(124, 200, 255, 0.06) !important;
}
/* --- Pagination ------------------------------------------------------------ */
html[data-brand="silvermu"] :where(.pagination a, .pagination span, .pagination-list a, .pagination-list span, .page-link) {
border-color: rgba(214, 222, 236, 0.28) !important;
background: var(--sv-steel) !important;
color: var(--sv-silver-100) !important;
font-family: var(--sv-font-ui);
}
html[data-brand="silvermu"] :where(.pagination, .pagination-list) :where(.active, .current, [aria-current="page"]) {
border-color: rgba(255, 210, 122, 0.7) !important;
background: linear-gradient(180deg, #ffbe6a 0%, #f2662a 44%, #b8261a 100%) !important;
color: #fff9ef !important;
}
/* --- Forms: steel inset inputs, ice focus --------------------------------- */
html[data-brand="silvermu"]
:where(
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="range"]),
select,
textarea,
.input,
.filter-input,
.filter-select
):not(#languageSelector) {
border: 1px solid rgba(195, 202, 216, 0.24) !important;
border-radius: 8px;
background-color: #070b13 !important;
background-image: linear-gradient(180deg, #04070d 0%, #0b101a 100%);
color: var(--sv-text-strong) !important;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.04) !important;
caret-color: var(--sv-ice);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html[data-brand="silvermu"] select:not(#languageSelector) {
background-image: var(--sv-chevron), linear-gradient(180deg, #04070d 0%, #0b101a 100%);
background-repeat: no-repeat, no-repeat;
background-position: right 12px center, 0 0;
background-size: 11px 7px, 100% 100%;
}
html[data-brand="silvermu"] :where(input, select, textarea, .input, .filter-input, .filter-select):not(#languageSelector):focus,
html[data-brand="silvermu"] :where(input, select, textarea, .input, .filter-input, .filter-select):not(#languageSelector):focus-visible {
border-color: rgba(124, 200, 255, 0.75) !important;
outline: 0;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.75), 0 0 0 3px rgba(124, 200, 255, 0.22), 0 0 18px rgba(124, 200, 255, 0.2) !important;
}
html[data-brand="silvermu"] ::placeholder {
color: #6f7a8f;
opacity: 1;
}
html[data-brand="silvermu"] main label {
color: var(--sv-silver-300);
}
html[data-brand="silvermu"] :where(input[type="checkbox"], input[type="radio"]) {
accent-color: var(--sv-fire-2);
}
/* --- Badges & pills ---------------------------------------------------------- */
html[data-brand="silvermu"] :where(.badge, .tag, .page-count-pill, .status-pill, .rate-pill, .ih-badge, .export-pill, .tp-pill) {
font-family: var(--sv-font-ui);
letter-spacing: 0.1em;
}
html[data-brand="silvermu"] :where(.status-pill--online) {
border-color: rgba(74, 222, 128, 0.5) !important;
color: #bbf7d0 !important;
}
/* --- Alerts ------------------------------------------------------------------ */
html[data-brand="silvermu"] :where(.alert, .form-alert, .account-alert, .sp-alert, .notice, .warning-box, .legacy-realm-notice, .vote-notice) {
border: 1px solid rgba(195, 202, 216, 0.24) !important;
border-left-width: 3px !important;
border-radius: 10px !important;
background: linear-gradient(90deg, rgba(124, 200, 255, 0.08), rgba(10, 14, 23, 0.92) 40%) !important;
color: var(--sv-text) !important;
}
html[data-brand="silvermu"] :where(.alert-success, .form-alert--success, .form-alert.success, .alert.success) {
border-left-color: #4ade80 !important;
background: linear-gradient(90deg, rgba(74, 222, 128, 0.1), rgba(10, 14, 23, 0.92) 40%) !important;
}
html[data-brand="silvermu"] :where(.alert-danger, .alert-error, .form-alert--error, .form-alert.error, .alert.error) {
border-left-color: var(--sv-fire-3) !important;
background: linear-gradient(90deg, rgba(226, 64, 28, 0.14), rgba(10, 14, 23, 0.92) 40%) !important;
}
html[data-brand="silvermu"] :where(.alert-warning, .warning-box, .form-alert--warning) {
border-left-color: var(--sv-fire-2) !important;
background: linear-gradient(90deg, rgba(255, 138, 43, 0.1), rgba(10, 14, 23, 0.92) 40%) !important;
}
/* ==========================================================================
6. Footer — dark stone, ornamental silver rule with a gem, columns, socials
========================================================================== */
html[data-brand="silvermu"] footer.sv-footer {
position: relative;
z-index: 1;
margin-top: clamp(3rem, 7vw, 5.5rem);
padding: 0 0 1.75rem !important;
border: 0 !important;
color: var(--sv-text-muted) !important;
text-align: left;
font-size: 0.95rem;
background:
radial-gradient(60% 120px at 50% 0%, rgba(124, 200, 255, 0.07), transparent 70%),
radial-gradient(50% 260px at 50% 100%, rgba(255, 122, 47, 0.06), transparent 70%),
repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 7px),
linear-gradient(180deg, #0a0e17 0%, #06080e 55%, #04060a 100%) !important;
box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, 0.6) !important;
}
html[data-brand="silvermu"] footer.sv-footer::before,
html[data-brand="silvermu"] footer.sv-footer::after {
content: none !important;
display: none !important;
}
.sv-footer__rule {
position: relative;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(195, 202, 216, 0.22) 15%, rgba(238, 242, 248, 0.75) 50%, rgba(195, 202, 216, 0.22) 85%, transparent 100%);
}
.sv-footer__rule::before {
content: "";
position: absolute;
left: 50%;
top: -12px;
width: 260px;
height: 24px;
margin-left: -130px;
background: url("/assets/silver/brand/filigree.svg?v=1") center / 260px 24px no-repeat;
filter: drop-shadow(0 0 8px rgba(124, 200, 255, 0.5));
}
.sv-footer__gem {
position: absolute;
left: 50%;
top: 0;
width: 46%;
height: 40px;
transform: translateX(-50%);
background: radial-gradient(50% 100% at 50% 0%, rgba(124, 200, 255, 0.12), transparent 70%);
pointer-events: none;
}
.sv-footer__inner {
display: grid;
grid-template-columns: minmax(240px, 0.9fr) minmax(0, 2fr);
gap: clamp(2rem, 5vw, 5rem);
box-sizing: border-box;
width: min(var(--shell-fluid, 93%), var(--shell, 1440px));
margin: 0 auto;
padding: clamp(2.5rem, 5vw, 3.5rem) var(--shell-gutter, 1.2rem) 2rem;
}
.sv-footer__logo {
display: inline-flex;
align-items: center;
gap: 0.7rem;
text-decoration: none !important;
}
.sv-footer__crest {
width: 54px;
height: 54px;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(124, 200, 255, 0.2));
}
.sv-footer__wordmark {
font-family: var(--sv-font-display);
font-size: 1.7rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
background: var(--sv-metal);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.sv-footer__wordmark span {
background: linear-gradient(180deg, #ffffff 0%, #d9f0ff 38%, #6fb6f0 56%, #cfeaff 74%, #8fc7f2 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.sv-footer__kicker {
margin: 0.9rem 0 0.35rem;
color: #ffb25a;
font-family: var(--sv-font-ui);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(255, 122, 47, 0.45);
}
.sv-footer__tagline {
max-width: 34ch;
margin: 0 0 1.25rem;
color: var(--sv-silver-300);
font-family: var(--sv-font-body);
font-size: 1.05rem;
font-style: italic;
}
.sv-footer__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.sv-footer__nav {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.25rem, 3vw, 2.5rem);
}
html[data-brand="silvermu"] .sv-footer__heading {
position: relative;
margin: 0 0 1rem;
padding-bottom: 0.65rem;
color: var(--sv-silver-100);
font-family: var(--sv-font-ui);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.sv-footer__heading::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 42px;
height: 1px;
background: linear-gradient(90deg, var(--sv-silver-300), transparent);
}
.sv-footer__heading::before {
content: "";
position: absolute;
left: 46px;
bottom: -2px;
width: 5px;
height: 5px;
background: var(--sv-fire-2);
box-shadow: 0 0 6px var(--sv-fire-2);
transform: rotate(45deg);
}
.sv-footer__col ul {
display: grid;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
html[data-brand="silvermu"] .sv-footer a:not(.sv-btn) {
color: var(--sv-silver-300);
text-decoration: none;
transition: color 0.2s ease, text-shadow 0.2s ease;
}
html[data-brand="silvermu"] .sv-footer__col a:hover,
html[data-brand="silvermu"] .sv-footer__legal a:hover,
html[data-brand="silvermu"] .sv-footer__mail:hover {
color: #ffffff;
text-shadow: 0 0 12px rgba(124, 200, 255, 0.55);
}
.sv-footer__base {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.9rem 2rem;
box-sizing: border-box;
width: min(var(--shell-fluid, 93%), var(--shell, 1440px));
margin: 0 auto;
padding: 1.35rem var(--shell-gutter, 1.2rem) 0;
border-top: 1px solid rgba(195, 202, 216, 0.1);
font-size: 0.86rem;
}
.sv-footer__social {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem;
}
html[data-brand="silvermu"] .sv-footer__social-link {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid rgba(195, 202, 216, 0.24);
border-radius: 50%;
background: var(--sv-steel);
color: var(--sv-silver-300) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px rgba(0, 0, 0, 0.45);
transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s var(--sv-ease);
}
html[data-brand="silvermu"] .sv-footer__social-link:hover,
html[data-brand="silvermu"] .sv-footer__social-link:focus-visible {
color: #ffffff !important;
border-color: rgba(124, 200, 255, 0.6);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 18px rgba(124, 200, 255, 0.4);
transform: translateY(-2px);
}
.sv-footer__mail {
margin-left: 0.4rem;
font-family: var(--sv-font-ui);
letter-spacing: 0.08em;
}
.sv-footer__legal {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1.25rem;
font-family: var(--sv-font-ui);
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.sv-footer__copy,
.sv-footer__disclaimer {
margin: 0;
color: #8a94a7;
}
.sv-footer__copy {
flex: 1 1 100%;
order: 3;
color: var(--sv-silver-500);
font-family: var(--sv-font-ui);
font-size: 0.76rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.sv-footer__disclaimer {
flex: 1 1 100%;
order: 4;
max-width: 90ch;
font-size: 0.84rem;
line-height: 1.55;
}
/* ==========================================================================
7. Responsive
========================================================================== */
@media (max-width: 1360px) {
.sv-brand__word { font-size: 1.42rem; }
.sv-nav__link { letter-spacing: 0.12em; }
}
/* Below 1200px the nav becomes a solid drawer from the right. */
@media (max-width: 1199px) {
.sv-burger { display: inline-flex; }
.sv-nav {
position: fixed;
top: var(--site-header-offset, var(--sv-header-h));
right: 0;
bottom: 0;
z-index: 2;
flex-direction: column;
justify-content: flex-start;
width: min(88vw, 380px);
padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
overscroll-behavior: contain;
border-left: 1px solid rgba(214, 222, 236, 0.22);
background:
radial-gradient(120% 40% at 100% 0%, rgba(124, 200, 255, 0.08), transparent 60%),
radial-gradient(120% 40% at 50% 100%, rgba(255, 122, 47, 0.08), transparent 60%),
linear-gradient(180deg, #0c111c 0%, #070a12 100%);
box-shadow: -30px 0 60px rgba(0, 0, 0, 0.6);
visibility: hidden;
transform: translate3d(104%, 0, 0);
transition: transform 0.42s var(--sv-ease), visibility 0s linear 0.42s;
}
.sv-nav.show {
visibility: visible;
transform: none;
transition: transform 0.42s var(--sv-ease); /* visibility flips at once on open (focusable immediately, even under reduced motion) */
}
.sv-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.sv-nav__link {
height: 52px;
padding: 0 0.85rem;
border-bottom: 1px solid rgba(195, 202, 216, 0.08);
border-radius: 0;
font-size: 0.98rem;
}
.sv-nav__link::after {
left: 0;
right: auto;
top: 14px;
bottom: 14px;
width: 2px;
height: auto;
background: linear-gradient(180deg, transparent, var(--sv-ice), transparent);
transform: scaleY(0);
}
.sv-nav__link:hover::after,
.sv-nav__link:focus-visible::after,
.sv-nav__link.is-active::after {
transform: scaleY(1);
}
.sv-nav__link.is-active {
background: linear-gradient(90deg, rgba(124, 200, 255, 0.12), transparent 70%);
}
.sv-nav__link.is-active::before {
left: auto;
right: 1rem;
bottom: 50%;
margin: 0 0 -3px;
}
.sv-nav__drawer-cta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
margin-top: 1.4rem;
}
.sv-nav::after {
content: "";
flex: 0 0 auto;
width: 96px;
height: 96px;
margin: auto auto 0;
padding-top: 2rem;
background: url("/assets/silver/brand/crest.svg?v=1") center bottom / 96px 96px no-repeat;
opacity: 0.14;
filter: grayscale(0.3);
}
html[data-brand="silvermu"] body.nav-open .sv-nav-scrim {
display: block;
position: fixed;
inset: var(--site-header-offset, var(--sv-header-h)) 0 0 0;
z-index: 999;
background: rgba(3, 5, 10, 0.62);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
animation: svFadeIn 0.3s ease both;
}
}
@media (max-width: 1199px) {
.sv-footer__inner {
grid-template-columns: 1fr;
}
}
/* Same drawer when a long locale cannot fit the nav on one row at desktop
widths (template-switcher.js measures the row and sets html.sv-nav-collapsed). */
html.sv-nav-collapsed .sv-burger { display: inline-flex; }
html.sv-nav-collapsed .sv-nav {
position: fixed;
top: var(--site-header-offset, var(--sv-header-h));
right: 0;
bottom: 0;
z-index: 2;
flex-direction: column;
justify-content: flex-start;
width: min(88vw, 380px);
padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
overscroll-behavior: contain;
border-left: 1px solid rgba(214, 222, 236, 0.22);
background:
radial-gradient(120% 40% at 100% 0%, rgba(124, 200, 255, 0.08), transparent 60%),
radial-gradient(120% 40% at 50% 100%, rgba(255, 122, 47, 0.08), transparent 60%),
linear-gradient(180deg, #0c111c 0%, #070a12 100%);
box-shadow: -30px 0 60px rgba(0, 0, 0, 0.6);
visibility: hidden;
transform: translate3d(104%, 0, 0);
transition: transform 0.42s var(--sv-ease), visibility 0s linear 0.42s;
}
html.sv-nav-collapsed .sv-nav.show {
visibility: visible;
transform: none;
transition: transform 0.42s var(--sv-ease); /* visibility flips at once on open (focusable immediately, even under reduced motion) */
}
html.sv-nav-collapsed .sv-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
html.sv-nav-collapsed .sv-nav__link {
height: 52px;
padding: 0 0.85rem;
border-bottom: 1px solid rgba(195, 202, 216, 0.08);
border-radius: 0;
font-size: 0.98rem;
}
html.sv-nav-collapsed .sv-nav__link::after {
left: 0;
right: auto;
top: 14px;
bottom: 14px;
width: 2px;
height: auto;
background: linear-gradient(180deg, transparent, var(--sv-ice), transparent);
transform: scaleY(0);
}
html.sv-nav-collapsed .sv-nav__link:hover::after,
html.sv-nav-collapsed .sv-nav__link:focus-visible::after,
html.sv-nav-collapsed .sv-nav__link.is-active::after {
transform: scaleY(1);
}
html.sv-nav-collapsed .sv-nav__link.is-active {
background: linear-gradient(90deg, rgba(124, 200, 255, 0.12), transparent 70%);
}
html.sv-nav-collapsed .sv-nav__link.is-active::before {
left: auto;
right: 1rem;
bottom: 50%;
margin: 0 0 -3px;
}
html.sv-nav-collapsed .sv-nav__drawer-cta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
margin-top: 1.4rem;
}
html.sv-nav-collapsed .sv-nav::after {
content: "";
flex: 0 0 auto;
width: 96px;
height: 96px;
margin: auto auto 0;
padding-top: 2rem;
background: url("/assets/silver/brand/crest.svg?v=1") center bottom / 96px 96px no-repeat;
opacity: 0.14;
filter: grayscale(0.3);
}
html.sv-nav-collapsed[data-brand="silvermu"] body.nav-open .sv-nav-scrim {
display: block;
position: fixed;
inset: var(--site-header-offset, var(--sv-header-h)) 0 0 0;
z-index: 999;
background: rgba(3, 5, 10, 0.62);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
animation: svFadeIn 0.3s ease both;
}
@media (min-width: 1200px) {
html:not(.sv-nav-collapsed) .sv-nav__drawer-cta { display: none !important; }
}
@media (max-width: 760px) {
html[data-site-template="citadel"] {
--sv-header-h: 66px;
--sv-header-h-compact: 58px;
}
/* Phones: one 16px gutter on every page (contract §3), not 93%-plus-padding. */
html[data-brand="silvermu"][data-site-template="citadel"] {
--shell-fluid: 100%;
--shell-gutter: 16px;
}
html[data-brand="silvermu"][data-site-template="citadel"] main.container,
html[data-brand="silvermu"][data-site-template="citadel"] main :is(.container) {
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: 16px !important;
box-sizing: border-box;
}
html[data-brand="silvermu"][data-site-template="citadel"] main :is(.container) :is(.container) {
padding-inline: 0 !important;
}
.sv-header__cta { display: none; }
.sv-header__bar { gap: 0.6rem; width: 100%; padding-inline: 16px; }
.sv-brand__crest { width: 40px; height: 40px; }
.sv-header.is-compact .sv-brand__crest { width: 36px; height: 36px; }
.sv-brand__word { font-size: 1.2rem; }
.sv-brand__season { font-size: 0.52rem; letter-spacing: 0.38em; }
.sv-header__filigree::before { width: 180px; margin-left: -90px; background-size: 180px 17px; top: -8px; height: 17px; }
.sv-lang { height: 40px; }
html[data-brand="silvermu"] .sv-lang select { padding: 0 24px 0 28px; }
.sv-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-footer__inner,
.sv-footer__base { width: 100%; padding-inline: 16px; }
.sv-footer__base { flex-direction: column; align-items: flex-start; }
.sv-sky__moon { width: 600px; margin-left: -300px; }
html[data-brand="silvermu"] main > section.container:first-child { margin-top: 0.5rem; padding-top: 1rem; }
html[data-brand="silvermu"][data-site-template="citadel"] :is(.page-header-box, .ranking-heading-card) {
background-image:
var(--sv-corner), var(--sv-corner-tr), var(--sv-corner-bl), var(--sv-corner-br),
linear-gradient(90deg, rgba(5, 7, 13, 0.72) 0%, rgba(5, 7, 13, 0.4) 60%, rgba(5, 7, 13, 0.12) 100%),
linear-gradient(180deg, rgba(5, 7, 13, 0.3) 0%, transparent 38%, rgba(5, 7, 13, 0.6) 100%),
radial-gradient(30% 80% at 86% 122%, rgba(255, 122, 47, 0.24), transparent 70%),
url("/assets/silver/brand/masthead-citadel-sm.webp?v=5") !important;
/* Phones: the dragon's head and the fire over the moon stay in frame. */
background-position: left 8px top 8px, right 8px top 8px, left 8px bottom 8px, right 8px bottom 8px, 0 0, 0 0, 0 0, 84% 30%, 0 0 !important;
/* Copy spans the whole card on phones: dim the art evenly under it. */
box-shadow:
inset 0 0 0 2000px rgba(6, 9, 16, 0.42),
0 0 0 1px rgba(0, 0, 0, 0.6),
0 26px 50px -36px rgba(255, 122, 47, 0.6) !important;
}
}
@media (max-width: 400px) {
.sv-brand__season { display: none; }
.sv-brand__word { font-size: 1.1rem; letter-spacing: 0.05em; }
.sv-nav__drawer-cta { grid-template-columns: 1fr; }
}
@keyframes svFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ==========================================================================
8. Motion preferences — ambience is decorative: static under reduce
(?motion=1 adds .sv-force-motion for testing, contract §5).
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html:not(.sv-force-motion) .sv-sky > span,
html:not(.sv-force-motion) .sv-orb::before {
animation: none !important;
}
html:not(.sv-force-motion) .sv-sky__embers {
opacity: 0.35;
transform: translate3d(0, -60vh, 0);
}
html:not(.sv-force-motion) .sv-sky__embers--slow {
transform: translate3d(0, -28vh, 0) scale(0.8);
}
html:not(.sv-force-motion) :where(.sv-btn, .sv-btn::after, .sv-nav__link, .sv-nav__link::after, .sv-nav, .sv-header, .sv-brand__crest, .sv-orb) {
transition-duration: 0.01ms !important;
}
}
/* The 404 hero is full-bleed: masthead art, no card frame, one soft scrim
behind the centred copy (not a pill per line), dragon pushed right. */
html[data-brand="silvermu"][data-site-template="citadel"] .hero-404 {
border-width: 0 0 1px !important;
border-radius: 0 !important;
background:
radial-gradient(44% 64% at 50% 50%, rgba(5, 7, 13, 0.82), rgba(5, 7, 13, 0.5) 62%, transparent 100%),
linear-gradient(90deg, rgba(5, 7, 13, 0.7) 0%, rgba(5, 7, 13, 0.2) 40%, transparent 70%),
linear-gradient(180deg, rgba(5, 7, 13, 0.3) 0%, transparent 35%, rgba(5, 7, 13, 0.85) 100%),
radial-gradient(30% 70% at 88% 115%, rgba(255, 122, 47, 0.26), transparent 70%),
url("/assets/silver/brand/masthead-citadel.webp?v=5") right 30% / cover no-repeat,
#05070d !important;
}
/* Multi-line metal titles: repeat the metal ramp once per line so the second
and third lines carry the same struck-silver face as the first (one gradient
stretched over the whole block left later lines in the dark band). */
html[data-brand="silvermu"][data-site-template="citadel"] :is(.page-header-box, .ranking-heading-card) .page-title,
html[data-brand="silvermu"][data-site-template="citadel"] .rift-hero__title,
.sv-title {
line-height: 1.12;
background-size: 100% 1.12em;
background-repeat: repeat-y;
-webkit-background-clip: text;
background-clip: text;
}
/* style.css bolds every footer link; the column links read lighter in the body face. */
html[data-brand="silvermu"] .sv-footer__col a {
font-family: var(--sv-font-body);
font-size: 1.04rem;
font-weight: 500;
letter-spacing: 0.01em;
}
/* ==========================================================================
9. Fix pass (2026-11-02, review findings) — forms, panel titles, body
type, reading column, mastheads, chips/badges/medals, 404, news.
========================================================================== */
html[data-site-template="citadel"] {
/* Extension (contract §3 tokens are extend-only): "good odds" green. */
--sv-good: #4ade80;
--sv-good-glow: rgba(74, 222, 128, 0.4);
}
/* --- 9.1 Body copy: EB Garamond everywhere (style.css set the system sans) - */
html[data-brand="silvermu"] body {
font-family: var(--sv-font-body);
font-variant-numeric: lining-nums;
font-kerning: normal;
text-rendering: optimizeLegibility;
}
html[data-brand="silvermu"][data-site-template="citadel"] main :where(.white-box, .container, .guide-article, .news-detail) {
font-size: 1.0625rem;
line-height: 1.65;
}
/* --- 9.2 Stacked fields in panel forms (contact, support…) ---------------- */
html[data-brand="silvermu"] :is(form.white-box, .white-box form):has(> label) > label:not(:has(input[type="checkbox"], input[type="radio"])) {
display: block;
margin: 1rem 0 0.45rem;
color: var(--sv-silver-300);
font-family: var(--sv-font-ui);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.18em;
line-height: 1.2;
text-transform: uppercase;
}
html[data-brand="silvermu"] :is(form.white-box, .white-box form):has(> label) > label:first-of-type {
margin-top: 0;
}
html[data-brand="silvermu"] :is(form.white-box, .white-box form):has(> label)
> :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]), textarea, select) {
display: block;
box-sizing: border-box;
width: 100%;
max-width: none;
min-height: 48px;
margin: 0;
padding: 0.7rem 0.95rem;
font: inherit;
font-size: 1.02rem;
}
html[data-brand="silvermu"] :is(form.white-box, .white-box form):has(> label) > textarea {
min-height: 160px;
line-height: 1.55;
resize: vertical;
}
html[data-brand="silvermu"] :is(form.white-box, .white-box form):has(> label) > :is(button, .btn, input[type="submit"]) {
margin-top: 1.25rem;
}
/* Keep the submit button clear of the panel's bottom filigree corners. */
html[data-brand="silvermu"][data-site-template="citadel"] form.white-box:has(> label) {
padding-bottom: clamp(1.6rem, 3vw, 2.2rem) !important;
}
/* --- 9.3 Panel-head titles: solid engraved silver, never the clipped metal
(Citadel paints main h1/h2 transparent+clip; a dark text-shadow then
showed through the glyphs as dark text on a dark bar). ---------------- */
html[data-brand="silvermu"][data-site-template="citadel"] main .sv-panel__head :is(h1, h2, h3, h4, .sv-panel__title) {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
color: var(--sv-silver-100) !important;
-webkit-text-fill-color: var(--sv-silver-100);
filter: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 16px rgba(124, 200, 255, 0.22);
}
html[data-brand="silvermu"][data-site-template="citadel"] main .sv-panel__head :is(h1, h2)::before,
html[data-brand="silvermu"][data-site-template="citadel"] main .sv-panel__head :is(h1, h2)::after {
content: none !important;
}
/* --- 9.4 Mastheads: titles never reach the dragon -------------------------- */
@media (min-width: 1100px) {
html[data-brand="silvermu"][data-site-template="citadel"] :is(.page-header-box, .ranking-heading-card) > :is(h1, .page-title),
html[data-brand="silvermu"][data-site-template="citadel"] :is(.page-header-box, .ranking-heading-card) > .page-header-copy {
max-width: min(58%, 760px);
}
}
html[data-brand="silvermu"] .page-header-box .page-title {
text-wrap: balance;
}
html[data-brand="silvermu"] .page-header-box .page-header-copy > p {
color: var(--sv-text);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
/* Centred sub-hero: the title rule was Citadel's left-aligned 320px bar,
orphaned left of centre; swap it for the centred filigree + gem. */
html[data-brand="silvermu"][data-site-template="citadel"] .rift-hero__copy--center .rift-hero__title::after {
display: block;
width: 260px;
height: 24px;
margin: 0.9rem auto 0;
background: url("/assets/silver/brand/filigree.svg?v=1") center / 260px 24px no-repeat;
filter: drop-shadow(0 0 6px rgba(124, 200, 255, 0.45));
}
@media (max-width: 760px) {
/* Phones: frame the dragon's head and the fire, not just a wing. */
html[data-brand="silvermu"][data-site-template="citadel"] .rift-hero.rift-hero--sub {
background-position: 0 0, 0 0, 0 0, 0 0, 74% 28% !important;
}
}
/* Download sub-hero kicker: balance the line, never split a token. */
html[data-brand="silvermu"] .rift-hero__kicker {
display: inline-block;
max-width: 100%;
text-wrap: balance;
word-spacing: 0.08em;
}
/* --- 9.5 Guide articles: masthead band (frame, scrim, art) above the title
and a centred reading column. The band is a pseudo-element under the
content so the clipped-metal h1 keeps its own background. ------------ */
html[data-brand="silvermu"][data-site-template="citadel"] .guide-article:has(> h1.page-title:first-child) {
--sv-band: clamp(230px, 24vw, 330px);
position: relative;
isolation: isolate;
overflow: hidden;
}
html[data-brand="silvermu"][data-site-template="citadel"] .guide-article:has(> h1.page-title:first-child)::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 0 auto 0;
height: var(--sv-band);
pointer-events: none;
background:
var(--sv-corner) left 7px top 7px / 24px 24px no-repeat,
var(--sv-corner-tr) right 7px top 7px / 24px 24px no-repeat,
linear-gradient(90deg, transparent 8%, rgba(238, 242, 248, 0.5) 50%, transparent 92%) top / 100% 1px no-repeat,
linear-gradient(90deg, rgba(5, 7, 13, 0.92) 0%, rgba(5, 7, 13, 0.78) 30%, rgba(5, 7, 13, 0.36) 52%, transparent 74%),
linear-gradient(180deg, rgba(5, 7, 13, 0.25) 0%, transparent 40%, rgba(9, 13, 21, 0.9) 100%),
radial-gradient(30% 70% at 88% 118%, rgba(255, 122, 47, 0.24), transparent 70%),
url("/assets/silver/brand/masthead-citadel.webp?v=5") right 34% / cover no-repeat,
#05070d;
-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
mask-image: linear-gradient(180deg, #000 70%, transparent);
}
html[data-brand="silvermu"][data-site-template="citadel"] .guide-article:has(> h1.page-title:first-child)::after {
content: "";
position: absolute;
z-index: -1;
left: 50%;
top: calc(var(--sv-band) - 12px);
width: 260px;
height: 24px;
margin-left: -130px;
pointer-events: none;
background: url("/assets/silver/brand/filigree.svg?v=1") center / 260px 24px no-repeat;
filter: drop-shadow(0 0 6px rgba(124, 200, 255, 0.45));
}
html[data-brand="silvermu"][data-site-template="citadel"] .guide-article > h1.page-title:first-child {
display: flex;
align-items: flex-end;
box-sizing: border-box;
min-height: calc(var(--sv-band) - 2.4rem);
margin: 0 0 2.6rem;
padding: 0;
font-size: clamp(1.9rem, 2.6vw + 0.9rem, 3.1rem);
line-height: 1.1;
text-wrap: balance;
/* Struck-silver face per line: the ramp repeats every line box, anchored
at the bottom where the (bottom-aligned) lines sit. */
background: var(--sv-metal) left bottom / 100% 1.1em repeat-y;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
text-shadow: none;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 0 22px rgba(124, 200, 255, 0.18));
}
@media (min-width: 1100px) {
html[data-brand="silvermu"][data-site-template="citadel"] .guide-article > h1.page-title:first-child {
max-width: min(60%, 780px);
}
}
html[data-brand="silvermu"][data-site-template="citadel"] .guide-article > .guide-updated {
margin-top: 0;
color: var(--sv-text-muted);
font-family: var(--sv-font-ui);
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* Reading column: running text, headings and tables share one centred
measure inside long-form panels, instead of hugging the left half. */
html[data-brand="silvermu"][data-site-template="citadel"]
:is(.guide-article, .download-page > .white-box)
> :is(p, ul, ol, dl, h2, h3, h4, blockquote, table, figure, .table-wrap, .responsive-table, .install-steps, .feature-list, .ss-steps) {
box-sizing: border-box;
max-width: 44rem;
margin-inline: auto;
}
/* The download page's inline sheet zeroes these two margins. */
html[data-brand="silvermu"][data-site-template="citadel"] .download-page > .white-box > :is(.ss-lead, .ss-steps) {
margin-inline: auto !important;
}
html[data-brand="silvermu"][data-site-template="citadel"] .guide-article > p,
html[data-brand="silvermu"][data-site-template="citadel"] .guide-article > :is(ul, ol) > li {
font-size: 1.125rem;
line-height: 1.7;
}
html[data-brand="silvermu"][data-site-template="citadel"] .guide-article > h2 {
margin-top: 2.4rem;
}
/* --- 9.6 Rate odds badges: ok = silver, good = ice, great = green --------- */
html[data-brand="silvermu"][data-site-template="citadel"] :is(.rate-badge, .rate-pill) {
display: inline-flex;
align-items: center;
min-height: 0;
padding: 0.16rem 0.66rem !important;
border-radius: 999px !important;
font-family: var(--sv-font-ui) !important;
font-size: 0.82rem;
font-weight: 500 !important;
letter-spacing: 0.06em;
line-height: 1.35;
font-variant-numeric: lining-nums tabular-nums;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
html[data-brand="silvermu"][data-site-template="citadel"] .rate-badge--ok {
border: 1px solid rgba(195, 202, 216, 0.36) !important;
background: linear-gradient(180deg, rgba(91, 101, 120, 0.42), rgba(42, 49, 64, 0.5)) !important;
color: var(--sv-silver-300) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html[data-brand="silvermu"][data-site-template="citadel"] .rate-badge--good {
border: 1px solid rgba(124, 200, 255, 0.6) !important;
background: linear-gradient(180deg, rgba(63, 143, 224, 0.42), rgba(22, 58, 102, 0.5)) !important;
color: #d8eeff !important;
box-shadow: inset 0 1px 0 rgba(207, 234, 255, 0.18), 0 0 12px -4px var(--sv-ice-glow) !important;
}
html[data-brand="silvermu"][data-site-template="citadel"] .rate-badge--great {
border: 1px solid rgba(74, 222, 128, 0.7) !important;
background: linear-gradient(180deg, rgba(74, 222, 128, 0.36), rgba(21, 94, 52, 0.52)) !important;
color: #dcfce7 !important;
box-shadow: inset 0 1px 0 rgba(220, 252, 231, 0.2), 0 0 14px -4px var(--sv-good-glow) !important;
}
/* The legend strip had Citadel's inset fill but no padding (a bare dark bar
behind the label); make it a proper engraved key. */
html[data-brand="silvermu"][data-site-template="citadel"] .rates-page .rates-legend {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.6rem;
max-width: 100%;
margin: 0;
padding: 0.5rem 0.95rem 0.5rem 0.6rem;
border: 1px solid rgba(195, 202, 216, 0.16);
border-radius: 18px;
background: var(--sv-inset) !important;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-brand="silvermu"] .rates-page .rates-legend-label {
margin-left: 0.3rem;
color: var(--sv-text-muted);
font-family: var(--sv-font-ui);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 1;
}
html[data-brand="silvermu"] .rates-page .rates-updated {
margin: 0.75rem 0 0;
color: var(--sv-text-muted);
opacity: 1;
}
/* --- 9.7 Card "links" inside link-cards: compact steel buttons ------------- */
html[data-brand="silvermu"][data-site-template="citadel"] :is(.guides-featured-open, .community-action) {
display: inline-flex;
align-self: flex-start;
justify-self: start;
align-items: center;
gap: 0.5em;
width: auto !important;
min-height: 34px;
margin-top: auto;
padding: 0 1rem !important;
border: 1px solid rgba(214, 222, 236, 0.42) !important;
border-radius: 6px !important;
background: var(--sv-steel) !important;
color: var(--sv-silver-100) !important;
font-family: var(--sv-font-ui) !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.16em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 8px 18px -10px rgba(0, 0, 0, 0.8) !important;
transition: border-color 0.25s ease, box-shadow 0.3s var(--sv-ease), background 0.25s ease;
}
html[data-brand="silvermu"][data-site-template="citadel"] .community-action {
margin-top: 0.55rem;
}
html[data-brand="silvermu"][data-site-template="citadel"] :is(.guides-featured-card, .community-card):is(:hover, :focus-visible) :is(.guides-featured-open, .community-action) {
border-color: rgba(124, 200, 255, 0.7) !important;
background: var(--sv-steel-hover) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 20px -6px rgba(124, 200, 255, 0.55) !important;
}
/* The primary featured guide is the hot path: its button burns. */
html[data-brand="silvermu"][data-site-template="citadel"] .guides-featured-card--primary .guides-featured-open {
border-color: rgba(255, 210, 122, 0.7) !important;
background: linear-gradient(180deg, #ffbe6a 0%, #f2662a 44%, #b8261a 100%) !important;
color: #fff9ef !important;
text-shadow: 0 1px 0 rgba(96, 22, 4, 0.75);
box-shadow: inset 0 1px 0 rgba(255, 238, 205, 0.7), inset 0 -2px 0 rgba(96, 18, 6, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 8px 22px -8px rgba(255, 90, 30, 0.6) !important;
}
/* Item-hunt quick-search chips: room to breathe, tap-sized. */
html[data-brand="silvermu"] .item-hunt .ih-chip-row {
gap: 0.55rem;
margin-bottom: 1rem;
}
html[data-brand="silvermu"][data-site-template="citadel"] .item-hunt .ih-chip {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 0.95rem !important;
border-radius: 999px !important;
font-family: var(--sv-font-ui);
font-size: 0.74rem;
font-weight: 500 !important;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
}
/* The live search status line is text, not a panel: Citadel's inset fill
drew an empty dark bar under the chips while it had nothing to say. */
html[data-brand="silvermu"][data-site-template="citadel"] .item-hunt .ih-status {
background: none !important;
color: var(--sv-text-muted) !important;
font-style: italic;
}
/* --- 9.8 Ranking medals: 1st burns gold-fire, 2nd silver, 3rd copper ------- */
html[data-brand="silvermu"][data-site-template="citadel"] :is(.ranking-table .rank-badge.gold, .side-rank-badge--1, .ranking-card-rank.gold),
html[data-brand="silvermu"][data-site-template="citadel"] section.container.media-page[data-page="ranking"] .ranking-card-rank.gold {
border-color: rgba(255, 226, 160, 0.85) !important;
background: linear-gradient(180deg, #fff0c4 0%, var(--sv-fire-1) 34%, var(--sv-fire-2) 100%) !important;
color: #3a1704 !important;
text-shadow: 0 1px 0 rgba(255, 240, 210, 0.55);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 16px -4px var(--sv-fire-glow) !important;
}
html[data-brand="silvermu"][data-site-template="citadel"] .ranking-table .rank-badge.gold::after {
color: #7a2e06;
text-shadow: none;
}
html[data-brand="silvermu"][data-site-template="citadel"] :is(.ranking-table .rank-badge.silver, .side-rank-badge--2, .ranking-card-rank.silver),
html[data-brand="silvermu"][data-site-template="citadel"] section.container.media-page[data-page="ranking"] .ranking-card-rank.silver {
border-color: rgba(238, 242, 248, 0.8) !important;
background: linear-gradient(180deg, #f7f9fc 0%, #cfd6e4 45%, #9aa4b6 100%) !important;
color: #161b24 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 14px -6px rgba(214, 222, 236, 0.6) !important;
}
html[data-brand="silvermu"][data-site-template="citadel"] :is(.ranking-table .rank-badge.bronze, .side-rank-badge--3, .ranking-card-rank.bronze),
html[data-brand="silvermu"][data-site-template="citadel"] section.container.media-page[data-page="ranking"] .ranking-card-rank.bronze {
border-color: rgba(240, 184, 138, 0.75) !important;
background: linear-gradient(180deg, #f3c39a 0%, #d08a57 48%, #9a5a30 100%) !important;
color: #24100a !important;
text-shadow: 0 1px 0 rgba(255, 220, 190, 0.4);
box-shadow: inset 0 1px 0 rgba(255, 230, 205, 0.55), 0 0 14px -6px rgba(208, 138, 87, 0.6) !important;
}
/* --- 9.9 404 hero: one scrim, no per-line pills, full metal title ---------- */
html[data-brand="silvermu"][data-site-template="citadel"] .hero-404 > :is(h1, p) {
display: block;
max-width: 62ch;
margin-inline: auto;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background-color: transparent;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
html[data-brand="silvermu"][data-site-template="citadel"] .hero-404 > p {
color: var(--sv-text);
font-size: 1.12rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
html[data-brand="silvermu"][data-site-template="citadel"] .hero-404 > h1 {
max-width: 18ch;
margin-bottom: 1rem;
font-family: var(--sv-font-display);
font-size: clamp(2.4rem, 4.6vw + 0.6rem, 4.6rem);
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.08;
text-transform: uppercase;
text-wrap: balance;
text-shadow: none;
background: var(--sv-metal);
background-size: 100% 1.08em;
background-repeat: repeat-y;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 0 26px rgba(124, 200, 255, 0.2));
}
html[data-brand="silvermu"][data-site-template="citadel"] .hero-404 > .error-path {
margin-top: 0.4rem;
color: var(--sv-text-muted);
font-family: var(--sv-font-ui);
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
html[data-brand="silvermu"][data-site-template="citadel"] .hero-404 .hero-shimmer {
display: none;
}
/* --- 9.10 News article: one frame (the article panel), not three --------- */
html[data-brand="silvermu"][data-site-template="citadel"] main.news-detail {
border: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
}
html[data-brand="silvermu"][data-site-template="citadel"] main.news-detail::before,
html[data-brand="silvermu"][data-site-template="citadel"] main.news-detail::after {
content: none !important;
}
/* --- 9.11 Alerts: an alert with no message takes no space ----------------- */
html[data-brand="silvermu"] :is(.form-alert, .alert):is(:empty, .is-empty) {
display: none !important;
}
/* --- 9.12 Register: the consent line wraps as text, not as flex items ------ */
html[data-brand="silvermu"] .form-check {
flex-wrap: nowrap;
align-items: flex-start;
}
html[data-brand="silvermu"] .form-check input[type="checkbox"] {
margin-top: 0.22em;
}
html[data-brand="silvermu"] .form-check label {
display: block;
min-width: 0;
}
html[data-brand="silvermu"] .form-check label a {
margin-left: 0;
}