/* ══════════════════════════════════════════════════════════════════════════ /baccarat-software — page-isolated stylesheet AISHTMLNEWDESIGN-390 Visual direction: "BEAD PLATE". The four card-table pages already built in this repo took the obvious objects with them: "Ivory Table" (/blackjack-game-development, ink / bone / crimson, composed as a dealt hand), "Dealer's Felt" (/blackjack-software- canada, felt green / aged brass, chip rail + brass plaque), "The Count Room" (/blackjack-software-script, plum-black / chalk / orchid, the dealer's SHOE) and "Cut Deck" (/card-game-development, card stock / slate / violet, corner index + die-cut). Between them the felt, the ivory table, the count room and the cut deck are spoken for, and baccarat's own headline objects — the shoe, the felt layout, the card — sit directly on top of them. So this page takes the one piece of baccarat apparatus none of them can claim, and the one the RECORD itself keeps naming: the SCOREBOARD. "baccarat scoreboard software" appears five times in the preservation record; the bead plate is the lacquered board beside every baccarat table on which the shoe's results are recorded. That choice also fits what this page actually is. It carries a development PROCESS, a "Complete Process", a "Custom Multi-Table … Development Process", a Technology Stack and Core Pillars — it is a build-and-deliver page at least as much as a game page. A bead plate is a RECORD, read column-major: entries fill a column top to bottom and step right. So the page's long sequences (the 19-step process) are set as a column FLOW, not a grid, and every fixed set is sized to tile exactly with no vacant cell. Materials, and why they are not any neighbour's: · LACQUER (#0a1b35 / #122a4d) — the board itself. A navy-black, not the Ivory Table's warm ink, not the Count Room's plum. · SHELL (#eef1f6) — a COOL porcelain grey as the page's dominant reading ground. All four neighbours read on a WARM paper (bone, bone, chalk, linen); this one deliberately does not, so it separates at a glance rather than on inspection. · SIGNAL (#3a3d92) — one action colour, and it is not chosen at random: every icon the record ships (creative-game-design.svg, requirement-analysis.svg, circle-with-shadow.svg, usa-check-icon.svg, location-icon.svg) is a self-contained #3E4095 indigo disc, and the record's own banner artwork is navy blue. The page is built to the art it was given instead of making that art look foreign. No crimson, no brass, no violet, no felt green — none of the four neighbours' accents. Not the /bitcoin-slot-machine "INDIGO VAT" palette either: that page's GROUND is indigo with warm linen cloth and madder buttons. Here indigo is only ever the accent, the ground is cool grey, and there is no madder. Motif: the BEAD — a rounded cell with a single filled bead in it. It is the section mark at wrapper level, it repeats at half scale as the corner bead on every plate cell, and it is the marker on every list. Nothing else is used as a section device: no index numerals, no bracket arms, no tally strokes, no chevrons, no offset plate. Every rule is scoped to #page-baccarat-software or a bs- prefixed class, so this file can never touch the shared header/footer (owned by /assets/css/ais-*.css + /assets/js/ais-header.js / ais-footer.js). The UA body-margin reset is NOT restated here — /assets/css/ais-layout.css owns it (frontend-design §33). Design contract (.claude/skills/frontend-design/SKILL.md): rules 1, 2, 23, 24, 25, 26, 29 and 30 — Inter; nothing below 16px; no slate body copy on light (#1e2735 floor); image-free full-bleed hero in a centred ~900px column; one CTA per section with page-unique labels; zero @keyframes and zero 'infinite' (every transition below is a finite response to hover, focus, press or
open); real decoded image dimensions; and no enquiry control anywhere — every CTA is a data-cta-modal trigger. ══════════════════════════════════════════════════════════════════════════ */ #page-baccarat-software{ /* ── palette ─────────────────────────────────────────────────────────── */ --bs-lacquer:#0a1b35; /* the board */ --bs-lacquer-2:#122a4d; /* raised surface on the board */ --bs-lacquer-3:#2b4571; /* hairline on the board */ --bs-lacquer-deep:#061224; /* deepest edge of the board */ --bs-shell:#eef1f6; /* cool porcelain — the page's ground */ --bs-shell-2:#e4e9f1; --bs-paper:#ffffff; --bs-line:#d6dde8; /* hairline on shell / paper */ --bs-line-2:#b6c2d3; --bs-body:#1e2735; /* 13.1:1 on shell, 14.4:1 on paper */ --bs-body-2:#3b485c; /* 7.6:1 on shell — captions only */ --bs-on-lacquer:#d7e0ee; /* 13.1:1 on the lacquer */ --bs-on-lacquer-2:#a9bad4; /* 7.4:1 on the lacquer */ --bs-strong:#0a1b35; --bs-sig:#3a3d92; /* the ONE action colour — 9.1:1 on white */ --bs-sig-deep:#2a2c72; /* pressed / hover */ --bs-sig-soft:#9ea5ee; /* the signal as it reads ON the lacquer */ --bs-sig-tint:#ecedfb; --bs-wrap:1240px; --bs-gut:clamp(20px,4vw,40px); --bs-sec:clamp(56px,7vw,104px); --bs-r:6px; font-family:"Inter",system-ui,sans-serif; font-size:17px; line-height:1.65; color:var(--bs-body); background:var(--bs-shell); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; } /* ── element floor. Every selector carries the wrapper id, and each one is written out in full: a group selector like `#page-x h1,h2,h3` leaks h2 and h3 to the WHOLE DOCUMENT and collapsed every margin on a page once (AISHTMLNEWDESIGN-459). ─────────────────────────────────────────────── */ #page-baccarat-software p{margin:0;} #page-baccarat-software h1{margin:0;font-weight:800;letter-spacing:-0.022em;line-height:1.06;} #page-baccarat-software h2{margin:0;font-weight:800;letter-spacing:-0.018em;line-height:1.14;} #page-baccarat-software h3{margin:0;font-weight:700;letter-spacing:-0.008em;line-height:1.3;} #page-baccarat-software ul{margin:0;padding:0;list-style:none;} #page-baccarat-software img{display:block;max-width:100%;} #page-baccarat-software b{font-weight:700;color:var(--bs-strong);} #page-baccarat-software table{border-collapse:collapse;width:100%;} /* ── the shared wrapper. Nothing that IS a section wrapper ever takes a max-width of its own: the ONE wrap below owns the measure, so every section mark and every copy column lands on the same left edge. ──────────────── */ #page-baccarat-software .bs-wrap{ max-width:var(--bs-wrap); margin-inline:auto; padding-inline:var(--bs-gut); width:100%; box-sizing:border-box; } /* ── THE BEAD. The page's one section device: a rounded cell with a single filled bead in it, exactly as a result is recorded on a bead plate. ──── */ #page-baccarat-software .bs-mark{ flex:0 0 auto; position:relative; display:block; width:20px; height:20px; border:2px solid var(--bs-sig); border-radius:5px; background:transparent; } #page-baccarat-software .bs-mark::after{ content:""; position:absolute; inset:0; margin:auto; width:8px; height:8px; border-radius:50%; background:var(--bs-sig); } #page-baccarat-software .bs-sec--lacquer .bs-mark, #page-baccarat-software .bs-band--dark .bs-mark{border-color:var(--bs-sig-soft);} #page-baccarat-software .bs-sec--lacquer .bs-mark::after, #page-baccarat-software .bs-band--dark .bs-mark::after{background:var(--bs-sig-soft);} /* ── section shells ──────────────────────────────────────────────────── */ #page-baccarat-software .bs-sec{padding-block:var(--bs-sec);} #page-baccarat-software .bs-sec--shell{background:var(--bs-shell);} #page-baccarat-software .bs-sec--paper{background:var(--bs-paper);} #page-baccarat-software .bs-sec--lacquer{background:var(--bs-lacquer);color:var(--bs-on-lacquer);} #page-baccarat-software .bs-sec--lacquer h2, #page-baccarat-software .bs-sec--lacquer h3{color:var(--bs-paper);} /* The bead sits ABOVE the heading, not beside it. Beside it, the heading starts 42px inboard of the wrap's left edge while a section with no heading (the record's "Section 3 (no heading in source)") starts ON it — two different copy edges on one page. Stacking puts the mark, every heading and every copy column on the same line. */ #page-baccarat-software .bs-head{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding-bottom:24px; margin-bottom:38px; border-bottom:1px solid var(--bs-line); } #page-baccarat-software .bs-head h2{margin:0 0 2px;font-size:clamp(29px,3.1vw,42px);max-width:22ch;} #page-baccarat-software .bs-sec--lacquer .bs-head, #page-baccarat-software .bs-band--dark .bs-head{border-bottom-color:var(--bs-lacquer-3);} /* ══ HERO — rule 24. Full-bleed STATIC gradient, no image of any kind, one CTA, centred readable column. The gradient is a fixed two-stop lacquer ramp: no animation, no moving background-position, no shimmer. ════════ */ #page-baccarat-software .bs-hero{ width:100%; padding:clamp(64px,8.5vw,124px) var(--bs-gut) clamp(56px,7vw,96px); box-sizing:border-box; background:linear-gradient(168deg,var(--bs-lacquer-2) 0%,var(--bs-lacquer) 52%,var(--bs-lacquer-deep) 100%); color:var(--bs-on-lacquer); text-align:center; } #page-baccarat-software .bs-hero__inner{max-width:900px;margin-inline:auto;} #page-baccarat-software .bs-hero__tag{ margin:0 0 22px; font-size:16px; font-weight:700; letter-spacing:0.17em; text-transform:uppercase; color:var(--bs-sig-soft); } #page-baccarat-software .bs-hero h1{font-size:clamp(38px,5vw,62px);color:var(--bs-paper);} #page-baccarat-software .bs-hero__copy{ margin:26px auto 34px; max-width:800px; font-size:18px; line-height:1.72; color:var(--bs-on-lacquer); } #page-baccarat-software .bs-hero__terms{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin-top:34px; } #page-baccarat-software .bs-hero__terms li{ position:relative; font-size:16px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--bs-on-lacquer); } #page-baccarat-software .bs-hero__terms li::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:12px; border-radius:50%; background:var(--bs-sig-soft); vertical-align:0.16em; } /* ══ buttons. Rule 25: one per section, every label unique page-wide. ═══ */ #page-baccarat-software .bs-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 30px; border:2px solid transparent; border-radius:var(--bs-r); font-family:inherit; font-size:17px; font-weight:700; letter-spacing:0.005em; cursor:pointer; text-align:center; transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .12s ease; } #page-baccarat-software .bs-btn--sig{background:var(--bs-sig);border-color:var(--bs-sig);color:var(--bs-paper);} #page-baccarat-software .bs-btn--sig:hover{background:var(--bs-sig-deep);border-color:var(--bs-sig-deep);} #page-baccarat-software .bs-btn--paper{background:var(--bs-paper);border-color:var(--bs-paper);color:var(--bs-strong);} #page-baccarat-software .bs-btn--paper:hover{background:var(--bs-sig-tint);border-color:var(--bs-sig-tint);} #page-baccarat-software .bs-btn:active{transform:translateY(1px);} #page-baccarat-software .bs-btn:focus-visible{outline:3px solid var(--bs-sig-soft);outline-offset:3px;} #page-baccarat-software .bs-sec .bs-btn{margin-top:40px;} /* ══ links. The page baseline sets `#page-baccarat-software a{color:inherit}` at (1,0,1); a bare class rule at (0,1,0) LOSES to it — that is how phone numbers once shipped at 1.05:1. Every link rule below carries the wrapper id so it outranks the baseline on class count: (1,1,0) beats (1,0,1). ════ */ #page-baccarat-software .bs-inline{ color:var(--bs-sig); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:color .16s ease; } #page-baccarat-software .bs-inline:hover{color:var(--bs-sig-deep);text-decoration:underline;} #page-baccarat-software .bs-band--dark .bs-inline{color:var(--bs-sig-soft);} #page-baccarat-software .bs-band--dark .bs-inline:hover{color:var(--bs-paper);} #page-baccarat-software .bs-inline:focus-visible, #page-baccarat-software .bs-offer:focus-visible, #page-baccarat-software .bs-tel:focus-visible, #page-baccarat-software .bs-crumb a:focus-visible{outline:3px solid var(--bs-sig);outline-offset:2px;border-radius:3px;} /* ══ breadcrumb — a