/* /roulette-software-canada — AISHTMLNEWDESIGN-389
Page-owned styles. EVERY selector is scoped to #page-roulette-software-canada or a
rsc- prefixed class: this sheet must never style body, a bare
element, #ais-header or #ais-footer. The document reset
(html,body{margin:0}) is owned by the shared layout sheet.
Font is Inter; no body/UI text below 16px.
VISUAL DIRECTION — THE FRET LINE
The frets of a roulette wheel are the thin metal dividers between the numbered
pockets. This page is composed from those hairlines rather than from cards: two
grounds (bone paper / wheel-bowl charcoal) separated by 1px rules, section content
split by vertical fret lines, and pocket-diamond indices in maple red and ink.
No drop shadows, no rounded card walls, no casino neon. */
/* Scoped box reset. page.css may not style bare elements outside its own scope and
the shared chrome sheets namespace their own reset, so this page owns it — without
it, width:100% plus section side padding overflows the viewport horizontally. */
#page-roulette-software-canada,
#page-roulette-software-canada *,
#page-roulette-software-canada *::before,
#page-roulette-software-canada *::after { box-sizing: border-box; }
#page-roulette-software-canada {
/* grounds */
--rsc-bowl: #12161b; /* wheel-bowl charcoal */
--rsc-bowl-2: #1b2530; /* cooler charcoal, hero gradient end */
--rsc-paper: #f6f4ef; /* bone */
--rsc-white: #ffffff;
/* ink */
--rsc-ink: #12161b; /* headings on paper — 15.9:1 on #f6f4ef */
--rsc-body: #2b333c; /* body on paper — 11.4:1 on #f6f4ef */
--rsc-body-lt: #d6dce3; /* body on bowl — 12.6:1 on #12161b */
--rsc-mute-lt: #9aa7b4; /* captions on bowl only — 6.4:1 on #12161b */
/* accent */
--rsc-red: #b4232d; /* maple / pocket red — 6.5:1 with white text */
--rsc-red-dk: #8d1a22;
--rsc-red-lt: #ef6f76; /* red on the bowl ground — 5.4:1 on #12161b */
/* frets */
--rsc-fret: #ddd7cb; /* hairline on paper */
--rsc-fret-dk: #2c3742; /* hairline on bowl */
font-family: "Inter", system-ui, sans-serif;
font-size: 16px;
line-height: 1.65;
color: var(--rsc-body);
background: var(--rsc-paper);
overflow-x: clip;
}
#page-roulette-software-canada p { margin: 0 0 18px; font-size: 17px; }
#page-roulette-software-canada p:last-child { margin-bottom: 0; }
#page-roulette-software-canada ul,
#page-roulette-software-canada ol { margin: 0; padding: 0; list-style: none; }
#page-roulette-software-canada img { max-width: 100%; height: auto; display: block; }
#page-roulette-software-canada address { font-style: normal; }
/* ---------- layout shells ---------- */
.rsc-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 24px; }
.rsc-wrap--narrow { max-width: 860px; }
.rsc-sec { padding: clamp(56px, 7vw, 104px) 0; }
.rsc-sec--tight { padding-bottom: clamp(48px, 5vw, 72px); }
.rsc-sec--paper { background: var(--rsc-paper); color: var(--rsc-body); border-top: 1px solid var(--rsc-fret); }
.rsc-sec--bowl { background: var(--rsc-bowl); color: var(--rsc-body-lt); }
.rsc-sec--bowl p { color: var(--rsc-body-lt); }
/* ---------- type ---------- */
.rsc-h2 {
margin: 0;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.14;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--rsc-ink);
}
.rsc-h2--light { color: var(--rsc-white); }
.rsc-h3 {
margin: 0 0 12px;
font-size: clamp(19px, 1.5vw, 23px);
line-height: 1.3;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--rsc-ink);
}
.rsc-h3--lead { margin: 26px 0 18px; }
.rsc-eyebrow {
margin: 0 0 12px;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rsc-red);
}
.rsc-eyebrow--light { color: var(--rsc-red-lt); }
/* The fret: a section head sits above one short hairline. */
.rsc-head { max-width: 900px; margin-bottom: clamp(32px, 4vw, 52px); }
.rsc-head::after {
content: ""; display: block; width: 64px; height: 2px;
margin-top: 20px; background: var(--rsc-red);
}
.rsc-head--light::after { background: var(--rsc-red-lt); }
.rsc-lede {
max-width: 900px;
font-size: clamp(17px, 1.3vw, 19px);
color: var(--rsc-body);
margin-bottom: clamp(32px, 4vw, 48px);
}
.rsc-sec--bowl .rsc-lede { color: var(--rsc-body-lt); }
/* ---------- links ---------- */
.rsc-link { color: inherit; }
.rsc-link--red { color: var(--rsc-red); font-weight: 600; border-bottom: 1px solid rgba(180,35,45,.4); }
.rsc-link--red:hover { border-bottom-color: var(--rsc-red); }
.rsc-link--light { color: var(--rsc-body-lt); }
.rsc-link--light:hover { color: var(--rsc-white); }
.rsc-sec--bowl .rsc-link--red { color: var(--rsc-red-lt); border-bottom-color: rgba(239,111,118,.45); }
#page-roulette-software-canada a:focus-visible,
#page-roulette-software-canada button:focus-visible,
#page-roulette-software-canada summary:focus-visible {
outline: 3px solid var(--rsc-red);
outline-offset: 3px;
}
.rsc-sec--bowl a:focus-visible,
.rsc-sec--bowl button:focus-visible,
.rsc-hero a:focus-visible,
.rsc-hero button:focus-visible,
.rsc-grow button:focus-visible,
.rsc-grow a:focus-visible { outline-color: var(--rsc-red-lt); }
/* ---------- buttons ---------- */
.rsc-btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 52px; padding: 14px 30px;
font: inherit; font-size: 17px; font-weight: 700; letter-spacing: 0.01em;
border: 1px solid transparent; border-radius: 3px;
cursor: pointer;
transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.rsc-btn--red { background: var(--rsc-red); color: var(--rsc-white); }
.rsc-btn--red:hover { background: var(--rsc-red-dk); }
.rsc-btn--ink { background: var(--rsc-ink); color: var(--rsc-white); }
.rsc-btn--ink:hover { background: var(--rsc-red); }
.rsc-btn:active { transform: translateY(1px); }
/* Every section's CTA centres within that section — the hero, the collaborate band
and the enquiry band were already centred, and six ledger-style rows were flush
left, so the page read as two competing alignments. One rule, one alignment. */
.rsc-cta-row { margin-top: clamp(32px, 4vw, 48px); text-align: center; }
.rsc-cta-row .rsc-h3--lead { margin: 0 0 18px; }
/* ---------- pocket index ---------- */
/* A roulette pocket: the diamond is a rotated ::before so the DIGITS stay upright.
isolation:isolate keeps the z-index:-1 pseudo inside the pip's own stacking
context — without it the diamond would drop behind the SECTION background and
vanish. */
.rsc-pip {
position: relative;
isolation: isolate;
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; flex: 0 0 38px;
color: var(--rsc-white);
font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
line-height: 1;
}
.rsc-pip::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--rsc-ink);
transform: rotate(45deg);
}
.rsc-pip--red::before { background: var(--rsc-red); }
.rsc-pip--light::before { background: #34404d; }
/* Block-level in the column layouts so the following heading clears it. */
.rsc-why .rsc-pip { display: flex; margin: 0 0 22px 6px; }
.rsc-script__hd .rsc-pip { margin-left: 6px; }
.rsc-feats .rsc-pip { display: flex; margin: 6px 0 0 6px; }
/* ---------- HERO — rule 24 ---------- */
.rsc-hero {
width: 100%;
padding: clamp(72px, 9vw, 132px) 24px clamp(56px, 7vw, 96px);
/* STATIC gradient. No image, no motion. */
background: linear-gradient(155deg, #0e1217 0%, var(--rsc-bowl) 42%, var(--rsc-bowl-2) 100%);
border-bottom: 1px solid var(--rsc-fret-dk);
}
.rsc-hero__inner { max-width: 900px; margin-inline: auto; text-align: center; }
.rsc-hero .rsc-btn { margin-bottom: 34px; }
.rsc-hero__tag {
margin: 0 0 20px;
font-size: 16px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--rsc-red-lt);
}
#page-roulette-software-canada .rsc-hero h1 {
margin: 0 0 26px;
font-size: clamp(36px, 5.2vw, 62px);
line-height: 1.06;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--rsc-white);
text-wrap: balance;
}
.rsc-hero__copy {
margin: 0 auto 34px;
max-width: 820px;
font-size: clamp(17px, 1.3vw, 19px);
color: var(--rsc-body-lt);
}
.rsc-hero__note {
/* The CTA is inline-flex, so it sits on a text line whose line box ate most of
this margin and left the label crowding the button. Own the gap from the
button side instead of relying on the note's margin alone. */
margin: 14px 0;
font-size: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--rsc-mute-lt);
}
.rsc-hero__modes {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 12px 34px;
font-size: 17px; font-weight: 600; color: var(--rsc-white);
}
.rsc-hero__modes li { display: flex; align-items: center; gap: 10px; }
.rsc-dot { width: 9px; height: 9px; background: var(--rsc-white); transform: rotate(45deg); }
.rsc-dot--red { background: var(--rsc-red-lt); }
/* ---------- breadcrumb ---------- */
.rsc-crumb { background: var(--rsc-paper); border-bottom: 1px solid var(--rsc-fret); }
.rsc-crumb ol { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 0; font-size: 16px; }
.rsc-crumb li { display: flex; align-items: center; gap: 8px; color: var(--rsc-body); }
.rsc-crumb li + li::before { content: "/"; color: var(--rsc-fret); }
.rsc-crumb a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.rsc-crumb a:hover { color: var(--rsc-red); }
.rsc-crumb li[aria-current] { color: var(--rsc-red); font-weight: 600; }
/* ---------- "What is a Roulette Script?" — asymmetric editorial split ----------
Was three equal fret columns. The record's three sub-topics are 1 / 4 / 1
paragraphs long, so equal columns left two of them as tall empty gutters with the
fret lines drawing the eye straight down the dead air — and it duplicated the
equal-column motif already used by "Why Choose AIS". A fixed rail carries the
argument, the topics stack beside it separated by HORIZONTAL frets, and each
block takes exactly the height its copy needs. */
.rsc-script__grid {
display: grid;
grid-template-columns: minmax(280px, 360px) 1fr;
gap: clamp(36px, 4.5vw, 80px);
align-items: start;
}
.rsc-script__rail .rsc-head { margin-bottom: 26px; }
.rsc-script__rail .rsc-lede { margin-bottom: 0; max-width: none; }
.rsc-script__item { padding: 28px 0; border-top: 1px solid var(--rsc-fret); }
.rsc-script__item:first-child { padding-top: 0; border-top: 0; }
.rsc-script__item:last-child { padding-bottom: 0; }
.rsc-script__hd { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.rsc-script__hd .rsc-h3 { margin: 0; }
/* ---------- variants grid ---------- */
.rsc-variants {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
border-top: 1px solid var(--rsc-fret-dk);
border-left: 1px solid var(--rsc-fret-dk);
}
.rsc-variants li {
display: flex; flex-direction: column; align-items: center; gap: 14px;
padding: 22px 18px 24px;
text-align: center;
border-right: 1px solid var(--rsc-fret-dk);
border-bottom: 1px solid var(--rsc-fret-dk);
transition: background-color .16s ease;
}
.rsc-variants li:hover { background: #171d25; }
/* The CMS art is a ~1.84:1 landscape game tile, not a square icon — a square box
with object-fit:contain shrank it to 76x41 and left dead air either side. Let it
run the full tile width at its own ratio instead. */
.rsc-variants img { width: 100%; max-width: 206px; height: auto; }
.rsc-variants span {
font-size: 16px; font-weight: 600; line-height: 1.35;
color: var(--rsc-body-lt);
text-transform: capitalize;
}
/* ---------- collaboration banner ---------- */
/* A third ground between the two: the record's own collaborate-bg plate, used
STATICALLY as this band's background (no motion, no attachment tricks) with ink
text over it. A fallback colour is declared first so a blocked CMS host degrades
to a flat pale band rather than to white-on-white. */
.rsc-banner {
padding: clamp(52px, 6.5vw, 92px) 0;
text-align: center;
background-color: #e9edfa;
background-image: url("https://aiscmsapi.aistechnolabs.com/product_images/collaborate-bg.webp");
background-size: cover;
background-position: center;
border-block: 1px solid #cfd6ea;
}
.rsc-banner .rsc-h2 { margin-bottom: 18px; }
.rsc-banner__sub { color: var(--rsc-body); font-size: clamp(17px, 1.3vw, 20px); margin-bottom: 30px; }
/* ---------- feature slabs ---------- */
.rsc-feats { display: grid; gap: 0; }
.rsc-feats > li {
display: grid; grid-template-columns: 42px 1fr; gap: 34px;
align-items: start;
padding: 34px 0;
border-top: 1px solid var(--rsc-fret);
}
.rsc-feats > li:last-child { border-bottom: 1px solid var(--rsc-fret); }
.rsc-feats .rsc-pip { margin: 6px 0 0; }
/* ---------- game offerings ---------- */
.rsc-offer { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.rsc-offer__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px; }
.rsc-offer__list li {
display: flex; align-items: flex-start; gap: 10px;
padding: 11px 0;
border-bottom: 1px solid var(--rsc-fret-dk);
font-size: 17px;
}
.rsc-offer__list img { width: 16px; height: 16px; margin-top: 6px; flex: 0 0 16px; }
.rsc-offer__list a:hover { color: var(--rsc-red-lt); }
.rsc-offer__fig { margin: 0; }
.rsc-offer__fig img { width: 100%; border: 1px solid var(--rsc-fret-dk); }
/* ---------- hire band ---------- */
.rsc-build { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.rsc-build__text .rsc-h2 { margin-bottom: 22px; }
.rsc-build__fig { margin: 0; }
.rsc-build__fig img { width: 100%; border: 1px solid var(--rsc-fret); }
/* ---------- why choose ---------- */
.rsc-why { display: grid; grid-template-columns: repeat(3, 1fr); }
.rsc-why article { padding: 0 34px; border-left: 1px solid var(--rsc-fret-dk); }
.rsc-why article:first-child { padding-left: 0; border-left: 0; }
.rsc-why article:last-child { padding-right: 0; }
/* ---------- FAQ ---------- */
.rsc-faqlist { border-top: 1px solid var(--rsc-fret); }
.rsc-faqlist details { border-bottom: 1px solid var(--rsc-fret); }
.rsc-faqlist summary {
display: flex; align-items: center; gap: 16px;
padding: 22px 44px 22px 0;
position: relative;
cursor: pointer;
list-style: none;
font-size: clamp(17px, 1.3vw, 20px); font-weight: 700; color: var(--rsc-ink);
}
.rsc-faqlist summary::-webkit-details-marker { display: none; }
.rsc-faq__n { color: var(--rsc-red); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 800; }
.rsc-faqlist summary::after {
content: ""; position: absolute; right: 6px; top: 50%;
width: 12px; height: 12px; margin-top: -8px;
border-right: 2px solid var(--rsc-red); border-bottom: 2px solid var(--rsc-red);
transform: rotate(45deg);
transition: transform .18s ease;
}
.rsc-faqlist details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.rsc-faq__a { padding: 0 0 24px 40px; }
.rsc-faq__a p { color: var(--rsc-body); }
/* ---------- testimonials ---------- */
.rsc-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rsc-fret-dk); }
.rsc-story { background: var(--rsc-bowl); padding: 0 28px 28px; }
.rsc-vid {
position: relative; display: block; width: calc(100% + 56px); margin: 0 -28px 22px;
padding: 0; border: 0; background: none; cursor: pointer;
}
.rsc-vid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.rsc-vid__play {
position: absolute; inset: 50% auto auto 50%;
width: 62px; height: 62px; margin: -31px 0 0 -31px;
background: var(--rsc-red);
border-radius: 50%;
transition: background-color .16s ease, transform .12s ease;
}
.rsc-vid__play::after {
content: ""; position: absolute; inset: 50% auto auto 50%;
margin: -11px 0 0 -6px;
border-style: solid; border-width: 11px 0 11px 18px;
border-color: transparent transparent transparent #fff;
}
.rsc-vid:hover .rsc-vid__play { background: var(--rsc-red-dk); transform: scale(1.06); }
.rsc-story blockquote { margin: 0; font-size: 17px; color: var(--rsc-body-lt); }
.rsc-story__frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; margin-bottom: 22px; }
.rsc-more { margin-top: 32px; }
.rsc-more a { font-weight: 700; border-bottom: 1px solid var(--rsc-red-lt); }
/* ---------- link cloud ---------- */
.rsc-cloud { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 32px; }
.rsc-cloud li { padding: 13px 0; border-bottom: 1px solid var(--rsc-fret); font-size: 17px; }
.rsc-cloud a { font-weight: 500; }
.rsc-cloud a:hover { color: var(--rsc-red); }
/* ---------- enquiry band ---------- */
.rsc-grow {
background: var(--rsc-ink);
padding: clamp(56px, 7vw, 96px) 0;
text-align: center;
}
.rsc-grow .rsc-h2 { margin-bottom: 20px; }
.rsc-grow__sub { color: var(--rsc-body-lt); font-size: clamp(17px, 1.3vw, 19px); margin-bottom: 30px; }
.rsc-grow__privacy { margin-top: 22px; font-size: 16px; color: var(--rsc-mute-lt); }
.rsc-grow__privacy a { text-decoration: underline; }
/* ---------- Area we serve ---------- */
.rsc-area { display: grid; grid-template-columns: repeat(4, 1fr); }
.rsc-area li { padding: 0 26px; border-left: 1px solid var(--rsc-fret); }
.rsc-area li:first-child { padding-left: 0; border-left: 0; }
.rsc-area li:last-child { padding-right: 0; }
.rsc-area h3 {
display: flex; align-items: center; gap: 9px;
margin: 0 0 14px;
font-size: 17px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--rsc-ink);
}
.rsc-area h3 img { width: 14px; height: 20px; }
.rsc-area p { margin-bottom: 10px; }
.rsc-area address { font-size: 16px; color: var(--rsc-body); line-height: 1.6; }
/* ---------- modal ---------- */
.rsc-modal {
display: none; position: fixed; inset: 0; z-index: 9999;
padding: 20px; overflow-y: auto;
background: rgba(10, 13, 17, .74);
}
.rsc-modal.is-open { display: flex; align-items: flex-start; justify-content: center; }
.rsc-modal__box {
position: relative; width: 100%; max-width: 620px; margin: auto;
background: var(--rsc-white); border-radius: 4px; overflow: hidden;
box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.rsc-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-radius: 50%;
border: 1px solid var(--rsc-fret); background: var(--rsc-white); color: var(--rsc-ink);
cursor: pointer;
transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.rsc-modal__x:hover { background: var(--rsc-ink); color: var(--rsc-white); border-color: var(--rsc-ink); }
/* Rule 20 — the GHL widget is a TWO-SLIDE survey whose slides are different heights
and it never posts its own height (it emits only ["iframeLoaded"]), so ANY fixed
iframe height either wastes space under slide 1 or clips slide 2's SUBMIT bar.
This is the fix landed on /blackjack-software-script under AISHTMLNEWDESIGN-326,
reused verbatim rather than re-derived: form_embed.js starts GHL's iFrameResizer
and sizes the iframe per slide. Until it initialises (or if the script is blocked)
the iframe keeps a floor tall enough for the WORST slide and drops the negative
margin, so a failed script degrades to "a little roomy", never to a clipped SUBMIT. */
.rsc-modal iframe { display: block; width: 100%; border: 0; margin-bottom: -5px; }
.rsc-modal iframe:not([data-iframe-resizer-initialized]) { min-height: 1290px; margin-bottom: 0; }
/* ---------- responsive ---------- */
@media (max-width: 1080px) {
.rsc-script__grid { grid-template-columns: 1fr; }
.rsc-why { grid-template-columns: repeat(2, 1fr); }
.rsc-why article:nth-child(1) { padding-left: 0; border-left: 0; }
.rsc-why article:nth-child(3) { padding-left: 0; border-left: 0; padding-top: 30px; border-top: 1px solid var(--rsc-fret-dk); grid-column: 1 / -1; }
.rsc-area { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
.rsc-area li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
.rsc-offer, .rsc-build { grid-template-columns: 1fr; }
.rsc-build__fig { order: -1; }
.rsc-stories { grid-template-columns: 1fr; }
.rsc-story { padding-bottom: 34px; }
}
@media (max-width: 720px) {
.rsc-wrap { padding-inline: 20px; }
.rsc-hero { padding-inline: 20px; }
.rsc-why { grid-template-columns: 1fr; }
.rsc-why article {
padding: 30px 0 0; border-left: 0; border-top: 1px solid var(--rsc-fret-dk); grid-column: auto;
}
.rsc-why article:first-child { padding-top: 0; border-top: 0; }
.rsc-offer__list { grid-template-columns: 1fr; }
.rsc-area { grid-template-columns: 1fr; }
.rsc-area li { padding: 0; border-left: 0; }
.rsc-feats > li { grid-template-columns: 1fr; gap: 18px; }
.rsc-btn { width: 100%; }
}
@media (max-width: 400px) {
.rsc-variants { grid-template-columns: repeat(2, 1fr); }
}
/* Rule 26 — the only motion on this page is a finite response to hover, focus or a
click. Honour a reduced-motion preference for what remains. */
@media (prefers-reduced-motion: reduce) {
#page-roulette-software-canada *,
#page-roulette-software-canada *::before,
#page-roulette-software-canada *::after {
animation: none !important;
transition-duration: 0.01ms !important;
}
}