MediaWiki:Citizen.css
MediaWiki interface page
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
{
--color-progressive-oklch__l: 68%;
--color-progressive-oklch__c: 0.14;
--color-progressive-oklch__h: 68;
--font-family-citizen-base: 'Inter';
--font-family-citizen-serif: 'Georgia';
--font-family-citizen-monospace: 'Roboto Mono';
}
.skin-theme-clientpref-night,
.skin-theme-clientpref-os {
--color-surface-0: #07090b;
--color-surface-1: #0d1116;
--color-surface-2: #141a22;
--color-surface-3: #1b232d;
--color-surface-4: #253040;
--color-base: #d9d6cc;
--color-emphasized: #fff4da;
--color-subtle: #a99f8c;
--color-link: #d7a84f;
}
body {
background:
radial-gradient(circle at 50% 0%, rgba(177, 126, 45, 0.18), transparent 34rem),
linear-gradient(180deg, #050608 0%, #0b1013 48%, #050608 100%);
}
.mw-body h1,
.mw-body h2,
.mw-body h3 {
letter-spacing: 0.02em;
}
.mf-home {
max-width: 1280px;
margin: 0 auto;
}
.mf-hero {
position: relative;
min-height: 460px;
display: flex;
align-items: center;
overflow: hidden;
border: 1px solid rgba(215, 168, 79, 0.26);
border-radius: 28px;
background:
linear-gradient(90deg, rgba(5, 6, 8, 0.96), rgba(5, 6, 8, 0.74), rgba(5, 6, 8, 0.45)),
url('/assets/mistfall-bg.jpg') center / cover no-repeat;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}
.mf-hero::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 80% 20%, rgba(215, 168, 79, 0.2), transparent 26rem),
linear-gradient(180deg, transparent, rgba(5, 6, 8, 0.88));
pointer-events: none;
}
.mf-hero-content {
position: relative;
z-index: 1;
max-width: 760px;
padding: 64px;
}
.mf-kicker {
display: inline-block;
margin-bottom: 18px;
padding: 8px 14px;
border: 1px solid rgba(215, 168, 79, 0.38);
border-radius: 999px;
background: rgba(215, 168, 79, 0.1);
color: #e8c16d;
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.mf-hero h1 {
margin: 0 0 18px;
color: #fff4da;
font-size: clamp(2.6rem, 7vw, 5.8rem);
line-height: 0.95;
text-shadow: 0 8px 28px rgba(0, 0, 0, 0.7);
}
.mf-hero p {
max-width: 680px;
color: #d8cfbd;
font-size: 1.18rem;
line-height: 1.7;
}
.mf-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
.mf-button a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 22px;
border-radius: 999px;
background: linear-gradient(135deg, #e1b45b, #8d5d1d);
color: #08090b !important;
font-weight: 800;
text-decoration: none;
box-shadow: 0 12px 32px rgba(215, 168, 79, 0.28);
}
.mf-button.secondary a {
background: rgba(255, 255, 255, 0.08);
color: #fff4da !important;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: none;
}
.mf-section-title {
margin: 44px 0 18px;
color: #e8c16d;
font-size: 0.9rem;
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.mf-grid {
display: grid;
grid-template-columns: repeat(3, minmax(260px, 1fr));
gap: 18px;
}
.mf-card,
.mf-list-card,
.mf-panel {
border: 1px solid rgba(215, 168, 79, 0.16);
border-radius: 22px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
rgba(13, 17, 22, 0.92);
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.26);
}
.mf-card {
padding: 26px;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.mf-card:hover {
transform: translateY(-4px);
border-color: rgba(215, 168, 79, 0.42);
background:
linear-gradient(180deg, rgba(215, 168, 79, 0.1), rgba(255, 255, 255, 0.018)),
rgba(16, 21, 27, 0.96);
}
.mf-card-with-image {
padding: 0;
overflow: hidden;
}
.mf-card-image {
position: relative;
height: 190px;
overflow: hidden;
background-color: #080b0f;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: filter 180ms ease;
}
.mf-card-image::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(5, 6, 8, 0.05), rgba(5, 6, 8, 0.88)),
radial-gradient(circle at 50% 20%, rgba(215, 168, 79, 0.16), transparent 70%);
pointer-events: none;
}
.mf-card-with-image:hover .mf-card-image {
filter: saturate(1.05) contrast(1.12) brightness(0.94);
}
.mf-card-content {
position: relative;
padding: 24px 26px 26px;
}
.mf-card-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
margin-bottom: 18px;
border-radius: 16px;
background: rgba(215, 168, 79, 0.12);
color: #e8c16d;
font-size: 1.5rem;
}
.mf-card-with-image .mf-card-icon {
margin-top: -48px;
position: relative;
z-index: 2;
border: 1px solid rgba(215, 168, 79, 0.22);
background: rgba(26, 22, 15, 0.92);
backdrop-filter: blur(8px);
}
.mf-card-classes {
background-image: url('/assets/cards/classes.jpg');
}
.mf-card-weapons {
background-image: url('/assets/cards/weapons.jpg');
}
.mf-card-maps {
background-image: url('/assets/cards/maps.jpg');
}
.mf-card-bosses {
background-image: url('/assets/cards/bosses.jpg');
}
.mf-card-guides {
background-image: url('/assets/cards/guides.jpg');
}
.mf-card h2,
.mf-list-card h2,
.mf-panel h2 {
margin-top: 0;
color: #fff4da;
}
.mf-card p,
.mf-panel p {
color: #bdb4a3;
line-height: 1.65;
}
.mf-card-link {
margin-top: 18px;
}
.mf-card-link a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 18px;
border-radius: 999px;
background: linear-gradient(135deg, #e1b45b, #8d5d1d);
color: #08090b !important;
font-weight: 900;
text-decoration: none;
box-shadow: 0 10px 26px rgba(215, 168, 79, 0.22);
transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.mf-card-link a:hover {
color: #08090b !important;
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow: 0 14px 34px rgba(215, 168, 79, 0.34);
}
.mf-panel {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 24px;
align-items: center;
margin-top: 28px;
padding: 30px;
}
.mf-panel-links {
display: grid;
gap: 10px;
}
.mf-panel-links a {
display: block;
padding: 14px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.055);
color: #fff4da !important;
font-weight: 800;
text-decoration: none;
}
.mf-wide-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.mf-list-card {
padding: 24px;
}
.mf-list-card ul {
margin-bottom: 0;
}
.mf-list-card li {
margin: 8px 0;
}
.mf-list-card a {
color: #e8c16d !important;
font-weight: 700;
text-decoration: none;
}
.citizen-page-header {
border-bottom-color: rgba(215, 168, 79, 0.16);
}
.mw-parser-output a {
transition: color 140ms ease;
}
.mw-parser-output a:hover {
color: #ffd780 !important;
}
.wikitable {
overflow: hidden;
border: 1px solid rgba(215, 168, 79, 0.22) !important;
border-radius: 16px;
background: rgba(13, 17, 22, 0.92) !important;
}
.wikitable th {
background: rgba(215, 168, 79, 0.14) !important;
color: #fff4da !important;
}
.wikitable td {
border-color: rgba(255, 255, 255, 0.09) !important;
}
/* Classes images */
.mf-card-mercenary {
background-image: url('/assets/cards/mercenary.jpg');
}
.mf-card-shadow-strix {
background-image: url('/assets/cards/shadowstrix.jpg');
}
.mf-card-seer {
background-image: url('/assets/cards/seer.jpg');
}
.mf-card-sorcerer {
background-image: url('/assets/cards/sorcerer.jpg');
}
.mf-card-black-arrow {
background-image: url('/assets/cards/blackarrow.jpg');
}
.mf-card-withered-knight {
background-image: url('/assets/cards/witheredknight.jpg');
}
/* Weapons images */
.mf-card-weapon1 {
background-image: url('/assets/cards/weapon1.jpg');
}
.mf-card-weapon2 {
background-image: url('/assets/cards/weapon2.jpg');
}
.mf-card-weapon3 {
background-image: url('/assets/cards/weapon3.jpg');
}
.mf-card-weapon4 {
background-image: url('/assets/cards/weapon4.jpg');
}
.mf-card-weapon5 {
background-image: url('/assets/cards/weapon5.jpg');
}
.mf-card-weapon6 {
background-image: url('/assets/cards/weapon6.jpg');
}
.mf-card-weapon7 {
background-image: url('/assets/cards/weapon7.jpg');
}
.mf-card-weapon8 {
background-image: url('/assets/cards/weapon8.jpg');
}
.mf-card-weapon9 {
background-image: url('/assets/cards/weapon9.jpg');
}
/* Maps images */
.mf-card-map1 {
background-image: url('/assets/cards/map1.jpg');
}
.mf-card-map2 {
background-image: url('/assets/cards/map2.jpg');
}
.mf-card-map3 {
background-image: url('/assets/cards/map3.jpg');
}
.mf-card-map4 {
background-image: url('/assets/cards/map4.jpg');
}
/* Bosses images */
.mf-card-boss1 {
background-image: url('/assets/cards/boss1.jpg');
}
.mf-card-boss2 {
background-image: url('/assets/cards/boss2.jpg');
}
.mf-card-boss3 {
background-image: url('/assets/cards/boss3.jpg');
}
.mf-card-boss4 {
background-image: url('/assets/cards/boss4.jpg');
}
.mf-card-boss5 {
background-image: url('/assets/cards/boss5.jpg');
}
.mf-card-boss6 {
background-image: url('/assets/cards/boss6.jpg');
}
/* Guides images */
.mf-card-guide1 {
background-image: url('/assets/cards/guide1.jpg');
}
.mf-card-guide2 {
background-image: url('/assets/cards/guide2.jpg');
}
.mf-card-guide3 {
background-image: url('/assets/cards/guide3.jpg');
}
.mf-card-guide4 {
background-image: url('/assets/cards/guide4.jpg');
}
.mf-card-guide5 {
background-image: url('/assets/cards/guide5.jpg');
}
.mf-card-guide6 {
background-image: url('/assets/cards/guide6.jpg');
}
.mf-card-guide7 {
background-image: url('/assets/cards/guide7.jpg');
}
/* Home social icons */
.mf-home-social {
display: flex;
justify-content: center;
align-items: center;
gap: 22px;
width: 100%;
margin: 34px auto 34px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
text-align: center;
clear: both;
}
.mf-social-link {
display: inline-flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.mf-social-link a {
display: inline-flex !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
overflow: hidden !important;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
text-decoration: none !important;
}
.mf-social-link a::after,
.mf-social-link a::before {
display: none !important;
content: none !important;
}
.mf-social-icon {
display: block;
width: 40px;
height: 40px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: transform 150ms ease, opacity 150ms ease;
}
.mf-social-link a:hover .mf-social-icon {
transform: translateY(-2px) scale(1.08);
opacity: 0.85;
}
.mf-social-discord {
background-image: url('/assets/social/discord.svg');
}
.mf-social-facebook {
background-image: url('/assets/social/facebook.svg');
}
.mf-social-x {
background-image: url('/assets/social/x.svg');
}
.mf-social-youtube {
background-image: url('/assets/social/youtube.svg');
}
.mf-social-official {
background-image: url('/assets/social/official.svg');
}
@media (max-width: 1050px) {
.mf-grid {
grid-template-columns: repeat(2, minmax(260px, 1fr));
}
}
@media (max-width: 900px) {
.mf-hero-content {
padding: 38px 26px;
}
.mf-grid,
.mf-wide-grid,
.mf-panel {
grid-template-columns: 1fr;
}
.mf-card-image {
height: 190px;
}
}
@media (max-width: 700px) {
.mf-home-social {
gap: 18px;
margin: 28px auto 30px;
}
.mf-social-link,
.mf-social-link a {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
}
.mf-social-icon {
width: 36px;
height: 36px;
}
}
@media (max-width: 430px) {
.mf-home-social {
gap: 14px;
}
.mf-social-link,
.mf-social-link a {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
}
.mf-social-icon {
width: 32px;
height: 32px;
}
}