/** * Chalk & Settle — Club Design System * Source: docs/design/06 — Club Dashboard & Calcutta/ * 00 — Club Design System / CLUB DESIGN SYSTEM — the Ledger + the Board v1 * _Approved — Ready to Build (club)/* (token values traced from approved screens) * * Two surfaces: * Settle — light ledger (dashboard, admin, settlement) * Chalk — dark board (TV display + member phone) * * Usage: or data-cs-surface="chalk" * Load after fonts.css. Do not replace cs-design-system.css (consumer). */ :root { /* ── Brand absolutes (never remap) ───────────────────────────────────── */ --cs-forest: #1B3D2F; --cs-forest-deep: #16321f; --cs-gold: #9A7B2D; /* figures on Settle */ --cs-gold-leaf: #C6A44E; /* figures on Chalk */ --cs-cream: #F4F0E8; --cs-paper: #FDFCF9; --cs-muted: #A09890; --cs-line: #E0DBD0; --cs-line-soft: #EBE6DB; --cs-ink: #2a2b24; --cs-red: #A8453E; /* owes / caution only */ --cs-green: #3f7a4f; /* balanced ✓ / positive (Settlement, Hat Pool) */ /* Chalk board absolutes */ --cs-slate: #14291b; --cs-slate-2: #0f1f14; --cs-chalk: #ECE7DA; --cs-card: #193320; /* member phone inset panels */ --cs-chalk-dim: rgba(236, 231, 218, 0.55); --cs-chalk-faint: rgba(236, 231, 218, 0.32); --cs-rule: rgba(236, 231, 218, 0.15); --cs-rule-gold: rgba(198, 164, 78, 0.3); /* ── Type families (club: no Cormorant) ──────────────────────────────── */ --cs-serif: 'Playfair Display', Georgia, serif; --cs-sans: 'DM Sans', system-ui, sans-serif; --cs-mono: 'DM Mono', ui-monospace, monospace; /* Aliases used by approved mockups (--serif / --sans / --mono) */ --serif: var(--cs-serif); --sans: var(--cs-sans); --mono: var(--cs-mono); /* ── Type scale (club desktop + board) ───────────────────────────────── */ --cs-type-hero: 40px; /* Playfair page hero */ --cs-type-display: 54px; /* Chalk lot name / bid hero */ --cs-type-name-lg: 24px; /* ledger row name */ --cs-type-name-md: 20px; /* tote row / brand */ --cs-type-name-sm: 17px; --cs-type-body: 15px; --cs-type-body-sm: 14px; --cs-type-mono: 14.5px; /* money figures */ --cs-type-mono-sm: 12px; --cs-type-label: 10.5px; /* uppercase mono eyebrows */ --cs-type-micro: 9.5px; --cs-tracking-label: 2px; --cs-tracking-caps: 2.5px; --cs-tracking-wide: 4px; /* ── Radii, touch, motion ────────────────────────────────────────────── */ --cs-radius-sm: 7px; --cs-radius-md: 9px; --cs-radius-lg: 13px; --cs-radius-pill: 999px; --cs-touch-min: 44px; --cs-motion-fast: 0.15s ease; --cs-motion-base: 0.25s ease; --cs-motion-slow: 0.35s ease; --cs-board-rotate: 5s; /* Hat Pool page rotation */ } /* ═══════════════════════════════════════════════════════════════════════════ SETTLE — light ledger Dashboard · admin · settlement · setup ═══════════════════════════════════════════════════════════════════════════ */ [data-cs-surface="settle"], .cs-settle { --forest: var(--cs-forest); --forest-deep: var(--cs-forest-deep); --gold: var(--cs-gold); --gold-leaf: var(--cs-gold-leaf); /* Do not alias --cream/--paper here: [data-theme="dashboard"] in cs-shared remaps --cream to ink on body. Use --cs-cream / --cs-paper absolutes. */ --muted: var(--cs-muted); --line: var(--cs-line); --line-soft: var(--cs-line-soft); --ink: var(--cs-ink); --red: var(--cs-red); --green: var(--cs-green); --bg: var(--cs-cream); --surface: var(--cs-paper); --text: var(--ink); --text-dim: var(--muted); --border: var(--line); --money: var(--gold); color-scheme: light; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; } /* ═══════════════════════════════════════════════════════════════════════════ CHALK — dark board TV display · member phone (Calcutta / Parimutuel / Hat Pool) ═══════════════════════════════════════════════════════════════════════════ */ [data-cs-surface="chalk"], .cs-chalk { --slate: var(--cs-slate); --slate-2: var(--cs-slate-2); --chalk: var(--cs-chalk); --chalk-dim: var(--cs-chalk-dim); --chalk-faint: var(--cs-chalk-faint); --card: var(--cs-card); --gold: var(--cs-gold-leaf); /* remapped: leaf becomes the money color */ --gold-deep: var(--cs-gold); --rule: var(--cs-rule); --rule-gold: var(--cs-rule-gold); --red: var(--cs-red); --green: var(--cs-green); --bg: var(--slate); --surface: var(--slate-2); --text: var(--chalk); --text-dim: var(--chalk-dim); --border: var(--rule); --money: var(--gold); color-scheme: dark; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; } /* ── Typography roles ───────────────────────────────────────────────────── */ .cs-club-serif { font-family: var(--serif); } .cs-club-sans { font-family: var(--sans); } .cs-club-mono, .cs-club-num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .cs-club-label { font-family: var(--mono); font-size: var(--cs-type-label); font-weight: 500; letter-spacing: var(--cs-tracking-label); text-transform: uppercase; color: var(--text-dim); } .cs-club-money { font-family: var(--mono); color: var(--money); font-variant-numeric: tabular-nums; } /* ── Shared component patterns (Design System core) ─────────────────────── */ /* Group head — "Live" / "From results" */ .cs-club-group-head { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: var(--cs-tracking-caps); text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 16px; } .cs-club-group-head::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* Ledger row — game catalog entry */ .cs-club-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 28px; padding: 20px 0 18px; border-bottom: 1px solid var(--border); } .cs-club-row-name { font-family: var(--serif); font-size: var(--cs-type-name-lg); font-weight: 500; color: var(--forest, var(--text)); } .cs-club-row-tag { font-family: var(--mono); font-size: var(--cs-type-label); letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); margin-top: 5px; display: block; } .cs-club-row-desc { grid-column: 1 / 2; font-size: var(--cs-type-body-sm); color: var(--text-dim); margin-top: 5px; } .cs-club-row-action { grid-row: 1 / 2; grid-column: 2 / 3; align-self: center; font-family: var(--mono); font-size: 12.5px; color: var(--forest, var(--text)); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 3px; } /* Pills — brand absolutes (legacy --cream is ink on dashboard pages) */ .cs-club-pill { font-size: 12.5px; font-weight: 500; color: var(--forest, var(--text)); background: var(--cs-paper); border: 1px solid var(--border); border-radius: var(--cs-radius-pill); padding: 6px 14px; display: inline-flex; align-items: center; gap: 7px; min-height: var(--cs-touch-min); } .cs-club-pill-active { background: var(--forest, var(--slate)); color: var(--cs-cream); border-color: var(--forest, var(--slate)); } /* Primary button */ .cs-club-btn { font-family: var(--sans); font-size: 14px; font-weight: 500; background: var(--forest, var(--gold)); color: var(--cs-cream); text-decoration: none; padding: 11px 20px; border-radius: var(--cs-radius-md); border: none; cursor: pointer; display: inline-block; min-height: var(--cs-touch-min); } /* Mono underline link */ .cs-club-link-mono { font-family: var(--mono); font-size: 12.5px; color: var(--forest, var(--text)); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 3px; } /* Italic divider — "Run by the Professional" */ .cs-club-divider { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0; } .cs-club-divider::before, .cs-club-divider::after { content: ""; height: 1px; width: 54px; background: var(--border); } .cs-club-divider span { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--text-dim); } /* Event history row */ .cs-club-event { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 6px 22px; padding: 14px 0; border-bottom: 1px solid var(--line-soft, var(--border)); } .cs-club-event-amt { font-family: var(--mono); font-size: var(--cs-type-mono); color: var(--money); } .cs-club-event-status { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); } /* ── Admin Settle helpers (Calcutta live + settlement) ───────────────────── */ /* Masthead / console / pool / settlement chrome live in admin.html scoped rules so Parimutuel + Hat Pool tabs are untouched. Shared tokens only: */ [data-cs-surface="settle"] { --cs-admin-masthead-rule: rgba(198, 164, 78, 0.28); --cs-admin-tab-well: rgba(0, 0, 0, 0.18); --cs-admin-live-dot: #7fae7f; } /* ── Club chrome — Tabler icons (Category 5) ─────────────────────────────── */ .cs-ti{font-size:1em;line-height:1;vertical-align:-0.12em;} .cs-ti-btn{display:inline-flex;align-items:center;gap:6px;} .fd-icon .ti{font-size:26px;line-height:1;} .club-badge .ti{margin-right:4px;} #display-fullscreen-btn .ti{font-size:18px;} .modal-title .ti,.zero-rake .ti,.tab .ti{margin-right:4px;}