/* ══════════════════════════════════════════════════════════════════════════ /bespoke-sweepstakes-software-development — page-isolated stylesheet AISHTMLNEWDESIGN-575 (meta + JSON-LD from AISHTMLNEWDESIGN-189) Visual direction: "PATTERN CUTTER". The word on this page is BESPOKE. It does not sell a ready product and it does not sell a codebase — it sells something cut to your measurements. So the register is a tailor's pattern sheet, not a console or a ledger: · CUT LINE — the repeating rule is DASHED, the way a pattern piece is marked for cutting, and each block opens with a small notch rather than a solid bar. Nothing on this page is separated by the plain hairline its sibling pages use. · BONE PAPER — a warm bone ground (#f6f3ec) is the DOMINANT surface. Deep ink (#20242e) is punctuation for four bands only and is never the page's ground. · ONE SIGNAL — claret (#8a2b3b) is the only hue that carries an action. Ochre (#8a6a1f) appears ONLY as small measurement numerals, never as a surface and never as a button. Sibling avoidance — the sweepstakes pages already built are SWEEPS BUREAU (amber on near-black), TOKEN WINDOW (terracotta on brown), DISPATCH BOARD (cool paper + emerald, numbered left gutter), DEPLOY WINDOW (cool graphite + teal, solid hairlines and mono stage tags), MERIDIAN CONSOLE, CLEARING HOUSE and SIGNAL YARD. DEPLOY WINDOW (/sweepstakes-script) is the closest neighbour and shares this page's section skeleton almost exactly, so the separation here is deliberate on all three axes at once: WARM ground where that page is cool, CLARET signal where that page is teal, and DASHED cut lines with notches where that page uses solid rules and mono stage tags. VELVET ROPE is the other claret-adjacent direction, but that one is a dark oxblood-dominant page; this one is light and paper-dominant. Composition: no two sections repeat a layout. Asymmetric prose+plate, a seven-cell stat rail, notch-marked cut panels, 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, two spec plates, an icon+list channel set, a nine-piece numbered approach, a flag manifest, a stack table and a Q/Ans. FAQ ledger. No three-up icon-card grid anywhere. Everything is scoped to #page-bespoke-sweepstakes-software-development, 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 (#4a4438 floor) · rule 24 — image-free full-bleed hero, STATIC gradient, centred column · rule 25 — one CTA per section, every label unique page-wide. Seven: Request a Demo / Talk to Experts / Let's Talk / Book a Call / Build Bespoke Sweepstakes Software Development Fast / Get Instant Bespoke Sweepstakes Software Development Access / Get Started Today. The record's "Learn More" DOES carry an href on this page (/contact-us) and ships as an inline link, as do the three "Read More" links — duplicate or second buttons would be a rule 25 / WCAG 2.4.4 failure. · 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-bespoke-sweepstakes-software-development{ /* ── palette ─────────────────────────────────────────────────────────── */ --bs-ink: #20242e; /* deep ink — band punctuation only */ --bs-ink-2: #2a2f3b; /* raised plate on the dark bands */ --bs-ground: #f6f3ec; /* warm bone paper — the dominant ground */ --bs-paper: #fffdf9; --bs-signal: #8a2b3b; /* claret — the ONLY action hue */ --bs-signal-lit: #a8384a; --bs-ochre: #8a6a1f; /* measurement numerals only, never a surface */ --bs-text: #221f1a; --bs-text-2: #4a4438; /* 8.9:1 on bone — rule 23 floor */ --bs-on-dark: #efe9dd; --bs-on-dark-2: #b7ae9c; /* 8.2:1 on --bs-ink */ --bs-line: #ddd5c6; --bs-line-dark: #3a4050; --bs-wrap: 1220px; --bs-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(--bs-text); background: var(--bs-ground); -webkit-font-smoothing: antialiased; } #page-bespoke-sweepstakes-software-development *, #page-bespoke-sweepstakes-software-development *::before, #page-bespoke-sweepstakes-software-development *::after{ box-sizing: border-box; } #page-bespoke-sweepstakes-software-development img{ max-width: 100%; height: auto; } #page-bespoke-sweepstakes-software-development h1, #page-bespoke-sweepstakes-software-development h2, #page-bespoke-sweepstakes-software-development h3, #page-bespoke-sweepstakes-software-development h4{ margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.015em; color: var(--bs-text); } #page-bespoke-sweepstakes-software-development h2{ font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; } #page-bespoke-sweepstakes-software-development h3{ font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; } #page-bespoke-sweepstakes-software-development h4{ font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; } #page-bespoke-sweepstakes-software-development p{ margin: 0 0 1em; color: var(--bs-text-2); } #page-bespoke-sweepstakes-software-development ul, #page-bespoke-sweepstakes-software-development ol{ margin: 0; padding: 0; list-style: none; } #page-bespoke-sweepstakes-software-development .bss-wrap{ max-width: var(--bs-wrap); margin-inline: auto; padding-inline: 24px; } #page-bespoke-sweepstakes-software-development section{ padding-block: clamp(56px, 6vw, 92px); } #page-bespoke-sweepstakes-software-development .bss-lead{ font-size: clamp(17px, 1.4vw, 19px); color: var(--bs-text); } /* ── the one action control ──────────────────────────────────────────── */ #page-bespoke-sweepstakes-software-development .bss-btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 30px; border: 1px solid var(--bs-signal); border-radius: 2px; background: var(--bs-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-bespoke-sweepstakes-software-development .bss-btn:hover{ background: var(--bs-signal-lit); border-color: var(--bs-signal-lit); transform: translateY(-1px); } #page-bespoke-sweepstakes-software-development .bss-btn:focus-visible{ outline: 3px solid var(--bs-ochre); outline-offset: 3px; } #page-bespoke-sweepstakes-software-development .bss-btn:active{ transform: translateY(0); } #page-bespoke-sweepstakes-software-development .bss-hero .bss-btn--lit, #page-bespoke-sweepstakes-software-development .bss-band .bss-btn--lit, #page-bespoke-sweepstakes-software-development .bss-final .bss-btn--lit{ background: #f0e2d2; border-color: #f0e2d2; color: #4a1420; } #page-bespoke-sweepstakes-software-development .bss-hero .bss-btn--lit:hover, #page-bespoke-sweepstakes-software-development .bss-band .bss-btn--lit:hover, #page-bespoke-sweepstakes-software-development .bss-final .bss-btn--lit:hover{ background: #ffffff; border-color: #ffffff; } #page-bespoke-sweepstakes-software-development .bss-inline{ color: var(--bs-signal); font-weight: 600; border-bottom: 1px solid currentColor; } #page-bespoke-sweepstakes-software-development .bss-inline:hover{ color: var(--bs-signal-lit); } #page-bespoke-sweepstakes-software-development .bss-inline:focus-visible{ outline: 2px solid var(--bs-signal); outline-offset: 3px; } #page-bespoke-sweepstakes-software-development .bss-band p a.bss-inline--lit, #page-bespoke-sweepstakes-software-development .bss-final p a.bss-inline--lit{ color: #f2c9a0; } /* ══ HERO — rule 24: full-bleed, STATIC gradient, image-free, one CTA ══ */ #page-bespoke-sweepstakes-software-development .bss-hero{ width: 100%; padding: clamp(72px, 8vw, 124px) 24px clamp(64px, 7vw, 104px); background: linear-gradient(155deg, #1a1d26 0%, #20242e 42%, #4a1b26 100%); border-bottom: 3px solid var(--bs-signal); } #page-bespoke-sweepstakes-software-development .bss-hero__inner{ max-width: 900px; margin-inline: auto; text-align: center; } #page-bespoke-sweepstakes-software-development .bss-hero p.bss-hero__eyebrow{ margin: 0 0 18px; font-size: 16px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #e0a06a; /* 6.9:1 on the hero */ } #page-bespoke-sweepstakes-software-development .bss-hero h1{ font-size: clamp(34px, 4.6vw, 58px); font-weight: 900; line-height: 1.08; color: #ffffff; } #page-bespoke-sweepstakes-software-development .bss-hero p.bss-hero__lede{ margin: 22px auto 32px; max-width: 780px; font-size: clamp(17px, 1.5vw, 19px); color: var(--bs-on-dark); } #page-bespoke-sweepstakes-software-development .bss-hero__trust{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 34px; } #page-bespoke-sweepstakes-software-development .bss-hero__trust li{ position: relative; padding-left: 24px; font-size: 16px; color: var(--bs-on-dark-2); } /* the notch — the pattern-cutter's mark, used instead of a bullet or tick */ #page-bespoke-sweepstakes-software-development .bss-hero__trust li::before{ content: ""; position: absolute; left: 0; top: .58em; width: 11px; height: 11px; border-left: 2px solid #e0a06a; border-top: 2px solid #e0a06a; } /* ══ BREADCRUMB ══ */ #page-bespoke-sweepstakes-software-development .bss-crumb{ padding-block: 18px; background: var(--bs-paper); border-bottom: 1px dashed var(--bs-line); } #page-bespoke-sweepstakes-software-development .bss-crumb ol{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #page-bespoke-sweepstakes-software-development .bss-crumb li{ font-size: 16px; color: var(--bs-text-2); } #page-bespoke-sweepstakes-software-development .bss-crumb li + li::before{ content: "/"; margin-right: 10px; color: var(--bs-line); } #page-bespoke-sweepstakes-software-development .bss-crumb a{ display: inline-flex; align-items: center; gap: 8px; color: var(--bs-signal); font-weight: 600; } #page-bespoke-sweepstakes-software-development .bss-crumb a:hover{ color: var(--bs-signal-lit); } /* ══ INTRO — asymmetric prose + cut plate ══ */ #page-bespoke-sweepstakes-software-development .bss-intro{ background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-intro__grid{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 76px); align-items: center; } #page-bespoke-sweepstakes-software-development .bss-intro__fig{ margin: 0; } #page-bespoke-sweepstakes-software-development .bss-intro__fig img{ display: block; width: 100%; border: 1px dashed var(--bs-line); padding: 8px; background: var(--bs-ground); } /* ══ STATS — the measured rail, first dark band ══ */ #page-bespoke-sweepstakes-software-development .bss-stats{ background: var(--bs-ink); } #page-bespoke-sweepstakes-software-development .bss-stats h2{ color: #ffffff; max-width: 22ch; } #page-bespoke-sweepstakes-software-development .bss-stats__row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-top: 40px; background: var(--bs-ink); } #page-bespoke-sweepstakes-software-development .bss-stats__row li{ display: flex; flex-direction: column; gap: 6px; padding: 26px 20px; background: var(--bs-ink-2); box-shadow: 0 0 0 1px var(--bs-line-dark); } #page-bespoke-sweepstakes-software-development .bss-stats__n{ font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; color: #e8b07a; font-variant-numeric: tabular-nums; } #page-bespoke-sweepstakes-software-development .bss-stats__l{ font-size: 16px; color: var(--bs-on-dark-2); } /* ══ THE CUT PANEL — the repeating unit: dashed top rule + a notch + an ochre numeral. Used by why-choose, services and hire. ══ */ #page-bespoke-sweepstakes-software-development .bss-rows{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(28px, 3vw, 52px); margin-top: 44px; counter-reset: bss-row; } #page-bespoke-sweepstakes-software-development .bss-rows > li{ counter-increment: bss-row; position: relative; padding: 26px 0 24px 0; border-top: 1px dashed var(--bs-line); } #page-bespoke-sweepstakes-software-development .bss-rows > li::before{ content: counter(bss-row, decimal-leading-zero); display: block; margin-bottom: 10px; font-size: 16px; font-weight: 800; letter-spacing: .1em; color: var(--bs-ochre); font-variant-numeric: tabular-nums; } /* the notch sits ON the cut line, at its left end */ #page-bespoke-sweepstakes-software-development .bss-rows > li::after{ content: ""; position: absolute; left: 0; top: -1px; width: 26px; height: 3px; background: var(--bs-signal); } #page-bespoke-sweepstakes-software-development .bss-rows > li p{ margin: 0; } #page-bespoke-sweepstakes-software-development .bss-rows--tight > li{ padding: 20px 0 18px; } #page-bespoke-sweepstakes-software-development .bss-why{ background: var(--bs-ground); } #page-bespoke-sweepstakes-software-development .bss-serv{ background: var(--bs-paper); } /* ══ CONSULT BAND — second dark punctuation ══ */ #page-bespoke-sweepstakes-software-development .bss-band{ background: linear-gradient(100deg, #20242e 0%, #4a1b26 100%); } #page-bespoke-sweepstakes-software-development .bss-band__inner{ max-width: 900px; text-align: center; } #page-bespoke-sweepstakes-software-development .bss-band h2{ color: #ffffff; } #page-bespoke-sweepstakes-software-development .bss-band p{ color: var(--bs-on-dark); font-size: 18px; margin-bottom: 30px; } /* ══ GAME SOLUTIONS + PROVIDER WALL ══ */ #page-bespoke-sweepstakes-software-development .bss-games{ background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-games h3.bss-sub{ margin-top: 34px; font-size: 16px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bs-ochre); } #page-bespoke-sweepstakes-software-development .bss-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-bespoke-sweepstakes-software-development .bss-games ul.bss-chips li{ padding: 9px 16px; border: 1px dashed var(--bs-line); background: #f7ecec; color: #6d1f2c; font-size: 16px; font-weight: 600; } #page-bespoke-sweepstakes-software-development .bss-tiles{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; } #page-bespoke-sweepstakes-software-development .bss-tiles a{ display: block; height: 100%; padding: 18px; border: 1px solid var(--bs-line); background: var(--bs-paper); transition: border-color .16s ease, transform .16s ease; } #page-bespoke-sweepstakes-software-development .bss-tiles a:hover{ border-color: var(--bs-signal); transform: translateY(-2px); } #page-bespoke-sweepstakes-software-development .bss-tiles img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bs-ground); } #page-bespoke-sweepstakes-software-development .bss-tiles h3{ margin: 14px 0 0; font-size: 18px; } #page-bespoke-sweepstakes-software-development .bss-wall{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin-top: 34px; background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-wall li{ box-shadow: 0 0 0 1px var(--bs-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 12px; background: var(--bs-paper); text-align: center; } #page-bespoke-sweepstakes-software-development .bss-wall img{ max-height: 46px; width: auto; object-fit: contain; } #page-bespoke-sweepstakes-software-development .bss-wall h3{ margin: 0; font-size: 16px; font-weight: 600; color: var(--bs-text-2); } #page-bespoke-sweepstakes-software-development .bss-games > .bss-wrap > .bss-btn{ margin-top: 40px; } /* ══ PORTFOLIO ══ */ #page-bespoke-sweepstakes-software-development .bss-folio{ background: var(--bs-ground); } #page-bespoke-sweepstakes-software-development .bss-folio__set{ display: grid; gap: 34px; margin-top: 40px; } #page-bespoke-sweepstakes-software-development .bss-folio__grp{ border-top: 1px dashed var(--bs-line); padding-top: 24px; } #page-bespoke-sweepstakes-software-development .bss-folio__grp h3{ font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bs-ochre); } #page-bespoke-sweepstakes-software-development .bss-folio__grp ul{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; } #page-bespoke-sweepstakes-software-development .bss-folio__grp li{ display: flex; align-items: center; justify-content: center; min-width: 128px; min-height: 68px; padding: 10px 16px; background: var(--bs-paper); border: 1px solid var(--bs-line); } #page-bespoke-sweepstakes-software-development .bss-folio__grp img{ max-height: 42px; width: auto; object-fit: contain; } #page-bespoke-sweepstakes-software-development .bss-folio > .bss-wrap > .bss-btn{ margin-top: 40px; } /* ══ SCREENSHOTS ══ */ #page-bespoke-sweepstakes-software-development .bss-shots{ background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-shots__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 40px; } #page-bespoke-sweepstakes-software-development .bss-shots__grid img{ display: block; width: 100%; border: 1px dashed var(--bs-line); padding: 6px; background: var(--bs-ground); } /* ══ KEY CAPABILITIES — 18 ruled entries, two columns ══ */ #page-bespoke-sweepstakes-software-development .bss-caps{ background: var(--bs-ground); } #page-bespoke-sweepstakes-software-development .bss-caps__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 clamp(28px, 4vw, 64px); margin-top: 44px; } #page-bespoke-sweepstakes-software-development .bss-caps__set > li{ padding: 24px 0; border-bottom: 1px dashed var(--bs-line); } #page-bespoke-sweepstakes-software-development .bss-caps__set h3{ margin-bottom: 6px; } #page-bespoke-sweepstakes-software-development .bss-caps__set p{ margin: 0; } /* ══ VARIANTS ══ */ #page-bespoke-sweepstakes-software-development .bss-variants{ background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-variants__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 16px; margin-top: 40px; } #page-bespoke-sweepstakes-software-development .bss-variants__grid li{ display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px; border: 1px solid var(--bs-line); background: var(--bs-paper); text-align: center; transition: border-color .16s ease; } #page-bespoke-sweepstakes-software-development .bss-variants__grid li:hover{ border-color: var(--bs-signal); } #page-bespoke-sweepstakes-software-development .bss-variants__grid img{ width: 100%; max-width: 108px; } #page-bespoke-sweepstakes-software-development .bss-variants__grid span{ font-size: 16px; color: var(--bs-text-2); } #page-bespoke-sweepstakes-software-development .bss-variants > .bss-wrap > .bss-btn{ margin-top: 40px; } /* ══ SPEC PLATES — future-ready (2) + explore (6) ══ */ #page-bespoke-sweepstakes-software-development .bss-plat{ background: var(--bs-ground); } #page-bespoke-sweepstakes-software-development .bss-explore{ background: var(--bs-ground); } #page-bespoke-sweepstakes-software-development .bss-plat__set, #page-bespoke-sweepstakes-software-development .bss-explore__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 40px; } #page-bespoke-sweepstakes-software-development .bss-plat__set article, #page-bespoke-sweepstakes-software-development .bss-explore__set article{ padding: 26px 24px; background: var(--bs-paper); border: 1px solid var(--bs-line); border-top: 3px solid var(--bs-signal); } #page-bespoke-sweepstakes-software-development .bss-plat__set ul li, #page-bespoke-sweepstakes-software-development .bss-explore__set ul li{ position: relative; padding: 7px 0 7px 26px; font-size: 16px; color: var(--bs-text-2); border-top: 1px dashed var(--bs-line); } #page-bespoke-sweepstakes-software-development .bss-plat__set ul li:first-child, #page-bespoke-sweepstakes-software-development .bss-explore__set ul li:first-child{ border-top: 0; } #page-bespoke-sweepstakes-software-development .bss-explore__set ul li::before{ content: ""; position: absolute; left: 4px; top: 1.05em; width: 9px; height: 9px; border-left: 2px solid var(--bs-signal); border-top: 2px solid var(--bs-signal); } #page-bespoke-sweepstakes-software-development .bss-plat__set img.bss-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-bespoke-sweepstakes-software-development .bss-plat__set{ max-width: 900px; } /* ══ MULTI-PLATFORM ══ */ #page-bespoke-sweepstakes-software-development .bss-multi{ background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-multi__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1px; margin-top: 40px; background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-multi__set article{ padding: 28px 24px; background: var(--bs-paper); box-shadow: 0 0 0 1px var(--bs-line); } #page-bespoke-sweepstakes-software-development .bss-multi__set img{ width: 48px; height: auto; margin-bottom: 14px; } #page-bespoke-sweepstakes-software-development .bss-multi__set ul{ margin-top: 14px; } #page-bespoke-sweepstakes-software-development .bss-multi__set ul li{ padding: 6px 0 6px 22px; position: relative; font-size: 16px; color: var(--bs-text-2); } #page-bespoke-sweepstakes-software-development .bss-multi__set ul li::before{ content: ""; position: absolute; left: 0; top: .82em; width: 9px; height: 9px; border-left: 2px solid var(--bs-ochre); border-top: 2px solid var(--bs-ochre); } /* ══ OTHER SOLUTIONS ══ */ #page-bespoke-sweepstakes-software-development .bss-other{ background: var(--bs-ground); } #page-bespoke-sweepstakes-software-development .bss-other__grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 70px); align-items: center; } #page-bespoke-sweepstakes-software-development .bss-other__list{ margin: 30px 0 34px; } #page-bespoke-sweepstakes-software-development .bss-other__list li{ display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--bs-line); } #page-bespoke-sweepstakes-software-development .bss-other__list img.bss-tick{ margin-top: .35em; width: 14px; height: auto; flex: 0 0 auto; } #page-bespoke-sweepstakes-software-development .bss-other__list a{ font-size: 16px; font-weight: 600; color: var(--bs-text); } #page-bespoke-sweepstakes-software-development .bss-other__list a:hover{ color: var(--bs-signal); } #page-bespoke-sweepstakes-software-development .bss-other__fig{ margin: 0; } #page-bespoke-sweepstakes-software-development .bss-other__fig img{ display: block; width: 100%; } /* ══ APPROACH — nine numbered pattern pieces ══ */ #page-bespoke-sweepstakes-software-development .bss-proc{ background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-proc__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px clamp(24px, 3vw, 44px); margin-top: 44px; counter-reset: bss-piece; } #page-bespoke-sweepstakes-software-development .bss-proc__set > li{ counter-increment: bss-piece; padding: 22px 0 4px; border-top: 1px dashed var(--bs-line); position: relative; } #page-bespoke-sweepstakes-software-development .bss-proc__set > li::before{ content: "PIECE " counter(bss-piece, decimal-leading-zero); position: absolute; top: -10px; left: 0; padding: 2px 10px; background: var(--bs-ink); color: #f0c48a; /* 8.1:1 on ink */ font-size: 16px; font-weight: 700; letter-spacing: .1em; } #page-bespoke-sweepstakes-software-development .bss-proc__set h3{ margin: 14px 0 10px; } #page-bespoke-sweepstakes-software-development .bss-proc__set ul li{ padding: 5px 0 5px 20px; position: relative; font-size: 16px; color: var(--bs-text-2); } #page-bespoke-sweepstakes-software-development .bss-proc__set ul li::before{ content: ""; position: absolute; left: 0; top: .82em; width: 9px; height: 9px; border-left: 2px solid var(--bs-signal); border-top: 2px solid var(--bs-signal); } /* ══ TECHNOLOGY STACK ══ */ #page-bespoke-sweepstakes-software-development .bss-stack{ background: var(--bs-ground); } #page-bespoke-sweepstakes-software-development .bss-stack__set{ margin-top: 36px; border: 1px solid var(--bs-line); background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-stack__set > div{ display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 20px; padding: 20px 24px; border-bottom: 1px dashed var(--bs-line); } #page-bespoke-sweepstakes-software-development .bss-stack__set > div:last-child{ border-bottom: 0; } #page-bespoke-sweepstakes-software-development .bss-stack__set dt{ font-size: 16px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-ochre); } #page-bespoke-sweepstakes-software-development .bss-stack__set dd{ margin: 0; font-size: 17px; color: var(--bs-text); } /* ══ CASE STUDIES ══ */ #page-bespoke-sweepstakes-software-development .bss-cases{ background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-cases__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin-top: 40px; } #page-bespoke-sweepstakes-software-development .bss-cases__set li{ display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 26px 24px; border: 1px solid var(--bs-line); border-left: 3px solid var(--bs-ochre); background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-cases__set h3{ margin: 0; font-size: 18px; line-height: 1.45; } #page-bespoke-sweepstakes-software-development .bss-cases__set p{ margin: 0; } /* ══ ENGAGEMENT MODELS ══ */ #page-bespoke-sweepstakes-software-development .bss-models{ background: var(--bs-ground); } #page-bespoke-sweepstakes-software-development .bss-models__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin-top: 40px; } #page-bespoke-sweepstakes-software-development .bss-models__set article{ padding: 28px 26px; background: var(--bs-paper); border: 1px solid var(--bs-line); } #page-bespoke-sweepstakes-software-development .bss-models__set img{ width: 48px; height: auto; margin-bottom: 16px; } #page-bespoke-sweepstakes-software-development .bss-models__set p{ margin: 0; } /* ══ GLOBAL ══ */ #page-bespoke-sweepstakes-software-development .bss-global{ background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-global__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 40px; } #page-bespoke-sweepstakes-software-development .bss-global__set li{ display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px dashed var(--bs-line); } #page-bespoke-sweepstakes-software-development .bss-global__set img{ width: 34px; height: auto; } #page-bespoke-sweepstakes-software-development .bss-global__set span{ font-size: 16px; color: var(--bs-text); } /* ══ HIRE ══ */ #page-bespoke-sweepstakes-software-development .bss-hire{ background: var(--bs-ground); } #page-bespoke-sweepstakes-software-development .bss-hire__grid{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 70px); align-items: start; } #page-bespoke-sweepstakes-software-development .bss-hire__grid > div > .bss-rows{ grid-template-columns: 1fr; } #page-bespoke-sweepstakes-software-development .bss-hire__fig{ margin: 0; position: sticky; top: 24px; } #page-bespoke-sweepstakes-software-development .bss-hire__fig img{ display: block; width: 100%; border: 1px dashed var(--bs-line); padding: 8px; background: var(--bs-paper); } /* ══ PRODUCT FAMILY ══ */ #page-bespoke-sweepstakes-software-development .bss-family{ background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-family__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; margin-top: 40px; background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-family__set li{ padding: 26px 24px; background: var(--bs-paper); box-shadow: 0 0 0 1px var(--bs-line); } #page-bespoke-sweepstakes-software-development .bss-family__set h3{ color: var(--bs-signal); } #page-bespoke-sweepstakes-software-development .bss-family__set p{ margin: 0; } /* ══ FINAL CTA — fourth dark punctuation ══ */ #page-bespoke-sweepstakes-software-development .bss-final{ background: linear-gradient(120deg, #1a1d26 0%, #20242e 48%, #4a1b26 100%); } #page-bespoke-sweepstakes-software-development .bss-final__inner{ max-width: 900px; text-align: center; } #page-bespoke-sweepstakes-software-development .bss-final h2{ color: #ffffff; } #page-bespoke-sweepstakes-software-development .bss-final p{ color: var(--bs-on-dark); font-size: 18px; margin-bottom: 30px; } /* ══ DEMO — one action per repeated card (rule 25 card exception) ══ */ #page-bespoke-sweepstakes-software-development .bss-demo{ background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-demo__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 40px; } #page-bespoke-sweepstakes-software-development .bss-demo__card{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 26px; border: 1px solid var(--bs-line); background: var(--bs-ground); } #page-bespoke-sweepstakes-software-development .bss-demo__card img{ width: 48px; height: auto; } #page-bespoke-sweepstakes-software-development .bss-demo__card h3{ margin: 0; } #page-bespoke-sweepstakes-software-development .bss-demo__card dl{ display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; width: 100%; } #page-bespoke-sweepstakes-software-development .bss-demo__card dt{ font-size: 16px; color: var(--bs-text-2); } #page-bespoke-sweepstakes-software-development .bss-demo__card dd{ margin: 0; font-size: 16px; color: var(--bs-text); word-break: break-all; } #page-bespoke-sweepstakes-software-development .bss-demo__go{ margin-top: 6px; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border: 1px solid var(--bs-signal); color: var(--bs-signal); font-size: 16px; font-weight: 700; } #page-bespoke-sweepstakes-software-development .bss-demo__go:hover{ background: var(--bs-signal); color: #ffffff; } #page-bespoke-sweepstakes-software-development .bss-demo__go:focus-visible{ outline: 3px solid var(--bs-ochre); outline-offset: 3px; } /* ══ TRUST ══ */ #page-bespoke-sweepstakes-software-development .bss-trust{ background: var(--bs-ground); } #page-bespoke-sweepstakes-software-development .bss-trust__col{ max-width: 900px; } #page-bespoke-sweepstakes-software-development .bss-trust__list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; margin-top: 30px; background: var(--bs-ground); counter-reset: bss-trust; } #page-bespoke-sweepstakes-software-development .bss-trust__list li{ counter-increment: bss-trust; padding: 20px 22px; background: var(--bs-paper); box-shadow: 0 0 0 1px var(--bs-line); font-size: 16px; font-weight: 600; } #page-bespoke-sweepstakes-software-development .bss-trust__list li::before{ content: counter(bss-trust) "."; margin-right: 8px; color: var(--bs-ochre); font-weight: 800; } /* ══ BLOG MANIFEST ══ */ #page-bespoke-sweepstakes-software-development .bss-blog{ background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-blog__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 clamp(28px, 4vw, 60px); margin-top: 36px; } #page-bespoke-sweepstakes-software-development .bss-blog__set li{ border-bottom: 1px dashed var(--bs-line); } #page-bespoke-sweepstakes-software-development .bss-blog__set a{ display: block; padding: 16px 0; font-size: 17px; font-weight: 600; color: var(--bs-text); } #page-bespoke-sweepstakes-software-development .bss-blog__set a:hover{ color: var(--bs-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-bespoke-sweepstakes-software-development .bss-faq{ background: var(--bs-ground); } #page-bespoke-sweepstakes-software-development .bss-faq__col{ max-width: 900px; } #page-bespoke-sweepstakes-software-development #bss-faqlist{ counter-reset: bss-faq; margin-top: 34px; border-top: 1px dashed var(--bs-line); } #page-bespoke-sweepstakes-software-development #bss-faqlist details{ counter-increment: bss-faq; border-bottom: 1px dashed var(--bs-line); background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development #bss-faqlist summary{ display: grid; grid-template-columns: var(--bs-faq-gutter) 1fr auto; align-items: start; gap: 0 12px; padding: 22px 24px; cursor: pointer; list-style: none; transition: background-color .16s ease; } #page-bespoke-sweepstakes-software-development #bss-faqlist summary::-webkit-details-marker{ display: none; } #page-bespoke-sweepstakes-software-development #bss-faqlist summary:hover{ background: #f7ecec; } #page-bespoke-sweepstakes-software-development #bss-faqlist summary::before{ content: "Q" counter(bss-faq) "."; font-size: 17px; font-weight: 800; line-height: 1.5; color: var(--bs-signal); font-variant-numeric: tabular-nums; } #page-bespoke-sweepstakes-software-development #bss-faqlist summary h3{ margin: 0; font-size: 18px; line-height: 1.5; } #page-bespoke-sweepstakes-software-development #bss-faqlist summary::after{ content: ""; width: 14px; height: 14px; margin-top: 6px; border-right: 2px solid var(--bs-signal); border-bottom: 2px solid var(--bs-signal); transform: rotate(45deg); transition: transform .18s ease; } #page-bespoke-sweepstakes-software-development #bss-faqlist details[open] summary::after{ transform: rotate(-135deg); margin-top: 11px; } #page-bespoke-sweepstakes-software-development #bss-faqlist summary:focus-visible{ outline: 3px solid var(--bs-signal); outline-offset: -3px; } #page-bespoke-sweepstakes-software-development .bss-faq__a{ display: grid; grid-template-columns: var(--bs-faq-gutter) 1fr; gap: 0 12px; padding: 0 24px 24px; } #page-bespoke-sweepstakes-software-development .bss-faq__a::before{ content: "Ans."; font-size: 17px; font-weight: 800; line-height: 1.65; color: var(--bs-ochre); } #page-bespoke-sweepstakes-software-development .bss-faq__a p{ margin: 0; font-size: 17px; } /* ══ STORIES — facades; the iframe only exists after a click ══ */ #page-bespoke-sweepstakes-software-development .bss-stories{ background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-stories h4{ margin-bottom: 30px; } #page-bespoke-sweepstakes-software-development .bss-stories__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; } #page-bespoke-sweepstakes-software-development .bss-stories__set li{ border: 1px solid var(--bs-line); background: var(--bs-paper); } #page-bespoke-sweepstakes-software-development .bss-vid{ font: inherit; position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--bs-ink); cursor: pointer; } #page-bespoke-sweepstakes-software-development .bss-vid img{ display: block; width: 100%; } #page-bespoke-sweepstakes-software-development .bss-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(138, 43, 59, .94); color: #ffffff; transition: background-color .16s ease, transform .16s ease; } #page-bespoke-sweepstakes-software-development .bss-vid:hover .bss-vid__play{ background: var(--bs-signal-lit); transform: scale(1.06); } #page-bespoke-sweepstakes-software-development .bss-vid:focus-visible{ outline: 3px solid var(--bs-signal); outline-offset: -3px; } #page-bespoke-sweepstakes-software-development .bss-story__frame{ display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; } #page-bespoke-sweepstakes-software-development .bss-stories__set blockquote{ margin: 0; padding: 20px 22px; } #page-bespoke-sweepstakes-software-development .bss-stories__set blockquote p{ margin: 0; font-size: 16px; } #page-bespoke-sweepstakes-software-development .bss-stories__more{ margin: 28px 0 0; } /* ══ AREA WE SERVE — third dark punctuation ══ */ #page-bespoke-sweepstakes-software-development .bss-areas{ background: var(--bs-ink); } #page-bespoke-sweepstakes-software-development .bss-areas h2{ color: #ffffff; } #page-bespoke-sweepstakes-software-development .bss-areas__set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; margin-top: 40px; background: var(--bs-ink); } #page-bespoke-sweepstakes-software-development .bss-areas__set li{ padding: 26px 24px; background: var(--bs-ink-2); box-shadow: 0 0 0 1px var(--bs-line-dark); } #page-bespoke-sweepstakes-software-development .bss-areas__set h3{ font-size: 16px; font-weight: 800; letter-spacing: .14em; color: #f0c48a; } #page-bespoke-sweepstakes-software-development .bss-areas__set p.bss-areas__tel{ margin: 12px 0 10px; } #page-bespoke-sweepstakes-software-development .bss-areas__set p.bss-areas__tel a{ color: #e8b07a; font-size: 17px; font-weight: 700; } #page-bespoke-sweepstakes-software-development .bss-areas__set p.bss-areas__tel a:hover{ color: #ffd9ae; } #page-bespoke-sweepstakes-software-development .bss-areas__set address{ font-style: normal; font-size: 16px; line-height: 1.6; color: var(--bs-on-dark-2); } /* ══ RESPONSIVE ══ */ @media (max-width: 1020px){ #page-bespoke-sweepstakes-software-development .bss-intro__grid, #page-bespoke-sweepstakes-software-development .bss-other__grid, #page-bespoke-sweepstakes-software-development .bss-hire__grid{ grid-template-columns: 1fr; } #page-bespoke-sweepstakes-software-development .bss-hire__fig{ position: static; max-width: 460px; } } @media (max-width: 720px){ #page-bespoke-sweepstakes-software-development section{ padding-block: 48px; } #page-bespoke-sweepstakes-software-development .bss-hero{ padding-block: 64px 56px; } #page-bespoke-sweepstakes-software-development .bss-hero__inner{ text-align: left; } #page-bespoke-sweepstakes-software-development .bss-hero__trust{ flex-direction: column; align-items: flex-start; gap: 10px; } #page-bespoke-sweepstakes-software-development .bss-btn{ width: 100%; } /* 3 tile tracks on a 375px screen leaves ~105px per tile — two below 720px */ #page-bespoke-sweepstakes-software-development .bss-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } #page-bespoke-sweepstakes-software-development .bss-stack__set > div{ grid-template-columns: 1fr; gap: 6px; } /* narrower Q/Ans. gutter; both markers still read the SAME variable */ #page-bespoke-sweepstakes-software-development .bss-faq{ --bs-faq-gutter: 44px; } #page-bespoke-sweepstakes-software-development #bss-faqlist summary{ padding: 20px 16px; gap: 0 8px; } #page-bespoke-sweepstakes-software-development .bss-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-bespoke-sweepstakes-software-development *, #page-bespoke-sweepstakes-software-development *::before, #page-bespoke-sweepstakes-software-development *::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-bespoke-sweepstakes-software-development .bss-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-bespoke-sweepstakes-software-development .bss-modal.is-open{display:flex;} #page-bespoke-sweepstakes-software-development .bss-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-bespoke-sweepstakes-software-development .bss-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-bespoke-sweepstakes-software-development .bss-modal__x:hover{background:#2b1c12;color:#fbf6ec;} #page-bespoke-sweepstakes-software-development .bss-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-bespoke-sweepstakes-software-development .bss-modal{padding: 100px 12px 12px 12px;} #page-bespoke-sweepstakes-software-development .bss-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-bespoke-sweepstakes-software-development .bss-tiles{ display: block; /* override the base grid/flex */ columns: 3; column-gap: 24px; margin: 26px 0 30px; grid-template-columns: none; gap: normal; } #page-bespoke-sweepstakes-software-development .bss-tiles > li{ break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 24px; padding: 0; border: 0; background: none; } #page-bespoke-sweepstakes-software-development .bss-tiles > li:nth-child(1){ aspect-ratio: 376 / 388; } #page-bespoke-sweepstakes-software-development .bss-tiles > li:nth-child(2){ aspect-ratio: 376 / 388; } #page-bespoke-sweepstakes-software-development .bss-tiles > li:nth-child(3){ aspect-ratio: 376 / 270; } #page-bespoke-sweepstakes-software-development .bss-tiles > li:nth-child(4){ aspect-ratio: 376 / 506; } #page-bespoke-sweepstakes-software-development .bss-tiles > li:nth-child(5){ aspect-ratio: 376 / 506; } #page-bespoke-sweepstakes-software-development .bss-tiles > li:nth-child(6){ aspect-ratio: 376 / 270; } #page-bespoke-sweepstakes-software-development .bss-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-bespoke-sweepstakes-software-development .bss-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-bespoke-sweepstakes-software-development .bss-tiles > li > a:hover{ transform: translateY(-3px); box-shadow: 0 14px 34px rgba(8,8,12,.22); } #page-bespoke-sweepstakes-software-development .bss-tiles > li > a:focus-visible{ outline: 3px solid currentColor; outline-offset: 3px; } #page-bespoke-sweepstakes-software-development .bss-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-bespoke-sweepstakes-software-development .bss-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-bespoke-sweepstakes-software-development .bss-tiles{ columns: 2; } } @media (max-width: 560px){ #page-bespoke-sweepstakes-software-development .bss-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-bespoke-sweepstakes-software-development .bss-wall{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 28px 0 30px; background: transparent; border: 0; } #page-bespoke-sweepstakes-software-development .bss-wall li{ box-shadow: 0 0 0 1px var(--bs-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(--bs-paper); text-align: center; transition: background-color .16s ease; } #page-bespoke-sweepstakes-software-development .bss-wall li:hover{ background: #f8f8fc; } #page-bespoke-sweepstakes-software-development .bss-wall img{ height: 42px; max-height: 42px; width: auto; object-fit: contain; margin: 0; } #page-bespoke-sweepstakes-software-development .bss-wall h3{ margin: 0; font-size: 16px; font-weight: 600; text-align: center; } @media (max-width: 1000px){ #page-bespoke-sweepstakes-software-development .bss-wall{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px){ #page-bespoke-sweepstakes-software-development .bss-wall{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }