/* ══════════════════════════════════════════════════════════════════════════ /case-study/betsphere-igaming-backend-platform-case-study — page-isolated sheet AISHTMLNEWDESIGN-286 (content record: AISHTMLNEWDESIGN-558) Visual direction: "CONTROL PLANE". The subject is a backend platform — a console, not a game. The page is built from the three things an operator actually looks at: · CANVAS — the light working surface (#f8fafc). The page's ground and the ground under every prose section. · SLATE — the console (#0f172a), deepening to #0b1220 for the metric readout. Punctuation between canvas sections, never the ground. · SIGNAL — cyan (#06b6d4). The single accent that carries an action. AMBER (#f59e0b) is the alert hue and appears ONLY as the status pip on a fault row — it never becomes a surface or a button. Composition motif: the INDEX (a two-digit ordinal in tabular figures — 01, 02 — the way a console numbers rows), the STATUS PIP (a small amber square marking a fault) and the READOUT (a large figure over its label). Sections are composed as a centred hero, a crumb bar, an indexed jump list, an asymmetric label/prose split, a fault-row stack, a three-column mapping table, a four-cell readout, a two-column definition list, a centred quote and an address grid — no two sections repeat a layout, and there is no three-up feature-card grid anywhere on the page. EVERY selector below is prefixed with the page id. That is deliberate and not optional: the reset in this file sets `margin:0`/`text-align:left` on h1-h3/p/ul/ol at id specificity (1,0,1), so any bare .class rule (0,1,0) declaring those properties would be silently discarded — it would look like a deliberate design rather than a dropped rule. Keeping every rule at the same specificity removes the failure mode entirely. Design contract (frontend-design SKILL.md): · rule 1 — Inter is the primary family · rule 2 — nothing below 16px, anywhere, including labels and captions · rule 23 — no slate-gray body copy on light surfaces (#1e293b floor) · rule 24 — image-free full-bleed hero, static gradient, centred column · rule 25 — one CTA per section, every label unique page-wide · rule 26 — no running animation: zero @keyframes, zero 'infinite'; transitions only, each a finite response to hover/focus/click ══════════════════════════════════════════════════════════════════════════ */ #page-case-study-betsphere-igaming-backend-platform-case-study{ --canvas:#f8fafc; /* working surface — the page's ground */ --canvas-2:#eef2f7; --line:#dbe3ec; /* hairline on canvas */ --slate:#0f172a; /* the console — punctuation only */ --slate-2:#1e293b; --readout:#0b1220; /* deepest, for the metric band */ --line-dark:rgba(203,213,225,.16); --body:#1e293b; /* AA on canvas */ --body-soft:#475569; /* AA on canvas, secondary */ --body-light:#cbd5e1; /* AA on slate */ --signal:#06b6d4; /* the one action hue, on slate */ --signal-deep:#0e7490; /* the same signal, AA on canvas */ --alert:#f59e0b; /* fault pip only — never a surface */ --ink-on-signal:#04222a; --wrap:1200px; --col:900px; --r:14px; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--body); background:var(--canvas); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } #page-case-study-betsphere-igaming-backend-platform-case-study *,#page-case-study-betsphere-igaming-backend-platform-case-study *::before,#page-case-study-betsphere-igaming-backend-platform-case-study *::after{box-sizing:border-box;} #page-case-study-betsphere-igaming-backend-platform-case-study h1,#page-case-study-betsphere-igaming-backend-platform-case-study h2,#page-case-study-betsphere-igaming-backend-platform-case-study h3{text-align:left;margin:0;font-weight:800;letter-spacing:-.015em;line-height:1.2;} #page-case-study-betsphere-igaming-backend-platform-case-study p{margin:0;} #page-case-study-betsphere-igaming-backend-platform-case-study ul,#page-case-study-betsphere-igaming-backend-platform-case-study ol{margin:0;padding:0;list-style:none;} #page-case-study-betsphere-igaming-backend-platform-case-study img{max-width:100%;height:auto;} #page-case-study-betsphere-igaming-backend-platform-case-study a{text-decoration:none;color:inherit;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;} /* ── the one action hue ─────────────────────────────────────────────────── */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-btn{ display:inline-block;margin-top:34px;padding:16px 34px; border:2px solid transparent;border-radius:999px; font:700 17px/1.2 Inter,system-ui,sans-serif;cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease; } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-btn--signal{background:var(--signal);color:var(--ink-on-signal);box-shadow:0 6px 20px rgba(6,182,212,.30);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-btn--signal:hover,#page-case-study-betsphere-igaming-backend-platform-case-study .bsib-btn--signal:focus-visible{transform:translateY(-2px);box-shadow:0 10px 28px rgba(6,182,212,.42);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-btn--deep{background:var(--slate);color:#fff;box-shadow:0 6px 20px rgba(15,23,42,.24);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-btn--deep:hover,#page-case-study-betsphere-igaming-backend-platform-case-study .bsib-btn--deep:focus-visible{transform:translateY(-2px);background:var(--slate-2);box-shadow:0 10px 28px rgba(15,23,42,.34);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-btn:focus-visible{outline:3px solid var(--signal-deep);outline-offset:3px;} /* ══ HERO ══ rule 24 — static gradient, no image layer ─────────────────── */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-hero{ background:linear-gradient(165deg,var(--slate) 0%,#0b1220 58%,#071018 100%); padding:84px 0 76px;border-bottom:1px solid var(--line-dark); } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-hero__inner{ width:100%;max-width:var(--col);margin:0 auto;padding:0 24px;text-align:center; } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-hero__inner > *{text-align:center;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-hero__tag{ font-size:16px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--signal);margin:0 0 18px; } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-hero h1{font-size:clamp(30px,4.2vw,50px);color:#fff;text-align:center;text-wrap:balance;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-hero__copy{margin:24px auto 0;max-width:770px;font-size:18px;line-height:1.75;color:var(--body-light);} /* the house standard for this label across every converted case study */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-hero__note{ margin:38px 0 14px; font-size:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--signal); } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-hero__tech{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0; } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-hero__tech li{ padding:9px 18px;border:1px solid rgba(6,182,212,.40);border-radius:999px; font-size:16px;font-weight:600;color:var(--body-light);background:rgba(6,182,212,.09); } /* ══ BREADCRUMB ══ */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-crumbbar{background:var(--canvas-2);border-bottom:1px solid var(--line);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 0;font-size:16px;color:var(--body-soft);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-crumb a{color:var(--signal-deep);font-weight:600;border-bottom:1px solid transparent;transition:border-color .18s ease;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-crumb a:hover,#page-case-study-betsphere-igaming-backend-platform-case-study .bsib-crumb a:focus-visible{border-bottom-color:var(--signal-deep);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-crumb [aria-current="page"]{color:var(--body);font-weight:600;} /* ══ CONTENTS ══ indexed jump list */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-toc{background:var(--canvas);padding:56px 0;border-bottom:1px solid var(--line);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-toc__h{font-size:16px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--signal-deep);margin:0 0 24px;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-toc__list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 40px;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-toc__list a{ display:flex;align-items:center;gap:14px;padding:14px 18px; border:1px solid var(--line);border-radius:12px;background:#fff; font-size:17px;font-weight:600;color:var(--body); transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-toc__list a:hover,#page-case-study-betsphere-igaming-backend-platform-case-study .bsib-toc__list a:focus-visible{ border-color:var(--signal);transform:translateX(3px);box-shadow:0 4px 14px rgba(15,23,42,.07); } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-idx{ flex:0 0 auto;font-size:16px;font-weight:800;color:var(--signal-deep); font-variant-numeric:tabular-nums;letter-spacing:.04em; } /* ══ SECTION SHELLS ══ */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-sec{padding:76px 0;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-sec--light{background:var(--canvas);border-bottom:1px solid var(--line);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-sec--deep{background:var(--slate);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-sec--panel{background:var(--readout);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-h2{font-size:clamp(25px,3vw,36px);color:var(--body);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-h2--ondeep{color:#fff;} /* ══ ABOUT ══ asymmetric label / prose split */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-split{display:grid;grid-template-columns:1fr 2fr;gap:56px;align-items:start;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-split__meta{margin:16px 0 0;font-size:16px;font-weight:600;color:var(--signal-deep);display:flex;flex-direction:column;gap:2px;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-split__meta span{color:var(--body-soft);font-weight:400;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-split__prose p{font-size:18px;line-height:1.8;color:var(--body);} /* ══ CHALLENGES ══ fault rows with an amber status pip */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-faults{margin:40px 0 0;display:flex;flex-direction:column;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-fault{display:flex;gap:20px;align-items:flex-start;padding:24px 0;border-top:1px solid var(--line-dark);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-fault:first-child{border-top:0;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-pip{ flex:0 0 auto;width:10px;height:10px;margin-top:9px;border-radius:2px; background:var(--alert);box-shadow:0 0 0 4px rgba(245,158,11,.16); } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-fault__h{font-size:21px;color:#fff;margin:0 0 6px;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-fault__body p{font-size:17px;line-height:1.75;color:var(--body-light);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-inlink{color:var(--signal);font-weight:600;border-bottom:1px solid rgba(6,182,212,.5);transition:border-color .18s ease;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-inlink:hover,#page-case-study-betsphere-igaming-backend-platform-case-study .bsib-inlink:focus-visible{border-bottom-color:var(--signal);} /* ══ SOLUTION MAPPING ══ three-column data grid */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-tablewrap{margin-top:36px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map{width:100%;border-collapse:collapse;font-size:16px;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map__cap{caption-side:top;text-align:left;padding:20px 22px 0;font-size:16px;color:var(--body-soft);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map th{ text-align:left;padding:18px 22px;background:var(--slate);color:var(--signal); font-size:16px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border-bottom:1px solid var(--line); } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map td{padding:20px 22px;vertical-align:top;border-top:1px solid var(--line);font-size:16px;line-height:1.7;color:var(--body);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map tbody tr:nth-child(even){background:var(--canvas);} /* ══ READOUT ══ four metric cells */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-metrics{margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-metric{ padding:30px 24px;border:1px solid var(--line-dark);border-radius:var(--r); background:rgba(255,255,255,.04);display:flex;flex-direction:column;gap:12px; } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-metric__fig{font-size:clamp(36px,4vw,50px);font-weight:800;line-height:1;color:var(--signal);letter-spacing:-.02em;font-variant-numeric:tabular-nums;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-metric__txt{font-size:16px;line-height:1.65;color:var(--body-light);} /* ══ WHY AIS ══ two-column definition pairs */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-why{margin:40px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-why__pair{padding:26px 0;border-top:1px solid var(--line);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-why__pair:nth-child(1),#page-case-study-betsphere-igaming-backend-platform-case-study .bsib-why__pair:nth-child(2){border-top:0;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-why dt{font-size:20px;font-weight:700;color:var(--body);margin-bottom:6px;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-why dd{margin:0;font-size:17px;line-height:1.7;color:var(--body-soft);} /* ══ CLIENT QUOTE ══ centred band */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-quote__col{max-width:var(--col);text-align:center;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-quote .bsib-h2{text-align:center;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-quote__q{margin:28px 0 0;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-quote__q p{font-size:clamp(20px,2.4vw,28px);line-height:1.6;font-weight:600;color:#fff;text-wrap:balance;} /* ══ AREA WE SERVE ══ address cards */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-area .bsib-h2{text-align:center;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-regions{margin:40px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-region{padding:28px 26px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:0 2px 10px rgba(15,23,42,.05);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-region h3{ display:flex;align-items:center;gap:9px;margin:0 0 12px; font-size:16px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--signal-deep); } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-region h3 img{width:14px;height:20px;flex:0 0 auto;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-tel{display:inline-block;font-size:17px;font-weight:700;color:var(--body);margin-bottom:8px;border-bottom:1px solid transparent;transition:border-color .18s ease;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-tel:hover,#page-case-study-betsphere-igaming-backend-platform-case-study .bsib-tel:focus-visible{border-bottom-color:var(--body);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-region p{font-size:16px;line-height:1.7;color:var(--body-soft);} /* ══ CTA MODAL ══ the OVERLAY scrolls, never the box — a scrolling box draws its scrollbar in a square track and the panel renders rounded on the left, squared on the right. flex + margin:auto centres it without that. */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-modal{display:none;position:fixed;inset:0;z-index:100000;background:rgba(8,17,28,.72);padding:24px 16px;overflow-y:auto;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-modal.is-open{display:flex;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-modal__box{ position:relative;width:100%;max-width:620px;margin:auto;background:#fff; border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(8,17,28,.42); } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-modal__x{ position:absolute;top:12px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%; display:grid;place-items:center;border:1px solid var(--line);background:#fff;color:var(--body); cursor:pointer;transition:background-color .18s ease,color .18s ease; } #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-modal__x:hover,#page-case-study-betsphere-igaming-backend-platform-case-study .bsib-modal__x:focus-visible{background:var(--slate);color:#fff;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-modal__box iframe{display:block;width:100%;min-height:860px;border:0;} /* ══ RESPONSIVE ══ tested at 1280 / 768 / 375 ─────────────────────────────── */ @media (max-width:1024px){ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-metrics{grid-template-columns:repeat(2,1fr);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-split{grid-template-columns:1fr;gap:24px;} } @media (max-width:768px){ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-sec{padding:56px 0;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-hero{padding:64px 0 56px;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-toc__list{grid-template-columns:1fr;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-why{grid-template-columns:1fr;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-why__pair:nth-child(2){border-top:1px solid var(--line);} /* the mapping table becomes five stacked records — each cell keeps its column name via data-h, so the three-way mapping survives the reflow */ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-tablewrap{overflow-x:visible;border:0;background:transparent;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map,#page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map tbody,#page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map tr,#page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map td{display:block;width:100%;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map tr{margin-bottom:16px;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map tbody tr:nth-child(even){background:#fff;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map td{border-top:1px solid var(--line);} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map tr td:first-child{border-top:0;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-map td::before{ content:attr(data-h);display:block;margin-bottom:6px; font-size:16px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--signal-deep); } } @media (max-width:520px){ #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-wrap,#page-case-study-betsphere-igaming-backend-platform-case-study .bsib-hero__inner{padding:0 18px;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-metrics{grid-template-columns:1fr;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-btn{width:100%;text-align:center;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-modal{padding:12px;} #page-case-study-betsphere-igaming-backend-platform-case-study .bsib-modal__box{max-width:none;border-radius:14px;} }