/* MonstarX brand overrides on top of the Source theme.
*
* Goals:
* 1. ChatGPT-style neutral palette (greys + blacks + whites) instead of the
* pink/red Ghost accent. The brand pink stays as a *highlight* only.
* 2. Real dark/light theme support driven by [data-mx-theme] on .
* The user's choice (or system default) is set before paint by the
* bootstrap script in default.hbs.
* 3. Re-styled language switcher and theme toggle to match.
*
* We avoid touching Source's compiled screen.css — all overrides live here.
*/
/* ─────────────── Theme tokens ─────────────── */
:root {
/* Default = light. Tokens get overridden by [data-mx-theme="dark"]. */
--mx-bg: #ffffff;
--mx-bg-elevated: #f7f7f8;
--mx-fg: #0d0d0d;
--mx-fg-muted: #5d5d5d;
--mx-border: rgba(0, 0, 0, 0.10);
--mx-border-strong: rgba(0, 0, 0, 0.18);
--mx-button-bg: #0d0d0d;
--mx-button-fg: #ffffff;
--mx-button-bg-hover: #2f2f2f;
--mx-button-bg-secondary: transparent;
--mx-button-fg-secondary: #0d0d0d;
--mx-button-border-secondary: rgba(0, 0, 0, 0.18);
--mx-button-bg-secondary-hover: rgba(0, 0, 0, 0.06);
--mx-shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.12);
/* Brand pink — used SPARINGLY as link/highlight, not as primary button */
--mx-brand: #ff1a75;
}
[data-mx-theme="dark"] {
--mx-bg: #212121;
--mx-bg-elevated: #2f2f2f;
--mx-fg: #ececec;
--mx-fg-muted: #b4b4b4;
--mx-border: rgba(255, 255, 255, 0.10);
--mx-border-strong: rgba(255, 255, 255, 0.18);
--mx-button-bg: #ececec;
--mx-button-fg: #0d0d0d;
--mx-button-bg-hover: #ffffff;
--mx-button-bg-secondary: transparent;
--mx-button-fg-secondary: #ececec;
--mx-button-border-secondary: rgba(255, 255, 255, 0.20);
--mx-button-bg-secondary-hover: rgba(255, 255, 255, 0.08);
--mx-shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.5);
}
/* Apply tokens to base + Ghost-set CSS vars. We override --background-color
* (Source theme reads this for body bg) and recolor Source's neutral surfaces. */
html[data-mx-theme="dark"] {
--background-color: var(--mx-bg);
}
html[data-mx-theme="dark"] body {
background: var(--mx-bg);
color: var(--mx-fg);
}
html[data-mx-theme="dark"] .gh-navigation,
html[data-mx-theme="dark"] .gh-footer {
background: var(--mx-bg);
color: var(--mx-fg);
border-color: var(--mx-border);
}
html[data-mx-theme="dark"] .gh-article-meta,
html[data-mx-theme="dark"] .gh-article-meta-content,
html[data-mx-theme="dark"] .gh-article-meta-date,
html[data-mx-theme="dark"] .gh-article-meta-length {
color: var(--mx-fg-muted);
}
html[data-mx-theme="dark"] .gh-content,
html[data-mx-theme="dark"] .gh-article-title,
html[data-mx-theme="dark"] .gh-article-excerpt {
color: var(--mx-fg);
}
html[data-mx-theme="dark"] .gh-content a {
color: var(--mx-fg);
text-decoration-color: var(--mx-brand);
}
html[data-mx-theme="dark"] .gh-content a:hover {
color: var(--mx-brand);
}
html[data-mx-theme="dark"] .gh-card-link,
html[data-mx-theme="dark"] .gh-card,
html[data-mx-theme="dark"] .post-card,
html[data-mx-theme="dark"] .gh-feed .post-card,
html[data-mx-theme="dark"] .gh-container {
background: var(--mx-bg);
color: var(--mx-fg);
border-color: var(--mx-border);
}
html[data-mx-theme="dark"] .gh-card-title,
html[data-mx-theme="dark"] .gh-card-excerpt {
color: var(--mx-fg);
}
/* ─────────────── Buttons (neutral, not pink) ─────────────── */
.gh-button,
button.gh-button,
a.gh-button {
background: var(--mx-button-bg) !important;
color: var(--mx-button-fg) !important;
border-color: var(--mx-button-bg) !important;
border-radius: 999px;
transition: background 0.15s ease;
}
.gh-button:hover,
button.gh-button:hover,
a.gh-button:hover {
background: var(--mx-button-bg-hover) !important;
border-color: var(--mx-button-bg-hover) !important;
}
/* Subscribe button on portal links — same treatment */
.gh-portal-button,
[data-portal] {
border-radius: 999px;
}
/* ─────────────── Language switcher (redesigned) ─────────────── */
.mx-lang-switcher {
position: relative;
margin-left: 0.75rem;
font-size: 0.875rem;
}
.mx-lang-toggle {
background: var(--mx-button-bg-secondary);
color: var(--mx-button-fg-secondary);
border: 1px solid var(--mx-button-border-secondary);
border-radius: 999px;
padding: 0.4rem 0.6rem 0.4rem 0.7rem;
cursor: pointer;
font: inherit;
display: inline-flex;
align-items: center;
gap: 0.4rem;
line-height: 1;
transition: background 0.15s ease, border-color 0.15s ease;
}
.mx-lang-toggle:hover {
background: var(--mx-button-bg-secondary-hover);
border-color: var(--mx-border-strong);
}
.mx-lang-toggle .mx-globe {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.mx-lang-toggle .mx-lang-current {
font-weight: 500;
}
.mx-lang-menu {
position: absolute;
top: calc(100% + 0.4rem);
right: 0;
width: 18rem;
max-width: calc(100vw - 2rem);
max-height: 70vh;
overflow-y: auto;
background: var(--mx-bg-elevated);
color: var(--mx-fg);
border: 1px solid var(--mx-border);
border-radius: 12px;
box-shadow: var(--mx-shadow-pop);
list-style: none;
padding: 0.4rem;
margin: 0;
z-index: 1000;
/* 2-column grid of language pills */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.2rem;
}
.mx-lang-menu[hidden] { display: none; }
.mx-lang-menu li {
padding: 0.55rem 0.7rem;
cursor: pointer;
border-radius: 8px;
line-height: 1.2;
font-size: 0.875rem;
transition: background 0.1s ease;
}
.mx-lang-menu li:hover {
background: var(--mx-button-bg-secondary-hover);
}
.mx-lang-menu li[aria-selected="true"] {
background: var(--mx-button-bg);
color: var(--mx-button-fg);
font-weight: 500;
}
/* ─────────────── Theme toggle button (sun ↔ moon) ─────────────── */
.mx-theme-toggle {
background: var(--mx-button-bg-secondary);
color: var(--mx-button-fg-secondary);
border: 1px solid var(--mx-button-border-secondary);
border-radius: 999px;
width: 2.1rem;
height: 2.1rem;
padding: 0;
margin-left: 0.5rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, border-color 0.15s ease;
}
.mx-theme-toggle:hover {
background: var(--mx-button-bg-secondary-hover);
border-color: var(--mx-border-strong);
}
.mx-theme-toggle svg {
width: 16px;
height: 16px;
}
/* Show sun in dark mode (click → goes light), moon in light mode */
.mx-theme-toggle .mx-icon-sun { display: none; }
.mx-theme-toggle .mx-icon-moon { display: inline-block; }
[data-mx-theme="dark"] .mx-theme-toggle .mx-icon-sun { display: inline-block; }
[data-mx-theme="dark"] .mx-theme-toggle .mx-icon-moon { display: none; }
/* ─────────────── Logo (light/dark variants) ─────────────── */
/* Two ![]()
tags inside : .mx-logo-light shows in light theme,
* .mx-logo-dark shows in dark theme. We use [data-mx-theme] on
* to flip them — that way the user's manual theme toggle wins over the
* media query (which only respects system theme). */
.gh-navigation-logo .mx-logo-light,
.gh-footer-logo .mx-logo-light {
display: inline-block;
}
.gh-navigation-logo .mx-logo-dark,
.gh-footer-logo .mx-logo-dark {
display: none;
}
[data-mx-theme="dark"] .gh-navigation-logo .mx-logo-light,
[data-mx-theme="dark"] .gh-footer-logo .mx-logo-light {
display: none;
}
[data-mx-theme="dark"] .gh-navigation-logo .mx-logo-dark,
[data-mx-theme="dark"] .gh-footer-logo .mx-logo-dark {
display: inline-block;
}
/* Constrain logo size so it never blows up the nav height */
.gh-navigation-logo img {
max-height: 28px;
width: auto;
object-fit: contain;
}
.gh-footer-logo img {
max-height: 26px;
width: auto;
object-fit: contain;
}