with a heading and content rather than three nested divs. */ .gd-sec--plain { padding: 22px; } .gd-sec--plain > h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; margin-bottom: 16px; } .gd-sec--plain > h2::before { content: ''; width: 3px; height: 18px; border-radius: 2px; background: var(--gd-red); flex: 0 0 3px; } .gd-sec--plain > h3 { font-size: 14px; font-weight: 800; margin: 20px 0 10px; color: var(--gd-muted); } /* ── Card grid (games, related, franchise entries) ──────────────────────── */ .gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px; } .gd-tile { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .gd-tile .gd-cover { box-shadow: var(--gd-shadow); transition: transform .28s var(--gd-ease), box-shadow .28s var(--gd-ease); } .gd-tile:hover .gd-cover { transform: translateY(-4px); box-shadow: var(--gd-shadow-lg); } .gd-tile .gd-cover img { transition: transform .5s var(--gd-ease); } .gd-tile:hover .gd-cover img { transform: scale(1.05); } .gd-tile-t { font-size: 14.5px; font-weight: 750; color: var(--gd-ink); line-height: 1.35; } .gd-tile:hover .gd-tile-t { color: var(--gd-red); } .gd-tile-m { display: block; font-size: 12px; color: var(--gd-muted); font-weight: 600; } /* * Tiles that carry a plain rather than the component. Same * frame and the same hover, so the two forms are indistinguishable on screen * while the markup is migrated section by section. */ .gd-tile-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: var(--gd-r); border: 1px solid var(--gd-line); background: var(--gd-line-soft); box-shadow: var(--gd-shadow); transition: transform .5s var(--gd-ease), box-shadow .28s var(--gd-ease); } .gd-tile:hover .gd-tile-img { box-shadow: var(--gd-shadow-lg); transform: scale(1.03); } .gd-tile-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .gd-tile-b b { font-size: 14.5px; font-weight: 750; color: var(--gd-ink); line-height: 1.35; } .gd-tile:hover .gd-tile-b b { color: var(--gd-red); } .gd-pager { margin-top: 26px; display: flex; justify-content: center; } /* * Cover component used inside frames the older sheets own — the directory * card's .bg-card-media and the detail hero's .ba-game-cover. It fills its * parent rather than imposing its own box, so those frames keep deciding the * size and this only decides what is drawn inside. */ .gd-card-cover { position: absolute; inset: 0; aspect-ratio: auto !important; border-radius: inherit; } .gd-card-cover img, .gd-card-cover .gd-cover-fb { border-radius: inherit; } .gd-hero-cover { width: 220px; aspect-ratio: 3 / 4; border-radius: var(--gd-r); box-shadow: 0 14px 38px rgba(0, 0, 0, .22); } .gd-tile-cover { border-radius: var(--gd-r); border: 1px solid var(--gd-line); box-shadow: var(--gd-shadow); transition: transform .28s var(--gd-ease), box-shadow .28s var(--gd-ease); } .gd-tile:hover .gd-tile-cover { transform: translateY(-3px); box-shadow: var(--gd-shadow-lg); } .gd-tile-cover img { transition: transform .5s var(--gd-ease); } .gd-tile:hover .gd-tile-cover img { transform: scale(1.05); } @media (max-width: 900px) { .gd-hero-cover { width: 168px; } } .gd-tile-badge { position: absolute; top: 9px; left: 9px; z-index: 2; padding: 4px 9px; border-radius: 999px; background: rgba(15, 17, 21, .72); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; } .gd-tile-score { position: absolute; top: 9px; right: 9px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: var(--gd-red); color: #fff; font-size: 12px; font-weight: 800; } @media (max-width: 560px) { .gd-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; } .gd-sec--plain { padding: 16px; } } /* A compact rail card — same family, lighter weight. */ .gd-rcard { background: var(--gd-surface); border: 1px solid var(--gd-line); border-radius: var(--gd-r); box-shadow: var(--gd-shadow); overflow: hidden; } .gd-rcard-h { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--gd-line-soft); background: linear-gradient(180deg, var(--gd-line-soft) 0%, transparent 100%); } .gd-rcard-h > .gd-i { color: var(--gd-red); } .gd-rcard-h h2, .gd-rcard-h h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gd-muted); } .gd-rcard-b { padding: 16px; } /* ── Chips ──────────────────────────────────────────────────────────────── */ .gd-chips { display: flex; flex-wrap: wrap; gap: 8px; } .gd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--gd-line); background: var(--gd-surface); font-size: 13px; font-weight: 650; color: var(--gd-body); transition: border-color .16s var(--gd-ease), color .16s var(--gd-ease), background .16s var(--gd-ease), transform .16s var(--gd-ease); } a.gd-chip:hover { border-color: var(--gd-red); color: var(--gd-red); background: var(--gd-red-soft); transform: translateY(-1px); } .gd-chip-solid { background: var(--gd-red); border-color: var(--gd-red); color: #fff; } .gd-chip-quiet { background: var(--gd-line-soft); border-color: transparent; color: var(--gd-muted); } /* ── Stat tiles ─────────────────────────────────────────────────────────── */ .gd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .gd-stat { display: flex; align-items: center; gap: 13px; padding: 16px 18px; background: var(--gd-surface); border: 1px solid var(--gd-line); border-radius: var(--gd-r); box-shadow: var(--gd-shadow); transition: transform .18s var(--gd-ease), box-shadow .18s var(--gd-ease); } .gd-stat:hover { transform: translateY(-2px); box-shadow: var(--gd-shadow-lg); } .gd-stat-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: var(--gd-red-soft); color: var(--gd-red); } .gd-stat b { display: block; font-size: 20px; font-weight: 900; color: var(--gd-ink); line-height: 1.1; } .gd-stat span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--gd-muted); } /* ── Spec list (label / value rows) ─────────────────────────────────────── */ .gd-specs { display: flex; flex-direction: column; } .gd-spec { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--gd-line-soft); } .gd-spec:first-child { border-top: 0; padding-top: 0; } .gd-spec:last-child { padding-bottom: 0; } .gd-spec-k { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 132px; font-size: 13px; font-weight: 600; color: var(--gd-muted); } .gd-spec-k .gd-i { color: var(--gd-faint); } .gd-spec-v { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--gd-ink); } .gd-spec-v a:hover { color: var(--gd-red); } /* ── Cover art + branded fallback ───────────────────────────────────────── */ .gd-cover { position: relative; display: block; overflow: hidden; border-radius: var(--gd-r); background: var(--gd-line-soft); } .gd-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } /* * The fallback when a game has no cover. A branded gradient tile with the * title's initial — deliberately not the site-wide no-thumb.svg, which is a * grey camera glyph and reads as a broken image on a game card. */ .gd-cover-fb { position: relative; display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(120% 100% at 18% 0%, rgba(229, 27, 35, .30) 0%, transparent 58%), linear-gradient(150deg, #1B1F2A 0%, #0E1116 100%); color: #fff; overflow: hidden; } .gd-cover-fb::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(80% 70% at 50% 40%, #000 25%, transparent 100%); -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 25%, transparent 100%); } .gd-cover-fb-in { position: relative; z-index: 1; display: grid; place-items: center; gap: 8px; text-align: center; padding: 12px; } .gd-cover-fb-mono { font-size: clamp(28px, 22cqw, 64px); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: #fff; } .gd-cover-fb-lb { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, .55); } .gd-cover-fb .gd-i { color: rgba(255, 255, 255, .5); } /* ── Prose ──────────────────────────────────────────────────────────────── */ .gd-prose { color: var(--gd-body); font-size: 15.5px; line-height: 1.75; max-width: 72ch; } .gd-prose > * + * { margin-top: 1.05em; } .gd-prose h2 { font-size: 20px; font-weight: 800; margin-top: 1.6em; } .gd-prose h3 { font-size: 17px; font-weight: 800; margin-top: 1.4em; } .gd-prose a { color: var(--gd-red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .gd-prose ul, .gd-prose ol { padding-left: 1.35em; } .gd-prose li + li { margin-top: .4em; } .gd-prose img { border-radius: var(--gd-r); margin: 1.25em 0; } /* ── Empty state ────────────────────────────────────────────────────────── */ .gd-empty { display: grid; place-items: center; gap: 10px; text-align: center; padding: 46px 24px; border: 1px dashed var(--gd-line); border-radius: var(--gd-r); color: var(--gd-muted); } .gd-empty-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--gd-line-soft); color: var(--gd-faint); } .gd-empty h3 { font-size: 16px; font-weight: 800; } .gd-empty p { font-size: 14px; max-width: 46ch; } /* ── Breadcrumbs ────────────────────────────────────────────────────────── */ .gd-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13px; color: var(--gd-muted); } /* Padded to a usable tap size on touch. The trail sits inline in text, so the padding is negated horizontally — the words stay where they read, only the hit area grows. */ .gd-crumbs a { font-weight: 600; display: inline-block; padding: 6px 4px; margin: -6px -4px; } .gd-crumbs a:hover { color: var(--gd-red); } .gd-crumbs .gd-i { color: var(--gd-faint); } .gd-crumbs [aria-current] { color: var(--gd-ink); font-weight: 700; } /* ── Preview bar (admin previewing a draft) ─────────────────────────────── */ .gd-preview { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 18px; background: #FFF4E5; border-bottom: 1px solid #F3CD93; color: #8A5300; font-size: 13px; font-weight: 700; } html.theme-dark .gd-preview { background: #2A1F0C; border-bottom-color: #4A3712; color: #F0C070; } /* ── Footer ─────────────────────────────────────────────────────────────── */ .gd-foot { border-top: 1px solid var(--gd-line); background: var(--gd-surface); margin-top: 40px; } .gd-foot-in { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 34px; padding: 42px 0 30px; } .gd-foot-brand p { margin-top: 12px; font-size: 14px; color: var(--gd-muted); max-width: 40ch; line-height: 1.6; } .gd-foot-col h2 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gd-muted); margin-bottom: 12px; } .gd-foot-col a { display: block; padding: 5px 0; font-size: 14px; color: var(--gd-body); font-weight: 550; } .gd-foot-col a:hover { color: var(--gd-red); } .gd-foot-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .gd-foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--gd-line); color: var(--gd-muted); transition: .16s var(--gd-ease); } .gd-foot-social a:hover { border-color: var(--gd-red); color: var(--gd-red); transform: translateY(-2px); } .gd-foot-base { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 0 30px; border-top: 1px solid var(--gd-line-soft); font-size: 13px; color: var(--gd-muted); } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 1080px) { .gd-layout { grid-template-columns: minmax(0, 1fr); } .gd-rail { position: static; } } @media (max-width: 860px) { .gd-head-in { height: 60px; gap: 12px; } .gd-burger { display: inline-flex; } .gd-search { display: none; } /* The nav becomes a horizontal scroller rather than a hamburger drawer: four links do not justify a JS menu, and a scroller keeps them reachable in one tap. */ .gd-nav { order: 3; width: 100%; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gd-nav::-webkit-scrollbar { display: none; } .gd-head-in { flex-wrap: wrap; height: auto; padding-top: 12px; } .gd-burger { display: none; } } @media (max-width: 560px) { .gd-wrap { padding: 0 14px; } .gd-sec-h { padding: 15px 16px; } .gd-sec-b { padding: 16px; } .gd-layout { padding: 18px 0 52px; gap: 18px; } .gd-col { gap: 16px; } .gd-spec { flex-direction: column; gap: 3px; } .gd-spec-v { text-align: left; } .gd-foot-in { grid-template-columns: 1fr; gap: 26px; padding: 32px 0 22px; } } /* ============================================================================ GAME DETAIL PAGE ---------------------------------------------------------------------------- Everything below is specific to /games/{slug}. Kept in the same sheet because the detail page is where most of the system's components are actually used, and a second request would cost more than the bytes save. THE STAGE The hero is a dark cinematic stage in both of its states. With artwork it is the art, scaled and scrimmed. Without artwork it is a designed brand surface — gradient, glow and a faint grid — never a stand-in screenshot and never a flat white band. Both states share one layout, so uploading art changes what the hero looks like and nothing about how it is built. Children inside the stage read the --gd-onstage-* tokens declared on it, rather than each needing a `.gd-stage .thing` colour override. That is what keeps this section short despite the stage carrying a full second palette. ========================================================================== */ /* ── Cinematic stage ────────────────────────────────────────────────────── */ .gd-stage { position: relative; isolation: isolate; overflow: hidden; background: #0A0C11; border-bottom: 1px solid rgba(255, 255, 255, .07); /* The on-dark palette. Everything inside the stage uses these. */ --gd-onstage: #FFFFFF; --gd-onstage-soft: rgba(255, 255, 255, .76); --gd-onstage-dim: rgba(255, 255, 255, .56); --gd-onstage-line: rgba(255, 255, 255, .14); --gd-onstage-fill: rgba(255, 255, 255, .07); --gd-red-lit: #FF5157; color: var(--gd-onstage-soft); } /* * The artwork itself. Decorative — every fact it carries also appears as text * below it — so it is rendered with an empty alt behind two scrim layers that * hold the foreground readable no matter how bright the art is. */ .gd-stage-art { position: absolute; inset: 0; z-index: -3; } .gd-stage-art img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); filter: saturate(1.12) contrast(1.02); } /* Readability scrim: heavy at the left where the copy sits, light at the right so the art still reads as art. */ .gd-stage::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(102deg, rgba(8, 10, 14, .95) 0%, rgba(8, 10, 14, .84) 34%, rgba(8, 10, 14, .44) 66%, rgba(8, 10, 14, .70) 100%), linear-gradient(180deg, rgba(8, 10, 14, .74) 0%, rgba(8, 10, 14, .12) 30%, rgba(8, 10, 14, .90) 100%); } /* Brand glow and vignette, over the scrim. */ .gd-stage::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(68% 88% at 6% -4%, rgba(229, 27, 35, .32) 0%, transparent 58%), radial-gradient(46% 66% at 102% 104%, rgba(229, 27, 35, .18) 0%, transparent 60%); } /* * No artwork. A composed brand surface rather than an empty one: two red * washes over a cool gradient, with a faint grid that fades out before it * reaches the copy. This is design, not a placeholder image. */ .gd-stage.no-art { background: radial-gradient(88% 118% at 10% -18%, rgba(229, 27, 35, .40) 0%, transparent 56%), radial-gradient(66% 88% at 94% 6%, rgba(229, 27, 35, .17) 0%, transparent 58%), linear-gradient(158deg, #191E2A 0%, #0E1116 46%, #090B10 100%); } .gd-stage.no-art::before { background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 58px 58px, 58px 58px; -webkit-mask-image: radial-gradient(126% 104% at 34% 0%, #000 0%, transparent 74%); mask-image: radial-gradient(126% 104% at 34% 0%, #000 0%, transparent 74%); } .gd-stage.no-art::after { background: radial-gradient(46% 66% at 100% 100%, rgba(229, 27, 35, .16) 0%, transparent 62%); } .gd-stage-in { position: relative; padding-top: 20px; } /* Copy on the left, score panel on the right — the reference composition. */ .gd-stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; padding: 20px 0 28px; } .gd-stage-main { display: flex; flex-direction: column; gap: 15px; min-width: 0; } /* Breadcrumbs sit on the dark, so they take the stage palette. */ .gd-stage .gd-crumbs, .gd-stage .gd-crumbs a { color: var(--gd-onstage-dim); } .gd-stage .gd-crumbs a:hover { color: var(--gd-onstage); } .gd-stage .gd-crumbs [aria-current] { color: var(--gd-onstage); font-weight: 700; } .gd-stage .gd-crumbs .gd-i { color: rgba(255, 255, 255, .32); } /* ── Stage flags ────────────────────────────────────────────────────────── */ /* * Every flag on this row is a fact the database holds — a release status, a * franchise, an age rating. There is no trending position, no award count and * no "featured" ribbon, because nothing in the schema records one. */ .gd-flags { display: flex; flex-wrap: wrap; gap: 8px; } .gd-flag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; background: var(--gd-onstage-fill); border: 1px solid var(--gd-onstage-line); color: var(--gd-onstage); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .18s var(--gd-ease), border-color .18s var(--gd-ease), transform .18s var(--gd-ease); } a.gd-flag:hover { background: rgba(255, 255, 255, .17); border-color: rgba(255, 255, 255, .4); transform: translateY(-1px); } .gd-flag--red { background: linear-gradient(135deg, #FF2A32, var(--gd-red-dark)); border-color: transparent; box-shadow: 0 6px 20px rgba(229, 27, 35, .38); } a.gd-flag--red:hover { background: linear-gradient(135deg, #FF3B43, var(--gd-red)); border-color: transparent; } .gd-flag .gd-i { opacity: .9; } /* ── Title block ────────────────────────────────────────────────────────── */ .gd-stage-id { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 26px; align-items: end; } /* * The poster floats over the stage rather than sitting in a column of its own, * so an artless game does not leave a tall empty gutter beside the copy. * * The frame takes the ARTWORK's own aspect ratio, not a fixed 3:4. * * Game covers are not one shape — the one on file here is 941x1672, a tall * poster, and forcing it into a 3:4 box gives a choice between cropping the art * or letterboxing it. Letterboxing is what produced the empty bands above and * below the cover. Overriding the component's inline aspect-ratio and letting * the image set its own height removes both problems: nothing is cropped, * nothing is padded, and the art meets the frame on every edge. * * `aspect-ratio: auto` needs !important because the cover component writes its * ratio as an inline style, which no class selector can outrank. The same * technique is already used by .gd-card-cover below. */ .gd-stage-poster { width: 170px; aspect-ratio: auto !important; border-radius: 16px; background: transparent; box-shadow: 0 22px 52px rgba(0, 0, 0, .55); /* * line-height:0 is load-bearing. The frame is a holding whitespace * text nodes around the , so it forms a line box and inherits the * page's line-height — measured live, that left the frame 320px tall * around a 302px image and produced an 18px band under the cover. Zeroing * the line box makes the frame shrink-wrap the artwork exactly. */ line-height: 0; font-size: 0; } .gd-stage-poster.gd-cover { background: transparent; } .gd-stage-poster img { width: 100%; height: auto; object-fit: contain; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .10); } /* The branded monogram fallback has nothing to show through to, so it keeps a surface and a poster shape of its own. */ .gd-stage-poster .gd-cover-fb { border-radius: 16px; aspect-ratio: 3 / 4; } .gd-stage-name { min-width: 0; } .gd-stage-name h1 { font-size: clamp(32px, 5vw, 60px); font-weight: 900; letter-spacing: -.034em; line-height: 1.02; color: var(--gd-onstage); text-shadow: 0 2px 26px rgba(0, 0, 0, .55); } /* The tagline: one editorial line, set directly under the title and above the summary. Sized between the two so the three read as a hierarchy rather than as three paragraphs. */ /* ── Game Details: structured attribute rows ──────────────────────────────── A definition list rather than a table: the values are chips of varying width and a table would force every row to the widest one. Collapses to stacked label-over-values on narrow screens. ------------------------------------------------------------------------- */ .gd-attrs { margin: 0; display: flex; flex-direction: column; gap: 2px; } .gd-attrs-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 18px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--gd-line, rgba(128,128,128,.16)); } .gd-attrs-row:last-child { border-bottom: 0; } .gd-attrs-row dt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gd-dim, #7b8494); } .gd-attrs-row dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } .gd-attrs-block { margin-top: 22px; } .gd-attrs-block h3 { margin: 0 0 9px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gd-dim, #7b8494); } .gd-chiprow { display: flex; flex-wrap: wrap; gap: 6px; } .gd-chip--quiet { opacity: .72; font-weight: 500; } @media (max-width: 640px) { .gd-attrs-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } } .gd-stage-tagline { margin-top: 12px; font-size: clamp(16px, 1.9vw, 20px); line-height: 1.4; max-width: 46ch; font-weight: 600; letter-spacing: -.012em; color: var(--gd-onstage-soft); } /* "Also known as" / "Formerly". Deliberately quiet — it is reference information, not part of the pitch. */ .gd-stage-aka { margin-top: 8px; font-size: 13.5px; line-height: 1.55; max-width: 58ch; color: var(--gd-onstage-dim); } .gd-stage-aka span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-right: 7px; } .gd-stage-lede { margin-top: 14px; font-size: 16.5px; line-height: 1.65; max-width: 58ch; color: var(--gd-onstage-soft); } .gd-stage-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 2px 0; } .gd-stage-meta > div { display: flex; flex-direction: column; gap: 3px; } .gd-stage-meta dt { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gd-onstage-dim); } .gd-stage-meta dd { margin: 0; font-size: 14.5px; font-weight: 750; color: var(--gd-onstage); } .gd-stage-meta a:hover { color: var(--gd-red-lit); } .gd-stage-meta .gd-muted { color: var(--gd-onstage-dim); font-weight: 600; } /* Chips and buttons inherit the stage palette rather than the page one. */ .gd-stage .gd-chip { background: var(--gd-onstage-fill); border-color: var(--gd-onstage-line); color: var(--gd-onstage); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .gd-stage a.gd-chip:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); color: var(--gd-onstage); transform: translateY(-1px); } /* ── Platform badges ────────────────────────────────────────────────────── */ .gd-plats-l { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gd-onstage-dim); margin-bottom: 8px; } .gd-plats { display: flex; flex-wrap: wrap; gap: 8px; } /* * Icon plus the platform's own short label — "PC", "PS5", "Switch". The glyph * comes from the family column, so a platform with an unmapped family still * gets a badge that names itself. */ .gd-plat { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; border-radius: 12px; background: var(--gd-onstage-fill); border: 1px solid var(--gd-onstage-line); color: var(--gd-onstage); font-size: 12.5px; font-weight: 750; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .18s var(--gd-ease), border-color .18s var(--gd-ease), transform .18s var(--gd-ease); } .gd-plat:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .48); transform: translateY(-2px); } .gd-plat .gd-i { opacity: .92; } .gd-stage-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 6px; } .gd-stage .gd-btn { background: var(--gd-onstage-fill); border-color: var(--gd-onstage-line); color: var(--gd-onstage); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .gd-stage .gd-btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); color: var(--gd-onstage); } .gd-stage .gd-btn-primary { background: linear-gradient(135deg, #FF2A32, var(--gd-red-dark)); border-color: transparent; color: #fff; box-shadow: 0 12px 32px rgba(229, 27, 35, .44); } .gd-stage .gd-btn-primary:hover { background: linear-gradient(135deg, #FF3B43, var(--gd-red)); border-color: transparent; box-shadow: 0 16px 40px rgba(229, 27, 35, .56); transform: translateY(-2px); } /* ── Score panel ────────────────────────────────────────────────────────── */ .gd-scorecard { position: relative; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .065); border: 1px solid var(--gd-onstage-line); -webkit-backdrop-filter: blur(24px) saturate(1.25); backdrop-filter: blur(24px) saturate(1.25); box-shadow: 0 26px 64px rgba(0, 0, 0, .46); } .gd-scorecard-h { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid var(--gd-onstage-line); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gd-onstage-soft); } .gd-scorecard-h .gd-i { color: var(--gd-red-lit); } .gd-bigscore { display: flex; align-items: center; gap: 18px; padding: 20px 18px 16px; } .gd-bigscore-b { min-width: 0; } .gd-bigscore-n { display: flex; align-items: baseline; gap: 4px; font-size: 50px; font-weight: 900; line-height: .92; letter-spacing: -.042em; color: var(--gd-onstage); } .gd-bigscore-n i { font-size: 17px; font-weight: 800; font-style: normal; color: var(--gd-onstage-dim); } .gd-bigscore-l { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--gd-onstage-soft); } .gd-stars { display: flex; gap: 3px; margin-top: 9px; color: var(--gd-red-lit); } .gd-stars .is-off { color: rgba(255, 255, 255, .2); } /* * A ring drawn straight from the editorial rating — the same number the panel * prints beside it, shown a second way. It is not a separate metric and is * never rendered without one. */ .gd-ring { position: relative; flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gd-red-lit) calc(var(--gd-pct) * 1%), rgba(255, 255, 255, .13) 0); } .gd-ring::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: rgba(11, 14, 19, .88); } .gd-ring b { position: relative; z-index: 1; font-size: 18px; font-weight: 900; color: var(--gd-onstage); } /* Critic scores, coloured by the convention those boards themselves use. */ .gd-critics { display: flex; gap: 9px; padding: 0 18px 16px; } .gd-critic { flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 14px; background: var(--gd-onstage-fill); border: 1px solid var(--gd-onstage-line); transition: background .18s var(--gd-ease), border-color .18s var(--gd-ease); } a.gd-critic:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .38); } .gd-critic b { font-size: 19px; font-weight: 900; line-height: 1; color: var(--gd-onstage); } .gd-critic span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gd-onstage-dim); } .gd-critic.is-high b { color: #4ADE80; } .gd-critic.is-mid b { color: #FACC15; } .gd-critic.is-low b { color: #F87171; } .gd-scorestats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 1px; background: var(--gd-onstage-line); border-top: 1px solid var(--gd-onstage-line); } .gd-scorestat { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; background: rgba(10, 12, 17, .42); } .gd-scorestat .gd-i { color: var(--gd-red-lit); } .gd-scorestat b { font-size: 19px; font-weight: 900; line-height: 1.05; color: var(--gd-onstage); } .gd-scorestat span { font-size: 11.5px; font-weight: 650; color: var(--gd-onstage-dim); } /* ── Media strip, docked to the stage ───────────────────────────────────── */ .gd-strip { position: relative; padding-bottom: 24px; } .gd-strip-in { display: flex; align-items: center; gap: 11px; } .gd-strip-rail { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; padding: 4px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gd-strip-rail::-webkit-scrollbar { display: none; } .gd-thumb { position: relative; flex: 0 0 162px; aspect-ratio: 16 / 9; height: auto; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #0E1116; border: 1px solid var(--gd-onstage-line); transition: transform .22s var(--gd-ease), border-color .22s var(--gd-ease), box-shadow .22s var(--gd-ease); } /* Every tile crops the same way, so a 16:9 video poster and a screenshot sit at identical proportions instead of one letterboxing beside the other. */ .gd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gd-thumb:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .55); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); } /* Videos carry a play badge so the two media kinds are told apart before the reader clicks one. */ .gd-thumb-play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(8, 10, 14, .04), rgba(8, 10, 14, .42)); color: #fff; } .gd-thumb-play span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(229, 27, 35, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); } .gd-thumb-l { position: absolute; left: 8px; bottom: 7px; padding: 3px 8px; border-radius: 7px; background: rgba(8, 10, 14, .72); color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .gd-strip-nav { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gd-onstage-fill); border: 1px solid var(--gd-onstage-line); color: var(--gd-onstage); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .18s var(--gd-ease), border-color .18s var(--gd-ease); } .gd-strip-nav:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); } /* * No media. A stated absence, styled — never a row of grey rectangles * pretending to be screenshots that have not loaded. */ .gd-strip-empty { display: flex; align-items: center; gap: 13px; padding: 15px 18px; border-radius: 16px; border: 1px dashed var(--gd-onstage-line); background: rgba(255, 255, 255, .04); color: var(--gd-onstage-soft); font-size: 13.5px; line-height: 1.5; } .gd-strip-empty .gd-i { color: var(--gd-onstage-dim); } .gd-strip-empty b { display: block; color: var(--gd-onstage); font-size: 14px; font-weight: 750; margin-bottom: 2px; } /* ── Section tab bar ────────────────────────────────────────────────────── */ /* * Anchors, not a JS tab widget: every section is on the page and reachable * without script, and the bar only marks where you are. It is rendered at all * only when there are at least two sections to move between. */ .gd-tabs { position: sticky; top: 65px; z-index: 20; background: color-mix(in srgb, var(--gd-surface) 92%, transparent); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--gd-line); } .gd-tabs-in { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gd-tabs-in::-webkit-scrollbar { display: none; } .gd-tab { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 15px 15px 13px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 700; color: var(--gd-muted); transition: color .18s var(--gd-ease), border-color .18s var(--gd-ease); } .gd-tab:hover { color: var(--gd-ink); } .gd-tab.is-on { color: var(--gd-red); border-bottom-color: var(--gd-red); } .gd-tab-n { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--gd-line-soft); color: var(--gd-muted); } .gd-tab.is-on .gd-tab-n { background: var(--gd-red-soft); color: var(--gd-red); } /* ── Feature cards ──────────────────────────────────────────────────────── */ .gd-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 13px; } .gd-feat { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 9px; padding: 18px; border-radius: 16px; border: 1px solid var(--gd-line); background: linear-gradient(158deg, var(--gd-line-soft) 0%, var(--gd-surface) 62%); transition: transform .24s var(--gd-ease), box-shadow .24s var(--gd-ease), border-color .24s var(--gd-ease); } .gd-feat::after { content: ''; position: absolute; right: -36px; bottom: -46px; width: 128px; height: 128px; border-radius: 50%; background: var(--gd-red-soft); opacity: 0; transition: opacity .3s var(--gd-ease); pointer-events: none; } .gd-feat:hover { transform: translateY(-3px); box-shadow: var(--gd-shadow-lg); border-color: var(--gd-red-ring); } .gd-feat:hover::after { opacity: 1; } .gd-feat > * { position: relative; z-index: 1; } .gd-feat-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(140deg, var(--gd-red), var(--gd-red-dark)); color: #fff; box-shadow: 0 6px 16px rgba(229, 27, 35, .3); } .gd-feat b { font-size: 14.5px; font-weight: 750; color: var(--gd-ink); } .gd-feat p { font-size: 13px; line-height: 1.55; color: var(--gd-muted); } /* ── Screenshots ────────────────────────────────────────────────────────── */ .gd-shots { display: grid; gap: 12px; } .gd-shots-lead { position: relative; padding: 0; border-radius: var(--gd-r); overflow: hidden; border: 1px solid var(--gd-line); cursor: pointer; } .gd-shots-lead img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .6s var(--gd-ease); } .gd-shots-lead:hover img { transform: scale(1.03); } .gd-shots-rest { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .gd-shot { position: relative; padding: 0; border-radius: var(--gd-r-sm); overflow: hidden; border: 1px solid var(--gd-line); cursor: pointer; background: var(--gd-line-soft); } .gd-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .5s var(--gd-ease); } .gd-shot:hover img { transform: scale(1.06); } .gd-shot::after { content: ''; position: absolute; inset: 0; background: transparent; transition: background .22s var(--gd-ease); } .gd-shot:hover::after { background: rgba(9, 11, 15, .16); } /* ── Lightbox ───────────────────────────────────────────────────────────── */ .gd-lb[hidden] { display: none; } .gd-lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 40px; background: rgba(6, 8, 12, .93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .gd-lb-fig { margin: 0; max-width: min(1200px, 94vw); display: flex; flex-direction: column; gap: 12px; } .gd-lb-fig img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--gd-r); display: block; margin: 0 auto; } /* `display: block` above outranks the [hidden] attribute's UA rule, so without this the still frame stays on screen behind a video — with an empty src, which the browser renders as a broken-image icon. */ .gd-lb-fig img[hidden], .gd-lb-video[hidden] { display: none; } .gd-lb-cap { color: rgba(255, 255, 255, .78); font-size: 13.5px; text-align: center; } .gd-lb-count { color: rgba(255, 255, 255, .5); font-size: 12px; font-weight: 700; } .gd-lb-btn { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #fff; transition: background .18s var(--gd-ease); } .gd-lb-btn:hover { background: rgba(255, 255, 255, .24); } .gd-lb-prev { left: 18px; } .gd-lb-next { right: 18px; } .gd-lb-close { position: absolute; top: 18px; right: 18px; transform: none; } /* Video player frame, used when a trailer URL resolves to an embeddable host. */ .gd-lb-video { width: min(1100px, 92vw); aspect-ratio: 16 / 9; border-radius: var(--gd-r); overflow: hidden; background: #000; } .gd-lb-video iframe { width: 100%; height: 100%; border: 0; display: block; } /* ── Where to buy ───────────────────────────────────────────────────────── */ .gd-buys { display: grid; gap: 11px; } .gd-buy { display: flex; align-items: center; gap: 14px; padding: 15px 17px; border-radius: 16px; border: 1px solid var(--gd-line); background: linear-gradient(150deg, var(--gd-line-soft) 0%, var(--gd-surface) 58%); transition: transform .2s var(--gd-ease), border-color .2s var(--gd-ease), box-shadow .2s var(--gd-ease); } .gd-buy:hover { transform: translateY(-2px); border-color: var(--gd-red-ring); box-shadow: var(--gd-shadow-lg); } .gd-buy.is-gone { opacity: .58; } .gd-buy.is-gone:hover { transform: none; border-color: var(--gd-line); box-shadow: none; } .gd-buy-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; background: var(--gd-surface); border: 1px solid var(--gd-line); color: var(--gd-muted); overflow: hidden; } .gd-buy-ic img { width: 100%; height: 100%; object-fit: contain; } .gd-buy-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .gd-buy-b b { font-size: 15px; font-weight: 750; color: var(--gd-ink); } .gd-buy-m { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--gd-muted); } .gd-buy-m span { display: inline-flex; align-items: center; gap: 4px; } .gd-buy-m span + span::before { content: '·'; margin-right: 5px; color: var(--gd-faint); } .gd-buy-p { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .gd-buy-p b { font-size: 18px; font-weight: 850; color: var(--gd-ink); white-space: nowrap; } .gd-buy-was { font-size: 12.5px; color: var(--gd-faint); text-decoration: line-through; } .gd-buy-off { display: inline-block; padding: 2px 7px; border-radius: 6px; background: #16A34A; color: #fff; font-size: 11px; font-weight: 800; } .gd-buy-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gd-muted); } /* ── Credits, companies and people ──────────────────────────────────────── */ .gd-credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; } .gd-credit { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 15px; border: 1px solid var(--gd-line); background: linear-gradient(150deg, var(--gd-line-soft) 0%, var(--gd-surface) 58%); transition: transform .2s var(--gd-ease), border-color .2s var(--gd-ease), box-shadow .2s var(--gd-ease); } a.gd-credit:hover { transform: translateY(-2px); border-color: var(--gd-red-ring); box-shadow: var(--gd-shadow-lg); } .gd-credit-av { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; overflow: hidden; background: var(--gd-surface); border: 1px solid var(--gd-line); font-size: 16px; font-weight: 850; color: var(--gd-muted); } .gd-credit-av.is-round { border-radius: 50%; } .gd-credit-av img { width: 100%; height: 100%; object-fit: cover; } .gd-credit-b { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gd-credit-b b { font-size: 14.5px; font-weight: 750; color: var(--gd-ink); } a.gd-credit:hover .gd-credit-b b { color: var(--gd-red); } .gd-credit-b span { font-size: 12.5px; color: var(--gd-muted); } .gd-rolegrp + .gd-rolegrp { margin-top: 22px; } .gd-rolegrp > h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gd-muted); } .gd-rolegrp > h3::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--gd-red); flex: 0 0 3px; } /* ── Rating boards ──────────────────────────────────────────────────────── */ .gd-boards { display: flex; flex-wrap: wrap; gap: 9px; } .gd-board { display: flex; flex-direction: column; gap: 3px; padding: 10px 13px; border-radius: 12px; border: 1px solid var(--gd-line); background: var(--gd-line-soft); } a.gd-board:hover { border-color: var(--gd-red-ring); background: var(--gd-red-soft); } .gd-board b { font-size: 16px; font-weight: 850; color: var(--gd-ink); line-height: 1.15; } .gd-board span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gd-muted); } .gd-verdict { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; padding: 15px; border-radius: 15px; background: var(--gd-red-soft); border: 1px solid var(--gd-red-ring); } .gd-verdict-n { font-size: 32px; font-weight: 900; color: var(--gd-red); line-height: 1; } .gd-verdict-b b { display: block; font-size: 14px; font-weight: 800; color: var(--gd-ink); } .gd-verdict-b span { font-size: 12.5px; color: var(--gd-muted); } /* ── Language matrix ────────────────────────────────────────────────────── */ .gd-langs { width: 100%; border-collapse: collapse; font-size: 14px; } .gd-langs th, .gd-langs td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--gd-line-soft); } .gd-langs thead th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gd-muted); background: var(--gd-line-soft); } .gd-langs th:not(:first-child), .gd-langs td:not(:first-child) { text-align: center; width: 108px; } .gd-langs tbody tr:last-child td, .gd-langs tbody tr:last-child th { border-bottom: 0; } .gd-langs tbody tr:hover { background: var(--gd-line-soft); } .gd-langs td:first-child { font-weight: 650; color: var(--gd-ink); } .gd-yes { color: #16A34A; } .gd-no { color: var(--gd-faint); } /* ── System requirements ────────────────────────────────────────────────── */ .gd-reqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; } .gd-req { border: 1px solid var(--gd-line); border-radius: var(--gd-r); overflow: hidden; } .gd-req > h3 { padding: 12px 16px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gd-muted); background: var(--gd-line-soft); border-bottom: 1px solid var(--gd-line); } .gd-req.is-rec > h3 { color: var(--gd-red); background: var(--gd-red-soft); } .gd-req .gd-specs { padding: 14px 16px; } /* ── Video cards ────────────────────────────────────────────────────────── */ .gd-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 14px; } .gd-video { position: relative; display: block; padding: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--gd-line); background: var(--gd-line-soft); cursor: pointer; text-align: left; transition: transform .22s var(--gd-ease), border-color .22s var(--gd-ease), box-shadow .22s var(--gd-ease); } .gd-video:hover { transform: translateY(-3px); border-color: var(--gd-red-ring); box-shadow: var(--gd-shadow-lg); } .gd-video-poster { position: relative; display: block; aspect-ratio: 16 / 9; background: #0E1116; } .gd-video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; } .gd-video-play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(8, 10, 14, .1), rgba(8, 10, 14, .5)); } .gd-video-play span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(229, 27, 35, .94); color: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); transition: transform .22s var(--gd-ease); } .gd-video:hover .gd-video-play span { transform: scale(1.08); } .gd-video-b { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; background: var(--gd-surface); } .gd-video-b b { font-size: 14.5px; font-weight: 750; color: var(--gd-ink); } .gd-video-b span { font-size: 12.5px; color: var(--gd-muted); } /* ── Franchise / engine feature card ────────────────────────────────────── */ /* * Used for the series and engine blocks: a wide card with its own art where * the record carries a logo, and typography alone where it does not. */ .gd-bill { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--gd-line); background: linear-gradient(150deg, var(--gd-red-soft) 0%, var(--gd-surface) 62%); transition: transform .2s var(--gd-ease), border-color .2s var(--gd-ease), box-shadow .2s var(--gd-ease); } a.gd-bill:hover { transform: translateY(-2px); border-color: var(--gd-red-ring); box-shadow: var(--gd-shadow-lg); } .gd-bill-ic { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 15px; overflow: hidden; background: linear-gradient(140deg, var(--gd-red), var(--gd-red-dark)); color: #fff; box-shadow: 0 8px 20px rgba(229, 27, 35, .28); } .gd-bill-ic img { width: 100%; height: 100%; object-fit: cover; } /* Two or more bills stack with a gap; a lone one needs no wrapper rule. */ .gd-bills { display: grid; gap: 10px; } .gd-bill-b { min-width: 0; display: flex; flex-direction: column; gap: 3px; } /* The role a company is credited in — "Developer", "Publisher" — sitting above its name rather than beside it, so the name stays the thing you scan for. */ .gd-bill-r { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gd-red); } .gd-bill-b b { font-size: 16px; font-weight: 800; color: var(--gd-ink); } .gd-bill-b span { font-size: 13px; color: var(--gd-muted); line-height: 1.5; } .gd-bill-go { margin-left: auto; flex: 0 0 auto; color: var(--gd-faint); } a.gd-bill:hover .gd-bill-go { color: var(--gd-red); } /* ── Read more ──────────────────────────────────────────────────────────── */ .gd-more { position: relative; } .gd-more[data-collapsed="true"] .gd-more-body { max-height: 232px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); } .gd-more-btn { margin-top: 14px; } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 1180px) { /* The score panel stops being a column and becomes a band under the copy, with its stats spread across the full width. */ .gd-stage-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } .gd-scorecard { max-width: 640px; } } @media (max-width: 900px) { .gd-stage-id { grid-template-columns: 130px minmax(0, 1fr); gap: 20px; } .gd-stage-poster { width: 130px; } .gd-stage-lede { font-size: 15.5px; } .gd-tabs { position: static; } } @media (max-width: 620px) { .gd-stage-in { padding-top: 14px; } .gd-stage-grid { padding: 16px 0 22px; gap: 20px; } /* Poster above the title rather than beside it — at this width a side-by -side pair leaves the title two words wide. */ .gd-stage-id { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } .gd-stage-poster { width: 112px; } .gd-stage-name h1 { font-size: clamp(27px, 8vw, 36px); } .gd-stage-meta { gap: 10px 20px; } .gd-stage-cta .gd-btn { flex: 1 1 100%; justify-content: center; } .gd-bigscore { gap: 14px; padding: 16px 15px 12px; } .gd-bigscore-n { font-size: 40px; } .gd-ring { flex-basis: 70px; width: 70px; height: 70px; } .gd-critics { padding: 0 15px 14px; } .gd-thumb { flex-basis: 138px; height: 78px; } .gd-strip-nav { display: none; } .gd-buy { flex-wrap: wrap; } .gd-buy-p { width: 100%; align-items: flex-start; text-align: left; } .gd-langs th:not(:first-child), .gd-langs td:not(:first-child) { width: auto; } .gd-langs th, .gd-langs td { padding: 8px 6px; font-size: 13px; } .gd-lb { padding: 12px; } .gd-lb-btn { width: 40px; height: 40px; } .gd-lb-prev { left: 6px; } .gd-lb-next { right: 6px; } } /* Motion is an enhancement; readers who ask for less get none of it. */ @media (prefers-reduced-motion: reduce) { .gd-stage-art img { transform: none; } .gd *, .gd *::before, .gd *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .gd-strip-rail { scroll-behavior: auto; } } /* ============================================================================ GAME DIRECTORY ---------------------------------------------------------------------------- Everything below is specific to the listing pages — /games and its genre, platform, feature, collection and developer slices. The detail page's hero is a dark cinematic stage; this one is deliberately the opposite. A directory is a bright, scannable surface a reader sweeps across, so the brand shows up here as red light over white rather than as red light in the dark. The two pages then read as two rooms in one building instead of two attempts at the same room. All `gd-` namespaced, so nothing here can reach an article page and the older games.css the profile pages still load cannot reach any of this. ========================================================================== */ /* ── Directory hero ─────────────────────────────────────────────────────── */ .gd-dir-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--gd-line); background: radial-gradient(72% 130% at 88% -30%, rgba(229, 27, 35, .16) 0%, transparent 62%), radial-gradient(52% 96% at 4% 0%, rgba(229, 27, 35, .10) 0%, transparent 58%), linear-gradient(180deg, var(--gd-surface) 0%, var(--gd-canvas) 100%); } /* A faint grid, masked away before it reaches the copy — texture at the edges, clean where the words are. */ .gd-dir-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--gd-line) 1px, transparent 1px), linear-gradient(90deg, var(--gd-line) 1px, transparent 1px); background-size: 62px 62px, 62px 62px; opacity: .5; -webkit-mask-image: radial-gradient(118% 96% at 78% 6%, #000 0%, transparent 72%); mask-image: radial-gradient(118% 96% at 78% 6%, #000 0%, transparent 72%); } .gd-dir-hero-in { position: relative; padding: 22px 0 30px; } .gd-dir-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: end; margin-top: 18px; } .gd-dir-copy { min-width: 0; } .gd-dir-t { font-size: clamp(34px, 5vw, 58px); font-weight: 900; letter-spacing: -.036em; line-height: 1.02; color: var(--gd-ink); } /* The brand half of the wordmark. */ .gd-dir-t em { font-style: normal; background: linear-gradient(120deg, #FF2A32 0%, var(--gd-red) 46%, var(--gd-red-dark) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .gd-dir-x { margin-top: 13px; font-size: 16.5px; line-height: 1.62; max-width: 54ch; color: var(--gd-muted); } /* Stat tiles. Rendered only for counts the database actually returns, so this row is three tiles wide as readily as four and never shows a zero. */ .gd-dir-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(138px, 1fr); gap: 12px; flex: 0 0 auto; } .gd-dir-stat { display: flex; align-items: center; gap: 12px; padding: 14px 17px; border-radius: 17px; background: color-mix(in srgb, var(--gd-surface) 76%, transparent); border: 1px solid var(--gd-line); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: var(--gd-shadow); transition: transform .2s var(--gd-ease), box-shadow .2s var(--gd-ease), border-color .2s var(--gd-ease); } .gd-dir-stat:hover { transform: translateY(-2px); box-shadow: var(--gd-shadow-lg); border-color: var(--gd-red-ring); } .gd-dir-stat-i { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 13px; color: #fff; background: linear-gradient(140deg, #FF2A32, var(--gd-red-dark)); box-shadow: 0 8px 20px rgba(229, 27, 35, .3); } .gd-dir-stat-b { min-width: 0; display: flex; flex-direction: column; } .gd-dir-stat-b b { font-size: 22px; font-weight: 900; line-height: 1.08; color: var(--gd-ink); letter-spacing: -.02em; } .gd-dir-stat-b span { font-size: 12px; font-weight: 650; color: var(--gd-muted); } /* Collection shortcuts. */ .gd-dir-colls { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; } .gd-dir-coll { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; background: var(--gd-surface); border: 1px solid var(--gd-line); font-size: 13.5px; font-weight: 700; color: var(--gd-body); box-shadow: var(--gd-shadow); transition: transform .18s var(--gd-ease), border-color .18s var(--gd-ease), color .18s var(--gd-ease); } .gd-dir-coll .gd-i { color: var(--gd-faint); transition: transform .18s var(--gd-ease); } .gd-dir-coll:hover { color: var(--gd-red); border-color: var(--gd-red-ring); transform: translateY(-2px); } .gd-dir-coll:hover .gd-i { color: var(--gd-red); transform: translateX(2px); } /* ── Directory layout ───────────────────────────────────────────────────── */ .gd-dir-layout { display: grid; grid-template-columns: 274px minmax(0, 1fr); gap: 26px; padding: 26px 0 60px; align-items: start; } /* ── Filter rail ────────────────────────────────────────────────────────── */ .gd-filters { position: sticky; top: 84px; min-width: 0; } .gd-filters-box { border-radius: var(--gd-r-lg); overflow: hidden; background: var(--gd-surface); border: 1px solid var(--gd-line); box-shadow: var(--gd-shadow); } .gd-filters-h { display: flex; align-items: center; gap: 10px; padding: 15px 18px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gd-ink); cursor: pointer; list-style: none; background: linear-gradient(150deg, var(--gd-red-soft) 0%, transparent 70%); border-bottom: 1px solid var(--gd-line); } .gd-filters-h::-webkit-details-marker { display: none; } .gd-filters-h > span:first-child { display: inline-flex; align-items: center; gap: 9px; } .gd-filters-h .gd-i { color: var(--gd-red); } .gd-filters-n { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--gd-red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0; } /* The caret is the only part that moves, and only where the disclosure is actually interactive. */ .gd-filters-caret { margin-left: auto; color: var(--gd-faint); transition: transform .2s var(--gd-ease); } .gd-filters-box[open] .gd-filters-caret { transform: rotate(90deg); } .gd-filters-b { padding: 17px 18px 19px; display: flex; flex-direction: column; gap: 15px; } .gd-filters-clear { margin-top: 3px; } .gd-filters-clear:hover { border-color: var(--gd-red); color: var(--gd-red); } /* ── Form controls ──────────────────────────────────────────────────────── */ .gd-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .gd-field-l { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gd-muted); } .gd-input { width: 100%; height: 42px; padding: 0 13px; border-radius: 12px; border: 1px solid var(--gd-line); background: var(--gd-canvas); color: var(--gd-ink); font-size: 14px; font-weight: 600; font-family: inherit; transition: border-color .18s var(--gd-ease), box-shadow .18s var(--gd-ease), background .18s var(--gd-ease); } .gd-input:hover { border-color: var(--gd-faint); } .gd-input:focus { outline: none; background: var(--gd-surface); border-color: var(--gd-red); box-shadow: 0 0 0 3px var(--gd-red-ring); } .gd-input::placeholder { color: var(--gd-faint); font-weight: 500; } /* Search keeps its glyph inside the field. */ .gd-field-search { position: relative; display: flex; align-items: center; } .gd-field-search .gd-i { position: absolute; left: 12px; color: var(--gd-faint); pointer-events: none; } .gd-field-search .gd-input { padding-left: 35px; } /* * Native