/* /case-study/brightplay-plinko-game-development-case-study — AISHTMLNEWDESIGN-528 Page-owned styles. EVERY selector is scoped to #page-case-study-brightplay-plinko-game-development-case-study or a csbp- 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 — PINFALL The Plinko board read as layout: an ink-plum board whose peg field appears as staggered static dot rules, the five challenges hung off round peg-discs (centred, not staggered — see the ALIGNMENT FOLLOW-UP note below), the Challenge->Solution->Result mapping descending row by row, and the four ROI stats landing in vermilion-lipped slots on the deepest board tone. Distinct from HOME COLUMN (saffron/indigo ludo), MELD ORDER (jade/gold rummy), SESSION LOG (graphite/amber poker) and DRAFT BOARD (bone/ink fantasy football). Motion is finite and user-initiated only (rule 26). CTA COLOUR RULE, learned on /case-study/rummy-game-app: a button must clear 3:1 against the surface BEHIND it (WCAG 1.4.11), and its label 4.5:1 (1.4.3). No button ever reuses a colour from the band it sits on. MEASURED (WCAG relative luminance, alpha composite where relevant): - vermilion #ff5a3c button on hero gradient stops #120d1d..#261c36 : 5.2-6.4:1 - ink #221830 label on vermilion : 5.46:1 - plum #241b31 button on bone #f6f1e9 / paper #fffcf6 : 14.6:1 / 14.9:1 - bone label on plum button : 14.6:1 - vermilion stat figure on slot plate #241b31 : 5.31:1 - muted #554968 body on bone/paper : 7.4:1+ - lavender #b9aecb body on board #1a1424 / card #241b31 : 8.5 / 7.8:1 - rust #b93318 text accents on paper : 5.78:1 Vermilion is NEVER used as text on light surfaces (3.0:1 there); on light ground the accent voice is the darker rust. */ /* ALIGNMENT FOLLOW-UP — centre-aligned throughout, requested after ship. Colour and contrast are untouched by this pass (nothing above changes); only text-align, box centring and a table divider move. The single cascade point: .csbp-wrap and .csbp-hero__inner both get text-align:center, and every plain block/inline child (headings, paragraphs, list text, table cells, CTA rows) inherits it for free — text-align is an inherited property. What does NOT inherit, and needs its own fix below: - a box with its own max-width and a non-auto margin (it would stay flush to whichever edge margin:0 pins it to, with centred text stuck inside an off-centre box) — .csbp-h2, its ::after rule, .csbp-lede, .csbp-hero__lede, .csbp-quote all get margin:auto added. - flex containers, where text-align has no say over how flex items are distributed along the main axis — .csbp-tech, .csbp-why__t and .csbp-toc__list a all get justify-content:center added. - anything with an explicit text-align already set — only .csbp-map th (text-align:left) qualified; flipped to center. - the breadcrumb is deliberately EXCLUDED. It is a left-to-right trail ("Home / Case Study / current page"), not prose, its layout matches every other case-study page's breadcrumb on this site, and this page's own .csbp-breadcrumb sits outside .csbp-wrap, so it was never going to inherit the new centring by accident. */ #page-case-study-brightplay-plinko-game-development-case-study { --csbp-board: #1a1424; /* ink-plum board */ --csbp-board-dp: #120d1d; /* deepest — the slots band */ --csbp-board-lt: #241b31; /* raised card on the board */ --csbp-verm: #ff5a3c; /* vermilion lip / balls */ --csbp-verm-dp: #e6472a; --csbp-rust: #b93318; /* vermilion's AA voice on light ground */ --csbp-bone: #f6f1e9; /* page ground */ --csbp-paper: #fffcf6; /* cards, table, breadcrumb */ --csbp-ink: #221830; /* text on light */ --csbp-muted: #554968; /* secondary text on light */ --csbp-lav: #b9aecb; /* pegs + secondary text on the board */ --csbp-onboard: #ece6f2; /* body text on the board */ --csbp-line: #ded2c2; /* rules on light */ --csbp-linline: rgba(185, 174, 203, 0.28); /* rules on the board */ font-family: "Inter", -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.65; color: var(--csbp-ink); background: var(--csbp-bone); display: block; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; text-align: center; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-section { padding: 76px 0; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-section--bone { background: var(--csbp-bone); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-section--board { background: var(--csbp-board); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-lede { margin: 0 auto; max-width: 80ch; color: var(--csbp-muted); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-section--board .csbp-lede { color: var(--csbp-onboard); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-h2 { margin: 0 auto 8px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.16; font-weight: 800; letter-spacing: -0.015em; color: var(--csbp-ink); max-width: 26ch; text-align: center; } /* the underline bar is a fixed-width block; without margin:auto it would sit flush against whichever side margin:0 left it on, under now-centred text */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-h2::after { content: ""; display: block; width: 64px; height: 5px; margin: 14px auto 28px; background: var(--csbp-verm); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-section--board .csbp-h2 { color: #fff; } /* ---------- peg rules: the static peg field (decorative, aria-hidden) ---------- */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-pegrule { height: 52px; background-image: radial-gradient(circle at 13px 13px, rgba(185, 174, 203, 0.55) 0 2.6px, transparent 3.2px), radial-gradient(circle at 0 39px, rgba(185, 174, 203, 0.32) 0 2.6px, transparent 3.2px); background-size: 26px 52px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-pegrule--hero { margin: 68px 0 -2px; } /* ---------- hero (rule 24: image-free, static gradient, one CTA) ---------- */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-hero { background: linear-gradient(158deg, #120d1d 0%, #1a1424 52%, #261c36 100%); padding: 84px 28px 0; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-hero__inner { max-width: 900px; margin: 0 auto; text-align: center; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-eyebrow { margin: 0 0 18px; font-size: 16px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--csbp-verm); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-hero__title { margin: 0 0 20px; font-size: clamp(38px, 4.6vw, 58px); line-height: 1.07; font-weight: 800; letter-spacing: -0.02em; color: #fff; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-hero__lede { margin: 0 auto 26px; color: var(--csbp-onboard); max-width: 78ch; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-hero__techlabel { margin: 0 0 12px; font-size: 18px; font-weight: 800; color: #fff; } /* flex row of pill chips: text-align:center has no effect on flex-item distribution, so the row needs its own justify-content */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-tech { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-tech li { border: 2px solid rgba(185, 174, 203, 0.55); color: var(--csbp-onboard); padding: 9px 16px; font-weight: 600; font-size: 16px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-hero__ctarow { margin: 32px 0 0; text-align: center; } /* ---------- CTA buttons ---------- */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-btn { display: inline-block; border: 0; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; padding: 17px 30px; border-radius: 2px; transition: background-color 0.18s, color 0.18s, transform 0.18s; } /* --ball: the vermilion ball — only ever dropped onto the board (dark) */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-btn--ball { background: var(--csbp-verm); color: var(--csbp-ink); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-btn--ball:hover { background: var(--csbp-verm-dp); transform: translateY(-1px); } /* --ink: the plum plate — only ever set on light ground */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-btn--ink { background: var(--csbp-board-lt); color: var(--csbp-bone); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-btn--ink:hover { background: var(--csbp-board); transform: translateY(-1px); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-btn:active { transform: translateY(0); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-section--board .csbp-btn:focus-visible, #page-case-study-brightplay-plinko-game-development-case-study .csbp-hero .csbp-btn:focus-visible, #page-case-study-brightplay-plinko-game-development-case-study .csbp-slots .csbp-btn:focus-visible { outline: 3px solid var(--csbp-lav); outline-offset: 3px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-section--bone .csbp-btn:focus-visible { outline: 3px solid var(--csbp-rust); outline-offset: 3px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-sec__ctarow { margin: 36px 0 0; text-align: center; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-slots__ctarow { margin: 42px 0 0; text-align: center; } /* ---------- breadcrumb ---------- */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-breadcrumb { background: var(--csbp-paper); border-bottom: 1px solid var(--csbp-line); display: flex; align-items: center; gap: 10px; padding: 14px 28px; font-size: 16px; color: var(--csbp-muted); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-breadcrumb__back { display: inline-flex; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-breadcrumb__leg:hover { color: var(--csbp-rust); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-breadcrumb__now { color: var(--csbp-ink); font-weight: 600; } /* ---------- contents ---------- */ /* SECTION REDESIGN — Case Study contents, modelled on /case-study/goldenwin-solutions-online-lottery-platform-case-study's .gld-index: each entry becomes a pressable draw-ticket-style card (peg number + label + travel arrow) in a 3-column grid, rather than a bare hairline-ruled text row -- the reference's own comment on that page notes a hairline-over-text gave no affordance the titles were links at all. Left-aligned by design: a left-to-right peg+label+arrow row is the whole point of the "pressable ticket" reading; centring it would fight the structure being borrowed (see the HTML header's SECTION REDESIGN note for why this reads as an intentional exception to the earlier alignment pass, not a regression of it). Two-tone card-on-section done with this page's OWN two light tokens rather than inventing a third: section stays --csbp-paper (matches the breadcrumb above it), cards sit on --csbp-bone (the warm cream also used for full sections) so a card visibly reads as an object sitting ON the section, and hover lifts to --csbp-paper (white) -- default/hover is bone/paper, the reverse pairing of every OTHER card on this page (which sit on bone and are paper), chosen deliberately so these cards read as distinct from ordinary content cards elsewhere. Vermilion is never used as TEXT on this light card (this page's own CTA-COLOUR-RULE comment measures raw vermilion at 3.0:1 on light, below AA) -- the number, arrow and hover accents all use --csbp-rust instead, same substitution the peg-ledger below makes for the identical reason. */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc { background: var(--csbp-paper); padding: 56px 0; border-bottom: 1px solid var(--csbp-line); } /* TOC REDESIGN #3 -- modelled on /case-study/sportivaplay-fantasy-sports-app-case-study .spfs-toc, measured with the design-clone extractor (not eyeballed): a 2-column grid of bordered, rounded rows, each a filled circular number badge before its label, no travel arrow. Structural values below are copied VERBATIM off that measurement -- border-radius 12px, border 1px, row padding 14px/18px, row gap 14px, badge 30x30 circle, label 17px/600, section padding 56px, title margin-bottom 24px -- because those are geometry, not brand colour. Colour is deliberately NOT copied 1:1: the reference's white-row-on-pale- green section with a dark-green/amber badge is THAT page's own palette. This page keeps its own PINFALL tokens throughout, the same rule the previous two redesigns stated ("layout borrowed, this page's own palette kept") and the same reason every case-study page in this set carries a distinct palette (see the VISUAL DIRECTION note at the top of this file). No hover state was measurable off the reference (the extractor cannot force a live :hover), so hover/focus below is this page's own existing language (border accent + lift) -- disclosed as a design choice, not presented as a copied value. Superseded from earlier the same day: a "peg row" hanging off a re-tinted .csbp-pegrule. That dot-field was this page's own invention, not tied to THIS reference, so it is dropped here rather than kept arbitrarily -- .csbp-pegrule itself is untouched and the hero still uses it. */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__title { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font-size: 16px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--csbp-rust); text-align: left; } /* rust ledger rule running off the label to the row's right margin */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--csbp-rust) 0%, var(--csbp-line) 100%); } /* 2 columns at desktop/tablet, matching the reference's own measured layout (1152px list / 556px row + 40px gap = 2 columns); 1 column below 760px, this page's OWN existing breakpoint, not the reference's exact pixel value -- see the responsive section. */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 40px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__list li { border: 0; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--csbp-line); border-radius: 12px; background: var(--csbp-bone); font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--csbp-ink); text-align: left; text-decoration: none; transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 700; color: var(--csbp-paper); background: var(--csbp-rust); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__item:hover, #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__item:focus-visible { border-color: var(--csbp-rust); background: var(--csbp-paper); transform: translateY(-2px); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__item:active { transform: translateY(0); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__item:focus-visible { outline: 3px solid var(--csbp-verm); outline-offset: 2px; } /* ---------- Challenges: a peg ledger ---------- */ /* SECTION REDESIGN, superseding the ALIGNMENT-FOLLOW-UP card treatment that preceded it: modelled on /case-study/goldenwin-solutions-online-lottery-platform-case-study's .gld-chlist -- a fixed-width peg column beside a text column, a hairline rule between rows (also closing under the LAST row, "ledger" style, not just separating rows), and NO per-item card background or border. This is left-aligned by design, same reasoning as the contents cards above: a ledger reads left to right, number then text, and centring a ledger row is centring something that was never meant to centre. Board (dark) stays the section ground; the peg keeps its original vermilion-on-dark voice (unlike the light-card contents index, no rust substitution is needed here -- vermilion on the dark board already clears AA, this page's own CTA-COLOUR-RULE comment measured the vermilion figure at 5.31:1 on this exact --csbp-board-lt tone). */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-chals { list-style: none; margin: 0; padding: 0; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-chal { display: grid; grid-template-columns: 64px 1fr; gap: 8px 26px; padding: 26px 0; border-top: 1px solid var(--csbp-linline); text-align: left; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-chal:last-child { border-bottom: 1px solid var(--csbp-linline); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-chal__body p { max-width: 64ch; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-chal__t { margin: 4px 0 8px; font-size: 20px; font-weight: 800; line-height: 1.3; color: #fff; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-chal__b { margin: 0; color: var(--csbp-lav); } /* the peg: an outline-only circle in its own fixed grid column, no fill */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-chal__n { width: 46px; height: 46px; border: 1.5px solid var(--csbp-verm); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; letter-spacing: 0.04em; color: var(--csbp-verm); } /* ---------- Solution: the mapping descending row by row ---------- */ /* ALIGNMENT FOLLOW-UP: framed wrapper (border + radius) added to match the design reference below; it was previously an unframed strip. */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-tablewrap { overflow-x: auto; border: 1px solid var(--csbp-line); border-radius: 14px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-map { width: 100%; border-collapse: collapse; background: var(--csbp-paper); } /* text-align:center on request. Flagged, not silently done: the design reference this divider is modelled on (sportivaplay) keeps its OWN mapping table left-aligned for exactly the reason data tables usually are -- multi-line prose centres less readably than it left-aligns. Doing it anyway because it was explicitly asked for "throughout the page, consistent alignment"; trivial to revert this one selector back to text-align:left if the readability trade-off isn't wanted here. */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-map th { background: var(--csbp-board-lt); border-bottom: 4px solid var(--csbp-verm); color: var(--csbp-bone); text-align: center; font-weight: 800; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; padding: 14px 18px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-map td { border-top: 1px solid var(--csbp-line); padding: 16px 18px; vertical-align: top; color: var(--csbp-muted); font-size: 16px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-map tbody tr:nth-child(odd) td { background: #faf6ee; } /* Result column: bold weight removed on request; the darker ink colour (vs. the muted grey Challenge/Solution use) is untouched -- only the font-weight was asked to go. */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-map td:last-child { color: var(--csbp-ink); } /* Column dividers between Challenge|Solution and Solution|Result, styled on /case-study/sportivaplay-fantasy-sports-app-case-study: a real with border-collapse:collapse, so a border-left on every column after the first is what actually collapses and aligns between th and td (that page's own comment prefers this over a box-shadow for exactly that reason). th + th / td + td, not :not(:first-child) -- same mechanism the reference uses. Colour is this page's own vermilion, not the reference's amber: layout borrowed, this page's identity kept. */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-map th + th, #page-case-study-brightplay-plinko-game-development-case-study .csbp-map td + td { border-left: 4px solid var(--csbp-verm); } /* ---------- Results: the ball lands — vermilion-lipped slots on the deep board ---------- */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-slots { background: var(--csbp-board-dp); border-top: 1px solid var(--csbp-linline); padding: 76px 0; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-h2--slots { color: #fff; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-stat { position: relative; border-top: 10px solid var(--csbp-verm); /* the slot lip */ background: var(--csbp-board-lt); padding: 26px 22px 28px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-stat::before { content: ""; display: block; width: 30px; height: 4px; margin: -19px 0 22px; background: var(--csbp-board-dp); } /* the mouth shadow under the lip */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-stat__n { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--csbp-verm); margin-bottom: 10px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-stat__b { display: block; color: var(--csbp-onboard); font-size: 16px; } /* ---------- Why ---------- */ /* SECTION REDESIGN, superseding the ALIGNMENT-FOLLOW-UP card treatment that preceded it: modelled on /case-study/goldenwin-solutions-online-lottery-platform-case-study's .gld-whylist -- "ruled columns," a short accent bar sitting above each title with a hairline top border, no card background or border-box at all. Left-aligned by design, same reasoning as the two sections above. 4-column grid (was 2) to match the reference's density. The numbered "1/2/3/4" prefix is gone -- see the HTML's inline comment on this list: it was never part of the preservation record, so removing it to match the reference's own unnumbered treatment isn't touching content, only this page's own earlier design layer. */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-whys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 30px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-why { border-top: 1px solid var(--csbp-line); padding-top: 18px; text-align: left; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-why::before { content: ""; display: block; width: 34px; height: 3px; background: var(--csbp-verm); margin-bottom: 16px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-why__t { margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--csbp-ink); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-why__b { margin: 0; color: var(--csbp-muted); } /* ---------- Client quote: a bone card dropped onto the board ---------- */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-quote { margin: 0 auto; background: var(--csbp-paper); border-top: 6px solid var(--csbp-verm); padding: 30px 34px; max-width: 80ch; text-align: center; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-quote blockquote { margin: 0; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-quote p { margin: 0; font-size: 1.22rem; line-height: 1.55; font-weight: 600; color: var(--csbp-ink); } /* ---------- Area We Serve ---------- */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-regions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-region { background: var(--csbp-paper); border: 1px solid var(--csbp-line); border-top: 5px solid var(--csbp-board-lt); padding: 22px 24px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-region__t { margin: 0 0 10px; font-size: 18px; font-weight: 800; letter-spacing: 0.08em; color: var(--csbp-ink); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-region__tel { margin: 0 0 10px; font-weight: 700; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-region__tel a { color: var(--csbp-rust); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-region__tel a:hover { text-decoration: underline; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-region__addr { margin: 0; color: var(--csbp-muted); font-size: 16px; } /* ---------- CTA modal ---------- */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-modal { display: none; position: fixed; inset: 0; z-index: 1000; padding: 100px 20px 20px 20px; overflow-y: auto; background: rgba(18, 13, 29, 0.78); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-modal.is-open { display: flex; align-items: flex-start; justify-content: center; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-modal__box { position: relative; width: 100%; max-width: 620px; margin: auto; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); overflow: hidden; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-modal__x { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--csbp-line); border-radius: 50%; background: #fff; color: var(--csbp-ink); cursor: pointer; transition: background-color 0.16s, color 0.16s; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-modal__x::before, #page-case-study-brightplay-plinko-game-development-case-study .csbp-modal__x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background: currentColor; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-modal__x::before { transform: translate(-50%, -50%) rotate(45deg); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-modal__x::after { transform: translate(-50%, -50%) rotate(-45deg); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-modal__x:hover { background: var(--csbp-board-lt); color: #fff; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-modal__x:focus-visible { outline: 3px solid var(--csbp-verm); outline-offset: 2px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-modal__frame { display: block; width: 100%; min-height: 860px; border: 0; } /* ---------- responsive ---------- */ @media (max-width: 1020px) { #page-case-study-brightplay-plinko-game-development-case-study .csbp-stats { grid-template-columns: repeat(2, 1fr); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-regions { grid-template-columns: repeat(2, 1fr); } /* 4-col why-columns steps to 2 before collapsing fully at 760px. The TOC's 2-col row grid stays 2 at this width -- it only collapses at 760px, alongside every other grid on the page. */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-whys { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { #page-case-study-brightplay-plinko-game-development-case-study { font-size: 16px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-wrap { padding: 0 18px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-section, #page-case-study-brightplay-plinko-game-development-case-study .csbp-slots { padding: 56px 0; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-hero { padding: 60px 18px 0; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-pegrule--hero { margin: 44px 0 -2px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-breadcrumb { padding: 12px 18px; } /* ledger row: peg above text once there's no room for a fixed 64px column */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-chal { grid-template-columns: 1fr; gap: 14px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__list { grid-template-columns: 1fr; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-stats { grid-template-columns: 1fr; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-whys { grid-template-columns: 1fr; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-regions { grid-template-columns: 1fr; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-quote { padding: 24px 22px; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-btn { width: 100%; text-align: center; padding: 16px 22px; } /* the mapping table reflows to labelled cards -- no sideways scrolling */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-tablewrap { overflow-x: visible; border: 0; border-radius: 0; } /* thead hidden from layout but kept for screen readers (clip alone left the header row pushing the page 19px wide at 375px -- see the DicePlay -497 note) */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-map thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* block display only -- width:100% plus cell padding overflowed 375px viewports */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-map, #page-case-study-brightplay-plinko-game-development-case-study .csbp-map tbody, #page-case-study-brightplay-plinko-game-development-case-study .csbp-map tr, #page-case-study-brightplay-plinko-game-development-case-study .csbp-map td { display: block; box-sizing: border-box; max-width: 100%; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-map tr { border: 1px solid var(--csbp-line); border-top: 5px solid var(--csbp-verm); margin-bottom: 16px; background: var(--csbp-paper); } #page-case-study-brightplay-plinko-game-development-case-study .csbp-map td { border-top: 0; padding: 14px 18px; } /* Stacked cards have no columns, so no vertical divider. This MUST reuse the base rule's exact "td + td" selector, not a bare "td" reset: the base rule's specificity is (1,1,2); a plain ".csbp-map td { border-left: 0 }" here would only be (1,1,1) and LOSE to the base rule regardless of being later in source, leaving a stray vermilion bar down every stacked card. Same trap the sportivaplay reference's own stylesheet documents and guards against for this identical pattern. */ #page-case-study-brightplay-plinko-game-development-case-study .csbp-map td + td { border-left: 0; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-map tbody tr:nth-child(odd) td { background: transparent; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-map td::before { content: attr(data-label); display: block; font-size: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--csbp-rust); margin-bottom: 4px; } } @media (prefers-reduced-motion: reduce) { #page-case-study-brightplay-plinko-game-development-case-study .csbp-btn, #page-case-study-brightplay-plinko-game-development-case-study .csbp-btn:hover { transition: none; transform: none; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-modal__x, #page-case-study-brightplay-plinko-game-development-case-study .csbp-modal__x:hover { transition: none; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__item { transition-duration: 0.01ms !important; } #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__item:hover, #page-case-study-brightplay-plinko-game-development-case-study .csbp-toc__item:focus-visible { transform: none; } }