/* ══════════════════════════════════════════════════════════════════════════ /slot-machine-programming — "Brass & Baize" AIS Technolabs · AISHTMLNEWDESIGN-383 (re-theme) ISOLATED PAGE STYLESHEET. Every rule is scoped under #page-slot-machine-programming, so nothing here can reach the shared header/footer injected by site-layout.js (those belong to /assets/css/layout.css, namespaced under #site-header / #site-footer). THEME ONLY. This file replaces the previous "Logic Board" direction (cool graphite + certified green + monospace). The markup it styles is byte-for-byte unchanged — same sections, same copy, same classes, same images, same CTA labels. Every selector below already exists in the page. Visual direction: "brass & baize" — the casino table, not the codebase. Warm ivory card stock on deep baize-green felt, brass as the single action colour, generous radii and warm shadows. Static weave and vignette painted in CSS gradients; no image backgrounds, no looping motion (rules 24, 26). ══════════════════════════════════════════════════════════════════════════ */ #page-slot-machine-programming { /* ── Baize / dark surfaces ── */ --smp-felt: #0b2b23; --smp-felt-2: #103a2f; --smp-felt-3: #174b3c; --smp-night: #06170f; --smp-line-d: rgba(232,181,63,.22); --smp-on-dark: #f4f1e6; --smp-on-dark-2:#c8d6cc; /* ── Ivory / light surfaces ── */ --smp-ivory: #fbf8f0; --smp-ivory-2: #f3ecdc; --smp-ivory-3: #e9dfc9; --smp-line-l: #ded2b6; /* ── Text on ivory (every value ≥ 4.5:1 on the surfaces used below) ── */ --smp-text: #1c2a24; --smp-text-2: #41504a; /* ── Brass — the single action colour ── */ --smp-brass: #e8b53f; /* fills and accents on felt */ --smp-brass-2: #f7ce70; /* hover lift */ --smp-brass-d: #85600f; /* accent TEXT on ivory: 5.3:1 */ --smp-brass-ink:#1b1204; /* text on a brass fill: 11:1 */ --smp-r: 18px; --smp-r-s: 12px; --smp-shadow: 0 18px 40px rgba(20,40,32,.13); font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; color: var(--smp-text); background: var(--smp-ivory); -webkit-font-smoothing: antialiased; } /* ─── UA BODY MARGIN RESET — do not delete ───────────────────────────────── The browser default is `body { margin: 8px }`. layout.css is namespaced under #site-header/#site-footer and this sheet under #page-…, so NEITHER can reach ; without this every full-bleed band is inset 8px and the page background shows as a strip down both edges. Unscoped on purpose — this stylesheet is per-page and never shared. */ html, body { margin: 0; padding: 0; } /* ── Self-contained baseline (validate-conversion.py — check_baseline) ── */ #page-slot-machine-programming a { text-decoration: none; color: inherit; } #page-slot-machine-programming a:hover { text-decoration: none; } #page-slot-machine-programming ul, #page-slot-machine-programming ol { list-style: none; margin: 0; padding: 0; } #page-slot-machine-programming p { margin: 0 0 18px; } #page-slot-machine-programming p:last-child { margin-bottom: 0; } #page-slot-machine-programming img { max-width: 100%; height: auto; display: block; } #page-slot-machine-programming figure { margin: 0; } #page-slot-machine-programming blockquote { margin: 0; } #page-slot-machine-programming address { font-style: normal; } #page-slot-machine-programming *, #page-slot-machine-programming *::before, #page-slot-machine-programming *::after { box-sizing: border-box; } #page-slot-machine-programming :focus-visible { outline: 3px solid var(--smp-brass-d); outline-offset: 3px; border-radius: 4px; } #page-slot-machine-programming .smp-sec--ink :focus-visible, #page-slot-machine-programming .smp-hero :focus-visible, #page-slot-machine-programming .smp-band :focus-visible, #page-slot-machine-programming .smp-crumb :focus-visible { outline-color: var(--smp-brass); } /* ══ Layout primitives ═════════════════════════════════════════════════════ */ #page-slot-machine-programming .smp-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 24px; } #page-slot-machine-programming .smp-sec { padding-block: clamp(60px, 7.5vw, 108px); } #page-slot-machine-programming .smp-sec--paper { background: var(--smp-ivory); } #page-slot-machine-programming .smp-sec--tint { background: var(--smp-ivory-2); border-block: 1px solid var(--smp-line-l); } /* Felt bands: baize green with a static diagonal weave. Gradients only — never a background image (rule 24 governs the hero; the same discipline keeps every band image-free and instant to paint). */ #page-slot-machine-programming .smp-sec--ink { background: repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px), var(--smp-felt); color: var(--smp-on-dark); } #page-slot-machine-programming .smp-sec--ink p { color: var(--smp-on-dark-2); } /* Section heading block */ #page-slot-machine-programming .smp-head { margin-bottom: clamp(30px, 4vw, 52px); max-width: 60ch; } #page-slot-machine-programming .smp-head--center { margin-inline: auto; text-align: center; } #page-slot-machine-programming .smp-head p { margin-top: 16px; font-size: 17px; color: var(--smp-text-2); } #page-slot-machine-programming .smp-sec--ink .smp-head p { color: var(--smp-on-dark-2); } #page-slot-machine-programming h2 { text-wrap: balance; font-size: clamp(31px, 3.7vw, 48px); line-height: 1.12; letter-spacing: -.022em; font-weight: 800; margin: 0; text-align: inherit; color: inherit; } #page-slot-machine-programming h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.28; letter-spacing: -.008em; font-weight: 700; margin: 0; text-align: inherit; color: inherit; } #page-slot-machine-programming h4 { font-size: clamp(25px, 2.7vw, 36px); line-height: 1.18; letter-spacing: -.02em; font-weight: 800; margin: 0; text-align: inherit; color: inherit; } /* Eyebrow — tracked brass small-caps with a rule, replacing the old mono "//" */ #page-slot-machine-programming .smp-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--smp-brass-d); margin-bottom: 16px; } #page-slot-machine-programming .smp-eyebrow::before { content: ""; width: 30px; height: 2px; background: currentColor; flex: 0 0 auto; } #page-slot-machine-programming .smp-sec--ink .smp-eyebrow, #page-slot-machine-programming .smp-hero .smp-eyebrow, #page-slot-machine-programming .smp-band .smp-eyebrow { color: var(--smp-brass); } /* ══ Buttons — brass plate, dark legend ════════════════════════════════════ */ #page-slot-machine-programming .smp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 15px 34px; border: 0; border-radius: var(--smp-r-s); background: linear-gradient(180deg, var(--smp-brass-2) 0%, var(--smp-brass) 58%, #d09f27 100%); color: var(--smp-brass-ink); font: 700 17px/1.2 "Inter", system-ui, sans-serif; letter-spacing: .01em; cursor: pointer; box-shadow: 0 8px 20px rgba(133,96,15,.28), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } #page-slot-machine-programming .smp-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 26px rgba(133,96,15,.34), inset 0 1px 0 rgba(255,255,255,.6); } #page-slot-machine-programming .smp-btn:active { transform: translateY(0); } /* On felt the plate keeps its brass; the modifier deepens the surround. */ #page-slot-machine-programming .smp-btn--on-ink { box-shadow: 0 10px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.55); } #page-slot-machine-programming .smp-cta-row { margin-top: clamp(30px, 4vw, 46px); } #page-slot-machine-programming .smp-cta-row--center { text-align: center; } /* Inline text link — never a second button (rule 25) */ #page-slot-machine-programming .smp-link { color: var(--smp-brass-d); font-weight: 700; border-bottom: 2px solid rgba(133,96,15,.34); } #page-slot-machine-programming .smp-link:hover { border-bottom-color: var(--smp-brass-d); } #page-slot-machine-programming .smp-sec--ink .smp-link, #page-slot-machine-programming .smp-band .smp-link { color: var(--smp-brass); border-bottom-color: rgba(232,181,63,.45); } #page-slot-machine-programming .smp-sec--ink .smp-link:hover, #page-slot-machine-programming .smp-band .smp-link:hover { border-bottom-color: var(--smp-brass); } /* ══ Breadcrumb ════════════════════════════════════════════════════════════ */ #page-slot-machine-programming .smp-crumb { background: var(--smp-night); border-bottom: 1px solid var(--smp-line-d); padding-block: 15px; } #page-slot-machine-programming .smp-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 1200px; margin-inline: auto; padding-inline: 24px; font-size: 16px; color: var(--smp-on-dark-2); } #page-slot-machine-programming .smp-crumb a { color: var(--smp-on-dark-2); display: inline-flex; align-items: center; gap: 7px; } #page-slot-machine-programming .smp-crumb a:hover { color: var(--smp-brass); } #page-slot-machine-programming .smp-crumb li[aria-current] { color: var(--smp-on-dark); font-weight: 600; } #page-slot-machine-programming .smp-crumb li + li::before { content: "/"; margin-right: 10px; color: var(--smp-brass); opacity: .7; } /* ══ Hero — full-bleed, image-free, centred column (rule 24) ════════════════ */ #page-slot-machine-programming .smp-hero { width: 100%; padding: clamp(70px, 8.5vw, 132px) 24px clamp(58px, 6vw, 100px); background: radial-gradient(120% 90% at 50% 0%, rgba(232,181,63,.14) 0%, transparent 58%), repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 2px, transparent 2px 8px), linear-gradient(178deg, #0d3227 0%, #0a271f 55%, #061a13 100%); color: var(--smp-on-dark); text-align: center; border-bottom: 3px solid var(--smp-brass); } #page-slot-machine-programming .smp-hero__inner { max-width: 900px; margin-inline: auto; } #page-slot-machine-programming .smp-hero h1 { font-size: clamp(39px, 5.3vw, 68px); line-height: 1.05; letter-spacing: -.032em; font-weight: 800; margin: 0 0 24px; color: #fffdf7; text-align: center; /* Keeps the em dash from starting a line. Progressive enhancement — older engines simply wrap as before. */ text-wrap: balance; } #page-slot-machine-programming .smp-hero h1 em { font-style: normal; color: var(--smp-brass); } #page-slot-machine-programming .smp-hero p { font-size: clamp(17px, 1.5vw, 19px); color: #dfe8e1; max-width: 68ch; margin-inline: auto; } #page-slot-machine-programming .smp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 32px; margin-top: 32px; font-size: 16px; color: #eef3ee; } #page-slot-machine-programming .smp-trust li { display: inline-flex; align-items: center; gap: 9px; } #page-slot-machine-programming .smp-trust svg { flex: 0 0 auto; color: var(--smp-brass); } /* Spec plaque — brass-ruled facts under the hero */ #page-slot-machine-programming .smp-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin-top: clamp(36px, 4vw, 56px); border: 1px solid var(--smp-line-d); border-radius: var(--smp-r); overflow: hidden; background: rgba(6,23,15,.55); } #page-slot-machine-programming .smp-spec div { padding: 24px 22px; text-align: left; border-right: 1px solid var(--smp-line-d); } #page-slot-machine-programming .smp-spec div:last-child { border-right: 0; } #page-slot-machine-programming .smp-spec dt { font-size: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--smp-brass); margin-bottom: 10px; } #page-slot-machine-programming .smp-spec dd { margin: 0; font-size: 17px; font-weight: 600; color: #fffdf7; } /* ══ Prose ═════════════════════════════════════════════════════════════════ */ #page-slot-machine-programming .smp-prose { max-width: 78ch; font-size: 17px; color: var(--smp-text-2); } #page-slot-machine-programming .smp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(24px, 3vw, 46px); } /* ══ Intro — three cards ═══════════════════════════════════════════════════ Geometry cloned from the reference the client supplied, measured off the live sibling section (/slot-machine-html-code `.smh-intro article`) with design-clone's extract_design.py rather than eyeballed: grid repeat(auto-fit, minmax(280px, 1fr)) · gap 22px card background #FFFFFF · border 1px · border-top 3px · radius 14px padding 30px 26px · box-shadow none Two colour substitutions, deliberate: the reference's cool #D7E0EA hairline and #FFB020 amber belong to that page's palette. Here they map onto this page's own line and brass tokens so the section does not read as pasted in from another site. Every dimension above is literal. */ #page-slot-machine-programming .smp-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } #page-slot-machine-programming .smp-intro article { /* The page root runs 1.65; the reference card computes 25.6px (16 x 1.6). Declared here so the card matches rather than inheriting past it. */ line-height: 1.6; background: #ffffff; border: 1px solid var(--smp-line-l); border-top: 3px solid var(--smp-brass); border-radius: 14px; padding: 30px 26px; } #page-slot-machine-programming .smp-intro p { font-size: 16px; line-height: 1.6; color: var(--smp-text-2); margin: 0; } /* ══ Pitch (Innovate in Slots) ═════════════════════════════════════════════ */ #page-slot-machine-programming .smp-pitch { display: grid; gap: 20px; justify-items: start; border-left: 5px solid var(--smp-brass); padding-left: clamp(22px, 3vw, 40px); } #page-slot-machine-programming .smp-pitch p { font-size: clamp(19px, 2.2vw, 27px); font-weight: 600; color: var(--smp-text); max-width: 40ch; } /* The pitch is a grid: its own 20px gap already separates the copy from the button. The generic .smp-cta-row top margin stacked on top of that gap and left the CTA floating ~90px below the line it answers. Inside this block the gap is the only spacing. */ #page-slot-machine-programming .smp-pitch .smp-cta-row { margin-top: 0; } /* ══ Carousel — advances only on click (rule 26) ═══════════════════════════ */ #page-slot-machine-programming .smp-carousel { position: relative; } #page-slot-machine-programming .smp-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(268px, 1fr); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: thin; } #page-slot-machine-programming .smp-shot { scroll-snap-align: start; background: var(--smp-ivory); border: 1px solid var(--smp-line-d); border-radius: var(--smp-r); overflow: hidden; box-shadow: 0 12px 26px rgba(0,0,0,.28); } #page-slot-machine-programming .smp-shot img { width: 100%; aspect-ratio: 400 / 260; object-fit: cover; } #page-slot-machine-programming .smp-shot figcaption { padding: 15px 17px; font-size: 16px; font-weight: 600; color: var(--smp-text); border-top: 3px solid var(--smp-brass); background: var(--smp-ivory); } #page-slot-machine-programming .smp-carousel__nav { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; } #page-slot-machine-programming .smp-step { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--smp-brass); border-radius: 50%; background: transparent; color: var(--smp-brass); cursor: pointer; transition: background .18s ease, color .18s ease; } #page-slot-machine-programming .smp-step:hover { background: var(--smp-brass); color: var(--smp-brass-ink); } /* ══ Slot-type tiles ═══════════════════════════════════════════════════════ */ #page-slot-machine-programming .smp-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; } #page-slot-machine-programming .smp-type { background: var(--smp-ivory); border: 1px solid var(--smp-line-l); border-radius: var(--smp-r); overflow: hidden; box-shadow: var(--smp-shadow); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } #page-slot-machine-programming .smp-type:hover { border-color: var(--smp-brass); box-shadow: 0 20px 42px rgba(20,40,32,.19); transform: translateY(-4px); } #page-slot-machine-programming .smp-type img { width: 100%; aspect-ratio: 214 / 120; object-fit: cover; background: var(--smp-ivory-3); } #page-slot-machine-programming .smp-type h3 { font-size: 18px; padding: 17px 20px; border-top: 1px solid var(--smp-line-l); } /* ══ Numbered feature cards ════════════════════════════════════════════════ */ #page-slot-machine-programming .smp-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; counter-reset: smp-f; } #page-slot-machine-programming .smp-feat { counter-increment: smp-f; position: relative; background: var(--smp-ivory); border: 1px solid var(--smp-line-l); border-radius: var(--smp-r); padding: 30px 26px 26px; box-shadow: var(--smp-shadow); transition: border-color .18s ease, transform .18s ease; } #page-slot-machine-programming .smp-feat:hover { border-color: var(--smp-brass); transform: translateY(-3px); } /* The index is a brass chip, not a monospace tick — the theme's signature */ #page-slot-machine-programming .smp-feat::before { content: counter(smp-f, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; background: linear-gradient(180deg, var(--smp-brass-2), var(--smp-brass)); color: var(--smp-brass-ink); font-size: 16px; font-weight: 800; letter-spacing: .02em; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); } #page-slot-machine-programming .smp-feat h3 { font-size: 19px; margin-bottom: 10px; } #page-slot-machine-programming .smp-feat p { font-size: 16px; color: var(--smp-text-2); } #page-slot-machine-programming .smp-sec--ink .smp-feat { background: rgba(6,23,15,.5); border-color: var(--smp-line-d); box-shadow: none; } #page-slot-machine-programming .smp-sec--ink .smp-feat:hover { border-color: var(--smp-brass); } #page-slot-machine-programming .smp-sec--ink .smp-feat h3 { color: var(--smp-on-dark); } #page-slot-machine-programming .smp-sec--ink .smp-feat p { color: var(--smp-on-dark-2); } /* ══ Spec list (Our Online Slot Machine Programming Features) ══════════════ */ #page-slot-machine-programming .smp-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 clamp(30px, 4vw, 60px); } #page-slot-machine-programming .smp-specs > li { padding: 24px 0; border-bottom: 1px solid var(--smp-line-l); } #page-slot-machine-programming .smp-specs h3 { font-size: 18px; margin-bottom: 9px; display: flex; align-items: baseline; gap: 12px; } #page-slot-machine-programming .smp-specs h3::before { content: "◆"; color: var(--smp-brass-d); font-size: 13px; } #page-slot-machine-programming .smp-specs p { font-size: 16px; color: var(--smp-text-2); } /* ══ Tick lists ════════════════════════════════════════════════════════════ */ #page-slot-machine-programming .smp-ticks { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px clamp(26px, 3vw, 46px); } #page-slot-machine-programming .smp-ticks li { display: flex; gap: 13px; font-size: 16px; color: var(--smp-text-2); line-height: 1.55; } #page-slot-machine-programming .smp-ticks svg { flex: 0 0 auto; margin-top: 4px; color: var(--smp-brass-d); } #page-slot-machine-programming .smp-sec--ink .smp-ticks li { color: var(--smp-on-dark-2); } #page-slot-machine-programming .smp-sec--ink .smp-ticks svg { color: var(--smp-brass); } /* ══ Offering links ════════════════════════════════════════════════════════ */ #page-slot-machine-programming .smp-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; } #page-slot-machine-programming .smp-offers a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 19px 22px; background: var(--smp-ivory); border: 1px solid var(--smp-line-l); border-left: 4px solid var(--smp-brass); border-radius: var(--smp-r-s); font-weight: 600; font-size: 16px; color: var(--smp-text); transition: border-color .18s ease, background .18s ease, transform .18s ease; } #page-slot-machine-programming .smp-offers a::after { content: "→"; color: var(--smp-brass-d); } #page-slot-machine-programming .smp-offers a:hover { background: var(--smp-ivory-2); border-color: var(--smp-brass); transform: translateX(4px); } #page-slot-machine-programming .smp-sec--ink .smp-offers a { background: rgba(6,23,15,.5); border-color: var(--smp-line-d); border-left-color: var(--smp-brass); color: var(--smp-on-dark); } #page-slot-machine-programming .smp-sec--ink .smp-offers a::after { color: var(--smp-brass); } #page-slot-machine-programming .smp-sec--ink .smp-offers a:hover { background: rgba(23,75,60,.6); border-color: var(--smp-brass); } #page-slot-machine-programming .smp-blogs { margin-top: clamp(32px, 4vw, 48px); } #page-slot-machine-programming .smp-blogs h3 { font-size: 20px; margin-bottom: 16px; } #page-slot-machine-programming .smp-blogs ul { display: grid; gap: 13px; } #page-slot-machine-programming .smp-blogs a { display: block; padding-left: 22px; position: relative; font-size: 16px; color: var(--smp-on-dark-2); } #page-slot-machine-programming .smp-blogs a::before { content: "◆"; position: absolute; left: 0; font-size: 11px; top: 6px; color: var(--smp-brass); } #page-slot-machine-programming .smp-blogs a:hover { color: var(--smp-brass); } /* ══ Split (copy + product image) ══════════════════════════════════════════ */ #page-slot-machine-programming .smp-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 4vw, 58px); align-items: start; } #page-slot-machine-programming .smp-split img { width: 100%; border-radius: var(--smp-r); border: 1px solid var(--smp-line-l); box-shadow: var(--smp-shadow); } #page-slot-machine-programming .smp-split--flip { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } /* The product shot keeps pace with a long read instead of stranding a column of empty space. A sticky offset, not a scroll-linked transform — the element never animates (rule 26). */ #page-slot-machine-programming .smp-split--flip img { position: sticky; top: 104px; } #page-slot-machine-programming .smp-split--mid { align-items: center; } /* ══ Full-width CTA band ═══════════════════════════════════════════════════ */ #page-slot-machine-programming .smp-band { background: radial-gradient(90% 120% at 50% 0%, rgba(232,181,63,.16) 0%, transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 8px), linear-gradient(180deg, #0e3a2d 0%, #08221a 100%); color: #fffdf7; text-align: center; padding-block: clamp(60px, 7.5vw, 104px); padding-inline: 24px; border-block: 3px solid var(--smp-brass); } #page-slot-machine-programming .smp-band h2 { max-width: 900px; margin-inline: auto; text-align: center; } #page-slot-machine-programming .smp-band p { color: #d8e4dc; max-width: 62ch; margin: 18px auto 0; } /* ══ FAQ — numbered, native

══════════════════════════════════════ */ #page-slot-machine-programming .smp-faq { max-width: 920px; margin-inline: auto; counter-reset: smp-q; } #page-slot-machine-programming .smp-faq details { counter-increment: smp-q; background: var(--smp-ivory); border: 1px solid var(--smp-line-l); border-left: 4px solid var(--smp-line-l); border-radius: var(--smp-r-s); margin-bottom: 15px; box-shadow: 0 6px 16px rgba(20,40,32,.06); transition: border-color .18s ease; } #page-slot-machine-programming .smp-faq details[open] { border-color: var(--smp-line-l); border-left-color: var(--smp-brass); } #page-slot-machine-programming .smp-faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px; cursor: pointer; list-style: none; } #page-slot-machine-programming .smp-faq summary::-webkit-details-marker { display: none; } #page-slot-machine-programming .smp-faq summary h3 { font-size: 18px; line-height: 1.45; font-weight: 700; } #page-slot-machine-programming .smp-faq summary h3::before { content: counter(smp-q, decimal-leading-zero); color: var(--smp-brass-d); font-weight: 800; margin-right: 14px; letter-spacing: .04em; } #page-slot-machine-programming .smp-faq summary::after { content: "+"; flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--smp-line-l); border-radius: 50%; font-size: 21px; line-height: 1; color: var(--smp-brass-d); transition: background .18s ease, border-color .18s ease; } #page-slot-machine-programming .smp-faq summary:hover::after { border-color: var(--smp-brass); background: var(--smp-ivory-2); } #page-slot-machine-programming .smp-faq details[open] summary::after { content: "–"; background: var(--smp-brass); color: var(--smp-brass-ink); border-color: var(--smp-brass); } #page-slot-machine-programming .smp-faq details > div { padding: 18px 24px 24px; border-top: 1px solid var(--smp-line-l); font-size: 16px; color: var(--smp-text-2); } #page-slot-machine-programming .smp-faq details > div ul { display: grid; gap: 9px; margin-top: 14px; } #page-slot-machine-programming .smp-faq details > div li { padding-left: 20px; position: relative; } #page-slot-machine-programming .smp-faq details > div li::before { content: "◆"; position: absolute; left: 0; font-size: 11px; top: 5px; color: var(--smp-brass-d); } /* ══ Testimonials ══════════════════════════════════════════════════════════ */ #page-slot-machine-programming .smp-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; } #page-slot-machine-programming .smp-quotes figure { background: var(--smp-ivory); border: 1px solid var(--smp-line-l); border-radius: var(--smp-r); padding: 30px 26px; display: grid; gap: 18px; justify-items: start; box-shadow: var(--smp-shadow); } #page-slot-machine-programming .smp-quotes img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--smp-brass); } #page-slot-machine-programming .smp-quotes blockquote { font-size: 16px; color: var(--smp-text-2); line-height: 1.65; position: relative; padding-top: 8px; } #page-slot-machine-programming .smp-quotes blockquote::before { content: "“"; display: block; font-size: 44px; line-height: .6; color: var(--smp-brass); margin-bottom: 8px; } #page-slot-machine-programming .smp-quotes figcaption { font-size: 16px; } /* ══ Offices ═══════════════════════════════════════════════════════════════ */ #page-slot-machine-programming .smp-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; } #page-slot-machine-programming .smp-offices article { background: rgba(6,23,15,.5); border: 1px solid var(--smp-line-d); border-top: 4px solid var(--smp-brass); border-radius: var(--smp-r-s); padding: 26px 24px; display: grid; gap: 11px; } #page-slot-machine-programming .smp-offices h3 { font-size: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--smp-brass); } #page-slot-machine-programming .smp-offices a { font-size: 18px; font-weight: 700; color: #fffdf7; } #page-slot-machine-programming .smp-offices a:hover { color: var(--smp-brass); } #page-slot-machine-programming .smp-offices address { font-size: 16px; color: var(--smp-on-dark-2); line-height: 1.55; } /* ══ Modal ═════════════════════════════════════════════════════════════════ */ #page-slot-machine-programming .smp-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(4,16,11,.82); } #page-slot-machine-programming .smp-modal.open { display: flex; } #page-slot-machine-programming .smp-modal__box { position: relative; width: 100%; max-width: 620px; max-height: 92vh; overflow: auto; background: #fff; border-radius: var(--smp-r); border-top: 5px solid var(--smp-brass); box-shadow: 0 30px 80px rgba(0,0,0,.55); } #page-slot-machine-programming .smp-modal__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--smp-ivory-2); color: var(--smp-text); cursor: pointer; z-index: 2; } #page-slot-machine-programming .smp-modal__close:hover { background: var(--smp-ivory-3); } #page-slot-machine-programming .smp-modal iframe { display: block; width: 100%; min-height: 820px; border: 0; border-radius: 0 0 var(--smp-r) var(--smp-r); } /* ══ Reduced motion ════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { #page-slot-machine-programming *, #page-slot-machine-programming *::before, #page-slot-machine-programming *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ══ Responsive ════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { #page-slot-machine-programming .smp-split, #page-slot-machine-programming .smp-split--flip { grid-template-columns: 1fr; } #page-slot-machine-programming .smp-split img { order: -1; } #page-slot-machine-programming .smp-split--flip img { position: static; } #page-slot-machine-programming .smp-spec div { border-right: 0; border-bottom: 1px solid var(--smp-line-d); } #page-slot-machine-programming .smp-spec div:last-child { border-bottom: 0; } } @media (max-width: 560px) { #page-slot-machine-programming .smp-wrap { padding-inline: 18px; } #page-slot-machine-programming .smp-crumb ol { padding-inline: 18px; } #page-slot-machine-programming .smp-hero { padding-inline: 18px; } #page-slot-machine-programming .smp-btn { width: 100%; } #page-slot-machine-programming .smp-carousel__nav { justify-content: center; } #page-slot-machine-programming .smp-track { grid-auto-columns: minmax(238px, 1fr); } }