/* ══════════════════════════════════════════════════════════════════════════ /online-sweepstakes-platform-provider — page-isolated stylesheet AISHTMLNEWDESIGN-573 (meta + JSON-LD from AISHTMLNEWDESIGN-187) Visual direction: "COMMISSIONING SHEET". WHY THIS ONE IS DIFFERENT, AND WHY THAT MATTERED HERE. This record shares 26 section titles verbatim with /sweepstakes-software- distributors, which shipped hours earlier — same CMS template, same scale (98 headings / 127 body images). Recolouring that page would have produced two neighbours in the same nav group that read as one page. So the ORGANISING UNIT changes, not just the palette: · DISPATCH BOARD (570) composes as a numbered manifest ROW — a slug in a left gutter, ruled top and bottom, read as a running list. · COMMISSIONING SHEET (this page) composes as a SIGNED-OFF SHEET — each item is a checked line with a tick glyph in a fixed column, grouped under sheet headers. The page reads as a handover document being ticked off, which is what "ready-to-deploy platform" actually is. Palette, chosen against the four built sweepstakes siblings so no two are confusable at a glance: · SWEEPS BUREAU gold on near-black (#f0b53c) · TOKEN WINDOW terracotta on brown (#f2926a) · MILLED EDGE amber on near-black (#e8b95c) · DISPATCH BOARD emerald on navy/paper (#6ee7b7 / #101a2e) · COMMISSIONING SHEET — PLUM ink (#241a2e) on warm paper (#f6f3f7) with a single ROSE signal (#be123c). No warm-gold, no emerald, no navy. Steel (#475569) appears ONLY as small sheet tags and index numerals, never as a surface or a button. Every rule is scoped to #page-online-sweepstakes-platform-provider, so this file can never touch the shared header/footer, owned by /assets/css/ais-*.css + /assets/js/ais-header.js / ais-footer.js. The UA body-margin reset is NOT restated here — /assets/css/ais-layout.css owns it (skill section 33). Design contract (docs/skills/frontend-design/SKILL.md): · rule 1 — Inter is the primary family · rule 2 — nothing below 16px, anywhere, including labels and captions · rule 23 — no slate-gray body copy on light surfaces (#4a4155 floor) · rule 24 — image-free full-bleed hero, static gradient, centred column · rule 25 — one CTA per section, every label unique page-wide. Six CTAs: Get a Custom Quote / Start Your Platform / Let's Talk / Book a Call / Build Sweepstakes Platform Fast / Get Instant Sweepstakes Platform Access / Get Started Today. The record's three "Read More" links and its "Learn More" are inline links, not buttons — duplicate or destination-free CTA labels are a WCAG 2.4.4 failure. The Try Our Demo buttons are app-store / demo destinations, not conversion CTAs, and carry no btn/cta class. · 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 selector, never via !important ══════════════════════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider{ --osp-ink: #241a2e; /* deep plum — band punctuation only */ --osp-ink-2: #30233d; /* raised plate on the dark bands */ --osp-ground: #f6f3f7; /* warm paper — the page's dominant ground */ --osp-paper: #ffffff; --osp-signal: #be123c; /* rose — the ONLY action hue */ --osp-signal-lit: #e11d48; --osp-rose-dark: #fda4af; /* the rose that is legible ON plum (7.6:1) */ --osp-steel: #475569; /* sheet tags + index numerals only */ --osp-text: #1f1728; --osp-text-2: #4a4155; /* 8.3:1 on warm paper — rule 23 floor */ --osp-on-dark: #ede8f2; --osp-on-dark-2: #bfb2cc; --osp-line: #ded6e4; --osp-line-dark: #3d3050; --osp-wrap: 1220px; --osp-tick: 40px; /* ONE source of truth for the tick column */ font-family: "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.65; color: var(--osp-text); background: var(--osp-ground); -webkit-font-smoothing: antialiased; } #page-online-sweepstakes-platform-provider *, #page-online-sweepstakes-platform-provider *::before, #page-online-sweepstakes-platform-provider *::after{ box-sizing: border-box; } #page-online-sweepstakes-platform-provider .ospp-wrap{ max-width: var(--osp-wrap); margin-inline: auto; padding-inline: 24px; } #page-online-sweepstakes-platform-provider > section{ padding-block: clamp(56px,6vw,92px); } #page-online-sweepstakes-platform-provider h1, #page-online-sweepstakes-platform-provider h2, #page-online-sweepstakes-platform-provider h3, #page-online-sweepstakes-platform-provider h4{ margin: 0 0 .5em; line-height: 1.16; letter-spacing: -.015em; font-weight: 800; color: var(--osp-text); } #page-online-sweepstakes-platform-provider h2{ font-size: clamp(28px,3.1vw,42px); } #page-online-sweepstakes-platform-provider h3{ font-size: clamp(19px,1.5vw,22px); font-weight: 700; } #page-online-sweepstakes-platform-provider h4{ font-size: clamp(22px,2vw,28px); } #page-online-sweepstakes-platform-provider p{ margin: 0 0 1.1em; font-size: 17px; color: var(--osp-text-2); } #page-online-sweepstakes-platform-provider p:last-child{ margin-bottom: 0; } #page-online-sweepstakes-platform-provider ul, #page-online-sweepstakes-platform-provider ol{ margin: 0; padding: 0; list-style: none; } #page-online-sweepstakes-platform-provider img{ max-width: 100%; height: auto; display: block; } /* one paragraph size page-wide; the lede reads through ink weight, not size */ #page-online-sweepstakes-platform-provider .ospp-lead{ font-size: 17px; color: var(--osp-text); line-height: 1.65; } /* section headers get a sheet rule + tag, the page's signature */ #page-online-sweepstakes-platform-provider section > .ospp-wrap > h2{ padding-bottom: 14px; margin-bottom: clamp(24px,3vw,38px); border-bottom: 2px solid var(--osp-line); } #page-online-sweepstakes-platform-provider a.ospp-inline{ color: var(--osp-signal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } #page-online-sweepstakes-platform-provider a.ospp-inline:hover, #page-online-sweepstakes-platform-provider a.ospp-inline:focus-visible{ color: var(--osp-signal-lit); } #page-online-sweepstakes-platform-provider a.ospp-inline--lit{ color: var(--osp-rose-dark); } #page-online-sweepstakes-platform-provider a.ospp-inline--lit:hover{ color: #fecdd3; } /* ── the one button ─────────────────────────────────────────────────────── */ #page-online-sweepstakes-platform-provider .ospp-btn{ display: inline-flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 32px; padding: 14px 30px; border: 0; border-radius: 2px; background: var(--osp-signal); color: #ffffff; font-family: inherit; font-size: 17px; font-weight: 700; text-align: left; cursor: pointer; transition: background-color .16s ease, transform .16s ease; } #page-online-sweepstakes-platform-provider .ospp-btn::after{ content: ""; flex: none; width: 18px; height: 2px; background: currentColor; transition: width .16s ease; } #page-online-sweepstakes-platform-provider .ospp-btn:hover{ background: var(--osp-signal-lit); } #page-online-sweepstakes-platform-provider .ospp-btn:hover::after{ width: 26px; } #page-online-sweepstakes-platform-provider .ospp-btn:active{ transform: translateY(1px); } #page-online-sweepstakes-platform-provider .ospp-btn:focus-visible{ outline: 3px solid var(--osp-signal-lit); outline-offset: 3px; } #page-online-sweepstakes-platform-provider .ospp-btn--lit{ background: #ffffff; color: var(--osp-ink); } #page-online-sweepstakes-platform-provider .ospp-btn--lit:hover{ background: #fee2e6; } /* ══ HERO ═══════════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-hero{ width: 100%; padding: clamp(72px,8vw,120px) 24px clamp(60px,7vw,96px); background: linear-gradient(180deg,#241a2e 0%,#38213c 60%,#2c1a33 100%); border-bottom: 2px solid var(--osp-signal); } #page-online-sweepstakes-platform-provider .ospp-hero__inner{ max-width: 900px; margin-inline: auto; text-align: center; } #page-online-sweepstakes-platform-provider p.ospp-eyebrow{ display: inline-block; margin: 0 0 22px; padding: 7px 16px; border: 1px solid #58405f; border-radius: 2px; background: #1d1426; color: var(--osp-rose-dark); /* rule 39A: tag-qualified */ font-size: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } #page-online-sweepstakes-platform-provider .ospp-hero h1{ margin: 0 0 22px; font-size: clamp(34px,4.6vw,58px); font-weight: 900; line-height: 1.07; color: #ffffff; } #page-online-sweepstakes-platform-provider p.ospp-hero__lede{ margin: 0 auto 34px; max-width: 800px; font-size: 17px; line-height: 1.7; color: var(--osp-on-dark); } #page-online-sweepstakes-platform-provider .ospp-hero .ospp-btn{ margin-top: 0; } #page-online-sweepstakes-platform-provider .ospp-hero__trust{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--osp-line-dark); } #page-online-sweepstakes-platform-provider .ospp-hero__trust li{ position: relative; padding-left: 22px; font-size: 16px; font-weight: 500; color: var(--osp-on-dark-2); } #page-online-sweepstakes-platform-provider .ospp-hero__trust li::before{ content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 2px; background: var(--osp-rose-dark); } /* ══ BREADCRUMB ═════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-crumb{ padding-block: 16px; background: var(--osp-paper); border-bottom: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-crumb ol{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #page-online-sweepstakes-platform-provider .ospp-crumb li{ font-size: 16px; color: var(--osp-text-2); } #page-online-sweepstakes-platform-provider .ospp-crumb li + li::before{ content: "/"; margin-right: 10px; color: var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-crumb a{ display: inline-flex; align-items: center; gap: 8px; color: var(--osp-signal); font-weight: 600; } #page-online-sweepstakes-platform-provider .ospp-crumb a:hover{ color: var(--osp-signal-lit); } #page-online-sweepstakes-platform-provider .ospp-crumb img{ width: 16px; height: 16px; } /* ══ BRIEF ══════════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-brief{ background: var(--osp-ground); } #page-online-sweepstakes-platform-provider .ospp-brief__grid{ display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(32px,5vw,64px); align-items: center; } #page-online-sweepstakes-platform-provider .ospp-brief__copy h2{ padding-bottom: 14px; margin-bottom: 22px; border-bottom: 2px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-brief__fig{ margin: 0; } #page-online-sweepstakes-platform-provider .ospp-brief__fig img{ width: 100%; border-radius: 3px; border: 1px solid var(--osp-line); background: var(--osp-paper); } /* ══ STATS ══════════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-stats{ background: var(--osp-ink); border-top: 2px solid var(--osp-signal); border-bottom: 2px solid var(--osp-signal); } #page-online-sweepstakes-platform-provider .ospp-stats > .ospp-wrap > h2{ color: #ffffff; border-bottom-color: var(--osp-line-dark); } #page-online-sweepstakes-platform-provider .ospp-stats__row{ display: grid; grid-template-columns: repeat(auto-fit,minmax(154px,1fr)); gap: 1px; background: var(--osp-line-dark); border: 1px solid var(--osp-line-dark); } #page-online-sweepstakes-platform-provider .ospp-stats__row li{ display: flex; flex-direction: column; gap: 6px; padding: 24px 20px; background: var(--osp-ink-2); } #page-online-sweepstakes-platform-provider .ospp-stats__n{ font-size: clamp(26px,2.4vw,34px); font-weight: 900; line-height: 1; color: var(--osp-rose-dark); font-variant-numeric: tabular-nums; } #page-online-sweepstakes-platform-provider .ospp-stats__l{ font-size: 16px; color: var(--osp-on-dark-2); } /* ══ THE SIGNATURE UNIT — a ticked, signed-off sheet line ═══════════════ */ #page-online-sweepstakes-platform-provider .ospp-check{ display: grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap: 0 44px; border-top: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-check li{ display: grid; grid-template-columns: var(--osp-tick) 1fr; gap: 4px 10px; padding: 20px 0; border-bottom: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-check li::before{ content: ""; grid-row: span 2; justify-self: start; margin-top: .45em; width: 17px; height: 9px; border-left: 2.5px solid var(--osp-signal); border-bottom: 2.5px solid var(--osp-signal); transform: rotate(-45deg); } #page-online-sweepstakes-platform-provider .ospp-check h3{ margin: 0; font-size: 18px; } #page-online-sweepstakes-platform-provider .ospp-check p{ margin: 0; grid-column: 2; } #page-online-sweepstakes-platform-provider .ospp-why{ background: var(--osp-paper); } /* numbered register — used by capabilities, services, roles */ #page-online-sweepstakes-platform-provider .ospp-reg{ counter-reset: osp-r; border-top: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-reg li{ counter-increment: osp-r; display: grid; grid-template-columns: 58px 1fr; gap: 4px 12px; padding: 20px 0; border-bottom: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-reg li::before{ content: counter(osp-r,decimal-leading-zero); grid-row: span 2; font-size: 16px; font-weight: 800; color: var(--osp-steel); font-variant-numeric: tabular-nums; } #page-online-sweepstakes-platform-provider .ospp-reg h3{ margin: 0; font-size: 18px; } #page-online-sweepstakes-platform-provider .ospp-reg p{ margin: 0; grid-column: 2; } #page-online-sweepstakes-platform-provider .ospp-reg--tight li{ padding: 16px 0; } #page-online-sweepstakes-platform-provider .ospp-caps{ background: var(--osp-ground); } #page-online-sweepstakes-platform-provider .ospp-serv{ background: var(--osp-paper); } /* ══ BANDS ══════════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-band, #page-online-sweepstakes-platform-provider .ospp-final{ background: var(--osp-ink); border-top: 2px solid var(--osp-signal); border-bottom: 2px solid var(--osp-signal); } #page-online-sweepstakes-platform-provider .ospp-band__inner, #page-online-sweepstakes-platform-provider .ospp-final__inner{ max-width: 900px; text-align: center; } #page-online-sweepstakes-platform-provider .ospp-band h2, #page-online-sweepstakes-platform-provider .ospp-final h2{ color: #ffffff; border: 0; padding-bottom: 0; margin-bottom: .5em; } #page-online-sweepstakes-platform-provider .ospp-band p, #page-online-sweepstakes-platform-provider .ospp-final p{ color: var(--osp-on-dark); } /* ══ GAMES + WALL ═══════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-games{ background: var(--osp-ground); } #page-online-sweepstakes-platform-provider .ospp-sub{ margin: 26px 0 14px; font-size: 19px; } #page-online-sweepstakes-platform-provider .ospp-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } #page-online-sweepstakes-platform-provider .ospp-chips li{ padding: 8px 15px; border: 1px solid var(--osp-line); border-radius: 2px; background: var(--osp-paper); color: var(--osp-text); font-size: 16px; font-weight: 600; } #page-online-sweepstakes-platform-provider .ospp-tiles{ display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 18px; margin-top: 26px; } #page-online-sweepstakes-platform-provider .ospp-tiles a{ display: block; padding: 16px; background: var(--osp-paper); border: 1px solid var(--osp-line); border-radius: 3px; transition: border-color .16s ease, box-shadow .16s ease; } #page-online-sweepstakes-platform-provider .ospp-tiles a:hover{ border-color: var(--osp-signal); box-shadow: 0 8px 22px rgba(36,26,46,.10); } #page-online-sweepstakes-platform-provider .ospp-tiles img{ width: 100%; border-radius: 2px; } #page-online-sweepstakes-platform-provider .ospp-tiles h3{ margin: 12px 0 0; font-size: 17px; } #page-online-sweepstakes-platform-provider .ospp-wall{ display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 1px; margin-top: 28px; background: var(--osp-line); border: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-wall li{ display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 14px; background: var(--osp-paper); transition: background-color .16s ease; } #page-online-sweepstakes-platform-provider .ospp-wall li:hover{ background: #fdf2f5; } #page-online-sweepstakes-platform-provider .ospp-wall img{ height: 42px; width: auto; object-fit: contain; } #page-online-sweepstakes-platform-provider .ospp-wall h3{ margin: 0; font-size: 16px; font-weight: 600; text-align: center; } /* ══ FOLIO ══════════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-folio{ background: var(--osp-paper); } #page-online-sweepstakes-platform-provider .ospp-folio__set{ display: grid; gap: 30px; } #page-online-sweepstakes-platform-provider .ospp-folio__grp h3{ margin: 0 0 14px; padding-bottom: 10px; display: inline-block; border-bottom: 2px solid var(--osp-signal); font-size: 18px; } #page-online-sweepstakes-platform-provider .ospp-folio__grp ul{ display: grid; grid-template-columns: repeat(auto-fit,minmax(128px,1fr)); gap: 14px; } #page-online-sweepstakes-platform-provider .ospp-folio__grp li{ display: grid; place-items: center; min-height: 78px; padding: 12px; background: var(--osp-ground); border: 1px solid var(--osp-line); border-radius: 2px; } #page-online-sweepstakes-platform-provider .ospp-folio__grp img{ max-height: 46px; width: auto; object-fit: contain; } /* ══ SCREENSHOTS ════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-shots{ background: var(--osp-ink); border-top: 2px solid var(--osp-signal); } #page-online-sweepstakes-platform-provider .ospp-shots > .ospp-wrap > h2{ color: #ffffff; border-bottom-color: var(--osp-line-dark); } #page-online-sweepstakes-platform-provider .ospp-shots__grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; align-items: start; } #page-online-sweepstakes-platform-provider .ospp-shots__grid li{ border: 1px solid var(--osp-line-dark); border-radius: 3px; overflow: hidden; background: var(--osp-ink-2); transition: border-color .16s ease; } #page-online-sweepstakes-platform-provider .ospp-shots__grid li:hover{ border-color: var(--osp-signal-lit); } #page-online-sweepstakes-platform-provider .ospp-shots__grid img{ width: 100%; } /* ══ VARIANTS ═══════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-variants{ background: var(--osp-paper); } #page-online-sweepstakes-platform-provider .ospp-variants__grid{ display: grid; grid-template-columns: repeat(auto-fit,minmax(132px,1fr)); gap: 16px; } #page-online-sweepstakes-platform-provider .ospp-variants__grid li{ display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px; background: var(--osp-ground); border: 1px solid var(--osp-line); border-radius: 3px; transition: border-color .16s ease; } #page-online-sweepstakes-platform-provider .ospp-variants__grid li:hover{ border-color: var(--osp-signal); } #page-online-sweepstakes-platform-provider .ospp-variants__grid img{ width: 74px; height: 74px; object-fit: contain; } #page-online-sweepstakes-platform-provider .ospp-variants__grid span{ font-size: 16px; font-weight: 600; text-align: center; color: var(--osp-text); } /* ══ SPEC PLATES ════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-fut{ background: var(--osp-ground); } #page-online-sweepstakes-platform-provider .ospp-explore{ background: var(--osp-ground); } #page-online-sweepstakes-platform-provider .ospp-fut__set, #page-online-sweepstakes-platform-provider .ospp-explore__set{ display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 1px; background: var(--osp-line); border: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-fut__set article, #page-online-sweepstakes-platform-provider .ospp-explore__set article{ padding: 28px 26px; background: var(--osp-paper); } #page-online-sweepstakes-platform-provider .ospp-fut__set ul, #page-online-sweepstakes-platform-provider .ospp-explore__set ul, #page-online-sweepstakes-platform-provider .ospp-multi__set ul{ margin-top: 12px; display: grid; gap: 7px; } #page-online-sweepstakes-platform-provider .ospp-fut__set li, #page-online-sweepstakes-platform-provider .ospp-explore__set li, #page-online-sweepstakes-platform-provider .ospp-multi__set li{ position: relative; padding-left: 22px; font-size: 16px; color: var(--osp-text-2); } #page-online-sweepstakes-platform-provider .ospp-fut__set li::before, #page-online-sweepstakes-platform-provider .ospp-explore__set li::before, #page-online-sweepstakes-platform-provider .ospp-multi__set li::before{ content: ""; position: absolute; left: 0; top: .42em; width: 12px; height: 6px; border-left: 2px solid var(--osp-signal); border-bottom: 2px solid var(--osp-signal); transform: rotate(-45deg); } /* ══ MULTI-PLATFORM ═════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-multi{ background: var(--osp-paper); } #page-online-sweepstakes-platform-provider .ospp-multi__set{ display: grid; grid-template-columns: repeat(auto-fit,minmax(310px,1fr)); gap: 22px; } #page-online-sweepstakes-platform-provider .ospp-multi__set article{ padding: 26px 24px; background: var(--osp-ground); border: 1px solid var(--osp-line); border-top: 2px solid var(--osp-signal); border-radius: 0 0 3px 3px; } #page-online-sweepstakes-platform-provider .ospp-multi__set img{ width: 46px; height: 46px; margin-bottom: 14px; } /* ══ OTHER SOLUTIONS ════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-other{ background: var(--osp-ground); } #page-online-sweepstakes-platform-provider .ospp-other__grid{ display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(30px,5vw,60px); align-items: center; } #page-online-sweepstakes-platform-provider .ospp-other__list{ display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 0 24px; border-top: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-other__list li{ border-bottom: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-other__list a{ display: block; padding: 13px 0 13px 20px; position: relative; font-size: 17px; font-weight: 600; color: var(--osp-text); transition: color .16s ease, padding-left .16s ease; } #page-online-sweepstakes-platform-provider .ospp-other__list a::before{ content: ""; position: absolute; left: 0; top: 1.25em; width: 12px; height: 6px; border-left: 2px solid var(--osp-signal); border-bottom: 2px solid var(--osp-signal); transform: rotate(-45deg); } #page-online-sweepstakes-platform-provider .ospp-other__list a:hover{ color: var(--osp-signal); padding-left: 26px; } #page-online-sweepstakes-platform-provider .ospp-other__fig{ margin: 0; } #page-online-sweepstakes-platform-provider .ospp-other__fig img{ width: 100%; border-radius: 3px; } /* ══ PROCESS ════════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-proc{ background: var(--osp-paper); } #page-online-sweepstakes-platform-provider .ospp-proc__set{ counter-reset: osp-s; display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 1px; background: var(--osp-line); border: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-proc__set > li{ counter-increment: osp-s; padding: 26px 24px; background: var(--osp-paper); } #page-online-sweepstakes-platform-provider .ospp-proc__set > li::before{ content: "Stage " counter(osp-s,decimal-leading-zero); display: block; margin-bottom: 10px; font-size: 16px; font-weight: 800; letter-spacing: .06em; color: var(--osp-steel); font-variant-numeric: tabular-nums; } #page-online-sweepstakes-platform-provider .ospp-proc__set ul{ margin-top: 12px; display: grid; gap: 7px; } #page-online-sweepstakes-platform-provider .ospp-proc__set ul li{ position: relative; padding-left: 22px; font-size: 16px; color: var(--osp-text-2); } #page-online-sweepstakes-platform-provider .ospp-proc__set ul li::before{ content: ""; position: absolute; left: 0; top: .42em; width: 12px; height: 6px; border-left: 2px solid var(--osp-signal); border-bottom: 2px solid var(--osp-signal); transform: rotate(-45deg); } /* ══ STACK ══════════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-stack{ background: var(--osp-ground); } #page-online-sweepstakes-platform-provider .ospp-stack__set{ margin: 0; border-top: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-stack__set > div{ display: grid; grid-template-columns: minmax(180px,260px) 1fr; gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-stack__set dt{ font-size: 17px; font-weight: 800; color: var(--osp-text); } #page-online-sweepstakes-platform-provider .ospp-stack__set dd{ margin: 0; font-size: 17px; color: var(--osp-text-2); } /* ══ CASES / MODELS ═════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-cases{ background: var(--osp-paper); } #page-online-sweepstakes-platform-provider .ospp-cases__set{ display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 22px; } #page-online-sweepstakes-platform-provider .ospp-cases__set li{ display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 26px 24px; background: var(--osp-ground); border: 1px solid var(--osp-line); border-left: 2px solid var(--osp-signal); border-radius: 0 3px 3px 0; } #page-online-sweepstakes-platform-provider .ospp-cases__set h3{ margin: 0; font-size: 18px; line-height: 1.4; } #page-online-sweepstakes-platform-provider .ospp-models{ background: var(--osp-ground); } #page-online-sweepstakes-platform-provider .ospp-models__set{ display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 22px; } #page-online-sweepstakes-platform-provider .ospp-models__set article{ padding: 28px 26px; background: var(--osp-paper); border: 1px solid var(--osp-line); border-radius: 3px; } #page-online-sweepstakes-platform-provider .ospp-models__set img{ width: 44px; height: 44px; margin-bottom: 14px; } /* ══ GLOBAL ═════════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-global{ background: var(--osp-ink); border-top: 2px solid var(--osp-signal); } #page-online-sweepstakes-platform-provider .ospp-global > .ospp-wrap > h2{ color: #ffffff; border-bottom-color: var(--osp-line-dark); } #page-online-sweepstakes-platform-provider .ospp-global__set{ display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; } #page-online-sweepstakes-platform-provider .ospp-global__set li{ display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--osp-ink-2); border: 1px solid var(--osp-line-dark); border-radius: 2px; } #page-online-sweepstakes-platform-provider .ospp-global__set img{ width: 30px; height: auto; flex: none; border-radius: 2px; } #page-online-sweepstakes-platform-provider .ospp-global__set span{ font-size: 16px; font-weight: 600; color: var(--osp-on-dark); } /* ══ HIRE / FAMILY ══════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-hire{ background: var(--osp-paper); } #page-online-sweepstakes-platform-provider .ospp-hire__grid{ display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(30px,5vw,58px); align-items: start; } #page-online-sweepstakes-platform-provider .ospp-hire__grid h2{ padding-bottom: 14px; margin-bottom: 24px; border-bottom: 2px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-hire__fig{ margin: 0; position: sticky; top: 24px; } #page-online-sweepstakes-platform-provider .ospp-hire__fig img{ width: 100%; border-radius: 3px; border: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-family{ background: var(--osp-ground); } #page-online-sweepstakes-platform-provider .ospp-family__set{ display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 1px; background: var(--osp-line); border: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-family__set li{ padding: 26px 24px; background: var(--osp-paper); } #page-online-sweepstakes-platform-provider .ospp-family__set h3{ margin-bottom: 10px; padding-bottom: 10px; display: inline-block; border-bottom: 2px solid var(--osp-signal); } #page-online-sweepstakes-platform-provider .ospp-family__set p{ margin: 0; } /* ══ DEMO ═══════════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-demo{ background: var(--osp-paper); } #page-online-sweepstakes-platform-provider .ospp-demo__set{ display: grid; grid-template-columns: repeat(auto-fit,minmax(272px,1fr)); gap: 22px; } #page-online-sweepstakes-platform-provider .ospp-demo__card{ display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; background: var(--osp-ground); border: 1px solid var(--osp-line); border-radius: 3px; } #page-online-sweepstakes-platform-provider .ospp-demo__card img{ width: 52px; height: 52px; } #page-online-sweepstakes-platform-provider .ospp-demo__card h3{ margin: 0; font-size: 19px; } #page-online-sweepstakes-platform-provider .ospp-demo__card dl{ margin: 0; flex: 1 1 auto; } #page-online-sweepstakes-platform-provider .ospp-demo__card dt{ font-size: 16px; font-weight: 600; color: var(--osp-text-2); } #page-online-sweepstakes-platform-provider .ospp-demo__card dd{ margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--osp-text); word-break: break-word; font-variant-numeric: tabular-nums; } #page-online-sweepstakes-platform-provider .ospp-demo__card dd:last-child{ margin-bottom: 0; } #page-online-sweepstakes-platform-provider a.ospp-demo__go{ display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 20px; border: 1.5px solid var(--osp-signal); border-radius: 2px; background: var(--osp-paper); color: var(--osp-signal); font-size: 16px; font-weight: 700; transition: background-color .16s ease, color .16s ease; } #page-online-sweepstakes-platform-provider a.ospp-demo__go:hover, #page-online-sweepstakes-platform-provider a.ospp-demo__go:focus-visible{ background: var(--osp-signal); color: #ffffff; } /* ══ TRUST / BLOG ═══════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-trust{ background: var(--osp-ground); } #page-online-sweepstakes-platform-provider .ospp-trust__col{ max-width: 960px; } #page-online-sweepstakes-platform-provider .ospp-trust__list{ counter-reset: osp-t; display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 10px 26px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-trust__list li{ counter-increment: osp-t; position: relative; padding-left: 34px; font-size: 17px; font-weight: 600; color: var(--osp-text); } #page-online-sweepstakes-platform-provider .ospp-trust__list li::before{ content: counter(osp-t,decimal-leading-zero); position: absolute; left: 0; top: 0; font-weight: 800; color: var(--osp-steel); font-variant-numeric: tabular-nums; } #page-online-sweepstakes-platform-provider .ospp-blog{ background: var(--osp-paper); } #page-online-sweepstakes-platform-provider .ospp-blog__set{ border-top: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-blog__set li{ border-bottom: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-blog__set a{ display: block; padding: 16px 0 16px 24px; position: relative; font-size: 17px; font-weight: 600; color: var(--osp-text); transition: color .16s ease, padding-left .16s ease; } #page-online-sweepstakes-platform-provider .ospp-blog__set a::before{ content: ""; position: absolute; left: 0; top: 1.5em; width: 13px; height: 7px; border-left: 2px solid var(--osp-signal); border-bottom: 2px solid var(--osp-signal); transform: rotate(-45deg); } #page-online-sweepstakes-platform-provider .ospp-blog__set a:hover{ color: var(--osp-signal); padding-left: 30px; } /* ══ FAQ — Q1./Ans. ledger, one shared gutter ═══════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-faq{ background: var(--osp-ground); --osp-faq-gutter: 68px; } #page-online-sweepstakes-platform-provider .ospp-faq__col{ max-width: 960px; } #page-online-sweepstakes-platform-provider #ospp-faqlist{ counter-reset: osp-faq; border-top: 1px solid var(--osp-line); } #page-online-sweepstakes-platform-provider #ospp-faqlist details{ counter-increment: osp-faq; border-bottom: 1px solid var(--osp-line); background: var(--osp-paper); } #page-online-sweepstakes-platform-provider #ospp-faqlist summary{ display: grid; grid-template-columns: var(--osp-faq-gutter) 1fr auto; align-items: start; gap: 0 12px; padding: 22px 24px; cursor: pointer; list-style: none; transition: background-color .16s ease; } #page-online-sweepstakes-platform-provider #ospp-faqlist summary::-webkit-details-marker{ display: none; } #page-online-sweepstakes-platform-provider #ospp-faqlist summary:hover{ background: #fdf2f5; } #page-online-sweepstakes-platform-provider #ospp-faqlist summary:focus-visible{ outline: 3px solid var(--osp-signal-lit); outline-offset: -3px; } #page-online-sweepstakes-platform-provider #ospp-faqlist summary::before{ content: "Q" counter(osp-faq) "."; font-size: 17px; font-weight: 800; line-height: 1.45; color: var(--osp-signal); font-variant-numeric: tabular-nums; } #page-online-sweepstakes-platform-provider #ospp-faqlist summary h3{ margin: 0; font-size: 18px; font-weight: 700; line-height: 1.45; } #page-online-sweepstakes-platform-provider #ospp-faqlist summary::after{ content: ""; width: 14px; height: 14px; margin-top: 6px; border-right: 2px solid var(--osp-signal); border-bottom: 2px solid var(--osp-signal); transform: rotate(45deg); transition: transform .18s ease; } #page-online-sweepstakes-platform-provider #ospp-faqlist details[open] summary::after{ transform: rotate(-135deg); margin-top: 11px; } #page-online-sweepstakes-platform-provider .ospp-faq__a{ display: grid; grid-template-columns: var(--osp-faq-gutter) 1fr; gap: 0 12px; padding: 0 24px 24px; } #page-online-sweepstakes-platform-provider .ospp-faq__a::before{ content: "Ans."; font-size: 17px; font-weight: 800; line-height: 1.65; color: var(--osp-text-2); } #page-online-sweepstakes-platform-provider .ospp-faq__a p{ margin: 0; } /* ══ STORIES / AREAS ════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-stories{ background: var(--osp-paper); } #page-online-sweepstakes-platform-provider .ospp-stories h4{ margin-bottom: clamp(24px,3vw,38px); padding-bottom: 14px; border-bottom: 2px solid var(--osp-line); } #page-online-sweepstakes-platform-provider .ospp-stories__set{ display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 26px; } #page-online-sweepstakes-platform-provider .ospp-stories__set li{ display: flex; flex-direction: column; gap: 18px; } #page-online-sweepstakes-platform-provider button.ospp-vid{ position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--osp-line); border-radius: 3px; overflow: hidden; background: var(--osp-ink); color: #ffffff; cursor: pointer; transition: border-color .16s ease; } #page-online-sweepstakes-platform-provider button.ospp-vid:hover{ border-color: var(--osp-signal); } #page-online-sweepstakes-platform-provider button.ospp-vid:focus-visible{ outline: 3px solid var(--osp-signal-lit); outline-offset: 3px; } #page-online-sweepstakes-platform-provider button.ospp-vid img{ width: 100%; } #page-online-sweepstakes-platform-provider .ospp-vid__play{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 62px; height: 62px; padding-left: 5px; border-radius: 50%; background: rgba(190,18,60,.94); color: #ffffff; transition: background-color .16s ease; } #page-online-sweepstakes-platform-provider button.ospp-vid:hover .ospp-vid__play{ background: var(--osp-signal-lit); } #page-online-sweepstakes-platform-provider .ospp-story__frame{ width: 100%; aspect-ratio: 16/10; border: 1px solid var(--osp-line); border-radius: 3px; } #page-online-sweepstakes-platform-provider .ospp-stories blockquote{ margin: 0; padding-left: 20px; border-left: 2px solid var(--osp-signal); } #page-online-sweepstakes-platform-provider .ospp-stories blockquote p{ margin: 0; font-size: 17px; } #page-online-sweepstakes-platform-provider .ospp-stories__more{ margin-top: 30px; } #page-online-sweepstakes-platform-provider .ospp-areas{ background: var(--osp-ink); border-top: 2px solid var(--osp-signal); } #page-online-sweepstakes-platform-provider .ospp-areas > .ospp-wrap > h2{ color: #ffffff; border-bottom-color: var(--osp-line-dark); } #page-online-sweepstakes-platform-provider .ospp-areas__set{ display: grid; grid-template-columns: repeat(auto-fit,minmax(256px,1fr)); gap: 24px; } #page-online-sweepstakes-platform-provider .ospp-areas__set li{ padding: 24px 22px; background: var(--osp-ink-2); border: 1px solid var(--osp-line-dark); border-top: 2px solid var(--osp-signal); border-radius: 0 0 3px 3px; } #page-online-sweepstakes-platform-provider .ospp-areas__set h3{ margin-bottom: 14px; font-size: 17px; font-weight: 800; letter-spacing: .08em; color: var(--osp-on-dark-2); } #page-online-sweepstakes-platform-provider p.ospp-areas__tel{ margin-bottom: 12px; } #page-online-sweepstakes-platform-provider .ospp-areas__tel a{ color: #ffffff; font-size: 18px; font-weight: 700; } #page-online-sweepstakes-platform-provider .ospp-areas__tel a:hover{ color: var(--osp-rose-dark); } #page-online-sweepstakes-platform-provider .ospp-areas address{ font-style: normal; font-size: 16px; line-height: 1.6; color: var(--osp-on-dark-2); } /* ══ RESPONSIVE ═════════════════════════════════════════════════════════ */ @media (max-width: 1024px){ #page-online-sweepstakes-platform-provider .ospp-brief__grid, #page-online-sweepstakes-platform-provider .ospp-other__grid, #page-online-sweepstakes-platform-provider .ospp-hire__grid{ grid-template-columns: 1fr; } #page-online-sweepstakes-platform-provider .ospp-hire__fig{ position: static; } } @media (max-width: 768px){ #page-online-sweepstakes-platform-provider > section{ padding-block: clamp(44px,9vw,64px); } #page-online-sweepstakes-platform-provider .ospp-wrap{ padding-inline: 18px; } #page-online-sweepstakes-platform-provider .ospp-shots__grid{ grid-template-columns: 1fr; } #page-online-sweepstakes-platform-provider .ospp-check{ grid-template-columns: 1fr; gap: 0; } #page-online-sweepstakes-platform-provider .ospp-stack__set > div{ grid-template-columns: 1fr; }} @media (max-width: 480px){ #page-online-sweepstakes-platform-provider{ --osp-tick: 30px; } #page-online-sweepstakes-platform-provider .ospp-faq{ --osp-faq-gutter: 54px; } #page-online-sweepstakes-platform-provider .ospp-hero{ padding-inline: 18px; } #page-online-sweepstakes-platform-provider .ospp-btn{ width: 100%; justify-content: center; } #page-online-sweepstakes-platform-provider .ospp-hero__trust{ justify-content: flex-start; text-align: left; } #page-online-sweepstakes-platform-provider .ospp-reg li{ grid-template-columns: 44px 1fr; } #page-online-sweepstakes-platform-provider #ospp-faqlist summary{ padding: 18px 16px; gap: 0 8px; } #page-online-sweepstakes-platform-provider .ospp-faq__a{ padding: 0 16px 20px; gap: 0 8px; } #page-online-sweepstakes-platform-provider .ospp-variants__grid{ grid-template-columns: repeat(auto-fit,minmax(112px,1fr)); }} /* Rule 26 — motion is only ever a finite response to hover/focus/click. */ @media (prefers-reduced-motion: reduce){ #page-online-sweepstakes-platform-provider *, #page-online-sweepstakes-platform-provider *::before, #page-online-sweepstakes-platform-provider *::after{ animation: none !important; transition-duration: 0.01ms !important; } } /* ══════════════════════════════════════════════════════════════════════════ "AIS Technolabs Brings To You The Best iGaming Solutions" — game mosaic Operator 2026-09-08: the marks looked uneven. Cause: the six images carry THREE aspect ratios (397x388 / 398x270 / 397x506) and were being forced into one fixed box, so portrait and landscape marks were scaled to the same dimensions and all six distorted. Rebuilt to the live reference (/online-sweepstakes-platform-provider): a 3-column MASONRY where every mark keeps its own ratio — column heights stagger instead of the images deforming — with the game name overlaid on the photo over a gradient scrim rather than captioned beneath it. `height:auto` is the actual fix; everything else is presentation. ══════════════════════════════════════════════════════════════════════════ */ #page-online-sweepstakes-platform-provider .ospp-tiles{ display: block; /* override any grid/flex from the base rules */ columns: 3; column-gap: 18px; margin-top: 26px; } #page-online-sweepstakes-platform-provider .ospp-tiles > li{ break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 18px; padding: 0; border: 0; background: none; } #page-online-sweepstakes-platform-provider .ospp-tiles > li > a{ position: relative; display: block; padding: 0; border-radius: 10px; overflow: hidden; background: #0d0d12; transition: transform .16s ease, box-shadow .16s ease; } #page-online-sweepstakes-platform-provider .ospp-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-online-sweepstakes-platform-provider .ospp-tiles > li > a:hover{ transform: translateY(-3px); box-shadow: 0 14px 34px rgba(8,8,12,.22); } #page-online-sweepstakes-platform-provider .ospp-tiles > li > a:focus-visible{ outline: 3px solid currentColor; outline-offset: 3px; } #page-online-sweepstakes-platform-provider .ospp-tiles img{ width: 100%; height: auto; /* ← keeps every mark on its own aspect ratio */ max-width: none; display: block; border-radius: 0; object-fit: unset; aspect-ratio: auto; } #page-online-sweepstakes-platform-provider .ospp-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; color: #ffffff; /* rule 39A: owns its foreground over the scrim */ text-shadow: 0 1px 12px rgba(0,0,0,.55); } @media (max-width: 900px){ #page-online-sweepstakes-platform-provider .ospp-tiles{ columns: 2; }} @media (max-width: 560px){ #page-online-sweepstakes-platform-provider .ospp-tiles{ columns: 1; }} /* ── FLUSH COLUMNS (operator: "still not even") ───────────────────────────── Measured the reference at 1440px: it assigns a height per POSITION, not per image, chosen so all three columns total 800px and end on the same line. Reproduced as per-position aspect-ratio so the columns stay flush at every width, with object-fit:cover so the marks crop instead of stretching (the reference uses `fill` and visibly deforms three of its six). ─────────────*/ #page-online-sweepstakes-platform-provider .ospp-tiles{ column-gap: 24px; } #page-online-sweepstakes-platform-provider .ospp-tiles > li{ margin-bottom: 24px; } #page-online-sweepstakes-platform-provider .ospp-tiles > li > a{ height: 100%; } #page-online-sweepstakes-platform-provider .ospp-tiles > li:nth-child(1){ aspect-ratio: 376 / 388; } #page-online-sweepstakes-platform-provider .ospp-tiles > li:nth-child(2){ aspect-ratio: 376 / 388; } #page-online-sweepstakes-platform-provider .ospp-tiles > li:nth-child(3){ aspect-ratio: 376 / 270; } #page-online-sweepstakes-platform-provider .ospp-tiles > li:nth-child(4){ aspect-ratio: 376 / 506; } #page-online-sweepstakes-platform-provider .ospp-tiles > li:nth-child(5){ aspect-ratio: 376 / 506; } #page-online-sweepstakes-platform-provider .ospp-tiles > li:nth-child(6){ aspect-ratio: 376 / 270; } #page-online-sweepstakes-platform-provider .ospp-tiles img{ width: 100%; height: 100%; object-fit: cover; /* crop to the cell, never distort */ object-position: center; } /* ── Portfolio group spacing ───────────────────────────────────────────────── Operator: the Portfolio sub-sections are too far apart here; match /sweepstakes-software-distributors. Measured both at 1440px. Everything already matched EXCEPT one thing: ssd (reference) ospp (this page) group padding 0px 86.4px top+bottom row-gap between groups 30px 30px heading -> logo grid 14px 14px section height 1201px 2075px Cause: the band rule above was `#page-SLUG section` -- an unscoped DESCENDANT selector -- and the five Portfolio groups are semantic
elements nested inside the Portfolio band, so each inherited the full band padding. /sweepstakes-software-distributors never showed it because its stylesheet already carries `.ssd-folio__grp{ padding: 0 }`; that reset was simply never carried across to this page. Fixed at the source by scoping the band rule to DIRECT children. All 29 top-level bands keep their padding; only the nested groups lose it. gap and heading spacing are deliberately LEFT ALONE -- they already equal the reference, and changing them would move this page away from it. */ #page-online-sweepstakes-platform-provider .ospp-folio__grp{ padding-block: 0; } /* ── 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-online-sweepstakes-platform-provider .ospp-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-online-sweepstakes-platform-provider .ospp-modal.is-open{display:flex;} #page-online-sweepstakes-platform-provider .ospp-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-online-sweepstakes-platform-provider .ospp-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-online-sweepstakes-platform-provider .ospp-modal__x:hover{background:#2b1c12;color:#fbf6ec;} #page-online-sweepstakes-platform-provider .ospp-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-online-sweepstakes-platform-provider .ospp-modal{padding: 100px 12px 12px 12px;} #page-online-sweepstakes-platform-provider .ospp-modal__box{max-width:none;border-radius:14px;} }