/* ══════════════════════════════════════════════════════════════════════════ /slot-machine-html-code — "Source & Reel" AIS Technolabs · AISHTMLNEWDESIGN-376 ISOLATED PAGE STYLESHEET. Every rule is scoped under #page-slot-machine-html-code so nothing here can reach the shared header/footer injected by site-layout.js (those are owned by /assets/css/layout.css). Visual direction: "source code" — deep ink base, monospace code chips, jackpot amber as the single action colour. No running motion anywhere. ══════════════════════════════════════════════════════════════════════════ */ #page-slot-machine-html-code { /* ── Ink / dark surfaces ── */ --smh-ink: #080d14; --smh-ink-2: #0f1824; --smh-ink-3: #16212f; --smh-line-d: rgba(255,255,255,.11); --smh-on-ink: #eef3f8; --smh-on-ink-2: #b9c6d4; /* ── Paper / light surfaces ── */ --smh-paper: #ffffff; --smh-paper-2: #f3f6fa; --smh-paper-3: #e7eef5; --smh-line-l: #d7e0ea; /* ── Text on light (WCAG AA on every surface used below) ── */ --smh-text: #0f172a; --smh-text-2: #374151; /* ── Action ── */ --smh-amber: #ffb020; --smh-amber-d: #b56f00; --smh-code: #5ee08a; --smh-r: 14px; --smh-r-s: 10px; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; color: var(--smh-text); background: var(--smh-paper); -webkit-font-smoothing: antialiased; } /* ─── UA BODY MARGIN RESET — do not delete ───────────────────────────────── The browser default is `body { margin: 8px }`. On the legacy pages that was cancelled by /assets/css/site.css, but the isolated model has no owner for it: layout.css is namespaced under #site-header / #site-footer, and page CSS is namespaced under #page-, so NEITHER can reach . Without this every full-bleed band, plus the header and footer, is inset 8px and the page background shows as a thin strip down both edges. Unscoped on purpose — this sheet is per-page, never shared. */ html, body { margin: 0; padding: 0; } /* ── Self-contained baseline ──────────────────────────────────────────────── Declared by the page, in the page's own scope, so link + list behaviour never depends on whichever ambient stylesheet happens to be loaded. (See docs/conversion/validate-conversion.py — check_baseline.) */ #page-slot-machine-html-code a { text-decoration: none; color: inherit; } #page-slot-machine-html-code a:hover { text-decoration: none; } #page-slot-machine-html-code ul, #page-slot-machine-html-code ol { list-style: none; margin: 0; padding: 0; } #page-slot-machine-html-code p { margin: 0 0 18px; } #page-slot-machine-html-code p:last-child { margin-bottom: 0; } #page-slot-machine-html-code img { max-width: 100%; height: auto; display: block; } #page-slot-machine-html-code *, #page-slot-machine-html-code *::before, #page-slot-machine-html-code *::after { box-sizing: border-box; } /* ── Focus visibility (never removed for styling) ── */ #page-slot-machine-html-code :focus-visible { outline: 3px solid var(--smh-amber); outline-offset: 3px; border-radius: 4px; } /* ── Layout primitives ── */ #page-slot-machine-html-code .smh-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 24px; } #page-slot-machine-html-code .smh-sec { padding-block: clamp(56px, 7vw, 100px); } #page-slot-machine-html-code .smh-sec--paper { background: var(--smh-paper); } #page-slot-machine-html-code .smh-sec--tint { background: var(--smh-paper-2); } #page-slot-machine-html-code .smh-sec--ink { background: var(--smh-ink); color: var(--smh-on-ink); } #page-slot-machine-html-code .smh-sec--ink p { color: var(--smh-on-ink-2); } /* ── Typography ── */ #page-slot-machine-html-code h1, #page-slot-machine-html-code h2, #page-slot-machine-html-code h3, #page-slot-machine-html-code h4 { margin: 0 0 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: inherit; } #page-slot-machine-html-code h1 { font-size: clamp(38px, 5vw, 62px); line-height: 1.06; } #page-slot-machine-html-code h2 { font-size: clamp(30px, 3.6vw, 46px); } #page-slot-machine-html-code h3 { font-size: clamp(22px, 2.2vw, 30px); } #page-slot-machine-html-code h4 { font-size: clamp(19px, 1.6vw, 24px); } #page-slot-machine-html-code .smh-eyebrow { display: inline-block; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--smh-code); margin-bottom: 18px; } #page-slot-machine-html-code .smh-eyebrow--dark { color: var(--smh-amber-d); } #page-slot-machine-html-code .smh-lede { font-size: clamp(17px, 1.4vw, 19px); color: var(--smh-text-2); max-width: 78ch; } #page-slot-machine-html-code .smh-sec--ink .smh-lede { color: var(--smh-on-ink-2); } #page-slot-machine-html-code .smh-head { max-width: 900px; margin-bottom: 44px; } #page-slot-machine-html-code .smh-head--center { margin-inline: auto; text-align: center; } /* All section H2s are centre-aligned. The heading block is centred as well, so an H2 reads centred on the page rather than centred inside a left-hung 900px column. Lede copy inside a heading block stays left-aligned — centring a 4-5 line paragraph hurts readability — but is centred as a block under the heading. */ #page-slot-machine-html-code h2 { text-align: center; } #page-slot-machine-html-code .smh-head { margin-inline: auto; text-align: center; } #page-slot-machine-html-code .smh-head .smh-lede { text-align: left; margin-inline: auto; } /* Two-column split sections carry their H2 outside a .smh-head block. Centre the eyebrow label with it so the heading cluster reads as one deliberate centred unit rather than a centred H2 stranded over a left-aligned kicker. Body copy, lists and CTAs in these columns stay left-aligned. */ #page-slot-machine-html-code .smh-split .smh-eyebrow { display: block; text-align: center; } /* ══ Buttons ═══════════════════════════════════════════════════════════════ */ #page-slot-machine-html-code .smh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 30px; border: 2px solid transparent; border-radius: 999px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; text-align: center; transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease; } #page-slot-machine-html-code .smh-btn svg { width: 18px; height: 18px; flex: none; } #page-slot-machine-html-code .smh-btn--amber { background: var(--smh-amber); color: #14202e; box-shadow: 0 8px 24px rgba(255,176,32,.30); } #page-slot-machine-html-code .smh-btn--amber:hover { background: #ffc247; transform: translateY(-2px); } #page-slot-machine-html-code .smh-btn--amber:active { transform: translateY(0); } #page-slot-machine-html-code .smh-btn--ink { background: var(--smh-ink); color: #fff; } #page-slot-machine-html-code .smh-btn--ink:hover { background: var(--smh-ink-3); transform: translateY(-2px); } #page-slot-machine-html-code .smh-btn--ink:active { transform: translateY(0); } #page-slot-machine-html-code .smh-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } /* Inline text link inside body copy (used where a section may not carry a 2nd button) */ #page-slot-machine-html-code .smh-link { color: var(--smh-amber-d); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } #page-slot-machine-html-code .smh-link:hover { color: #8a5400; text-decoration: underline; } #page-slot-machine-html-code .smh-sec--ink .smh-link { color: var(--smh-amber); } #page-slot-machine-html-code .smh-sec--ink .smh-link:hover { color: #ffc247; } #page-slot-machine-html-code .smh-cta-row { margin-top: 40px; } #page-slot-machine-html-code .smh-cta-row--center { text-align: center; } /* ══ Breadcrumb ════════════════════════════════════════════════════════════ */ #page-slot-machine-html-code .smh-crumb { background: var(--smh-ink); color: var(--smh-on-ink-2); border-bottom: 1px solid var(--smh-line-d); font-size: 16px; } #page-slot-machine-html-code .smh-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-block: 16px; } #page-slot-machine-html-code .smh-crumb a { display: inline-flex; align-items: center; gap: 7px; color: var(--smh-on-ink-2); } #page-slot-machine-html-code .smh-crumb a:hover { color: var(--smh-amber); } #page-slot-machine-html-code .smh-crumb svg { width: 16px; height: 16px; } #page-slot-machine-html-code .smh-crumb [aria-current] { color: #fff; font-weight: 600; } /* ══ HERO — full-bleed, image-free, centred readable column ════════════════ */ #page-slot-machine-html-code .smh-hero { width: 100%; padding: clamp(64px, 8vw, 120px) 24px clamp(56px, 7vw, 96px); background: radial-gradient(900px 460px at 50% -10%, rgba(255,176,32,.16), transparent 62%), linear-gradient(180deg, #0b1220 0%, var(--smh-ink) 68%); color: var(--smh-on-ink); border-bottom: 1px solid var(--smh-line-d); } #page-slot-machine-html-code .smh-hero__inner { max-width: 900px; margin-inline: auto; text-align: center; } #page-slot-machine-html-code .smh-hero h1 { color: #fff; } #page-slot-machine-html-code .smh-hero h1 em { font-style: normal; color: var(--smh-amber); } #page-slot-machine-html-code .smh-hero__lede { font-size: clamp(17px, 1.5vw, 20px); color: #d5dfea; margin: 0 auto 34px; max-width: 74ch; } #page-slot-machine-html-code .smh-hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; margin-top: 36px; font-size: 16px; color: #cfdae6; } #page-slot-machine-html-code .smh-hero__trust li { display: flex; align-items: center; gap: 9px; } #page-slot-machine-html-code .smh-hero__trust svg { width: 18px; height: 18px; flex: none; color: var(--smh-code); } /* ══ Intro — three "spec" cards ════════════════════════════════════════════ */ #page-slot-machine-html-code .smh-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } #page-slot-machine-html-code .smh-intro article { background: var(--smh-paper); border: 1px solid var(--smh-line-l); border-top: 3px solid var(--smh-amber); border-radius: var(--smh-r); padding: 30px 26px; } #page-slot-machine-html-code .smh-intro h3 { font-size: 20px; margin-bottom: 12px; } #page-slot-machine-html-code .smh-intro p { color: var(--smh-text-2); } /* ══ Split (copy + product image) ══════════════════════════════════════════ */ #page-slot-machine-html-code .smh-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 68px); align-items: center; } #page-slot-machine-html-code .smh-split__media img { width: 100%; border-radius: var(--smh-r); border: 1px solid var(--smh-line-l); } #page-slot-machine-html-code .smh-sec--ink .smh-split__media img { border-color: var(--smh-line-d); } @media (max-width: 860px) { #page-slot-machine-html-code .smh-split { grid-template-columns: 1fr; } #page-slot-machine-html-code .smh-split__media { order: -1; } } /* ══ Screenshot carousel — user-driven only, never autoplaying ═════════════ */ #page-slot-machine-html-code .smh-carousel { position: relative; } #page-slot-machine-html-code .smh-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 14px; -webkit-overflow-scrolling: touch; } #page-slot-machine-html-code .smh-shot { flex: 0 0 clamp(240px, 78vw, 300px); } @media (min-width: 900px) { #page-slot-machine-html-code .smh-shot { flex-basis: calc((100% - 40px) / 3); } } #page-slot-machine-html-code .smh-track::-webkit-scrollbar { height: 8px; } #page-slot-machine-html-code .smh-track::-webkit-scrollbar-track { background: var(--smh-ink-3); border-radius: 99px; } #page-slot-machine-html-code .smh-track::-webkit-scrollbar-thumb { background: #3d4d60; border-radius: 99px; } #page-slot-machine-html-code .smh-shot { scroll-snap-align: start; background: var(--smh-ink-2); border: 1px solid var(--smh-line-d); border-radius: var(--smh-r); overflow: hidden; } #page-slot-machine-html-code .smh-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } #page-slot-machine-html-code .smh-shot figcaption { padding: 14px 16px; font-size: 16px; color: var(--smh-on-ink-2); } #page-slot-machine-html-code .smh-carousel__nav { display: flex; gap: 12px; justify-content: flex-end; margin-top: 22px; } #page-slot-machine-html-code .smh-carousel__nav button { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--smh-line-d); background: var(--smh-ink-2); color: #fff; cursor: pointer; transition: background-color .16s ease, border-color .16s ease; } #page-slot-machine-html-code .smh-carousel__nav button:hover { background: var(--smh-amber); color: #14202e; border-color: var(--smh-amber); } #page-slot-machine-html-code .smh-carousel__nav svg { width: 20px; height: 20px; } /* ══ Slot type gallery ═════════════════════════════════════════════════════ */ /* 9 slot types. The source art is only 214x120, so at the old full-width 3-column layout (368px cards) every image was upscaled ~1.7x and rendered soft. Capping the gallery at 840px gives 264px cards — close to native width, so the art stays crisp — while 240px min still yields exactly 3 columns, keeping the deliberate 3x3 instead of 4+4+1 with a stranded last card. */ #page-slot-machine-html-code .smh-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; max-width: 840px; margin-inline: auto; } #page-slot-machine-html-code .smh-type { border: 1px solid var(--smh-line-l); border-radius: var(--smh-r); overflow: hidden; background: var(--smh-paper); transition: transform .16s ease, box-shadow .16s ease; } #page-slot-machine-html-code .smh-type:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(15,23,42,.13); } #page-slot-machine-html-code .smh-type img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } #page-slot-machine-html-code .smh-type h3 { font-size: 19px; margin: 0; padding: 18px 20px; } /* ══ Numbered feature list (player features / admin panel) ═════════════════ */ #page-slot-machine-html-code .smh-numbered { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; counter-reset: smh-n; } #page-slot-machine-html-code .smh-numbered li { counter-increment: smh-n; position: relative; padding: 26px 26px 26px 74px; border-radius: var(--smh-r); background: var(--smh-paper); border: 1px solid var(--smh-line-l); } #page-slot-machine-html-code .smh-sec--ink .smh-numbered li { background: var(--smh-ink-2); border-color: var(--smh-line-d); } #page-slot-machine-html-code .smh-numbered li::before { content: counter(smh-n, decimal-leading-zero); position: absolute; left: 24px; top: 26px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; color: var(--smh-amber-d); } #page-slot-machine-html-code .smh-sec--ink .smh-numbered li::before { color: var(--smh-amber); } #page-slot-machine-html-code .smh-numbered h3 { font-size: 19px; margin-bottom: 8px; } #page-slot-machine-html-code .smh-numbered p { font-size: 16px; color: var(--smh-text-2); margin: 0; } #page-slot-machine-html-code .smh-sec--ink .smh-numbered p { color: var(--smh-on-ink-2); } /* ══ Compact definition grid (main features — 16 items) ════════════════════ */ #page-slot-machine-html-code .smh-defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2px; background: var(--smh-line-l); border: 1px solid var(--smh-line-l); border-radius: var(--smh-r); overflow: hidden; } #page-slot-machine-html-code .smh-defs > div { background: var(--smh-paper); padding: 24px 26px; } #page-slot-machine-html-code .smh-defs dt { font-weight: 700; font-size: 18px; color: var(--smh-text); margin-bottom: 7px; } #page-slot-machine-html-code .smh-defs dd { margin: 0; font-size: 16px; color: var(--smh-text-2); } /* ══ Link grids (boost / discover / packages) ══════════════════════════════ */ #page-slot-machine-html-code .smh-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } #page-slot-machine-html-code .smh-links a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border: 1px solid var(--smh-line-l); border-radius: var(--smh-r-s); background: var(--smh-paper); font-weight: 600; font-size: 16px; color: var(--smh-text); transition: border-color .16s ease, background-color .16s ease, transform .16s ease; } #page-slot-machine-html-code .smh-links a svg { width: 17px; height: 17px; flex: none; color: var(--smh-amber-d); } #page-slot-machine-html-code .smh-links a:hover { border-color: var(--smh-amber); background: #fffaf0; transform: translateX(3px); } #page-slot-machine-html-code .smh-sec--ink .smh-links a { background: var(--smh-ink-2); border-color: var(--smh-line-d); color: var(--smh-on-ink); } #page-slot-machine-html-code .smh-sec--ink .smh-links a svg { color: var(--smh-amber); } #page-slot-machine-html-code .smh-sec--ink .smh-links a:hover { background: var(--smh-ink-3); border-color: var(--smh-amber); } /* ══ Check list (benefits) ═════════════════════════════════════════════════ */ #page-slot-machine-html-code .smh-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px 30px; } #page-slot-machine-html-code .smh-checks li { display: flex; align-items: flex-start; gap: 13px; font-size: 17px; color: var(--smh-text-2); } #page-slot-machine-html-code .smh-sec--ink .smh-checks li { color: var(--smh-on-ink-2); } #page-slot-machine-html-code .smh-checks svg { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--smh-amber-d); } #page-slot-machine-html-code .smh-sec--ink .smh-checks svg { color: var(--smh-code); } /* ══ Tech stack spec table ═════════════════════════════════════════════════ */ #page-slot-machine-html-code .smh-stack { border: 1px solid var(--smh-line-d); border-radius: var(--smh-r); overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } #page-slot-machine-html-code .smh-stack div { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 18px 24px; border-bottom: 1px solid var(--smh-line-d); font-size: 16px; } #page-slot-machine-html-code .smh-stack div:last-child { border-bottom: 0; } #page-slot-machine-html-code .smh-stack dt { color: var(--smh-code); font-weight: 600; } #page-slot-machine-html-code .smh-stack dd { margin: 0; color: var(--smh-on-ink); } @media (max-width: 620px) { #page-slot-machine-html-code .smh-stack div { grid-template-columns: 1fr; gap: 6px; } } /* ══ Package cards ═════════════════════════════════════════════════════════ */ #page-slot-machine-html-code .smh-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; } #page-slot-machine-html-code .smh-packs article { padding: 28px 26px; border-radius: var(--smh-r); background: var(--smh-paper); border: 1px solid var(--smh-line-l); border-left: 4px solid var(--smh-amber); } #page-slot-machine-html-code .smh-packs h3 { font-size: 19px; margin-bottom: 8px; } #page-slot-machine-html-code .smh-packs p { font-size: 16px; color: var(--smh-text-2); margin: 0; } /* ══ FAQ — native disclosure, no JS required ═══════════════════════════════ */ #page-slot-machine-html-code .smh-faq { max-width: 920px; margin-inline: auto; } #page-slot-machine-html-code .smh-faq details { border: 1px solid var(--smh-line-l); border-radius: var(--smh-r-s); background: var(--smh-paper); margin-bottom: 12px; } #page-slot-machine-html-code .smh-faq details[open] { border-color: var(--smh-amber); } #page-slot-machine-html-code .smh-faq summary { list-style: none; cursor: pointer; padding: 22px 60px 22px 24px; position: relative; min-height: 44px; } #page-slot-machine-html-code .smh-faq summary::-webkit-details-marker { display: none; } #page-slot-machine-html-code .smh-faq summary h3 { display: inline; font-size: 18px; font-weight: 700; margin: 0; } #page-slot-machine-html-code .smh-faq summary::after { content: ""; position: absolute; right: 26px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2.5px solid var(--smh-amber-d); border-bottom: 2.5px solid var(--smh-amber-d); transform: rotate(45deg); transition: transform .18s ease; } #page-slot-machine-html-code .smh-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; } #page-slot-machine-html-code .smh-faq details > p { padding: 0 24px 24px; color: var(--smh-text-2); margin: 0; } /* FAQ question numbers and the "Ans." label are generated in CSS on purpose. Both are presentational labels, and generating them keeps the FAQ's DOM text byte-identical to the FAQPage schema's question/answer strings — Google requires schema Q&A to match the visible copy, and baking "1." / "Ans." into the markup would desync every one of the ten pairs. */ #page-slot-machine-html-code .smh-faq { counter-reset: smh-faq; } #page-slot-machine-html-code .smh-faq details { counter-increment: smh-faq; } #page-slot-machine-html-code .smh-faq summary h3::before { content: counter(smh-faq) ". "; color: var(--smh-amber-d); font-weight: 800; } #page-slot-machine-html-code .smh-faq details > p::before { content: "Ans. "; font-weight: 800; color: var(--smh-text); } /* ══ Testimonials ══════════════════════════════════════════════════════════ */ #page-slot-machine-html-code .smh-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; } #page-slot-machine-html-code .smh-quotes figure { margin: 0; border: 1px solid var(--smh-line-l); border-radius: var(--smh-r); background: var(--smh-paper); overflow: hidden; } #page-slot-machine-html-code .smh-quotes img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } #page-slot-machine-html-code .smh-quotes blockquote { margin: 0; padding: 24px; font-size: 17px; color: var(--smh-text-2); } #page-slot-machine-html-code .smh-quotes figcaption { padding: 0 24px 22px; } /* ══ Area we serve ═════════════════════════════════════════════════════════ */ #page-slot-machine-html-code .smh-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; } #page-slot-machine-html-code .smh-offices article { padding: 26px; border-radius: var(--smh-r); background: var(--smh-ink-2); border: 1px solid var(--smh-line-d); } #page-slot-machine-html-code .smh-offices h3 { font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--smh-amber); margin-bottom: 14px; } #page-slot-machine-html-code .smh-offices a { display: block; font-weight: 700; color: #fff; margin-bottom: 10px; } #page-slot-machine-html-code .smh-offices a:hover { color: var(--smh-amber); } #page-slot-machine-html-code .smh-offices address { font-style: normal; font-size: 16px; color: var(--smh-on-ink-2); } /* ══ CTA band ══════════════════════════════════════════════════════════════ */ #page-slot-machine-html-code .smh-band { background: radial-gradient(700px 340px at 50% 0%, rgba(255,176,32,.15), transparent 65%), var(--smh-ink); color: var(--smh-on-ink); text-align: center; padding-block: clamp(56px, 7vw, 96px); } #page-slot-machine-html-code .smh-band h2 { color: #fff; max-width: 900px; margin-inline: auto; } #page-slot-machine-html-code .smh-band p { color: #d5dfea; max-width: 70ch; margin-inline: auto; } /* ══ Modal ═════════════════════════════════════════════════════════════════ */ #page-slot-machine-html-code .smh-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: flex-start; justify-content: center; padding: 100px 20px 20px 20px; overflow-y: auto; background: rgba(6,10,16,.78); } #page-slot-machine-html-code .smh-modal.open { display: flex; } #page-slot-machine-html-code .smh-modal__box { position: relative; width: 100%; max-width: 620px; max-height: 92vh; overflow: auto; background: #fff; border-radius: var(--smh-r); box-shadow: 0 30px 80px rgba(0,0,0,.5); } #page-slot-machine-html-code .smh-modal__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #eef2f6; color: #0f172a; cursor: pointer; z-index: 2; } #page-slot-machine-html-code .smh-modal__close:hover { background: #dde5ee; } #page-slot-machine-html-code .smh-modal iframe { display: block; width: 100%; min-height: 820px; border: 0; border-radius: var(--smh-r); } /* ══ Reduced motion ════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { #page-slot-machine-html-code *, #page-slot-machine-html-code *::before, #page-slot-machine-html-code *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ══ Small screens ═════════════════════════════════════════════════════════ */ @media (max-width: 560px) { #page-slot-machine-html-code .smh-wrap { padding-inline: 18px; } #page-slot-machine-html-code .smh-hero { padding-inline: 18px; } #page-slot-machine-html-code .smh-btn { width: 100%; } #page-slot-machine-html-code .smh-carousel__nav { justify-content: center; } } /* ══ Sticky header ═════════════════════════════════════════════════════════ Declared here, in this page's own stylesheet, rather than in the shared /assets/js/site-layout.js. That file is loaded by EVERY converted page, and on master it still ships the old non-working rule; editing it would silently change the header behaviour of every live page at once. This sheet is loaded by this page alone, so the change stays scoped to it. The rule targets the MOUNT POINT (#site-header), not the

inside it. A sticky element can only stick within its containing block:

's containing block is div#site-header, which is exactly as tall as the header itself — zero sticky range. That is precisely why the shared `header.scrolled{position:sticky}` rule never worked. #site-header's own containing block is , so it sticks for the whole page. Sticky is unconditional, not applied on a scroll class — flipping position mid-scroll makes the header jump. The shadow is the only scroll-dependent part, and it is a discrete class flip, not a continuous transform. ────────────────────────────────────────────────────────────────────────── */ #site-header { position: sticky; top: 0; z-index: 1000; background: #fff; } /* staging's site-layout.js puts .scrolled on the mount; master's older copy puts it on the inner

and styles that one itself. Covering both keeps the page identical on either side. */ #site-header.scrolled, #site-header:has(header.scrolled) { box-shadow: 0 2px 16px rgba(0, 0, 0, .10); }