/* party-app.css — shared styles for /democrats/ and /republicans/ dashboards */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --font-head: 'Space Grotesk', Arial, sans-serif; --font-body: 'Source Sans 3', Arial, sans-serif; --cream: #f7f2eb; --cream-mid: #ede6d8; --cream-border: #d8cebc; --ink: #1a1612; --ink-mid: #4a3f30; --ink-light: #7a6a56; --card-bg: #faf6ef; } /* Audience-specific accent overrides injected via class on */ body.audience-democrat { --accent: #1565c0; --accent-dark: #0d47a1; --accent-light: #e3f0fd; --risk-color: #e65100; --risk-light: #fff3e0; --opp-color: #1565c0; --opp-light: #e3f0fd; } body.audience-republican { --accent: #c62828; --accent-dark: #7f0000; --accent-light: #fde8e8; --risk-color: #1565c0; --risk-light: #e3f0fd; --opp-color: #c62828; --opp-light: #fde8e8; } /* ── Layout ───────────────────────────────────────────────────── */ body { background: var(--cream); color: var(--ink); font-family: var(--font-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } .skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--ink); padding: 8px 16px; z-index: 9999; } .skip-link:focus { left: 8px; } .page-shell { max-width: 1040px; margin: 0 auto; padding: 0 16px 48px; } /* ── Topbar ───────────────────────────────────────────────────── */ .topbar { padding: 28px 0 20px; border-bottom: 1px solid var(--cream-border); margin-bottom: 28px; } .brand-label { font-family: var(--font-head); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 6px; } .topbar h1 { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .topbar-meta { font-size: 13px; color: var(--ink-light); } .support-nav { margin-top: 10px; display: flex; gap: 16px; font-size: 13px; } .support-nav a { color: var(--ink-light); text-decoration: none; } .support-nav a:hover { color: var(--accent); } /* ── Hero band ───────────────────────────────────────────────── */ .hero-band { background: var(--card-bg); border: 1px solid var(--cream-border); border-radius: 20px; padding: 28px 28px 24px; margin-bottom: 20px; } .position-label { display: inline-block; font-family: var(--font-head); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; } .position-label.advantage { background: var(--opp-light); color: var(--opp-color); } .position-label.mixed { background: #f5f0e8; color: var(--ink-mid); } .position-label.under_pressure { background: var(--risk-light); color: var(--risk-color); } .hero-headline { font-family: var(--font-head); font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--ink); margin-bottom: 10px; } .hero-subline { font-size: 15px; color: var(--ink-mid); max-width: 640px; line-height: 1.6; } .hero-median { margin-top: 14px; font-size: 13px; color: var(--ink-light); } .hero-median strong { color: var(--ink-mid); } /* ── Section heading ─────────────────────────────────────────── */ .section-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ink-light); margin-bottom: 14px; } /* ── Decision ledger ─────────────────────────────────────────── */ .decision-ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; } .ledger-card { background: var(--card-bg); border: 1px solid var(--cream-border); border-radius: 16px; padding: 18px 18px 16px; } .ledger-card-role { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; } .ledger-card-role.opp { color: var(--opp-color); } .ledger-card-role.risk { color: var(--risk-color); } .ledger-card-role.brief { color: var(--ink-mid); } .ledger-card-state { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 4px; } .ledger-card-interp { font-size: 13px; color: var(--ink-mid); line-height: 1.5; margin-bottom: 10px; } .ledger-card-confidence { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; display: inline-block; } .ledger-card-confidence.strong { background: var(--opp-light); color: var(--opp-color); } .ledger-card-confidence.leaning { background: #f0f8e8; color: #2e7d32; } .ledger-card-confidence.contested { background: #f5f0e8; color: var(--ink-mid); } .ledger-card-confidence.at-risk { background: var(--risk-light); color: var(--risk-color); } .ledger-open-btn { margin-top: 10px; display: block; font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; } .ledger-open-btn:hover { text-decoration: underline; } /* ── Triage ───────────────────────────────────────────────────── */ .triage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 32px; } .triage-col-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; } .triage-col-label.opp { color: var(--opp-color); } .triage-col-label.risk { color: var(--risk-color); } .triage-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--card-bg); border: 1px solid var(--cream-border); border-radius: 12px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s; } .triage-row:hover, .triage-row.selected { border-color: var(--accent); } .triage-rank { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--ink-light); min-width: 20px; padding-top: 1px; } .triage-state-name { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--ink); } .triage-issue { font-size: 12px; color: var(--ink-light); } .triage-score-label { margin-left: auto; font-size: 11px; font-weight: 700; white-space: nowrap; padding: 3px 8px; border-radius: 999px; } .triage-score-label.strong { background: var(--opp-light); color: var(--opp-color); } .triage-score-label.leaning { background: #f0f8e8; color: #2e7d32; } .triage-score-label.contested { background: #f5f0e8; color: var(--ink-mid); } .triage-score-label.at-risk { background: var(--risk-light); color: var(--risk-color); } .triage-score-label.under-pressure { background: var(--risk-light); color: var(--risk-color); } .triage-empty { font-size: 13px; color: var(--ink-light); padding: 12px 0; } /* ── Map + table ─────────────────────────────────────────────── */ .map-table-section { margin-bottom: 32px; } .map-table-section > .section-label { margin-bottom: 16px; } #party-map { width: 100%; height: 340px; border-radius: 16px; border: 1px solid var(--cream-border); overflow: hidden; margin-bottom: 20px; } .ranked-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ranked-table thead th { text-align: left; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-light); font-weight: 700; padding: 0 8px 8px 0; border-bottom: 1px solid var(--cream-border); } .ranked-table tbody tr { border-bottom: 1px solid var(--cream-border); cursor: pointer; transition: background 0.1s; } .ranked-table tbody tr:hover, .ranked-table tbody tr.selected { background: var(--accent-light); } .ranked-table td { padding: 9px 8px 9px 0; vertical-align: middle; } .ranked-table .col-rank { color: var(--ink-light); width: 32px; } .ranked-table .col-state { font-weight: 600; color: var(--ink); } .ranked-table .col-badge { width: 110px; } .ranked-table .col-issue { color: var(--ink-mid); max-width: 140px; } .ranked-table .col-score { width: 60px; text-align: right; color: var(--ink-mid); font-variant-numeric: tabular-nums; } .ranked-table .open-btn { font-size: 12px; font-weight: 700; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; white-space: nowrap; } .class-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .class-badge.opportunity { background: var(--opp-light); color: var(--opp-color); } .class-badge.stable { background: #f5f0e8; color: var(--ink-mid); } .class-badge.risk { background: var(--risk-light); color: var(--risk-color); } /* ── State panel ─────────────────────────────────────────────── */ .state-panel { background: var(--card-bg); border: 1px solid var(--accent); border-radius: 16px; padding: 24px; margin-bottom: 32px; display: none; } .state-panel.visible { display: block; } .state-panel-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; } .state-panel-name { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 4px; } .state-panel-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink-light); padding: 0 0 0 16px; line-height: 1; } .state-panel-interp { font-size: 14px; color: var(--ink-mid); line-height: 1.6; margin-bottom: 16px; } .state-panel-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .state-meta-chip { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: #f0ebe0; color: var(--ink-mid); } .state-panel-issues { font-size: 13px; color: var(--ink-mid); margin-bottom: 16px; } .state-meta-chip.thin-signal, .ledger-card-confidence + .state-meta-chip.thin-signal { background: #fdecea; color: #9a3412; } .thin-signal-tag { color: #9a3412; font-weight: 700; } .state-panel-evidence { margin-bottom: 16px; } .state-evidence-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mid); margin: 0 0 6px; } .state-evidence-list { margin: 0; padding-left: 18px; } .state-evidence-list li { font-size: 13px; line-height: 1.5; color: var(--ink); margin-bottom: 4px; } .copy-briefing-btn { font-size: 13px; font-weight: 700; background: var(--accent-light); color: var(--accent); border: none; border-radius: 8px; padding: 9px 16px; cursor: pointer; transition: background 0.15s; } .copy-briefing-btn:hover { background: var(--accent); color: #fff; } .copy-briefing-btn.copied { background: #e8f5e9; color: #2e7d32; } /* ── Date picker ─────────────────────────────────────────────── */ .date-picker-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; } .date-picker-bar label { font-size: 13px; color: var(--ink-mid); font-weight: 600; } .date-select { font-family: var(--font-body); font-size: 13px; padding: 6px 12px; border: 1px solid var(--cream-border); border-radius: 8px; background: var(--card-bg); color: var(--ink); cursor: pointer; } .date-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .freshness-note { font-size: 12px; color: var(--ink-light); } /* ── Footer ──────────────────────────────────────────────────── */ .evidence-footer { border-top: 1px solid var(--cream-border); padding-top: 20px; font-size: 12px; color: var(--ink-light); line-height: 1.7; } .evidence-footer a { color: var(--ink-light); } .evidence-footer a:hover { color: var(--accent); } /* ── Loading / error states ──────────────────────────────────── */ .loading-msg { text-align: center; padding: 60px 20px; font-size: 15px; color: var(--ink-light); } .error-msg { background: #fde8e8; border: 1px solid #f5c2c2; border-radius: 12px; padding: 20px 24px; color: #7f0000; font-size: 14px; margin: 20px 0; } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 700px) { .decision-ledger { grid-template-columns: 1fr; } .triage-grid { grid-template-columns: 1fr; } .hero-headline { font-size: 22px; } #party-map { height: 240px; } .ranked-table .col-issue { display: none; } .ranked-table .col-score { display: none; } }