kestrelsnest-blog/static/games/embed.css

/*
 * Scoped styling for the Game Shelves embed on /mygames/.
 *
 * Adapted from the bggpipe export's own style.css, but confined to
 * #games-embed so it styles the game grid / detail / chips WITHOUT the
 * export's global body/header/main rules repainting the themed blog page.
 * Kept here (not in static/games proper) so re-exporting bggpipe never
 * touches it. If the export's component markup changes, refresh these.
 */
#games-embed {
  --board: #faf3e3;
  --ink: #2a2438;
  --ink-soft: #6b6478;
  --line: #d8cdb4;
  --navy: #2f3d5c;
  --accent: #7a4a9e;
}

#games-embed .controls { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
#games-embed .controls input[type=search] {
  flex: 1 1 14rem; padding: .45rem .6rem; border: 2px solid var(--line);
  border-radius: .5rem; font: inherit;
}

#games-embed .grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 1rem;
}
#games-embed a.game {
  background: var(--board); border: 1px solid var(--line); border-radius: .8rem;
  overflow: hidden; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; box-shadow: 0 2px 5px rgba(42, 36, 56, .15);
}
#games-embed a.game:hover { outline: 3px solid var(--accent); }
#games-embed a.game img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #e8ddc5;
}
#games-embed a.game .info { padding: .55rem .7rem .7rem; }
#games-embed .gname { font-weight: 700; }
#games-embed .meta { color: var(--ink-soft); font-size: .82rem; }
#games-embed .chip {
  display: inline-block; font-size: .7rem; border: 1px solid var(--accent);
  color: var(--accent); border-radius: 1rem; padding: 0 .5rem;
}

/* Game-title links sit on cream surfaces (shelf cells, detail, cards). Without
   a scoped color they inherit the blog theme's green, which is low-contrast on
   cream. Use the export's accent purple: 5.75:1 on cream (WCAG AA) and
   consistent with the footer/zone links. Game-card tiles keep --ink (below). */
#games-embed .ogames a,
#games-embed .detail a,
#games-embed .card a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: from-font;
}
#games-embed .ogames a:hover,
#games-embed .detail a:hover,
#games-embed .card a:hover {
  color: var(--ink);
}

/* The /shelves/ page: a physical map of the wall. Each .wall is a vertical
   stack of .orow rows; each .ocell sizes to its real-world width via an
   inline flex-grow, so the drawing keeps the shelves' true proportions.
   Ported from the export's style.css (.wall/.orow/.ocell/.ozone/.ogames). */
#games-embed .wall {
  display: flex; flex-direction: column; gap: .5rem; margin: .7rem 0 1.4rem;
}
#games-embed .orow { display: flex; gap: .5rem; }
#games-embed .ocell {
  /* Export uses #fff; on the dark blog theme that reads stark, so use the
     same cream board color as the game cards and fact panels for consistency. */
  flex-basis: 0; min-width: 0; background: var(--board);
  border: 1px solid var(--line); border-radius: .6rem; padding: .5rem .6rem;
  color: var(--ink);
}
#games-embed .ozone { font-size: .72rem; color: var(--accent); margin-left: .3rem; }
#games-embed .ogames { margin: .3rem 0 0; font-size: .82rem; line-height: 1.5; }
#games-embed .ocell .meta { color: var(--ink-soft); }

#games-embed .detail {
  display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: flex-start; margin-top: 1rem;
}
#games-embed .detail .art { flex: 0 0 clamp(11rem, 26vw, 17rem); }
#games-embed .detail .art img { width: 100%; border-radius: .8rem; border: 1px solid var(--line); }
#games-embed .facts {
  flex: 1 1 18rem; background: var(--board); border: 1px solid var(--line);
  border-radius: .8rem; padding: .9rem 1.1rem;
}
#games-embed .facts, #games-embed .card {
  /* the blog theme's light-on-dark text color inherits into these cream
     surfaces; reassert the export's ink or values render low-contrast */
  color: var(--ink);
}
#games-embed .factrow { margin: .45rem 0; }
#games-embed .factrow b {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); margin-right: .4rem;
}
#games-embed .card {
  background: var(--board); border: 1px solid var(--line); border-radius: .8rem;
  padding: .9rem 1.1rem; margin-top: 1rem;
}
#games-embed .desc { white-space: pre-wrap; }
#games-embed .detail img, #games-embed a.game img { color: var(--ink); }

#games-embed footer {
  margin: 2rem 0 1rem; color: var(--ink-soft); font-size: .8rem; text-align: center;
}
#games-embed footer a { color: var(--accent); }

/* The colophon card (last in the grid) carries the badge and legal text;
   the export page's own footer would repeat it — in barely-legible
   ink-on-dark — so the embed drops it. */
#games-embed footer { display: none; }

/* The colophon card: same cream surface as the game cards (it's a <div>,
   not an <a>, so the a.game rules above don't reach it). */
#games-embed .colophon {
  background: var(--board);
  border: 1px solid var(--line);
  border-radius: .8rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 5px rgba(42, 36, 56, .35);
  color: var(--ink);
}
#games-embed .colophon > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: #cfe4f5;
}
#games-embed .colophon .info { padding: .55rem .7rem .7rem; }
#games-embed .colophon .gname { color: var(--ink); }
#games-embed .colophon .meta {
  margin: .35rem 0 0;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
#games-embed .colophon a { color: var(--accent); }