/* * SlotsLaunch archive — the /home-renew/ card, applied to the plugin's markup. * --------------------------------------------------------------------------- * WHY A SEPARATE FILE. renew.css is scoped to body.grc-home-renew and loads on * that one route; /free-games/ is an ordinary page. This restyles the PLUGIN'S * own classes so the archive reads as part of the site rather than a bolted-on * widget, and it is enqueued only where the shortcode actually renders. * * NOTHING IN THE PLUGIN IS EDITED. Every rule here targets markup the plugin * emits (.slotsl-game / .slotsl-thumb / .slotsl-meta / .slotsl-demo-*), so a * plugin update cannot be undone by us and cannot silently revert this. * * !important IS NOT DECORATION HERE. slotslaunch-public.css sets * border-radius, img width, title font-size, title line-height and the * provider's POSITION with !important of its own. Those exact declarations are * the ones answered in kind; everything else is plain. * * TOKENS. --grc-* come from child.css's :root and are global. --hr-gap and * --hr-radius are declared on body.grc-home-renew, so they do NOT exist on * this page — the two values are restated locally rather than referenced. */ .slotsl-container { --sl-gap: 12px; /* = --hr-gap */ --sl-radius: 2px; /* = --hr-radius */ } /* ---------- the grid ------------------------------------------------------- * The plugin's own columns come from a class its JS adds after measuring the * container (sl_check_grid adds sl-grid-4 only when the box is wider than * 950px). That is a measurement race: a container that is not laid out yet * measures 0, no class is added, and the grid stays at its 1-column default * with a 0px track. Declaring the columns in CSS removes the dependency * altogether, so the grid is correct on first paint and the JS class becomes * a no-op it can keep adding harmlessly. * * Column counts and breakpoints are /home-renew/'s .hr-5 exactly — 5 / 3 / 2 — * with ONE deliberate change: .hr-5 collapses to a single column below 720px * because there it is a five-card row inside a horizontal rail. An archive of * 52 games is not a rail, and one card per screen would be a 52-screen * scroll, so it holds at 2 across. * ------------------------------------------------------------------------- */ .slotsl-container .slotsl-grid, .slotsl-container .slotsl-grid.sl-grid-2, .slotsl-container .slotsl-grid.sl-grid-3, .slotsl-container .slotsl-grid.sl-grid-4, .slotsl-container .slotsl-grid.sl-grid-6 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sl-gap); } @media (max-width: 1180px) { .slotsl-container .slotsl-grid, .slotsl-container .slotsl-grid.sl-grid-2, .slotsl-container .slotsl-grid.sl-grid-3, .slotsl-container .slotsl-grid.sl-grid-4, .slotsl-container .slotsl-grid.sl-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 820px) { .slotsl-container .slotsl-grid, .slotsl-container .slotsl-grid.sl-grid-2, .slotsl-container .slotsl-grid.sl-grid-3, .slotsl-container .slotsl-grid.sl-grid-4, .slotsl-container .slotsl-grid.sl-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- the card ------------------------------------------------------ * .hr-slot: ink ground, 2px corner, no shadow, image and body stacked. * The plugin ships white / 5px / a soft drop shadow, which is the one thing * that made the archive look like a different site. * ------------------------------------------------------------------------- */ .slotsl-container .slotsl-game { display: flex; flex-direction: column; background: var(--grc-ink, #181715); border-radius: var(--sl-radius); box-shadow: none; overflow: hidden; /* The plugin animates each tile in with fadeInUp on a 0.1s delay. Kept, but it must not leave a card invisible if the animation never runs. */ animation-fill-mode: both; } /* Corner radius belongs to the card, not to the image inside it. */ .slotsl-container .slotsl-thumb { position: relative; border-start-start-radius: 0 !important; border-start-end-radius: 0 !important; overflow: hidden; background: var(--grc-ink-2, #1e1d1b); } .slotsl-container .slotsl-thumb > .slotsl-url { display: block; } /* * 250 x 177 is the artboard's slot artwork box. The plugin forces 3/2, which * is close but not the same, and letterboxes tall thumbnails; cover crops * instead so every card in a row shares one silhouette. */ .slotsl-container .slotsl-thumb img { display: block; inline-size: 100% !important; block-size: auto; aspect-ratio: 250 / 177; object-fit: cover; } /* ---------- the Free Demo pill ------------------------------------------- * The plugin's play affordance is a translucent RED sheet that covers the * whole thumbnail on hover with a large grey button centred in it — invisible * until hover, and invisible on touch, where there is no hover at all. * * The design's is a small white pill sitting over the bottom-right of the * artwork, always visible. Same element, repositioned: the container stops * being a full-bleed overlay and becomes the pill's anchor. * ------------------------------------------------------------------------- */ .slotsl-container .slotsl-demo-container { position: absolute; inset-block: auto 12px; inset-inline: auto 12px; block-size: auto; inline-size: auto; opacity: 1; background: none; transition: none !important; pointer-events: auto; } .slotsl-container .slotsl-demo-container:hover { opacity: 1; } .slotsl-container .slotsl-demo-wrapper { position: static; transform: none; inline-size: auto; display: block; text-align: start; } .slotsl-container .slotsl-thumb-url { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--grc-surface, #fff); border-radius: 20px; font-family: var(--grc-font-ui); font-weight: 600; font-size: 12px; line-height: 18px; color: var(--grc-ink, #181715); transition: none !important; } /* * The play triangle. parts/hr-slots.php draws it as a 7x8 inline SVG; a * border triangle reproduces the same shape at the same size without asking * the plugin's template for an extra element. */ .slotsl-container .slotsl-thumb-url::after { content: ''; inline-size: 0; block-size: 0; border-block: 4px solid transparent; border-inline-start: 7px solid currentColor; border-inline-end: 0; } .slotsl-container .slotsl-thumb-url:hover { background: var(--grc-surface, #fff); color: var(--grc-ink, #181715); } /* ---------- the body ----------------------------------------------------- */ .slotsl-container .slotsl-meta { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; /* The plugin positions the provider absolutely against this box. */ position: static; } /* * line-height: 0 !important and margin-bottom: 20px !important are the * plugin's, and they are what pushed the provider out of flow in the first * place. Both are answered so the two lines can simply stack. */ .slotsl-container .slotsl-meta p.slotsl-title { margin: 0 !important; padding: 0 !important; line-height: 22px !important; text-align: start; } .slotsl-container .slotsl-meta .slotsl-title a, .slotsl-container .slotsl-meta .slotsl-title span { font-family: var(--grc-font-title) !important; font-weight: 600 !important; font-size: 16px !important; line-height: 22px !important; color: #fff !important; text-decoration: none !important; cursor: pointer; } .slotsl-container .slotsl-meta .slotsl-title a:hover, .slotsl-container .slotsl-meta .slotsl-title span:hover { color: #cfe3f5 !important; } /* Back into the flow, at .hr-slot-prov's weight and colour. */ .slotsl-container .slotsl-meta a.slotsl-provider, .slotsl-container .slotsl-meta span.slotsl-provider { position: static !important; inset: auto !important; font-family: var(--grc-font-body) !important; font-weight: 700 !important; font-size: 10px !important; line-height: 12px !important; color: var(--grc-text-faint, #888) !important; text-decoration: none !important; } .slotsl-container .slotsl-meta a.slotsl-provider:hover { color: #fff !important; } /* ---------- filter row -------------------------------------------------- * Not restyled into something new — brought to the same weight as the site's * own controls: square corners, the hairline the cards use, Outfit for UI * text, and the accent on focus so keyboard focus is visible (the plugin * leaves the selects with the browser default). * ------------------------------------------------------------------------- */ .slotsl-container .slotsl-filters .sl-filter-container { margin-block-end: 16px !important; } .slotsl-container .slotsl-providers select, .slotsl-container .slotsl-search input[type='text'], .slotsl-container .slotsl-search input[type='search'] { border: 1px solid var(--hr-ring-light, #e4e1dd); border-radius: var(--sl-radius); background: var(--grc-surface, #fff); font-family: var(--grc-font-ui); font-size: 14px; line-height: 20px; color: var(--grc-text, #444); } .slotsl-container .slotsl-providers select:focus-visible, .slotsl-container .slotsl-search input:focus-visible { outline: 2px solid var(--hp-cyan, #34b2e9); outline-offset: 1px; } /* Load more / pagination button, in the site's button shape. */ .slotsl-container .slotsl-load-more-btn { border: 1px solid var(--grc-ink, #181715); border-radius: 20px; background: var(--grc-ink, #181715); padding: 8px 20px; font-family: var(--grc-font-ui); font-weight: 600; font-size: 14px; line-height: 20px; color: #fff; cursor: pointer; } .slotsl-container .slotsl-load-more-btn:hover { background: var(--grc-ink-2, #1e1d1b); } .slotsl-container .slotsl-progress-bar-fill { background: var(--hp-cyan, #34b2e9); } /* ---------- the game popup ---------------------------------------------- * The iframe's 4px border colour is an INLINE style built from the plugin's * own Colour setting, so it cannot be set from here — it is set in the * plugin's settings screen. What is set here is everything around it: the * scrim, the corner, and the box the frame sits in. * ------------------------------------------------------------------------- */ #sl-single-game-popup { background: rgba(24, 23, 21, 0.82); backdrop-filter: blur(2px); align-items: center; justify-content: center; padding: 24px; } #sl-single-game-popup iframe { border-radius: var(--sl-radius, 2px) !important; max-inline-size: 1332px; max-block-size: 100%; background: var(--grc-ink, #181715); } @media (prefers-reduced-motion: reduce) { .slotsl-container .slotsl-game { animation: none !important; } } /* ---------- the filter row's typeface --------------------------------- * FORM CONTROLS DO NOT INHERIT font-family. That is the whole bug: the * plugin declares no font on the selects, inputs or buttons (its only * font-family rules are on a broken-game submit button and a star-rating * label), so every control fell back to the browser's own UI font while the * cards beside them were in Outfit. Setting it on a container does nothing — * it has to be set on the controls themselves. * *