/* ==================================================================
ROULETTE GAME DEVELOPMENT — "The Baize & The Wheel"
AIS Technolabs · AISHTMLNEWDESIGN-324
Per-page isolated stylesheet (RUNBOOK core principle 2 — no shared pool).
Every rule is scoped to #page-roulette-game-development so page CSS
cannot leak into the injected site header/footer, and layout.css
cannot bleed into page content.
Design contract: rule 24 (image-free hero, centred column),
rule 25 (one CTA per section, unique labels), rule 26 (no running
animation — motion only as a finite response to a user action).
================================================================== */
/* The browser default is body{margin:8px}. layout.css does not reset it, and
this page's own resets are all scoped inside #page-roulette-game-development,
so nothing was clearing it — leaving an 8px white gutter down every edge of
the page, header and footer included. Every other converted page resets this
in its own page.css; this one was the only one that did not. */
body { margin: 0; }
#page-roulette-game-development {
/* Palette — casino baize + brass + roulette red */
--rgd-baize: #0b3d2e;
--rgd-baize-deep: #062319;
--rgd-gold: #b8901c;
--rgd-gold-lt: #e8c86a;
--rgd-red: #a8112a;
--rgd-red-lt: #c8203c;
--rgd-noir: #12100e;
--rgd-cream: #f5f1e8;
--rgd-paper: #fffdf8;
--rgd-ink: #1c1a17;
/* rule 23: no slate-gray body copy — this is a warm dark gray, not #64748b */
--rgd-muted: #4a4438;
--rgd-line: #e0d8c7;
--rgd-pad: clamp(64px, 8vw, 104px);
--rgd-container: 1180px;
--rgd-read: 900px; /* rule 24 readable column */
--rgd-r: 12px;
--rgd-r-lg: 20px;
--rgd-t: .25s cubic-bezier(.4,0,.2,1);
display: block;
font-family: "Manrope", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.7;
color: var(--rgd-ink);
background: var(--rgd-paper);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Scoped resets — :where() keeps specificity at 0 so nothing escapes
(lesson from AISHTMLNEWDESIGN-319). */
#page-roulette-game-development :where(*, *::before, *::after) { box-sizing: border-box; }
#page-roulette-game-development :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,cite) { margin: 0; padding: 0; }
#page-roulette-game-development :where(ul,ol) { list-style: none; }
#page-roulette-game-development :where(img) { max-width: 100%; display: block; height: auto; }
#page-roulette-game-development :where(button) { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
#page-roulette-game-development :where(blockquote,cite) { font-style: normal; }
#page-roulette-game-development .fd-container {
max-width: var(--rgd-container);
margin-inline: auto;
padding-inline: clamp(16px, 5vw, 40px);
}
#page-roulette-game-development .fd-read { max-width: var(--rgd-read); margin-inline: auto; }
/* ---------- Typography ---------- */
#page-roulette-game-development .fd-eyebrow {
display: inline-block;
font-size: 12px; font-weight: 800; letter-spacing: .18em;
text-transform: uppercase; color: var(--rgd-red);
margin-bottom: 16px;
}
#page-roulette-game-development .fd-eyebrow--gold { color: var(--rgd-gold); }
#page-roulette-game-development h2.fd-h {
font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-weight: 600;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.2;
letter-spacing: normal;
color: var(--rgd-baize-deep);
}
#page-roulette-game-development h2.fd-h em { font-style: normal; color: var(--rgd-red); }
#page-roulette-game-development .fd-lede { font-size: clamp(16px, 1.6vw, 18px); color: var(--rgd-muted); line-height: 1.8; }
#page-roulette-game-development .fd-copy p + p { margin-top: 18px; }
#page-roulette-game-development .fd-copy p { color: var(--rgd-muted); }
#page-roulette-game-development .fd-copy a {
color: var(--rgd-red); font-weight: 600;
border-bottom: 1px solid rgba(168,17,42,.34);
transition: color var(--rgd-t), border-color var(--rgd-t);
}
#page-roulette-game-development .fd-copy a:hover { color: var(--rgd-baize); border-bottom-color: var(--rgd-baize); }
/* Brass diamond rule — recurring motif */
#page-roulette-game-development .fd-rule { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
#page-roulette-game-development .fd-rule::before,
#page-roulette-game-development .fd-rule::after {
content: ""; height: 1px; flex: 1;
background: linear-gradient(90deg, transparent, var(--rgd-line), transparent);
}
#page-roulette-game-development .fd-rule i { width: 7px; height: 7px; flex: none; background: var(--rgd-gold); transform: rotate(45deg); }
#page-roulette-game-development .fd-sec--dark .fd-rule::before,
#page-roulette-game-development .fd-sec--dark .fd-rule::after {
background: linear-gradient(90deg, transparent, rgba(232,200,106,.45), transparent);
}
/* ---------- Sections ---------- */
#page-roulette-game-development .fd-sec { padding: var(--rgd-pad) 0; }
#page-roulette-game-development .fd-sec--cream { background: var(--rgd-cream); }
#page-roulette-game-development .fd-sec--dark { background: var(--rgd-baize-deep); color: #efe9dc; }
#page-roulette-game-development .fd-sec--dark h2.fd-h { color: var(--rgd-paper); }
#page-roulette-game-development .fd-sec--dark .fd-lede,
#page-roulette-game-development .fd-sec--dark .fd-copy p { color: rgba(247,243,234,.8); }
#page-roulette-game-development .fd-head { margin-bottom: clamp(34px, 5vw, 56px); }
#page-roulette-game-development .fd-head--center { text-align: center; max-width: 780px; margin-inline: auto; }
/* Centred section variant. Only the section's OWN headings and copy centre —
the selector stops at direct children of .fd-container, so card grids inside
(e.g. .fd-tech) keep their left-aligned body copy, which stays readable. */
#page-roulette-game-development .fd-sec--centred > .fd-container > .fd-copy,
#page-roulette-game-development .fd-sec--centred > .fd-container > h2.fd-h {
max-width: 900px;
margin-inline: auto;
text-align: center;
}
#page-roulette-game-development h2.fd-h--sub {
margin: clamp(44px,5vw,64px) 0 clamp(28px,3vw,40px);
font-size: clamp(24px,3vw,34px);
}
/* ---------- Buttons (rule 25: one per section, unique labels) ---------- */
#page-roulette-game-development .btn-rgd {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 16px 32px; border-radius: 999px;
font-size: 15px; font-weight: 700;
transition: transform var(--rgd-t), box-shadow var(--rgd-t), background var(--rgd-t), color var(--rgd-t);
}
#page-roulette-game-development .btn-rgd:focus-visible { outline: 3px solid var(--rgd-gold); outline-offset: 3px; }
#page-roulette-game-development .btn-rgd--gold {
background: linear-gradient(135deg, var(--rgd-gold-lt), var(--rgd-gold));
color: var(--rgd-noir); box-shadow: 0 8px 24px rgba(184,144,28,.3);
}
#page-roulette-game-development .btn-rgd--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(184,144,28,.42); }
#page-roulette-game-development .btn-rgd--red {
background: var(--rgd-red); color: #fff; box-shadow: 0 8px 24px rgba(168,17,42,.26);
}
#page-roulette-game-development .btn-rgd--red:hover { background: var(--rgd-red-lt); transform: translateY(-2px); }
#page-roulette-game-development .btn-rgd--ghost { border: 1.5px solid rgba(247,243,234,.45); color: var(--rgd-paper); }
#page-roulette-game-development .btn-rgd--ghost:hover { border-color: var(--rgd-gold-lt); color: var(--rgd-gold-lt); background: rgba(184,144,28,.1); }
/* Plain text link — deliberately NOT a .btn/.cta class so rule 25 counts
one CTA in this section, not a primary+secondary pair. */
#page-roulette-game-development .fd-textlink {
display: inline-flex; align-items: center; gap: 7px;
font-size: 15px; font-weight: 700; color: var(--rgd-gold-lt);
border-bottom: 1px solid rgba(232,200,106,.45); padding-bottom: 2px;
transition: color var(--rgd-t), border-color var(--rgd-t);
}
#page-roulette-game-development .fd-textlink:hover { color: #fff; border-bottom-color: #fff; }
#page-roulette-game-development .fd-textlink--dark { color: var(--rgd-red); border-bottom-color: rgba(168,17,42,.4); }
#page-roulette-game-development .fd-textlink--dark:hover { color: var(--rgd-baize); border-bottom-color: var(--rgd-baize); }
/* ==================================================================
HERO — rule 24: no image/video/canvas, no background-image,
full-bleed static gradient, centred ~900px readable column.
================================================================== */
#page-roulette-game-development .fd-hero {
background:
radial-gradient(115% 85% at 78% 8%, rgba(184,144,28,.26), transparent 56%),
radial-gradient(95% 75% at 6% 96%, rgba(168,17,42,.24), transparent 58%),
linear-gradient(158deg, #062319 10%, #0b3d2e 56%, #051d15 100%);
/* Extended. Tuned against the fold: the sibling page (AISHTMLNEWDESIGN-323)
over-extended to 1114px and pushed the primary CTA below the fold on
every viewport, so these values are deliberately moderate. */
padding: clamp(72px, 7.2vw, 124px) 0 clamp(68px, 6.4vw, 112px);
text-align: center;
}
#page-roulette-game-development .fd-hero .fd-read { max-width: 980px; }
#page-roulette-game-development .fd-hero-badge {
display: inline-block; padding: 8px 18px; border-radius: 999px;
background: rgba(184,144,28,.14); border: 1px solid rgba(184,144,28,.36);
color: var(--rgd-gold-lt); font-size: 12.5px; font-weight: 800;
letter-spacing: .13em; text-transform: uppercase; margin-bottom: 26px;
}
#page-roulette-game-development .fd-hero h1 {
font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-weight: 700; color: var(--rgd-paper);
font-size: clamp(34px, 5.2vw, 64px); line-height: 1.14;
letter-spacing: normal; margin-bottom: 24px;
}
#page-roulette-game-development .fd-hero h1 em { font-style: normal; color: var(--rgd-gold-lt); }
#page-roulette-game-development .fd-hero p {
font-size: clamp(16px, 1.7vw, 19px); line-height: 1.8;
color: rgba(240,234,221,.86); margin-bottom: 36px;
}
#page-roulette-game-development .fd-hero-facts {
display: flex; flex-wrap: wrap; justify-content: center;
gap: clamp(18px, 4vw, 48px); margin-top: 40px;
padding-top: 30px; border-top: 1px solid rgba(232,225,209,.17);
}
#page-roulette-game-development .fd-hero-fact b {
display: block; font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--rgd-gold-lt); line-height: 1.1;
}
#page-roulette-game-development .fd-hero-fact span {
font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
color: rgba(240,234,221,.62); font-weight: 700;
}
/* ---------- Two-up split ---------- */
#page-roulette-game-development .fd-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(32px,5vw,72px); }
/* ---------- Numbered rationale cards ---------- */
#page-roulette-game-development .fd-why { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
#page-roulette-game-development .fd-why-card {
position: relative; background: var(--rgd-paper);
border: 1px solid var(--rgd-line); border-radius: var(--rgd-r-lg);
padding: 34px 28px 30px; overflow: hidden;
transition: transform var(--rgd-t), box-shadow var(--rgd-t), border-color var(--rgd-t);
}
#page-roulette-game-development .fd-why-card::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(90deg, var(--rgd-gold), var(--rgd-red));
transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
}
#page-roulette-game-development .fd-why-card:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(11,61,46,.13); border-color: rgba(184,144,28,.5); }
#page-roulette-game-development .fd-why-card:hover::before { transform: scaleX(1); }
#page-roulette-game-development .fd-why-n {
font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 40px; font-weight: 700;
color: transparent; -webkit-text-stroke: 1px rgba(168,17,42,.42);
line-height: 1; margin-bottom: 16px;
}
#page-roulette-game-development .fd-why-card p { font-size: 15.2px; color: var(--rgd-muted); line-height: 1.8; }
/* ---------- Variants gallery + the static wheel motif ----------
The wheel is NOT in the hero (rule 24) and carries no running
animation (rule 26). It rotates once, only on hover/focus, via a
finite transition — a response to a user action. */
#page-roulette-game-development .fd-wheel {
width: 128px; height: 128px; border-radius: 50%;
margin: 0 auto 26px; position: relative;
background: repeating-conic-gradient(var(--rgd-noir) 0deg 9.73deg, var(--rgd-red) 9.73deg 19.46deg);
box-shadow: 0 0 0 5px #0d3527, 0 0 0 7px var(--rgd-gold), 0 12px 30px rgba(0,0,0,.45);
transition: transform 1.1s cubic-bezier(.22,.9,.25,1);
}
#page-roulette-game-development .fd-wheel::after {
content: ""; position: absolute; inset: 34%; border-radius: 50%;
background: linear-gradient(145deg, #f4e2ab, var(--rgd-gold) 60%, #7d6314);
box-shadow: inset 0 1px 3px rgba(255,255,255,.5), 0 2px 8px rgba(0,0,0,.5);
}
#page-roulette-game-development .fd-wheel:hover,
#page-roulette-game-development .fd-wheel:focus-visible { transform: rotate(180deg); }
#page-roulette-game-development .fd-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 18px; }
#page-roulette-game-development .fd-variants li {
background: rgba(247,243,234,.05); border: 1px solid rgba(232,225,209,.14);
border-radius: var(--rgd-r); padding: 18px 14px 15px; text-align: center;
transition: transform var(--rgd-t), border-color var(--rgd-t), background var(--rgd-t), box-shadow var(--rgd-t);
}
#page-roulette-game-development .fd-variants li:hover {
transform: translateY(-6px); background: rgba(184,144,28,.1);
border-color: rgba(184,144,28,.55); box-shadow: 0 16px 38px rgba(0,0,0,.34);
}
#page-roulette-game-development .fd-variants img { width: 100%; max-width: 150px; margin: 0 auto 12px; }
#page-roulette-game-development .fd-variants span { display: block; font-size: 13.4px; font-weight: 700; color: rgba(240,234,221,.88); line-height: 1.45; }
/* ---------- Collaborate band (static gradient, no bg image) ---------- */
#page-roulette-game-development .fd-collab {
background: linear-gradient(120deg, #062319 8%, #0b3d2e 52%, #7d1023 100%);
padding: clamp(58px,7vw,92px) 0; text-align: center;
}
#page-roulette-game-development .fd-collab h2.fd-h { color: var(--rgd-paper); }
#page-roulette-game-development .fd-collab-tag {
font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: clamp(19px,2.4vw,26px); color: var(--rgd-gold-lt); margin: 16px 0 30px;
}
/* ---------- Tech cards ---------- */
#page-roulette-game-development .fd-tech { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
#page-roulette-game-development .fd-tech-card {
background: var(--rgd-cream); border: 1px solid var(--rgd-line);
border-left: 4px solid var(--rgd-gold); border-radius: var(--rgd-r);
padding: 30px 28px;
transition: transform var(--rgd-t), box-shadow var(--rgd-t), border-left-color var(--rgd-t);
}
#page-roulette-game-development .fd-tech-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,61,46,.12); border-left-color: var(--rgd-red); }
#page-roulette-game-development .fd-tech-card img { width: 23px; height: 23px; margin-bottom: 14px; }
#page-roulette-game-development .fd-tech-card h3 { font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 21px; font-weight: 700; color: var(--rgd-baize-deep); margin-bottom: 12px; }
#page-roulette-game-development .fd-tech-card p { font-size: 15.2px; color: var(--rgd-muted); line-height: 1.8; }
/* ---------- Offerings / boost list ---------- */
#page-roulette-game-development .fd-boost { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(32px,5vw,64px); align-items: center; }
#page-roulette-game-development .fd-boost-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 22px; }
#page-roulette-game-development .fd-boost-list a {
display: flex; align-items: flex-start; gap: 9px;
font-size: 15px; font-weight: 600; color: var(--rgd-ink);
padding: 7px 0; transition: color var(--rgd-t), transform var(--rgd-t);
}
#page-roulette-game-development .fd-boost-list a::before {
content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px;
background: var(--rgd-gold); transform: rotate(45deg); transition: background var(--rgd-t);
}
#page-roulette-game-development .fd-boost-list a:hover { color: var(--rgd-red); transform: translateX(4px); }
#page-roulette-game-development .fd-boost-list a:hover::before { background: var(--rgd-red); }
#page-roulette-game-development .fd-boost-media img { border-radius: var(--rgd-r-lg); box-shadow: 0 26px 58px rgba(11,61,46,.2); width: 100%; }
/* ---------- Hire band (static gradient, no bg image) ---------- */
#page-roulette-game-development .fd-hire {
background: linear-gradient(105deg, #062319 30%, #0f4835 100%);
padding: clamp(58px,7vw,92px) 0;
}
#page-roulette-game-development .fd-hire-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: clamp(32px,5vw,64px); align-items: center; }
#page-roulette-game-development .fd-hire h2.fd-h { color: var(--rgd-paper); }
#page-roulette-game-development .fd-hire-h3 {
font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 600;
font-size: clamp(20px,2.3vw,27px); color: var(--rgd-gold-lt); margin: 26px 0 22px;
}
#page-roulette-game-development .fd-hire img { border-radius: var(--rgd-r-lg); width: 100%; }
/* ---------- FAQ ---------- */
#page-roulette-game-development .fd-faq { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px clamp(20px,3vw,34px); align-items: start; counter-reset: rgdfaq; }
#page-roulette-game-development .fd-faq-col { display: flex; flex-direction: column; gap: 14px; }
#page-roulette-game-development .fd-faq-item {
background: var(--rgd-paper); border: 1px solid var(--rgd-line);
border-radius: var(--rgd-r); overflow: hidden;
transition: border-color var(--rgd-t), box-shadow var(--rgd-t);
}
#page-roulette-game-development .fd-faq-item[open] { border-color: rgba(184,144,28,.6); box-shadow: 0 12px 32px rgba(11,61,46,.1); }
#page-roulette-game-development .fd-faq-item summary {
display: flex; align-items: flex-start; gap: 14px;
padding: 20px 22px; cursor: pointer; list-style: none;
transition: background var(--rgd-t);
}
#page-roulette-game-development .fd-faq-item summary::-webkit-details-marker { display: none; }
#page-roulette-game-development .fd-faq-item summary:hover { background: rgba(184,144,28,.08); }
#page-roulette-game-development .fd-faq-item summary:focus-visible { outline: 3px solid var(--rgd-gold); outline-offset: -3px; }
#page-roulette-game-development .fd-faq-item summary::before {
counter-increment: rgdfaq; content: counter(rgdfaq, decimal-leading-zero);
flex: none; font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px;
font-weight: 700; color: var(--rgd-red); padding-top: 1px; min-width: 24px;
}
#page-roulette-game-development .fd-faq-item h3 { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--rgd-baize-deep); }
#page-roulette-game-development .fd-faq-plus { flex: none; width: 20px; height: 20px; position: relative; margin-top: 2px; }
#page-roulette-game-development .fd-faq-plus::before,
#page-roulette-game-development .fd-faq-plus::after {
content: ""; position: absolute; top: 50%; left: 50%; background: var(--rgd-gold);
transform: translate(-50%,-50%); transition: transform var(--rgd-t), background var(--rgd-t);
}
#page-roulette-game-development .fd-faq-plus::before { width: 13px; height: 2px; }
#page-roulette-game-development .fd-faq-plus::after { width: 2px; height: 13px; }
#page-roulette-game-development .fd-faq-item[open] .fd-faq-plus::after { transform: translate(-50%,-50%) rotate(90deg); }
#page-roulette-game-development .fd-faq-item[open] .fd-faq-plus::before,
#page-roulette-game-development .fd-faq-item[open] .fd-faq-plus::after { background: var(--rgd-red); }
/* ANS. label aligns under the question NUMBER (22px = summary padding-left),
not under the question text (was 60px = 22 + 24 number + 14 gap). */
#page-roulette-game-development .fd-faq-a { padding: 0 22px 22px 22px; }
#page-roulette-game-development .fd-faq-a p { font-size: 15px; color: var(--rgd-muted); line-height: 1.8; }
#page-roulette-game-development .fd-faq-a p::before { content: "ANS. "; font-weight: 800; color: var(--rgd-baize); letter-spacing: .04em; }
/* ---------- Testimonials ---------- */
#page-roulette-game-development .fd-stories { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
#page-roulette-game-development .fd-story {
background: rgba(247,243,234,.05); border: 1px solid rgba(232,225,209,.15);
border-radius: var(--rgd-r-lg); padding: 20px; display: flex; flex-direction: column;
transition: transform var(--rgd-t), border-color var(--rgd-t), background var(--rgd-t);
}
#page-roulette-game-development .fd-story:hover { transform: translateY(-5px); border-color: rgba(184,144,28,.5); background: rgba(184,144,28,.08); }
#page-roulette-game-development .fd-story-media { position: relative; display: block; border-radius: var(--rgd-r); overflow: hidden; margin-bottom: 18px; }
#page-roulette-game-development .fd-story-media img { width: 100%; aspect-ratio: 17/12; object-fit: cover; transition: transform .45s ease; }
#page-roulette-game-development .fd-story-media:hover img { transform: scale(1.06); }
#page-roulette-game-development .fd-play {
position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%;
display: grid; place-items: center; color: var(--rgd-noir); padding-left: 4px;
background: linear-gradient(135deg, var(--rgd-gold-lt), var(--rgd-gold));
box-shadow: 0 8px 26px rgba(0,0,0,.42); transition: transform var(--rgd-t);
}
#page-roulette-game-development .fd-story-media:hover .fd-play { transform: scale(1.12); }
#page-roulette-game-development .fd-story blockquote p { font-size: 15px; line-height: 1.8; color: rgba(240,234,221,.84); flex: 1; }
#page-roulette-game-development .fd-story cite { display: block; margin-top: 16px; font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; font-weight: 700; color: var(--rgd-gold-lt); }
/* ---------- Offerings link grid ---------- */
/* grid-auto-rows:1fr equalises EVERY row to the tallest card, so a card whose
label wraps to two lines no longer makes its neighbours look short. The grid
items here are the wrappers, so the must stretch and the must
fill it — otherwise the anchor sizes to its own text and the box collapses
back to one line's height inside a taller cell. */
#page-roulette-game-development .fd-offerings {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
grid-auto-rows: 1fr;
gap: 10px 18px;
}
#page-roulette-game-development .fd-offerings li { display: flex; }
#page-roulette-game-development .fd-offerings a {
display: flex; align-items: center; gap: 10px;
flex: 1;
padding: 12px 16px; border: 1px solid var(--rgd-line); border-radius: var(--rgd-r);
font-size: 14.6px; font-weight: 600; color: var(--rgd-ink); background: var(--rgd-paper);
transition: border-color var(--rgd-t), color var(--rgd-t), transform var(--rgd-t), box-shadow var(--rgd-t);
}
#page-roulette-game-development .fd-offerings a::before {
content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
background: var(--rgd-gold); transition: background var(--rgd-t), transform var(--rgd-t);
}
#page-roulette-game-development .fd-offerings a:hover { border-color: var(--rgd-red); color: var(--rgd-red); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(168,17,42,.12); }
#page-roulette-game-development .fd-offerings a:hover::before { background: var(--rgd-red); transform: scale(1.4); }
/* ---------- Contact band ---------- */
#page-roulette-game-development .fd-grow-card {
display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
gap: clamp(28px,4vw,56px); align-items: center;
background: linear-gradient(120deg, #062319, #0b3d2e 62%, #12503c);
border: 1px solid rgba(184,144,28,.32); border-radius: var(--rgd-r-lg);
padding: clamp(30px,4.5vw,56px);
}
#page-roulette-game-development .fd-grow-card h2.fd-h { color: var(--rgd-paper); font-size: clamp(24px,3vw,36px); }
#page-roulette-game-development .fd-grow-card .fd-lede { color: rgba(240,234,221,.8); }
#page-roulette-game-development .fd-grow-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
#page-roulette-game-development .fd-grow-privacy { font-size: 12.8px; color: rgba(240,234,221,.62); line-height: 1.6; }
#page-roulette-game-development .fd-grow-privacy a { color: var(--rgd-gold-lt); border-bottom: 1px solid rgba(232,200,106,.42); }
/* ---------- Regions ---------- */
#page-roulette-game-development .fd-regions { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
#page-roulette-game-development .fd-region {
background: var(--rgd-paper); border: 1px solid var(--rgd-line);
border-top: 3px solid var(--rgd-gold); border-radius: var(--rgd-r-lg); padding: 26px 22px;
transition: transform var(--rgd-t), box-shadow var(--rgd-t), border-top-color var(--rgd-t);
}
#page-roulette-game-development .fd-region:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,61,46,.14); border-top-color: var(--rgd-red); }
#page-roulette-game-development .fd-region h3 { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rgd-red); margin-bottom: 14px; }
#page-roulette-game-development .fd-region a { display: block; font-size: 17px; font-weight: 700; color: var(--rgd-baize-deep); margin-bottom: 10px; transition: color var(--rgd-t); }
#page-roulette-game-development .fd-region a:hover { color: var(--rgd-red); }
#page-roulette-game-development .fd-region p { font-size: 14.4px; color: var(--rgd-muted); line-height: 1.7; }
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
#page-roulette-game-development .fd-why,
#page-roulette-game-development .fd-boost,
#page-roulette-game-development .fd-hire-grid { grid-template-columns: 1fr; }
#page-roulette-game-development .fd-regions { grid-template-columns: 1fr 1fr; }
#page-roulette-game-development .fd-boost-media { order: -1; max-width: 440px; margin-inline: auto; }
}
@media (max-width: 900px) {
#page-roulette-game-development .fd-stories { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
#page-roulette-game-development .fd-grow-card { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
#page-roulette-game-development .fd-split,
#page-roulette-game-development .fd-tech,
#page-roulette-game-development .fd-faq { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
#page-roulette-game-development .fd-regions,
#page-roulette-game-development .fd-boost-list { grid-template-columns: 1fr; }
#page-roulette-game-development .fd-variants { grid-template-columns: repeat(2,1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
#page-roulette-game-development * { transition-duration: .001s !important; }
}
/* ---------- CTA modal (Get In Touch form) ----------
Every CTA on the page opens this. Display toggles via .is-open only —
no transition/animation, so rule 26 (motion is a finite response to a
user action) is satisfied by the click itself. */
#page-roulette-game-development .fd-modal {
position: fixed; inset: 0; z-index: 9999; display: none;
align-items: flex-start; justify-content: center;
padding: 100px 16px clamp(16px,4vw,48px) 16px;
background: rgba(6,35,25,.74); overflow-y: auto;
}
#page-roulette-game-development .fd-modal.is-open { display: flex; }
#page-roulette-game-development .fd-modal__box {
position: relative; width: 100%; max-width: 620px;
background: var(--rgd-paper); border-radius: var(--rgd-r-lg);
padding: 46px 18px 18px;
box-shadow: 0 40px 90px -40px rgba(0,0,0,.85);
border-top: 3px solid var(--rgd-gold);
}
#page-roulette-game-development .fd-modal__x {
position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
border-radius: 50%; border: 1px solid var(--rgd-line);
background: var(--rgd-paper); color: var(--rgd-ink); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background-color var(--rgd-t), color var(--rgd-t), border-color var(--rgd-t);
}
#page-roulette-game-development .fd-modal__x:hover { background: var(--rgd-red); color: #fff; border-color: var(--rgd-red); }
#page-roulette-game-development .fd-modal__x:focus-visible { outline: 3px solid var(--rgd-gold); outline-offset: 2px; }
#page-roulette-game-development .fd-modal iframe {
width: 100%; min-height: 860px; border: 0; display: block; border-radius: 10px;
}
@media (max-width: 760px) {
#page-roulette-game-development .fd-modal iframe { min-height: 920px; }
#page-roulette-game-development .fd-modal__box { padding: 44px 12px 12px; }
}
/* ---------- Per-section CTA row ----------
Rule 25: exactly one CTA per section, every label unique page-wide. */
#page-roulette-game-development .fd-cta-row {
display: flex; justify-content: center;
margin-top: clamp(32px, 4vw, 48px);
}
/* Short-viewport hero tuning.
"Extended hero" and "primary CTA above the fold on a 768px-tall laptop"
cannot both hold at one set of values — the hero carries a verbatim 90-word
lede that the ticket forbids shortening. The sibling page shipped this as a
known limit (CTA 60px below the fold at 1366x768). Rather than inherit that,
the extension is keyed to viewport HEIGHT: tall screens get the full
extended hero, short laptops get a compact one that keeps the CTA visible.
Width-based queries cannot do this — 1366x768 and 1366x1024 are the same
width but a different fold. */
@media (max-height: 850px) {
#page-roulette-game-development .fd-hero {
padding: clamp(40px, 4vw, 68px) 0 clamp(44px, 4.4vw, 72px);
}
#page-roulette-game-development .fd-hero h1 {
font-size: clamp(30px, 4vw, 46px);
margin-bottom: 18px;
}
#page-roulette-game-development .fd-hero p {
font-size: clamp(15px, 1.5vw, 16.5px);
margin-bottom: 26px;
}
#page-roulette-game-development .fd-hero-badge { margin-bottom: 18px; }
#page-roulette-game-development .fd-hero-facts { margin-top: 28px; padding-top: 22px; }
}
/* Narrow phones: hero height is dominated by text wrapping, not padding, so
the height query above cannot reclaim enough on its own. Tightening the
internal rhythm lifts the primary CTA above the 844px fold (iPhone 14/15). */
@media (max-width: 480px) {
#page-roulette-game-development .fd-hero { padding-top: 30px; }
#page-roulette-game-development .fd-hero-badge { margin-bottom: 12px; }
#page-roulette-game-development .fd-hero h1 { margin-bottom: 14px; }
#page-roulette-game-development .fd-hero p { margin-bottom: 22px; }
}