/* /poker-software-canada — AISHTMLNEWDESIGN-437
Page-owned styles. EVERY selector is scoped to #page-poker-software-canada or a
psc- 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 49TH PARALLEL"
---------------------------------------------------------------------------
The 49th parallel is the surveyed line that fixes most of the Canada/US
border. This page's own argument is jurisdictional — a card room that knows
which side of a line each player is standing on (geolocation tools, KYC/AML,
Canadian gaming law) — so it is drawn like a boundary survey, not a casino.
grounds MAP LINEN (#f1ece2 / #e7e0d2) and BITUMEN (#1d1712), a warm
black-brown map ink. Deliberately not spruce, ice, granite or
maple — those four Canada pages already exist.
signal BOUNDARY BLUE (#175f8f), the hydrographic blue of a survey chart.
It is carried by every CTA and by nothing else on the page.
motif THE GRATICULE — a double hairline crossed by short ticks opening
every band, carrying an ascending latitude token (49°N upward).
motif THE TOWNSHIP INDEX — a two-digit numeral on each ruled cell.
Rule 26: there is no @keyframes in this file. Every transition is a finite
response to hover, focus, click or toggle.
------------------------------------------------------------------------- */
#page-poker-software-canada{
--psc-linen:#f1ece2;
--psc-linen2:#e7e0d2;
--psc-bitumen:#1d1712;
--psc-bitumen2:#251e17;
--psc-ink:#1a1410;
--psc-body:#332b23;
--psc-paper:#ece5da;
--psc-paper-dim:#c3b8a8;
--psc-blue:#175f8f;
--psc-blue-hi:#10496e;
--psc-blue-lite:#89c3e8;
--psc-rule:#cdc3ae;
--psc-rule-d:#40352b;
font-family:"Inter",system-ui,sans-serif;
font-size:16px;
line-height:1.6;
color:var(--psc-body);
background:var(--psc-linen);
}
/* Border-box for everything the page owns. Without this the full-bleed hero is
content-box — width:100% PLUS its 2x24px padding — so it renders 48px wider
than the viewport and puts a horizontal scrollbar on the whole document.
The shared layout sheet is namespaced to the chrome and cannot supply this,
so each page declares it for itself (90 of 92 page sheets already do). */
#page-poker-software-canada,
#page-poker-software-canada *,
#page-poker-software-canada *::before,
#page-poker-software-canada *::after{box-sizing:border-box;}
/* ---- layout primitives */
#page-poker-software-canada .psc-wrap{max-width:1240px;margin-inline:auto;padding-inline:24px;}
#page-poker-software-canada .psc-wrap--narrow{max-width:900px;}
#page-poker-software-canada .psc-band{padding-block:clamp(60px,7vw,108px);}
#page-poker-software-canada .psc-band--linen{background:var(--psc-linen);}
#page-poker-software-canada .psc-band--linen2{background:var(--psc-linen2);}
#page-poker-software-canada .psc-band--ink{background:var(--psc-bitumen);color:var(--psc-paper);}
/* ---- type scale */
#page-poker-software-canada .psc-h1{
font-size:clamp(38px,5vw,66px);line-height:1.05;letter-spacing:-.02em;
font-weight:800;margin:0 0 22px;color:var(--psc-paper);
}
#page-poker-software-canada .psc-h2{
font-size:clamp(30px,3.4vw,48px);line-height:1.14;letter-spacing:-.015em;
font-weight:800;margin:0;color:var(--psc-ink);
}
#page-poker-software-canada .psc-h3{
font-size:clamp(24px,2.4vw,32px);line-height:1.2;font-weight:700;
margin:44px 0 14px;color:var(--psc-ink);
}
#page-poker-software-canada .psc-h4{
font-size:clamp(20px,1.8vw,25px);line-height:1.25;font-weight:700;
margin:0 0 10px;color:var(--psc-ink);
}
#page-poker-software-canada .psc-h5{
font-size:19px;line-height:1.3;font-weight:700;margin:0 0 8px;color:var(--psc-ink);
}
#page-poker-software-canada .psc-band--ink .psc-h2,
#page-poker-software-canada .psc-band--ink .psc-h3,
#page-poker-software-canada .psc-band--ink .psc-h4,
#page-poker-software-canada .psc-band--ink .psc-h5{color:var(--psc-paper);}
#page-poker-software-canada .psc-p{font-size:18px;line-height:1.75;margin:0 0 20px;color:var(--psc-body);}
#page-poker-software-canada .psc-p--lead{font-size:19px;}
#page-poker-software-canada .psc-p--centre{text-align:center;}
#page-poker-software-canada .psc-psm{font-size:16px;line-height:1.7;margin:0;color:var(--psc-body);}
#page-poker-software-canada .psc-band--ink .psc-p,
#page-poker-software-canada .psc-band--ink .psc-psm{color:var(--psc-paper-dim);}
#page-poker-software-canada .psc-link{color:var(--psc-blue);text-decoration:underline;text-underline-offset:3px;}
#page-poker-software-canada .psc-link:hover{color:var(--psc-blue-hi);}
#page-poker-software-canada .psc-band--ink .psc-link{color:var(--psc-blue-lite);}
#page-poker-software-canada .psc-link:focus-visible,
#page-poker-software-canada .psc-cta:focus-visible,
#page-poker-software-canada .psc-vid:focus-visible,
#page-poker-software-canada .psc-faq__q:focus-visible,
#page-poker-software-canada .psc-modal__x:focus-visible{
outline:3px solid var(--psc-blue);outline-offset:3px;border-radius:2px;
}
#page-poker-software-canada .psc-band--ink .psc-link:focus-visible,
#page-poker-software-canada .psc-band--ink .psc-faq__q:focus-visible{outline-color:var(--psc-blue-lite);}
/* ---- THE GRATICULE — section head */
#page-poker-software-canada .psc-head{
padding-top:26px;margin-bottom:34px;position:relative;
border-top:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-head::before{
content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--psc-rule);
}
#page-poker-software-canada .psc-head::after{
content:"";position:absolute;left:0;right:0;top:0;height:5px;
background-image:repeating-linear-gradient(90deg,var(--psc-rule) 0 1px,transparent 1px 34px);
}
#page-poker-software-canada .psc-band--ink .psc-head{border-top-color:var(--psc-rule-d);}
#page-poker-software-canada .psc-band--ink .psc-head::before{background:var(--psc-rule-d);}
#page-poker-software-canada .psc-band--ink .psc-head::after{
background-image:repeating-linear-gradient(90deg,var(--psc-rule-d) 0 1px,transparent 1px 34px);
}
#page-poker-software-canada .psc-head--centre{text-align:center;}
#page-poker-software-canada .psc-eyebrow{
display:flex;align-items:center;gap:12px;margin:0 0 14px;
font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--psc-blue);
}
#page-poker-software-canada .psc-head--centre .psc-eyebrow{justify-content:center;}
#page-poker-software-canada .psc-band--ink .psc-eyebrow{color:var(--psc-blue-lite);}
#page-poker-software-canada .psc-coord{
display:inline-block;padding:3px 9px;border:1px solid currentColor;border-radius:2px;
font-size:16px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
/* ---- HERO — rule 24: full-bleed, image-free, STATIC gradient, centred column */
#page-poker-software-canada .psc-hero{
width:100%;padding:clamp(66px,8vw,124px) 24px clamp(56px,6vw,92px);
background:
linear-gradient(180deg,#120e0a 0%,var(--psc-bitumen) 46%,#22190f 100%),
var(--psc-bitumen);
border-bottom:1px solid var(--psc-rule-d);
}
#page-poker-software-canada .psc-hero__inner{max-width:900px;margin-inline:auto;text-align:center;}
#page-poker-software-canada .psc-hero__tag{
margin:0 0 20px;font-size:16px;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:var(--psc-blue-lite);
}
#page-poker-software-canada .psc-hero__copy{
font-size:19px;line-height:1.75;margin:0 auto 32px;max-width:780px;color:var(--psc-paper);
}
#page-poker-software-canada .psc-hero__trust{
list-style:none;margin:34px 0 0;padding:22px 0 0;border-top:1px solid var(--psc-rule-d);
display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;
}
#page-poker-software-canada .psc-hero__trust li{
font-size:16px;font-weight:500;color:var(--psc-paper);
display:flex;align-items:center;gap:9px;
}
#page-poker-software-canada .psc-hero__trust li::before{
content:"";width:9px;height:9px;flex:0 0 9px;background:var(--psc-blue-lite);
transform:rotate(45deg);
}
/* ---- CTA */
/* 1. Every button on the page is centred within the box that owns it: section
CTAs centre on their band, and per-card actions centre on their card.
The Talent band's earlier left-align exception is removed -- "all buttons
centred" now applies there too. */
#page-poker-software-canada .psc-act{margin-top:30px;text-align:center;}
#page-poker-software-canada .psc-act--hero{margin-top:0;}
#page-poker-software-canada .psc-cta{
display:inline-flex;align-items:center;justify-content:center;
min-height:52px;padding:14px 30px;border:0;border-radius:3px;cursor:pointer;
font-family:inherit;font-size:17px;font-weight:700;letter-spacing:.01em;
background:var(--psc-blue);color:#fff;
box-shadow:inset 0 -3px 0 rgba(0,0,0,.28);
transition:background-color .16s ease,transform .16s ease;
}
#page-poker-software-canada .psc-cta:hover{background:var(--psc-blue-hi);}
#page-poker-software-canada .psc-cta:active{transform:translateY(1px);}
#page-poker-software-canada .psc-cta--big{min-height:58px;padding:16px 38px;font-size:18px;}
#page-poker-software-canada .psc-cta--light{background:var(--psc-blue);color:#fff;}
#page-poker-software-canada .psc-cta--light:hover{background:#2278ae;}
/* ---- breadcrumb */
#page-poker-software-canada .psc-crumbbar{
background:var(--psc-linen2);border-bottom:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-crumbbar__in{
display:flex;align-items:center;gap:8px;padding-block:14px;
font-size:16px;color:var(--psc-body);
}
#page-poker-software-canada .psc-crumb{display:inline-flex;align-items:center;gap:8px;}
#page-poker-software-canada .psc-crumb--here{font-weight:600;color:var(--psc-ink);}
/* ---- intro band ("The Canadian Market")
Two columns on the same 1240px wrap as every other band, so the section lines
up with the page instead of sitting 170px inside it. Same text-left /
figure-right split as the Talent and Boost bands, so it reads as part of the
system rather than a one-off.
The figure column is capped at 420px against a 434px-wide asset: the plate
renders at roughly 1:1 instead of being blown up to 830px, which is what made
it soft. The width/height attributes are the asset's TRUE intrinsic 434x482 —
they previously said 573x361, a landscape ratio for a portrait image, so the
box the browser reserved was the wrong shape and the section shifted on load. */
#page-poker-software-canada .psc-intro{
display:grid;grid-template-columns:1fr minmax(0,420px);gap:44px;align-items:start;
}
#page-poker-software-canada .psc-intro__t .psc-p:last-of-type{margin-bottom:0;}
#page-poker-software-canada .psc-plate{
margin:0;border:1px solid var(--psc-rule);background:#fff;padding:10px;
}
#page-poker-software-canada .psc-plate img{display:block;width:100%;height:auto;}
/* ---- ruled grid + township index */
#page-poker-software-canada .psc-grid{
list-style:none;margin:0;padding:0;display:grid;gap:0;
border-top:1px solid var(--psc-rule);border-left:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-band--ink .psc-grid{
border-top-color:var(--psc-rule-d);border-left-color:var(--psc-rule-d);
}
#page-poker-software-canada .psc-grid--2{grid-template-columns:repeat(2,1fr);}
#page-poker-software-canada .psc-grid--3{grid-template-columns:repeat(3,1fr);}
#page-poker-software-canada .psc-grid--4{grid-template-columns:repeat(4,1fr);}
#page-poker-software-canada .psc-cell{
padding:26px 24px 30px;position:relative;
border-right:1px solid var(--psc-rule);border-bottom:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-band--ink .psc-cell{
border-right-color:var(--psc-rule-d);border-bottom-color:var(--psc-rule-d);
}
#page-poker-software-canada .psc-idx{
display:block;margin-bottom:12px;font-size:16px;font-weight:700;
font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--psc-blue);
}
#page-poker-software-canada .psc-band--ink .psc-idx{color:var(--psc-blue-lite);}
/* ---- games: the iGaming mosaic
Replicated from the live page's own composition for this section
(https://www.aistechnolabs.com/poker-software-canada, .best-solution-wrapper),
read with tools/extract_design.py rather than eyeballed.
The reference does NOT crop these tiles. It lays them out in three columns of
two, using each asset's true height -- measured there as .box-388 {height:388px},
.box-270 {270px} and .box-506 {506px} -- paired so every column sums to 776px:
col 1 388 + 388 col 2 270 + 506 col 3 506 + 270
That is why the reference reads even while showing every image uncropped, and it
is what this grid now does. Each tile carries its own intrinsic ratio in
--psc-ar, so the columns stay balanced at any width without a fixed pixel height.
Captions are overlaid in white on a scrim, as the reference does (a.text-white). */
#page-poker-software-canada .psc-pills{
list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:12px;
}
#page-poker-software-canada .psc-pills li{
padding:13px 26px;border-radius:170px;
border:1px solid var(--psc-blue);background:#fff;color:var(--psc-blue);
font-size:18px;font-weight:600;line-height:1.25;text-align:center;
}
#page-poker-software-canada .psc-mosaic{
list-style:none;margin:26px 0 0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;
}
#page-poker-software-canada .psc-mcol{display:flex;flex-direction:column;gap:22px;}
#page-poker-software-canada .psc-tile{
position:relative;display:block;overflow:hidden;
border:1px solid var(--psc-rule);background:#fff;
transition:border-color .16s ease;
}
#page-poker-software-canada .psc-tile img{
display:block;width:100%;height:auto;aspect-ratio:var(--psc-ar);object-fit:cover;
}
#page-poker-software-canada .psc-tile__cap{
position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px;
font-size:19px;line-height:1.3;font-weight:700;color:#fff;
background:linear-gradient(180deg,rgba(29,23,18,0) 0%,rgba(29,23,18,.88) 58%);
}
#page-poker-software-canada .psc-tile:hover{border-color:var(--psc-blue);}
#page-poker-software-canada .psc-tile:hover .psc-tile__cap{
background:linear-gradient(180deg,rgba(23,95,143,0) 0%,rgba(23,95,143,.92) 58%);
}
#page-poker-software-canada .psc-tile:focus-visible{
outline:3px solid var(--psc-blue);outline-offset:3px;
}
/* ---- logo walls */
#page-poker-software-canada .psc-logos{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(6,1fr);gap:0;
border-top:1px solid var(--psc-rule);border-left:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-logo{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
padding:20px 14px;background:#fff;
border-right:1px solid var(--psc-rule);border-bottom:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-logo img{max-width:100%;height:auto;}
#page-poker-software-canada .psc-logo__n{
margin:0;font-size:16px;font-weight:600;text-align:center;color:var(--psc-ink);
}
#page-poker-software-canada .psc-logos--providers{margin-top:34px;}
#page-poker-software-canada .psc-pf{margin-top:34px;}
#page-poker-software-canada .psc-pf .psc-h4{
margin-bottom:14px;padding-left:14px;border-left:4px solid var(--psc-blue);
}
/* ---- screenshots */
#page-poker-software-canada .psc-shots{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
#page-poker-software-canada .psc-shot{border:1px solid var(--psc-rule-d);background:#000;padding:8px;}
#page-poker-software-canada .psc-shot img{display:block;width:100%;height:auto;}
/* ---- variants */
#page-poker-software-canada .psc-variants{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(6,1fr);gap:0;
border-top:1px solid var(--psc-rule);border-left:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-variant{
display:flex;flex-direction:column;align-items:center;gap:8px;
padding:18px 10px;background:#fff;
border-right:1px solid var(--psc-rule);border-bottom:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-variant img{max-width:100%;height:auto;}
#page-poker-software-canada .psc-variant span{font-size:16px;text-align:center;color:var(--psc-body);}
/* ---- routes (icon + heading + copy) */
#page-poker-software-canada .psc-routes{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border-top:1px solid var(--psc-rule);border-left:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-band--ink .psc-routes{
border-top-color:var(--psc-rule-d);border-left-color:var(--psc-rule-d);
}
#page-poker-software-canada .psc-route{
padding:28px 24px 32px;
border-right:1px solid var(--psc-rule);border-bottom:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-band--ink .psc-route{
border-right-color:var(--psc-rule-d);border-bottom-color:var(--psc-rule-d);
}
#page-poker-software-canada .psc-route img{display:block;margin-bottom:14px;}
#page-poker-software-canada .psc-route__i{
display:inline-flex;align-items:center;justify-content:center;
width:64px;height:64px;margin-bottom:14px;background:#fff;border:1px solid var(--psc-rule);
}
/* 4. The three "Seamless Poker Experience" icons are MIXED POLARITY, which is
why a single filter cannot serve them. Read from the assets:
cross-platform-compatibility.svg fill="#3E4095" x1 + fill="white" x4
cloud-based-infrastructure.svg fill="white" x7
adaptive-ui-and-customization.svg fill="white" x8
The first is drawn for a LIGHT ground -- an indigo body with white detail
punched into it. The other two are drawn for a DARK ground. A blanket
brightness(0) invert(1) (the previous attempt) mapped the indigo body AND
its four white details to the same white, collapsing that icon into a
featureless white silhouette.
So every icon now sits on a WHITE tile, matching the icon language the
Process and Solutions bands already use, and only the two white-only
assets are darkened. The mixed asset is left untouched and renders as
designed. Targeted by filename so the rule states exactly which assets it
corrects and why. */
#page-poker-software-canada .psc-route__i--dark{
display:inline-flex;align-items:center;justify-content:center;
width:72px;height:72px;margin-bottom:14px;
background:#fff;border:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-route__i--dark img{
width:52px;height:52px;object-fit:contain;filter:none;
}
#page-poker-software-canada .psc-route__i--dark img[src$="cloud-based-infrastructure.svg"],
#page-poker-software-canada .psc-route__i--dark img[src$="adaptive-ui-and-customization.svg"]{
filter:brightness(0);
}
/* cross-platform-compatibility.svg is the odd asset: a #3E4095 body with four
white details punched into it. It must end up the same BLACK ink as the other
two, but brightness(0) cannot be used here -- it blackens the body AND the
four white details, collapsing the icon into a solid silhouette (measured:
74.2% black, white detail down to 20.1%).
grayscale(1) takes the indigo to its luma (~#464646) while leaving white at
white; contrast(4) then drives that mid grey to #000000 and clamps white at
#FFFFFF. Body reaches the reference ink, details survive -- measured 62.0%
black with white UP at 30.1%, versus 20.1% under brightness(0).
Reference sampled from the supplied screenshot: ink #000000 on a #FFFFFF
tile. Size and geometry are untouched (52px contain in the 72px tile). */
#page-poker-software-canada .psc-route__i--dark img[src$="cross-platform-compatibility.svg"]{
filter:grayscale(1) contrast(4);
}
/* ---- boost band */
#page-poker-software-canada .psc-boost{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:38px;align-items:start;}
#page-poker-software-canada .psc-boost__fig{margin:0;border:1px solid var(--psc-rule-d);padding:8px;background:#000;}
#page-poker-software-canada .psc-boost__fig img{display:block;width:100%;height:auto;}
/* ---- link clouds */
#page-poker-software-canada .psc-links{
list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;
}
#page-poker-software-canada .psc-link--tile{
display:inline-block;padding:10px 16px;border:1px solid var(--psc-rule);
background:#fff;color:var(--psc-ink);font-size:16px;font-weight:500;
text-decoration:none;transition:border-color .16s ease,color .16s ease;
}
#page-poker-software-canada .psc-link--tile:hover{border-color:var(--psc-blue);color:var(--psc-blue);}
#page-poker-software-canada .psc-band--ink .psc-link--tile{
background:var(--psc-bitumen2);border-color:var(--psc-rule-d);color:var(--psc-paper);
}
#page-poker-software-canada .psc-band--ink .psc-link--tile:hover{border-color:var(--psc-blue-lite);color:var(--psc-blue-lite);}
#page-poker-software-canada .psc-links--reads{
display:block;margin-top:30px;padding-top:24px;border-top:1px solid var(--psc-rule);
column-count:2;column-gap:44px;
}
#page-poker-software-canada .psc-links--reads li{margin-bottom:12px;break-inside:avoid;font-size:16px;line-height:1.6;}
/* 5. "Our Other Casino & Poker Offerings" was 58 undifferentiated pills and links
in one block. It is now two labelled groups: a numbered ruled INDEX of the
32 products, on the same township-index motif the rest of the page uses,
and a quieter FURTHER READING rail for the 26 articles so they stop
competing with the products. */
#page-poker-software-canada .psc-index{margin-top:28px;}
#page-poker-software-canada .psc-index__lab{
margin:0 0 14px;font-size:16px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--psc-blue);
}
#page-poker-software-canada .psc-index__list{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border-top:1px solid var(--psc-rule);border-left:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-index__row{
border-right:1px solid var(--psc-rule);border-bottom:1px solid var(--psc-rule);
background:#fff;
}
#page-poker-software-canada .psc-index__a{
display:flex;align-items:baseline;gap:12px;padding:14px 16px;min-height:56px;
color:var(--psc-ink);transition:background-color .16s ease,color .16s ease;
}
#page-poker-software-canada .psc-index__a:hover{background:var(--psc-linen);color:var(--psc-blue);}
#page-poker-software-canada .psc-index__a:focus-visible{outline:3px solid var(--psc-blue);outline-offset:-3px;}
#page-poker-software-canada .psc-index__n{
flex:0 0 auto;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;
letter-spacing:.06em;color:var(--psc-blue);
}
#page-poker-software-canada .psc-index__t{font-size:16px;line-height:1.45;font-weight:500;}
/* Further Reading: 26 long article titles. As a bare column-flow of underlined
blue links they ran together into a wall -- nothing marked where one title
ended and the next began, and the underlines doubled up with the wrapping so
two-line titles read as four rules.
Now a ruled two-column grid: one row per article, a hairline under each, and
the page's own lozenge marker (the mark already used by the hero trust list)
as the bullet. Grid rows stretch, so the rules line up across both columns.
Titles sit in ink rather than link-blue and carry no underline at rest --
they are a list of links, not links inside prose -- with blue + underline
returning on hover and keyboard focus so the affordance is not colour-only. */
#page-poker-software-canada .psc-index--reads{
margin-top:38px;padding-top:28px;border-top:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-reads{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px;align-items:stretch;
}
#page-poker-software-canada .psc-reads li{
display:flex;align-items:flex-start;gap:13px;
padding:13px 0;border-bottom:1px solid var(--psc-rule);
font-size:16px;line-height:1.6;
}
#page-poker-software-canada .psc-reads li::before{
content:"";flex:0 0 8px;width:8px;height:8px;margin-top:9px;
background:var(--psc-blue);transform:rotate(45deg);
}
#page-poker-software-canada .psc-reads .psc-link{
color:var(--psc-ink);text-decoration:none;
transition:color .16s ease;
}
#page-poker-software-canada .psc-reads .psc-link:hover{
color:var(--psc-blue);text-decoration:underline;text-underline-offset:3px;
}
#page-poker-software-canada .psc-reads .psc-link:focus-visible{
color:var(--psc-blue);text-decoration:underline;text-underline-offset:3px;
}
/* ---- process */
#page-poker-software-canada .psc-steps{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border-top:1px solid var(--psc-rule);border-left:1px solid var(--psc-rule);
counter-reset:none;
}
#page-poker-software-canada .psc-step{
padding:26px 24px 30px;
border-right:1px solid var(--psc-rule);border-bottom:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-step__n{
display:block;margin-bottom:10px;font-size:16px;font-weight:700;
font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--psc-blue);
}
#page-poker-software-canada .psc-step__i{display:block;margin-bottom:12px;}
#page-poker-software-canada .psc-step__l{margin:10px 0 0;padding-left:18px;}
#page-poker-software-canada .psc-step__l li{font-size:16px;line-height:1.7;margin-bottom:6px;color:var(--psc-body);}
/* ---- technology stack table */
#page-poker-software-canada .psc-tablewrap{overflow-x:auto;border:1px solid var(--psc-rule);background:#fff;}
#page-poker-software-canada .psc-table{width:100%;border-collapse:collapse;font-size:16px;}
#page-poker-software-canada .psc-table th,
#page-poker-software-canada .psc-table td{
padding:16px 20px;text-align:left;vertical-align:top;
border-bottom:1px solid var(--psc-rule);line-height:1.7;
}
#page-poker-software-canada .psc-table tr:last-child th,
#page-poker-software-canada .psc-table tr:last-child td{border-bottom:0;}
#page-poker-software-canada .psc-table th{
width:230px;font-weight:700;color:var(--psc-ink);background:var(--psc-linen);
border-right:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-table td{color:var(--psc-body);}
/* ---- talent band */
#page-poker-software-canada .psc-talent{display:grid;grid-template-columns:1fr minmax(0,420px);gap:40px;align-items:center;}
#page-poker-software-canada .psc-talent__fig{margin:0;}
#page-poker-software-canada .psc-talent__fig img{display:block;width:100%;height:auto;}
/* ---- demos */
#page-poker-software-canada .psc-demos{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
#page-poker-software-canada .psc-demo{
padding:22px;background:var(--psc-bitumen2);border:1px solid var(--psc-rule-d);
}
/* 2. The demo brand marks are logos, not screenshots -- at full card width they
rendered 337px square and dominated the credentials they label. Capped and
centred. */
#page-poker-software-canada .psc-demo img{
display:block;width:120px;height:120px;object-fit:contain;
margin:0 auto 18px;
}
#page-poker-software-canada .psc-demo__sub{
margin:16px 0 8px;font-size:16px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--psc-blue-lite);
}
#page-poker-software-canada .psc-demo__go{margin:20px 0 0;text-align:center;}
#page-poker-software-canada .psc-demo__go .psc-link{
display:inline-flex;align-items:center;justify-content:center;
min-height:46px;padding:12px 30px;border-radius:3px;
background:var(--psc-blue);color:#fff;
font-size:17px;font-weight:700;text-decoration:none;
box-shadow:inset 0 -3px 0 rgba(0,0,0,.28);
transition:background-color .16s ease,transform .16s ease;
}
#page-poker-software-canada .psc-demo__go .psc-link:hover{background:#2278ae;color:#fff;}
#page-poker-software-canada .psc-demo__go .psc-link:active{transform:translateY(1px);}
#page-poker-software-canada .psc-creds{margin:0;font-size:16px;line-height:1.7;}
#page-poker-software-canada .psc-creds dt{font-weight:600;color:var(--psc-paper);}
#page-poker-software-canada .psc-creds dd{margin:0 0 8px;color:var(--psc-paper-dim);word-break:break-word;}
/* ---- FAQ. Multi-column, NOT display:grid — in a 2-col grid, opening one
panel stretches its row-mate. */
#page-poker-software-canada .psc-faqs{column-count:2;column-gap:28px;}
#page-poker-software-canada .psc-faq{
break-inside:avoid;margin-bottom:12px;background:var(--psc-bitumen2);
border:1px solid var(--psc-rule-d);
}
#page-poker-software-canada .psc-faq__q{
display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
padding:16px 18px;cursor:pointer;list-style:none;
font-size:17px;font-weight:600;line-height:1.45;color:var(--psc-paper);
}
#page-poker-software-canada .psc-faq__q::-webkit-details-marker{display:none;}
#page-poker-software-canada .psc-faq__x{
position:relative;flex:0 0 16px;width:16px;height:16px;margin-top:4px;
}
#page-poker-software-canada .psc-faq__x::before,
#page-poker-software-canada .psc-faq__x::after{
content:"";position:absolute;background:var(--psc-blue-lite);
transition:opacity .16s ease;
}
#page-poker-software-canada .psc-faq__x::before{left:0;right:0;top:7px;height:2px;}
#page-poker-software-canada .psc-faq__x::after{top:0;bottom:0;left:7px;width:2px;}
#page-poker-software-canada .psc-faq[open] .psc-faq__x::after{opacity:0;}
#page-poker-software-canada .psc-faq__a{padding:0 18px 18px;border-top:1px solid var(--psc-rule-d);}
#page-poker-software-canada .psc-faq__a .psc-psm{padding-top:14px;}
/* ---- stories */
#page-poker-software-canada .psc-stories{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
#page-poker-software-canada .psc-story{border:1px solid var(--psc-rule);background:#fff;padding:16px;}
#page-poker-software-canada .psc-vid{
position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
}
#page-poker-software-canada .psc-vid img{display:block;width:100%;height:auto;}
#page-poker-software-canada .psc-vid__play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
display:flex;align-items:center;justify-content:center;width:58px;height:58px;
background:var(--psc-blue);color:#fff;border-radius:50%;
transition:background-color .16s ease;
}
#page-poker-software-canada .psc-vid:hover .psc-vid__play{background:var(--psc-blue-hi);}
#page-poker-software-canada .psc-story__frame{display:block;width:100%;aspect-ratio:4/3;border:0;}
#page-poker-software-canada .psc-story .psc-psm{margin-top:14px;}
/* ---- offices */
#page-poker-software-canada .psc-offices{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border-top:1px solid var(--psc-rule);border-left:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-office{
padding:24px 22px 28px;background:#fff;
border-right:1px solid var(--psc-rule);border-bottom:1px solid var(--psc-rule);
}
#page-poker-software-canada .psc-office__p{margin:0 0 10px;font-size:16px;font-weight:600;}
/* ---- CTA modal */
#page-poker-software-canada .psc-modal{
display:none;position:fixed;inset:0;z-index:9999;
background:rgba(12,9,6,.72);padding: 100px 20px 20px 20px;overflow-y:auto;
}
#page-poker-software-canada .psc-modal.is-open{display:flex;align-items:flex-start;justify-content:center;}
#page-poker-software-canada .psc-modal__box{
position:relative;width:100%;max-width:620px;margin:40px auto;
background:#fff;border-radius:4px;padding:14px;
}
#page-poker-software-canada .psc-modal__x{
position:absolute;top:10px;right:10px;z-index:2;
display:flex;align-items:center;justify-content:center;width:44px;height:44px;
border:1px solid var(--psc-rule);border-radius:3px;background:#fff;
color:var(--psc-ink);cursor:pointer;transition:background-color .16s ease;
}
#page-poker-software-canada .psc-modal__x:hover{background:var(--psc-linen2);}
#page-poker-software-canada .psc-modal__box iframe{display:block;width:100%;min-height:870px;border:0;}
/* ---- responsive */
@media (max-width:1200px){
#page-poker-software-canada .psc-grid--4{grid-template-columns:repeat(3,1fr);}
#page-poker-software-canada .psc-logos{grid-template-columns:repeat(5,1fr);}
#page-poker-software-canada .psc-variants{grid-template-columns:repeat(5,1fr);}
}
@media (max-width:900px){
#page-poker-software-canada .psc-grid--3,
#page-poker-software-canada .psc-grid--4{grid-template-columns:repeat(2,1fr);}
#page-poker-software-canada .psc-mosaic,
#page-poker-software-canada .psc-shots,
#page-poker-software-canada .psc-routes,
#page-poker-software-canada .psc-steps,
#page-poker-software-canada .psc-demos,
#page-poker-software-canada .psc-stories{grid-template-columns:repeat(2,1fr);}
#page-poker-software-canada .psc-offices{grid-template-columns:repeat(2,1fr);}
#page-poker-software-canada .psc-index__list{grid-template-columns:repeat(2,1fr);}
#page-poker-software-canada .psc-reads{grid-template-columns:1fr;}
#page-poker-software-canada .psc-logos{grid-template-columns:repeat(4,1fr);}
#page-poker-software-canada .psc-variants{grid-template-columns:repeat(4,1fr);}
#page-poker-software-canada .psc-boost,
#page-poker-software-canada .psc-talent,
#page-poker-software-canada .psc-intro{grid-template-columns:1fr;gap:26px;}
/* stacked, the plate no longer needs the full column width */
#page-poker-software-canada .psc-plate{max-width:434px;}
#page-poker-software-canada .psc-intro__t .psc-p:last-of-type{margin-bottom:20px;}
#page-poker-software-canada .psc-faqs,
#page-poker-software-canada .psc-links--reads{column-count:1;}
#page-poker-software-canada .psc-table th{width:180px;}
}
@media (max-width:640px){
#page-poker-software-canada .psc-wrap{padding-inline:18px;}
#page-poker-software-canada .psc-grid--2,
#page-poker-software-canada .psc-grid--3,
#page-poker-software-canada .psc-grid--4,
#page-poker-software-canada .psc-mosaic,
#page-poker-software-canada .psc-shots,
#page-poker-software-canada .psc-routes,
#page-poker-software-canada .psc-steps,
#page-poker-software-canada .psc-demos,
#page-poker-software-canada .psc-stories,
#page-poker-software-canada .psc-offices{grid-template-columns:1fr;}
#page-poker-software-canada .psc-index__list{grid-template-columns:1fr;}
#page-poker-software-canada .psc-logos,
#page-poker-software-canada .psc-variants{grid-template-columns:repeat(2,1fr);}
#page-poker-software-canada .psc-cta{width:100%;}
#page-poker-software-canada .psc-hero__trust{flex-direction:column;align-items:center;gap:12px;}
#page-poker-software-canada .psc-table th{width:auto;}
#page-poker-software-canada .psc-table th,
#page-poker-software-canada .psc-table td{display:block;border-right:0;}
#page-poker-software-canada .psc-table th{border-bottom:0;}
#page-poker-software-canada .psc-modal__box iframe{min-height:900px;}
}
/* ---- reduced motion */
@media (prefers-reduced-motion:reduce){
#page-poker-software-canada *,
#page-poker-software-canada *::before,
#page-poker-software-canada *::after{
animation:none !important;transition-duration:.01ms !important;
}
}
/* Games We Provide: source had TWO tabs (Casino Originals, Live Game
API); "Our diverse iGaming software We Provide" was the first line inside the
first tab, not a third pill. Restored as two labelled groups; colour inherited
rather than tokenised so it reads on whatever band this section sits on. */
.psc-grp{margin:0 0 38px;}
.psc-grp:last-of-type{margin-bottom:0;}
.psc-grp > h4{margin:0 0 6px;font-size:clamp(19px,1.6vw,22px);font-weight:700;line-height:1.3;letter-spacing:-.008em;}
.psc-grp > h5{margin:0 0 12px;font-size:16px;font-weight:600;opacity:.78;}
/* The "Best Solutions for iGaming" description rendered larger than the body
copy beneath it. Sized to this page's body text (16px) at the user's
request, applied across every page carrying this section. Scoped to the
section because .psc-p is used elsewhere on this page. Line-height is
left alone — it is unitless, so it tracks the new size. */
#page-poker-software-canada [aria-labelledby="psc-igaming"] .psc-p{font-size:16px;}
/* ═══ Poker Software Canada — staging review, 2026-09-16 ══════════════════ */
/* ── 1 + 4. "Premium Gaming Features…" and "Hire Our Expert Poker Software
Developers…" — each opens with .psc-p--lead at 19px while the body copy
around it (.psc-psm, list cells) is 16px, so the sections read at two
sizes. Matched to the body. Scoped to these two bands: .psc-p--lead is
used three times on the page and the third was not raised. ── */
#page-poker-software-canada section[aria-labelledby="psc-premium"] .psc-p--lead,
#page-poker-software-canada section[aria-labelledby="psc-hire"] .psc-p--lead{
font-size:16px;}
/* ── 2. "OUR APP'S SCREENSHOTS" on the omaha rail: was a 3-column grid, now
one snapped rail with a prev/next stepper. Layout only — the tiles keep
this page's own treatment and no image changed.
CLASS NAMES CHECKED AGAINST THIS PAGE FIRST: .psc-step, .psc-shots and
.psc-logos are all already in use here, so the nav uses .psc-railbtn and
.psc-shots__nav, both free. ── */
#page-poker-software-canada .psc-shots{
display:flex;gap:18px;overflow-x:auto;padding:6px 2px 22px;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
scrollbar-width:none;-ms-overflow-style:none;}
#page-poker-software-canada .psc-shots::-webkit-scrollbar{display:none;}
#page-poker-software-canada .psc-shots > li{
flex:0 0 clamp(280px,78vw,430px);scroll-snap-align:start;}
#page-poker-software-canada .psc-shots__nav{
display:flex;gap:12px;justify-content:center;margin-top:4px;}
#page-poker-software-canada .psc-railbtn{
width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--psc-rule);border-radius:50%;
background:transparent;color:var(--psc-body);cursor:pointer;
transition:background .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease;}
#page-poker-software-canada .psc-band--ink .psc-railbtn{
border-color:rgba(255,255,255,.28);color:#fff;}
#page-poker-software-canada .psc-railbtn:hover:not([disabled]){
background:var(--psc-blue);border-color:var(--psc-blue);color:#fff;}
#page-poker-software-canada .psc-railbtn:focus-visible{
outline:3px solid var(--psc-blue);outline-offset:3px;}
#page-poker-software-canada .psc-railbtn[disabled]{opacity:.35;cursor:not-allowed;}
/* ── 2 (Portfolio), 2026-09-19. Earlier this was left alone: the first attempt
moved .psc-logos from six columns to five on a false premise (querySelector
returned the first of FIVE rows, holding 5, 9, 5, 2 and 13 items -- no
single column count fills all five), and "follow omaha" had no referent
because I was comparing against omaha's LOGO WALL.
It does have a referent. /omaha-poker-software carries its own "Portfolio"
section, .ops-folio, with the identical group-heading + logo-row markup.
Extracted from it (design-clone extract_design.py, exit 0):
.ops-folio__row display:flex; flex-wrap:wrap; gap:12px; margin:18px 0 0
.ops-folio__row li background:#fff; border-radius:3px; padding:12px 16px;
display:flex; align-items:center; justify-content:center;
min-height:66px; flex:0 1 auto
.ops-folio__row img max-width:132px; max-height:44px; width:auto; height:auto
That is the whole idea: tiles size to their content and wrap, and the IMAGE
is capped to a uniform 132x44 box. A rigid six-column grid cannot serve
rows of 5/9/5/2/13 -- the 2-item row left four empty cells and the 13-item
row left five. Flex-wrap has no empty cells by construction, and capping
the image (not the cell) is what lines up logos whose sources run from
142x142 to 190x39.
SCOPE. Only .psc-pf .psc-logos -- the five Portfolio rows. The sixth list,
.psc-logos--providers in the iGaming band, keeps the six-column hairline
grid: it carries per-tile captions that the folio layout has no slot
for. Selector is (1,2,0) so it outranks the bare .psc-logos breakpoint
rules at (1,1,0) regardless of their later source position.
NOT copied: the reference's .ops-folio__grp border-top uses
--ops-line-dark #333d51 on a dark band with #fff headings. This band is
psc-band--linen2, light. Importing those values would be theme, not
layout, and would fail contrast -- so the existing group heading (blue
left rule on .psc-h4) is kept. Content, markup and heading text unchanged. ── */
#page-poker-software-canada .psc-pf .psc-logos{
display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0;
border-top:0;border-left:0;
}
#page-poker-software-canada .psc-pf .psc-logo{
flex:0 1 auto;flex-direction:row;gap:normal;
background:#fff;border-radius:3px;padding:12px 16px;
min-height:66px;
border-right:0;border-bottom:0;
}
#page-poker-software-canada .psc-pf .psc-logo img{
max-width:132px;max-height:44px;width:auto;height:auto;display:block;
}
/* ── 3. "Our Poker Game Software Variants Supported" — the visible labels are
lowercase ("3d slots") while each tile's own title reads "3D Slots", so
the first letters did not match. Capitalised in CSS rather than by
rewriting 45 labels, which keeps this a design change. ── */
#page-poker-software-canada .psc-variant span{text-transform:capitalize;}
/* ── 5. The talent band's CTA moves left, flush with its copy. The heading was
already aligned there; only the button sat centred. ── */
#page-poker-software-canada section[aria-labelledby="psc-talent"] .psc-act{
text-align:left;}
/* ── Talent band, 2026-09-16: heading, copy and CTA now live in the LEFT column
of .psc-talent, with the image alone on the right. Previously .psc-head
spanned the full 1192px wrap, so the heading sat above the image as well
as the copy, and the copy->CTA gap measured 145px because the image
column was taller than the text and .psc-act sat below the whole grid.
align-items:start keeps the text block at the top of its column instead
of floating against the image's centre line. ── */
#page-poker-software-canada section[aria-labelledby="psc-talent"] .psc-talent{
align-items:start;}
#page-poker-software-canada section[aria-labelledby="psc-talent"] .psc-talent__t .psc-head{
margin-bottom:20px;}
#page-poker-software-canada section[aria-labelledby="psc-talent"] .psc-act{
margin-top:22px;}
#page-poker-software-canada section[aria-labelledby="psc-talent"] .psc-talent__fig img{
width:100%;height:auto;display:block;}