/* ============================================================ Provider page (/software/{slug}/) 1.PRV Prefix: .prv- Shell: article (centred 49rem) + centred 68rem breakouts Mockup of record: mockups/software/evolution-gaming.html Toplist cards reuse .usst-* from css/us-state.css, which is enqueued alongside this file: the card is shared, not forked. ============================================================ */ /* ============================================================ Provider page (/software/{slug}/) v2 mockup styles Prefix: .prv- Idiom follows the shipped live-blackjack provider hub: navy hero with stat chips, sticky section nav, dark-header data tables, art tiles. Depends on tokens.css only. ============================================================ */ /* ---- body: alternating full-bleed bands ---- Each band owns its vertical padding so the tint runs edge to edge; the inner .av2-col / .cv2-container keep the shared measures. Consecutive sections inside one band use margins, so the five game families read as a single tinted block rather than five stacked ones. */ .prv-body { padding: 0 0 0; } .prv-band { padding: 3rem 0; } .prv-band--alt { background: var(--bji-gray-050); } .prv-band--alt + .prv-band--alt { padding-top: 0; } .prv-sec { margin: 0 0 3rem; } .prv-sec:last-child { margin-bottom: 0; } .prv-sec h2 { font-size: 1.75rem; font-weight: 800; line-height: 1.2; margin: 0 0 0.5rem; scroll-margin-top: 4rem; } .prv-sec h3 { font-size: 1.18rem; font-weight: 700; margin: 2rem 0 0.4rem; } .prv-sec p { font-size: 1rem; line-height: 1.7; color: var(--bji-gray-800); margin: 0 0 1rem; } .prv-sec .dek { color: var(--bji-gray-600); font-size: 1.02rem; } /* ---- table thumbnails (mirrors .ldh-table .thumb on /live-dealer-blackjack/) ---- */ .prv-table .thumb { width: 56px; height: 38px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 9px; display: inline-block; } .prv-table .gcell { display: flex; align-items: center; } /* ---- cross-family summary ---- */ .prv-compare { margin: 0 0 2.5rem; } .prv-compare table { width: 100%; border-collapse: collapse; background: var(--bji-gray-000); border: 1px solid var(--bji-border); border-radius: 10px; overflow: hidden; } .prv-compare th { background: var(--bji-navy-900); color: #fff; text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.7rem 0.9rem; font-weight: 700; } .prv-compare td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--bji-border); font-size: 0.95rem; } .prv-compare tr:last-child td { border-bottom: 0; } .prv-compare .fam { font-weight: 700; } .prv-compare .fam a { color: var(--bji-text); } .prv-compare .best { font-weight: 800; color: var(--bji-green-600); white-space: nowrap; } .prv-compare .worst { font-weight: 700; color: var(--bji-red-500); } /* ---- data table ---- */ .prv-tablewrap { overflow-x: auto; margin: 1.1rem 0; border-radius: 10px; border: 1px solid var(--bji-border); background: var(--bji-gray-000); } .prv-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 44rem; } .prv-table thead th { background: var(--bji-navy-900); color: #fff; text-align: left; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.7rem 0.8rem; } .prv-table td { padding: 0.62rem 0.8rem; border-bottom: 1px solid var(--bji-border); } .prv-table tbody tr:last-child td { border-bottom: 0; } .prv-table tbody tr:nth-child(even) { background: var(--bji-gray-050); } .prv-table .g { font-weight: 700; } .prv-table .edge { color: var(--bji-green-600); font-weight: 700; } /* THREE distinct "no figure" states, deliberately not identical: .na-none = does not exist for this game (plain, no marker) .na-unpub = Evolution does not publish it (dotted rule = there is a reason) .na-nocmp = exists but cannot be set against the others (dotted rule + marker) */ .prv-table .na-none { color: var(--bji-gray-400); font-style: italic; } .prv-table .na-unpub, .prv-table .na-nocmp { color: var(--bji-gray-600); border-bottom: 1px dotted var(--bji-gray-400); } .prv-table .fnmark { font-size: 0.7em; vertical-align: super; color: var(--bji-blue-600); font-weight: 700; } .prv-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0.75rem 0 0; font-size: 0.82rem; color: var(--bji-gray-600); } .prv-legend span b { font-weight: 600; color: var(--bji-gray-800); } .prv-table .warn { color: var(--bji-red-500); font-weight: 600; } .prv-badge { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.12rem 0.4rem; border-radius: 4px; background: var(--bji-green-100); color: var(--bji-green-700); margin-left: 0.35rem; white-space: nowrap; } .prv-badge--m { background: var(--bji-blue-100); color: var(--bji-blue-800); } .prv-note { font-size: 0.84rem; color: var(--bji-gray-600); margin: 0.5rem 0 0; } .prv-more { display: inline-block; margin-top: 0.9rem; background: var(--bji-navy-900); color: #fff; text-decoration: none; font-weight: 700; font-size: 0.92rem; padding: 0.6rem 1.1rem; border-radius: 8px; } /* ---- toplist ---- */ .prv-casinos { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.75rem; } .prv-casino { display: grid; grid-template-columns: 1.9rem 4rem 1fr 11rem; align-items: center; gap: 1rem; border: 1px solid var(--bji-border); border-radius: 12px; padding: 0.95rem 1.15rem; background: var(--bji-surface); box-shadow: 0 1px 2px rgba(16,24,40,0.04); } .prv-casino--top { border-color: var(--bji-blue-300); box-shadow: 0 4px 16px rgba(6,152,255,0.12); } @media (max-width: 46rem) { .prv-casino { grid-template-columns: 1.6rem 3.2rem 1fr; row-gap: 0.7rem; } .prv-casino .act { grid-column: 1 / -1; } } .prv-rank { font-weight: 800; font-size: 1.05rem; color: var(--bji-gray-400); text-align: center; } .prv-casino--top .prv-rank { color: var(--bji-blue-500); } .prv-logochip { width: 4rem; height: 4rem; border-radius: 999px; background: #fff; border: 1px solid var(--bji-border); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--bji-navy-900); font-size: 0.8rem; } .prv-casino .nm { font-weight: 700; font-size: 1.05rem; margin: 0 0 0.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .prv-casino .rt { color: var(--bji-green-600); font-size: 0.88rem; font-weight: 700; } .prv-casino .sub { font-size: 0.9rem; line-height: 1.5; color: var(--bji-gray-700); margin: 0; } .prv-casino .meta { font-size: 0.82rem; color: var(--bji-text-faint); margin: 0.3rem 0 0; } .prv-casino .act { text-align: right; } .prv-visit { display: inline-block; background: var(--bji-green-500); color: #fff; text-decoration: none; font-weight: 700; font-size: 0.92rem; padding: 0.6rem 1.3rem; border-radius: 8px; } .prv-casino .rev { display: block; margin-top: 0.35rem; font-size: 0.82rem; } .prv-geonote { font-size: 0.87rem; color: var(--bji-gray-600); margin: 0.9rem 0 0; } /* ---- fairness points ---- */ .prv-points { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 1rem; } @media (min-width: 52rem) { .prv-points { grid-template-columns: repeat(3, 1fr); } } .prv-point { border: 1px solid var(--bji-border); border-top: 3px solid var(--bji-blue-500); border-radius: 10px; padding: 0.95rem 1.05rem; background: var(--bji-surface); } .prv-point .t { font-weight: 700; margin: 0 0 0.35rem; } .prv-point .d { font-size: 0.92rem; line-height: 1.6; color: var(--bji-gray-700); margin: 0; } /* ---- regulatory record ---- */ .prv-reg { border: 1px solid var(--bji-amber-500); background: var(--bji-amber-100); border-radius: 12px; padding: 1.2rem 1.35rem; margin: 1.4rem 0; } .prv-reg .hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem; margin-bottom: 0.3rem; } .prv-reg .hd h3 { margin: 0; font-size: 1.12rem; } .prv-reg .when { font-size: 0.82rem; color: var(--bji-amber-700); font-weight: 700; } .prv-reg dl { margin: 0; } .prv-reg dt { font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--bji-amber-700); margin-top: 1rem; } .prv-reg dd { margin: 0.15rem 0 0; font-size: 0.94rem; line-height: 1.65; color: var(--bji-gray-800); max-width: 48rem; } /* ---- studios ---- */ .prv-studios { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; } .prv-studios li { border: 1px solid var(--bji-border); border-radius: 999px; padding: 0.36rem 0.85rem; font-size: 0.88rem; color: var(--bji-gray-800); background: var(--bji-gray-000); } .prv-studios .yr { color: var(--bji-text-faint); font-size: 0.8rem; } /* ---- timeline ---- */ .prv-tl { list-style: none; margin: 1.1rem 0 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--bji-border); max-width: 48rem; } .prv-tl li { position: relative; padding: 0 0 1.1rem 1rem; } .prv-tl li::before { content: ""; position: absolute; left: -1.55rem; top: 0.3rem; width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--bji-blue-500); box-shadow: 0 0 0 3px #fff; } .prv-tl .y { font-weight: 800; font-size: 0.92rem; color: var(--bji-navy-900); } .prv-tl .e { font-size: 0.94rem; line-height: 1.65; color: var(--bji-gray-700); margin: 0.12rem 0 0; } /* ---- FAQ ---- */ .prv-faq { margin: 1rem 0 0; max-width: 50rem; } .prv-faq details { border: 1px solid var(--bji-border); border-radius: 10px; padding: 0.9rem 1.05rem; background: var(--bji-gray-000); margin-bottom: 0.5rem; } .prv-faq summary { font-weight: 700; cursor: pointer; font-size: 1rem; } .prv-faq p { margin: 0.6rem 0 0; font-size: 0.95rem; line-height: 1.65; color: var(--bji-gray-700); } /* ---- sources ---- */ .prv-sources { margin: 2.5rem 0 0; padding: 1.1rem 1.3rem; background: var(--bji-surface-sunken); border: 1px solid var(--bji-border); border-radius: 10px; } .prv-sources h2 { font-size: 1rem; margin: 0 0 0.5rem; } .prv-sources ol { margin: 0; padding-left: 1.1rem; } .prv-sources li { font-size: 0.86rem; line-height: 1.6; color: var(--bji-gray-700); margin-bottom: 0.3rem; } /* Light-variant brand logos wash out on the white chip. Until the DB carries a "logo is light" flag, these cards opt into a navy chip so the mark reads. */ .usst-logochip--dark { background: var(--bji-navy-900); border-color: var(--bji-navy-700); } /* US regulated-market callout */ .prv-usbox { border: 1px solid var(--bji-blue-200); background: var(--bji-blue-050); border-radius: 12px; padding: 1.1rem 1.25rem; margin: 1.5rem 0 0; } .prv-usbox h3 { margin: 0 0 0.5rem; font-size: 1.08rem; } .prv-usbox p { margin: 0 0 0.75rem; } .prv-usstates { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; } .prv-usstates a { display: inline-block; background: var(--bji-gray-000); border: 1px solid var(--bji-blue-200); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.88rem; font-weight: 600; text-decoration: none; } /* Mobile table treatment. Lives at the end of the file deliberately: the .prv-table min-width is declared later than the thumb rules, so an earlier media query would lose to it. */ @media (max-width: 560px) { .prv-table { min-width: 0; font-size: 0.86rem; table-layout: fixed; } .prv-table .c-sm-hide { display: none; } .prv-table td, .prv-table thead th { padding: 0.5rem 0.5rem; white-space: normal; } /* keep the art: it is how a reader recognises a game, and it is the column that survives best when the others are dropped */ .prv-table .thumb { width: 38px; height: 26px; margin-right: 7px; flex: none; } /* let the name wrap normally and push any badge onto its own line, instead of the flex row squeezing the title to one letter per line */ .prv-table .gcell { align-items: center; flex-wrap: wrap; row-gap: 0.25rem; min-width: 0; } .prv-table .gcell b { flex: 1 1 auto; min-width: 0; } .prv-table .prv-badge { margin-left: 45px; } .prv-table td:first-child, .prv-table thead th:first-child { width: 48%; } .prv-legend { flex-direction: column; gap: 0.3rem; } } /* Table footnote: a footnote, so it should read as one. Small, italic, muted, sitting quietly under the table it belongs to. */ .prv-tablenote { margin: 0.55rem 0 0; font-size: 0.78rem; line-height: 1.5; font-style: italic; color: var(--bji-text-faint); } /* Scrollspy active state for the shared .cv2-toc. The component ships without one (no page has JS for it yet); js/provider.js adds the behaviour. The look deliberately stays inside the component's own vocabulary: its hover is a gray-100 pill, so "current" is the same pill with navy semibold text. An earlier pass used a solid navy pill, which made this page's TOC read as a different component from the live-game hubs'. */ .cv2-toc a.on { background: var(--bji-gray-100); color: var(--bji-navy-900); font-weight: var(--bji-weight-semibold); } .cv2-toc a.on:hover { background: var(--bji-gray-200); } /* The shared .av2-byline is built for the light article shell; the provider hero is navy, so invert its colours rather than forking the component. */ .lg-hero .av2-byline { color: var(--bji-text-inverse-muted); margin: 0; } .lg-hero .av2-byline a { color: #9dc9ff; } .lg-hero .av2-byline .date { color: var(--bji-text-inverse-muted); } .lg-hero .av2-byline img.avatar { border-radius: 999px; } /* Provider unavailable in this market. This has to interrupt: the reader is about to scan a list that is NOT what the page promised, so the callout carries a warning mark and full amber framing rather than a quiet rule. Deliberately carries no casino counts, which change with every review. */ .prv-unavail { display: flex; align-items: center; gap: 0.9rem; border: 1px solid var(--bji-amber-500); border-left: 6px solid var(--bji-amber-500); background: var(--bji-amber-100); border-radius: 10px; padding: 1rem 1.2rem; margin: 0 0 1.35rem; } .prv-unavail .mark { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--bji-amber-500); color: #fff; font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; line-height: 1; } .prv-unavail .msg { display: block; } .prv-unavail b { display: block; font-size: 1.02rem; line-height: 1.35; color: var(--bji-amber-700); } .prv-unavail .msg span { display: block; margin-top: 0.15rem; font-size: 0.9rem; color: var(--bji-gray-700); } /* "Try the games" demo band (owner scope-add 2026-08-17). A grid of click-to- load facades: each shows a poster and a Play button, and js/casino-v2.js swaps in the iframe only on click, so nothing loads or plays on page view. Self- suppressed server-side when the registry has no embeddable demo, so these rules never paint an empty grid. */ .prv-demos { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .prv-demo { min-width: 0; } .prv-demo-frame { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid var(--bji-border); background: linear-gradient(140deg, var(--bji-navy-900), var(--bji-blue-800)); } .prv-demo-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; cursor: pointer; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; } .prv-demo-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .prv-demo-cta { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.9rem; color: #fff; padding: 0.5rem 0.9rem; border-radius: 999px; background: rgba(16, 24, 40, 0.62); box-shadow: 0 1px 8px rgba(0,0,0,0.35); } .prv-demo-cta .ico { font-size: 0.72rem; } .prv-demo-play:hover .prv-demo-cta, .prv-demo-play:focus-visible .prv-demo-cta { background: var(--bji-blue-600); } /* the demo now opens in the shared .bji-dmodal lightbox (v2-components.css); the card stays a clean facade, so the old inline-load frame / help styles are gone. */ .prv-demo-meta { margin-top: 0.5rem; display: flex; align-items: baseline; gap: 0.5rem; } .prv-demo-meta .nm { font-weight: 700; font-size: 0.92rem; color: var(--bji-text); min-width: 0; } .prv-demo-meta .vt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--bji-gray-600); background: var(--bji-gray-100); padding: 0.08rem 0.4rem; border-radius: 4px; white-space: nowrap; } @media (max-width: 46rem) { .prv-demos { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } } /* ---- Demo browser: filter pills + quick search (owner, 2026-08-18) --------- The whole catalogue is server-rendered into one .prv-demos grid. Cards past the initial slice carry .prv-demo--extra and are display:none until the grid is expanded (Show more) or a filter/search is active (.is-querying). Hiding uses display:none, not visibility: a display:none card lays out nothing and its loading=lazy thumbnail is never fetched, so 400+ cards cost nothing on load. js/casino-v2.js reveals .prv-demo-controls (they ship hidden so a no-JS reader keeps the plain initial-12 + Show more view). --------------------- */ .prv-demo-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin: 1.1rem 0 0.25rem; } .prv-demo-controls[hidden] { display: none; } .prv-demo-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; } .prv-demo-filter { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.34rem 0.8rem; font-weight: 700; font-size: 0.85rem; color: var(--bji-text); background: #fff; border: 1px solid var(--bji-border); border-radius: 999px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .prv-demo-filter:hover { border-color: var(--bji-blue-600); } .prv-demo-filter .cnt { font-weight: 600; font-size: 0.78rem; color: var(--bji-gray-600); } .prv-demo-filter.is-on { background: var(--bji-blue-600); border-color: var(--bji-blue-600); color: #fff; } .prv-demo-filter.is-on .cnt { color: rgba(255, 255, 255, 0.85); } .prv-demo-filter:focus-visible { outline: 2px solid var(--bji-blue-600); outline-offset: 2px; } .prv-demo-search { position: relative; flex: 0 1 16rem; min-width: 12rem; } .prv-demo-search-ico { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); font-size: 0.85rem; opacity: 0.55; pointer-events: none; } .prv-demo-search-input { width: 100%; padding: 0.45rem 0.7rem 0.45rem 1.9rem; font-size: 0.9rem; color: var(--bji-text); border: 1px solid var(--bji-border); border-radius: 999px; background: #fff; } .prv-demo-search-input:focus-visible { outline: none; border-color: var(--bji-blue-600); box-shadow: 0 0 0 3px var(--bji-blue-100); } .prv-demo-status { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--bji-gray-600); } .prv-demo-status[hidden] { display: none; } .prv-demo-empty { margin: 1.25rem 0; padding: 1.75rem 1.25rem; text-align: center; border: 1px dashed var(--bji-border); border-radius: 10px; background: var(--bji-gray-050); } .prv-demo-empty[hidden] { display: none; } .prv-demo-empty p { margin: 0 0 0.75rem; color: var(--bji-text); } .prv-demo-clear { display: inline-block; padding: 0.4rem 1rem; font-weight: 700; font-size: 0.88rem; color: var(--bji-blue-600); background: #fff; border: 1px solid var(--bji-border); border-radius: 999px; cursor: pointer; } .prv-demo-clear:hover { border-color: var(--bji-blue-600); } /* The initial-12 cap is purely presentational: extras stay display:none until revealed, so their loading=lazy thumbnails never fetch until then. Two reveal paths, both JS: "Show more" reveals the next batch (each of those cards gains .is-revealed, so only that batch's thumbs load -- no full-catalogue avalanche), and a filter/search adds .is-querying to lift the cap entirely so every match shows regardless of batch (JS then marks non-matches .is-hidden). With no JS neither runs, so the