/*
Theme Name: Capture Gallery
Theme URI: https://capture.gallery
Author: Sebastien Marchal
Author URI: https://capture.gallery
Description: A masonry-style screenshot portfolio gallery with game metadata, tags, and live filtering. Clean white minimalist design so images take centre stage.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: screenshot-gallery
*/
/* =============================================================================
DESIGN TOKENS
Change colours, spacing, and typography here — everything else adapts.
============================================================================= */
:root {
/* Palette — light mode (default) */
--bg: #ffffff;
--bg-off: #f9f9f9;
--border: #d8d8d8;
--border-hover: #aaaaaa;
--text-primary: #111111;
/* --text-secondary: #8100d6; AAA compliant */
--text-secondary: #a23cfb;
--text-secondary-alpha: rgba(162, 60, 251, 0.3);
--text-muted: #767676;
--accent: #111111;
--accent-inv: #ffffff;
--lightbox-bg: rgba(255, 255, 255, 0.90);
/* Colour-filter swatch dots — cosmetic only (they don't affect which
screenshots match; filtering uses hue ranges in the AJAX handler).
Tweak the swatch appearance here in one place. */
--swatch-reds: #e72f25;
--swatch-oranges: #fc790f;
--swatch-yellows: #dbc200;
--swatch-greens: #279c2d;
--swatch-teals: #189f94;
--swatch-blues: #2265d2;
--swatch-purples: #a23cfb;
--swatch-pinks: #c64c79;
/* Typography */
--font-mono: 'IBM Plex Mono', 'Courier New', monospace;
--font-sans: 'Montserrat', 'Helvetica Neue', 'Helvetica', sans-serif;
--letter-spacing-wide: 0.12em;
--letter-spacing-medium: 0.10em;
--letter-spacing-narrow: 0.08em;
--letter-spacing-tight: 0.05em;
--letter-spacing-negative: -0.02em;
/* ──────────────────────────────────────────────────────────────────────────
GUTTER
Change --gap here to adjust spacing between ALL grid items at once.
Set to 0 for a borderless, edge-to-edge tiled look.
────────────────────────────────────────────────────────────────────────── */
--gap: 30px;
--margin: 30px;
--container-max: 1800px;
--header-h: 80px;
--toolbar-h: 44px;
--t-fast: 150ms ease;
--t-base: 220ms ease;
--t-slow: 360ms cubic-bezier(0.4, 0, 0.2, 1);
--radius-pill: 100px;
--content-width: 680px; /* static page content width */
}
/* Dark mode — activated by [data-theme="dark"] on */
[data-theme="dark"] {
--bg: #000000;
--bg-off: #141414;
--border: #282828;
--border-hover: #555555;
--text-primary: #f0f0f0;
/* --text-secondary: #bf78fc; AAA */
--text-secondary: #aa4cfb;
--text-muted: #999999;
--accent: #f0f0f0;
--accent-inv: #0a0a0a;
--lightbox-bg: rgba(0, 0, 0, 0.90);
}
/* =============================================================================
RESET
============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
zoom: 1.25; /* 125% global scale */
}
body {
background: var(--bg);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.6;
min-height: 100vh;
transition: background var(--t-base), color var(--t-base);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; touch-action: manipulation; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-mono); line-height: 1.25; }
/* =============================================================================
SITE LAYOUT
============================================================================= */
.site-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* No padding-top needed — header scrolls with content */
.site-main {
flex: 1;
}
/* =============================================================================
STATIC PAGE (page.php)
============================================================================= */
.sg-page {
max-width: var(--container-max);
margin: 0 auto;
padding-bottom: 64px;
}
.sg-page-header {
margin: 60px auto 40px auto;
}
.sg-page-featured-image {
}
.sg-page-title {
font-family: var(--font-sans);
font-size: 4em;
font-weight: 700;
line-height: 1;
text-wrap: balance;
letter-spacing: var(--letter-spacing-negative);
color: var(--text-secondary);
margin: 0 auto;
padding: 0 var(--gap);
max-width: var(--content-width);
}
.sg-page-content {
font-size: 16px;
line-height: 1.6;
color: var(--text-primary);
margin: 0 auto;
padding: 0 var(--gap);
max-width: var(--content-width);
}
.sg-page-content h2,
.sg-page-content h3,
.sg-page-content h4 {
font-family: var(--font-sans);
color: var(--text-primary);
letter-spacing: var(--letter-spacing-medium);
text-transform: uppercase;
text-wrap: balance;
font-weight: 800;
margin: 4em 0 1.5em;
}
.sg-page-content h2 { font-size: .8em; color: var(--text-secondary); }
.sg-page-content h3 { font-size: .8em; }
.sg-page-content h4 { font-size: .7em; }
.sg-page-content p { margin: 0 0 1.25em; }
.sg-page-content a { text-decoration: none; color: var(--text-secondary); transition: color var(--t-fast); border-bottom: 1px solid var(--text-secondary); }
.sg-page-content a:active { color: var(--accent); border-color: var(--accent); }
.sg-page-content ul,
.sg-page-content ol { padding-left: 1.5em; margin: 0 0 1.25em; }
.sg-page-content li { margin-bottom: 0.4em; }
/* =============================================================================
HEADER — scrolls with content (not sticky/fixed)
============================================================================= */
.site-header {
/* NOT fixed — scrolls with the page */
position: relative;
height: var(--header-h);
background: var(--bg);
display: flex;
align-items: center;
padding: 0 var(--gap);
gap: 32px;
transition: background var(--t-base);
border-bottom: none;
}
[data-theme="dark"] .site-header {
background: var(--bg);
}
/* wordmark */
.site-branding { flex-shrink: 0; }
.site-title {
padding: 3px 0;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
letter-spacing: var(--letter-spacing-narrow);
text-transform: uppercase;
color: var(--text-primary);
transition: opacity var(--t-fast), color var(--t-fast);
}
.sg-icon-logo { width: 20px; height: 20px; margin: 0 5px -5px 0; transition: transform var(--t-fast); }
.site-title:hover .sg-icon-logo { transform: rotate(180deg) scale(1.1); }
.sg-mobile-title {
display: none; /* Hidden on desktop */
}
/* ── Primary Nav ──────────────────────────────────────────────────────────── */
.sg-nav {
display: flex;
align-items: center;
gap: 0; /* Gap between links is handled by padding on each link */
flex: 1;
flex-wrap: nowrap;
/*overflow: hidden; */ /* Overflow handled by mobile menu on small screens */
}
/*
* Filter links — plain text, no border, no pill shape.
* Color change on hover is the only affordance, consistent with
* modern editorial / portfolio nav patterns.
*/
.sg-nav-link {
background: none;
border: none;
padding: 6px 12px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: color var(--t-fast);
white-space: nowrap;
line-height: 1;
/* Explicit no-underline */
text-decoration: none;
}
.sg-nav-link:focus { color: var(--text-primary); }
.sg-nav-link.is-active,
.sg-nav-link[aria-expanded="true"] {
color: var(--text-primary);
}
/* Per-game screenshot count badge */
.sg-nav-count {
margin-left: 4px;
font-size: 11px;
font-weight: 400;
letter-spacing: 0em;
color: var(--text-muted);
}
.sg-nav-link .sg-ionic,
.sg-drawer-text-btn .sg-ionic {
display: inline-block;
margin: 0 0 -3px 5px;
}
/* "More ↓" button */
.sg-nav-link .sg-more-arrow {
display: inline-block;
transition: transform var(--t-fast);
margin: 0 0 -3px 2px;
font-style: normal;
}
.sg-nav-link[aria-expanded="true"] .sg-more-arrow {
transform: rotate(180deg);
}
/* ── Right Controls ───────────────────────────────────────────────────────── */
.sg-header-controls {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
margin-left: auto;
}
/* Gallery count — used in the header right controls - disabled for now */
.sg-header-count {
display: none;
}
.gallery-count {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-narrow);
white-space: nowrap;
}
.gallery-count strong { color: var(--text-primary); }
/* ── Search ── */
.sg-search-wrap {
display: flex;
align-items: center;
position: relative;
}
.sg-search-toggle {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 0;
font-size: 18px;
display: flex;
align-items: center;
transition: color var(--t-fast);
}
.sg-search-field {
position: absolute;
right: 25px; /* Sit beside the toggle icon */
width: 0;
opacity: 0;
background: var(--bg);
border: none;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 13px;
padding: 6px 8px;
outline: none;
pointer-events: none;
transition: width var(--t-base), opacity var(--t-base), border-color var(--t-base);
white-space: nowrap;
}
.sg-search-wrap.is-open .sg-search-field {
width: 200px;
opacity: 1;
border-color: var(--border);
border: none;
pointer-events: all;
}
.sg-search-field::placeholder { color: var(--text-muted); }
.sg-search-field::-webkit-search-cancel-button {
-webkit-appearance: none;
background-image: url('assets/svg/close-outline.svg');
background-size: cover;
height: 15px;
width: 15px;
cursor: pointer;
}
/* ── Dark/Light Mode Toggle ── */
.sg-theme-toggle {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 0;
font-size: 18px;
display: flex;
align-items: center;
transition: color var(--t-fast);
}
/* Show moon in light mode, sun in dark mode */
.sg-icon-sun { display: none; }
.sg-icon-moon { display: block; }
[data-theme="dark"] .sg-icon-sun { display: block; }
[data-theme="dark"] .sg-icon-moon { display: none; }
/* ── Mobile hamburger ── */
.sg-mobile-menu-btn {
display: none; /* Hidden on desktop */
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 8px;
transition: color var(--t-base);
}
.sg-mobile-menu-btn.is-open,
.sg-mobile-icon-btn.is-open { color: var(--text-primary); }
.sg-hamburger {
display: flex;
flex-direction: column;
gap: 4px;
width: 15px;
}
.sg-hamburger span {
display: block;
height: 1px;
background: currentColor;
transition: transform var(--t-base), opacity var(--t-base);
}
.sg-mobile-menu-btn.is-open .sg-hamburger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sg-mobile-menu-btn.is-open .sg-hamburger span:nth-child(2) { opacity: 0; }
.sg-mobile-menu-btn.is-open .sg-hamburger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
/* Mobile icon-only buttons (Shuffle, Most Liked, Search)
Hidden on desktop; shown via the ≤960 px media query below. */
.sg-mobile-icon-btn {
display: none;
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 0;
align-items: center;
justify-content: center;
transition: color var(--t-fast);
line-height: 1;
}
.sg-mobile-icon-btn ion-icon {
font-size: 18px;
width: 18px;
height: 18px;
display: block;
}
.sg-mobile-icon-btn.is-active { color: var(--text-primary); }
.sg-drawer-sort-filter { display: none; }
/* =============================================================================
GAMES DRAWER
Full-width panel that expands below the header when "More" is clicked.
Since the header is not fixed, the drawer uses position:relative flow
and is inserted right after the header in the DOM.
============================================================================= */
.sg-games-drawer {
position: relative;
z-index: 190;
background: var(--bg);
border-bottom: none;
padding: 0 var(--gap);
/* Hidden: collapsed vertically; visibility:hidden ensures accessibility checkers
don't flag drawer contents as focusable. Delayed so it snaps hidden only after
the opacity fade-out completes. */
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity var(--t-base), padding var(--t-base), visibility 0s 220ms;
}
.sg-games-drawer.is-open {
max-height: none; /* was 80vh */
opacity: 1;
visibility: visible;
/* Override transition: visibility snaps visible immediately (no delay) so
the fade-in animation is visible from the start. */
transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity var(--t-base), padding var(--t-base), visibility 0s;
padding-top: 0;
padding-bottom: 32px;
overflow-y: auto;
}
/*
* Games in the drawer are rendered as large display text, wrapping like a
* paragraph. This creates the editorial "game catalog" feel.
* Each game name acts as a link/button with a hover colour change — consistent
* with the header nav text-link style.
*/
.sg-games-drawer-inner {
display: flex;
flex-wrap: wrap;
gap: 0.1vw 20px;
align-items: baseline;
}
.sg-drawer-game {
background: none;
border: none;
font-family: var(--font-sans);
font-size: clamp( 18px, 1.4vw, 1.5vw); /* Large display size, fluid */
font-weight: 600;
letter-spacing: var(--letter-spacing-negative);
color: var(--text-secondary);
cursor: pointer;
padding: 4px 0;
line-height: 1;
transition: color var(--t-fast);
text-align: left;
}
.sg-drawer-game.is-active { color: var(--text-primary); }
/* --- Wrap mode: allow game names to break across multiple lines ---
* Toggle on/off by adding/removing sg-games-drawer-inner--wrap on the
* .sg-games-drawer-inner div in template-parts/header.php.
* Scoped to desktop only — mobile layout is unchanged.
*/
@media (min-width: 601px) {
.sg-games-drawer-inner--wrap .sg-drawer-game {
max-width: 14em; /* forces wrap; tune 13em–15em to taste */
line-height: 1.2; /* comfortable leading between wrapped lines */
}
.sg-games-drawer-inner--wrap .sg-nav-count {
white-space: nowrap; /* keeps count badge glued to the last word */
}
}
/* Page links section inside the games drawer (visible on mobile) */
.sg-drawer-pages {
display: none;
}
.sg-drawer-close {
background: none;
border: none;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
color: var(--text-muted);
cursor: pointer;
margin-top: 24px;
padding: 0;
display: block;
transition: color var(--t-fast);
}
.sg-drawer-close .sg-drawer-close-icon {
display: inline-block;
margin: 0 0 -2px 0;
}
/* =============================================================================
COLOURS DRAWER
Same animation pattern as .sg-games-drawer.
Contains three horizontal sections: Colour · Tone · Sort.
============================================================================= */
.sg-colours-drawer {
position: relative;
z-index: 190;
background: var(--bg);
padding: 0 var(--gap);
margin-top: -3px;
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity var(--t-base), padding var(--t-base), visibility 0s 220ms;
}
.sg-colours-drawer.is-open {
max-height: none;
opacity: 1;
visibility: visible;
transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity var(--t-base), padding var(--t-base), visibility 0s;
padding-top: 3px;
padding-bottom: 20px;
overflow-y: auto;
}
.sg-colours-drawer-inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 16px 0;
}
/* Vertical divider between sections */
.sg-colour-section-divider {
display: block;
width: 1px;
align-self: stretch;
background: var(--border);
margin: 0 30px;
flex-shrink: 0;
}
.sg-colour-section {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.sg-colour-section-label {
background: none;
border: none;
font-family: var(--font-sans);
font-size: clamp( 18px, 1.4vw, 1.5vw); /* Large display size, fluid */
font-weight: 600;
letter-spacing: var(--letter-spacing-negative);
color: var(--text-primary);
line-height: 1;
transition: color var(--t-fast);
text-align: left;
margin-right: 4px;
white-space: nowrap;
}
/* Colour filter chip — pill button */
.sg-colour-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--text-primary);
border: none;
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-medium);
color: var(--bg);
padding: 5px 10px 5px 10px;
cursor: pointer;
transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
white-space: nowrap;
}
.sg-colour-chip:hover {
color: var(--bg);
background: var(--text-secondary);
}
.sg-colour-chip.is-active {
color: var(--bg);
background: var(--text-secondary);
}
/* Colour dot inside a chip (shows a representative swatch) */
.sg-chip-dot {
display: inline-block;
width: 20px;
height: 20px;
border-radius: var(--radius-pill);
flex-shrink: 0;
}
.sg-chip-dot:hover {
}
/* Swatch dot colours — driven by the chip's data-filter-value (see --swatch-* in :root) */
.sg-colour-chip[data-filter-value="reds"] .sg-chip-dot { background: var(--swatch-reds); }
.sg-colour-chip[data-filter-value="oranges"] .sg-chip-dot { background: var(--swatch-oranges); }
.sg-colour-chip[data-filter-value="yellows"] .sg-chip-dot { background: var(--swatch-yellows); }
.sg-colour-chip[data-filter-value="greens"] .sg-chip-dot { background: var(--swatch-greens); }
.sg-colour-chip[data-filter-value="teals"] .sg-chip-dot { background: var(--swatch-teals); }
.sg-colour-chip[data-filter-value="blues"] .sg-chip-dot { background: var(--swatch-blues); }
.sg-colour-chip[data-filter-value="purples"] .sg-chip-dot { background: var(--swatch-purples); }
.sg-colour-chip[data-filter-value="pinks"] .sg-chip-dot { background: var(--swatch-pinks); }
/* Mono dot: grey gradient to represent achromatic */
.sg-chip-dot-mono {
background: linear-gradient(135deg, #888 0%, #ccc 100%);
}
/* Swatch-only chip: dot is the sole visual element; use symmetric padding */
.sg-colour-chip--swatch {
padding: 0;
gap: 0;
background: none;
transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.sg-colour-chip--swatch:hover,
.sg-colour-chip--swatch.is-active {
transform: scale(.85);
box-shadow: 0 0 0 3px var(--text-secondary);
}
/* =============================================================================
PALETTE SWATCHES — single screenshot page info bar
============================================================================= */
/* Container */
.lb-swatches {
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
/* Individual swatch circle */
.lb-swatch {
display: inline-block;
width: 15px;
height: 15px;
border-radius: var(--radius-pill);
/* border: 1px solid rgba(255,255,255,.18); */
cursor: pointer;
flex-shrink: 0;
transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.lb-swatch:hover {
transform: scale(.85);
box-shadow: 0 0 0 2px var(--text-secondary);
}
.lb-swatch.is-copied {
transform: scale(1);
box-shadow: 0 0 0 2px var(--text-secondary);
}
/* Clipboard copy toast — appears inline to the right of the swatch row */
.lb-swatch-toast {
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-secondary);
opacity: 0;
pointer-events: none;
white-space: nowrap;
}
.lb-swatch-toast.is-visible {
animation: swatch-toast-fade 1.5s ease forwards;
}
@keyframes swatch-toast-fade {
0% { opacity: 0; }
12% { opacity: 1; }
72% { opacity: 1; }
100% { opacity: 0; }
}
/* =============================================================================
TAG BAR — scrollable row of tag filter buttons below the header
============================================================================= */
.sg-tag-bar {
/* Scrolls with content — not fixed */
position: relative;
background: var(--bg);
border-bottom: 1px solid var(--border);
display: none; /* Temporarily hidden — remove this line to re-enable the tag bar */
align-items: center;
padding: 0 32px;
gap: 4px;
overflow-x: auto;
scrollbar-width: none; /* Keep tag-bar internal scrollbar hidden (it's decorative) */
height: 40px;
transition: background var(--t-base), border-color var(--t-base);
}
.sg-tag-bar::-webkit-scrollbar { display: none; }
/* Tag filter buttons — text style matching the header nav */
.filter-btn {
background: none;
border: none;
padding: 4px 8px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 400;
color: var(--text-muted);
cursor: pointer;
white-space: nowrap;
transition: color var(--t-fast);
line-height: 1;
flex-shrink: 0;
}
.filter-btn.is-active { color: var(--text-primary); font-weight: 600; }
/* =============================================================================
GALLERY CONTAINER
============================================================================= */
.gallery-container {
padding-top: 0;
padding-bottom: 0;
padding-left: var(--gap);
padding-right: var(--gap);
max-width: var(--container-max);
margin: 0 auto;
}
/* Load More */
.sg-load-more-wrap { text-align: center; }
.sg-load-more-btn {
background: var(--text-secondary);
border: none;
color: var(--bg);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
padding: 10px 25px; margin-top: 40px;
cursor: pointer;
transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.sg-end-count {
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 10px;
/* letter-spacing: var(--letter-spacing-narrow); */
text-align: center;
margin: 40px 0 0 0;
padding: 0;
}
/* =============================================================================
MASONRY GRID — THREE LAYOUT MODES
─────────────────────────────────────────────────────────────────────────────
LAYOUT COLUMN COUNTS — adjust to change the multi-column row width.
The gallery has a single layout (wide): it alternates one full-width hero
row with multi-column rows. The "multi-column" count is controlled by
--l2-cols below. Below the 1150px breakpoint --l2-cols drops to 1, so the
grid becomes a single full-width column.
============================================================================= */
:root {
/* Number of columns in the multi-column rows (drops to 1 below 1150px) */
--l2-cols: 2;
}
/* ── Base grid: single full-width column ── */
.masonry-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap);
}
/* ── Wide layout: alternating full-width and multi-column rows ───────────────
The pattern per 5 cards (one cycle):
Card 1 → full width (1 column)
Card 2 → col A ┐ row of 2
Card 3 → col B ┘
Card 4 → col A ┐ row of 2
Card 5 → col B ┘
Implemented by targeting :nth-child positions relative to the 5-card cycle.
Featured cards always break out to full width regardless of position.
─────────────────────────────────────────────────────────────────────────── */
.masonry-grid.view-wide {
/*
* We use a 2-column base grid. Full-width cards span both columns.
* Every 5th item starting from position 1 (1, 6, 11…) spans all columns.
* Items 2–5, 7–10… sit in their natural two-column rows.
*/
grid-template-columns: repeat(var(--l2-cols), 1fr);
}
/*
* Full-width "hero" rows in Layout 2:
* Positions 1, 6, 11, 16… (every 5th starting at 1).
* Cycle length = 1 hero + (2 cols × 2 rows) = 5.
*/
.masonry-grid.view-wide .screenshot-card:nth-child(5n + 1):not(.card-is-featured) {
grid-column: 1 / -1;
}
/* ── Featured screenshots: always full width in every layout ──────────────── */
.masonry-grid .card-is-featured {
grid-column: 1 / -1 !important; /* Override any nth-child that might prevent this */
}
/* ── NOTE ON IMAGE SHARPNESS ──────────────────────────────────────────────────
Cards use aspect-ratio + object-fit:cover to fill their grid cell.
The ![]()
src uses the medium 'screenshot-card' size (800px wide) for most
layouts. On HiDPI screens this can look soft.
Solution: use the HTML `sizes` attribute + WordPress srcset so the browser
picks the right resolution automatically. The card.php template passes a
srcset covering both the card and full sizes. The browser on a 2× display
will pick the larger size. This avoids always loading the full 2560px image
on small thumbnails.
For Layout 3 (compact), card thumbnails are small enough that screenshot-card
(800px) is more than sufficient even on 2× displays — no sharpness issue there.
─────────────────────────────────────────────────────────────────────────────
*/
/* =============================================================================
SCREENSHOT CARD
============================================================================= */
.screenshot-card {
background: var(--bg-off);
overflow: hidden;
cursor: pointer;
touch-action: manipulation;
transition: transform var(--t-slow);
position: relative;
animation: cardIn 300ms both;
/* Aspect-ratio placeholder prevents layout shift before image loads */
aspect-ratio: 16/9;
}
@keyframes cardIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.screenshot-card:hover {
transform: translateY(-2px);
z-index: 2;
}
.screenshot-card.is-hidden { display: none; }
/* Card image */
.card-image-wrap {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
/* isolation: isolate establishes a stacking context so that .card-lqip's
z-index: -1 stays within this element (behind ![]()
) rather than escaping
to the parent stacking context. */
isolation: isolate;
}
/* LQIP blur layer — sits behind the real ![]()
via z-index: -1 within the
stacking context established by .card-image-wrap. inset: -15% extends the
element beyond the container so blurred edges are clipped by overflow:hidden
rather than visible as a faded border. */
.card-lqip {
position: absolute;
inset: -15%;
z-index: -1;
background-size: cover;
background-position: center;
filter: blur(20px);
transition: filter var(--t-fast);
transition-delay: 1s; /* delay so that the lqip image is never seen without the blur */
}
.card-image-wrap:has(img.is-loaded) .card-lqip {
filter: none;
}
.card-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transition: opacity var(--t-slow), transform var(--t-slow);
}
/* Fade in once the browser has decoded the image (class added by JS) */
.card-image-wrap img.is-loaded {
opacity: 1;
}
.screenshot-card:hover .card-image-wrap img {
transform: scale(1.02);
}
/* Hover overlay — no dark gradient, just a container for the game pill */
.card-overlay {
position: absolute;
inset: 0;
/* NO background gradient — images shown clean */
background: transparent;
opacity: 0;
transition: opacity var(--t-base);
display: flex;
align-items: flex-end;
padding: 12px;
pointer-events: none;
z-index: 2;
}
.screenshot-card:hover .card-overlay { opacity: 1; }
.screenshot-card:focus-within .card-overlay { opacity: 1; }
.card-overlay-pills {
display: flex;
flex-wrap: wrap;
gap: 5px;
width: 100%;
justify-content: space-between; /* game pills left · like pill right */
pointer-events: all;
}
.card-overlay-pill {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
background: rgba(0,0,0,0.55);
color: rgba(255,255,255,0.92);
border: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
white-space: nowrap;
}
.card-overlay-pill.pill-game {
cursor: pointer;
transition: background var(--t-fast);
}
/* Like pill — anchored to the bottom-right of the overlay */
.card-overlay-pill.pill-like {
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast);
flex-shrink: 0;
}
.card-overlay-pill.pill-like ion-icon {
font-size: 10px;
width: 10px;
height: 10px;
}
.card-overlay-pill.pill-like.is-liked {
background: var(--text-secondary);
color: var(--bg);
}
/* Secondary Like pill only for display until hover, not interactive */
.ranked-mode-likes {
position: absolute;
right: 12px; bottom: 12px;
display: inline-flex;
align-items: center;
gap: 4px; /* matches .pill-like gap */
padding: 3px 10px;
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
color: rgba(255,255,255,0.92);
border: none;
white-space: nowrap;
opacity: 0; /* hidden on default views */
z-index: 1;
transition: opacity var(--t-fast);
}
.ranked-mode-likes ion-icon {
font-size: 10px; /* matches .pill-like ion-icon */
width: 10px;
height: 10px;
}
.screenshot-card:hover .ranked-mode-likes { opacity: 0.2; } /* hide when showing the pill button */
body.sg-mode-likes .ranked-mode-likes {
opacity: 0.7;
}
/* card-body hidden — layout is image-only */
.card-body { display: none; }
/* =============================================================================
LIGHTBOX
Full-viewport overlay. The image fills the frame; a slim 48 px bar sits at
the bottom. Close + nav controls float above everything, not inside the
animated inner so they never clip or shift.
============================================================================= */
/* Bar height as a variable so the nav-arrow offset stays in sync */
:root { --lb-bar-h: 48px; }
.lightbox {
position: fixed;
inset: 0;
z-index: 1000;
opacity: 0;
pointer-events: none;
visibility: hidden;
/* visibility snaps hidden after the 220ms fade-out completes */
transition: opacity var(--t-base), visibility 0s 220ms;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.lightbox.is-open {
opacity: 1;
pointer-events: all;
visibility: visible;
/* visibility snaps visible immediately so the fade-in is visible from the start */
transition: opacity var(--t-base), visibility 0s;
}
.lightbox-backdrop {
position: absolute;
inset: 0;
background: var(--lightbox-bg);
}
/* ── Close — viewport top-right ───────────────────────────── */
.lightbox-close {
position: absolute;
top: 10px;
right: 10px;
z-index: 11;
width: 26px;
height: 26px;
background: none;
border: none;
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: color var(--t-fast);
}
.lightbox-close ion-icon {
font-size: 26px;
width: 26px;
height: 26px;
display: block;
}
/* ── Nav arrows — centred in the image area ───────────────── */
/* top = 50% of viewport minus half the bar = centre of the image area */
.lightbox-nav {
position: absolute;
z-index: 10;
top: calc(50% - var(--lb-bar-h) / 2);
transform: translateY(-50%);
width: 52px;
height: 70vh;
background: none;
border: none;
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 0.1;
transition: color var(--t-fast), opacity var(--t-fast);
}
.lightbox-nav ion-icon {
font-size: 40px;
width: 40px;
height: 40px;
display: block;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
/* ── Inner — fills the full overlay, flex column ─────────── */
.lightbox-inner {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
transform: scale(0.97) translateY(12px);
transition: transform var(--t-slow);
}
.lightbox.is-open .lightbox-inner {
transform: scale(1) translateY(0);
}
/* ── Image panel — grows to fill all space above the bar ─── */
.lightbox-image-panel {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.lb-img-wrap {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Lightbox image: invisible until loaded, then fades in.
transition lives on .is-loaded so removing the class is instant —
the old image disappears immediately on navigation with no flash. */
#sg-lightbox-img { opacity: 0; }
#sg-lightbox-img.is-loaded {
opacity: 1;
transition: opacity 250ms ease;
}
/* Spinner overlay — visible while is-loading */
#sg-lb-img-wrap.is-loading::after {
content: '';
position: absolute;
width: 36px;
height: 36px;
border: 3px solid var(--border-hover);
border-top-color: var(--text-secondary);
border-radius: 50%;
animation: lb-spin 0.75s linear infinite;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
@keyframes lb-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.lightbox-image-panel img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
/* ── Info bar — single line, fixed height, full width ─────── */
.lightbox-info-panel {
flex-shrink: 0;
height: var(--lb-bar-h);
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
padding: 0 24px 10px 24px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.lightbox-info-panel::-webkit-scrollbar { display: none; }
/* Fullscreen: hide info panel until mouse/keyboard activity */
.lightbox:fullscreen .lightbox-info-panel,
.lightbox:-webkit-full-screen .lightbox-info-panel {
opacity: 0;
pointer-events: none;
transition: opacity var(--t-base);
}
.lightbox:fullscreen.fs-ui-visible .lightbox-info-panel,
.lightbox:-webkit-full-screen.fs-ui-visible .lightbox-info-panel {
opacity: 1;
pointer-events: all;
}
/* Fullscreen: hide close button + nav arrows until mouse/keyboard activity
(same fs-ui-visible mechanism as the info panel above) */
.lightbox:fullscreen .lightbox-close,
.lightbox:-webkit-full-screen .lightbox-close,
.lightbox:fullscreen .lightbox-nav,
.lightbox:-webkit-full-screen .lightbox-nav {
opacity: 0;
pointer-events: none;
transition: opacity var(--t-base);
}
.lightbox:fullscreen.fs-ui-visible .lightbox-close,
.lightbox:-webkit-full-screen.fs-ui-visible .lightbox-close,
.lightbox:fullscreen.fs-ui-visible .lightbox-nav,
.lightbox:-webkit-full-screen.fs-ui-visible .lightbox-nav {
opacity: 1;
pointer-events: all;
}
/* Title */
.lb-bar-title {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 320px;
flex-shrink: 1;
min-width: 0;
}
.lightbox-info-panel .lb-bar-title { display: none; } /* hiding from the lightbox for now */
/* Push everything right */
.lb-bar-spacer { flex: 1; min-width: 16px; }
/* Platform */
.lb-bar-platform {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
}
/* Resolution */
.lb-bar-resolution {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
}
/* Capture Date */
.lb-bar-capture-date {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
}
/* Invisible flex line-break before buttons — only activated on mobile */
.lb-bar-break { display: none; }
/* ── Action buttons — uniform style ──────────────────────── */
.lb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 6px 10px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-medium);
border: none;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
text-decoration: none;
background: var(--text-primary);
color: var(--bg);
transition: background var(--t-fast);
line-height: 1;
border-radius: var(--radius-pill);
}
/* Like button — same base, fill when liked */
.sg-lb-like { display: inline-flex; align-items: center; gap: 5px; }
.sg-lb-like.is-liked {
background: var(--text-secondary);
color: var(--bg);
}
/* =============================================================================
EMPTY STATE
============================================================================= */
.gallery-empty {
display: none;
text-align: center;
padding: 80px 24px;
}
.gallery-empty.is-visible { display: block; }
.gallery-empty-icon {
font-size: 35px;
margin: 0 auto 16px;
}
.gallery-empty h3 {
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-medium);
}
.gallery-empty p {
font-size: 12px;
color: var(--text-muted);
}
/* =============================================================================
SITE FOOTER
============================================================================= */
.site-footer {
background: var(--bg);
border-top: none;
padding: 50px 32px 40px 32px;
text-align: center;
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
transition: background var(--t-base), border-color var(--t-base);
}
.site-footer a { color: var(--text-secondary); transition: color var(--t-fast); }
/* =============================================================================
BACK TO TOP
============================================================================= */
.sg-back-to-top {
position: fixed;
bottom: 8px;
right: 5px;
z-index: 500;
width: 20px;
height: 40px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--radius-pill);
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-base), background var(--t-fast), color var(--t-fast);
}
.sg-back-to-top.is-visible {
opacity: 1;
pointer-events: auto;
}
.sg-back-to-top ion-icon {
font-size: 15px;
display: block;
}
/* =============================================================================
ADMIN BAR OFFSET
The WP admin bar is 32px tall when logged in. We only need to account for
it on fixed/sticky elements. Since the header scrolls, nothing to offset.
============================================================================= */
/* No fixed elements to offset — header scrolls with content */
/* =============================================================================
SINGLE SCREENSHOT PAGE
============================================================================= */
.sg-single {
max-width: var(--container-max);
margin: 0 auto;
padding-bottom: 64px;
}
/* Hero image: full container width, natural aspect ratio */
.sg-single-image {
display: block;
width: 100%;
height: auto;
}
/* Info bar: mirrors the lightbox info panel layout but unconstrained in height */
.sg-single-info-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 14px var(--gap);
flex-wrap: wrap;
border-bottom: 1px solid var(--border);
border-bottom: none;
margin-bottom: 48px;
}
/* Allow title to shrink and truncate on narrow viewports */
.sg-single-info-bar .lb-bar-title { min-width: 0; }
/* Content column: inherits all typography from sg-page-content; this adds padding */
.sg-single-content { }
/* =============================================================================
LOADING SKELETON
============================================================================= */
@keyframes shimmer {
0% { background-position: -600px 0; }
100% { background-position: 600px 0; }
}
.skeleton {
background: linear-gradient(90deg, var(--bg-off) 25%, var(--border) 50%, var(--bg-off) 75%);
background-size: 600px 100%;
animation: shimmer 1.4s infinite;
}
/* Scrollbar: system default — not overridden */
/* =============================================================================
ACCESSIBILITY
============================================================================= */
/* Skip-navigation link — visible only on keyboard focus (WCAG 2.4.1) */
.sg-skip-link {
position: absolute;
top: -100%;
left: 0;
z-index: 9999;
padding: 8px 16px;
background: var(--text-primary);
color: var(--bg);
font-size: 13px;
font-family: var(--font-sans);
text-decoration: none;
transition: none;
}
.sg-skip-link:focus { top: 0; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 0; }
/* =============================================================================
HOVER-CAPABLE DEVICES ONLY
All :hover styles live here so touch devices (hover: none) activate elements
on the first tap. Card hover styles are intentionally kept outside this block
— they enable the two-tap overlay-reveal behaviour on mobile.
============================================================================= */
@media (hover: hover) {
.sg-page-content a:hover { color: var(--accent); border-color: var(--accent); }
.site-title:hover { opacity: 1; color: var(--text-secondary); }
.sg-nav-link:hover { color: var(--text-primary); }
.sg-search-toggle:hover { color: var(--text-primary); }
.sg-theme-toggle:hover { color: var(--text-primary); }
.sg-mobile-icon-btn:hover { color: var(--text-primary); }
.sg-drawer-game:hover { color: var(--text-primary); }
.sg-drawer-close:hover { color: var(--text-primary); }
.filter-btn:hover { color: var(--text-primary); }
.sg-load-more-btn:hover {
border-color: var(--border-hover);
color: var(--bg);
background: var(--accent);
}
.card-overlay-pill.pill-game:hover {
color: var(--bg);
background: var(--text-secondary);
}
.card-overlay-pill.pill-like:hover {
background: var(--text-secondary);
color: var(--bg);
}
.lightbox-close:hover { color: var(--text-secondary); }
.lightbox-nav:hover { color: var(--text-secondary); opacity: 1; }
.lb-btn:hover { opacity: 1; background: var(--text-secondary); color: var(--bg); }
.site-footer a:hover { color: var(--text-primary); }
.sg-back-to-top:hover {
background: var(--text-secondary);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: var(--bg);
}
}
/* =============================================================================
RESPONSIVE
============================================================================= */
/* Small screens */
@media (max-width: 1299px) {
.sg-nav .sg-nav-link.game {
Display: none; /* We just hide our top 3 games from the menu from this screen size down */
}
.sg-games-drawer.is-open {
max-height: 80vh; /* impose a limit from this size down */
}
}
/* === KEYBOARD SHORTCUTS MODAL === */
.sg-shortcuts-modal {
position: fixed;
inset: 0;
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
}
.sg-shortcuts-modal[hidden] { display: none; }
.sg-shortcuts-inner {
position: relative;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 24px 28px 28px;
max-width: 420px;
width: calc(100% - 40px);
}
.sg-shortcuts-heading {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
margin: 0 0 16px 0;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.sg-shortcuts-close {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
cursor: pointer;
color: var(--text-muted);
padding: 4px;
display: flex;
align-items: center;
border-radius: 4px;
}
.sg-shortcuts-close ion-icon { font-size: 20px; }
.sg-shortcuts-close:hover { color: var(--text-secondary); }
.sg-shortcuts-list {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px 16px;
margin: 0;
}
.sg-shortcuts-list dt {
display: flex;
gap: 4px;
align-items: center;
justify-content: flex-end;
white-space: nowrap;
}
.sg-shortcuts-list dd {
margin: 0;
color: var(--text-secondary);
font-size: 13px;
align-self: center;
}
kbd {
font-family: var(--font-mono);
font-size: 10px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 4px;
padding: 2px 6px;
color: var(--text-secondary);
display: inline-block;
line-height: 1.6;
}
/* Tablet */
@media (max-width: 1150px) { /* was 960 */
/* Single-column grid below the tablet breakpoint */
:root { --l2-cols: 1; }
/* Title */
.sg-mobile-title { display: inline; }
.sg-mobile-title .sg-icon-logo { width: 24px; height: 24px; margin: 0 4px -7px 0; }
.site-title { font-size: 16px; }
.sg-hamburger { width: 20px; gap: 6px; }
.sg-hamburger span { height: 1px; }
.sg-mobile-menu-btn.is-open .sg-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sg-mobile-menu-btn.is-open .sg-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.sg-mobile-icon-btn ion-icon { font-size: 22px; width: 22px; height: 22px; }
/* Nav is desktop-only; hamburger now opens the games drawer */
.sg-nav { display: none; }
/* Show hamburger */
.sg-mobile-menu-btn {
display: flex;
padding-left: 0;
padding-right: 0;
}
.sg-header-controls {
gap: 18px;
}
/* Hide desktop-only nav buttons on mobile */
.sg-hide-on-mobile { display: none !important; }
/* Show mobile icon buttons */
.sg-mobile-icon-btn { display: inline-flex; }
.sg-games-drawer { margin-top: 0; }
/* ── Sort/filter section inside games drawer ────────────────────── */
.sg-drawer-sort-filter {
display: block;
padding-top: 16px;
margin-top: 8px;
border-top: 1px solid var(--text-secondary-alpha);
}
.sg-drawer-sort-options {
display: flex;
flex-direction: column;
gap: 4px;
}
.sg-drawer-text-btn {
background: none;
border: none;
padding: 4px 0;
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 16px;
cursor: pointer;
text-align: left;
transition: color var(--t-fast);
}
.sg-drawer-text-btn.is-active {
color: var(--text-primary);
}
@media (hover: hover) {
.sg-drawer-text-btn:hover { color: var(--text-primary); }
}
.sg-drawer-colours-toggle {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: none;
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 16px;
cursor: pointer;
padding: 2px 0;
margin-top: 4px;
}
.sg-drawer-colours-toggle:hover {
color: var(--text-primary);
}
.sg-drawer-colours-toggle ion-icon {
transition: transform 0.2s ease;
font-size: 12px;
}
.sg-drawer-colours-toggle.is-open ion-icon {
transform: rotate(180deg);
}
.sg-drawer-colours-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.sg-drawer-colours-content.is-open {
max-height: 300px;
}
.sg-drawer-colours-content .sg-colour-section {
padding: 8px 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
/* Colours drawer: wrap sections vertically on mobile */
.sg-colours-drawer-inner {
flex-direction: column;
gap: 14px;
padding-bottom: 10px;
}
.sg-colour-section-divider {
display: none; /* hide vertical dividers; sections stack vertically */
}
/* ── Search: slide-down full-width panel ─────────────────────────── */
/* On mobile the search wrap becomes an absolute panel below the
header. The inline toggle inside it is replaced by the mobile
icon button that sits in the controls bar. */
.sg-search-wrap {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: -3px;
z-index: 150;
background: var(--bg);
border-bottom: none;
padding: 0 16px 16px 16px;
/* Hidden state */
max-height: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
display: block;
transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s ease,
border-color 0.2s ease;
box-shadow: 0 15px 15px rgba(0,0,0,0.10);
}
.sg-search-wrap.is-open {
max-height: 80px;
opacity: 1;
pointer-events: auto;
}
/* Inline toggle is hidden; the mobile icon button is used instead */
.sg-search-toggle { display: none; }
/* Input fills the full panel width */
.sg-search-field {
position: static !important;
width: 100% !important;
opacity: 1 !important;
pointer-events: all !important;
font-size: 16px; /* Prevent iOS auto-zoom on focus */
outline: none;
padding: 16px 12px;
height: auto;
display: block;
box-sizing: border-box;
white-space: normal;
}
.header-stats { display: none; }
/* Single screenshot page — mobile info bar stacks like the lightbox:
related items grouped onto shared rows via real break spans, not
every item forced onto its own row. */
.sg-single { padding-bottom: 32px; }
.sg-single-info-bar {
justify-content: center;
gap: 6px;
padding: 10px var(--gap) 12px;
margin-bottom: 28px;
}
.sg-single-info-bar .lb-bar-spacer { display: none; }
.sg-single-info-bar .lb-bar-break { display: block; flex: 0 0 100%; height: 0; }
}
/* Mobile */
@media (max-width: 600px) {
:root {
--gap: 15px;
--header-h: 52px;
--lb-bar-h: 128px; /* 4-row info panel: game / title / platform+resolution / buttons */
/* Grid is already single-column from the 1150px breakpoint */
}
.site-header { padding: 0 var(--gap); gap: 12px; }
.site-title { font-size: 15px; letter-spacing: var(--letter-spacing-narrow); }
.sg-header-controls {
gap: 12px;
}
.sg-games-drawer {
padding: 0 16px 0 16px;
}
.sg-games-drawer.is-open {
max-height: 80vh;
overflow-y: auto;
padding: 10px 16px 20px 16px;
}
.sg-games-drawer-inner {
padding-bottom: 40px;
max-height: 270px; /* leaves ~130px for pages section + close button */
gap: 4px 16px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
/* Theme-agnostic bottom fade — no hardcoded colour needed */
-webkit-mask-image: linear-gradient(to bottom, black calc(100% - 60px), transparent 100%);
mask-image: linear-gradient(to bottom, black calc(100% - 60px), transparent 100%);
}
.sg-drawer-game {
font-size: 20px; /* Large display size, fluid */
padding: 2px 0;
outline: 0;
}
/* Page links section inside the games drawer (visible on mobile) */
.sg-drawer-pages {
display: flex;
flex-wrap: wrap;
gap: 4px 15px;
width: 100%;
padding-top: 15px;
margin-top: 15px;
border-top: 1px solid var(--text-secondary-alpha);
}
.sg-drawer-page-link {
font-family: var(--font-sans);
font-size: 16px;
color: var(--text-secondary);
text-decoration: none;
transition: color var(--t-fast);
}
.sg-drawer-page-link.is-active { color: var(--text-primary); }
@media (hover: hover) {
.sg-drawer-page-link:hover { color: var(--text-primary); }
}
.sg-colour-section-label { width: 100%; } /* force colour chips to next row */
.sg-drawer-close { margin-top: 12px; }
/* On mobile with --l2-cols:1, every card is 1 column wide,
so :nth-child(2n+1) = every odd card would get grid-column: 1/-1
which is redundant — but harmless since all cards fill 1 column. */
.lightbox-close { top: 10px; right: 10px; width: 36px; height: 36px; }
.lightbox-close ion-icon { font-size: 20px; width: 20px; height: 20px; }
.lightbox-nav { width: 40px; height: 40px; opacity: 0; }
.lightbox-nav ion-icon { font-size: 28px; width: 28px; height: 28px; }
.lightbox-prev { left: 4px; }
.lightbox-next { right: 4px; }
.lightbox-info-panel {
height: auto;
padding: 8px 12px 30px 12px;
gap: 6px;
flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
overflow: visible;
}
/* game stays auto/fit-content — title being flex:100% wraps to row 2,
leaving game alone on row 1 where justify-content:center centres it */
.lightbox-info-panel .lb-bar-title { flex: 0 0 100%; text-align: center; display: inherit; visibility: hidden; height: 0; }
.lightbox-info-panel .lb-bar-spacer { display: none; }
.lightbox-info-panel .lb-bar-break { display: block; flex: 0 0 100%; height: 0; }
.lightbox-info-panel #sg-lb-fullscreen { display: none; } /* not needed on mobile */
.gallery-container { padding: 0 var(--gap); }
.masonry-grid { gap: var(--gap); }
.sg-load-more-wrap { margin: 0 0 10px 0; }
.sg-end-count { margin: 30px 0 10px 0; }
/* Static pages */
.sg-page {
padding: 0 0 20px;
}
.sg-page-featured-image {
}
.sg-page-header {
margin: 30px auto;
}
.sg-page-title {
font-family: var(--font-sans);
font-size: 2em;
line-height: 1;
color: var(--text-secondary);
margin: 0;
max-width: var(--content-width);
}
.sg-page-content {
font-size: 14px;
line-height: 1.5;
color: var(--text-primary);
max-width: var(--content-width);
}
.site-footer{ padding: 20px var(--gap) 30px; }
.sg-back-to-top.is-visible { opacity: 0; } /* don't show on mobile */
}