/* Collection page — light theme inspired by the Ako Mātātupu site (Manrope + Gabarito, green primary #009572, rounded pills, white nav). */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Embedded-modal mode — the picture editor loads this page in a transparent iframe with ?modal=…&embed=1 so a single modal can show in-place over the editor. Hide every direct child of except modals, and clear the page bg so the editor behind shows through. The modal's own backdrop continues to dim things. */ html[data-embedded-modal="1"], html[data-embedded-modal="1"] body { background: transparent; } html[data-embedded-modal="1"] body > *:not(.modal):not(#context-menu) { display: none !important; } /* ---- Embedded-modal iframe overlay -------------------------------- Used by /3d (BoxCraft) and /edit (BoxPerfect) to host BoxArts modals (Settings, Account, Spine Designer) in-place rather than navigating away. The iframe loads /?modal=…&embed=1, which sets data-embedded-modal on the inner document to hide page chrome, so only the modal's backdrop + panel paint through. Same rules as styles.css's copy on the BP side. */ .modal-iframe-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: transparent; } .modal-iframe-overlay.hidden { display: none; } .modal-iframe-overlay iframe { width: 100%; height: 100%; border: 0; background: transparent; } :root { --green: #009572; --green-hover: #007d61; --green-tint: #d6ede7; --white: #ffffff; --off: #f7f8f6; --light: #eef2ee; --border:#e2e8e2; --text: #111111; --mid: #4a5048; --muted: #7a847a; /* Foreground colour for content sitting on a hardcoded dark overlay * (e.g. the `rgba(0,0,0,0.6)` pills used for gallery captions, image * names, and inline rename fields). Distinct from `--white`, which * themes redefine as the *panel surface* — using `--white` for text * on these pills made the rename input read as dark-on-dark in * Steamy / Goodish / Monkey. Each theme tunes this to a light tone * that complements its palette while staying readable. */ --on-dark: #ffffff; --danger: #b03a4a; --danger-tint: #fce4e8; --radius: 12px; --radius-lg: 18px; --radius-pill: 24px; --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06); --shadow-hover: 0 6px 24px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06); --shadow-modal: 0 30px 60px rgba(0,0,0,0.20); --tile-size: 180px; /* Fonts as CSS vars so themes can swap them. */ --font-body: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: 'Gabarito', sans-serif; } /* ---- Theme variants ------------------------------------------------------- Themes are applied by setting data-theme on . Each block re-declares the palette + font vars; the rest of the stylesheet uses the vars. */ /* "BoxLight" (user-facing label; internal slug "boxperfect") — the default BoxArts theme. Inherits the full :root palette unchanged; only the header band is overridden so Game Title art reads in the nav, same pattern as the BoxArts light themes. The dark-cyan-green header keeps the original #009572 brand family. */ [data-theme="boxperfect"] { --header-bg: #0d2e26; --header-fg: #f4f1ea; --header-muted: #8aa39d; --header-border: rgba(255, 255, 255, 0.08); } /* "Steamy" — Steam-store-inspired: dark navy panels, light-blue accents. */ [data-theme="steamy"] { --green: #66c0f4; --green-hover: #a4d8ff; --green-tint: #2a4860; --white: #2a475e; --off: #1b2838; --light: #16202d; --border: #3c5874; --text: #c7d5e0; --mid: #8b9aa6; --muted: #67707b; --danger: #d94e5d; --danger-tint: #44232a; --on-dark: #c7d5e0; /* pale Steam blue-grey — the body fg */ --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: 'Inter', sans-serif; color-scheme: dark; } /* "Goodish Games" — GOG Galaxy-inspired: near-black backgrounds with cool purple undertones, vivid magenta-purple accent, Roboto typeface. */ [data-theme="goodish"] { --green: #b85eff; --green-hover: #cf80ff; --green-tint: #2d2040; --white: #23202c; /* card / panel surface */ --off: #14121a; /* page background — near-black, cool */ --light: #1c1924; /* subtle filled fields */ --border: #2e2a3a; /* low-contrast divider */ --text: #e2e0e8; --mid: #9b97ad; --muted: #6a6679; --danger: #ff5e84; --danger-tint: #3d1f2a; --on-dark: #e2e0e8; /* GOG body text, also reads on overlays */ --font-body: 'Roboto', system-ui, sans-serif; --font-display: 'Roboto', sans-serif; color-scheme: dark; } /* ---- BoxArts evaluation themes ----------------------------------------- Three additive palette themes from the BoxArts brand brief — sit alongside the existing themes (steamy / boxperfect / goodish) and exist so the user can A/B their preferred accent direction. None of them touches the wordmark or glyph; those stay #000/#fff via the .bxa-wordmark and .bxa-lockup rules further down. Each new theme shares the same warm-cream paper + ink palette so the comparison is honest — only the accent shifts. Mapped to the existing custom-property names (--green, --green-hover, --green- tint, --white, --off, --light, --border, --text, --mid, --muted, --on-dark) so the rest of the stylesheet picks them up without change. */ /* Theme A — refined evolution of the original #009572 green. Forest green over warm cream, replaces the lighter / SaaS-y default. Header band is intentionally a dark forest tint regardless of surface lightness so Game Title art (which the user typically prepares as a near-white knockout on transparent) reads cleanly in the page nav — a white-on-white header eats it. */ [data-theme="boxarts-green"] { --green: #2b6f5a; --green-hover: #3a8a72; --green-tint: #cfe0d8; --white: #ffffff; --off: #f4f1ea; --light: #ebe6dc; --border: #d4cdbf; --text: #1a1814; --mid: #4a443c; --muted: #7a7468; --danger: #b03a4a; --danger-tint: #f4d6dc; --on-dark: #ffffff; --accent-2: #c89a3c; /* gilt — secondary accent for header hovers */ --header-bg: #1a3a30; /* deep forest — always dark */ --header-fg: #f4f1ea; --header-muted: #a89e90; --header-border: rgba(255, 255, 255, 0.08); --font-body: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: 'Gabarito', sans-serif; } /* Theme B — library / archive. Oxblood primary with gilt secondary accent (rare — used for dividers, hovers, accent details). */ [data-theme="boxarts-oxblood"] { --green: #7a2828; --green-hover: #9a3838; --green-tint: #e8d4d4; --white: #ffffff; --off: #f4f1ea; --light: #e8dfd0; --border: #d4cdbf; --text: #231a14; --mid: #4a443c; --muted: #7a7468; --danger: #a02828; --danger-tint: #f3d8d4; --on-dark: #ffffff; --accent-2: #c89a3c; /* gilt — secondary accent */ --header-bg: #2a1410; /* deep oxblood — always dark */ --header-fg: #f4f1ea; --header-muted: #b0a08c; --header-border: rgba(255, 255, 255, 0.08); --font-body: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: 'Gabarito', sans-serif; } /* Theme C — cabinet / dark library. Cool teal primary with brass secondary accent. */ [data-theme="boxarts-teal"] { --green: #1f4a4d; --green-hover: #2c6a6d; --green-tint: #d4e0e1; --white: #ffffff; --off: #f4f1ea; --light: #e8e1d4; --border: #c8c0b0; --text: #0f1a1c; --mid: #4a5658; --muted: #7a8284; --danger: #a02828; --danger-tint: #f3d8d4; --on-dark: #ffffff; --accent-2: #d6a85a; /* brass — secondary accent */ --header-bg: #112a2d; /* deep cabinet teal — always dark */ --header-fg: #f4f1ea; --header-muted: #a0a8a8; --header-border: rgba(255, 255, 255, 0.08); --font-body: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: 'Gabarito', sans-serif; } /* ---- BoxArts dark pairings ------------------------------------------- Standalone dark companions for each BoxArts theme, lifted from the brand brief's "Dark-mode pairing" tables. Independent themes (no prefers-color-scheme magic) so the user can A/B them directly in the picker. Same accent colours as the light variants; only the paper / panel / ink shift to dark. */ /* Theme A · Dark — forest green on warm near-black */ [data-theme="boxarts-green-dark"] { --green: #2b6f5a; --green-hover: #3a8a72; --green-tint: #1f3a30; --white: #3a342b; --off: #1a1814; --light: #2a2620; --border: #3a342b; --text: #f4f1ea; --mid: #a89e90; --muted: #7c736a; --danger: #d94e5d; --danger-tint: #3a2024; --on-dark: #f4f1ea; --accent-2: #c89a3c; /* gilt — secondary accent */ --header-bg: #1a1814; /* match dark theme body so the nav reads as a continuous dark surface; slightly darker than --white (the panel/card colour) so it still separates from the cards below. */ --header-fg: #f4f1ea; --header-muted: #a89e90; --header-border: rgba(255, 255, 255, 0.06); --font-body: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: 'Gabarito', sans-serif; color-scheme: dark; } /* Theme B · Dark — oxblood + gilt on warm near-black */ [data-theme="boxarts-oxblood-dark"] { --green: #7a2828; --green-hover: #9a3838; --green-tint: #3d2020; --white: #4a3826; --off: #231a14; --light: #3a2c1f; --border: #3a2c1f; --text: #f4f1ea; --mid: #b0a08c; --muted: #847766; --danger: #d94e5d; --danger-tint: #3a2024; --on-dark: #f4f1ea; --accent-2: #c89a3c; /* gilt — secondary accent */ --header-bg: #231a14; /* match dark body — see green-dark comment */ --header-fg: #f4f1ea; --header-muted: #b0a08c; --header-border: rgba(255, 255, 255, 0.06); --font-body: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: 'Gabarito', sans-serif; color-scheme: dark; } /* Theme C · Dark — cabinet teal + brass on cool near-black */ [data-theme="boxarts-teal-dark"] { --green: #1f4a4d; --green-hover: #2c6a6d; --green-tint: #152e30; --white: #243033; --off: #0f1a1c; --light: #1a2628; --border: #1a2628; --text: #f4f1ea; --mid: #a0a8a8; --muted: #767e7e; --danger: #d94e5d; --danger-tint: #3a2024; --on-dark: #f4f1ea; --accent-2: #d6a85a; /* brass — secondary accent */ --header-bg: #0f1a1c; /* match dark body — see green-dark comment */ --header-fg: #f4f1ea; --header-muted: #a0a8a8; --header-border: rgba(255, 255, 255, 0.06); --font-body: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: 'Gabarito', sans-serif; color-scheme: dark; } /* ---- Dark-mode accent text contrast -------------------------------- The three BoxArts dark themes intentionally keep the same dark accent as their light siblings (per the brief). That works fine for accent fills (white text on #2b6f5a, #7a2828, #1f4a4d all reads), but where the accent is used as TEXT (badges, active tabs, hover pills) it ends up dark-on-dark. `--green-fg` adds a brighter accent specifically for text on non-accent surfaces. Light themes leave it equal to --green (no behaviour change); dark themes brighten it from the theme's own palette — the brief's secondary accent for oxblood + teal (gilt / brass) which were already designed to be the high-contrast partner, and a lightened tint of the primary green for green-dark since the brief didn't give it a secondary. */ :root, [data-theme="steamy"], [data-theme="goodish"], [data-theme="boxarts-green"], [data-theme="boxarts-oxblood"], [data-theme="boxarts-teal"] { --green-fg: var(--green); } [data-theme="boxarts-green-dark"] { --green-fg: #7fbfa5; } /* sage */ [data-theme="boxarts-oxblood-dark"] { --green-fg: #c89a3c; } /* gilt */ [data-theme="boxarts-teal-dark"] { --green-fg: #d6a85a; } /* brass */ /* Apply the brighter accent text only inside the dark themes — light themes are left alone. Scoped to elements that use the accent as TEXT colour on a non-accent surface (badges, active tabs, hover-state pills). Buttons that fill with the accent keep white-on-accent contrast and are unaffected. */ [data-theme="boxarts-green-dark"] .game-count strong, [data-theme="boxarts-oxblood-dark"] .game-count strong, [data-theme="boxarts-teal-dark"] .game-count strong, [data-theme="boxarts-green-dark"] .play-chip, [data-theme="boxarts-oxblood-dark"] .play-chip, [data-theme="boxarts-teal-dark"] .play-chip, [data-theme="boxarts-green-dark"] .play-chip[aria-pressed="true"], [data-theme="boxarts-oxblood-dark"] .play-chip[aria-pressed="true"], [data-theme="boxarts-teal-dark"] .play-chip[aria-pressed="true"], [data-theme="boxarts-green-dark"] .game-row [data-action]:hover, [data-theme="boxarts-oxblood-dark"] .game-row [data-action]:hover, [data-theme="boxarts-teal-dark"] .game-row [data-action]:hover, [data-theme="boxarts-green-dark"] .game-row .row-link:hover, [data-theme="boxarts-oxblood-dark"] .game-row .row-link:hover, [data-theme="boxarts-teal-dark"] .game-row .row-link:hover, [data-theme="boxarts-green-dark"] .row-play, [data-theme="boxarts-oxblood-dark"] .row-play, [data-theme="boxarts-teal-dark"] .row-play, [data-theme="boxarts-green-dark"] .row-card:hover, [data-theme="boxarts-oxblood-dark"] .row-card:hover, [data-theme="boxarts-teal-dark"] .row-card:hover, [data-theme="boxarts-green-dark"] .modal-tabs button[aria-selected="true"], [data-theme="boxarts-oxblood-dark"] .modal-tabs button[aria-selected="true"], [data-theme="boxarts-teal-dark"] .modal-tabs button[aria-selected="true"], [data-theme="boxarts-green-dark"] .slip-align-selected.has-selection, [data-theme="boxarts-oxblood-dark"] .slip-align-selected.has-selection, [data-theme="boxarts-teal-dark"] .slip-align-selected.has-selection { color: var(--green-fg); } /* `.modal-tabs button[aria-selected="true"]` also sets the underline via border-bottom-color; sync that to the brighter accent so the underline matches the new text colour. */ [data-theme="boxarts-green-dark"] .modal-tabs button[aria-selected="true"], [data-theme="boxarts-oxblood-dark"] .modal-tabs button[aria-selected="true"], [data-theme="boxarts-teal-dark"] .modal-tabs button[aria-selected="true"] { border-bottom-color: var(--green-fg); } /* ---- BoxArts wordmark + glyph (theme-independent) ----------------------- The wordmark and glyph stay #000 (or #fff on dark surfaces) across EVERY theme. No accent colour bleeds in. Themes change everything around them; the wordmark is the constant. */ .bxa-wordmark { font-family: 'Gabarito', system-ui, sans-serif; font-weight: 800; font-size: var(--bxa-wordmark-size, 1.25rem); line-height: 1; letter-spacing: -0.02em; color: #000; white-space: nowrap; } .bxa-wordmark__box { display: inline-block; } .bxa-wordmark__arts { display: inline-block; font-weight: 800; background: #000; color: #fff; padding: 0.05em 0.32em 0.12em; margin-left: 0.06em; border-radius: 0.1em; } .bxa-lockup { display: inline-flex; align-items: center; gap: 0.5em; color: #000; } .bxa-lockup__glyph { display: inline-flex; width: 1.4em; height: 1.4em; } .bxa-lockup__glyph svg { width: 100%; height: 100%; } /* Anchor wrapping the glyph (back-to-BoxArts cross-nav on /3d). Inherits the lockup's currentColor so the SVG doesn't pick up the browser-default link blue; small hover dim hints interactivity without disturbing the lockup's static look. */ .bxa-lockup__glyph-link { display: inline-flex; color: inherit; text-decoration: none; border-radius: 4px; } .bxa-lockup__glyph-link:hover .bxa-lockup__glyph { opacity: 0.78; } .bxa-lockup__glyph-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Dark-surface inversion — invoked by themes whose body bg is dark (Steamy / Goodish today). The lockup + wordmark flip to white; the inverted-Arts panel flips to white-on-black-text. */ [data-theme="steamy"] .bxa-lockup, [data-theme="goodish"] .bxa-lockup, [data-theme="boxarts-green-dark"] .bxa-lockup, [data-theme="boxarts-oxblood-dark"] .bxa-lockup, [data-theme="boxarts-teal-dark"] .bxa-lockup, /* The 3 light BoxArts themes have dark headers but light bodies, so the wordmark inverts ONLY when it sits inside .main-nav. Outside the nav (e.g. on grid cards) the wordmark keeps its normal dark-on-light treatment. */ [data-theme="boxperfect"] .main-nav .bxa-lockup, [data-theme="boxarts-green"] .main-nav .bxa-lockup, [data-theme="boxarts-oxblood"] .main-nav .bxa-lockup, [data-theme="boxarts-teal"] .main-nav .bxa-lockup, .bxa--on-dark .bxa-lockup { color: #fff; } [data-theme="steamy"] .bxa-wordmark, [data-theme="goodish"] .bxa-wordmark, [data-theme="boxarts-green-dark"] .bxa-wordmark, [data-theme="boxarts-oxblood-dark"] .bxa-wordmark, [data-theme="boxarts-teal-dark"] .bxa-wordmark, [data-theme="boxperfect"] .main-nav .bxa-wordmark, [data-theme="boxarts-green"] .main-nav .bxa-wordmark, [data-theme="boxarts-oxblood"] .main-nav .bxa-wordmark, [data-theme="boxarts-teal"] .main-nav .bxa-wordmark, .bxa--on-dark .bxa-wordmark { color: #fff; } [data-theme="steamy"] .bxa-wordmark__arts, [data-theme="goodish"] .bxa-wordmark__arts, [data-theme="boxarts-green-dark"] .bxa-wordmark__arts, [data-theme="boxarts-oxblood-dark"] .bxa-wordmark__arts, [data-theme="boxarts-teal-dark"] .bxa-wordmark__arts, [data-theme="boxperfect"] .main-nav .bxa-wordmark__arts, [data-theme="boxarts-green"] .main-nav .bxa-wordmark__arts, [data-theme="boxarts-oxblood"] .main-nav .bxa-wordmark__arts, [data-theme="boxarts-teal"] .main-nav .bxa-wordmark__arts, .bxa--on-dark .bxa-wordmark__arts { background: #fff; color: #000; } /* ---- Sub-brand wordmark variants ----------------------------------- Both variants share BoxArts' construction; only the inner block's colour + typography change. The block colours are identity constants (WordPerfect blue / warm bronze) and DO NOT shift with the active theme. Only the outer "Box" half adapts to surface brightness via the existing .bxa-wordmark__box rule. */ /* BoxPerfect — picture editor sub-brand. */ .bxa-wordmark--perfect .bxa-wordmark__perfect { display: inline-block; font-family: 'Gabarito', system-ui, sans-serif; font-weight: 800; background: #1a2a8a; color: #fff; padding: 0.05em 0.32em 0.12em; margin-left: 0.06em; border-radius: 0.1em; } /* BoxCraft — 3D Builder sub-brand. Cinzel's metrics sit slightly lower than Gabarito's, so a -0.02em top nudge re-aligns the baselines optically. Adjust by ±0.01em if it reads off at the sizes the masthead + splash use. */ .bxa-wordmark--craft .bxa-wordmark__craft { display: inline-block; font-family: 'Cinzel', serif; font-weight: 800; background: #8b6028; color: #f4f1ea; padding: 0.08em 0.32em 0.14em; margin-left: 0.06em; border-radius: 0.1em; letter-spacing: 0.03em; position: relative; top: -0.02em; } /* On dark surfaces the inner blocks stay the brand colour; only the outer "Box" flips. The base .bxa-wordmark__box already handles that — these rules just make sure the inversion is wired for the new variants too. */ [data-theme="steamy"] .bxa-wordmark--perfect .bxa-wordmark__box, [data-theme="goodish"] .bxa-wordmark--perfect .bxa-wordmark__box, [data-theme="boxarts-green-dark"] .bxa-wordmark--perfect .bxa-wordmark__box, [data-theme="boxarts-oxblood-dark"] .bxa-wordmark--perfect .bxa-wordmark__box, [data-theme="boxarts-teal-dark"] .bxa-wordmark--perfect .bxa-wordmark__box, [data-theme="boxperfect"] .main-nav .bxa-wordmark--perfect .bxa-wordmark__box, [data-theme="boxarts-green"] .main-nav .bxa-wordmark--perfect .bxa-wordmark__box, [data-theme="boxarts-oxblood"] .main-nav .bxa-wordmark--perfect .bxa-wordmark__box, [data-theme="boxarts-teal"] .main-nav .bxa-wordmark--perfect .bxa-wordmark__box, [data-theme="steamy"] .bxa-wordmark--craft .bxa-wordmark__box, [data-theme="goodish"] .bxa-wordmark--craft .bxa-wordmark__box, [data-theme="boxarts-green-dark"] .bxa-wordmark--craft .bxa-wordmark__box, [data-theme="boxarts-oxblood-dark"] .bxa-wordmark--craft .bxa-wordmark__box, [data-theme="boxarts-teal-dark"] .bxa-wordmark--craft .bxa-wordmark__box, [data-theme="boxperfect"] .main-nav .bxa-wordmark--craft .bxa-wordmark__box, [data-theme="boxarts-green"] .main-nav .bxa-wordmark--craft .bxa-wordmark__box, [data-theme="boxarts-oxblood"] .main-nav .bxa-wordmark--craft .bxa-wordmark__box, [data-theme="boxarts-teal"] .main-nav .bxa-wordmark--craft .bxa-wordmark__box, .bxa--on-dark .bxa-wordmark--perfect .bxa-wordmark__box, .bxa--on-dark .bxa-wordmark--craft .bxa-wordmark__box { color: #fff; } /* ---- Nav-position wordmark modifier ------------------------------- For nav/menu placements (NOT the main page brand on the left), the wordmark renders smaller and monochrome — no coloured pill behind the inner block, font follows the surrounding text colour. This reserves the full-colour treatment for the page's primary brand on the top-left (so the active view's identity is clear) and demotes secondary brand references to a quieter B&W form. Stack on top of `.bxa-wordmark--perfect` or `--craft` to keep the typography distinct (BoxPerfect = Gabarito, BoxCraft = Cinzel) while dropping the colour cue. */ .bxa-wordmark--nav { font-size: 0.9em; } .bxa-wordmark--nav .bxa-wordmark__arts, .bxa-wordmark--nav .bxa-wordmark__perfect, .bxa-wordmark--nav .bxa-wordmark__craft { background: transparent; color: inherit; padding-left: 0.1em; padding-right: 0.1em; } /* Nav buttons hosting wordmarks: strip the green/ghost pill so the wordmark itself reads as the affordance. Outline-only hover keeps the click target obvious. `color: var(--text)` is the body text colour — theme-aware, so dark themes get a light readable wordmark and light themes get a dark one. (Was `inherit` which bottomed out at .btn-ghost's hardcoded `--mid` grey — invisible on dark themes.) */ .btn.btn-wordmark, .btn-green.btn-wordmark, .btn-ghost.btn-wordmark { background: transparent; border: 1px solid transparent; color: var(--text); padding: 4px 10px; box-shadow: none; transform: none; } .btn.btn-wordmark:hover, .btn-green.btn-wordmark:hover, .btn-ghost.btn-wordmark:hover { background: transparent; border-color: currentColor; color: var(--text); transform: none; } /* ---- Splash screens ------------------------------------------------ Brief animated overlays shown on first entry into the Picture Editor (BoxPerfect) or 3D Builder (BoxCraft) views in a session. The session-flag check lives in JS (sessionStorage); this CSS just defines the animation choreography. Mapped --color-paper / --color-ink-soft to this stylesheet's existing var names so the splash background follows the active theme. */ .bxa-splash { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--off, #f4f1ea); animation: bxa-splash-out 0.4s ease-in forwards; animation-delay: 0.8s; pointer-events: none; } .bxa-splash.hidden { display: none; } .bxa-splash__inner { display: flex; flex-direction: column; align-items: center; gap: 1.2em; animation: bxa-splash-in 0.5s ease-out; } .bxa-splash__lockup { display: inline-flex; align-items: center; gap: 0.5em; color: #000; font-size: 3.2rem; } [data-theme="steamy"] .bxa-splash__lockup, [data-theme="goodish"] .bxa-splash__lockup, [data-theme="boxarts-green-dark"] .bxa-splash__lockup, [data-theme="boxarts-oxblood-dark"] .bxa-splash__lockup, [data-theme="boxarts-teal-dark"] .bxa-splash__lockup, .bxa--on-dark .bxa-splash__lockup { color: #fff; } .bxa-splash__lockup .bxa-lockup__glyph { width: 1.2em; height: 1.2em; } .bxa-splash__lockup .bxa-lockup__glyph svg { width: 100%; height: 100%; } .bxa-splash__cursor { display: inline-block; width: 0.35em; height: 0.75em; background: #1a2a8a; margin-left: 0.1em; vertical-align: middle; animation: bxa-cursor-blink 0.5s steps(2) 2 forwards; animation-delay: 0.3s; opacity: 0; } .bxa-splash__caption { font-family: 'Manrope', system-ui, sans-serif; font-weight: 300; font-style: italic; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--mid, #4a443c); opacity: 0; animation: bxa-caption-in 0.4s ease-out 0.25s forwards; } .bxa-splash__rule { width: 0; height: 2px; background: #8b6028; margin-top: -0.4em; animation: bxa-rule-draw 0.5s ease-out 0.2s forwards; } @keyframes bxa-splash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes bxa-splash-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } @keyframes bxa-caption-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 0.85; transform: translateY(0); } } @keyframes bxa-cursor-blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes bxa-rule-draw { from { width: 0; } to { width: 4em; } } /* Respect users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { .bxa-splash, .bxa-splash__inner, .bxa-splash__cursor, .bxa-splash__caption { animation: none; } .bxa-splash { animation: bxa-splash-out 0.2s linear 0.6s forwards; } .bxa-splash__caption { opacity: 0.85; } .bxa-splash__rule { animation: none; width: 4em; } } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--off); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; } .hidden { display: none !important; } .muted { color: var(--muted); } .small { font-size: 12px; } /* Lift secondary-text tokens within BoxCraft (#box3d-modal) and the Side Panel Designer (#spine-designer-modal) so headings, hints, ghost-button labels — everything that uses --mid / --muted — reads as the lighter greyish-white the user sees in BA and BP. On dark themes the default --mid (#a89e90) and --muted (#7c736a) resolved to muddy taupe against the modal's white panel; piping --text through the same custom-property name brightens everything in scope without rewriting individual rules. Side-effect: hover borders also use --text — reads as a crisper hover edge rather than the previous muted shift, which is a fair trade for the colour-consistency win. */ #spine-designer-modal, #box3d-modal { --mid: var(--text); --muted: var(--text); } /* ── Nav ────────────────────────────────────────────────────────────── */ .main-nav { /* Header is always a dark band — see the BoxArts theme blocks above. `--header-bg` defaults back to `--white` for the legacy themes (boxperfect / steamy / goodish) so their pale headers are unaffected. */ background: var(--header-bg, var(--white)); color: var(--header-fg, var(--text)); border-bottom: 1px solid var(--header-border, var(--border)); height: 64px; display: flex; align-items: center; padding: 0 28px; gap: 24px; position: sticky; top: 0; z-index: 100; } .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--header-fg, var(--text)); } .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--green) 0%, #4dc3c7 100%); display: inline-block; } .brand-text { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--header-fg, var(--text)); letter-spacing: 0.01em; } .nav-spacer { flex: 1; } .nav-right { display: flex; align-items: center; gap: 12px; } /* View-toggle sitting in the nav (next to the brand) gets a small left margin so it reads as a separate cluster from the wordmark rather than being glued to it. */ .nav-view-toggle { margin-left: 14px; } /* Game context — the current-game label that lives between brand and nav-right on /3d. Switches `.main-nav` from flex to a 3-col grid only when a game-context is present (collection.html has the same .main-nav but no game-context, so it keeps the flex spacer layout). The grid keeps the title in normal flow so it pushes siblings apart instead of overlapping them when the viewport narrows. `position: relative` gives the dropdown a positioning anchor on the title. */ .main-nav:has(> .game-context) { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; column-gap: 12px; } .main-nav:has(> .game-context) > :first-child { justify-self: start; } .main-nav:has(> .game-context) > .nav-right { justify-self: end; } .main-nav:has(> .game-context) > .nav-spacer { display: none; } .main-nav .game-context { position: relative; padding: 4px 12px; color: var(--header-muted, var(--fg-mid, var(--mid))); font-size: 13px; } /* Strong (highlighted current-game name) uses the secondary accent so it pops against the dark header without being mistaken for an accent fill button. Falls back to primary accent for legacy themes that didn't define --accent-2. */ .main-nav .game-context strong { color: var(--accent-2, var(--green-fg, var(--green))); font-weight: 700; } /* Game switcher — mirrors the rules in styles.css (BoxPerfect) so the same markup renders identically on /3d. Keep the two blocks in sync if either is edited. */ .game-switcher { display: inline-flex; align-items: center; gap: 4px; } .game-switcher-arrow { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; background: transparent; border: none; border-radius: 4px; color: var(--muted, #9aa); cursor: pointer; transition: color 0.15s, background-color 0.15s; } .game-switcher-arrow:hover { color: var(--text); background: rgba(127, 127, 127, 0.12); } .game-switcher-title { display: inline-flex; align-items: center; /* Centre the title image inside a fixed-width slot so the chevrons sit at consistent positions across all games. Without min-width the slot collapsed to the image's natural width, which meant adjacent titles in the dropdown / quick-nav appeared "left- aligned" relative to each other as the slot shifted left/right by the image's variable width. The min-width matches the title image's max-width so post-aspect-padding titles fill the slot without overflow. */ justify-content: center; min-width: 240px; padding: 4px 10px; background: transparent; border: none; border-radius: 4px; color: inherit; cursor: pointer; font: inherit; transition: background-color 0.15s; } .game-switcher-title:hover { background: rgba(127, 127, 127, 0.12); } .game-switcher-title strong { color: var(--accent); font-weight: 700; } /* Switcher inside the dark page header — chevrons, title, and hover tints need to read against the dark band rather than the original light-row defaults. Falls through to the base rules for legacy themes whose header is light (no --header-bg set). */ .main-nav .game-switcher-arrow { color: var(--header-muted, var(--muted)); } .main-nav .game-switcher-arrow:hover { color: var(--header-fg, var(--text)); background: rgba(255, 255, 255, 0.10); } .main-nav .game-switcher-title { color: var(--header-fg, var(--text)); } .main-nav .game-switcher-title:hover { background: rgba(255, 255, 255, 0.08); } .main-nav .game-switcher-title strong, .main-nav .game-switcher-placeholder { color: var(--accent-2, var(--green-fg, var(--green))); } /* Nav-right affordances on the dark header — strip the pale chip styling those buttons get from their default rules. The buttons keep their click targets but pick up the header foreground colour for icon / label, with a subtle white-tint hover rather than the default light-grey fill that would look misplaced on a dark band. Legacy themes still see `--header-bg` resolving to the original `--white`, so these overrides fire harmlessly there too — the white tint barely shows on a white surface. `.btn-wordmark` (no prefix) is used here so it catches every variant: `.btn.btn-wordmark`, `.btn-ghost.btn-wordmark`, and `.btn-green.btn-wordmark`. Earlier this rule only listed `.btn-ghost`, which missed the cross-nav buttons (`btn-go-3d` etc.) on collection.html since they're `.btn.btn-wordmark` — they fell through to the base rule's `color: var(--text)` and showed up dark / unreadable on the new dark header. */ .main-nav .btn-wordmark, .main-nav .btn-icon-only, .main-nav .account-pill, .main-nav .btn-ghost { background: transparent; color: var(--header-fg, var(--text)); border-color: var(--header-border, var(--border)); } .main-nav .btn-wordmark:hover, .main-nav .btn-icon-only:hover, .main-nav .account-pill:hover, .main-nav .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); color: var(--header-fg, var(--text)); } .main-nav .account-pill .account-avatar { /* Avatar swatch stays its own colour so the pill still reads as an account chip rather than a generic ghost button. */ background: var(--accent-2, var(--green-fg, var(--green))); } .game-switcher-dropdown { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); min-width: 240px; max-width: 360px; max-height: 60vh; overflow-y: auto; background: var(--panel, var(--white, #fff)); border: 1px solid var(--border, rgba(0, 0, 0, 0.15)); border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); z-index: 50; padding: 4px; } .game-switcher-item { display: block; width: 100%; padding: 6px 10px; background: transparent; border: none; border-radius: 4px; color: var(--text); text-align: left; cursor: pointer; font: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-switcher-item:hover { background: rgba(127, 127, 127, 0.14); } .game-switcher-item.is-current { background: rgba(127, 127, 127, 0.18); font-weight: 600; } /* "+ New game" entry — pinned at top of the dropdown when the page has no current game loaded. Slight emphasis + a divider beneath to set it apart from the alphabetical list. */ .game-switcher-item.game-switcher-new { color: var(--accent, #3aa3b0); font-weight: 600; border-bottom: 1px solid var(--border, rgba(0,0,0,0.12)); } /* Title-cell placeholder when no game is loaded — slightly muted so it reads as "pick something" rather than "this is the title". */ .game-switcher-placeholder { color: var(--muted, #888); font-style: italic; } /* View-mode toggle */ .view-toggle { display: flex; background: var(--off); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px; } .view-toggle button { appearance: none; background: transparent; border: none; border-radius: var(--radius-pill); padding: 6px 14px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--mid); cursor: pointer; transition: background 0.15s, color 0.15s; } .view-toggle button.active { background: var(--white); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .view-toggle button:hover:not(.active) { color: var(--text); } @media (max-width: 700px) { .view-toggle button { padding: 6px 10px; font-size: 11px; } } /* Each view-toggle button has BOTH a text label and an icon SVG. The data-button-style attribute on selects which one shows. */ .view-toggle button .view-toggle-icon { display: none; } [data-button-style="icons"] .view-toggle button .view-toggle-label { display: none; } [data-button-style="icons"] .view-toggle button .view-toggle-icon { display: inline-block; vertical-align: middle; } [data-button-style="icons"] .view-toggle button { padding: 7px 12px; /* tighter once labels are gone */ } /* Settings cog button (sits next to the +Add button in the nav). */ .btn-icon-only { appearance: none; background: var(--white); color: var(--mid); border: 1px solid var(--border); border-radius: 50%; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s; } .btn-icon-only:hover { background: var(--off); color: var(--text); border-color: var(--mid); } .btn-icon-only:active { transform: scale(0.95); } /* Settings modal — theme picker + button-style toggle */ .settings-section { margin: 14px 0 18px; } .settings-section + .settings-section { border-top: 1px solid var(--border); padding-top: 14px; } .settings-h4 { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin: 0 0 4px; color: var(--text); } .theme-picker, .button-style-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .theme-card { appearance: none; background: var(--white); border: 2px solid var(--border); border-radius: var(--radius); padding: 12px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; transition: border-color .12s, transform .1s, box-shadow .12s; font-family: inherit; color: var(--text); } .theme-card:hover { border-color: var(--mid); transform: translateY(-1px); } .theme-card[aria-checked="true"] { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); } .theme-swatch { display: block; width: 100%; height: 38px; border-radius: var(--radius-sm, 8px); border: 1px solid var(--border); } .theme-name { font-weight: 700; font-size: 13px; margin-top: 4px; } .theme-tag { font-size: 11px; } /* Fullscreen mode — toggled via the toolbar's expand button. Hides the nav + toolbar so only the grid is visible. ESC or the floating exit button returns to normal view. */ /* Toolbar fullscreen button: smaller than the nav-bar variant so the toolbar's overall height (used by sticky headers below) doesn't grow. */ .toolbar #btn-fullscreen { width: 30px; height: 30px; } .fs-exit { display: none; /* shown only in fullscreen */ position: fixed; top: 14px; right: 14px; z-index: 200; background: var(--white); box-shadow: var(--shadow-card); } [data-fullscreen="1"] .main-nav, [data-fullscreen="1"] .toolbar { display: none; } [data-fullscreen="1"] .fs-exit { display: inline-flex; } [data-fullscreen="1"] .container { padding-top: 18px; /* normal padding without the toolbar above */ } .search-wrap { position: relative; } .search-input { background: var(--off); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 16px 8px 36px; font-family: inherit; font-size: 13px; color: var(--text); width: 220px; outline: none; transition: all .2s; } .search-input::placeholder { color: var(--muted); } .search-input:focus { border-color: var(--green); background: var(--white); width: 280px; box-shadow: 0 0 0 3px rgba(0,149,114,0.10); } .search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; } /* ── Toolbar (filters / sort / zoom / count) ────────────────────────── */ .toolbar { position: sticky; top: 64px; /* sits below the main nav */ z-index: 99; background: var(--white); border-bottom: 1px solid var(--border); padding: 10px 28px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .game-count { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .game-count strong { color: var(--green); background: var(--green-tint); border-radius: 6px; padding: 3px 9px; font-weight: 800; font-size: 12px; letter-spacing: 0; } .toolbar-group { display: flex; gap: 8px; flex-wrap: wrap; } .filter-select { background: var(--white); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 28px 6px 12px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; outline: none; transition: border-color 0.15s, box-shadow 0.15s; /* Custom chevron */ appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; } .filter-select:hover { border-color: var(--mid); } .filter-select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,149,114,0.10); } .toolbar-spacer { flex: 1; } .zoom-control { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mid); } .zoom-control input[type="range"] { width: 130px; accent-color: var(--green); cursor: pointer; } .zoom-mark { font-weight: 700; color: var(--mid); font-size: 14px; width: 12px; text-align: center; user-select: none; } /* "Highlighted" filter pill — hidden until 2+ cards are highlighted. */ .filter-pill { background: var(--white); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 14px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s, border-color 0.15s, color 0.15s; } .filter-pill .pill-star { color: #f4c542; font-size: 13px; } .filter-pill:hover { border-color: var(--mid); } .filter-pill[aria-pressed="true"] { background: #fff7d6; border-color: #f4c542; color: #8a5a00; } .filter-pill[aria-pressed="true"] .pill-star { color: #c69400; } /* Filter "chips" — small square buttons sized to match the * game-count badge on the far left of the toolbar (~24×24, 6px * radius). Each chip's COLOUR is the affordance: gold square = * highlighted-card filter, theme-accent square with a ▶ glyph = * ready-to-play filter. Counts intentionally absent — the visible * grid count in the game-count badge already reflects the * pressed filter state. */ .filter-chip { appearance: none; border: 1px solid var(--border); border-radius: 6px; width: 28px; height: 28px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; line-height: 1; transition: background 0.15s, border-color 0.15s, transform 0.08s; } .filter-chip:hover { transform: translateY(-1px); } .filter-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Play chip — neutral light-grey outline matching the other * filter pills (Clear filters, the dropdown selects). The ▶ * glyph itself carries the theme-accent colour, signalling * "play" without dominating the toolbar. Pressed state fills * with the accent tint to match the highlight chip's * outline-when-idle / fill-when-active pattern. */ .play-chip { background: var(--white); border-color: var(--border); color: var(--green); } .play-chip:hover { background: var(--off); border-color: var(--mid); } .play-chip .chip-glyph { /* Slightly nudged right — ▶ has trailing optical weight. */ transform: translateX(1px); } .play-chip[aria-pressed="true"] { background: var(--green-tint); border-color: var(--green); color: var(--green-hover); } /* Highlight chip — gold OUTLINE by default; the chip "fills in" * (solid gold) when pressed so the active state reads clearly. * #f4c542 matches the highlighted-card halo so the affordance is * visually consistent with the cards the filter selects. */ .highlight-chip { background: transparent; border-color: #f4c542; border-width: 2px; } .highlight-chip:hover { background: #fff7d6; } .highlight-chip[aria-pressed="true"] { background: #f4c542; border-color: #c69400; } @media (max-width: 700px) { .toolbar { padding: 10px 16px; gap: 10px; } .zoom-control input[type="range"] { width: 90px; } .filter-select { font-size: 11px; padding: 5px 24px 5px 10px; } } /* ── Buttons ────────────────────────────────────────────────────────── */ /* Placeholder-cover modifier — applied to any on a game whose cover is the downloaded Wikipedia thumbnail rather than a user upload. The greyscale signals "this is a stand-in until you add your own"; the brightness dip + opacity tweak keep it from competing visually with real covers on the same grid. Cleared automatically the moment the user uploads any real image (server drops is_placeholder, frontend re-renders without the class). */ .placeholder-cover { filter: grayscale(1) brightness(0.92); opacity: 0.78; } .btn-green { background: var(--green); color: var(--white); border: none; border-radius: var(--radius-pill); padding: 9px 20px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; } /* Round "+" variant used by the header Add-game button. Replaces the pill-shaped "+ Add game" so the BoxPerfect/BoxCraft/Search cluster gains the freed horizontal space. Sized to match the account-pill / settings-icon line-height so all three controls on the right read as the same row of round affordances. The selector is one-class-deep on top of .btn-green; the cascade ordering after .btn-green's `padding: 9px 20px` matters, which is why the `}` on the parent rule is just above. */ .btn-green.btn-add-round { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; line-height: 1; border-radius: 50%; transition: background .15s, transform .1s; } .btn-green:hover { background: var(--green-hover); transform: translateY(-1px); } .btn-green:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn-ghost { background: var(--white); color: var(--mid); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 9px 18px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; } .btn-ghost:hover { background: var(--off); color: var(--text); border-color: var(--mid); } .btn-danger { background: var(--white); color: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius-pill); padding: 9px 18px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; } .btn-danger:hover { background: var(--danger); color: var(--white); } /* ── Container + grid ───────────────────────────────────────────────── */ .container { max-width: 1500px; margin: 0 auto; padding: 28px 28px 80px; } .empty-state { text-align: center; padding: 80px 24px; background: var(--white); border: 1px dashed var(--border); border-radius: var(--radius-lg); } .empty-state h2 { font-family: var(--font-display); font-size: 24px; margin: 16px 0 6px 0; } .empty-state p { color: var(--mid); } .empty-mark { width: 56px; height: 56px; background: linear-gradient(135deg, var(--green) 0%, #4dc3c7 100%); border-radius: 14px; margin: 0 auto; position: relative; } .empty-mark::before { content: ""; position: absolute; inset: 14px; border: 2px dashed rgba(255,255,255,0.85); border-radius: 6px; } .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile-size), 1fr)); gap: 22px; margin-top: 20px; } /* Real-world proportions across gallery / bookshelf / 3D views. The zoom slider's --tile-size is the height in px of a reference 24cm box; every other game scales proportionally from that. */ .game-grid.view-gallery, .game-grid.view-3d, .game-grid.view-bookshelf { --base-cm-px: calc(var(--tile-size) / 24); } .game-grid.view-gallery, .game-grid.view-3d { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px; } /* Gallery view: uniform-sized tiles in a clean grid. Per-game proportions are still preserved INSIDE each tile (the image keeps its real aspect ratio via object-fit: contain and is centered), but the outer tile is always the reference 19×24 cm so columns line up perfectly across rows regardless of which boxes happen to be a few cm wider or taller. */ .game-grid.view-gallery .game-card { flex: 0 0 auto; width: calc(19 * var(--base-cm-px)); } .game-grid.view-gallery .card-image { padding-top: 0; aspect-ratio: 19 / 24; display: flex; align-items: center; justify-content: center; } /* 3D view: keep real-world proportions per game — the whole point of the 3D view is to show how each box's footprint actually looks. */ .game-grid.view-3d .game-card { flex: 0 0 auto; width: calc(var(--box-w-cm, 19) * var(--base-cm-px)); } .game-grid.view-3d .card-image { padding-top: 0; aspect-ratio: var(--box-w-cm, 19) / var(--box-h-cm, 24); } /* Bookshelf view — vertical "spines" (right-face image) lined up like books on a shelf. Hover lifts + reveals the game name pop-up. */ .game-grid.view-bookshelf { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; padding: 24px 0 60px; background: linear-gradient(180deg, transparent 0%, transparent 80%, rgba(0, 0, 0, 0.06) 92%, rgba(0, 0, 0, 0.10) 100%); margin-top: 20px; } .game-spine { position: relative; flex: 0 0 auto; /* Width = depth, height = box height — real proportions on the shelf. min-width keeps very thin items (e.g. floppy sleeves) clickable. */ width: calc(var(--box-d-cm, 5) * var(--base-cm-px)); height: calc(var(--box-h-cm, 24) * var(--base-cm-px)); min-width: 12px; background: var(--off); border: 1px solid var(--border); border-radius: 2px; /* No overflow:hidden — would clip the hover tooltip (::after). The img/ placeholder fill the bordered box exactly so nothing visually overflows. */ cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, z-index 0s 0.15s; box-shadow: 1px 0 0 rgba(0, 0, 0, 0.04); } .game-spine:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.20), 0 4px 6px rgba(0, 0, 0, 0.08); z-index: 50; transition: transform 0.15s, box-shadow 0.15s; } .game-spine img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; } /* Folios: most spine artwork is wider than tall (the user photographed the book lying on its spine, or extracted a thin horizontal strip). object-fit: cover would crop that to a near-empty central slice in the 12 px wide tile, which produces the "block grey" rendering. `contain` shows the whole spine art letterboxed inside the tile so the title / stripe / colour stays visible. */ .game-spine[data-kind="portfolio"] img { object-fit: contain; background: var(--off); } .spine-placeholder { width: 100%; height: 100%; border-radius: 2px; background: repeating-linear-gradient(45deg, var(--light) 0, var(--light) 4px, var(--off) 4px, var(--off) 8px); } /* Tooltip pop-up shown on hover */ .game-spine::after { content: attr(data-name); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--white); padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s 0.05s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); } .game-spine:hover::after { opacity: 1; } .game-card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); /* No overflow:hidden — would clip the hover-name tooltip (::after). The image area has its own overflow:hidden + border-radius below. */ cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; box-shadow: var(--shadow-card); display: flex; flex-direction: column; } .game-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--green); z-index: 20; /* lift above neighbours so the tooltip isn't covered */ } /* Highlighted card — glowing yellow ring. Same effect across all three card views (gallery, 3d, and the .game-spine in bookshelf). */ .game-card.highlighted { border-color: #f4c542; box-shadow: 0 0 0 3px rgba(244, 197, 66, 0.50), var(--shadow-card); } .game-card.highlighted:hover { border-color: #f4c542; box-shadow: 0 0 0 3px rgba(244, 197, 66, 0.65), var(--shadow-hover); } .game-spine.highlighted { border-color: #f4c542; box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.55); } .game-spine.highlighted:hover { box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.7), 0 12px 24px rgba(0, 0, 0, 0.20), 0 4px 6px rgba(0, 0, 0, 0.08); } /* List view — text-only rows, no covers. Header + scannable rows. No overflow:hidden — that creates a scroll container that traps the sticky header inside the grid. We round the corners on the first/last child instead so the visual remains clean. */ .game-grid.view-list { display: block; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 20px; } .game-grid.view-list > :first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .game-grid.view-list > :last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); } .list-header, .game-row { display: grid; /* thumb · star · name · year · publisher · genre · card · play · 3D-badge */ grid-template-columns: 40px 28px minmax(0, 3fr) 70px minmax(0, 2fr) minmax(0, 2fr) 28px 32px 36px; gap: 14px; align-items: center; padding: 8px 16px; } .list-header { background: var(--off); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mid); /* Sticks BELOW the nav (64px) AND the toolbar (~56px) so it has its own visible band rather than hiding under the toolbar. z-index lower than the toolbar (99) so we don't ever paint over it. */ position: sticky; top: 120px; z-index: 90; } .game-row { border-bottom: 1px solid var(--border); /* Cursor is set per-cell now (cells with data-action are clickable; the genre column stays inert). The row no longer pretends every column opens the gallery. */ cursor: default; transition: background 0.1s; font-size: 14px; color: var(--text); } .game-row:last-child { border-bottom: none; } .game-row:hover { background: var(--off); } /* Per-column click affordances. The thumbnail + name open the gallery (the existing primary action). Year and publisher become filter shortcuts — clicking them sets the toolbar dropdown to that value. The 3D badge opens the rotating box modal. The play button launches the linked game. Genre is intentionally inert — no hover, no cursor change. */ .game-row [data-action] { cursor: pointer; } .game-row [data-action]:hover { color: var(--green); } .game-row .row-link:hover { color: var(--green); } /* Year / publisher / genre cells get the same green text-tint on hover as everything else with [data-action]; we don't add an underline so the row reads cleanly without a typewriter look. The genre cell joins the same is-clickable pattern when the game has a genre — non-clickable cells stay default. */ .row-play, .row-card { appearance: none; background: transparent; border: 1px solid var(--border); border-radius: 999px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: var(--green); cursor: pointer; padding: 0; line-height: 1; } .row-play:hover, .row-card:hover { background: var(--green-tint); border-color: var(--green); } /* The card icon uses a stroke-only SVG; lighten the resting stroke colour slightly so it doesn't dominate the row, then ramp to full green on hover. */ .row-card { color: var(--mid); } .row-card:hover { color: var(--green); } .game-row .row-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Centre the title image (or text fallback) within the name column so titles read as labels rather than left-anchored entries. Without this, narrow title images sat hard against the left edge of the column and looked offset from neighbours with wider art. `display: block` is needed because the row- name is a — without it text-align wouldn't apply to the inline-block . */ display: block; text-align: center; } .game-row .row-year, .game-row .row-publisher, .game-row .row-genre { color: var(--mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-row .row-star { font-size: 14px; color: var(--border); text-align: center; user-select: none; } /* List-row cover thumbnail (left of the row). object-fit:cover lets the image fill the 40×40 square without distortion; missing cover renders a faint placeholder so the column stays aligned across all rows. */ .row-thumb { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; background: var(--off); border: 1px solid var(--border); display: block; } .row-thumb-empty { background: var(--off); display: flex; align-items: center; justify-content: center; overflow: hidden; } .row-thumb-empty-text { /* Game name as a stand-in thumbnail when the card has no image at all (user deleted everything including the placeholder). Uppercase + display-font + theme accent so it reads as a branded panel rather than an error state. */ font-family: var(--font-display, var(--font-body, system-ui)); font-weight: 800; font-size: 9px; letter-spacing: 0.04em; color: var(--accent, var(--green, var(--text))); text-align: center; padding: 2px; line-height: 1.05; word-break: break-word; } /* 3D badge on the far right — only visible when isComplete3d is true. */ .row-3d-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: var(--green); background: var(--green-tint); border: 1px solid var(--green); border-radius: 4px; padding: 2px 6px; text-align: center; user-select: none; } .row-3d-badge.empty { visibility: hidden; } .game-row.highlighted { background: #fffbe9; box-shadow: inset 3px 0 0 #f4c542; } .game-row.highlighted .row-star { color: #f4c542; } .game-row.highlighted:hover { background: #fff3c4; } @media (max-width: 700px) { .list-header, .game-row { /* thumb · star · name · year · publisher · 3D-badge (genre dropped) */ grid-template-columns: 36px 22px minmax(0, 3fr) 60px minmax(0, 2fr) 32px; padding: 8px 12px; gap: 10px; } .game-row .row-genre, .list-header .col-genre { display: none; } .row-thumb { width: 36px; height: 36px; } } /* Hover tooltip — banner across the bottom of the cover, on top of the image (not above the card). */ .game-card::after { content: attr(data-name); position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 12px; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.78) 60%, rgba(0, 0, 0, 0.0) 100%); color: var(--on-dark); font-size: 12px; font-weight: 600; text-align: center; white-space: normal; line-height: 1.3; border-radius: 0 0 var(--radius) var(--radius); max-height: 60%; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.15s 0.05s; } .game-card:hover::after { opacity: 1; } /* Hide the under-card name+meta block in gallery + 3D — the hover tooltip above the cover replaces it. (Trial: easy to revert by removing this rule.) */ .game-grid.view-gallery .card-body, .game-grid.view-3d .card-body { display: none; } .card-image { position: relative; width: 100%; padding-top: 140%; /* book-cover aspect */ background: var(--light); overflow: hidden; border-radius: var(--radius); /* round all corners — card-body is hidden */ } .card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* show the full cover; letterbox over the tile bg */ display: block; } .card-image-empty { /* "Thumbnail" panel for games with no cover image — renders the game's name in CAPS using the active theme's display font + accent colour, so the card still reads as a distinct entry in the grid rather than an empty hole. Theme variables (`--font-display`, `--accent`) cascade so every theme picks the look up automatically. `container-type: inline-size` on this element makes `cqi` units below scale the text size to the tile width — so the name reads big on a wide card and reasonably-small on a narrow zoomed-out tile. */ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--off); padding: 12px; container-type: inline-size; } .card-image-empty-text { font-family: var(--font-display, var(--font-body, system-ui)); font-weight: 800; font-size: clamp(14px, 8cqi, 28px); letter-spacing: 0.04em; color: var(--accent, var(--green, var(--text))); text-align: center; line-height: 1.1; word-break: break-word; } /* 3D thumbnail — rendered when all 6 box_faces are set on a game. Reuses .box3d-face geometry from the builder so face images line up. */ .card-3d-stage { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 45%; display: grid; place-items: center; pointer-events: none; /* let card click pass through to the article */ } .card-3d-box { position: relative; transform-style: preserve-3d; /* Static 3/4 view — same default as the gallery's interactive 3D box, so the front, right-edge and top all read at a glance. Hover spins the box around its Y axis (only THIS card; other cards keep their static pose because the :hover selector scopes to one .game-card). The transition smooths the snap-back when the cursor leaves. */ transform: rotateX(-15deg) rotateY(25deg); transition: transform 0.4s ease; will-change: transform; /* Projection-aware sizing. The box face dimensions need to fit INSIDE the card-image area AFTER the (-15°, +25°) rotation — not merely the unrotated front face. Without this, depth-heavy boxes (Sierra big-box, jewel cases standing on edge) overflowed the top / bottom of the card because the projected bounding box is taller than the front face's height. Bounding-box of the rotated cube on screen (axis-aligned): bbox_x = |cos(25°)|·w + |sin(25°)|·d ≈ 0.906·w + 0.423·d bbox_y = |cos(15°)|·h + |sin(15°)| · (|sin(25°)|·w + |cos(25°)|·d) ≈ 0.966·h + 0.110·w + 0.235·d The fit-scale is whichever axis is the binding constraint — usually Y for tall big-boxes, X for very wide-and-thick ones. Values are unitless because --box-*-cm are stored as plain numbers. The trailing 0.95 is the visible gutter so the box doesn't kiss the card edge. */ --bbox-x: calc(var(--box-w-cm, 19) * 0.906 + var(--box-d-cm, 5) * 0.423); --bbox-y: calc(var(--box-h-cm, 24) * 0.966 + var(--box-w-cm, 19) * 0.110 + var(--box-d-cm, 5) * 0.235); --fit-scale: min( calc(var(--box-w-cm, 19) / var(--bbox-x)), calc(var(--box-h-cm, 24) / var(--bbox-y)) ); --w: calc(var(--box-w-cm, 19) * var(--base-cm-px, 7.5) * var(--fit-scale) * 0.95); --h: calc(var(--box-h-cm, 24) * var(--base-cm-px, 7.5) * var(--fit-scale) * 0.95); --d: calc(var(--box-d-cm, 5) * var(--base-cm-px, 7.5) * var(--fit-scale) * 0.95); } .card-3d-box .box3d-face { background-color: #cdd1cd; /* 100% × 100% to match the builder + print kit: every place a user sees a 3D box conforms the image to the face's measured size. */ background-size: 100% 100%; background-repeat: no-repeat; background-position: center; border: 1px solid rgba(0,0,0,0.15); box-shadow: inset 0 0 16px rgba(0,0,0,0.18); image-rendering: -webkit-optimize-contrast; /* Chrome / Edge */ image-rendering: high-quality; /* modern */ } /* Hover-to-spin: only the 3D-view card under the cursor animates; every other card keeps its static 3/4 pose. The animation carries the same -15° X tilt as the static rule so the box doesn't leap upright when the cursor enters — only the Y rotation changes. Stopping the animation drops back to the static `transform`, smoothed by the 0.4s transition above. */ @keyframes card-3d-spin { from { transform: rotateX(-15deg) rotateY(25deg); } to { transform: rotateX(-15deg) rotateY(385deg); } } .game-grid.view-3d .game-card:hover .card-3d-box { animation: card-3d-spin 6s linear infinite; } /* Respect reduced-motion users — the static pose still reads well, no need to spin if the OS asks us not to. */ @media (prefers-reduced-motion: reduce) { .game-grid.view-3d .game-card:hover .card-3d-box { animation: none; } } .card-body { padding: 12px 14px 14px; } .card-title { font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.25; margin: 0 0 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; } .card-meta { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; } .card-meta-sep { color: var(--border); } /* Title image — replaces the game's text name in headers. Height is locked per-surface so a long, narrow title strip and a chunky square one both feel consistent. Width auto-scales from the image's aspect ratio so the user keeps control over the visual weight via cropping in BoxPerfect. `object-fit: contain` keeps the image inside its box if max-width clamps it. The base class sets the default; surface modifiers (card / row / modal / nav) override the height. */ /* Fixed-width box per surface (roughly 5x the locked height — chosen to match a typical title-art aspect ratio). EVERY title image renders into the same on-screen footprint and the logo art letterboxes inside via object-fit: contain — square logos sit centred with whitespace either side, ultra-wide banners get vertically compressed inside the fixed box. The earlier soft min/max band did nothing visible because typical 3:1-7:1 logos landed inside it and never hit either bound. */ /* Height-locked sizing — width adapts to each title's natural aspect. Title art varies from ~1:1 to >10:1 in the corpus; a fixed-aspect cell with object-fit:contain produced a 5× spread in rendered widths PLUS height-squashed the banner-thin titles. Locking just the height gives every title the same visual baseline weight; width follows the natural aspect with a soft cap that prevents the wides from shoving the layout. Each surface keeps its own height + cap to match the surrounding density. */ .game-title-image { display: inline-block; height: 36px; width: auto; max-width: 280px; object-fit: contain; vertical-align: middle; } .card-title-image { height: 36px; width: auto; max-width: 280px; } .row-title-image { height: 24px; width: auto; max-width: 190px; } .modal-title-image { height: 32px; width: auto; max-width: 250px; } .nav-title-image { height: 28px; width: auto; max-width: 220px; } /* Inside a .card-title (which clamps text to 2 lines via -webkit-box), the title image is the ONLY content — strip the text clamp so the img isn't cropped to a single line of fake text. */ .card-title:has(.game-title-image) { display: block; -webkit-line-clamp: unset; } /* Game Card modal — title-image dropdown sits next to the heading (replaces the older separate "Title image" row in the Details tab). Tiny chevron button. Hidden in Add mode; surfaced in Edit mode by refreshTitleMenuButton. */ .modal-title-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 6px; padding: 0; background: transparent; border: 1px solid var(--border, rgba(0,0,0,0.15)); border-radius: 4px; color: var(--mid, #555); cursor: pointer; vertical-align: middle; } .modal-title-menu-btn:hover { background: rgba(0,0,0,0.05); color: var(--text, #222); } .modal-title-menu-btn[data-has-title="true"] { border-color: var(--green, #3aa3b0); color: var(--green, #3aa3b0); } /* ── Modal ──────────────────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; } .modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 28, 0.45); backdrop-filter: blur(2px); } .modal-panel { position: relative; background: var(--white); width: min(680px, 100%); max-height: calc(100vh - 48px); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); display: flex; flex-direction: column; overflow: hidden; } .modal-narrow { width: min(440px, 100%); } /* ── Progress bar ───────────────────────────────────────────────────── */ .progress-bar { position: relative; width: 100%; height: 4px; background: var(--light); border-radius: 2px; overflow: hidden; margin-top: 16px; } .progress-bar .progress-fill { height: 100%; width: 0%; background: var(--green); border-radius: 2px; transition: width 0.25s ease; } .progress-bar.indeterminate .progress-fill { width: 30%; animation: progress-slide 1.4s infinite linear; } @keyframes progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(333%); } } /* Page-top loading bar (for collection-wide operations) */ .page-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 1500; pointer-events: none; } .page-progress .progress-fill { height: 100%; background: var(--green); width: 30%; animation: progress-slide 1.4s infinite linear; } .page-progress.hidden { display: none; } /* Centre-screen loading overlay. Hidden by default; activated by adding `.is-visible` (window.bxaLoader.show() toggles it). The full BoxArts iso-stamp glyph (same paths as the header lockup) snap-rotates 90° at a time, looping while work is in flight. No surrounding panel / shadow / label — just the glyph itself, at 2× the header glyph size, in the page's accent colour. Sits above modals but below toasts. */ .bxa-loader { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 1400; } .bxa-loader.is-visible { display: flex; animation: bxa-loader-fade 0.18s ease-out both; } @keyframes bxa-loader-fade { from { opacity: 0; } to { opacity: 1; } } .bxa-loader__glyph { /* Header lockup glyph is 1.4em; this is 2×. */ width: 2.8em; height: 2.8em; /* White on every theme — currentColor cascades to stroke + fill on the SVG's paths. The loader only appears during long ops on top of a dimmed page; pure white reads cleanly regardless of the underlying theme. */ color: #fff; animation: bxa-loader-spin 0.8s linear infinite; } @keyframes bxa-loader-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .bxa-loader__glyph { animation: none; } } .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-header h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text); } .modal-x { background: none; border: none; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0; } .modal-x:hover { color: var(--text); } .modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; } .modal-section + .modal-section { margin-top: 24px; } /* Tab strip used by Settings + Game Details modals to split a long * scroll into navigable sections. Shape: a horizontal row of buttons * with an underline on the active one (theme-accent colour) + a thin * border under the whole strip so the active underline reads as * "ahead of" the boundary. Themed via existing CSS vars so swapping * skin colours just works. */ .modal-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: -8px -24px 16px -24px; /* extend to modal edges */ padding: 0 16px; flex-wrap: wrap; } .modal-tabs button { appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--mid); font: inherit; font-size: 13px; font-weight: 600; padding: 10px 14px; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .modal-tabs button:hover { color: var(--text); } .modal-tabs button[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); } .modal-tab-panel { display: none; } .modal-tab-panel.active { display: block; } /* Collapsible drawer sections in the Edit Game modal — Details and Box Dimensions are closed by default; click the header to expand. Images stays as a regular .modal-section (always open). */ details.drawer { padding: 0; } details.drawer > .drawer-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mid); padding: 8px 0; border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s; user-select: none; } details.drawer > .drawer-summary::-webkit-details-marker { display: none; } details.drawer > .drawer-summary::before { content: "▸"; display: inline-block; font-size: 10px; color: var(--muted); transition: transform 0.15s; width: 12px; } details.drawer[open] > .drawer-summary::before { transform: rotate(90deg); } details.drawer > .drawer-summary:hover { color: var(--text); border-color: var(--border); } details.drawer[open] > .drawer-summary { color: var(--text); border-color: var(--border); margin-bottom: 12px; } .section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mid); margin-bottom: 10px; } .field { display: block; margin-bottom: 14px; } .dim-summary { display: block; margin-top: 6px; } /* Divider between the pinned "Standard '90s Big Box" and the alphabetical rest. Implemented as a disabled