/* ══════════════════════════════════════════════════════════════════════════ /custom-sweepstakes-software — page-isolated stylesheet AISHTMLNEWDESIGN-577 (meta + JSON-LD from AISHTMLNEWDESIGN-191) Visual direction: "KILN & SLATE". This page sells software MADE TO ORDER and fired to spec for global operators — the H1 is "Ready-to-Deploy ... for Global Operators". The register is a ceramics/materials spec card: cool porcelain stock, slate ink, and one kiln-fired orange that means "act". · DOUBLE RULE — the repeating separator is a PAIR of rules, a hairline sitting above a heavier bar, the way a material spec card divides its fields. Not a plain hairline and not a dashed cut line. · SQUARE INDEX — each repeating block is indexed by a small filled SQUARE TILE carrying its number, set on the rule. Not a bare numeral, not a pill tag. · PORCELAIN — a cool porcelain ground (#f4f6f7) is the DOMINANT surface. Deep slate (#1d2b33) is punctuation for four bands only and is never the page's ground. · ONE SIGNAL — kiln orange (#b5541f) is the only hue that carries an action. Slate blue (#46606c) appears ONLY as index and label text, never as a surface and never as a button. Sibling avoidance — this page shares its section skeleton almost exactly with /sweepstakes-script (DEPLOY WINDOW: cool graphite ground, TEAL signal, amber numerals, solid hairlines, mono stage tags) and /bespoke-sweepstakes-software-development (PATTERN CUTTER: warm bone ground, CLARET signal, ochre numerals, DASHED cut lines with notches). Three axes are moved against both at once: a COOL PORCELAIN ground that is neither graphite nor bone, a KILN-ORANGE signal that is neither teal nor claret, and a DOUBLE-RULE + SQUARE-TILE motif that is neither solid-hairline nor dashed-and-notched. The three read as different pages at a glance rather than on inspection, which is what rule 6 is for. Composition: no two sections repeat a layout. Asymmetric prose+plate, a seven-cell stat rail, square-indexed spec rows, a game-tile grid, an 18-mark provider wall, a five-group folio, a four-up screenshot grid, an 18-entry capability set, a 30-mark variant grid, four spec plates, an icon+list channel set, a nine-step indexed process, a flag manifest, a stack table and a Q/Ans. FAQ ledger. No three-up icon-card grid anywhere. Everything is scoped to #page-custom-sweepstakes-software, so this file can never reach the shared header/footer (owned by /assets/css/ais-*.css and /assets/js/ais-header.js / ais-footer.js). The document reset (html,body{margin:0}) is owned by the shared layout sheet — not restated here and not re-scoped (skill section 33). Design contract (.claude/skills/frontend-design/SKILL.md): · rule 1 — Inter is the primary family · rule 2 — nothing below 16px anywhere, including numerals and captions · rule 23 — no slate-gray body copy on light surfaces (#3d4a52 floor) · rule 24 — image-free full-bleed hero, STATIC gradient, centred column · rule 25 — one CTA per section, every label unique page-wide. SIX buttons: Get a Free Demo in 24 Hours / Let's Talk / Book a Call / Build Custom Sweepstakes Software Fast / Get Instant Custom Sweepstakes Software Access / Get a Free Quote. The record uses "Get a Free Quote" TWICE — in the Scale band and again in the final CTA. Two CTAs sharing a label is a WCAG 2.4.4 failure, so the final section keeps the button and the Scale band renders its occurrence as an inline link. "Learn More" and the three "Read More" links likewise ship as inline links; all four carry real hrefs on this page. · rule 26 — no running animation: zero @keyframes, zero 'infinite', transitions only, each a finite response to hover/focus/click · rule 39A — every element that paints a background owns its foreground on a tag-qualified, ancestor-scoped selector, never !important ══════════════════════════════════════════════════════════════════════════ */ #page-custom-sweepstakes-software{ /* ── palette ─────────────────────────────────────────────────────────── */ --cs-ink: #1d2b33; /* deep slate — band punctuation only */ --cs-ink-2: #26363f; /* raised plate on the dark bands */ --cs-ground: #f4f6f7; /* cool porcelain — the dominant ground */ --cs-paper: #ffffff; --cs-signal: #b5541f; /* kiln orange — the ONLY action hue */ --cs-signal-lit: #cc6526; --cs-slate: #46606c; /* index + label text only, never a surface */ --cs-text: #16222a; --cs-text-2: #3d4a52; /* 8.7:1 on porcelain — rule 23 floor */ --cs-on-dark: #e6edf0; --cs-on-dark-2: #a9bcc5; /* 8.0:1 on --cs-ink */ --cs-line: #d3dbdf; --cs-line-dark: #35474f; --cs-wrap: 1220px; --cs-faq-gutter: 58px; /* ONE source of truth for the Q/Ans. axis */ font-family: "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.65; color: var(--cs-text); background: var(--cs-ground); -webkit-font-smoothing: antialiased; } #page-custom-sweepstakes-software *, #page-custom-sweepstakes-software *::before, #page-custom-sweepstakes-software *::after{ box-sizing: border-box; } #page-custom-sweepstakes-software img{ max-width: 100%; height: auto; } #page-custom-sweepstakes-software h1, #page-custom-sweepstakes-software h2, #page-custom-sweepstakes-software h3, #page-custom-sweepstakes-software h4{ margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.015em; color: var(--cs-text); } #page-custom-sweepstakes-software h2{ font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; } #page-custom-sweepstakes-software h3{ font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; } #page-custom-sweepstakes-software h4{ font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; } #page-custom-sweepstakes-software p{ margin: 0 0 1em; color: var(--cs-text-2); } #page-custom-sweepstakes-software ul, #page-custom-sweepstakes-software ol{ margin: 0; padding: 0; list-style: none; } #page-custom-sweepstakes-software .csw-wrap{ max-width: var(--cs-wrap); margin-inline: auto; padding-inline: 24px; } #page-custom-sweepstakes-software section{ padding-block: clamp(56px, 6vw, 92px); } #page-custom-sweepstakes-software .csw-lead{ font-size: clamp(17px, 1.4vw, 19px); color: var(--cs-text); } /* ── the one action control ──────────────────────────────────────────── */ #page-custom-sweepstakes-software .csw-btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 30px; border: 1px solid var(--cs-signal); border-radius: 0; background: var(--cs-signal); color: #ffffff; font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: .01em; cursor: pointer; text-align: center; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; } #page-custom-sweepstakes-software .csw-btn:hover{ background: var(--cs-signal-lit); border-color: var(--cs-signal-lit); transform: translateY(-1px); } #page-custom-sweepstakes-software .csw-btn:focus-visible{ outline: 3px solid var(--cs-slate); outline-offset: 3px; } #page-custom-sweepstakes-software .csw-btn:active{ transform: translateY(0); } #page-custom-sweepstakes-software .csw-hero .csw-btn--lit, #page-custom-sweepstakes-software .csw-band .csw-btn--lit, #page-custom-sweepstakes-software .csw-final .csw-btn--lit{ background: #f2e3d5; border-color: #f2e3d5; color: #46200a; } #page-custom-sweepstakes-software .csw-hero .csw-btn--lit:hover, #page-custom-sweepstakes-software .csw-band .csw-btn--lit:hover, #page-custom-sweepstakes-software .csw-final .csw-btn--lit:hover{ background: #ffffff; border-color: #ffffff; } #page-custom-sweepstakes-software .csw-inline{ color: var(--cs-signal); font-weight: 600; border-bottom: 1px solid currentColor; } #page-custom-sweepstakes-software .csw-inline:hover{ color: var(--cs-signal-lit); } #page-custom-sweepstakes-software .csw-inline:focus-visible{ outline: 2px solid var(--cs-signal); outline-offset: 3px; } #page-custom-sweepstakes-software .csw-band p a.csw-inline--lit, #page-custom-sweepstakes-software .csw-final p a.csw-inline--lit{ color: #f3bd8a; } /* ══ HERO — rule 24: full-bleed, STATIC gradient, image-free, one CTA ══ */ #page-custom-sweepstakes-software .csw-hero{ width: 100%; padding: clamp(72px, 8vw, 124px) 24px clamp(64px, 7vw, 104px); background: linear-gradient(155deg, #16222a 0%, #1d2b33 46%, #4a2a16 100%); border-bottom: 3px solid var(--cs-signal); } #page-custom-sweepstakes-software .csw-hero__inner{ max-width: 900px; margin-inline: auto; text-align: center; } #page-custom-sweepstakes-software .csw-hero p.csw-hero__eyebrow{ margin: 0 0 18px; font-size: 16px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #eda766; /* 6.9:1 on the hero */ } #page-custom-sweepstakes-software .csw-hero h1{ font-size: clamp(34px, 4.6vw, 58px); font-weight: 900; line-height: 1.08; color: #ffffff; } #page-custom-sweepstakes-software .csw-hero p.csw-hero__lede{ margin: 22px auto 32px; max-width: 780px; font-size: clamp(17px, 1.5vw, 19px); color: var(--cs-on-dark); } #page-custom-sweepstakes-software .csw-hero__trust{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 34px; } #page-custom-sweepstakes-software .csw-hero__trust li{ position: relative; padding-left: 24px; font-size: 16px; color: var(--cs-on-dark-2); } /* the notch — the pattern-cutter's mark, used instead of a bullet or tick */ #page-custom-sweepstakes-software .csw-hero__trust li::before{ content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; background: #f0a06a; /* filled square, not a notch */ } /* ══ BREADCRUMB ══ */ #page-custom-sweepstakes-software .csw-crumb{ padding-block: 18px; background: var(--cs-paper); border-bottom: 1px solid var(--cs-line); } #page-custom-sweepstakes-software .csw-crumb ol{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #page-custom-sweepstakes-software .csw-crumb li{ font-size: 16px; color: var(--cs-text-2); } #page-custom-sweepstakes-software .csw-crumb li + li::before{ content: "/"; margin-right: 10px; color: var(--cs-line); } #page-custom-sweepstakes-software .csw-crumb a{ display: inline-flex; align-items: center; gap: 8px; color: var(--cs-signal); font-weight: 600; } #page-custom-sweepstakes-software .csw-crumb a:hover{ color: var(--cs-signal-lit); } /* ══ INTRO — asymmetric prose + cut plate ══ */ #page-custom-sweepstakes-software .csw-intro{ background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-intro__grid{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 76px); align-items: center; } #page-custom-sweepstakes-software .csw-intro__fig{ margin: 0; } #page-custom-sweepstakes-software .csw-intro__fig img{ display: block; width: 100%; border: 1px solid var(--cs-line); border-bottom: 3px solid var(--cs-slate); background: var(--cs-paper); } /* ══ STATS — the measured rail, first dark band ══ */ #page-custom-sweepstakes-software .csw-stats{ background: var(--cs-ink); } #page-custom-sweepstakes-software .csw-stats h2{ color: #ffffff; max-width: 22ch; } #page-custom-sweepstakes-software .csw-stats__row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-top: 40px; background: var(--cs-ink); } #page-custom-sweepstakes-software .csw-stats__row li{ display: flex; flex-direction: column; gap: 6px; padding: 26px 20px; background: var(--cs-ink-2); box-shadow: 0 0 0 1px var(--cs-line-dark); } #page-custom-sweepstakes-software .csw-stats__n{ font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; color: #eda766; font-variant-numeric: tabular-nums; } #page-custom-sweepstakes-software .csw-stats__l{ font-size: 16px; color: var(--cs-on-dark-2); } /* ══ THE SPEC ROW — the repeating unit: a DOUBLE RULE (hairline over a heavier bar) with a filled SQUARE INDEX TILE set on it. Used by why-choose, services and hire. ══ */ #page-custom-sweepstakes-software .csw-rows{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(28px, 3vw, 52px); margin-top: 44px; counter-reset: csw-row; } /* DOUBLE RULE — the hairline is the li's own border-top and the heavier bar is ::after directly beneath it. Together they read as one spec-card divider. */ #page-custom-sweepstakes-software .csw-rows > li{ counter-increment: csw-row; position: relative; padding: 30px 0 24px 0; border-top: 1px solid var(--cs-line); } #page-custom-sweepstakes-software .csw-rows > li::after{ content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: var(--cs-line); } /* SQUARE INDEX TILE — a filled slate square carrying the number, set on the rule. rule 39A: it paints a background, so it owns its foreground here. */ #page-custom-sweepstakes-software .csw-rows > li::before{ content: counter(csw-row, decimal-leading-zero); position: absolute; left: 0; top: 14px; display: grid; place-items: center; width: 30px; height: 30px; background: var(--cs-slate); color: #ffffff; font-size: 16px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } #page-custom-sweepstakes-software .csw-rows > li h3{ margin-top: 30px; } #page-custom-sweepstakes-software .csw-rows > li p{ margin: 0; } #page-custom-sweepstakes-software .csw-rows--tight > li{ padding: 20px 0 18px; } #page-custom-sweepstakes-software .csw-why{ background: var(--cs-ground); } #page-custom-sweepstakes-software .csw-serv{ background: var(--cs-paper); } /* ══ CONSULT BAND — second dark punctuation ══ */ #page-custom-sweepstakes-software .csw-band{ background: linear-gradient(100deg, #1d2b33 0%, #4a2a16 100%); } #page-custom-sweepstakes-software .csw-band__inner{ max-width: 900px; text-align: center; } #page-custom-sweepstakes-software .csw-band h2{ color: #ffffff; } #page-custom-sweepstakes-software .csw-band p{ color: var(--cs-on-dark); font-size: 18px; margin-bottom: 30px; } /* ══ GAME SOLUTIONS + PROVIDER WALL ══ */ #page-custom-sweepstakes-software .csw-games{ background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-games h3.csw-sub{ margin-top: 34px; font-size: 16px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--cs-slate); } #page-custom-sweepstakes-software .csw-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } /* rule 39A — the chip paints a background, so it owns its foreground at (0,3,1), which no prose rule in this sheet can outrank. */ #page-custom-sweepstakes-software .csw-games ul.csw-chips li{ padding: 9px 16px; border: 1px solid var(--cs-line); background: #f2ece8; color: #7c3a13; font-size: 16px; font-weight: 600; } #page-custom-sweepstakes-software .csw-tiles{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; } #page-custom-sweepstakes-software .csw-tiles a{ display: block; height: 100%; padding: 18px; border: 1px solid var(--cs-line); background: var(--cs-paper); transition: border-color .16s ease, transform .16s ease; } #page-custom-sweepstakes-software .csw-tiles a:hover{ border-color: var(--cs-signal); transform: translateY(-2px); } #page-custom-sweepstakes-software .csw-tiles img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--cs-ground); } #page-custom-sweepstakes-software .csw-tiles h3{ margin: 14px 0 0; font-size: 18px; } #page-custom-sweepstakes-software .csw-wall{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin-top: 34px; background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-wall li{ box-shadow: 0 0 0 1px var(--cs-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 12px; background: var(--cs-paper); text-align: center; } #page-custom-sweepstakes-software .csw-wall img{ max-height: 46px; width: auto; object-fit: contain; } #page-custom-sweepstakes-software .csw-wall h3{ margin: 0; font-size: 16px; font-weight: 600; color: var(--cs-text-2); } #page-custom-sweepstakes-software .csw-games > .csw-wrap > .csw-btn{ margin-top: 40px; } /* ══ PORTFOLIO ══ */ #page-custom-sweepstakes-software .csw-folio{ background: var(--cs-ground); } #page-custom-sweepstakes-software .csw-folio__set{ display: grid; gap: 34px; margin-top: 40px; } #page-custom-sweepstakes-software .csw-folio__grp{ border-top: 1px solid var(--cs-line); padding-top: 24px; } #page-custom-sweepstakes-software .csw-folio__grp h3{ font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-slate); } #page-custom-sweepstakes-software .csw-folio__grp ul{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; } #page-custom-sweepstakes-software .csw-folio__grp li{ display: flex; align-items: center; justify-content: center; min-width: 128px; min-height: 68px; padding: 10px 16px; background: var(--cs-paper); border: 1px solid var(--cs-line); } #page-custom-sweepstakes-software .csw-folio__grp img{ max-height: 42px; width: auto; object-fit: contain; } #page-custom-sweepstakes-software .csw-folio > .csw-wrap > .csw-btn{ margin-top: 40px; } /* ══ SCREENSHOTS ══ */ #page-custom-sweepstakes-software .csw-shots{ background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-shots__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 40px; } #page-custom-sweepstakes-software .csw-shots__grid img{ display: block; width: 100%; border: 1px solid var(--cs-line); border-bottom: 3px solid var(--cs-slate); background: var(--cs-paper); } /* ══ KEY CAPABILITIES — 18 ruled entries, two columns ══ */ #page-custom-sweepstakes-software .csw-caps{ background: var(--cs-ground); } #page-custom-sweepstakes-software .csw-caps__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 clamp(28px, 4vw, 64px); margin-top: 44px; } #page-custom-sweepstakes-software .csw-caps__set > li{ padding: 24px 0; border-bottom: 1px solid var(--cs-line); } #page-custom-sweepstakes-software .csw-caps__set h3{ margin-bottom: 6px; } #page-custom-sweepstakes-software .csw-caps__set p{ margin: 0; } /* ══ VARIANTS ══ */ #page-custom-sweepstakes-software .csw-variants{ background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-variants__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 16px; margin-top: 40px; } #page-custom-sweepstakes-software .csw-variants__grid li{ display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px; border: 1px solid var(--cs-line); background: var(--cs-paper); text-align: center; transition: border-color .16s ease; } #page-custom-sweepstakes-software .csw-variants__grid li:hover{ border-color: var(--cs-signal); } #page-custom-sweepstakes-software .csw-variants__grid img{ width: 100%; max-width: 108px; } #page-custom-sweepstakes-software .csw-variants__grid span{ font-size: 16px; color: var(--cs-text-2); } #page-custom-sweepstakes-software .csw-variants > .csw-wrap > .csw-btn{ margin-top: 40px; } /* ══ SPEC PLATES — future-ready (2) + explore (6) ══ */ #page-custom-sweepstakes-software .csw-plat{ background: var(--cs-ground); } #page-custom-sweepstakes-software .csw-explore{ background: var(--cs-ground); } #page-custom-sweepstakes-software .csw-plat__set, #page-custom-sweepstakes-software .csw-explore__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 40px; } #page-custom-sweepstakes-software .csw-plat__set article, #page-custom-sweepstakes-software .csw-explore__set article{ padding: 26px 24px; background: var(--cs-paper); border: 1px solid var(--cs-line); border-top: 3px solid var(--cs-signal); } #page-custom-sweepstakes-software .csw-plat__set ul li, #page-custom-sweepstakes-software .csw-explore__set ul li{ position: relative; padding: 7px 0 7px 26px; font-size: 16px; color: var(--cs-text-2); border-top: 1px solid var(--cs-line); } #page-custom-sweepstakes-software .csw-plat__set ul li:first-child, #page-custom-sweepstakes-software .csw-explore__set ul li:first-child{ border-top: 0; } #page-custom-sweepstakes-software .csw-explore__set ul li::before{ content: ""; position: absolute; left: 4px; top: 1.05em; width: 8px; height: 8px; background: var(--cs-signal); } #page-custom-sweepstakes-software .csw-plat__set img.csw-tick{ position: absolute; left: 2px; top: .85em; width: 14px; height: auto; } /* only two plates exist here — hold them to a readable measure rather than stretching each across half a 1220px page */ #page-custom-sweepstakes-software .csw-plat__set{ max-width: 900px; } /* ══ MULTI-PLATFORM ══ */ #page-custom-sweepstakes-software .csw-multi{ background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-multi__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1px; margin-top: 40px; background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-multi__set article{ padding: 28px 24px; background: var(--cs-paper); box-shadow: 0 0 0 1px var(--cs-line); } #page-custom-sweepstakes-software .csw-multi__set img{ width: 48px; height: auto; margin-bottom: 14px; } #page-custom-sweepstakes-software .csw-multi__set ul{ margin-top: 14px; } #page-custom-sweepstakes-software .csw-multi__set ul li{ padding: 6px 0 6px 22px; position: relative; font-size: 16px; color: var(--cs-text-2); } #page-custom-sweepstakes-software .csw-multi__set ul li::before{ content: ""; position: absolute; left: 0; top: .86em; width: 8px; height: 8px; background: var(--cs-slate); } /* ══ OTHER SOLUTIONS ══ */ #page-custom-sweepstakes-software .csw-other{ background: var(--cs-ground); } #page-custom-sweepstakes-software .csw-other__grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 70px); align-items: center; } #page-custom-sweepstakes-software .csw-other__list{ margin: 30px 0 34px; } #page-custom-sweepstakes-software .csw-other__list li{ display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--cs-line); } #page-custom-sweepstakes-software .csw-other__list img.csw-tick{ margin-top: .35em; width: 14px; height: auto; flex: 0 0 auto; } #page-custom-sweepstakes-software .csw-other__list a{ font-size: 16px; font-weight: 600; color: var(--cs-text); } #page-custom-sweepstakes-software .csw-other__list a:hover{ color: var(--cs-signal); } #page-custom-sweepstakes-software .csw-other__fig{ margin: 0; } #page-custom-sweepstakes-software .csw-other__fig img{ display: block; width: 100%; } /* ══ APPROACH — nine numbered pattern pieces ══ */ #page-custom-sweepstakes-software .csw-proc{ background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-proc__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px clamp(24px, 3vw, 44px); margin-top: 44px; counter-reset: csw-piece; } #page-custom-sweepstakes-software .csw-proc__set > li{ counter-increment: csw-piece; padding: 34px 0 4px; border-top: 1px solid var(--cs-line); position: relative; } #page-custom-sweepstakes-software .csw-proc__set > li::after{ content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: var(--cs-line); } #page-custom-sweepstakes-software .csw-proc__set > li::before{ content: counter(csw-piece, decimal-leading-zero); position: absolute; top: 14px; left: 0; display: grid; place-items: center; width: 32px; height: 32px; background: var(--cs-signal); color: #ffffff; font-size: 16px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } #page-custom-sweepstakes-software .csw-proc__set h3{ margin: 12px 0 10px 44px; } #page-custom-sweepstakes-software .csw-proc__set ul li{ padding: 5px 0 5px 20px; position: relative; font-size: 16px; color: var(--cs-text-2); } #page-custom-sweepstakes-software .csw-proc__set ul li::before{ content: ""; position: absolute; left: 0; top: .86em; width: 8px; height: 8px; background: var(--cs-signal); } /* ══ TECHNOLOGY STACK ══ */ #page-custom-sweepstakes-software .csw-stack{ background: var(--cs-ground); } #page-custom-sweepstakes-software .csw-stack__set{ margin-top: 36px; border: 1px solid var(--cs-line); background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-stack__set > div{ display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--cs-line); } #page-custom-sweepstakes-software .csw-stack__set > div:last-child{ border-bottom: 0; } #page-custom-sweepstakes-software .csw-stack__set dt{ font-size: 16px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-slate); } #page-custom-sweepstakes-software .csw-stack__set dd{ margin: 0; font-size: 17px; color: var(--cs-text); } /* ══ CASE STUDIES ══ */ #page-custom-sweepstakes-software .csw-cases{ background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-cases__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin-top: 40px; } #page-custom-sweepstakes-software .csw-cases__set li{ display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 26px 24px; border: 1px solid var(--cs-line); border-left: 3px solid var(--cs-slate); background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-cases__set h3{ margin: 0; font-size: 18px; line-height: 1.45; } #page-custom-sweepstakes-software .csw-cases__set p{ margin: 0; } /* ══ ENGAGEMENT MODELS ══ */ #page-custom-sweepstakes-software .csw-models{ background: var(--cs-ground); } #page-custom-sweepstakes-software .csw-models__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin-top: 40px; } #page-custom-sweepstakes-software .csw-models__set article{ padding: 28px 26px; background: var(--cs-paper); border: 1px solid var(--cs-line); } #page-custom-sweepstakes-software .csw-models__set img{ width: 48px; height: auto; margin-bottom: 16px; } #page-custom-sweepstakes-software .csw-models__set p{ margin: 0; } /* ══ GLOBAL ══ */ #page-custom-sweepstakes-software .csw-global{ background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-global__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 40px; } #page-custom-sweepstakes-software .csw-global__set li{ display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--cs-line); } #page-custom-sweepstakes-software .csw-global__set img{ width: 34px; height: auto; } #page-custom-sweepstakes-software .csw-global__set span{ font-size: 16px; color: var(--cs-text); } /* ══ HIRE ══ */ #page-custom-sweepstakes-software .csw-hire{ background: var(--cs-ground); } #page-custom-sweepstakes-software .csw-hire__grid{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 70px); align-items: start; } #page-custom-sweepstakes-software .csw-hire__grid > div > .csw-rows{ grid-template-columns: 1fr; } #page-custom-sweepstakes-software .csw-hire__fig{ margin: 0; position: sticky; top: 24px; } #page-custom-sweepstakes-software .csw-hire__fig img{ display: block; width: 100%; border: 1px solid var(--cs-line); border-bottom: 3px solid var(--cs-slate); background: var(--cs-paper); } /* ══ PRODUCT FAMILY ══ */ #page-custom-sweepstakes-software .csw-family{ background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-family__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; margin-top: 40px; background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-family__set li{ padding: 26px 24px; background: var(--cs-paper); box-shadow: 0 0 0 1px var(--cs-line); } #page-custom-sweepstakes-software .csw-family__set h3{ color: var(--cs-signal); } #page-custom-sweepstakes-software .csw-family__set p{ margin: 0; } /* ══ FINAL CTA — fourth dark punctuation ══ */ #page-custom-sweepstakes-software .csw-final{ background: linear-gradient(120deg, #16222a 0%, #1d2b33 48%, #4a2a16 100%); } #page-custom-sweepstakes-software .csw-final__inner{ max-width: 900px; text-align: center; } #page-custom-sweepstakes-software .csw-final h2{ color: #ffffff; } #page-custom-sweepstakes-software .csw-final p{ color: var(--cs-on-dark); font-size: 18px; margin-bottom: 30px; } /* ══ DEMO — one action per repeated card (rule 25 card exception) ══ */ #page-custom-sweepstakes-software .csw-demo{ background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-demo__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 40px; } #page-custom-sweepstakes-software .csw-demo__card{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 26px; border: 1px solid var(--cs-line); background: var(--cs-ground); } #page-custom-sweepstakes-software .csw-demo__card img{ width: 48px; height: auto; } #page-custom-sweepstakes-software .csw-demo__card h3{ margin: 0; } #page-custom-sweepstakes-software .csw-demo__card dl{ display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; width: 100%; } #page-custom-sweepstakes-software .csw-demo__card dt{ font-size: 16px; color: var(--cs-text-2); } #page-custom-sweepstakes-software .csw-demo__card dd{ margin: 0; font-size: 16px; color: var(--cs-text); word-break: break-all; } #page-custom-sweepstakes-software .csw-demo__go{ margin-top: 6px; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border: 1px solid var(--cs-signal); color: var(--cs-signal); font-size: 16px; font-weight: 700; } #page-custom-sweepstakes-software .csw-demo__go:hover{ background: var(--cs-signal); color: #ffffff; } #page-custom-sweepstakes-software .csw-demo__go:focus-visible{ outline: 3px solid var(--cs-slate); outline-offset: 3px; } /* ══ TRUST ══ */ #page-custom-sweepstakes-software .csw-trust{ background: var(--cs-ground); } #page-custom-sweepstakes-software .csw-trust__col{ max-width: 900px; } #page-custom-sweepstakes-software .csw-trust__list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; margin-top: 30px; background: var(--cs-ground); counter-reset: csw-trust; } #page-custom-sweepstakes-software .csw-trust__list li{ counter-increment: csw-trust; padding: 20px 22px; background: var(--cs-paper); box-shadow: 0 0 0 1px var(--cs-line); font-size: 16px; font-weight: 600; } #page-custom-sweepstakes-software .csw-trust__list li::before{ content: counter(csw-trust) "."; margin-right: 8px; color: var(--cs-slate); font-weight: 800; } /* ══ BLOG MANIFEST ══ */ #page-custom-sweepstakes-software .csw-blog{ background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-blog__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 clamp(28px, 4vw, 60px); margin-top: 36px; } #page-custom-sweepstakes-software .csw-blog__set li{ border-bottom: 1px solid var(--cs-line); } #page-custom-sweepstakes-software .csw-blog__set a{ display: block; padding: 16px 0; font-size: 17px; font-weight: 600; color: var(--cs-text); } #page-custom-sweepstakes-software .csw-blog__set a:hover{ color: var(--cs-signal); } /* ══ FAQ — numbered Q/Ans. ledger. Both markers are GENERATED CONTENT, not markup: this page's FAQPage schema was repaired under AISHTMLNEWDESIGN-189 so each Question.name matches its visible text exactly, and typing "Q1. " into the

would break all five pairings. The gutter is ONE variable read by both grids, so the two markers cannot drift apart. ══ */ #page-custom-sweepstakes-software .csw-faq{ background: var(--cs-ground); } #page-custom-sweepstakes-software .csw-faq__col{ max-width: 900px; } #page-custom-sweepstakes-software #csw-faqlist{ counter-reset: csw-faq; margin-top: 34px; border-top: 1px solid var(--cs-line); } #page-custom-sweepstakes-software #csw-faqlist details{ counter-increment: csw-faq; border-bottom: 1px solid var(--cs-line); background: var(--cs-paper); } #page-custom-sweepstakes-software #csw-faqlist summary{ display: grid; grid-template-columns: var(--cs-faq-gutter) 1fr auto; align-items: start; gap: 0 12px; padding: 22px 24px; cursor: pointer; list-style: none; transition: background-color .16s ease; } #page-custom-sweepstakes-software #csw-faqlist summary::-webkit-details-marker{ display: none; } #page-custom-sweepstakes-software #csw-faqlist summary:hover{ background: #f2ece8; } #page-custom-sweepstakes-software #csw-faqlist summary::before{ content: "Q" counter(csw-faq) "."; font-size: 17px; font-weight: 800; line-height: 1.5; color: var(--cs-signal); font-variant-numeric: tabular-nums; } #page-custom-sweepstakes-software #csw-faqlist summary h3{ margin: 0; font-size: 18px; line-height: 1.5; } #page-custom-sweepstakes-software #csw-faqlist summary::after{ content: "+"; width: 30px; height: 30px; display: grid; place-items: center; background: var(--cs-ground); color: var(--cs-signal); font-size: 19px; font-weight: 700; line-height: 1; transition: background-color .16s ease, color .16s ease; } #page-custom-sweepstakes-software #csw-faqlist details[open] summary::after{ content: "\2212"; background: var(--cs-signal); color: #ffffff; } #page-custom-sweepstakes-software #csw-faqlist summary:focus-visible{ outline: 3px solid var(--cs-signal); outline-offset: -3px; } #page-custom-sweepstakes-software .csw-faq__a{ display: grid; grid-template-columns: var(--cs-faq-gutter) 1fr; gap: 0 12px; padding: 0 24px 24px; } #page-custom-sweepstakes-software .csw-faq__a::before{ content: "Ans."; font-size: 17px; font-weight: 800; line-height: 1.65; color: var(--cs-slate); } #page-custom-sweepstakes-software .csw-faq__a p{ margin: 0; font-size: 17px; } /* ══ STORIES — facades; the iframe only exists after a click ══ */ #page-custom-sweepstakes-software .csw-stories{ background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-stories h4{ margin-bottom: 30px; } #page-custom-sweepstakes-software .csw-stories__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; } #page-custom-sweepstakes-software .csw-stories__set li{ border: 1px solid var(--cs-line); background: var(--cs-paper); } #page-custom-sweepstakes-software .csw-vid{ font: inherit; position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--cs-ink); cursor: pointer; } #page-custom-sweepstakes-software .csw-vid img{ display: block; width: 100%; } #page-custom-sweepstakes-software .csw-vid__play{ position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; display: grid; place-items: center; padding-left: 5px; border-radius: 50%; background: rgba(181, 84, 31, .94); color: #ffffff; transition: background-color .16s ease, transform .16s ease; } #page-custom-sweepstakes-software .csw-vid:hover .csw-vid__play{ background: var(--cs-signal-lit); transform: scale(1.06); } #page-custom-sweepstakes-software .csw-vid:focus-visible{ outline: 3px solid var(--cs-signal); outline-offset: -3px; } #page-custom-sweepstakes-software .csw-story__frame{ display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; } #page-custom-sweepstakes-software .csw-stories__set blockquote{ margin: 0; padding: 20px 22px; } #page-custom-sweepstakes-software .csw-stories__set blockquote p{ margin: 0; font-size: 16px; } #page-custom-sweepstakes-software .csw-stories__more{ margin: 28px 0 0; } /* ══ AREA WE SERVE — third dark punctuation ══ */ #page-custom-sweepstakes-software .csw-areas{ background: var(--cs-ink); } #page-custom-sweepstakes-software .csw-areas h2{ color: #ffffff; } #page-custom-sweepstakes-software .csw-areas__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; margin-top: 40px; background: var(--cs-ink); } #page-custom-sweepstakes-software .csw-areas__set li{ padding: 26px 24px; background: var(--cs-ink-2); box-shadow: 0 0 0 1px var(--cs-line-dark); } #page-custom-sweepstakes-software .csw-areas__set h3{ font-size: 16px; font-weight: 800; letter-spacing: .14em; color: #f3bd8a; } #page-custom-sweepstakes-software .csw-areas__set p.csw-areas__tel{ margin: 12px 0 10px; } #page-custom-sweepstakes-software .csw-areas__set p.csw-areas__tel a{ color: #eda766; font-size: 17px; font-weight: 700; } #page-custom-sweepstakes-software .csw-areas__set p.csw-areas__tel a:hover{ color: #ffd2a8; } #page-custom-sweepstakes-software .csw-areas__set address{ font-style: normal; font-size: 16px; line-height: 1.6; color: var(--cs-on-dark-2); } /* ══ RESPONSIVE ══ */ @media (max-width: 1020px){ #page-custom-sweepstakes-software .csw-intro__grid, #page-custom-sweepstakes-software .csw-other__grid, #page-custom-sweepstakes-software .csw-hire__grid{ grid-template-columns: 1fr; } #page-custom-sweepstakes-software .csw-hire__fig{ position: static; max-width: 460px; } } @media (max-width: 720px){ #page-custom-sweepstakes-software section{ padding-block: 48px; } #page-custom-sweepstakes-software .csw-hero{ padding-block: 64px 56px; } #page-custom-sweepstakes-software .csw-hero__inner{ text-align: left; } #page-custom-sweepstakes-software .csw-hero__trust{ flex-direction: column; align-items: flex-start; gap: 10px; } #page-custom-sweepstakes-software .csw-btn{ width: 100%; } /* 3 tile tracks on a 375px screen leaves ~105px per tile — two below 720px */ #page-custom-sweepstakes-software .csw-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } #page-custom-sweepstakes-software .csw-stack__set > div{ grid-template-columns: 1fr; gap: 6px; } /* narrower Q/Ans. gutter; both markers still read the SAME variable */ #page-custom-sweepstakes-software .csw-faq{ --cs-faq-gutter: 44px; } #page-custom-sweepstakes-software #csw-faqlist summary{ padding: 20px 16px; gap: 0 8px; } #page-custom-sweepstakes-software .csw-faq__a{ padding: 0 16px 20px; gap: 0 8px; }} /* rule 26 — the only motion left is a finite response to a user action, and even that stands down when the user has asked for reduced motion. */ @media (prefers-reduced-motion: reduce){ #page-custom-sweepstakes-software *, #page-custom-sweepstakes-software *::before, #page-custom-sweepstakes-software *::after{ transition-duration: .01ms !important; } } /* ── CTA modal — shared shell, identical on every CTA page ────────────────── Replicated from /case-study/dicemasters-backgammon-platform-case-study. Values were read off that page with design-clone's extract_design.py; do not re-tune them per page — the enquiry form must present the same on all URLs. */ #page-custom-sweepstakes-software .csw-modal{ color:#2c2419; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.72; position:fixed; inset:0; z-index:9999; display:none; align-items:flex-start; justify-content:center; padding: 100px 20px 20px 20px; overflow-y:auto; background:rgba(20,13,7,.72); } #page-custom-sweepstakes-software .csw-modal.is-open{display:flex;} #page-custom-sweepstakes-software .csw-modal__box{ /* Pinned so the panel does not inherit each page's own type scale or ink — the enquiry shell must present identically on every URL. */ color:#2c2419; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.72; position:relative; width:100%; max-width:620px; margin:auto; border-radius:16px; background:#fff; box-shadow:0 30px 80px -30px rgba(0,0,0,.7); /* hidden, not auto: this clips the embedded form's square-cornered white document to the panel radius, so all FOUR corners stay rounded. */ overflow:hidden; } #page-custom-sweepstakes-software .csw-modal__x{ position:absolute; top:12px;right:12px; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:44px;height:44px; border:1px solid #ddd2ba; border-radius:50%; background:#fff; color:#1d1509; cursor:pointer; transition:background-color .16s ease,color .16s ease; } #page-custom-sweepstakes-software .csw-modal__x:hover{background:#2b1c12;color:#fbf6ec;} #page-custom-sweepstakes-software .csw-modal iframe{ display:block; width:100%; min-height:860px; border:0; } @media (max-width:640px){ /* Keep the radius on phones too — the panel is a card at every width. */ #page-custom-sweepstakes-software .csw-modal{padding: 100px 12px 12px 12px;} #page-custom-sweepstakes-software .csw-modal__box{max-width:none;border-radius:14px;} } /* ══════════════════════════════════════════════════════════════════════════ "AIS Technolabs Brings To You The Best iGaming Solutions" — game mosaic Rebuilt to the live reference (/online-sweepstakes-platform-provider). The six marks carry THREE aspect ratios (397x388 / 398x270 / 397x506). The previous grid forced them into one fixed box, so portrait and landscape marks were scaled to the same dimensions — letterboxed, ragged along the bottom edge. This is a 3-column MASONRY: the name is overlaid on the photo over a gradient scrim instead of captioned beneath it. The aspect-ratio is assigned per POSITION, not per image, chosen so all three columns total the same height and end flush: col1 388+388, col2 270+506, col3 506+270 — 776 units each. Verified: the six games appear in the same DOM order on all five pages, so the per-position ratios transfer. object-fit:cover crops to the cell rather than distorting. ══════════════════════════════════════════════════════════════════════════ */ #page-custom-sweepstakes-software .csw-tiles{ display: block; /* override the base grid/flex */ columns: 3; column-gap: 24px; margin: 26px 0 30px; grid-template-columns: none; gap: normal; } #page-custom-sweepstakes-software .csw-tiles > li{ break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 24px; padding: 0; border: 0; background: none; } #page-custom-sweepstakes-software .csw-tiles > li:nth-child(1){ aspect-ratio: 376 / 388; } #page-custom-sweepstakes-software .csw-tiles > li:nth-child(2){ aspect-ratio: 376 / 388; } #page-custom-sweepstakes-software .csw-tiles > li:nth-child(3){ aspect-ratio: 376 / 270; } #page-custom-sweepstakes-software .csw-tiles > li:nth-child(4){ aspect-ratio: 376 / 506; } #page-custom-sweepstakes-software .csw-tiles > li:nth-child(5){ aspect-ratio: 376 / 506; } #page-custom-sweepstakes-software .csw-tiles > li:nth-child(6){ aspect-ratio: 376 / 270; } #page-custom-sweepstakes-software .csw-tiles > li > a{ position: relative; display: block; height: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #0d0d12; transition: transform .16s ease, box-shadow .16s ease; } #page-custom-sweepstakes-software .csw-tiles > li > a::after{ /* scrim — the label owns its contrast */ content: ""; position: absolute; inset: auto 0 0 0; height: 58%; background: linear-gradient(180deg, rgba(8,8,12,0) 0%, rgba(8,8,12,.82) 78%, rgba(8,8,12,.92) 100%); pointer-events: none; } #page-custom-sweepstakes-software .csw-tiles > li > a:hover{ transform: translateY(-3px); box-shadow: 0 14px 34px rgba(8,8,12,.22); } #page-custom-sweepstakes-software .csw-tiles > li > a:focus-visible{ outline: 3px solid currentColor; outline-offset: 3px; } #page-custom-sweepstakes-software .csw-tiles img{ width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; display: block; border-radius: 0; object-fit: cover; /* crop to the cell, never distort */ object-position: center; } #page-custom-sweepstakes-software .csw-tiles h3{ position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 1; margin: 0; padding: 0; border: 0; font-size: clamp(18px, 1.5vw, 22px); font-weight: 800; line-height: 1.25; text-align: left; color: #ffffff; /* owns its foreground over the scrim */ text-shadow: 0 1px 12px rgba(0,0,0,.55); } @media (max-width: 900px){ #page-custom-sweepstakes-software .csw-tiles{ columns: 2; } } @media (max-width: 560px){ #page-custom-sweepstakes-software .csw-tiles{ columns: 1; } } /* ── provider wall ───────────────────────────────────────────────────────── Same hairline-grid language as the reference, but with an explicit column count instead of auto-fit. There are exactly 18 marks; 18 divides by 6, 3 and 2, so every row stays full at every breakpoint. The reference uses auto-fit + a gap-fill background, which leaves 3 empty cells in the last row painted in the line colour — a visible slab. The ring below is the technique three of these five pages already use to avoid exactly that. ─────────────*/ #page-custom-sweepstakes-software .csw-wall{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 28px 0 30px; background: transparent; border: 0; } #page-custom-sweepstakes-software .csw-wall li{ box-shadow: 0 0 0 1px var(--cs-line); /* ring, not a gap-fill: a short last row must never paint a slab */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 14px; margin: 0; border: 0; background: var(--cs-paper); text-align: center; transition: background-color .16s ease; } #page-custom-sweepstakes-software .csw-wall li:hover{ background: #f8f8fc; } #page-custom-sweepstakes-software .csw-wall img{ height: 42px; max-height: 42px; width: auto; object-fit: contain; margin: 0; } #page-custom-sweepstakes-software .csw-wall h3{ margin: 0; font-size: 16px; font-weight: 600; text-align: center; } @media (max-width: 1000px){ #page-custom-sweepstakes-software .csw-wall{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px){ #page-custom-sweepstakes-software .csw-wall{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }