/* VARIANT 6, "cards": the same fixed full-page arcade wallpaper as v5, but every text section is its own near-solid white card, with tall gaps above and below each card where the art shows through. For /stephen-g-sanders/video-games/ (Sanders.Law, Avada). STANDALONE: load this file only (not base/v1-v5). Body class "sl-wp-v6" + the inline script (see README). The article is split into cards by wrapping each run of content from one

to the next in
. That is markup only; no copy changes. Card: white at 96% opacity, no blur. Measured worst-case contrast 5.9:1 (see README, v6 section). */ :root{--v6-a:.96;--v6-gutter:140px;--v6-max:1080px;--v6-gap:20vh;--v6-ring:#ffd60a;--v6-link:#005a8f;--v6-team:#7d4500} /* ---- fixed wallpaper layer (shared by v5 and v6; identical block in both files) ---- iOS Safari ignores background-attachment:fixed, so the art is painted on a position:fixed pseudo-element behind all content. It is sized to 100lvh (large viewport), so no gap opens when the iOS toolbar collapses. Loading: the layer first shows an inlined 48x36 placeholder (604 bytes, smooth-scaled = soft blur). The real tile (img/wallpaper-v4-tile.webp, 205 KB lossless, Steve's cleared art only) is requested only after the page's load event, when a tiny inline script adds html.sl-wp-ready. The tile is stacked above the placeholder, so the swap has no blank frame. Without JS the html.sl-wp-lazy class is never set and the tile loads normally. */ html:has(body.sl-wp-v6){background:#2656ff!important} body.sl-wp-v6{background:transparent!important} body.sl-wp-v6 #boxed-wrapper,body.sl-wp-v6 #wrapper,body.sl-wp-v6 #main{background:transparent!important} body.sl-wp-v6::before{ content:"";position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none; background-color:#2656ff; background-image:url("img/wallpaper-v4-tile.webp"),url("data:image/webp;base64,UklGRlQCAABXRUJQVlA4IEgCAABQDgCdASowACQAPu1kpk2ppaOiNVVYATAdiWwAp0dtRoSBLT8f+ka7Cf5/wHrJ24nmA/TP9qve79Cf/Y33LekXzWwk+DcuqIAab/yBYvKTY+Ufk12yYn73+8mqFwKjXRkeoWV78nES/i6XW7w60VH2Jz1IiFCgfptsN0AA/uYk6RZBQE/t4aYhj9EfqLh5n4aBQYUaqRoI25k8/2r2MN09l99uwan1/nVYYxUx3dJJGY1hKZQ/qqe2pW5s1UarqwqtOqakbwoO24afnKj9OSOYFJ6gu7981g25ubHhz5tWktMggCD3ZQUS+NdMsJZGkR0keZ2H5eQ7bykYW8I87sKVpZcNUdss8LkuCGEyBRY4DqhCMA6FJsSl67Cq7812EBX8unwVprRLsuDiAVzWrkoGxV7iZqnYrAvRoBLtHr4wzLsRZIJcCS0MKeHcgHjTRfWNn1tiBhcSQXsmqcqHiINEuDvnlhoP+D0E2wDOhRe8FTTAndwEmcU9X+XQKvSqdZDUCwSq7BIVAL2wZyVgJUK9ozF9QyG2ckX7I1twGnI3ak9tw9NcnobSf3yIPSimTrl0OWgPW59ZCZc90jNFwE866JlSu5gwX2nm9EgHAs5N1DWDeFnjZymY22j5pmWt0x/tOkwi/oSviXTPdW+f5eeGf+ne/jW+I05/ZshR/YXlpbUIdbrOGsh2xlmQ3iTsIFwqy69W+VG4llDPxtMxQCEG2Sxry8pIfaUaxy/vK4xXRI9b+1BSJyJpSkhg/1Ru7CTwmfmT4AAAAA=="); background-repeat:repeat;background-position:center top;background-size:1440px 1080px; image-rendering:pixelated} html.sl-wp-lazy:not(.sl-wp-ready) body.sl-wp-v6::before{ background-image:url("data:image/webp;base64,UklGRlQCAABXRUJQVlA4IEgCAABQDgCdASowACQAPu1kpk2ppaOiNVVYATAdiWwAp0dtRoSBLT8f+ka7Cf5/wHrJ24nmA/TP9qve79Cf/Y33LekXzWwk+DcuqIAab/yBYvKTY+Ufk12yYn73+8mqFwKjXRkeoWV78nES/i6XW7w60VH2Jz1IiFCgfptsN0AA/uYk6RZBQE/t4aYhj9EfqLh5n4aBQYUaqRoI25k8/2r2MN09l99uwan1/nVYYxUx3dJJGY1hKZQ/qqe2pW5s1UarqwqtOqakbwoO24afnKj9OSOYFJ6gu7981g25ubHhz5tWktMggCD3ZQUS+NdMsJZGkR0keZ2H5eQ7bykYW8I87sKVpZcNUdss8LkuCGEyBRY4DqhCMA6FJsSl67Cq7812EBX8unwVprRLsuDiAVzWrkoGxV7iZqnYrAvRoBLtHr4wzLsRZIJcCS0MKeHcgHjTRfWNn1tiBhcSQXsmqcqHiINEuDvnlhoP+D0E2wDOhRe8FTTAndwEmcU9X+XQKvSqdZDUCwSq7BIVAL2wZyVgJUK9ozF9QyG2ckX7I1twGnI3ak9tw9NcnobSf3yIPSimTrl0OWgPW59ZCZc90jNFwE866JlSu5gwX2nm9EgHAs5N1DWDeFnjZymY22j5pmWt0x/tOkwi/oSviXTPdW+f5eeGf+ne/jW+I05/ZshR/YXlpbUIdbrOGsh2xlmQ3iTsIFwqy69W+VG4llDPxtMxQCEG2Sxry8pIfaUaxy/vK4xXRI9b+1BSJyJpSkhg/1Ru7CTwmfmT4AAAAA==");image-rendering:auto} body.sl-wp-v6 > *{image-rendering:auto} @media (max-width:640px){body.sl-wp-v6::before{background-size:720px 540px}} /* reduced motion: the art no longer stays still while the text slides over it; it scrolls with the page */ @media (prefers-reduced-motion:reduce){ body.sl-wp-v6{position:relative} body.sl-wp-v6::before{position:absolute;height:auto;bottom:0}} @media print{html:has(body.sl-wp-v6){background:#fff!important}body.sl-wp-v6::before{display:none}} /* ---- layout ---- */ body.sl-wp-v6 #main{padding-left:0!important;padding-right:0!important;padding-bottom:var(--v6-gap)!important} body.sl-wp-v6 #main .post-content > .fusion-fullwidth{ box-sizing:border-box!important;width:min(var(--v6-max),calc(100% - 2*var(--v6-gutter)))!important;max-width:none!important; margin:var(--v6-gap) auto 0!important;border-radius:10px} body.sl-wp-v6 #main .post-content > .fusion-builder-row-3{margin-top:calc(var(--v6-gap)/2)!important} body.sl-wp-v6 #main .post-content > .fusion-fullwidth:not(.fusion-builder-row-4){position:relative;overflow:hidden!important;box-shadow:0 0 0 4px var(--v6-ring)} body.sl-wp-v6 #main .post-content > .fusion-fullwidth > .fusion-builder-row{max-width:100%!important} /* the article/sidebar section itself is transparent; its pieces become cards */ body.sl-wp-v6 #main .post-content > .fusion-builder-row-4{background:transparent!important;padding:0!important} body.sl-wp-v6 #main .post-content > .fusion-builder-row-5{background-color:#fff!important;padding:16px 24px!important} /* ---- cards ---- */ body.sl-wp-v6 .sl-vg-card, body.sl-wp-v6 .fusion-builder-row-4 .fusion-builder-nested-column-3 > .fusion-column-wrapper, body.sl-wp-v6 .fusion-builder-row-4 .fusion-builder-nested-column-1 > .fusion-column-wrapper, body.sl-wp-v6 .fusion-builder-row-4 .fusion-builder-nested-column-2 > .fusion-column-wrapper{ box-sizing:border-box;border-radius:10px;box-shadow:0 0 0 4px var(--v6-ring)!important} body.sl-wp-v6 .sl-vg-card, body.sl-wp-v6 .fusion-builder-row-4 .fusion-builder-nested-column-3 > .fusion-column-wrapper, body.sl-wp-v6 .fusion-builder-row-4 .fusion-builder-nested-column-2 > .fusion-column-wrapper{background-color:rgba(255,255,255,var(--v6-a))!important} body.sl-wp-v6 .sl-vg-card{margin:0 -20px var(--v6-gap);padding:36px 36px 26px} body.sl-wp-v6 .sl-vg-card > :first-child{margin-top:0!important} body.sl-wp-v6 .sl-vg-card > :last-child{margin-bottom:0!important} body.sl-wp-v6 .fusion-builder-row-4 .fusion-builder-nested-column-3 > .fusion-column-wrapper{padding:20px!important} body.sl-wp-v6 .fusion-builder-row-4 .fusion-builder-nested-column-2{margin-top:var(--v6-gap)!important} body.sl-wp-v6 .fusion-builder-row-4 .fusion-builder-column-7{padding-top:0!important} /* ---- text colours: same two fixes as v5 (theme link blue 4.25:1 and team orange 4.45:1 fail even on solid white) ---- */ body.sl-wp-v6 .fusion-builder-row-4 a:not(.fusion-button), body.sl-wp-v6 .fusion-builder-row-4 .fusion-title .title-heading-center, body.sl-wp-v6 .fusion-builder-row-4 .fusion-title .title-heading-center a{color:var(--v6-link)!important} body.sl-wp-v6 .fusion-builder-row-4 .fusion-menu a, body.sl-wp-v6 .fusion-builder-row-4 .fusion-menu .menu-text{color:var(--v6-team)!important} @media (max-width:1259px){:root{--v6-gutter:48px}} @media (max-width:640px){ :root{--v6-gutter:14px;--v6-gap:12vh} body.sl-wp-v6 .sl-vg-card{margin:0 -16px var(--v6-gap);padding:24px 16px 18px} body.sl-wp-v6 #main .post-content > .fusion-fullwidth{border-radius:8px} } @media print{body.sl-wp-v6 .sl-vg-card{margin:0 0 1em;box-shadow:none!important;background:#fff!important}}