/* /csgo-roulette-canada — AISHTMLNEWDESIGN-469
Page-owned styles. EVERY selector is scoped to #page-csgo-roulette-canada or a
crc- 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 — NEON WHEEL (retires "THE OUTSIDE BET", 2026-09)
════════════════════════════════════════════════════════════════════════
The previous direction drew this page as a printed betting layout: hairlines,
zero radius, no elevation. The client read that as old, and it was — the
whole sheet contained ONE border-radius.
NEON WHEEL takes the same subject from the other end. A roulette wheel at a
live esports casino is not a printed cloth, it is a lit object: a black rim,
red and gold pockets, and light coming off the lacquer. So:
· the page is DARK-DOMINANT — three deep plum/black grounds, no paper —
and the reading surfaces are ELEVATED cards that sit ON the ground with
layered, low-opacity shadows, not cells drawn into it;
· every card, plate, chip and media frame is generously rounded
(16 / 20 / 24px; 999px on every button and tag);
· the hero is a static three-point aurora — crimson bloom, gold bloom,
plum ground — under a display-scale H1 at tight tracking;
· colour is RED + GOLD on black, which is the wheel's own palette, and
nothing else is chromatic.
── SIGNATURE COMPONENT: THE POCKET PLATE ──────────────────────────────
Every content card is a "pocket plate": a 20px-radius elevated surface whose
top edge carries a 6px POCKET STRIP — alternating red / black / gold blocks,
the wheel's rim unrolled — and whose top-right corner carries a circular
POCKET NUMBER chip (a CSS counter, so no content is invented). The same strip
reduced to three rounded segments is the section mark (.crc-pocket), and the
same strip stretched to full width is the hero rule.
Materials
VOID #0a0510 the deepest ground, under the manifest + FAQ
PLUM #150b20 the primary reading ground
FELT gradient #1c0f2a -> #120a1c with a crimson radial bloom
SURFACE #1f1330 the card face, +#271838 on hover
RED #ff3355 pocket red — marks, links, strip, glow
GOLD #ffc244 pocket gold — buttons, numbers, rules
Distinctness
· from /csgo-roulette-script (DEPLOY DECK): that page is LIGHT-dominant,
teal/sky, and its unit is a console pane with a dark title bar. This one
is dark-dominant, red/gold, and its unit is a pocket plate.
· from /csgo-trade-bot-canada (SKIN VAULT): that page alternates midnight
bands with floating white panels and rails its cards in the CS:GO rarity
ramp (blue/violet/pink). No blue or violet appears in this sheet at all.
· from the eight other CS:GO pages, every one of which is a light, hairline,
radius-free documentary layout (PRICE BRACKET, OVERTYPE, FORFEIT LINE,
THE CRASH LINE, THE SCRIPT BLOCK, INSPECT WINDOW, THE POT, EVEN MONEY).
Rule 26: ZERO @keyframes in this file. Motion is transition-only, and only on
:hover / :focus-visible / :active / details[open].
Rule 39A: anything painting a background also owns its foreground on a
class-based selector carrying the wrapper id; this sheet never targets a bare
descendant element, so no prose rule can outrank a chip.
Anchor note: the inline baseline sets `#page-csgo-roulette-canada a{color:
inherit}` at (1,0,1); every anchor rule below carries the wrapper id too.
Icon note: check.png, left-icon.svg and location-icon.svg are all dark indigo
(#393185 / #303094) and would vanish on this ground, so each is seated on its
own pale plate rather than recoloured.
════════════════════════════════════════════════════════════════════════ */
/* Scoped box reset — the shared layout sheet does not border-box page content,
so a full-bleed band's own padding-inline would spill past width:100%. */
#page-csgo-roulette-canada,
#page-csgo-roulette-canada *,
#page-csgo-roulette-canada *::before,
#page-csgo-roulette-canada *::after{box-sizing:border-box;}
#page-csgo-roulette-canada{
/* ── grounds ────────────────────────────────────────────────────────── */
--crc-void:#0a0510;
--crc-plum:#150b20;
--crc-plum-2:#1a0f27;
--crc-felt-a:#1c0f2a;
--crc-felt-b:#120a1c;
--crc-surface:#1f1330;
--crc-surface-2:#271838;
/* ── ink ────────────────────────────────────────────────────────────── */
--crc-text:#f7f2fb; /* headings — 17.4:1 on --crc-plum */
--crc-body:#d3c8de; /* body — 11.4:1 on --crc-plum */
--crc-mute:#ac9fbb; /* captions — 7.0:1 on --crc-plum */
--crc-ondark-chip:#150b20; /* text on gold */
/* ── signals ────────────────────────────────────────────────────────── */
--crc-red:#ff3355;
--crc-red-2:#ff6b3d;
--crc-gold:#ffc244;
--crc-gold-2:#ff9d2e;
/* ── lines ──────────────────────────────────────────────────────────── */
--crc-line:rgba(255,255,255,.085);
--crc-line-2:rgba(255,255,255,.17);
--crc-gold-line:rgba(255,194,68,.36);
/* ── elevation — layered + soft, never a single hard rule ───────────── */
--crc-lift:0 1px 2px rgba(0,0,0,.34), 0 10px 22px -8px rgba(0,0,0,.6),
0 28px 60px -28px rgba(0,0,0,.72);
--crc-lift-hi:0 2px 4px rgba(0,0,0,.36), 0 18px 34px -10px rgba(0,0,0,.66),
0 44px 90px -34px rgba(255,51,85,.24);
/* ── metrics ────────────────────────────────────────────────────────── */
--crc-wrap:1200px;
--crc-wrap-wide:1360px;
--crc-pad:clamp(20px,4vw,44px);
--crc-sec-y:clamp(72px,8.4vw,132px);
--crc-r-lg:24px;
--crc-r-md:20px;
--crc-r-sm:14px;
font-family:"Inter",system-ui,sans-serif;
font-size:17px;
line-height:1.7;
color:var(--crc-body);
background:var(--crc-plum);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* ── shared measures ─────────────────────────────────────────────────── */
#page-csgo-roulette-canada .crc-wrap{
width:100%;
max-width:var(--crc-wrap);
margin-inline:auto;
padding-inline:var(--crc-pad);
}
/* ── base type ───────────────────────────────────────────────────────── */
#page-csgo-roulette-canada .crc-h1{
margin:0 0 26px;
font-size:clamp(40px,5.4vw,74px);
line-height:1.03;
letter-spacing:-.035em;
font-weight:800;
color:var(--crc-text);
}
#page-csgo-roulette-canada .crc-h2{
margin:0;
font-size:clamp(31px,3.6vw,50px);
line-height:1.1;
letter-spacing:-.028em;
font-weight:800;
color:var(--crc-text);
}
#page-csgo-roulette-canada .crc-h3{
margin:0 0 14px;
font-size:clamp(21px,1.75vw,26px);
line-height:1.24;
letter-spacing:-.018em;
font-weight:700;
color:var(--crc-text);
}
#page-csgo-roulette-canada .crc-h4{
margin:0 0 10px;
font-size:18px;
line-height:1.3;
letter-spacing:.1em;
text-transform:uppercase;
font-weight:700;
color:var(--crc-gold);
}
#page-csgo-roulette-canada .crc-p{margin:0 0 18px;color:var(--crc-body);}
#page-csgo-roulette-canada .crc-p:last-child{margin-bottom:0;}
#page-csgo-roulette-canada .crc-p--lead{
font-size:clamp(18px,1.5vw,21px);
line-height:1.62;
color:#e2daea;
}
#page-csgo-roulette-canada .crc-p--display{
font-size:clamp(26px,3vw,40px);
line-height:1.18;
letter-spacing:-.025em;
font-weight:800;
color:var(--crc-text);
}
#page-csgo-roulette-canada .crc-p--sm{font-size:16px;color:var(--crc-mute);}
#page-csgo-roulette-canada .crc-p--light{color:var(--crc-body);}
/* ── links — every rule carries the wrapper id (baseline is (1,0,1)) ─── */
#page-csgo-roulette-canada a.crc-link{
color:var(--crc-gold);
text-decoration:none;
border-bottom:1px solid var(--crc-gold-line);
padding-bottom:1px;
font-weight:600;
transition:color .16s ease, border-color .16s ease;
}
#page-csgo-roulette-canada a.crc-link:hover,
#page-csgo-roulette-canada a.crc-link:focus-visible{
color:#ffd98a;
border-bottom-color:#ffd98a;
}
#page-csgo-roulette-canada a.crc-link--light{color:var(--crc-gold);}
#page-csgo-roulette-canada a.crc-link--rule{
border-bottom:none;
color:var(--crc-gold);
font-weight:700;
letter-spacing:.01em;
}
#page-csgo-roulette-canada a.crc-link--rule:hover,
#page-csgo-roulette-canada a.crc-link--rule:focus-visible{color:#ffd98a;text-decoration:underline;text-underline-offset:4px;}
#page-csgo-roulette-canada a:focus-visible,
#page-csgo-roulette-canada button:focus-visible,
#page-csgo-roulette-canada summary:focus-visible{
outline:2px solid var(--crc-gold);
outline-offset:3px;
border-radius:6px;
}
/* ══════════════════════════════════════════════════════════════════════
BUTTONS — pill, gradient, dark label. Gold carries near-black text at
8.6:1 against the worst gradient stop.
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-canada .crc-ctarow{margin:34px 0 0;}
#page-csgo-roulette-canada .crc-ctarow--pair{
display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
}
#page-csgo-roulette-canada .crc-btn{
display:inline-flex;align-items:center;justify-content:center;
min-height:54px;
padding:15px 34px;
border:0;
border-radius:999px;
background:linear-gradient(135deg,var(--crc-gold) 0%,var(--crc-gold-2) 100%);
color:var(--crc-ondark-chip);
font-family:inherit;
font-size:17px;
font-weight:800;
letter-spacing:-.005em;
line-height:1.2;
cursor:pointer;
box-shadow:0 1px 0 rgba(255,255,255,.35) inset,
0 10px 24px -10px rgba(255,157,46,.8),
0 22px 44px -24px rgba(0,0,0,.9);
transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
#page-csgo-roulette-canada .crc-btn:hover{
transform:translateY(-2px);
filter:brightness(1.06);
box-shadow:0 1px 0 rgba(255,255,255,.4) inset,
0 16px 34px -10px rgba(255,157,46,.9),
0 30px 60px -28px rgba(0,0,0,.95);
}
#page-csgo-roulette-canada .crc-btn:active{transform:translateY(0);}
/* CHALK variant — a solid cream pill, deep-plum label at 17.0:1. The first
draft made this a gold GHOST pill, which put the hero's only CTA at the
weakest weight on the page; a page whose every ground is dark needs its
primary action filled. */
#page-csgo-roulette-canada .crc-btn--chalk{
background:linear-gradient(135deg,#ffffff 0%,#f4ecff 100%);
color:#150b20;
box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
0 12px 28px -12px rgba(255,255,255,.4),
0 26px 52px -26px rgba(255,51,85,.5);
}
/* ══════════════════════════════════════════════════════════════════════
HERO — rule 24: full-bleed, image-free, STATIC gradient, one CTA,
centred ~900px column.
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-canada .crc-hero{
width:100%;
padding:clamp(76px,9vw,140px) var(--crc-pad) clamp(72px,8vw,120px);
text-align:center;
background:
radial-gradient(1100px 520px at 18% 0%, rgba(255,51,85,.30) 0%, rgba(255,51,85,0) 62%),
radial-gradient(900px 460px at 86% 14%, rgba(255,194,68,.22) 0%, rgba(255,194,68,0) 60%),
radial-gradient(700px 520px at 50% 108%, rgba(124,44,180,.28) 0%, rgba(124,44,180,0) 68%),
linear-gradient(168deg,#1b0d26 0%,#120818 55%,#0a0510 100%);
border-bottom:1px solid var(--crc-line);
}
#page-csgo-roulette-canada .crc-hero__in{
max-width:900px;
margin-inline:auto;
}
/* the pocket strip, stretched: three rounded segments red / black / gold */
#page-csgo-roulette-canada .crc-hero__rule{
display:inline-flex;align-items:center;gap:7px;margin:0 0 28px;
}
#page-csgo-roulette-canada .crc-hero__rule i{
display:block;height:7px;border-radius:999px;
}
#page-csgo-roulette-canada .crc-hero__rule i:nth-child(1){width:46px;background:linear-gradient(90deg,var(--crc-red),var(--crc-red-2));}
#page-csgo-roulette-canada .crc-hero__rule i:nth-child(2){width:16px;background:rgba(255,255,255,.28);}
#page-csgo-roulette-canada .crc-hero__rule i:nth-child(3){width:34px;background:linear-gradient(90deg,var(--crc-gold),var(--crc-gold-2));}
#page-csgo-roulette-canada .crc-hero__p{
margin:0;
font-size:clamp(17px,1.35vw,19px);
line-height:1.72;
color:#ddd4e6; /* 12.9:1 on the darkest hero stop */
}
/* ── breadcrumb ──────────────────────────────────────────────────────── */
#page-csgo-roulette-canada .crc-crumbs{
background:var(--crc-void);
border-bottom:1px solid var(--crc-line);
}
#page-csgo-roulette-canada .crc-crumbs__in{
display:flex;align-items:center;gap:10px;
padding-block:16px;
font-size:16px;
}
/* the icon is dark indigo — seat it on a pale plate, never recolour it */
#page-csgo-roulette-canada .crc-crumbs__in img{
display:block;width:16px;height:16px;
box-sizing:content-box;
padding:6px;
border-radius:999px;
background:#efe9f5;
}
#page-csgo-roulette-canada a.crc-crumbs__home{color:var(--crc-gold);text-decoration:none;font-weight:600;}
#page-csgo-roulette-canada a.crc-crumbs__home:hover{color:#ffd98a;text-decoration:underline;text-underline-offset:4px;}
#page-csgo-roulette-canada .crc-crumbs__here{color:var(--crc-mute);}
/* ══════════════════════════════════════════════════════════════════════
SECTIONS + the section header block
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-canada .crc-sec{
padding-block:var(--crc-sec-y);
position:relative;
}
#page-csgo-roulette-canada .crc-sec--chalk{background:var(--crc-plum);}
#page-csgo-roulette-canada .crc-sec--paper{background:var(--crc-void);}
#page-csgo-roulette-canada .crc-sec--plate{
background:
radial-gradient(760px 380px at 12% 0%, rgba(255,51,85,.16) 0%, rgba(255,51,85,0) 66%),
radial-gradient(640px 360px at 92% 100%, rgba(255,194,68,.12) 0%, rgba(255,194,68,0) 64%),
linear-gradient(162deg,var(--crc-felt-a) 0%,var(--crc-felt-b) 100%);
border-block:1px solid var(--crc-line);
}
#page-csgo-roulette-canada .crc-band{margin-bottom:clamp(36px,4vw,60px);}
/* NOTE: .crc-band__in IS a .crc-wrap, and .crc-wrap carries margin-inline:auto.
Setting max-width HERE would re-centre the band and push the heading ~110px
right of the body copy under it — the -466 trap. The measure lives on the
heading instead, which has no auto margins. */
#page-csgo-roulette-canada .crc-band__in{padding-bottom:0;}
#page-csgo-roulette-canada .crc-band__in .crc-h2{max-width:980px;}
/* SECTION MARK — the pocket strip reduced to three rounded segments.
Lives at wrapper level in every band, never inside a split's copy column. */
#page-csgo-roulette-canada .crc-pocket{
display:flex;align-items:center;gap:6px;
width:max-content;
margin:0 0 20px;
}
#page-csgo-roulette-canada .crc-pocket i{display:block;height:8px;border-radius:999px;}
#page-csgo-roulette-canada .crc-pocket i:nth-child(1){width:38px;background:linear-gradient(90deg,var(--crc-red),var(--crc-red-2));}
#page-csgo-roulette-canada .crc-pocket i:nth-child(2){width:14px;background:rgba(255,255,255,.26);}
#page-csgo-roulette-canada .crc-pocket i:nth-child(3){width:26px;background:linear-gradient(90deg,var(--crc-gold),var(--crc-gold-2));}
#page-csgo-roulette-canada .crc-body{position:relative;}
/* ══════════════════════════════════════════════════════════════════════
THE POCKET PLATE — the signature component
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-canada .crc-grid{display:grid;gap:clamp(22px,2.4vw,34px);}
#page-csgo-roulette-canada .crc-grid--2{
grid-template-columns:repeat(2,minmax(0,1fr));
counter-reset:crcpocket;
}
#page-csgo-roulette-canada .crc-cell{
counter-increment:crcpocket;
position:relative;
padding:clamp(34px,3vw,44px) clamp(26px,2.4vw,38px) clamp(30px,2.6vw,40px);
border:1px solid var(--crc-line);
border-radius:var(--crc-r-md);
background:linear-gradient(180deg,var(--crc-surface) 0%,#1a1029 100%);
box-shadow:var(--crc-lift);
overflow:hidden;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* the pocket strip across the top edge */
#page-csgo-roulette-canada .crc-cell::before{
content:"";
position:absolute;inset:0 0 auto 0;height:6px;
background:linear-gradient(90deg,
var(--crc-red) 0 26%, rgba(255,255,255,.12) 26% 34%,
var(--crc-gold) 34% 56%, rgba(255,255,255,.12) 56% 64%,
var(--crc-red-2) 64% 100%);
}
/* the pocket number chip */
#page-csgo-roulette-canada .crc-cell::after{
content:counter(crcpocket,decimal-leading-zero);
position:absolute;top:22px;right:24px;
display:grid;place-items:center;
width:44px;height:44px;
border-radius:999px;
border:1px solid var(--crc-gold-line);
background:rgba(255,194,68,.10);
color:var(--crc-gold);
font-size:16px;font-weight:800;letter-spacing:.02em;
font-variant-numeric:tabular-nums;
}
#page-csgo-roulette-canada .crc-cell:hover{
transform:translateY(-4px);
border-color:var(--crc-line-2);
box-shadow:var(--crc-lift-hi);
}
#page-csgo-roulette-canada .crc-cell .crc-h3{padding-right:64px;}
/* ── the lead paragraph above the plates ─────────────────────────────── */
#page-csgo-roulette-canada .crc-body > .crc-p--lead{max-width:76ch;margin-bottom:clamp(30px,3vw,44px);}
/* ── the wide media strip ────────────────────────────────────────────── */
#page-csgo-roulette-canada .crc-strip{
margin:0 0 clamp(34px,3.6vw,52px);
border-radius:var(--crc-r-lg);
overflow:hidden;
border:1px solid var(--crc-line);
box-shadow:var(--crc-lift);
background:#120a1c;
}
#page-csgo-roulette-canada .crc-strip img{
display:block;width:100%;height:auto;
aspect-ratio:1560/351;
object-fit:contain;
}
/* ══════════════════════════════════════════════════════════════════════
VARIANT GALLERY — 21 tiles = 3 x 7, tiles exactly. Each cell carries the
ART'S OWN aspect ratio (all 21 assets are ~1.84:1) and object-fit:contain,
so nothing is cropped and nothing is letterboxed.
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-canada .crc-plates{
list-style:none;margin:0 0 clamp(30px,3vw,44px);padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(20px,2.2vw,30px);
}
#page-csgo-roulette-canada .crc-plate{
display:flex;flex-direction:column;gap:16px;
padding:16px 16px 20px;
border:1px solid var(--crc-line);
border-radius:var(--crc-r-md);
background:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.015) 100%);
box-shadow:var(--crc-lift);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#page-csgo-roulette-canada .crc-plate:hover{
transform:translateY(-4px);
border-color:var(--crc-gold-line);
box-shadow:var(--crc-lift-hi);
}
#page-csgo-roulette-canada .crc-plate__img{
display:block;width:100%;height:auto;
aspect-ratio:206/112;
object-fit:contain;
border-radius:var(--crc-r-sm);
background:#0e0716;
}
#page-csgo-roulette-canada .crc-plate__name{
display:block;
text-align:center;
font-size:16px;font-weight:600;letter-spacing:.005em;
color:#e0d7ea;
}
/* ══════════════════════════════════════════════════════════════════════
SPLIT BANDS
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-canada .crc-split{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(30px,3.4vw,56px);
align-items:center;
}
#page-csgo-roulette-canada .crc-split--wide{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);align-items:start;}
#page-csgo-roulette-canada .crc-split--rev .crc-split__fig{order:-1;}
#page-csgo-roulette-canada .crc-split__copy{min-width:0;}
#page-csgo-roulette-canada .crc-split__fig{
margin:0;min-width:0;
border-radius:var(--crc-r-lg);
overflow:hidden;
border:1px solid var(--crc-line);
box-shadow:var(--crc-lift);
background:#120a1c;
}
#page-csgo-roulette-canada .crc-split__fig img{
display:block;width:100%;height:auto;object-fit:contain;
}
/* The collaborate banner is a 2640x1022 export. Sitting it in a half-width
column rendered it at 20% of its natural width — the "gallery too small"
complaint in miniature. It gets the full measure instead. */
#page-csgo-roulette-canada .crc-sec--plate .crc-split:not(.crc-split--wide){
grid-template-columns:minmax(0,1fr);
gap:clamp(30px,3.4vw,48px);
}
#page-csgo-roulette-canada .crc-sec--plate .crc-split:not(.crc-split--wide) .crc-split__fig{
/* break out of the wrap's own padding so a 2640px banner is not painted at
20% of its natural width — the client's "gallery too small" complaint. */
margin-inline:calc(-1 * var(--crc-pad));
}
#page-csgo-roulette-canada .crc-sec--plate .crc-split:not(.crc-split--wide) .crc-split__fig img{
aspect-ratio:2640/1022;
}
#page-csgo-roulette-canada .crc-split__fig--tall img{aspect-ratio:500/460;}
/* ══════════════════════════════════════════════════════════════════════
OFFER CHIPS — 18 recorded offerings as rounded tags
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-canada .crc-offers{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
#page-csgo-roulette-canada .crc-offer{
display:flex;align-items:center;gap:12px;
padding:13px 18px 13px 13px;
border:1px solid var(--crc-line);
border-radius:999px;
background:rgba(255,255,255,.04);
transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
#page-csgo-roulette-canada .crc-offer:hover{
background:rgba(255,194,68,.09);
border-color:var(--crc-gold-line);
transform:translateX(3px);
}
/* check.png is dark indigo — pale plate under it, asset untouched */
#page-csgo-roulette-canada .crc-offer__mk{
flex:0 0 auto;display:block;width:24px;height:24px;
box-sizing:content-box;padding:5px;
border-radius:999px;background:#efe9f5;
}
#page-csgo-roulette-canada .crc-offer a.crc-link{
border-bottom:none;font-size:16px;font-weight:600;color:#ecdfc6;
}
#page-csgo-roulette-canada .crc-offer a.crc-link:hover,
#page-csgo-roulette-canada .crc-offer a.crc-link:focus-visible{color:var(--crc-gold);}
/* ══════════════════════════════════════════════════════════════════════
THREE COLUMNS
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-canada .crc-cols{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(22px,2.4vw,34px);
}
#page-csgo-roulette-canada .crc-col{
margin:0;
padding:clamp(28px,2.6vw,38px) clamp(24px,2.2vw,32px);
border:1px solid var(--crc-line);
border-radius:var(--crc-r-md);
background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.012) 100%);
box-shadow:var(--crc-lift);
position:relative;
overflow:hidden;
}
#page-csgo-roulette-canada .crc-col::before{
content:"";position:absolute;inset:0 auto 0 0;width:4px;
background:linear-gradient(180deg,var(--crc-red),var(--crc-gold));
}
/* ══════════════════════════════════════════════════════════════════════
FAQ — rounded accordion plates
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-canada .crc-faq{display:grid;gap:16px;max-width:980px;}
#page-csgo-roulette-canada .crc-faq__item{
border:1px solid var(--crc-line);
border-radius:var(--crc-r-md);
background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.015) 100%);
box-shadow:var(--crc-lift);
overflow:hidden;
transition:border-color .18s ease, box-shadow .18s ease;
}
#page-csgo-roulette-canada .crc-faq__item[open]{
border-color:var(--crc-gold-line);
box-shadow:var(--crc-lift-hi);
}
#page-csgo-roulette-canada .crc-faq__q{
display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:24px clamp(22px,2.2vw,30px);
cursor:pointer;
list-style:none;
}
#page-csgo-roulette-canada .crc-faq__q::-webkit-details-marker{display:none;}
#page-csgo-roulette-canada .crc-faq__h{
margin:0;font-size:clamp(18px,1.4vw,21px);line-height:1.34;
letter-spacing:-.012em;color:var(--crc-text);
}
#page-csgo-roulette-canada .crc-faq__mk{
position:relative;flex:0 0 auto;
width:40px;height:40px;border-radius:999px;
border:1px solid var(--crc-gold-line);
background:rgba(255,194,68,.10);
transition:background .18s ease, transform .18s ease;
}
#page-csgo-roulette-canada .crc-faq__mk::before,
#page-csgo-roulette-canada .crc-faq__mk::after{
content:"";position:absolute;top:50%;left:50%;
width:14px;height:2px;border-radius:2px;
background:var(--crc-gold);
transform:translate(-50%,-50%);
transition:transform .18s ease, opacity .18s ease;
}
#page-csgo-roulette-canada .crc-faq__mk::after{transform:translate(-50%,-50%) rotate(90deg);}
#page-csgo-roulette-canada .crc-faq__item[open] .crc-faq__mk{background:rgba(255,194,68,.2);}
#page-csgo-roulette-canada .crc-faq__item[open] .crc-faq__mk::after{opacity:0;transform:translate(-50%,-50%) rotate(0deg);}
#page-csgo-roulette-canada .crc-faq__a{
padding:0 clamp(22px,2.2vw,30px) 26px;
max-width:74ch;
}
/* ══════════════════════════════════════════════════════════════════════
SUCCESS STORIES — 4:3 media frames at the art's own ratio
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-canada .crc-stories{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(24px,2.6vw,36px);
}
#page-csgo-roulette-canada .crc-story{
display:flex;flex-direction:column;gap:20px;
padding:16px 16px 26px;
border:1px solid var(--crc-line);
border-radius:var(--crc-r-lg);
background:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.015) 100%);
box-shadow:var(--crc-lift);
}
#page-csgo-roulette-canada .crc-vid{
position:relative;display:block;width:100%;padding:0;border:0;
border-radius:var(--crc-r-md);overflow:hidden;cursor:pointer;
background:#0e0716;
transition:transform .18s ease, box-shadow .18s ease;
}
#page-csgo-roulette-canada .crc-vid:hover{transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(0,0,0,.9);}
#page-csgo-roulette-canada .crc-story__img{
display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;
}
#page-csgo-roulette-canada .crc-vid__play{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:66px;height:66px;border-radius:999px;
background:linear-gradient(135deg,var(--crc-red),var(--crc-red-2));
box-shadow:0 12px 30px -8px rgba(255,51,85,.7);
transition:transform .18s ease;
}
#page-csgo-roulette-canada .crc-vid__play::before{
content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
border-style:solid;border-width:11px 0 11px 18px;
border-color:transparent transparent transparent #fff;
}
#page-csgo-roulette-canada .crc-vid:hover .crc-vid__play{transform:translate(-50%,-50%) scale(1.07);}
#page-csgo-roulette-canada .crc-story__frame{
display:block;width:100%;aspect-ratio:4/3;border:0;border-radius:var(--crc-r-md);background:#000;
}
#page-csgo-roulette-canada .crc-more{margin:clamp(28px,3vw,40px) 0 0;}
/* ══════════════════════════════════════════════════════════════════════
LINK MANIFEST — 36 recorded links as chips, 4 across (36 = 4 x 9)
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-canada .crc-manifest{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
}
#page-csgo-roulette-canada .crc-manifest a.crc-link{
display:flex;align-items:center;height:100%;
padding:15px 20px;
border:1px solid var(--crc-line);
border-radius:var(--crc-r-sm);
background:rgba(255,255,255,.035);
color:#ded4e8;
font-size:16px;font-weight:600;line-height:1.4;
transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
#page-csgo-roulette-canada .crc-manifest a.crc-link:hover,
#page-csgo-roulette-canada .crc-manifest a.crc-link:focus-visible{
background:rgba(255,194,68,.1);
border-color:var(--crc-gold-line);
color:var(--crc-gold);
transform:translateY(-2px);
}
/* ══════════════════════════════════════════════════════════════════════
ENQUIRY BLOCK (rule 30 — no field controls, the modal is the surface)
══════════════════════════════════════════════════════════════════════ */
/* full measure: .crc-grow__in IS a .crc-wrap, so a max-width here would
re-centre it away from the section mark (the -466 trap again). */
#page-csgo-roulette-canada .crc-grow__in{
padding:clamp(34px,3.4vw,52px);
border:1px solid var(--crc-gold-line);
border-radius:var(--crc-r-lg);
background:linear-gradient(150deg,rgba(255,51,85,.13) 0%,rgba(255,194,68,.08) 55%,rgba(255,255,255,.02) 100%);
box-shadow:var(--crc-lift-hi);
}
#page-csgo-roulette-canada .crc-consent{margin:0;font-size:16px;color:#d9cfe3;}
/* ══════════════════════════════════════════════════════════════════════
AREA WE SERVE — four rounded region cards
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-canada .crc-regions{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(18px,2vw,26px);
}
#page-csgo-roulette-canada .crc-region{
padding:clamp(26px,2.4vw,34px) clamp(22px,2vw,28px);
border:1px solid var(--crc-line);
border-radius:var(--crc-r-md);
background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.012) 100%);
box-shadow:var(--crc-lift);
}
#page-csgo-roulette-canada .crc-region .crc-h4{
display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
/* location-icon.svg is dark indigo — pale plate under it */
#page-csgo-roulette-canada .crc-region__pin{
flex:0 0 auto;display:block;width:14px;height:20px;
box-sizing:content-box;padding:7px 10px;
border-radius:999px;background:#efe9f5;
}
#page-csgo-roulette-canada a.crc-tel{
display:inline-block;margin-bottom:12px;
font-size:18px;font-weight:700;letter-spacing:-.01em;
color:var(--crc-gold);text-decoration:none;
}
#page-csgo-roulette-canada a.crc-tel:hover,
#page-csgo-roulette-canada a.crc-tel:focus-visible{color:#ffd98a;text-decoration:underline;text-underline-offset:4px;}
/* ══════════════════════════════════════════════════════════════════════
MODAL
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-canada .crc-modal{
position:fixed;inset:0;z-index:9000;
display:none;align-items: flex-start;justify-content:center;
padding:100px 20px 20px 20px; overflow-y: auto;
background:rgba(8,4,14,.78);
backdrop-filter:blur(6px);
}
#page-csgo-roulette-canada .crc-modal.is-open{display:flex;}
#page-csgo-roulette-canada .crc-modal__box{
position:relative;width:100%;max-width:640px;
border-radius:var(--crc-r-lg);
background:#fff;
box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
overflow-y: auto;
}
#page-csgo-roulette-canada .crc-modal__x{
position:absolute;top:12px;right:12px;z-index:2;
display:grid;place-items:center;
width:40px;height:40px;border:0;border-radius:999px;
background:#f0ecf5;color:#1c1026;cursor:pointer;
transition:background .16s ease;
}
#page-csgo-roulette-canada .crc-modal__x:hover{background:#e0d8ea;}
#page-csgo-roulette-canada .crc-modal__box iframe{
display:block;width:100%;min-height:820px;border:0;
}
/* ══════════════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
#page-csgo-roulette-canada .crc-manifest{grid-template-columns:repeat(3,minmax(0,1fr));}
#page-csgo-roulette-canada .crc-regions{grid-template-columns:repeat(2,minmax(0,1fr));}
#page-csgo-roulette-canada .crc-cols{grid-template-columns:repeat(1,minmax(0,1fr));}
}
@media (max-width:900px){
#page-csgo-roulette-canada .crc-split,
#page-csgo-roulette-canada .crc-split--wide{grid-template-columns:minmax(0,1fr);}
#page-csgo-roulette-canada .crc-split--rev .crc-split__fig{order:0;}
#page-csgo-roulette-canada .crc-grid--2{grid-template-columns:minmax(0,1fr);}
#page-csgo-roulette-canada .crc-stories{grid-template-columns:minmax(0,1fr);}
#page-csgo-roulette-canada .crc-plates{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:680px){
#page-csgo-roulette-canada{font-size:17px;}
#page-csgo-roulette-canada .crc-manifest{grid-template-columns:minmax(0,1fr);}
#page-csgo-roulette-canada .crc-offers{grid-template-columns:minmax(0,1fr);}
#page-csgo-roulette-canada .crc-regions{grid-template-columns:minmax(0,1fr);}
#page-csgo-roulette-canada .crc-plates{grid-template-columns:minmax(0,1fr);max-width:430px;margin-inline:auto;}
#page-csgo-roulette-canada .crc-btn{width:100%;}
#page-csgo-roulette-canada .crc-ctarow--pair{flex-direction:column;align-items:stretch;text-align:center;}
#page-csgo-roulette-canada .crc-cell::after{top:18px;right:18px;width:38px;height:38px;font-size:15px;}
#page-csgo-roulette-canada .crc-cell .crc-h3{padding-right:54px;}
#page-csgo-roulette-canada .crc-faq__q{padding:20px;}
#page-csgo-roulette-canada .crc-faq__a{padding:0 20px 22px;}
#page-csgo-roulette-canada .crc-modal__box iframe{min-height:640px;}
}
/* Rule 26 — the only motion in this sheet is the transitions above. */
@media (prefers-reduced-motion:reduce){
#page-csgo-roulette-canada *,
#page-csgo-roulette-canada *::before,
#page-csgo-roulette-canada *::after{
animation:none !important;
transition-duration:.01ms !important;
}
}