/* ---------------------------------------------------------------------------
games.leftistsolidarity.com
Standalone stylesheet for the games origin.
This is a SEPARATE ORIGIN from leftistsolidarity.com, so it cannot share the
main site's style.css. The tokens, class names and chrome below are copied
from leftistsolidarity.com/style.css so the two sites stay identical; the
only new things are the .game-* components at the bottom.
Authored mobile-first: base rules are the 390px layout, min-width queries
add the wider layout. The rendered result matches the main site's
desktop-first rules at every width.
--------------------------------------------------------------------------- */
/* --- Theme tokens ---------------------------------------------------------
Dark is the default, exactly as on the main site: :root is dark and the
.light class stamped on by the toggle is the only override. There is
deliberately no prefers-color-scheme block here - leftistsolidarity.com has
none either, so adding one would flip the colour scheme under a light-OS
visitor the moment they clicked through from the main site.
-------------------------------------------------------------------------- */
:root {
--bg: #121212;
--surface: #1a1a1a;
--surface-border: #2a2a2a;
--text: #f0f0f0;
--muted: #b8b8b8;
--accent: #e53935;
--accent-2: #ff4d4d;
--accent-readable: #ff7a7a;
--header-bg: #0f0f0f;
--nav-hover: #222;
--input-bg: #131313;
--input-border: #3a3a3a;
--timeline-bg: #151515;
--accent-soft: rgba(229,57,53,0.22);
--accent-faint: rgba(229,57,53,0.15);
--accent-ring: rgba(229,57,53,0.18);
--card-inset: rgba(229,57,53,0.08);
}
.light {
--bg: #f8f9fa;
--surface: #ffffff;
--surface-border: #dee2e6;
--text: #212529;
--muted: #6c757d;
--accent: #c62828;
--accent-2: #d32f2f;
--accent-readable: #b71c1c;
--header-bg: #ffffff;
--nav-hover: #f1f3f5;
--input-bg: #ffffff;
--input-border: #ced4da;
--timeline-bg: #ffffff;
--accent-soft: rgba(198,40,40,0.12);
--accent-faint: rgba(198,40,40,0.18);
--accent-ring: rgba(198,40,40,0.16);
--card-inset: rgba(198,40,40,0.06);
}
/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html {
width: 100%;
overflow-x: hidden;
}
body {
margin: 0;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
min-width: 0;
overflow-x: clip;
}
img,
svg,
video,
iframe { max-width: 100%; }
img,
video { height: auto; }
input,
button,
textarea,
select {
max-width: 100%;
font: inherit;
}
.container {
width: min(1100px, calc(100% - 1rem));
margin: 0 auto;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --- Header -------------------------------------------------------------- */
.site-header {
border-bottom: 1px solid var(--surface-border);
background: var(--header-bg);
position: sticky;
top: 0;
z-index: 1000;
}
.nav-wrap {
display: flex;
flex-direction: column;
align-items: stretch;
gap: .6rem;
padding: 0.9rem 0;
}
.brand-cluster {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
}
.brand {
color: var(--text);
text-decoration: none;
font-weight: 700;
overflow-wrap: anywhere;
}
.brand span { color: var(--accent); }
.nav-actions {
display: flex;
align-items: stretch;
flex-direction: column;
gap: .6rem;
width: 100%;
min-width: 0;
}
.nav-actions nav,
.nav-list { width: 100%; }
.nav-list {
align-items: stretch;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
list-style: none;
padding: 0;
margin: 0;
}
.nav-list > li {
align-items: stretch;
display: flex;
line-height: 1;
}
.nav-list a {
align-items: center;
box-sizing: border-box;
color: var(--text);
display: inline-flex;
justify-content: center;
line-height: 1;
min-height: 2.75rem; /* 44px tap target */
text-decoration: none;
padding: 0.45rem 0.5rem;
border-radius: 0.45rem;
width: 100%;
}
.nav-list a:hover,
.nav-list a.active {
background: var(--nav-hover);
color: var(--accent-readable);
text-decoration: underline;
text-underline-offset: 0.18em;
text-decoration-thickness: 2px;
}
.nav-list a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Copied from leftistsolidarity.com/style.css:90-102 so the Capitalist Watch
item in the nav looks the same on both sites. The icon has to be the local
copy of capwatchshortcut.png: img-src 'self' in _headers blocks an ![]()
pointing at leftistsolidarity.com. */
.capitalist-watch-tab {
display: inline-flex;
align-items: center;
gap: 0.35em;
}
.capitalist-watch-tab img {
display: block;
width: 1em;
height: 1em;
object-fit: cover;
object-position: center;
border-radius: 0.15em;
flex: 0 0 1em;
}
.theme-toggle {
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem; /* 44px tap target */
border: 1px solid var(--surface-border);
border-radius: 999px;
background: transparent;
color: var(--text);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
background: var(--nav-hover);
border-color: var(--accent);
color: var(--accent-readable);
}
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; }
.theme-toggle .icon-sun { display: none; }
.light .theme-toggle .icon-moon { display: none; }
.light .theme-toggle .icon-sun { display: block; }
/* --- Layout primitives --------------------------------------------------- */
main { padding: 1rem 0 2rem; }
.card {
background: var(--surface);
border: 1px solid var(--surface-border);
border-radius: 14px;
padding: 1rem;
min-width: 0;
overflow-wrap: break-word;
box-shadow: 0 0 0 1px var(--card-inset) inset;
}
.hero { margin-bottom: 1.25rem; }
.badge {
color: var(--accent-readable);
text-transform: uppercase;
letter-spacing: .08em;
font-size: .8rem;
}
.grid { display: grid; gap: 1rem; }
main > .card + .card,
main > .card + .grid,
main > .grid + .card,
main > .games-section + .card,
.hero + .grid,
.hero + .games-section {
margin-top: 1rem;
}
.grid > .card { margin-top: 0; }
/* --- Buttons and links --------------------------------------------------- */
.btn {
display: inline-block;
max-width: 100%;
min-height: 2.75rem; /* 44px tap target */
text-align: center;
text-decoration: none;
padding: 0.7rem 1rem;
border-radius: 0.6rem;
font-weight: 600;
border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--surface-border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-readable); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cta-group {
display: flex;
gap: .7rem;
flex-wrap: wrap;
margin-top: .8rem;
}
.cta-group .btn { width: 100%; }
.text-link {
color: var(--accent-readable);
overflow-wrap: anywhere;
text-decoration: underline;
text-underline-offset: 0.14em;
text-decoration-thickness: 1.5px;
}
.small-note { color: var(--muted); font-size: .92rem; }
/* --- Footer -------------------------------------------------------------- */
.site-footer {
border-top: 1px solid var(--surface-border);
background: var(--header-bg);
padding: 1rem 0;
}
.footer-wrap {
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.footer-links {
list-style: none;
display: flex;
gap: 1rem;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--accent-readable); }
.footer-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* --- Support block ------------------------------------------------------- */
.support-buttons {
display: grid;
justify-items: center;
gap: 1rem;
margin: 1.5rem 0;
}
.support-buttons > div { max-width: 100%; text-align: center; }
.support-buttons form { max-width: 100%; }
.support-buttons .btn { width: 100%; }
/* --- Games list (new to this origin) ------------------------------------- */
.game-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1rem;
}
.game-card {
display: grid;
gap: 0.9rem;
color: inherit;
text-decoration: none;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.game-card:hover,
.game-card:focus-visible { border-color: var(--accent); }
.game-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.game-card:hover .game-card-cta { color: var(--accent-readable); }
.game-cover {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 0.7rem;
border: 1px solid var(--surface-border);
background: var(--timeline-bg);
}
.game-card-body {
display: grid;
gap: 0.45rem;
align-content: start;
min-width: 0;
}
.game-card-body h2 {
margin: 0;
font-size: 1.22rem;
line-height: 1.25;
}
.game-hook {
margin: 0;
color: var(--muted);
}
.game-tags {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0;
margin: 0.15rem 0 0;
}
.game-tags li {
background: var(--timeline-bg);
border: 1px solid var(--surface-border);
border-radius: 999px;
color: var(--muted);
font-size: 0.86rem;
line-height: 1;
padding: 0.4rem 0.7rem;
}
.game-tags li.is-status {
color: var(--accent-readable);
border-color: var(--accent);
font-weight: 800;
letter-spacing: 0.01em;
}
.game-card-cta {
color: var(--accent-readable);
font-weight: 600;
margin-top: 0.25rem;
}
/* --- Wider viewports ----------------------------------------------------- */
@media (min-width: 641px) {
.container { width: min(1100px, calc(100% - 2rem)); }
main { padding: 2rem 0 3rem; }
.card { padding: 1.25rem; }
.nav-wrap {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.nav-actions {
flex-direction: row;
align-items: center;
gap: 0.75rem;
width: auto;
}
.nav-actions nav { width: auto; min-width: 0; }
.nav-list { align-items: center; gap: 0.75rem; width: auto; }
.nav-list > li { align-items: center; }
.nav-list a { width: auto; padding: 0.4rem 0.65rem; }
.theme-toggle { align-self: auto; }
.cta-group .btn { width: auto; }
.support-buttons .btn { width: auto; }
}
@media (min-width: 760px) {
.game-card {
grid-template-columns: 280px 1fr;
gap: 1.25rem;
align-items: start;
}
/* .is-featured is for a list with ONE game in it: a lone 280px card reads as
a page that failed to load the rest of itself. A wider cover makes the
single entry look deliberate. Take the class off .game-list in index.html
as soon as there are two games, or the second card inherits a layout meant
for a headline. */
.game-list.is-featured .game-card { grid-template-columns: 420px 1fr; }
}
@media (min-width: 1000px) {
.game-list.is-featured .game-card { grid-template-columns: 520px 1fr; }
}
/* Pointer-precise devices can have the main site's tighter chrome back. */
@media (min-width: 641px) and (pointer: fine) {
.nav-list a { min-height: 2.2rem; }
.theme-toggle { width: 2.4rem; height: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 0.01ms !important; }
}
/* --- Game detail pages (commie-vs-zombies.html and friends) ---------------
One stylesheet for the whole origin: the detail pages link this same file,
there is no per-page CSS. Everything below reuses the tokens above, and is
authored mobile-first like the rest of the file.
-------------------------------------------------------------------------- */
.game-detail-hero h1 {
margin: 0.35rem 0 0.5rem;
font-size: 1.7rem;
line-height: 1.15;
letter-spacing: -0.01em;
}
/* The one-line hook under the title. Not .game-hook — that one is the muted
line inside the cards on index.html, and this needs to read as the lede. */
.game-lede {
margin: 0;
font-size: 1.08rem;
line-height: 1.5;
}
.game-detail-hero .game-tags { margin-top: 0.9rem; }
/* The play button is the point of the page: bigger than a normal .btn and
comfortably past a 44px tap target even before the mobile width: 100%. */
.btn-play {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.25rem;
padding: 0.95rem 1.5rem;
font-size: 1.05rem;
}
.game-section-intro { margin: 0 0 1rem; }
/* --- Screenshot grid ----------------------------------------------------- */
.shot-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.shot-thumb {
display: block;
width: 100%;
padding: 0;
background: var(--timeline-bg);
border: 1px solid var(--surface-border);
border-radius: 14px;
overflow: hidden;
color: inherit;
cursor: zoom-in;
transition: border-color 0.2s ease;
}
.shot-thumb:hover { border-color: var(--accent); }
.shot-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shot-thumb img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* --- Video ---------------------------------------------------------------
Nothing uses this yet: there is no clip, so commie-vs-zombies.html has no