/* ========================================================================== XXXGames - token apply layer (OPT-IN, first slice) ========================================================================== Re-skins the live site from assets/css/tokens.css. Nothing here runs unless a page opts in: Rollback = remove that one class. There is no other switch, and no !important anywhere in this file, so any stale rule that still wins is a specificity bug you can see and fix rather than a fight. LOAD ORDER: bootstrap.min.css -> tokens.css -> styles.css -> play-page.css -> xg-theme.css WHAT THIS SLICE COVERS (deliberately limited, so it can be reviewed): A. page canvas + ink, including the light-theme paragraph-ink bug B. chrome: navbar, side rail, footer C. play-page surfaces: title bar, info cards, tags, similar cards, tags chips D. actions + focus (one action colour) E. the "red soup" reduction: red leaves borders, headings and icons NOT COVERED YET (next slices): - home/most-played/favourites card gradients (styles.css .game-card, .gf-card, sponsored cards) - they are keyed to the old palette and need their own pass - modals, age gate, AI dropdown, ad creative chrome ========================================================================== */ /* ========================================================================== A. CANVAS + INK Every layer is `fixed` on purpose: the old .play-page-body shorthand put `fixed` on the last layer only, which left its two glows anchored to the top of the DOCUMENT - that is why the page went flat black below the fold. ========================================================================== */ /* `[data-bs-theme]` again: play-page.css ships `[data-bs-theme="light"] .play-page-body { background: ... }` (0,2,0), which beats a plain `html.xg-tokens-apply body` (0,1,1) - so without the attribute the light theme keeps the old cold blue-grey canvas and only the dark theme gets the token backdrop. */ html.xg-tokens-apply[data-bs-theme] body { background: radial-gradient(1100px 560px at 50% -8%, rgb(var(--xg-tint-a) / var(--xg-ambience-a)), transparent 68%) fixed, radial-gradient(820px 480px at 102% 2%, rgb(var(--xg-tint-b) / var(--xg-ambience-b)), transparent 70%) fixed, radial-gradient(760px 460px at -6% 26%, rgb(var(--xg-tint-a) / var(--xg-ambience-c)), transparent 72%) fixed, linear-gradient(180deg, var(--xg-canvas-top) 0%, rgb(var(--xg-canvas-rgb)) 42%, rgb(var(--xg-canvas-2-rgb)) 100%) fixed; color: var(--xg-ink-1); } /* styles.css pins paragraph ink to a dark-theme value on the element selector (`p, .card-text, ... { color: rgba(250,248,255,.88) }`) with no light-theme override, so any paragraph relying on inheritance is invisible on white panels in light mode. Components must state their own ink; this is that statement. */ html.xg-tokens-apply p, html.xg-tokens-apply .card-text, html.xg-tokens-apply .accordion-body, html.xg-tokens-apply .faq-answer, html.xg-tokens-apply small { color: var(--xg-ink-2); } html.xg-tokens-apply .text-white-50, html.xg-tokens-apply .text-muted { color: var(--xg-ink-3); } /* Description copy. This used to need an !important, because all 58 play pages carried `

` inline and only !important beats an inline style. tools-sweep-desc-para.ps1 moved that to the existing .play-desc-p utility (which styles.css already flips for light mode), so this file is back to ZERO !important. */ html.xg-tokens-apply .play-desc-p, html.xg-tokens-apply .play-info-card p { color: var(--xg-ink-2); } html.xg-tokens-apply h1, html.xg-tokens-apply h2, html.xg-tokens-apply h3, html.xg-tokens-apply h4, html.xg-tokens-apply h5, html.xg-tokens-apply h6, html.xg-tokens-apply .card-title { color: var(--xg-ink-1); font-family: var(--xg-font-display); } /* ========================================================================== B. CHROME ========================================================================== */ html.xg-tokens-apply .navbar, html.xg-tokens-apply .play-page-body .navbar { background: var(--xg-glass); -webkit-backdrop-filter: blur(var(--xg-glass-blur)) saturate(1.2); backdrop-filter: blur(var(--xg-glass-blur)) saturate(1.2); border-bottom-color: var(--xg-line); box-shadow: var(--xg-shadow-1); } html.xg-tokens-apply .side-nav, html.xg-tokens-apply .side-nav-backdrop { background: var(--xg-glass); -webkit-backdrop-filter: blur(var(--xg-glass-blur)); backdrop-filter: blur(var(--xg-glass-blur)); border-color: var(--xg-line); } html.xg-tokens-apply .side-nav-item { color: var(--xg-ink-2); border-radius: var(--xg-radius-md); transition: color var(--xg-dur-fast) var(--xg-ease), background var(--xg-dur-fast) var(--xg-ease); } html.xg-tokens-apply .side-nav-item:hover { color: var(--xg-ink-1); background: var(--xg-surface-3); } html.xg-tokens-apply .side-nav-item.active { color: var(--xg-ink-1); background: rgb(var(--xg-tint-a) / 0.16); } html.xg-tokens-apply footer { background: var(--xg-surface-1); border-top-color: var(--xg-line); } /* ========================================================================== C. PLAY-PAGE SURFACES The old look put a red hairline on every card (rgba(255,35,50,.35)) and a red glow on every icon, so nothing stood out. Surfaces now use one hairline and the ink ramp; the cover tint carries the identity instead of red. The `html.xg-tokens-apply[data-bs-theme="light"]` form is used where play-page.css has a (0,3,0) light-theme rule that would otherwise win. ========================================================================== */ html.xg-tokens-apply .play-info-card, html.xg-tokens-apply .play-tags, html.xg-tokens-apply .play-similar-card, html.xg-tokens-apply .play-more-panel, html.xg-tokens-apply[data-bs-theme="light"] .play-page-body .play-info-card, html.xg-tokens-apply[data-bs-theme="light"] .play-page-body .play-tags, html.xg-tokens-apply[data-bs-theme="light"] .play-page-body .play-similar-card { background: radial-gradient(circle at 90% 0%, rgb(var(--xg-tint-b) / 0.10), transparent 38%), radial-gradient(circle at 0% 100%, rgb(var(--xg-tint-a) / 0.10), transparent 38%), var(--xg-surface-1); border-color: var(--xg-line); -webkit-backdrop-filter: none; backdrop-filter: none; /* opaque surfaces: translucency on top of translucency is what made the old page look muddy, and it costs a compositing layer per card */ } html.xg-tokens-apply .play-info-card, html.xg-tokens-apply[data-bs-theme="light"] .play-info-card { box-shadow: var(--xg-shadow-1); } html.xg-tokens-apply .hero-title-bar, html.xg-tokens-apply[data-bs-theme="light"] .hero-title-bar { background: var(--xg-glass); -webkit-backdrop-filter: blur(var(--xg-glass-blur)); backdrop-filter: blur(var(--xg-glass-blur)); border-color: var(--xg-line); color: var(--xg-ink-1); } html.xg-tokens-apply .play-h2 { color: var(--xg-ink-1); } /* the card headings stop being red: red is identity, and a red heading on every card is the reason the old page had no hierarchy */ html.xg-tokens-apply .play-info-card h2, html.xg-tokens-apply[data-bs-theme="light"] .play-info-card h2 { color: var(--xg-ink-1); } html.xg-tokens-apply .play-info-row .bi, html.xg-tokens-apply .play-info-social-btn, html.xg-tokens-apply[data-bs-theme="light"] .play-info-row .bi { color: rgb(var(--xg-tint-a)); } html.xg-tokens-apply .play-info-social-btn { background: var(--xg-surface-2); border-color: var(--xg-line); } html.xg-tokens-apply .play-info-social-btn:hover { background: var(--xg-surface-3); color: var(--xg-ink-1); } html.xg-tokens-apply .play-info-social, html.xg-tokens-apply[data-bs-theme="light"] .play-info-social { border-top-color: var(--xg-line); } html.xg-tokens-apply .play-info-label, html.xg-tokens-apply[data-bs-theme="light"] .play-info-label { color: var(--xg-ink-3); } html.xg-tokens-apply .play-info-value, html.xg-tokens-apply[data-bs-theme="light"] .play-info-value { color: var(--xg-ink-1); } html.xg-tokens-apply .play-tag, html.xg-tokens-apply[data-bs-theme="light"] .play-tag { background: var(--xg-surface-2); border-color: var(--xg-line); color: var(--xg-ink-2); border-radius: var(--xg-radius-pill); } html.xg-tokens-apply .play-tag:hover, html.xg-tokens-apply[data-bs-theme="light"] .play-tag:hover { background: var(--xg-surface-3); border-color: rgb(var(--xg-tint-a) / 0.5); color: var(--xg-ink-1); } html.xg-tokens-apply .play-similar-card-title, html.xg-tokens-apply .itch-hero-actions > * { color: var(--xg-ink-2); font-family: var(--xg-font-body); font-weight: 600; } html.xg-tokens-apply .itch-hero-actions > *:hover { color: var(--xg-ink-1); background: var(--xg-surface-2); } /* player shell keeps its media palette in both themes */ html.xg-tokens-apply .play-hero, html.xg-tokens-apply .play-hero.itch-hero, html.xg-tokens-apply[data-bs-theme="light"] .play-hero.itch-hero { background: var(--xg-media-bg); border-color: transparent; box-shadow: 0 0 0 var(--xg-hairline) var(--xg-line), var(--xg-shadow-2); } html.xg-tokens-apply .tap-label-text, html.xg-tokens-apply .loading-your-game-text { text-shadow: 0 0 16px rgb(var(--xg-tint-a) / 0.55); } html.xg-tokens-apply .tap-label-circle { filter: drop-shadow(0 0 14px rgb(var(--xg-tint-a) / 0.55)); } /* ========================================================================== D. ACTIONS + FOCUS One action colour for primary buttons and focus. Bootstrap's .btn-danger is the site's brand button, so it maps to --xg-brand (identity), while the real play CTA keeps the action cyan. ========================================================================== */ html.xg-tokens-apply .btn-danger, html.xg-tokens-apply .play-btn-primary { background: linear-gradient(135deg, rgb(var(--xg-brand-rgb)) 0%, rgb(var(--xg-brand-rgb) / 0.82) 100%); border-color: rgb(var(--xg-brand-rgb) / 0.9); color: #fff; box-shadow: none; } html.xg-tokens-apply .btn-danger:hover, html.xg-tokens-apply .play-btn-primary:hover { background: rgb(var(--xg-brand-rgb) / 0.88); border-color: rgb(var(--xg-brand-rgb)); color: #fff; box-shadow: var(--xg-shadow-2); } html.xg-tokens-apply .play-hero-play-btn, html.xg-tokens-apply[data-bs-theme="light"] .play-hero-play-btn { background: linear-gradient(135deg, var(--xg-action) 0%, var(--xg-action-to) 55%, var(--xg-action-to) 100%); border-color: var(--xg-action-to); color: var(--xg-action-ink); } html.xg-tokens-apply .play-hero-play-btn .bi, html.xg-tokens-apply[data-bs-theme="light"] .play-hero-play-btn .bi { color: var(--xg-action-ink); } /* the home card play buttons: index-page.css no longer declares these with !important, so the (0,4,1) scope below wins and the play affordance becomes the action colour like everywhere else. Layout/size still comes from the site's own rules. */ html.xg-tokens-apply[data-bs-theme] .home-page .game-card .card-btn-play, html.xg-tokens-apply[data-bs-theme] .home-page .game-card .card-btn-play-overlay { background: linear-gradient(135deg, var(--xg-action) 0%, var(--xg-action-to) 100%); border-color: var(--xg-action-to); color: var(--xg-action-ink); box-shadow: 0 10px 24px rgb(var(--xg-action-rgb) / 0.24); } html.xg-tokens-apply[data-bs-theme] .home-page .game-card .card-btn-play:hover, html.xg-tokens-apply[data-bs-theme] .home-page .game-card .card-btn-play-overlay:hover { background: var(--xg-action-hover); border-color: var(--xg-action-to); color: var(--xg-action-ink); box-shadow: 0 14px 32px rgb(var(--xg-action-rgb) / 0.32); } /* button boundary vs page, for the record: dark 10.1:1, light 3.6:1 on --xg-action-to (non-text, needs 3:1) with the label at 9.4:1 / 4.8:1 - see _theme-lab.html section 4. */ html.xg-tokens-apply .btn-secondary, html.xg-tokens-apply .play-btn-secondary { background: var(--xg-surface-2); border-color: var(--xg-line); color: var(--xg-ink-1); } /* action as TEXT uses --xg-action-text: the cyan fill colour is only 2.37:1 on a light canvas, so it cannot be used for links there */ html.xg-tokens-apply a { color: var(--xg-action-text); } /* one focus treatment everywhere, driven by the action token */ html.xg-tokens-apply :focus-visible { outline: var(--xg-ring) solid var(--xg-focus); outline-offset: var(--xg-ring-offset); } /* ========================================================================== E. RED LEAVES THE BORDERS Any remaining red hairline/glow on a neutral surface becomes a normal line. Kept as a short, explicit list so it is easy to audit and extend. ========================================================================== */ html.xg-tokens-apply .play-info-social, html.xg-tokens-apply .play-tags, html.xg-tokens-apply .play-info-card, html.xg-tokens-apply .play-similar-card { border-color: var(--xg-line); } html.xg-tokens-apply .sticky-pill { background: var(--xg-glass); border: var(--xg-hairline) solid var(--xg-line); } html.xg-tokens-apply .sticky-dot { background: var(--xg-brand); } /* ========================================================================== F. LIBRARY CARDS (index.html, most-played.html, favorites.html) The old recipe was a translucent gradient card, on top of the page gradient, with a red hairline on every tile and a red glow on hover - the same "red is everywhere" problem as the play panels, plus a compositing layer per card. Cards are now one opaque step above the canvas with one hairline, and the accent only shows up on hover. ========================================================================== */ /* NOTE the `[data-bs-theme]` in the scope of this section. index-page.css ships `[data-bs-theme="light"] .home-page .game-card` (0,3,0), which outranks a plain `html.xg-tokens-apply .game-card` (0,2,1) - so without the attribute the light theme silently keeps its own card surface. Adding it keeps this file above every site rule without reaching for !important. */ html.xg-tokens-apply[data-bs-theme] .game-card, html.xg-tokens-apply[data-bs-theme] .home-page .game-card { background: var(--xg-surface-1); border-color: var(--xg-line); box-shadow: var(--xg-shadow-1); -webkit-backdrop-filter: none; backdrop-filter: none; } html.xg-tokens-apply[data-bs-theme] .game-card:hover, html.xg-tokens-apply[data-bs-theme] .home-page .game-card:hover { background: var(--xg-surface-2); border-color: rgb(var(--xg-tint-a) / 0.5); box-shadow: var(--xg-shadow-2); -webkit-backdrop-filter: none; backdrop-filter: none; } html.xg-tokens-apply .game-card .card-title { color: var(--xg-ink-1); } /* .card-title-overlay / .card-text-overlay deliberately absent: they sit ON cover art, so they are white in both themes (and this rule outranks the component layer's .xg-tile .card-text-overlay, which is what made the hover copy near-invisible in dark theme). */ html.xg-tokens-apply .game-card .card-text, html.xg-tokens-apply .game-card small { color: var(--xg-ink-3); } /* stat pills: metadata ink, accent icon (light theme already flipped these, so the token version has to be written at both weights) */ html.xg-tokens-apply .card-fav-count, html.xg-tokens-apply .card-views-count, html.xg-tokens-apply[data-bs-theme="light"] .card-fav-count, html.xg-tokens-apply[data-bs-theme="light"] .card-views-count { color: var(--xg-ink-3); } html.xg-tokens-apply .card-views-count .bi { color: rgb(var(--xg-tint-a)); } html.xg-tokens-apply .card-fav-count .bi, html.xg-tokens-apply .card-fav-btn.active { color: var(--xg-brand); } /* NEW / UPDATE bubble: brand gradient, no second red */ html.xg-tokens-apply .game-card-new-bubble { background: linear-gradient(135deg, rgb(var(--xg-brand-rgb)), rgb(var(--xg-brand-rgb) / 0.8)); border-color: rgb(var(--xg-brand-rgb) / 0.35); } /* the hover play affordance is an action, so it borrows the action glow */ html.xg-tokens-apply .card-btn-play-overlay { box-shadow: 0 4px 18px rgb(var(--xg-action-rgb) / 0.35); } html.xg-tokens-apply .card-btn-play-overlay:hover { box-shadow: 0 6px 22px rgb(var(--xg-action-rgb) / 0.5); } /* genre/featured cards: one surface + one hairline; the five hard-coded gradient variants collapse into the page accent */ html.xg-tokens-apply .gf-card-inner { background: var(--xg-surface-1); border-color: var(--xg-line); } html.xg-tokens-apply .gf-card-inner:hover { border-color: rgb(var(--xg-tint-a) / 0.5); box-shadow: var(--xg-shadow-2); } html.xg-tokens-apply .gf-card-grad-1, html.xg-tokens-apply .gf-card-grad-2, html.xg-tokens-apply .gf-card-grad-3, html.xg-tokens-apply .gf-card-grad-4, html.xg-tokens-apply .gf-card-grad-5 { background: linear-gradient(135deg, rgb(var(--xg-tint-a) / 0.22), rgb(var(--xg-tint-b) / 0.18)), var(--xg-surface-2); } html.xg-tokens-apply .gf-card-name { color: var(--xg-ink-1); } html.xg-tokens-apply .gf-card-desc { color: var(--xg-ink-3); } /* DELIBERATELY NOT TOUCHED: - .sponsored-card's gold glow and .game-card-ad-badge: gold is the site's "paid placement" signal, which reads as intentional (unlike the red hairline that used to sit on every card). - the home card play buttons (.home-page .game-card .card-btn-play/-overlay): they are declared with !important (red gradient) in index-page.css. Fighting that here would mean adding !important to this file, so the correct fix is to strip those !important declarations in index-page.css and let those buttons use --xg-action/-ink like every other play affordance. Until then home cards keep a red button while play pages use the action cyan. - category tiles (.cat-*) and the modal/AI/ad chrome: their own slice. ========================================================================== */ /* ========================================================================== G. PLAY PAGES - REDESIGN PROTOTYPE ROLLOUT The prototype's chrome, written against the LIVE markup so no page needs new HTML (that is the whole point of the apply layer): 1. ONE bar instead of the four-way heading fork. .play-h2 (section headers) and the h2 inside .play-info-card share one type ramp, one glass recipe and one radius; the in-card heading bleeds to the card's edges so it reads as the panel's own header band. 2. Every bar JOINS the panel below it (bar keeps its top corners, panel its bottom), with the seam colour coming from the panel so there is no colour step - the trap that made the old Tags header look detached. 3. The related-games row becomes a panel (it used to sit bare on the canvas while every card inside it had its own glass). 4. Related cards become surface tiles: token scrim title + action-coloured play button instead of red glass with a white circle. 5. Title-bar stats use the ink ramp and the cover tint, not red/cyan. Bootstrap's .mb-3/.mb-4 utilities are !important, so the rules that have to move a margin say so explicitly - those are the only !important declarations in this file. ========================================================================== */ /* ---- 1. the bar ---- */ html.xg-tokens-apply .play-h2, html.xg-tokens-apply[data-bs-theme] .play-info-card h2 { display: block; font-family: var(--xg-font-display); font-size: var(--xg-text-bar); font-weight: 700; line-height: 1.35; letter-spacing: 0.02em; color: var(--xg-ink-1); background: var(--xg-glass); -webkit-backdrop-filter: blur(var(--xg-glass-blur)); backdrop-filter: blur(var(--xg-glass-blur)); border: var(--xg-hairline) solid var(--xg-line); border-radius: var(--xg-radius-lg); padding: 0.6rem var(--xg-space-4); } /* the heading inside a card = a band across the top of that card (2rem is the card's own padding, so the negative margin is what makes it edge to edge) */ html.xg-tokens-apply[data-bs-theme] .play-info-card { border-radius: var(--xg-radius-lg); } html.xg-tokens-apply[data-bs-theme] .play-info-card h2 { margin: -2rem -2rem 1.5rem; border-radius: calc(var(--xg-radius-lg) - var(--xg-hairline)) calc(var(--xg-radius-lg) - var(--xg-hairline)) 0 0; border-bottom: var(--xg-hairline) solid var(--xg-line); } /* ---- 2. bar + panel read as one panel ---- */ html.xg-tokens-apply .play-h2:has(+ .play-tags), html.xg-tokens-apply .play-h2:has(+ .itch-related) { border-radius: var(--xg-radius-lg) var(--xg-radius-lg) 0 0; border-bottom: 0; margin-bottom: 0 !important; /* beats Bootstrap .mb-3/.mb-4 on the same element */ } html.xg-tokens-apply .play-h2:has(+ .play-tags) + .play-tags, html.xg-tokens-apply .play-h2:has(+ .itch-related) + .itch-related { border-radius: 0 0 var(--xg-radius-lg) var(--xg-radius-lg); border-top: 0; } html.xg-tokens-apply .play-tags { padding: var(--xg-space-4); } /* ---- 3. the related grid is a panel ---- */ html.xg-tokens-apply .itch-related, html.xg-tokens-apply .play-more-panel { background: var(--xg-surface-1); border: var(--xg-hairline) solid var(--xg-line); border-top: 0; border-radius: 0 0 var(--xg-radius-lg) var(--xg-radius-lg); padding: var(--xg-space-4); box-shadow: var(--xg-shadow-1); -webkit-backdrop-filter: none; backdrop-filter: none; } /* rows the grid itself contains must not re-add the old glass or the negative gutter maths that the panel padding already accounts for */ html.xg-tokens-apply .play-more-panel > .row { margin-bottom: 0; } /* ---- 4. related cards = tiles (media on top, title BELOW the art) ---- */ html.xg-tokens-apply .play-similar-card { position: relative; display: flex; flex-direction: column; background: var(--xg-surface-2); border: var(--xg-hairline) solid var(--xg-line); border-radius: var(--xg-radius-md); overflow: hidden; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html.xg-tokens-apply .play-similar-card:hover { background: var(--xg-surface-3); border-color: rgb(var(--xg-tint-a) / 0.5); box-shadow: var(--xg-shadow-2); transform: translateY(-2px); } /* the media box owns the ratio, so poster and video swap inside it without either one changing the tile's height. 1.26 = the itch poster ratio, which is what these covers are, so cover crops nothing. */ html.xg-tokens-apply .play-similar-thumb { position: relative; display: block; aspect-ratio: 1.26; background: var(--xg-inset); overflow: hidden; } html.xg-tokens-apply .play-similar-thumb > img, html.xg-tokens-apply .play-similar-thumb > video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; /* beats play-page.css's own aspect-ratio + cover on .play-similar-card img/video */ object-fit: cover; } html.xg-tokens-apply .play-similar-thumb > video { opacity: 0; transition: opacity 0.25s var(--xg-ease); } html.xg-tokens-apply .play-similar-card.is-playing .play-similar-thumb > video { opacity: 1; } html.xg-tokens-apply .play-similar-card-title { position: static; padding: var(--xg-space-2) var(--xg-space-3); background: none; color: var(--xg-ink-1); font-family: var(--xg-font-body); font-size: var(--xg-text-tile); font-weight: 600; line-height: 1.35; } html.xg-tokens-apply .play-similar-card-play { background: rgb(6 4 10 / 0.45); } html.xg-tokens-apply .play-similar-card-play-circle { background: var(--xg-action); color: var(--xg-action-ink); } html.xg-tokens-apply .play-similar-card-play-circle .bi { color: var(--xg-action-ink); } html.xg-tokens-apply .play-similar-card-play-circle .bi-play-fill { margin-left: 2px; } /* ---- 4b. FAQ (native details, emitted by tools-apply-play-faq.ps1) ---- */ html.xg-tokens-apply .play-h2:has(+ .play-faq) { border-radius: var(--xg-radius-lg) var(--xg-radius-lg) 0 0; border-bottom: 0; margin-bottom: 0 !important; /* same Bootstrap .mb-4 fight as the other joins */ } html.xg-tokens-apply .play-faq { background: var(--xg-surface-1); border: var(--xg-hairline) solid var(--xg-line); border-top: 0; border-radius: 0 0 var(--xg-radius-lg) var(--xg-radius-lg); padding: var(--xg-space-2) var(--xg-space-4) var(--xg-space-3); margin-bottom: var(--xg-space-7); box-shadow: var(--xg-shadow-1); } html.xg-tokens-apply .play-faq-item { border-top: var(--xg-hairline) solid var(--xg-line); } html.xg-tokens-apply .play-faq-item:first-child { border-top: 0; } html.xg-tokens-apply .play-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--xg-space-3); padding: var(--xg-space-3) 0; color: var(--xg-ink-1); font-size: var(--xg-text-body); font-weight: 600; cursor: pointer; list-style: none; } html.xg-tokens-apply .play-faq-item summary::-webkit-details-marker { display: none; } html.xg-tokens-apply .play-faq-item summary:hover { color: rgb(var(--xg-tint-a)); } html.xg-tokens-apply .play-faq-item summary::after { content: '+'; flex-shrink: 0; color: rgb(var(--xg-tint-a)); font-size: 1.15rem; font-weight: 700; line-height: 1; } html.xg-tokens-apply .play-faq-item[open] summary::after { content: '-'; } html.xg-tokens-apply .play-faq-item p { margin: 0 0 var(--xg-space-3); color: var(--xg-ink-2); font-size: var(--xg-text-sm); line-height: var(--xg-leading-prose); } /* ---- 5. title bar stats + icon actions ---- */ html.xg-tokens-apply .hero-title-bar .play-stat, html.xg-tokens-apply[data-bs-theme] .hero-title-bar .play-stat { color: var(--xg-ink-3); font-family: var(--xg-font-body); } html.xg-tokens-apply .hero-title-bar .play-stat .bi-eye-fill { color: rgb(var(--xg-tint-a)); } html.xg-tokens-apply .hero-title-bar .play-stat .bi-heart-fill { color: var(--xg-brand); } /* ---- 6b. sticky CTA bar (enabled for play pages in play-page.css) ---- The bar itself is controlled by each page's inline IntersectionObserver controller: display:block + .visible only while the player is out of view, gone again as soon as the hero or the footer is on screen. Only the colours live here. */ html.xg-tokens-apply .sticky-cta-bar::before { background: linear-gradient(90deg, transparent, rgb(var(--xg-tint-a) / 0.55), transparent); } html.xg-tokens-apply .sticky-cta-btn { background: var(--xg-action); border-color: var(--xg-action); color: var(--xg-action-ink); } html.xg-tokens-apply .sticky-cta-btn:hover, html.xg-tokens-apply .sticky-cta-btn:focus-visible { background: var(--xg-action-to); border-color: var(--xg-action-to); color: var(--xg-action-ink); } /* The pill's label is Bootstrap's .text-white (an !important utility), so on the light theme's glass pill it would be white on white. This is the third and last !important in this file, and it exists only because the markup cannot be changed from here. */ html.xg-tokens-apply[data-bs-theme] .sticky-pill .text-white { color: var(--xg-ink-1) !important; } /* ---- 6. prose + spec rows ---- */html.xg-tokens-apply .play-info-card p, html.xg-tokens-apply .play-desc-p { color: var(--xg-ink-2); line-height: var(--xg-leading-prose); } /* the support row + its Patreon button were the last RED bits painted by more-games.js's injected