/* /csgo-roulette-script — AISHTMLNEWDESIGN-444
Page-owned styles. EVERY selector is scoped to #page-csgo-roulette-script or a
crs- 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 — DEPLOY DECK (retires "ESCROW SHELF", 2026-09)
════════════════════════════════════════════════════════════════════════
ESCROW SHELF drew this page as porcelain cells on a verdigris rail: one
border-radius in the whole sheet, no elevation, hairline everything. The
client read it as old.
DEPLOY DECK starts from what the page actually SELLS: not a casino, a
SCRIPT — source code you buy, configure and ship. So the page is a console
deck. It is LIGHT-dominant (the opposite of its /csgo-roulette-canada
sibling), built on a cool mist ground, and every unit of content is a
software pane lifted off that ground on a soft, layered shadow.
── SIGNATURE COMPONENT: THE DEPLOY PANE ───────────────────────────────
A 22px-radius white pane with a DEEP-TEAL TITLE BAR across its top edge,
carrying the three rounded status dots of a running build. Content sits
under the bar with real room around it. The pane recurs as the article bay,
the FAQ row, the region card and the variant tile, and the section mark
(.crs-node) is the same idea reduced to a bracketed index + a gradient dash:
[03] ▬▬▬▬
The index is a CSS counter, so no number is invented — nothing in the
record is added to or removed from the page.
Materials
MIST #eef4f6 the page ground
PANE #ffffff the lifted surface
DEEP #062a33 -> #0a3b45 the console band + title bars
TEAL #0b6b62 the action colour (white label at 6.5:1)
SKY #075e7a the second gradient stop
AQUA #5eead4 -> #38bdf8 the bright pill used on the deep bands
Distinctness
· from /csgo-roulette-canada (NEON WHEEL): that page is dark-dominant
red/gold with a pocket-strip card. This one is light-dominant teal/sky
with a console pane. No red and no gold appears in this sheet.
· from /csgo-trade-bot-canada (SKIN VAULT): that page alternates midnight
bands with floating panels railed in the CS:GO rarity ramp; no violet or
pink appears here, and nothing on this page carries a side rail.
· from the eight other CS:GO pages, all of which are hairline, radius-free
documentary layouts.
Rule 26: ZERO @keyframes. Motion is transition-only and only on
:hover / :focus-visible / :active / details[open].
Rule 39A: everything that paints a background owns its foreground on a
class-based selector carrying the wrapper id; this sheet sets colour on no
bare descendant element, so no prose rule can outrank a chip.
Anchor note: the inline baseline sets `#page-csgo-roulette-script a{color:
inherit}` at (1,0,1) — every anchor rule below carries the wrapper id.
Icon note: left-icon.svg and location-icon.svg are dark indigo and check.png
is dark indigo on transparent; each is seated on a pale plate, never
recoloured, and each of those plates is light so the asset stays legible.
════════════════════════════════════════════════════════════════════════ */
/* Scoped box reset — the shared layout sheet does not border-box page content. */
#page-csgo-roulette-script,
#page-csgo-roulette-script *,
#page-csgo-roulette-script *::before,
#page-csgo-roulette-script *::after{box-sizing:border-box;}
#page-csgo-roulette-script{
/* ── grounds ────────────────────────────────────────────────────────── */
--crs-mist:#eef4f6;
--crs-mist-2:#e4eef1;
--crs-pane:#ffffff;
--crs-pane-2:#f7fbfc;
--crs-deep:#062a33;
--crs-deep-2:#0a3b45;
--crs-deep-3:#04202a;
/* ── ink ────────────────────────────────────────────────────────────── */
--crs-ink:#07202a; /* headings on light — 15.9:1 on mist */
--crs-body:#2b4450; /* body on light — 9.3:1 on mist */
--crs-mute:#3f5c69; /* captions on light — 7.0:1 on mist */
--crs-on-deep:#e2f2f5; /* headings on deep — 13.6:1 */
--crs-on-deep-2:#b6d7dd; /* body on deep — 9.9:1 */
/* ── signals ────────────────────────────────────────────────────────── */
--crs-teal:#0b6b62;
--crs-teal-hi:#0d8579;
--crs-sky:#075e7a;
--crs-aqua:#5eead4;
--crs-aqua-2:#38bdf8;
--crs-lime:#a3e635;
/* ── lines ──────────────────────────────────────────────────────────── */
--crs-line:#d5e3e8;
--crs-line-2:#bed3da;
--crs-line-deep:rgba(255,255,255,.12);
/* ── elevation — layered + soft ─────────────────────────────────────── */
--crs-lift:0 1px 2px rgba(6,42,51,.06), 0 8px 18px -8px rgba(6,42,51,.14),
0 26px 48px -26px rgba(6,42,51,.24);
--crs-lift-hi:0 2px 4px rgba(6,42,51,.08), 0 16px 30px -10px rgba(6,42,51,.20),
0 40px 72px -34px rgba(6,42,51,.32);
--crs-lift-deep:0 2px 4px rgba(0,0,0,.28), 0 18px 36px -14px rgba(0,0,0,.5),
0 44px 80px -40px rgba(0,0,0,.6);
/* ── metrics ────────────────────────────────────────────────────────── */
--crs-wrap:1200px;
--crs-pad:clamp(20px,4vw,44px);
--crs-sec-y:clamp(72px,8.4vw,132px);
--crs-bar:46px; /* the deploy pane's title-bar height */
--crs-r-lg:22px;
--crs-r-md:18px;
--crs-r-sm:12px;
counter-reset:crsdeck;
font-family:"Inter",system-ui,sans-serif;
font-size:17px;
line-height:1.7;
color:var(--crs-body);
background:var(--crs-mist);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
#page-csgo-roulette-script .crs-wrap{
width:100%;
max-width:var(--crs-wrap);
margin-inline:auto;
padding-inline:var(--crs-pad);
}
/* ── base type ───────────────────────────────────────────────────────── */
#page-csgo-roulette-script .crs-h1{
margin:0 0 26px;
font-size:clamp(40px,5.2vw,70px);
line-height:1.04;
letter-spacing:-.034em;
font-weight:800;
color:var(--crs-on-deep);
}
#page-csgo-roulette-script .crs-h2{
margin:0 0 22px;
font-size:clamp(30px,3.5vw,48px);
line-height:1.11;
letter-spacing:-.028em;
font-weight:800;
color:var(--crs-ink);
max-width:20ch;
}
#page-csgo-roulette-script .crs-h2--light{color:var(--crs-on-deep);}
#page-csgo-roulette-script .crs-h3{
margin:0 0 14px;
font-size:clamp(20px,1.7vw,25px);
line-height:1.25;
letter-spacing:-.018em;
font-weight:750;
color:var(--crs-ink);
}
#page-csgo-roulette-script .crs-h3--light{color:var(--crs-ink);}
#page-csgo-roulette-script .crs-h4{
margin:0 0 12px;
font-size:clamp(19px,1.5vw,23px);
line-height:1.28;
letter-spacing:-.015em;
font-weight:750;
color:var(--crs-ink);
}
#page-csgo-roulette-script .crs-h5{
margin:0;
font-size:clamp(17px,1.35vw,20px);
line-height:1.35;
letter-spacing:-.01em;
font-weight:700;
color:var(--crs-ink);
}
#page-csgo-roulette-script .crs-p{margin:0 0 18px;color:var(--crs-body);}
#page-csgo-roulette-script .crs-p:last-child{margin-bottom:0;}
#page-csgo-roulette-script .crs-p--lead{
font-size:clamp(18px,1.5vw,21px);
line-height:1.64;
color:#223d49;
max-width:78ch;
}
#page-csgo-roulette-script .crs-p--light{color:var(--crs-on-deep-2);}
#page-csgo-roulette-script .crs-p--sm{font-size:16px;color:var(--crs-mute);}
/* ── links ───────────────────────────────────────────────────────────── */
#page-csgo-roulette-script a.crs-link{
color:var(--crs-teal);
text-decoration:none;
border-bottom:1.5px solid rgba(11,107,98,.32);
font-weight:600;
transition:color .16s ease, border-color .16s ease;
}
#page-csgo-roulette-script a.crs-link:hover,
#page-csgo-roulette-script a.crs-link:focus-visible{
color:#084f48;border-bottom-color:#084f48;
}
#page-csgo-roulette-script a.crs-link--light{
color:var(--crs-aqua);
border-bottom-color:rgba(94,234,212,.4);
}
#page-csgo-roulette-script a.crs-link--light:hover,
#page-csgo-roulette-script a.crs-link--light:focus-visible{
color:#a5f3e4;border-bottom-color:#a5f3e4;
}
#page-csgo-roulette-script a.crs-link--rule{border-bottom:none;font-weight:700;}
#page-csgo-roulette-script a.crs-link--rule:hover,
#page-csgo-roulette-script a.crs-link--rule:focus-visible{text-decoration:underline;text-underline-offset:4px;}
#page-csgo-roulette-script a:focus-visible,
#page-csgo-roulette-script button:focus-visible,
#page-csgo-roulette-script summary:focus-visible{
outline:2px solid var(--crs-teal);
outline-offset:3px;
border-radius:6px;
}
/* ══════════════════════════════════════════════════════════════════════
BUTTONS — pill, gradient
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-script .crs-ctarow{margin:32px 0 0;}
#page-csgo-roulette-script .crs-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(--crs-teal) 0%,var(--crs-sky) 100%);
color:#ffffff;
font-family:inherit;font-size:17px;font-weight:750;line-height:1.2;
letter-spacing:-.005em;
cursor:pointer;
box-shadow:0 1px 0 rgba(255,255,255,.22) inset,
0 10px 22px -10px rgba(7,94,122,.7),
0 24px 44px -26px rgba(6,42,51,.6);
transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
#page-csgo-roulette-script .crs-btn:hover{
transform:translateY(-2px);
filter:brightness(1.08);
box-shadow:0 1px 0 rgba(255,255,255,.26) inset,
0 16px 32px -10px rgba(7,94,122,.8),
0 32px 60px -30px rgba(6,42,51,.7);
}
#page-csgo-roulette-script .crs-btn:active{transform:translateY(0);}
/* bright pill, used on the deep console bands — dark label at 7.5:1 */
#page-csgo-roulette-script .crs-btn--brass{
background:linear-gradient(135deg,var(--crs-aqua) 0%,var(--crs-aqua-2) 100%);
color:#06232b;
box-shadow:0 1px 0 rgba(255,255,255,.5) inset,
0 12px 26px -10px rgba(56,189,248,.55),
0 26px 50px -28px rgba(0,0,0,.7);
}
/* ══════════════════════════════════════════════════════════════════════
HERO — rule 24. text-align:center is set on the SECTION so the rendered
alignment sweep reads it as a deliberate centred composition.
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-script .crs-hero{
width:100%;
padding:clamp(76px,9vw,140px) var(--crs-pad) clamp(72px,8vw,120px);
text-align:center;
background:
radial-gradient(1000px 500px at 16% 0%, rgba(13,148,136,.36) 0%, rgba(13,148,136,0) 62%),
radial-gradient(860px 460px at 88% 8%, rgba(56,189,248,.28) 0%, rgba(56,189,248,0) 60%),
radial-gradient(680px 460px at 52% 110%, rgba(163,230,53,.14) 0%, rgba(163,230,53,0) 66%),
linear-gradient(165deg,#083a44 0%,#062a33 52%,#04202a 100%);
}
#page-csgo-roulette-script .crs-hero__in{max-width:900px;margin-inline:auto;}
#page-csgo-roulette-script .crs-hero .crs-h1{max-width:none;}
#page-csgo-roulette-script .crs-hero__p{
margin:0;
font-size:clamp(17px,1.35vw,19px);
line-height:1.72;
color:#cfe7ec; /* 11.6:1 on the darkest hero stop */
}
/* ── breadcrumb ──────────────────────────────────────────────────────── */
#page-csgo-roulette-script .crs-crumbbar{
background:var(--crs-pane);
border-bottom:1px solid var(--crs-line);
}
#page-csgo-roulette-script .crs-crumbbar__in{
display:flex;align-items:center;gap:10px;
padding-block:16px;font-size:16px;color:var(--crs-mute);
}
#page-csgo-roulette-script .crs-crumbbar__in img{
display:block;width:16px;height:16px;
box-sizing:content-box;padding:6px;
border-radius:999px;background:var(--crs-mist);
}
#page-csgo-roulette-script a.crs-crumbbar__home{color:var(--crs-teal);text-decoration:none;font-weight:650;}
#page-csgo-roulette-script a.crs-crumbbar__home:hover{text-decoration:underline;text-underline-offset:4px;}
/* ══════════════════════════════════════════════════════════════════════
SECTIONS + section mark
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-script .crs-sec{padding-block:var(--crs-sec-y);}
#page-csgo-roulette-script .crs-sec--paper{background:var(--crs-mist);}
#page-csgo-roulette-script .crs-sec--porcelain{
background:linear-gradient(180deg,var(--crs-pane) 0%,var(--crs-pane-2) 100%);
border-block:1px solid var(--crs-line);
}
#page-csgo-roulette-script .crs-sec--vault{
background:
radial-gradient(720px 360px at 10% 0%, rgba(13,148,136,.22) 0%, rgba(13,148,136,0) 66%),
radial-gradient(620px 340px at 94% 100%, rgba(56,189,248,.16) 0%, rgba(56,189,248,0) 64%),
linear-gradient(160deg,var(--crs-deep-2) 0%,var(--crs-deep-3) 100%);
}
/* the header block hoisted out of every split copy column */
#page-csgo-roulette-script .crs-head{margin-bottom:clamp(30px,3.4vw,50px);}
/* SECTION MARK — [nn] plus a gradient dash. Counter, not authored content. */
#page-csgo-roulette-script .crs-node{
counter-increment:crsdeck;
display:flex;align-items:center;gap:12px;
width:max-content;
margin:0 0 18px;
}
#page-csgo-roulette-script .crs-node::before{
content:"[" counter(crsdeck,decimal-leading-zero) "]";
font-size:16px;font-weight:800;letter-spacing:.1em;
font-variant-numeric:tabular-nums;
color:var(--crs-teal);
}
#page-csgo-roulette-script .crs-node::after{
content:"";display:block;width:54px;height:6px;border-radius:999px;
background:linear-gradient(90deg,var(--crs-teal),var(--crs-aqua-2));
}
#page-csgo-roulette-script .crs-node--light::before{color:var(--crs-aqua);}
#page-csgo-roulette-script .crs-node--light::after{
background:linear-gradient(90deg,var(--crs-aqua),var(--crs-lime));
}
/* ══════════════════════════════════════════════════════════════════════
THE DEPLOY PANE — the signature component
══════════════════════════════════════════════════════════════════════ */
/* The deck breaks out of the wrap's own padding and each pane pads by exactly
that amount, so pane COPY lands on the page's common text column (x=164 at
1440) instead of 33px right of it. Without this the shelf section is the one
band whose body copy does not line up with every other band — the -466
symptom, which the previous design also carried. */
#page-csgo-roulette-script .crs-shelf{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(22px,2.4vw,32px);
margin-inline:calc(-1 * var(--crs-pad));
}
#page-csgo-roulette-script .crs-shelf--pair{grid-template-columns:repeat(2,minmax(0,1fr));}
#page-csgo-roulette-script .crs-bay{
position:relative;
padding:calc(var(--crs-bar) + clamp(26px,2.4vw,34px)) var(--crs-pad) clamp(28px,2.4vw,36px);
border-radius:var(--crs-r-lg);
background:var(--crs-pane);
border:1px solid var(--crs-line);
box-shadow:var(--crs-lift);
overflow:hidden;
transition:transform .18s ease, box-shadow .18s ease;
}
#page-csgo-roulette-script .crs-bay:hover{transform:translateY(-4px);box-shadow:var(--crs-lift-hi);}
/* the console title bar */
#page-csgo-roulette-script .crs-bay::before{
content:"";position:absolute;inset:0 0 auto 0;height:var(--crs-bar);
background:linear-gradient(90deg,var(--crs-deep) 0%,var(--crs-deep-2) 70%,#0e4d55 100%);
}
/* the three status dots inside it */
#page-csgo-roulette-script .crs-bay::after{
content:"";position:absolute;top:19px;left:22px;width:52px;height:9px;
background:
radial-gradient(circle 4.5px at 4.5px 4.5px, #f87171 97%, transparent 0),
radial-gradient(circle 4.5px at 26px 4.5px, #fbbf24 97%, transparent 0),
radial-gradient(circle 4.5px at 47.5px 4.5px, var(--crs-aqua) 97%, transparent 0);
}
/* A white pane sitting on the deep console band still carries the record's
"--light" text classes, which are authored for the DARK ground. The pane
owns its own foreground at (1,2,0), which outranks the (1,1,0) prose rule —
counted, not eyeballed: id+class+class beats id+class. */
#page-csgo-roulette-script .crs-bay--light{background:var(--crs-pane);}
#page-csgo-roulette-script .crs-bay--light .crs-p--light{color:var(--crs-body);}
#page-csgo-roulette-script .crs-bay--light a.crs-link--light{
color:var(--crs-teal);border-bottom-color:rgba(11,107,98,.32);
}
#page-csgo-roulette-script .crs-bay--light a.crs-link--light:hover,
#page-csgo-roulette-script .crs-bay--light a.crs-link--light:focus-visible{
color:#084f48;border-bottom-color:#084f48;
}
/* ── the wide media plate ────────────────────────────────────────────── */
#page-csgo-roulette-script .crs-plate{
margin:clamp(30px,3.2vw,46px) 0 0;
border-radius:var(--crs-r-lg);
overflow:hidden;
border:1px solid var(--crs-line);
box-shadow:var(--crs-lift);
background:#0b1c22;
}
#page-csgo-roulette-script .crs-plate img{
display:block;width:100%;height:auto;aspect-ratio:1560/351;object-fit:contain;
}
/* ══════════════════════════════════════════════════════════════════════
VARIANT TILES — 21 = 3 x 7, tiles exactly. Each cell carries the art's
own aspect ratio (~1.84:1) with object-fit:contain: no crop, no letterbox.
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-script .crs-variants{
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,28px);
}
#page-csgo-roulette-script .crs-variant{
position:relative;
padding:16px;
border-radius:var(--crs-r-md);
background:var(--crs-pane);
border:1px solid var(--crs-line);
box-shadow:var(--crs-lift);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#page-csgo-roulette-script .crs-variant:hover{
transform:translateY(-4px);
border-color:var(--crs-line-2);
box-shadow:var(--crs-lift-hi);
}
#page-csgo-roulette-script .crs-variant img{
display:block;width:100%;height:auto;
aspect-ratio:206/112;object-fit:contain;
border-radius:var(--crs-r-sm);
/* the letterbox strip left by `contain` on the few marks that are 214x120
rather than 206x112 must match the pane, or the tile's rounded corners
paint four dark arcs. */
background:var(--crs-pane-2);
}
/* ══════════════════════════════════════════════════════════════════════
SPLIT BANDS
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-script .crs-collab{display:block;}
#page-csgo-roulette-script .crs-collab__copy{max-width:78ch;}
#page-csgo-roulette-script .crs-collab__fig{
margin:clamp(32px,3.4vw,48px) calc(-1 * var(--crs-pad)) 0;
border-radius:var(--crs-r-lg);
overflow:hidden;
border:1px solid var(--crs-line-deep);
box-shadow:var(--crs-lift-deep);
background:#0b1c22;
}
#page-csgo-roulette-script .crs-collab__fig img{
display:block;width:100%;height:auto;aspect-ratio:2640/1022;object-fit:contain;
}
#page-csgo-roulette-script .crs-boost{
display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);
gap:clamp(30px,3.4vw,54px);align-items:start;
}
#page-csgo-roulette-script .crs-boost__fig{
margin:0;border-radius:var(--crs-r-lg);overflow:hidden;
border:1px solid var(--crs-line-deep);
box-shadow:var(--crs-lift-deep);
background:#0b1c22;
}
#page-csgo-roulette-script .crs-boost__fig img{
display:block;width:100%;height:auto;aspect-ratio:500/460;object-fit:contain;
}
#page-csgo-roulette-script .crs-hire{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(30px,3.4vw,54px);align-items:center;
}
#page-csgo-roulette-script .crs-hire__fig{
margin:0;border-radius:var(--crs-r-lg);overflow:hidden;
border:1px solid var(--crs-line);
box-shadow:var(--crs-lift);
background:var(--crs-pane);
}
#page-csgo-roulette-script .crs-hire__fig img{
display:block;width:100%;height:auto;aspect-ratio:696/504;object-fit:contain;
}
#page-csgo-roulette-script .crs-hire__row{
display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:28px 0 0;
}
/* ══════════════════════════════════════════════════════════════════════
OFFER CHIPS — 18 recorded offerings
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-script .crs-offers{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
#page-csgo-roulette-script .crs-offers li{
display:flex;align-items:center;gap:12px;
padding:12px 18px 12px 12px;
border-radius:999px;
background:rgba(255,255,255,.055);
border:1px solid var(--crs-line-deep);
transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
#page-csgo-roulette-script .crs-offers li:hover{
background:rgba(94,234,212,.12);
border-color:rgba(94,234,212,.4);
transform:translateX(3px);
}
/* check.png is dark indigo — pale plate, asset untouched */
#page-csgo-roulette-script .crs-offers li img{
flex:0 0 auto;display:block;width:24px;height:24px;
box-sizing:content-box;padding:5px;border-radius:999px;background:#e9f3f5;
}
#page-csgo-roulette-script .crs-offers a.crs-link{
border-bottom:none;font-size:16px;font-weight:600;color:#d6ecf0;
}
#page-csgo-roulette-script .crs-offers a.crs-link:hover,
#page-csgo-roulette-script .crs-offers a.crs-link:focus-visible{color:var(--crs-aqua);}
/* ══════════════════════════════════════════════════════════════════════
PROSE PANE — the three-paragraph advantages block
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-script .crs-prose{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(22px,2.4vw,32px);
}
#page-csgo-roulette-script .crs-prose .crs-p{
margin:0;
padding:clamp(28px,2.6vw,36px) clamp(24px,2.2vw,30px);
border-radius:var(--crs-r-lg);
background:var(--crs-pane);
border:1px solid var(--crs-line);
box-shadow:var(--crs-lift);
position:relative;overflow:hidden;
}
#page-csgo-roulette-script .crs-prose .crs-p::before{
content:"";position:absolute;inset:0 0 auto 0;height:5px;
background:linear-gradient(90deg,var(--crs-teal),var(--crs-aqua-2));
}
/* ══════════════════════════════════════════════════════════════════════
FAQ — deploy panes that expand
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-script .crs-faq{display:grid;gap:14px;max-width:1000px;}
#page-csgo-roulette-script .crs-faq__item{
border-radius:var(--crs-r-md);
background:var(--crs-pane);
border:1px solid var(--crs-line);
box-shadow:var(--crs-lift);
overflow:hidden;
transition:box-shadow .18s ease, border-color .18s ease;
}
#page-csgo-roulette-script .crs-faq__item[open]{
border-color:rgba(11,107,98,.38);
box-shadow:var(--crs-lift-hi);
}
#page-csgo-roulette-script .crs-faq__q{
display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:22px clamp(20px,2vw,28px);
cursor:pointer;list-style:none;
}
#page-csgo-roulette-script .crs-faq__q::-webkit-details-marker{display:none;}
#page-csgo-roulette-script .crs-faq__mk{
position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:999px;
background:linear-gradient(135deg,rgba(11,107,98,.12),rgba(56,189,248,.14));
border:1px solid rgba(11,107,98,.24);
transition:background .18s ease;
}
#page-csgo-roulette-script .crs-faq__mk::before,
#page-csgo-roulette-script .crs-faq__mk::after{
content:"";position:absolute;top:50%;left:50%;
width:13px;height:2px;border-radius:2px;background:var(--crs-teal);
transform:translate(-50%,-50%);
transition:transform .18s ease, opacity .18s ease;
}
#page-csgo-roulette-script .crs-faq__mk::after{transform:translate(-50%,-50%) rotate(90deg);}
#page-csgo-roulette-script .crs-faq__item[open] .crs-faq__mk::after{opacity:0;}
#page-csgo-roulette-script .crs-faq__a{padding:0 clamp(20px,2vw,28px) 24px;max-width:78ch;}
/* ══════════════════════════════════════════════════════════════════════
SUCCESS STORIES
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-script .crs-stories{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(24px,2.6vw,34px);
}
#page-csgo-roulette-script .crs-story{
display:flex;flex-direction:column;gap:20px;
padding:14px 14px 26px;
border-radius:var(--crs-r-lg);
background:rgba(255,255,255,.055);
border:1px solid var(--crs-line-deep);
box-shadow:var(--crs-lift-deep);
}
#page-csgo-roulette-script .crs-vid{
position:relative;display:block;width:100%;padding:0;border:0;
border-radius:var(--crs-r-md);overflow:hidden;cursor:pointer;background:#0b1c22;
transition:transform .18s ease, box-shadow .18s ease;
}
#page-csgo-roulette-script .crs-vid:hover{transform:translateY(-3px);}
#page-csgo-roulette-script .crs-vid img{
display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;
}
#page-csgo-roulette-script .crs-vid__play{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:64px;height:64px;border-radius:999px;
background:linear-gradient(135deg,var(--crs-aqua),var(--crs-aqua-2));
box-shadow:0 12px 30px -8px rgba(56,189,248,.7);
transition:transform .18s ease;
}
#page-csgo-roulette-script .crs-vid__play::before{
content:"";position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);
border-style:solid;border-width:10px 0 10px 17px;
border-color:transparent transparent transparent #06232b;
}
#page-csgo-roulette-script .crs-vid:hover .crs-vid__play{transform:translate(-50%,-50%) scale(1.07);}
#page-csgo-roulette-script .crs-story iframe{
display:block;width:100%;aspect-ratio:4/3;border:0;border-radius:var(--crs-r-md);background:#000;
}
#page-csgo-roulette-script .crs-more{margin:clamp(26px,3vw,38px) 0 0;}
/* ══════════════════════════════════════════════════════════════════════
LINK MANIFEST — chips, 4 across (36 = 4 x 9)
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-script .crs-manifest{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}
#page-csgo-roulette-script .crs-manifest a.crs-link{
display:flex;align-items:center;height:100%;
padding:15px 20px;
border-radius:var(--crs-r-sm);
border:1px solid var(--crs-line);
background:var(--crs-pane);
color:#1d3b47;
font-size:16px;font-weight:600;line-height:1.4;
box-shadow:0 1px 2px rgba(6,42,51,.05);
transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
}
#page-csgo-roulette-script .crs-manifest a.crs-link:hover,
#page-csgo-roulette-script .crs-manifest a.crs-link:focus-visible{
transform:translateY(-2px);
color:var(--crs-teal);
border-color:rgba(11,107,98,.4);
box-shadow:var(--crs-lift);
}
/* ══════════════════════════════════════════════════════════════════════
ENQUIRY BLOCK (rule 30)
══════════════════════════════════════════════════════════════════════ */
/* .crs-grow__in IS a .crs-wrap; a max-width here would inherit
margin-inline:auto and re-centre the block away from the section mark. */
#page-csgo-roulette-script .crs-grow__in{padding-block:0;}
#page-csgo-roulette-script .crs-consent{
margin:0;
padding:clamp(26px,2.6vw,36px);
border-radius:var(--crs-r-lg);
background:rgba(255,255,255,.06);
border:1px solid var(--crs-line-deep);
box-shadow:var(--crs-lift-deep);
font-size:16px;
color:#cfe7ec;
}
/* ══════════════════════════════════════════════════════════════════════
AREA WE SERVE
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-script .crs-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-script .crs-region{
padding:clamp(26px,2.4vw,34px) clamp(22px,2vw,28px);
border-radius:var(--crs-r-lg);
background:var(--crs-pane);
border:1px solid var(--crs-line);
box-shadow:var(--crs-lift);
}
#page-csgo-roulette-script .crs-region .crs-h5{
display:flex;align-items:center;gap:10px;margin-bottom:14px;
font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:var(--crs-teal);
}
/* location-icon.svg is dark indigo — pale plate under it */
#page-csgo-roulette-script .crs-region .crs-h5 img{
flex:0 0 auto;display:block;width:14px;height:20px;
box-sizing:content-box;padding:7px 10px;border-radius:999px;background:var(--crs-mist);
}
#page-csgo-roulette-script a.crs-tel{
display:inline-block;margin-bottom:12px;
font-size:18px;font-weight:750;letter-spacing:-.01em;
color:var(--crs-ink);text-decoration:none;
}
#page-csgo-roulette-script a.crs-tel:hover,
#page-csgo-roulette-script a.crs-tel:focus-visible{color:var(--crs-teal);text-decoration:underline;text-underline-offset:4px;}
/* ══════════════════════════════════════════════════════════════════════
MODAL
══════════════════════════════════════════════════════════════════════ */
#page-csgo-roulette-script .crs-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(4,22,28,.76);
backdrop-filter:blur(6px);
}
#page-csgo-roulette-script .crs-modal.is-open{display:flex;}
#page-csgo-roulette-script .crs-modal__box{
position:relative;width:100%;max-width:640px;
border-radius:var(--crs-r-lg);background:#fff;overflow-y: auto;
box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
}
#page-csgo-roulette-script .crs-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:var(--crs-mist);color:var(--crs-ink);
cursor:pointer;transition:background .16s ease;
}
#page-csgo-roulette-script .crs-modal__x:hover{background:var(--crs-mist-2);}
#page-csgo-roulette-script .crs-modal__box iframe{display:block;width:100%;min-height:820px;border:0;}
/* ══════════════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
#page-csgo-roulette-script .crs-manifest{grid-template-columns:repeat(3,minmax(0,1fr));}
#page-csgo-roulette-script .crs-regions{grid-template-columns:repeat(2,minmax(0,1fr));}
#page-csgo-roulette-script .crs-shelf,
#page-csgo-roulette-script .crs-prose{grid-template-columns:minmax(0,1fr);}
#page-csgo-roulette-script .crs-h2{max-width:none;}
}
@media (max-width:900px){
#page-csgo-roulette-script .crs-boost,
#page-csgo-roulette-script .crs-hire{grid-template-columns:minmax(0,1fr);}
#page-csgo-roulette-script .crs-hire__fig{order:2;}
#page-csgo-roulette-script .crs-shelf--pair{grid-template-columns:minmax(0,1fr);}
#page-csgo-roulette-script .crs-stories{grid-template-columns:minmax(0,1fr);}
#page-csgo-roulette-script .crs-variants{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:680px){
#page-csgo-roulette-script .crs-manifest{grid-template-columns:minmax(0,1fr);}
#page-csgo-roulette-script .crs-offers{grid-template-columns:minmax(0,1fr);}
#page-csgo-roulette-script .crs-regions{grid-template-columns:minmax(0,1fr);}
#page-csgo-roulette-script .crs-variants{grid-template-columns:minmax(0,1fr);max-width:430px;margin-inline:auto;}
#page-csgo-roulette-script .crs-btn{width:100%;}
#page-csgo-roulette-script .crs-hire__row{flex-direction:column;align-items:stretch;text-align:center;}
#page-csgo-roulette-script .crs-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-script *,
#page-csgo-roulette-script *::before,
#page-csgo-roulette-script *::after{
animation:none !important;
transition-duration:.01ms !important;
}
}