MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
--font-family-citizen-base: 'Inter';
--font-family-citizen-serif: 'Noto Serif';
letter-spacing: 0.02em;
font-kerning: normal;
--color-surface-0: #141414;
--color-surface-1: #1a1a1a;
--color-surface-2: #1c1c1c;
--color-base: #ddd;
--color-base--subtle: #aaa;
--color-base--emphasized: #fff;
--color-link: #ccffff;
--color-primary--hover: #ffcc00;
}

a, a.external {
--color-link: #ccffff;
--color-link--hover: #ffcc00;
text-decoration: none;
}

/* Hide Main Page Header */
.page-Main_Page .mw-body-header {
display: none !important;
}

/* Footer Customisation */
.citizen-footer__content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) 0;
}
.citizen-footer__siteinfo {
display: flex;
flex-direction: column;
gap: var(--space-xs);
align-items: center;
text-align: center;
max-width: 720px;
}
#footer-places ul {
flex-direction: row;
justify-content: center;
}
.citizen-footer__bottom {
display: flex;
flex-direction: column;
text-align: center;
}
#footer-places-about,
#footer-places-mobileview,
#footer-places-disclaimers {
display: none;
}

/* Hiding Page-Info */
.page-info {
display: none;
}

/* Responsive Images */
img {
max-width: 100%;
height: auto;
}

#citizen-drawer__card {
padding: 1em;	
}

.citizen-toc__listItem--active > .citizen-toc__link {
color: var(--color-link);
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
background-color: var(--color-link);
}

#siteSub, #contentSub, #contentSub2 {
display: none;
}

/* Flip Cards*/
.flip-card {
width: 180px;
height: 80px;
background: var(--color-surface-1);
border: 1px solid #ffffff1a;
border-radius: 8px;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.5s;
transform-style: preserve-3d;
border-radius: 8px;
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip-card-front {
display: grid;
align-items: center;
text-align: center;
border-radius: 8px;
}

.flip-card-back {
display: grid;
grid-template-columns: 1fr 1fr;
align-content: space-evenly;
padding: 8px 16px;
background-color: var(--color-surface-1);
font-size: 0.9em;
transform: rotateY(180deg);
border-radius: 8px;
}

.flip-label {
color: #cff;
font-weight: bold;
font-size: 1em;
}

.flip-xp {
font-size: 0.8em;
color: var(--color-base--subtle);
}

/* Talent Cards */
.talents-flipcard {
width: 120px;
height: 120px;
background: var(--color-surface-1);
border: 1px solid #ffffff1a;
border-radius: 8px;
}

.talents-flipcard-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.5s;
transform-style: preserve-3d;
border-radius: 8px;
}

.talents-flipcard:hover .talents-flipcard-inner {
transform: rotateY(180deg);
}

.talents-flipcard-front, .talent-flipcard-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.talents-flipcard-front {
display: grid;
align-items: center;
text-align: center;
border-radius: 8px;
}

.talent-flipcard-back {
display: grid;
grid-auto-flow: row;
align-content: space-evenly;
padding: 8px 16px;
background-color: var(--color-surface-1);
font-size: 0.9em;
transform: rotateY(180deg);
border-radius: 8px;
}

.talent-label {
color: var(--color-base--emphasized);
font-size: 0.9em;
}

.talent-sub {
font-size: 0.8em;
color: var(--color-base--subtle);
}

.mono {
font-family: 'Cousine', monospace;
font-optical-sizing: auto;
font-style: normal;
}

.red {
color:#ff6666;
}

.green {
color:#66ff66;
}

.responsive-grid-section {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(min(360px,100%),1fr));
grid-gap: 2em;
}