/* ============================================================ Freedom Index Tracker — SHARED CSS Loaded by both index.html and arizona.html. Single source of truth for theme tokens, map tile colors, modal, coalition cards, state table, leaderboard cards. Any change here is reflected on every page that loads this file. Last reviewed: 2026-06-05 ============================================================ */ /* ============ SITE HEADER — DESKTOP HOVER (shared) ============ */ #site-header nav a:hover { color: #fff !important; } #site-header .wrap a[href*="donate"]:hover { background: var(--accent, #7cf2a8) !important; color: var(--ink-dark, #1A1A28) !important; } /* ============ SITE HEADER — MOBILE (shared, definitive) ============ Mobile order: brand · donate · hamburger (rightmost) · nav (full-width below) Nav drops below in flow when hamburger is tapped — does not overlay content. =============================================================== */ @media (max-width: 800px) { #site-header .wrap { display: flex !important; flex-wrap: wrap !important; align-items: center !important; overflow: visible !important; padding: 12px 16px !important; gap: 10px !important; position: relative !important; } /* Brand stays left; margin-right:auto pushes everything else to the right edge */ #site-header > .wrap > a:first-child { order: 0 !important; flex-shrink: 0 !important; margin-right: auto !important; } /* Donate comes second from the right */ #site-header .wrap > a[href*="donate"] { order: 1 !important; flex-shrink: 0 !important; font-size: 11px !important; padding: 8px 14px !important; } /* Hamburger is rightmost */ #site-header #nav-toggle { order: 2 !important; flex-shrink: 0 !important; display: inline-block !important; } /* Nav drops to its own row, full width, in-flow, left-aligned */ #site-header nav { order: 9 !important; flex-basis: 100% !important; width: 100% !important; display: none !important; position: static !important; flex-direction: column !important; align-items: stretch !important; background: #15151e !important; border-top: 1px solid rgba(255,255,255,0.08) !important; margin: 10px -16px -12px -16px !important; padding: 6px 0 !important; box-shadow: none !important; border-radius: 0 !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; transition: none !important; z-index: auto !important; } #site-header.menu-open nav { display: flex !important; } /* Each link is a full-width row, text aligned LEFT */ #site-header nav a { display: block !important; width: 100% !important; text-align: left !important; padding: 14px 22px !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: .14em !important; font-weight: 700 !important; color: #cdd1eb !important; text-decoration: none !important; white-space: nowrap !important; } #site-header nav a:last-child { border-bottom: none !important; } #site-header nav a:hover { background: rgba(255,255,255,0.04) !important; color: #fff !important; } /* Hamburger toggle styling */ #site-header #nav-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 8px 12px; border-radius: 3px; cursor: pointer; font-size: 16px; line-height: 1; } #site-header.menu-open #nav-toggle { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); } } /* ============ TOP ATTRIBUTION BANNER (shared) ============ */ .top-attribution-banner { background: var(--ink-dark, #0a0a14); color: rgba(255,255,255,0.7); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); font-weight: 600; position: relative; z-index: 91; } [data-theme="light"] .top-attribution-banner { background: #1A1A28; color: rgba(255,255,255,0.8); } .top-attribution-banner-wrap { max-width: 1280px; margin: 0 auto; } .top-attribution-banner a { color: var(--mint, #7cf2a8); text-decoration: none; font-weight: 800; border-bottom: 1px solid transparent; transition: border-color .12s; } .top-attribution-banner a:hover { border-bottom-color: var(--mint, #7cf2a8); } @media (max-width: 540px) { .top-attribution-banner { font-size: 10px; letter-spacing: .08em; padding: 7px 12px; } } /* ┌──────────────────────────────────────────────────────────────┐ */ /* │ CAMPAIGN BRAND PALETTE │ */ /* │ #303030 ink (text) │ */ /* │ #2f3061 deep navy (dark sections) │ */ /* │ #0e34a0 brand royal blue (primary CTAs, accents) │ */ /* │ #5f5980 muted purple-gray (secondary) │ */ /* │ #dfdfdf light gray (paper alt) │ */ /* └──────────────────────────────────────────────────────────────┘ */ :root{ --brand: #0e34a0; /* royal blue — primary brand */ --brand-dark: #2f3061; /* deep navy — hover / dark sections */ --accent: #5f5980; /* muted purple — secondary */ --ink: #303030; /* primary text */ --ink-dark: #2f3061; /* dark section background */ --paper: #FFFFFF; /* main background */ --paper-2: #dfdfdf; /* alt section background */ --paper-3: #f4f4f6; /* very light hover */ --rule: #c0c0c8; --muted: #6B6B7A; /* Status colors — red is reserved as an ALERT signal, not a brand color */ --status-active: #C8102E; /* alert red — active anti-boycott law */ --status-pending: #E8A33D; /* amber — pending expansion */ --status-repeal: #2E7D5B; /* green — repeal bill moving */ --status-clean: #5f5980; /* muted purple — no law */ --font-display: "Droid Serif", "Georgia", "Times New Roman", serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; /* Logo treatment: cream-on-black per campaign brand */ --logo-ink: #000000; --logo-cream: #f7f4ee; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.5;-webkit-font-smoothing:antialiased} img{max-width:100%} a{color:inherit} .wrap{max-width:1100px;margin:0 auto;padding:0 20px} /* ===== HERO ===== */ .hero{background:var(--ink-dark);color:var(--logo-cream);padding:32px 0 56px;border-bottom:6px solid var(--brand)} .hero .logo-wrap img{display:block;width:100%;height:auto} /* Theme-aware logo swap: dark theme shows cream-on-black wordmark, light theme shows the black-on-cream variant the campaign uses on light-background collateral. Default is dark. */ .hero .logo-wrap .logo-light{display:none} [data-theme="light"] .hero .logo-wrap .logo-dark{display:none} [data-theme="light"] .hero .logo-wrap .logo-light{display:block} .kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--logo-cream);opacity:.7;font-weight:700;margin-bottom:14px} .hero h1{font-family:var(--font-display);font-size:clamp(32px,4.4vw,58px);line-height:1.12;margin:0 0 14px;font-weight:700;letter-spacing:-.005em;color:var(--logo-cream)} .hero h1 em{font-style:italic;color:var(--logo-cream);background:none} .hero p.lede{font-size:clamp(16px,1.6vw,20px);max-width:760px;margin:0 0 24px;color:var(--logo-cream);opacity:.85;font-family:var(--font-display)} .hero .counter{display:flex;gap:24px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid rgba(247,244,238,.18)} .hero .counter .stat{} .hero .counter .stat .num{font-family:var(--font-display);font-size:48px;font-weight:700;color:var(--logo-cream);line-height:1} .hero .counter .stat .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:var(--logo-cream);opacity:.7;margin-top:6px;font-family:var(--font-mono)} /* ===== TICKER ===== Uses the campaign brand royal blue so it stops competing with the alarm-red reserved for the "active anti-boycott law" status across the map and cards. */ .ticker{background:var(--brand);color:#fff;padding:10px 0;overflow:hidden;position:relative;border-top:1px solid rgba(0,0,0,.18);border-bottom:1px solid rgba(0,0,0,.18)} .ticker-inner{display:flex;gap:48px;white-space:nowrap;animation:ticker 90s linear infinite;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em} .ticker:hover .ticker-inner{animation-play-state:paused} .ticker-tag{background:#fff;color:var(--brand);font-weight:700;padding:2px 8px;border-radius:2px;margin-right:8px;font-size:11px;letter-spacing:.08em} @keyframes ticker{0%{transform:translateX(0)} 100%{transform:translateX(-50%)}} /* ===== SECTIONS ===== */ section{padding:56px 0} section.alt{background:var(--paper-2)} section h2{font-family:var(--font-display);font-size:clamp(28px,3vw,40px);margin:0 0 8px;font-weight:800;letter-spacing:-.01em} section h2 + p.sub{color:var(--muted);margin:0 0 28px;font-size:16px;max-width:680px} /* ===== TILE MAP ===== */ .legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px;font-size:13px} .legend .sw{display:inline-flex;align-items:center;gap:8px} .legend .dot{width:18px;height:18px;border-radius:3px;display:inline-block;box-sizing:border-box;flex-shrink:0} .tilemap{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;max-width:820px} .tile{aspect-ratio:1/1;border-radius:4px;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;font-weight:700;cursor:pointer;border:none;box-sizing:border-box;padding:0;transition:transform .12s ease, box-shadow .12s ease;position:relative} .tile:hover, .tile:focus{transform:translateY(-2px);outline:none;box-shadow:0 8px 18px rgba(0,0,0,.18);z-index:2} /* v1.5.7 — Eva's 6 categories, solid color ramp (2026-06-05 update). Eva: "for anti-boycott, either or both divestment make it red, next layer - active plus extends past israel, also the green shouldnt be green because they are active laws so maybe some orange color gradient with red." So: basic-anti-boycott (with or without divestment) jumps from coral to solid red. Repeal-filed states leave green for an orange/terracotta — the law is still active, so we keep them in the warm/alarm family. */ /* 1. No law — white */ .tile.tile-clean, .tile.clean{ background:#FFFFFF; color:var(--ink); border:1.5px solid var(--rule) } /* 2. No law yet, first-time bill pending — pale wheat (a soft warning) */ .tile.tile-new-attempt{ background:#F5DDA8; color:#1a1a1a } .tile.pending:not(.tile-new-attempt):not(.tile-active-expansion-pending){ background:#F5DDA8; color:#1a1a1a; } /* 3. Active basic — medium red (anti-boycott law, optionally with divestment) */ .tile.tile-active-basic, .tile.active{ background:#D6334A; color:#fff } /* v1.5.10 — severity-ordered ramp. Broad expansion (TX-level: fully enacted ESG/firearms/academic regime) gets the deepest red because it represents the most-restrictive law on the books. Narrow expansion sits between basic and broad. Expansion-pending uses the lighter of the deep-reds because the bill hasn't passed yet — pressure but not yet enacted severity. */ /* 4. Active + NARROW expansion — Arizona-level: universities only. */ .tile.tile-active-expansion-narrow, .tile.tile-active-expansion-enacted{ background:#6E0014; color:#fff } /* 5. Active + BROAD expansion — Texas-level: ESG industries, fossil fuels, firearms, academic boycotts. Deepest of the active tiers. */ .tile.tile-active-expansion-broad{ background:#3A0008; color:#fff } /* 6. Active + expansion bill pending — alert red (active law plus a new expansion bill in motion; not yet enacted). */ .tile.tile-active-expansion-pending{ background:#A50022; color:#fff } /* 7a. Active + FULL repeal filed — terracotta / burnt orange (warm, still in the alarm family because the law is STILL active; a repeal bill for the whole law is filed but has not passed) */ .tile.tile-active-repeal-full, .tile.tile-active-repeal, /* back-compat */ .tile.repeal{ background:#B84D24; color:#fff } /* 7b. Active + PARTIAL repeal filed (v1.5.9) — softer terracotta. The repeal bill targets only one chapter (UT's expanded-ESG sections), leaving the original Israel-focused law in force. Less progress than a full repeal, so the color is intentionally less saturated. */ .tile.tile-active-repeal-partial{ background:#D58054; color:#fff } .tile.az{outline:3px solid var(--brand);outline-offset:2px} .tile .grade{position:absolute;top:2px;right:3px;font-size:9px;font-weight:800;line-height:1;letter-spacing:0;text-shadow:0 1px 2px rgba(0,0,0,.5)} .tile.clean .grade{text-shadow:none;color:var(--ink)} .tile.empty{background:transparent;cursor:default;pointer-events:none} .maplabel{font-size:11px;color:var(--muted);font-family:var(--font-mono);margin-top:14px;letter-spacing:.06em;text-transform:uppercase} .maplabel b{color:#fff;background:var(--brand);padding:1px 5px;border-radius:2px} /* ===== MODAL ===== */ .modal-bg{position:fixed;inset:0;background:rgba(47,48,97,.82);display:none;align-items:flex-start;justify-content:center;padding:5vh 16px;z-index:50;overflow-y:auto} .modal-bg.open{display:flex} .modal{background:var(--paper);max-width:680px;width:100%;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4);position:relative} .modal-head{padding:24px 28px 18px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;background:var(--ink-dark);color:#fff} .modal-head h3{margin:0;font-family:var(--font-display);font-size:32px;letter-spacing:-.01em} .modal-head .badge{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.15em;padding:5px 9px;border-radius:2px;text-transform:uppercase;margin-top:8px} .badge.active{background:var(--status-active);color:#fff} .badge.pending{background:var(--status-pending);color:#000} .badge.repeal{background:var(--status-repeal);color:#fff} .badge.clean{background:#374151;color:#fff} .modal-close{background:none;border:0;color:#fff;font-size:28px;cursor:pointer;padding:0;line-height:1;opacity:.7} .modal-close:hover{opacity:1} .modal-body{padding:24px 28px} .modal-body p{margin:0 0 14px} .modal-body .row{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;padding:10px 0;border-bottom:1px dotted #ddd;font-size:14px} .modal-body .row .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:2px} .modal-body .bills li{margin-bottom:8px} .modal-body .bills a{color:var(--brand);text-decoration:none;border-bottom:1px solid currentColor} .modal-foot{padding:18px 28px 24px;background:var(--paper-2);display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--rule)} .btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:none;padding:10px 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;cursor:pointer;text-decoration:none;border-radius:3px} .btn:hover{background:var(--brand-dark)} .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)} .btn.ghost:hover{background:var(--ink);color:#fff} /* ===== TABLE ===== */ .tools{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap} .tools input, .tools select{padding:8px 10px;border:1.5px solid #1a1a1a;border-radius:3px;font-family:var(--font-mono);font-size:13px;background:#fff} .tools input{flex:1;min-width:180px} table.statelist{width:100%;border-collapse:collapse;font-size:14px} table.statelist th{text-align:left;padding:10px 8px;border-bottom:2px solid var(--ink);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;user-select:none} table.statelist th:hover{color:var(--brand)} table.statelist td{padding:12px 8px;border-bottom:1px solid var(--rule);vertical-align:top} table.statelist tr{cursor:pointer} table.statelist tr:hover{background:var(--paper-3)} table.statelist .pill{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:2px;font-weight:700} /* ===== NEWS ===== */ .news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} .news-item{background:#fff;border:1px solid var(--rule);padding:18px;border-radius:4px} .news-item h4{margin:0 0 8px;font-family:var(--font-display);font-size:17px;line-height:1.25} .news-item h4 a{text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--brand)} .news-item .meta{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase} /* ===== SHARE / EMBED ===== */ .embed-box{background:var(--ink-dark);color:#fff;padding:24px;border-radius:6px;font-family:var(--font-mono);font-size:13px;white-space:pre-wrap;word-break:break-all;position:relative} .embed-box .copy{position:absolute;top:14px;right:14px} /* ===== SHARE CARD ===== */ .share-card{background:linear-gradient(135deg,#0B0B0F 0%, #1a1a22 100%);color:#fff;padding:36px 32px;border-radius:6px;border:4px solid var(--brand);max-width:520px;font-family:var(--font-body)} .share-card .sc-kick{font-family:var(--font-mono);font-size:12px;color:var(--brand);letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px} .share-card .sc-name{font-family:var(--font-display);font-size:54px;line-height:1;margin:0 0 12px;font-weight:800} .share-card .sc-status{font-size:22px;font-weight:700;margin-bottom:16px} .share-card .sc-status.active{color:var(--brand)} .share-card .sc-detail{font-size:14px;color:#bbb;margin-bottom:18px;line-height:1.5} .share-card .sc-foot{font-family:var(--font-mono);font-size:11px;color:#777;letter-spacing:.15em;text-transform:uppercase;padding-top:14px;border-top:1px solid #2a2a30} /* ===== COALITION PARTNERS (v1.5.11 — Steven 2026-06-05) ===== */ .coalition{background:var(--paper-2);padding:56px 0 64px;border-top:1px solid var(--rule)} .coalition-grid{list-style:none;padding:0;margin:24px 0 32px;display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:14px} .coalition-card{background:var(--paper);border:1px solid var(--rule);border-radius:6px;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;list-style:none} .coalition-card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.06);border-color:var(--brand)} .coalition-card:focus{outline:3px solid var(--brand);outline-offset:2px} .coalition-card:focus:not(:focus-visible){outline:none} .coalition-card .cc-clickbody{padding:16px 18px;display:block} .coalition-card .cc-name{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:4px} .coalition-card .cc-role{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase} .coalition-card-cta{cursor:pointer;border:2px dashed var(--brand);background:transparent} .coalition-card-cta:hover{background:rgba(14,52,160,0.04)} .coalition-card-cta:focus{outline:3px solid var(--brand);outline-offset:2px} .coalition-cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding:24px 26px;background:var(--paper);border:2px solid var(--brand);border-radius:8px;margin-top:4px} .coalition-cta-text{flex:1 1 320px;min-width:0} .coalition-cta .cc-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--brand);text-transform:uppercase;font-weight:700;margin-bottom:4px} .coalition-cta .cc-title{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--ink);line-height:1.2;margin-bottom:6px} .coalition-cta .cc-sub{font-size:14px;color:var(--ink-light);line-height:1.45} .coalition-cta-btn{display:inline-block;background:var(--brand);color:#fff;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:14px 22px;border-radius:4px;text-decoration:none;white-space:nowrap;transition:transform .12s ease, box-shadow .12s ease} .coalition-cta-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(14,52,160,.25)} @media (max-width:700px){ .coalition{padding:40px 0 48px} .coalition-cta{padding:18px 20px} .coalition-cta .cc-title{font-size:19px} .coalition-cta-btn{width:100%;text-align:center} } /* ===== FOOTER ===== */ footer{background:var(--ink-dark);color:#c5cae0;padding:32px 0;font-size:13px;line-height:1.6} footer a{color:#fff} footer .src{font-family:var(--font-mono);font-size:11px;color:#8b94c0;letter-spacing:.1em;text-transform:uppercase;margin-top:8px} /* ===== PREVIEW BANNER (internal review mode) ===== */ .preview-banner{position:sticky;top:0;z-index:100;background:#FFD200;color:#1a1a1a;padding:10px 16px;text-align:center;font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;font-weight:700;border-bottom:3px solid #1a1a1a;box-shadow:0 4px 12px rgba(0,0,0,.15)} .preview-banner .pill{background:#1a1a1a;color:#FFD200;padding:3px 8px;border-radius:2px;margin-right:8px;font-size:11px;letter-spacing:.15em} .preview-banner a{color:#1a1a1a;border-bottom:1.5px solid #1a1a1a;text-decoration:none;margin-left:14px;font-weight:700} .preview-banner a:hover{background:#1a1a1a;color:#FFD200} .preview-banner .close{margin-left:14px;background:none;border:1px solid #1a1a1a;color:#1a1a1a;padding:2px 8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;cursor:pointer;font-weight:700;border-radius:2px} .preview-banner .close:hover{background:#1a1a1a;color:#FFD200} /* ===== HALL OF F CARDS (held for re-launch) ===== */ .hof-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(200,16,46,.25);background:#fff8f9} .hof-card:focus-visible{outline:3px solid var(--brand);outline-offset:2px} /* ════════════════════════════════════════════════════════════════════════════ UNIFIED DARK EDITORIAL THEME — applied page-wide for engagement. Overrides the previous light/dark section alternation. Every section now reads as one continuous dark surface punctuated by colored accents. Inspired by integrityindex.us / theintercept.com / The Markup. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --dark-bg: #0a0a12; --dark-bg-alt: #13131f; --dark-bg-elev: #1a1a28; --dark-border: #1f1f2e; --dark-border-strong: #2a2a3d; --ink-white: #ffffff; --ink-light: #a8b0c4; --ink-muted: #7782a8; --ink-faint: #5a6080; --mint: #7cf2a8; --alert: #ff5560; --amber: #ffd45f; --orange: #ff9560; --lime: #a8e87a; --party-d: #6aa3ff; --party-r: #ff8c80; } html,body{background:var(--dark-bg);color:var(--ink-white)} section{padding:80px 0;background:var(--dark-bg);color:var(--ink-white)} section.alt{background:var(--dark-bg-alt)} section h2{font-family:var(--font-display);color:var(--ink-white);font-size:clamp(34px,4.6vw,60px);line-height:1.02;font-weight:900;letter-spacing:-0.025em;margin:0 0 14px} section h2 em{font-style:italic;color:var(--mint);background:none} section h2 .accent{color:var(--mint)} section h2 + p.sub,section h2 ~ p.sub{color:var(--ink-light);font-size:18px;line-height:1.5;max-width:780px;margin:0 0 36px;font-family:var(--font-body);font-weight:400} section h2 + p.sub a,section .sub a{color:var(--mint);border-bottom:1px solid var(--mint);text-decoration:none;font-weight:600} section h2 + p.sub a:hover{background:var(--mint);color:var(--dark-bg)} /* Section kicker — small caps mono on a colored chip — replaces the various ad-hoc "ARIZONA · ELECTION" labels above section headlines. */ .sect-kicker{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;color:var(--mint);font-weight:700;text-transform:uppercase;margin-bottom:18px;padding:6px 12px;background:rgba(124,242,168,0.08);border:1px solid rgba(124,242,168,0.18);border-radius:3px} .sect-kicker.alert{color:var(--alert);background:rgba(255,85,96,0.08);border-color:rgba(255,85,96,0.22)} .sect-kicker.amber{color:var(--amber);background:rgba(255,212,95,0.08);border-color:rgba(255,212,95,0.22)} /* ── HERO refresh — bigger, more dramatic ─────────────────────────────── */ .hero{background:var(--dark-bg);color:var(--ink-white);padding:80px 0 96px;border-bottom:1px solid var(--dark-border);position:relative;overflow:hidden} .hero::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--mint) 30%,var(--alert) 70%,transparent);opacity:0.5} .hero .logo-wrap{max-width:420px;margin:0 auto 36px} .hero h1{font-family:var(--font-display);color:var(--ink-white);font-size:clamp(42px,7vw,90px);line-height:0.98;letter-spacing:-0.035em;font-weight:900;margin:0 0 20px;text-align:center;max-width:1100px;margin-left:auto;margin-right:auto} .hero h1 em{font-style:italic;background:linear-gradient(180deg,transparent 62%,rgba(255,85,96,0.5) 62%);padding:0 6px;color:var(--ink-white)} .hero p.lede{color:var(--ink-light);font-family:var(--font-body);font-size:clamp(17px,1.8vw,22px);line-height:1.5;max-width:820px;margin:0 auto 44px;text-align:center;opacity:1} .hero .counter{justify-content:center;gap:48px;border-top-color:var(--dark-border-strong)} .hero .counter .stat{text-align:center} .hero .counter .stat .num{color:var(--ink-white);font-size:clamp(38px,5vw,64px);font-weight:900;letter-spacing:-0.02em} .hero .counter .stat .lbl{color:var(--ink-light);font-size:11px;letter-spacing:.2em;font-weight:700} /* ── TICKER refresh — clean dark strip with mint accent ──────────────── */ .ticker{background:var(--dark-bg-alt);color:var(--ink-light);border-top:1px solid var(--dark-border);border-bottom:1px solid var(--dark-border);padding:14px 0} .ticker-tag{background:var(--mint);color:var(--dark-bg);font-weight:700} /* ── NATIONAL MAP section ─────────────────────────────────────────────── */ section .legend{color:var(--ink-light);font-size:13px} section .legend .sw{color:var(--ink-light)} .tile.clean{background:var(--dark-bg-alt);color:var(--ink-light);border:1.5px solid var(--dark-border-strong)} .tile.clean .grade{color:var(--ink-white)} .maplabel{color:var(--ink-muted)} .maplabel b{background:var(--mint);color:var(--dark-bg)} /* ── LOCATOR refresh — match the scoreboard dark surface ─────────────── */ .locator{background:var(--dark-bg);color:var(--ink-white);padding:72px 0 80px;border-top:1px solid var(--dark-border);border-bottom:1px solid var(--dark-border)} .locator h2{color:var(--ink-white)} .locator .sub{color:var(--ink-light)} .locator-tabs{border-bottom-color:var(--dark-border-strong)} .locator-tab{color:var(--ink-light);font-weight:700} .locator-tab.active{color:var(--ink-white);border-bottom-color:var(--mint)} .locator-form input[type=text],.locator-form select{background:var(--dark-bg-alt);border-color:var(--dark-border-strong);color:var(--ink-white)} .locator-form input[type=text]:focus,.locator-form select:focus{border-color:var(--mint);background:var(--dark-bg-elev)} .locator-form button{background:var(--mint);color:var(--dark-bg);font-weight:800} .locator-form button:hover{background:#fff;color:var(--dark-bg)} .locator-hint{color:var(--ink-muted)} .locator-summary{background:var(--dark-bg-alt);border-left-color:var(--mint);color:var(--ink-light)} .locator-cta{background:rgba(124,242,168,0.10);border-color:var(--mint);color:var(--ink-light)} .locator-cta .txt strong{color:var(--ink-white)} /* ── VOTER GUIDE refresh ──────────────────────────────────────────────── */ #voter-guide{background:var(--dark-bg-alt)} #voter-guide-empty{color:var(--ink-muted);background:rgba(255,255,255,0.02);border:1px dashed var(--dark-border-strong);border-radius:8px} /* ── FREEDOM INDEX leaderboard refresh ──────────────────────────────── */ #worst-offenders{margin-top:24px} /* ── TABLE refresh — dark mode statelist ─────────────────────────────── */ .tools{margin-bottom:18px} .tools input,.tools select{background:var(--dark-bg-alt);border-color:var(--dark-border-strong);color:var(--ink-white)} .tools input::placeholder{color:var(--ink-muted)} table.statelist{color:var(--ink-light)} table.statelist th{color:var(--ink-light);border-bottom:1px solid var(--dark-border-strong);background:transparent} table.statelist th:hover{color:var(--mint)} table.statelist td{border-bottom:1px solid var(--dark-border)} table.statelist tr:hover{background:var(--dark-bg-elev)} table.statelist tr td:first-child{color:var(--ink-white);font-weight:700} /* ── NEWS refresh — dark cards ──────────────────────────────────────── */ .news-grid{gap:20px} .news-item{background:var(--dark-bg-alt);border:1px solid var(--dark-border);color:var(--ink-light);padding:22px;border-radius:8px;transition:border-color .12s,background .12s,transform .12s} .news-item:hover{border-color:var(--mint);background:var(--dark-bg-elev);transform:translateY(-2px)} .news-item h4{color:var(--ink-white)} .news-item h4 a{color:var(--ink-white);border-bottom-color:var(--mint)} .news-item h4 a:hover{color:var(--mint)} .news-item .meta{color:var(--mint)} /* ── LEGISCAN WATCHLIST refresh ──────────────────────────────────────── */ #watchlist-section{background:var(--dark-bg-alt) !important} #watchlist-scan-date{color:var(--ink-white)} /* ── PRESS KIT refresh ───────────────────────────────────────────────── */ section.press-kit-section{background:var(--dark-bg);border-top:1px solid var(--dark-border)} /* ── COALITION refresh ──────────────────────────────────────────────── */ .coalition{background:var(--dark-bg-alt);border-top:1px solid var(--dark-border)} .coalition h2{color:var(--ink-white)} .coalition .sub{color:var(--ink-light)} .coalition-card{background:var(--dark-bg-elev);border-color:var(--dark-border-strong)} .coalition-card .cc-name{color:var(--ink-white)} .coalition-card .cc-role{color:var(--ink-muted)} .coalition-card-cta{background:transparent;border:2px dashed var(--mint)} .coalition-card-cta .cc-name{color:var(--mint) !important} .coalition-card-cta:hover{background:rgba(124,242,168,0.06)} .coalition-cta{background:var(--dark-bg-elev);border:2px solid var(--mint)} .coalition-cta .cc-eyebrow{color:var(--mint)} .coalition-cta .cc-title{color:var(--ink-white)} .coalition-cta .cc-sub{color:var(--ink-light)} .coalition-cta-btn{background:var(--mint);color:var(--dark-bg)} .coalition-cta-btn:hover{background:#fff;color:var(--dark-bg)} /* ── SHARE / EMBED refresh ──────────────────────────────────────────── */ .embed-box{background:var(--dark-bg-elev);color:var(--ink-light);border:1px solid var(--dark-border-strong)} /* ── FOOTER refresh ─────────────────────────────────────────────────── */ footer{background:var(--dark-bg);color:var(--ink-light);border-top:1px solid var(--dark-border);padding:48px 0 36px} footer .src{color:var(--ink-muted)} footer a{color:var(--mint)} /* ── Standard buttons recoloring across the page ────────────────────── */ .btn{background:var(--mint);color:var(--dark-bg);font-weight:800;border-radius:4px} .btn:hover{background:#fff;color:var(--dark-bg)} .btn.ghost{background:transparent;color:var(--ink-light);border-color:var(--dark-border-strong)} .btn.ghost:hover{background:var(--ink-white);color:var(--dark-bg);border-color:var(--ink-white)} /* ── Modal refresh — keep modal interior light for readability ──────── */ .modal-bg{background:rgba(10,10,18,0.88)} /* ── Sub-section divider — used between section pairs ─────────────── */ .section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--dark-border-strong),transparent);margin:0} /* ===== AZ LEGISLATOR SCOREBOARD (v1.5.1 — optimized for engagement) ===== Maximally engaging dark scoreboard: dramatic headline, segmented distribution bar, sticky-feeling filter row, larger grade circles, mid-bar CTA. */ .az-scoreboard{background:#0a0a12;color:#fff;padding:80px 0 64px;border-bottom:1px solid #1f1f2e;position:relative;overflow:hidden} .az-scoreboard::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#7cf2a8 30%,#ff5560 70%,transparent);opacity:0.5} .az-scoreboard .wrap{position:relative;z-index:1} .az-scoreboard .kicker-az{font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;color:#7cf2a8;font-weight:700;text-transform:uppercase;margin-bottom:18px;display:inline-block;padding:6px 12px;background:rgba(124,242,168,0.08);border:1px solid rgba(124,242,168,0.18);border-radius:3px} .az-scoreboard h2{color:#fff;margin:0 0 16px;font-size:clamp(38px,6.5vw,76px);line-height:0.98;letter-spacing:-0.035em;font-weight:900;max-width:1200px} .az-scoreboard h2 em{font-style:normal;background:linear-gradient(180deg,transparent 60%,rgba(255,85,96,0.4) 60%);padding:0 4px} .az-scoreboard h2 .accent{color:#7cf2a8;font-style:normal} .az-scoreboard .sub-az{color:#a8b0c4;font-size:18px;max-width:680px;margin:0 0 44px;line-height:1.5;font-weight:400} /* Segmented distribution bar Desktop: horizontal segments with proportional widths via --seg-w. Mid: shrinks fonts so segments stay legible at tablet widths. Mobile: vertical stack — each segment becomes a full-width row. */ .az-scoreboard .dist-bar{margin-bottom:14px;border-radius:6px;overflow:hidden;border:1px solid #2a2a3d;display:flex;height:96px} .az-scoreboard .dist-seg{width:var(--seg-w,16%);min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px 16px;position:relative;transition:filter .12s;overflow:hidden} .az-scoreboard .dist-seg:hover{filter:brightness(1.12)} .az-scoreboard .dist-seg + .dist-seg{border-left:1px solid rgba(0,0,0,0.25)} .az-scoreboard .dist-seg .num{font-family:var(--font-display);font-size:36px;font-weight:900;line-height:1;color:#0a0a12;letter-spacing:-0.02em} .az-scoreboard .dist-seg .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;font-weight:700;color:rgba(10,10,18,0.7);text-transform:uppercase;line-height:1.2;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} /* Tablet (980px and below): shrink fonts so labels fit narrow segments */ @media (max-width:980px) and (min-width:781px){ .az-scoreboard .dist-bar{height:86px} .az-scoreboard .dist-seg{padding:12px 10px} .az-scoreboard .dist-seg .num{font-size:26px} .az-scoreboard .dist-seg .lbl{font-size:8.5px;letter-spacing:.10em} } .az-scoreboard .dist-seg.empty{opacity:0.4} .az-scoreboard .dist-seg.grade-A{background:#7cf2a8} .az-scoreboard .dist-seg.grade-B{background:#a8e87a} .az-scoreboard .dist-seg.grade-C{background:#ffd45f} .az-scoreboard .dist-seg.grade-D{background:#ff9560} .az-scoreboard .dist-seg.grade-F{background:#ff5560} .az-scoreboard .dist-seg.grade-F .num,.az-scoreboard .dist-seg.grade-F .lbl{color:#fff} .az-scoreboard .dist-seg.grade-F .lbl{color:rgba(255,255,255,0.85)} .az-scoreboard .dist-seg.ungraded{background:#3a3a4d} .az-scoreboard .dist-seg.ungraded .num,.az-scoreboard .dist-seg.ungraded .lbl{color:#cdd1eb} .az-scoreboard .dist-seg.ungraded .lbl{color:rgba(205,209,235,0.7)} .az-scoreboard .dist-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:#7782a8;margin-bottom:32px} .az-scoreboard .dist-note .dot{color:#ffd45f;font-weight:700} .az-scoreboard .as-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;padding:16px;background:#13131f;border:1px solid #1f1f2e;border-radius:8px;align-items:center} .az-scoreboard .as-filter-group{display:flex;gap:0;border-radius:6px;overflow:hidden;border:1px solid #2a2a3d;background:#0a0a12} .az-scoreboard .as-chip{background:transparent;color:#a8b0c4;border:none;padding:10px 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .12s,color .12s,box-shadow .12s} .az-scoreboard .as-chip:hover{background:rgba(255,255,255,0.04);color:#fff} .az-scoreboard .as-chip.active{background:#7cf2a8;color:#0a0a12;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15)} .az-scoreboard .as-filter-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:#5a6080;text-transform:uppercase;font-weight:700;align-self:center;margin:0 6px 0 4px} .az-scoreboard .as-rankings{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:36px} .az-scoreboard .as-col h3{font-family:var(--font-display);font-size:clamp(20px,2.4vw,28px);color:#fff;margin:0 0 8px;font-weight:900;letter-spacing:-0.015em;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .az-scoreboard .as-col h3 .accent{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;font-weight:700;padding:5px 10px;border-radius:3px;display:inline-block} .az-scoreboard .as-col h3 .accent.pro{background:rgba(124,242,168,0.15);color:#7cf2a8;border:1px solid rgba(124,242,168,0.3)} .az-scoreboard .as-col h3 .accent.anti{background:rgba(255,85,96,0.15);color:#ff5560;border:1px solid rgba(255,85,96,0.3)} .az-scoreboard .as-col p.note{font-size:13px;color:#7782a8;margin:0 0 18px;line-height:1.5} .az-scoreboard .as-row{display:grid;grid-template-columns:32px 64px 1fr auto;align-items:center;gap:14px;padding:14px 18px;background:#13131f;border:1px solid #1f1f2e;border-radius:6px;margin-bottom:6px;transition:transform .12s,border-color .12s,background .12s,box-shadow .12s;text-decoration:none;color:inherit;cursor:pointer} .az-scoreboard .as-row:hover{background:#1a1a28;border-color:#3a3a4d;transform:translateX(4px);box-shadow:-4px 0 0 -1px #7cf2a8} .az-scoreboard .as-col.anti .as-row:hover{box-shadow:-4px 0 0 -1px #ff5560} .az-scoreboard .as-rank{font-family:var(--font-display);font-size:22px;font-weight:900;color:#3a3a4d;text-align:center;line-height:1} .az-scoreboard .as-row:hover .as-rank{color:#cdd1eb} .az-scoreboard .as-grade-circle{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:28px;font-weight:900;color:#0a0a12;line-height:1;position:relative;letter-spacing:-0.02em} .az-scoreboard .as-grade-circle.grade-A{background:#7cf2a8} .az-scoreboard .as-grade-circle.grade-B{background:#a8e87a} .az-scoreboard .as-grade-circle.grade-C{background:#ffd45f} .az-scoreboard .as-grade-circle.grade-D{background:#ff9560} .az-scoreboard .as-grade-circle.grade-F{background:#ff5560;color:#fff} .az-scoreboard .as-grade-circle.grade-unknown{background:#3a3a4d;color:#a8b0c4} .az-scoreboard .as-grade-circle .prov-dot{position:absolute;top:-4px;right:-4px;width:14px;height:14px;border-radius:50%;background:#0c0c14;border:2px solid #ffd45f;font-family:var(--font-mono);font-size:7px;line-height:10px;color:#ffd45f;text-align:center;font-weight:700} .az-scoreboard .as-row-name{font-family:var(--font-display);font-size:17px;font-weight:700;color:#fff;line-height:1.2} .az-scoreboard .as-row-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:#7782a8;margin-top:3px} .az-scoreboard .as-row-party.D{color:#6aa3ff} .az-scoreboard .as-row-party.R{color:#ff8c80} .az-scoreboard .as-row-party.I{color:#cccccc} .az-scoreboard .as-row-arrow{color:#5a6080;font-family:var(--font-mono);font-size:16px} .az-scoreboard .as-row:hover .as-row-arrow{color:#fff} .az-scoreboard .as-allbtn{display:inline-flex;align-items:center;gap:10px;background:transparent;border:1.5px solid #4a4d80;color:#cdd1eb;padding:14px 26px;font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;border-radius:4px;cursor:pointer;text-decoration:none;transition:all .12s} .az-scoreboard .as-allbtn:hover{background:#fff;color:#0a0a12;border-color:#fff} /* Mid-bar CTA — drops between rankings and "show all" to drive the locator */ .az-scoreboard .as-cta-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;margin:8px 0 24px;background:linear-gradient(95deg,rgba(124,242,168,0.10),rgba(124,242,168,0.02));border:1px solid rgba(124,242,168,0.25);border-radius:8px;flex-wrap:wrap} .az-scoreboard .as-cta-bar .cta-lead{flex:1;min-width:280px} .az-scoreboard .as-cta-bar .cta-lead .cta-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;color:#7cf2a8;font-weight:700;text-transform:uppercase;margin-bottom:6px} .az-scoreboard .as-cta-bar .cta-lead .cta-title{font-family:var(--font-display);font-size:clamp(20px,2.4vw,26px);font-weight:800;color:#fff;line-height:1.2;letter-spacing:-0.015em} .az-scoreboard .as-cta-bar .cta-action{background:#7cf2a8;color:#0a0a12;border:none;padding:14px 28px;font-family:var(--font-mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;border-radius:4px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:transform .12s,box-shadow .12s} .az-scoreboard .as-cta-bar .cta-action:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(124,242,168,0.5)} .az-scoreboard .as-full{margin-top:24px;display:none} .az-scoreboard .as-full.open{display:block} .az-scoreboard .as-full-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} /* Option-3 card style — used both on the scoreboard and in locator results */ .leg-card-v2{background:#13131f;border:1px solid #2a2a3d;border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:10px;transition:border-color .12s,background .12s} .leg-card-v2:hover{border-color:#4a4d80;background:#1c1c2e} .leg-card-v2 .lc-eyebrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .leg-card-v2 .lc-grade-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);border-radius:18px;padding:4px 12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;color:#fff} .leg-card-v2 .lc-grade-pill .dot{width:8px;height:8px;border-radius:50%} .leg-card-v2 .lc-grade-pill.grade-A .dot{background:#7cf2a8} .leg-card-v2 .lc-grade-pill.grade-B .dot{background:#a8e87a} .leg-card-v2 .lc-grade-pill.grade-C .dot{background:#ffd45f} .leg-card-v2 .lc-grade-pill.grade-D .dot{background:#ff9560} .leg-card-v2 .lc-grade-pill.grade-F .dot{background:#ff5560} .leg-card-v2 .lc-grade-pill.grade-unknown .dot{background:#5a6080} .leg-card-v2 .lc-tenure-badge{display:inline-block;background:rgba(168,176,196,0.12);border:1px solid rgba(168,176,196,0.22);color:#a8b0c4;font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;padding:3px 8px;border-radius:3px} .leg-card-v2 .lc-role{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7782a8;margin-top:6px} .leg-card-v2 .lc-name{font-family:var(--font-display);font-size:24px;font-weight:800;color:#fff;margin:2px 0;line-height:1.1;letter-spacing:-0.01em} .leg-card-v2 .lc-divider{height:1px;background:#2a2a3d;margin:8px 0 4px;border:none} .leg-card-v2 .lc-vote-section{display:flex;flex-direction:column;gap:6px;margin-bottom:6px} .leg-card-v2 .lc-vote-row{background:rgba(255,255,255,0.03);border-left:3px solid #3a3a4d;padding:8px 10px;border-radius:0 3px 3px 0} .leg-card-v2 .lc-vote-row.symbolic{border-left-color:#7cf2a8;background:rgba(124,242,168,0.05)} .leg-card-v2 .lc-vote-row .lc-vote-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:#7782a8;text-transform:uppercase;font-weight:700;margin-bottom:3px} .leg-card-v2 .lc-vote-row.symbolic .lc-vote-label{color:#7cf2a8} .leg-card-v2 .lc-vote-row .lc-vote-detail{font-family:var(--font-mono);font-size:12px;color:#cdd1eb;letter-spacing:.03em} .leg-card-v2 .lc-vote-row a.bill-link{color:inherit;border-bottom:1px dotted #5a6080;text-decoration:none;padding-bottom:1px} .leg-card-v2 .lc-vote-row a.bill-link:hover{color:#fff;border-bottom-color:#fff} .leg-card-v2 .lc-contact{font-family:var(--font-mono);font-size:12px;color:#a8b0c4} .leg-card-v2 .lc-contact a{color:inherit;text-decoration:none;border-bottom:1px solid #2a2a3d} .leg-card-v2 .lc-contact a:hover{color:#fff;border-bottom-color:#fff} .leg-card-v2 .lc-actions{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap} .leg-card-v2 .lc-actions a,.leg-card-v2 .lc-actions button{background:transparent;border:1px solid #4a4d80;color:#cdd1eb;padding:7px 11px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;border-radius:3px;cursor:pointer;text-decoration:none} .leg-card-v2 .lc-actions a.primary,.leg-card-v2 .lc-actions button.primary{background:#7cf2a8;border-color:#7cf2a8;color:#0c0c14} .leg-card-v2 .lc-actions a:hover,.leg-card-v2 .lc-actions button:hover{background:#fff;color:#0c0c14;border-color:#fff} .leg-card-v2 .lc-actions a.primary:hover,.leg-card-v2 .lc-actions button.primary:hover{background:#fff;color:#0c0c14} @media (max-width:780px){ .az-scoreboard{padding:40px 0 44px} .az-scoreboard h2{font-size:clamp(30px,8vw,48px)} /* Mobile: bar becomes a vertical stack — override --seg-w so each segment spans the full width regardless of the JS-computed proportional value. */ .az-scoreboard .dist-bar{height:auto;flex-direction:column;display:flex} .az-scoreboard .dist-seg{ width:100% !important; --seg-w:100%; flex-direction:row; justify-content:space-between; align-items:center; padding:14px 18px; min-height:56px; } .az-scoreboard .dist-seg + .dist-seg{border-left:none;border-top:1px solid rgba(0,0,0,0.25)} .az-scoreboard .dist-seg .num{font-size:28px;order:2} .az-scoreboard .dist-seg .lbl{font-size:11px;letter-spacing:.14em;order:1;white-space:normal} .az-scoreboard .as-filters{padding:12px;gap:6px} .az-scoreboard .as-filter-label{width:100%;margin:2px 0 0} .az-scoreboard .as-rankings{grid-template-columns:1fr;gap:32px} .az-scoreboard .as-cta-bar{padding:18px 20px;gap:16px} .az-scoreboard .as-cta-bar .cta-action{width:100%;justify-content:center} .az-scoreboard .as-grade-circle{width:54px;height:54px;font-size:24px} } /* ===== LEGISLATOR LOCATOR ===== */ .locator{background:linear-gradient(180deg,#1a1a1f 0%,#0e0e12 100%);color:#fff;padding:56px 0 64px;border-bottom:6px solid var(--brand)} .locator h2{color:#fff;margin:0 0 8px} .locator .sub{color:#a8b0e0;margin:0 0 24px;font-size:16px;max-width:680px} .locator-tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid #4a4d80} .locator-tab{background:none;border:none;color:#a8b0e0;font-family:var(--font-mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;padding:14px 22px;cursor:pointer;font-weight:700;border-bottom:3px solid transparent;margin-bottom:-1px} .locator-tab.active{color:#fff;border-bottom-color:var(--brand)} .locator-tab:hover{color:#fff} .locator-form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-bottom:8px} .locator-form input[type=text]{flex:1;min-width:200px;background:rgba(255,255,255,.06);border:1.5px solid #4a4d80;color:#fff;padding:14px 18px;font-family:var(--font-mono);font-size:18px;letter-spacing:.05em;border-radius:3px} .locator-form input[type=text]:focus{outline:none;border-color:var(--brand);background:rgba(255,255,255,.10)} .locator-form input[type=text]::placeholder{color:#7782b8} .locator-form select{background:rgba(255,255,255,.06);border:1.5px solid #4a4d80;color:#fff;padding:14px 18px;font-family:var(--font-mono);font-size:14px;border-radius:3px} .locator-form button{background:var(--brand);color:#fff;border:none;padding:14px 28px;font-family:var(--font-mono);font-size:13px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;cursor:pointer;border-radius:3px;white-space:nowrap} .locator-form button:hover{background:#0a2680} .locator-hint{color:#7782b8;font-size:12px;margin-top:4px;font-family:var(--font-mono);letter-spacing:.05em} .locator-results{margin-top:32px;display:none} .locator-results.show{display:block} .locator-summary{background:rgba(255,255,255,.06);border-left:4px solid var(--brand);padding:18px 22px;margin-bottom:24px;font-size:15px;line-height:1.5} .locator-summary strong{color:#fff;font-family:var(--font-display);font-size:20px} .locator-summary .state-pill{display:inline-block;padding:4px 10px;background:var(--status-active);color:#fff;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;font-weight:700;text-transform:uppercase;margin-left:8px;border-radius:2px;vertical-align:middle} .legislator-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} .legislator-card{background:rgba(255,255,255,.04);border:1px solid #4a4d80;border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s ease,background .15s ease} .legislator-card:hover{border-color:var(--brand);background:rgba(255,255,255,.08)} .legislator-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .legislator-card .role{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#a8b0e0} .legislator-card .name{font-family:var(--font-display);font-size:22px;font-weight:800;color:#fff;margin:2px 0;line-height:1.15} .legislator-card .party{font-family:var(--font-mono);font-size:11px;color:#a8b0e0;letter-spacing:.08em} .legislator-card .party.D{color:#6aa3ff} .legislator-card .party.R{color:#ff8c80} .legislator-card .party.I{color:#cccccc} .legislator-card .status-badge{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:2px;font-weight:700;align-self:flex-start} .legislator-card .status-badge.supports{background:var(--status-repeal);color:#fff} .legislator-card .status-badge.silent{background:var(--status-pending);color:#1a1a1a} .legislator-card .status-badge.opposes{background:var(--status-active);color:#fff} .legislator-card .status-badge.awaiting{background:#4a4d80;color:#fff} .legislator-card .contact{font-family:var(--font-mono);font-size:13px;color:#cdd1eb;margin-top:4px} .legislator-card .contact a{color:inherit;text-decoration:none;border-bottom:1px solid #4a4d80} .legislator-card .contact a:hover{color:#fff;border-bottom-color:#fff} .legislator-card .actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap} .legislator-card .actions a, .legislator-card .actions button{background:transparent;border:1.5px solid #6a72b8;color:#cdd1eb;padding:7px 12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;border-radius:2px;cursor:pointer;text-decoration:none} .legislator-card .actions a.primary, .legislator-card .actions button.primary{background:var(--brand);border-color:var(--brand);color:#fff} .legislator-card .actions a:hover, .legislator-card .actions button:hover{background:#fff;color:var(--ink-dark);border-color:#fff} .legislator-card .actions a.primary:hover, .legislator-card .actions button.primary:hover{background:#fff;color:var(--brand);border-color:#fff} .locator-loading{text-align:center;color:#a8b0e0;padding:36px;font-family:var(--font-mono);font-size:14px} .locator-error{background:rgba(200,16,46,.18);border-left:4px solid var(--status-active);color:#fff;padding:14px 18px;font-size:14px;border-radius:3px;margin-top:16px} .locator-cta{margin-top:24px;padding:18px 22px;background:rgba(14,52,160,.18);border:1px dashed var(--brand);border-radius:6px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .locator-cta .txt{flex:1;min-width:240px;color:#cdd1eb} .locator-cta .txt strong{color:#fff;font-family:var(--font-display);font-size:18px;display:block;margin-bottom:4px} /* =========================================================== RESPONSIVE — mobile-first refinements =============================================================*/ /* Tablets & smaller phones — under 700px */ @media (max-width: 700px){ .wrap{padding:0 16px} /* Hero */ .hero{padding:24px 0 40px} .hero .logo-wrap{max-width:340px;margin-bottom:20px} .hero h1{font-size:clamp(26px,5.8vw,42px);line-height:1.15} .hero p.lede{font-size:15px;line-height:1.5} .hero .counter{gap:14px;margin-top:20px;padding-top:18px} .hero .counter .stat{flex:1;min-width:120px} .hero .counter .stat .num{font-size:34px} .hero .counter .stat .lbl{font-size:10px;letter-spacing:.1em} /* Ticker */ .ticker{padding:8px 0} .ticker-inner{font-size:12px;gap:32px} /* Sections */ section{padding:36px 0} /* Tile map — tiles need to stay tappable */ .tilemap{grid-template-columns:repeat(12,1fr);gap:2px} .tile{font-size:10px;font-weight:800} .tile .grade{font-size:8px;top:1px;right:2px} .maplabel{font-size:10px;line-height:1.5} /* National grade block — stack vertically */ #national-grade > div{grid-template-columns:1fr !important;gap:18px !important;padding:24px 18px !important;text-align:center} #national-grade > div > div:first-child > div:first-child{font-size:96px !important;line-height:1 !important} #national-grade > div > div:nth-child(2){text-align:left} #national-grade > div > div:nth-child(2) > div:nth-child(2){font-size:22px !important;line-height:1.25 !important} /* Hall of F — stack D and R columns vertically, tighten */ #hall-of-f > div{padding:24px 18px !important} #hall-of-f > div > h2{font-size:26px !important;line-height:1.15 !important} #hall-of-f > div > div:last-of-type{grid-template-columns:1fr !important;gap:18px !important} .hof-card{padding:12px 14px !important;gap:10px !important} .hof-card > div:first-child{font-size:30px !important;min-width:34px !important} .hof-actions{display:none !important} /* Locator — section padding + tab layout */ .locator{padding:32px 0 40px} .locator > .wrap > div:first-child{flex-direction:column !important;align-items:flex-start !important;gap:8px !important} .locator > .wrap > div:first-child > div:last-child{text-align:left !important} .locator-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch} .locator-tab{padding:12px 16px;font-size:11px;letter-spacing:.1em;flex-shrink:0} .locator-form{flex-direction:column} .locator-form input[type=text], .locator-form select, .locator-form button{width:100%} /* Legislator cards */ .legislator-grid{grid-template-columns:1fr} .legislator-card{padding:16px} /* Voter guide */ #voter-guide-grid > div{margin-bottom:18px} #voter-guide-grid > div > div:first-child{padding:12px 14px} #voter-guide-grid > div > div:first-child h3{font-size:16px !important} #voter-guide-grid > div > div:last-child{grid-template-columns:1fr !important} #voter-guide-grid > div > div:last-child > div{border-right:none !important;border-bottom:1px solid var(--rule)} /* Worst offenders */ #worst-offenders > div{grid-template-columns:1fr !important;gap:10px !important} /* Press kit section */ section > .wrap > div[style*="grid-template-columns:1fr auto"]{grid-template-columns:1fr !important;gap:18px !important;padding:24px 20px !important;text-align:left} section > .wrap > div[style*="grid-template-columns:1fr auto"] h2{font-size:24px !important} /* Modal */ .modal-body .row{grid-template-columns:1fr;padding:8px 0} .modal-body .row .k{padding-top:0;font-size:10px} .modal-head{padding:18px 20px 14px} .modal-head h3{font-size:24px} .modal-body{padding:18px 20px} .modal-foot{padding:14px 20px 18px;gap:8px;flex-direction:column} .modal-foot .btn{width:100%;text-align:center;justify-content:center;padding:12px 14px} .modal-foot .btn:last-child{font-size:11px} /* Call modal — make the phone number tappable + big */ #call-modal-bg #call-modal-phone{font-size:24px !important;padding:16px 18px !important} /* Voter guide forms (deprecated but if any other dropdowns appear) */ .tools{flex-direction:column} .tools input, .tools select, .tools button{width:100%} /* Table */ table.statelist{font-size:13px} table.statelist th, table.statelist td{padding:8px 5px} table.statelist td:nth-child(5){display:none} /* hide court history column on mobile */ /* Embed snippet */ .embed-box{padding:18px;font-size:11px} .embed-box .copy{top:10px;right:10px} /* Preview banner */ .preview-banner{padding:8px 14px;font-size:11px;letter-spacing:.05em;line-height:1.4} .preview-banner .pill{display:inline-block;margin-bottom:4px} .preview-banner a{display:inline-block;margin-left:8px} .preview-banner .close{margin-left:6px} } /* Phones — under 480px (tighter still) */ @media (max-width: 480px){ .hero h1{font-size:24px;line-height:1.2} .hero p.lede{font-size:14px} .hero .counter .stat .num{font-size:28px} section h2{font-size:24px} /* Hide the per-tile grade letter on the smallest screens to keep tiles legible */ .tile{font-size:9px} .tile .grade{display:none} /* National grade — smaller letter */ #national-grade > div > div:first-child > div:first-child{font-size:72px !important} #national-grade > div > div:nth-child(2) > div:nth-child(2){font-size:18px !important} /* Hall of F — tighter */ #hall-of-f > div > h2{font-size:22px !important} .hof-card > div:nth-child(2) > div:first-child{font-size:14px !important} .hof-card > div:nth-child(2) > div:nth-child(2){font-size:9px !important} .hof-card > div:nth-child(2) > div:nth-child(3){font-size:9px !important} /* Worst offenders cards */ #worst-offenders > div > div{padding:12px 14px !important;gap:10px !important} #worst-offenders > div > div > div:nth-child(2){font-size:32px !important;min-width:36px !important} /* Voter guide */ #voter-guide-grid > div > div:first-child h3{font-size:15px !important} /* Footer */ footer{padding:24px 0;font-size:12px} } /* ════════════════════════════════════════════════════════════════════════════ THEME TOGGLE — light / dark variants ──────────────────────────────────────────────────────────────────────────── Default: dark (the existing editorial treatment). Light theme is applied when . The toggle button persists to localStorage and respects prefers-color-scheme on first visit. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Theme toggle button (always-visible, fixed top-right) ────────────── */ .theme-toggle{ position:fixed; top:14px; right:14px; z-index:1000; width:44px; height:44px; border-radius:22px; background:rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.18); color:#fff; cursor:pointer; font-size:20px; line-height:1; display:inline-flex; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background 0.12s, transform 0.12s, border-color 0.12s, color 0.12s; } .theme-toggle:hover{ transform:scale(1.06); background:rgba(0,0,0,0.6) } .theme-toggle:focus-visible{ outline:2px solid #7cf2a8; outline-offset:2px } .theme-toggle .theme-toggle-icon{ display:block } /* ── Light theme variable overrides ──────────────────────────────────── */ [data-theme="light"]{ --dark-bg: #ffffff; --dark-bg-alt: #f4f4f6; --dark-bg-elev: #ffffff; --dark-border: #e0e3eb; --dark-border-strong: #c5cad6; --ink-white: #1a1a28; --ink-light: #303030; --ink-muted: #6b6b7a; --ink-faint: #9094a8; --mint: #2e7d5b; /* darker green for contrast on white */ --alert: #c8102e; /* brand alert red */ --amber: #c97a3d; /* darker amber on white */ --orange: #c97a3d; --lime: #5fa37a; } /* Theme toggle button — light variant */ [data-theme="light"] .theme-toggle{ background:rgba(255,255,255,0.92); border-color:rgba(0,0,0,0.12); color:#1a1a28; box-shadow:0 4px 12px rgba(0,0,0,0.10); } [data-theme="light"] .theme-toggle:hover{ background:rgba(255,255,255,1); } /* ── Light-theme explicit overrides (where hardcoded values exist) ───── */ [data-theme="light"] html, [data-theme="light"] body{ background:#ffffff; color:#1a1a28 } [data-theme="light"] section{ background:#ffffff; color:#1a1a28 } [data-theme="light"] section.alt{ background:#f4f4f6 } [data-theme="light"] section h2{ color:#1a1a28 } [data-theme="light"] section h2 em{ color:#2e7d5b } [data-theme="light"] section h2 + p.sub, [data-theme="light"] section h2 ~ p.sub{ color:#4a4d6a } [data-theme="light"] section h2 + p.sub a, [data-theme="light"] section .sub a{ color:#2e7d5b; border-bottom-color:#2e7d5b } [data-theme="light"] section h2 + p.sub a:hover{ background:#2e7d5b; color:#fff } /* Section kicker chips */ [data-theme="light"] .sect-kicker{ color:#2e7d5b; background:rgba(46,125,91,0.10); border-color:rgba(46,125,91,0.25) } [data-theme="light"] .sect-kicker.alert{ color:#c8102e; background:rgba(200,16,46,0.08); border-color:rgba(200,16,46,0.22) } [data-theme="light"] .sect-kicker.amber{ color:#c97a3d; background:rgba(232,163,61,0.12); border-color:rgba(232,163,61,0.30) } /* Hero */ [data-theme="light"] .hero{ background:#ffffff; color:#1a1a28; border-bottom-color:#e0e3eb } [data-theme="light"] .hero h1{ color:#1a1a28 } [data-theme="light"] .hero h1 em{ color:#1a1a28; background:linear-gradient(180deg,transparent 62%,rgba(200,16,46,0.28) 62%) } [data-theme="light"] .hero p.lede{ color:#4a4d6a } [data-theme="light"] .hero .counter{ border-top-color:#d6d6da } [data-theme="light"] .hero .counter .stat .num{ color:#1a1a28 } [data-theme="light"] .hero .counter .stat .lbl{ color:#6b6b7a } /* Ticker */ [data-theme="light"] .ticker{ background:#f4f4f6; color:#303030; border-top-color:#d6d6da; border-bottom-color:#d6d6da } [data-theme="light"] .ticker-tag{ background:#2e7d5b; color:#fff } /* AZ Scoreboard */ [data-theme="light"] .az-scoreboard{ background:#ffffff; color:#1a1a28; border-bottom-color:#e0e3eb } [data-theme="light"] .az-scoreboard h2{ color:#1a1a28 } [data-theme="light"] .az-scoreboard h2 em{ color:#1a1a28; background:linear-gradient(180deg,transparent 60%,rgba(200,16,46,0.28) 60%) } [data-theme="light"] .az-scoreboard h2 .accent{ color:#2e7d5b } [data-theme="light"] .az-scoreboard .sub-az{ color:#4a4d6a } [data-theme="light"] .az-scoreboard .kicker-az{ color:#2e7d5b; background:rgba(46,125,91,0.10); border-color:rgba(46,125,91,0.25) } [data-theme="light"] .az-scoreboard .dist-bar{ border-color:#d6d6da } [data-theme="light"] .az-scoreboard .dist-seg.ungraded{ background:#eef0f5 } [data-theme="light"] .az-scoreboard .dist-seg.ungraded .num, [data-theme="light"] .az-scoreboard .dist-seg.ungraded .lbl{ color:#4a4d6a } [data-theme="light"] .az-scoreboard .dist-note{ color:#6b6b7a } [data-theme="light"] .az-scoreboard .as-filters{ background:#f8f9fc; border-color:#e0e3eb } [data-theme="light"] .az-scoreboard .as-filter-group{ background:#ffffff; border-color:#d6d6da } [data-theme="light"] .az-scoreboard .as-filter-label{ color:#6b6b7a } [data-theme="light"] .az-scoreboard .as-chip{ color:#303030 } [data-theme="light"] .az-scoreboard .as-chip:hover{ background:#f4f4f6; color:#1a1a28 } [data-theme="light"] .az-scoreboard .as-chip.active{ background:#2e7d5b; color:#ffffff } [data-theme="light"] .az-scoreboard .as-col h3{ color:#1a1a28 } [data-theme="light"] .az-scoreboard .as-col h3 .accent.pro{ background:rgba(46,125,91,0.12); color:#2e7d5b; border-color:rgba(46,125,91,0.3) } [data-theme="light"] .az-scoreboard .as-col h3 .accent.anti{ background:rgba(200,16,46,0.10); color:#c8102e; border-color:rgba(200,16,46,0.3) } [data-theme="light"] .az-scoreboard .as-col p.note{ color:#6b6b7a } [data-theme="light"] .az-scoreboard .as-row{ background:#f8f9fc; border-color:#e0e3eb } [data-theme="light"] .az-scoreboard .as-row:hover{ background:#ffffff; border-color:#c5cad6; box-shadow:-4px 0 0 -1px #2e7d5b, 0 4px 10px rgba(0,0,0,0.05) } [data-theme="light"] .az-scoreboard .as-col.anti .as-row:hover{ box-shadow:-4px 0 0 -1px #c8102e, 0 4px 10px rgba(0,0,0,0.05) } [data-theme="light"] .az-scoreboard .as-rank{ color:#9094a8 } [data-theme="light"] .az-scoreboard .as-row:hover .as-rank{ color:#1a1a28 } [data-theme="light"] .az-scoreboard .as-row-name{ color:#1a1a28 } [data-theme="light"] .az-scoreboard .as-row-meta{ color:#6b6b7a } [data-theme="light"] .az-scoreboard .as-row-party.D{ color:#0e34a0 } [data-theme="light"] .az-scoreboard .as-row-party.R{ color:#c8102e } [data-theme="light"] .az-scoreboard .as-cta-bar{ background:linear-gradient(95deg,rgba(46,125,91,0.08),rgba(46,125,91,0.02)); border-color:rgba(46,125,91,0.30) } [data-theme="light"] .az-scoreboard .as-cta-bar .cta-eyebrow{ color:#2e7d5b } [data-theme="light"] .az-scoreboard .as-cta-bar .cta-lead .cta-title{ color:#1a1a28 } [data-theme="light"] .az-scoreboard .as-cta-bar .cta-action{ background:#2e7d5b; color:#ffffff } [data-theme="light"] .az-scoreboard .as-cta-bar .cta-action:hover{ box-shadow:0 8px 24px -8px rgba(46,125,91,0.5) } [data-theme="light"] .az-scoreboard .as-allbtn{ color:#303030; border-color:#c5cad6 } [data-theme="light"] .az-scoreboard .as-allbtn:hover{ background:#1a1a28; color:#fff; border-color:#1a1a28 } /* dist-seg grade colors keep their saturated hues — they're the data signal */ /* Locator */ [data-theme="light"] .locator{ background:#f8f9fc; color:#1a1a28; border-top-color:#e0e3eb; border-bottom-color:#e0e3eb } [data-theme="light"] .locator h2{ color:#1a1a28 } [data-theme="light"] .locator h2 em{ color:#2e7d5b } [data-theme="light"] .locator .sub{ color:#4a4d6a } [data-theme="light"] .locator-tabs{ border-bottom-color:#d6d6da } [data-theme="light"] .locator-tab{ color:#4a4d6a } [data-theme="light"] .locator-tab.active{ color:#1a1a28; border-bottom-color:#2e7d5b } [data-theme="light"] .locator-form input[type=text], [data-theme="light"] .locator-form select{ background:#ffffff; border-color:#c5cad6; color:#1a1a28 } [data-theme="light"] .locator-form input[type=text]::placeholder{ color:#9094a8 } [data-theme="light"] .locator-form button{ background:#2e7d5b; color:#ffffff } [data-theme="light"] .locator-form button:hover{ background:#1d5e44 } [data-theme="light"] .locator-hint{ color:#6b6b7a } [data-theme="light"] .locator-summary{ background:#ffffff; border-left-color:#2e7d5b; color:#303030 } [data-theme="light"] .locator-cta{ background:rgba(46,125,91,0.06); border-color:#2e7d5b; color:#303030 } [data-theme="light"] .locator-cta .txt strong{ color:#1a1a28 } /* Legislator cards (ORIGINAL .legislator-card class — used by the locator results). These rules were missed in the first light-theme pass because I'd only themed the newer .leg-card-v2 class used by the scoreboard. */ [data-theme="light"] .legislator-card{ background:#ffffff; border-color:#d6d6da; color:#303030 } [data-theme="light"] .legislator-card:hover{ border-color:#2e7d5b; background:#f8f9fc; box-shadow:0 2px 8px rgba(0,0,0,0.05) } [data-theme="light"] .legislator-card .role{ color:#6b6b7a } [data-theme="light"] .legislator-card .name{ color:#1a1a28 } [data-theme="light"] .legislator-card .name span{ color:#6b6b7a !important } /* the "TITLE" sub-text on leadership */ [data-theme="light"] .legislator-card .party{ color:#6b6b7a } [data-theme="light"] .legislator-card .party.D{ color:#0e34a0 } [data-theme="light"] .legislator-card .party.R{ color:#c8102e } [data-theme="light"] .legislator-card .party.I{ color:#6b6b7a } [data-theme="light"] .legislator-card .status-badge.awaiting{ background:#9094a8; color:#ffffff } [data-theme="light"] .legislator-card .contact{ color:#4a4d6a } [data-theme="light"] .legislator-card .contact a{ color:#1a1a28; border-bottom-color:#d6d6da } [data-theme="light"] .legislator-card .contact a:hover{ color:#2e7d5b; border-bottom-color:#2e7d5b } [data-theme="light"] .legislator-card .actions a, [data-theme="light"] .legislator-card .actions button{ background:transparent; border-color:#c5cad6; color:#1a1a28; } [data-theme="light"] .legislator-card .actions a.primary, [data-theme="light"] .legislator-card .actions button.primary{ background:#2e7d5b; border-color:#2e7d5b; color:#ffffff; } [data-theme="light"] .legislator-card .actions a:hover, [data-theme="light"] .legislator-card .actions button:hover{ background:#1a1a28; color:#ffffff; border-color:#1a1a28; } [data-theme="light"] .legislator-card .actions a.primary:hover, [data-theme="light"] .legislator-card .actions button.primary:hover{ background:#1d5e44; color:#ffffff; border-color:#1d5e44; } /* FIRST-SESSION badge (inside legislator card) */ [data-theme="light"] .legislator-card span[title*="Not in office"]{ background:rgba(107,107,122,0.10) !important; border-color:rgba(107,107,122,0.25) !important; color:#4a4d6a !important; } /* Vote grid inside .legislator-card */ [data-theme="light"] .legislator-card .legend, [data-theme="light"] .legislator-card div[style*="color:#a8b0e0"]{ color:#6b6b7a !important } /* Bill links in the votes grid — the dotted underlines */ [data-theme="light"] .legislator-card a[title][href*="legiscan.com"]{ color:#1a1a28 !important; } [data-theme="light"] .legislator-card a[title][href*="legiscan.com"] > div{ color:#6b6b7a !important; border-bottom-color:#d6d6da !important; } /* Locator results header / summary */ [data-theme="light"] .locator-results h3, [data-theme="light"] .locator-results > h3{ color:#1a1a28 !important } [data-theme="light"] #locator-results h3[style*="color:#a8b0e0"]{ color:#4a4d6a !important } [data-theme="light"] .locator-summary strong{ color:#1a1a28 } [data-theme="light"] .locator-summary div[style*="color:#cdd1eb"]{ color:#4a4d6a !important } /* The CALL counter widget at top of locator section */ [data-theme="light"] #call-counter-display{ color:#2e7d5b !important } /* Modal heading style override for light */ [data-theme="light"] .modal-head{ background:#1a1a28; color:#ffffff } /* AZ campaign CTA inside locator */ [data-theme="light"] .locator-cta .btn, [data-theme="light"] .locator-cta a.btn{ background:#2e7d5b; color:#ffffff; } /* Legislator cards (option-3) */ [data-theme="light"] .leg-card-v2{ background:#ffffff; border-color:#d6d6da; color:#303030 } [data-theme="light"] .leg-card-v2:hover{ border-color:#c5cad6; background:#f8f9fc } [data-theme="light"] .leg-card-v2 .lc-grade-pill{ background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.10); color:#1a1a28 } [data-theme="light"] .leg-card-v2 .lc-tenure-badge{ background:rgba(107,107,122,0.08); border-color:rgba(107,107,122,0.20); color:#4a4d6a } [data-theme="light"] .leg-card-v2 .lc-role{ color:#6b6b7a } [data-theme="light"] .leg-card-v2 .lc-name{ color:#1a1a28 } [data-theme="light"] .leg-card-v2 .lc-divider{ background:#e0e3eb } [data-theme="light"] .leg-card-v2 .lc-vote-row{ background:rgba(0,0,0,0.03); border-left-color:#c5cad6 } [data-theme="light"] .leg-card-v2 .lc-vote-row.symbolic{ background:rgba(46,125,91,0.06); border-left-color:#2e7d5b } [data-theme="light"] .leg-card-v2 .lc-vote-row .lc-vote-label{ color:#6b6b7a } [data-theme="light"] .leg-card-v2 .lc-vote-row.symbolic .lc-vote-label{ color:#2e7d5b } [data-theme="light"] .leg-card-v2 .lc-vote-row .lc-vote-detail{ color:#303030 } [data-theme="light"] .leg-card-v2 .lc-contact{ color:#4a4d6a } [data-theme="light"] .leg-card-v2 .lc-actions a, [data-theme="light"] .leg-card-v2 .lc-actions button{ background:transparent; border-color:#c5cad6; color:#303030 } [data-theme="light"] .leg-card-v2 .lc-actions a.primary, [data-theme="light"] .leg-card-v2 .lc-actions button.primary{ background:#2e7d5b; border-color:#2e7d5b; color:#ffffff } [data-theme="light"] .leg-card-v2 .lc-actions a:hover, [data-theme="light"] .leg-card-v2 .lc-actions button:hover{ background:#1a1a28; color:#ffffff; border-color:#1a1a28 } /* Tile map — clean (no-law) tiles invert */ [data-theme="light"] .tile.clean{ background:#ffffff; color:#1a1a28; border-color:#c5cad6 } [data-theme="light"] .tile.clean .grade{ color:#1a1a28 } [data-theme="light"] section .legend{ color:#303030 } [data-theme="light"] .maplabel{ color:#6b6b7a } [data-theme="light"] .maplabel b{ background:#2e7d5b; color:#ffffff } /* Voter Guide */ [data-theme="light"] #voter-guide{ background:#f4f4f6 } [data-theme="light"] #voter-guide-empty{ color:#6b6b7a; background:rgba(0,0,0,0.02); border-color:#d6d6da } /* Table */ [data-theme="light"] .tools input, [data-theme="light"] .tools select{ background:#ffffff; border-color:#c5cad6; color:#1a1a28 } [data-theme="light"] .tools input::placeholder{ color:#9094a8 } [data-theme="light"] table.statelist{ color:#303030 } [data-theme="light"] table.statelist th{ color:#1a1a28; border-bottom-color:#c5cad6 } [data-theme="light"] table.statelist th:hover{ color:#2e7d5b } [data-theme="light"] table.statelist td{ border-bottom-color:#e0e3eb } [data-theme="light"] table.statelist tr:hover{ background:#f4f4f6 } [data-theme="light"] table.statelist tr td:first-child{ color:#1a1a28 } /* News */ [data-theme="light"] .news-item{ background:#ffffff; border-color:#d6d6da; color:#303030 } [data-theme="light"] .news-item:hover{ border-color:#2e7d5b; background:#f8f9fc } [data-theme="light"] .news-item h4{ color:#1a1a28 } [data-theme="light"] .news-item h4 a{ color:#1a1a28; border-bottom-color:#2e7d5b } [data-theme="light"] .news-item h4 a:hover{ color:#2e7d5b } [data-theme="light"] .news-item .meta{ color:#2e7d5b } /* Watchlist */ [data-theme="light"] #watchlist-section{ background:#f4f4f6 !important } [data-theme="light"] #watchlist-scan-date{ color:#1a1a28 } /* Press kit — keep the inner card dark even in light theme for drama */ [data-theme="light"] section.press-kit-section{ background:#ffffff; border-top-color:#e0e3eb } /* Coalition — light theme */ [data-theme="light"] .coalition{ background:#f4f4f6; border-top-color:#e0e3eb } [data-theme="light"] .coalition h2{ color:#1a1a28 } [data-theme="light"] .coalition .sub{ color:#454759 } [data-theme="light"] .coalition-card{ background:#ffffff; border-color:#d6d6da } [data-theme="light"] .coalition-card .cc-name{ color:#1a1a28 } [data-theme="light"] .coalition-card .cc-role{ color:#6b6b7a } [data-theme="light"] .coalition-card-cta{ background:transparent; border:2px dashed #0E34A0 } [data-theme="light"] .coalition-card-cta .cc-name{ color:#0E34A0 !important } [data-theme="light"] .coalition-card-cta:hover{ background:rgba(14,52,160,0.04) } [data-theme="light"] .coalition-cta{ background:#ffffff; border:2px solid #0E34A0 } [data-theme="light"] .coalition-cta .cc-eyebrow{ color:#0E34A0 } [data-theme="light"] .coalition-cta .cc-title{ color:#1a1a28 } [data-theme="light"] .coalition-cta .cc-sub{ color:#454759 } [data-theme="light"] .coalition-cta-btn{ background:#0E34A0; color:#ffffff } [data-theme="light"] .coalition-cta-btn:hover{ background:#082273 } /* (the inner gradient card stays dark for visual punch; deliberate) */ /* Share / embed */ [data-theme="light"] .embed-box{ background:#1a1a28; color:#cdd1eb; border-color:#2a2a3d } /* Footer — stays dark in light mode for visual anchor */ [data-theme="light"] footer{ background:#1a1a28; color:#cdd1eb; border-top-color:#e0e3eb } [data-theme="light"] footer .src{ color:#8b94c0 } [data-theme="light"] footer a{ color:#7cf2a8 } /* Buttons */ [data-theme="light"] .btn{ background:#2e7d5b; color:#ffffff } [data-theme="light"] .btn:hover{ background:#1d5e44 } [data-theme="light"] .btn.ghost{ background:transparent; color:#303030; border-color:#c5cad6 } [data-theme="light"] .btn.ghost:hover{ background:#1a1a28; color:#ffffff; border-color:#1a1a28 } /* Modal — already light in dark mode, no change */ [data-theme="light"] .modal-bg{ background:rgba(26,26,40,0.65) } /* Make sure the hero gradient line still reads on white */ [data-theme="light"] .hero::before, [data-theme="light"] .az-scoreboard::before{ opacity:0.7 } /* ════════════════════════════════════════════════════════════════════════════ ACCESSIBILITY — WCAG 2.1 AA (both themes) ────────────────────────────────────────────────────────────────────────── • Bumped muted text colors so body text passes 4.5:1 on dark • Theme-aware ticker + news description colors (replaces inline white/grey) • Visible :focus-visible rings on every interactive element • Respects prefers-reduced-motion (ticker scroll, hover transforms) ═══════════════════════════════════════════════════════════════════════════ */ /* Bump muted contrast on dark from 4.9:1 → 6.2:1 (--ink-muted) and from 3.1:1 → 4.0:1 (--ink-faint, for large text + labels). */ :root{ --ink-muted: #8b94c0; --ink-faint: #6b7290; } /* Light theme keeps its already-AA-compliant values (5.1:1) */ [data-theme="light"]{ --ink-muted: #5a5a6a; /* 7.1:1 on white */ --ink-faint: #7c8190; /* 4.6:1 on white */ } /* Ticker link — theme-aware (replaces inline color:#fff that was unreadable on the light-mode ticker background). */ .ticker-link{ color:#fff; text-decoration:none } .ticker-link:hover{ text-decoration:underline } [data-theme="light"] .ticker-link{ color:#1a1a28 } [data-theme="light"] .ticker .ticker-inner, [data-theme="light"] .ticker .ticker-inner span{ color:#1a1a28 } /* News description — theme-aware (replaces inline color:#555) */ .news-desc{ font-size:14px; color:var(--ink-muted); margin-top:8px; line-height:1.5 } [data-theme="light"] .news-desc{ color:#4a4d6a } /* ── Visible focus rings on every interactive element ────────────────── */ :focus{ outline:none } a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:3px solid var(--mint); outline-offset:3px; border-radius:2px; } [data-theme="light"] a:focus-visible, [data-theme="light"] button:focus-visible, [data-theme="light"] [role="button"]:focus-visible, [data-theme="light"] input:focus-visible, [data-theme="light"] select:focus-visible, [data-theme="light"] textarea:focus-visible, [data-theme="light"] [tabindex]:focus-visible{ outline-color:#2e7d5b; } /* Tighter ring on chips + tabs (they already have backgrounds) */ .az-scoreboard .as-chip:focus-visible, .locator-tab:focus-visible{ outline-offset:1px; outline-width:2px } /* Tile map tiles — focus ring must clear the colored swatch */ .tile:focus-visible{ outline:3px solid var(--mint); outline-offset:2px; z-index:3 } [data-theme="light"] .tile:focus-visible{ outline-color:#2e7d5b } /* ── In-prose emphasis that adapts to theme ────────────────────────── Used inline inside

blocks instead of style="color:#fff", which would be invisible in light mode. */ .emphasis-ink{ color:#ffffff; font-weight:700 } [data-theme="light"] .emphasis-ink{ color:#1a1a28 } /* ── Locator CTA inner text — third-time-lucky fix ──────────────────── The inner .txt div had a hardcoded color:#cdd1eb that my outer .locator-cta override didn't reach. Explicitly target the inner element. */ [data-theme="light"] .locator-cta .txt{ color:#303030 } [data-theme="light"] .state-court-cell{ color:#6b6b7a } /* ── Reduced-motion preference ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } /* Specifically pause the ticker rather than running it at light-speed */ .ticker-inner{ animation:none !important; transform:none !important } /* Stop hover translates from jumping under reduced-motion */ .az-scoreboard .as-row:hover{ transform:none } .news-item:hover{ transform:none } } /* ════════════════════════════════════════════════════════════════════════ FIRST-VISIT GUIDED TOUR (v2 — loaded via shared/tour.js) ═════════════════════════════════════════════════════════════════════════ */ /* — Initial "First time?" prompt — */ .fit-tour-prompt-overlay { position: fixed; inset: 0; z-index: 9100; background: rgba(10, 10, 20, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fit-tour-fade-in 0.25s ease-out; } .fit-tour-prompt-card { position: relative; max-width: 480px; width: 100%; background: var(--paper, #F7F4EE); color: var(--ink, #1a1a28); border-radius: 8px; padding: 28px 32px 24px; box-shadow: 0 12px 48px rgba(0,0,0,0.4); border: 1px solid var(--rule, #e0e3eb); animation: fit-tour-prompt-pop 0.32s cubic-bezier(0.16, 1.2, 0.4, 1); } [data-theme="dark"] .fit-tour-prompt-card { background: var(--dark-bg-alt, #15151e); color: #cdd1eb; border-color: var(--rule, #2a2a3d); } .fit-tour-prompt-kicker { font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; color: var(--brand, #0e34a0); text-transform: uppercase; margin-bottom: 10px; } [data-theme="dark"] .fit-tour-prompt-kicker { color: var(--accent, #7cf2a8); } .fit-tour-prompt-card h2 { font-family: var(--font-display, "Droid Serif", Georgia, serif); font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0 0 14px; } .fit-tour-prompt-card p { font-family: var(--font-body, system-ui, sans-serif); font-size: 15px; line-height: 1.55; margin: 0 0 22px; color: var(--ink-muted, #4a4d80); } [data-theme="dark"] .fit-tour-prompt-card p { color: #a8b0e0; } .fit-tour-prompt-actions { display: flex; gap: 10px; flex-wrap: wrap; } .fit-tour-prompt-close { position: absolute; top: 12px; right: 14px; background: transparent; border: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--ink-muted, #7782b8); padding: 4px 8px; border-radius: 3px; transition: background 0.12s; } .fit-tour-prompt-close:hover { background: rgba(0,0,0,0.06); color: var(--ink, #1a1a28); } [data-theme="dark"] .fit-tour-prompt-close:hover { background: rgba(255,255,255,0.08); color: #fff; } /* — Buttons — */ .fit-tour-btn-primary { background: var(--brand, #0e34a0); color: #fff; border: none; cursor: pointer; font-family: var(--font-body, system-ui, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; padding: 11px 20px; border-radius: 4px; text-transform: uppercase; transition: filter 0.12s, transform 0.08s; } .fit-tour-btn-primary:hover { filter: brightness(1.1); } .fit-tour-btn-primary:active { transform: scale(0.98); } .fit-tour-btn-secondary { background: transparent; color: var(--ink, #1a1a28); border: 1px solid var(--rule, #c8ccd6); cursor: pointer; font-family: var(--font-body, system-ui, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; padding: 10px 18px; border-radius: 4px; transition: background 0.12s, border-color 0.12s; } [data-theme="dark"] .fit-tour-btn-secondary { color: #cdd1eb; border-color: rgba(255,255,255,0.2); } .fit-tour-btn-secondary:hover { background: rgba(0,0,0,0.04); border-color: var(--brand, #0e34a0); } [data-theme="dark"] .fit-tour-btn-secondary:hover { background: rgba(255,255,255,0.06); border-color: var(--accent, #7cf2a8); } .fit-tour-btn-text { background: transparent; border: none; cursor: pointer; font-family: var(--font-body, system-ui, sans-serif); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-muted, #7782b8); padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; } .fit-tour-btn-text:hover { color: var(--brand, #0e34a0); } [data-theme="dark"] .fit-tour-btn-text:hover { color: var(--accent, #7cf2a8); } /* — Tour overlay — root + 4 dim rects + spotlight frame + tooltip — */ .fit-tour-root { position: fixed; inset: 0; z-index: 9000; pointer-events: none; } .fit-tour-dim { position: fixed; background: rgba(10, 10, 20, 0.62); pointer-events: auto; transition: none; } .fit-tour-spotlight-frame { position: fixed; border: 3px solid var(--accent, #7cf2a8); border-radius: 8px; box-shadow: 0 0 30px rgba(124, 242, 168, 0.35); pointer-events: none; transition: none; } .fit-tour-tooltip { position: fixed; width: 380px; max-width: calc(100vw - 32px); background: var(--paper, #F7F4EE); color: var(--ink, #1a1a28); border-radius: 8px; padding: 18px 22px 16px; box-shadow: 0 14px 48px rgba(0,0,0,0.45); border: 1px solid var(--rule, #e0e3eb); pointer-events: auto; animation: fit-tour-fade-in 0.2s ease-out; } [data-theme="dark"] .fit-tour-tooltip { background: var(--dark-bg-alt, #15151e); color: #cdd1eb; border-color: var(--rule, #2a2a3d); } .fit-tour-tooltip-arrow { position: absolute; width: 16px; height: 16px; background: inherit; border: 1px solid var(--rule, #e0e3eb); border-right: none; border-bottom: none; left: 50%; transform: translateX(-50%) rotate(45deg); } [data-theme="dark"] .fit-tour-tooltip-arrow { border-color: var(--rule, #2a2a3d); } .fit-tour-tooltip-below .fit-tour-tooltip-arrow { top: -9px; } .fit-tour-tooltip-above .fit-tour-tooltip-arrow { top: auto; bottom: -9px; transform: translateX(-50%) rotate(225deg); } .fit-tour-progress { font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--brand, #0e34a0); text-transform: uppercase; margin-bottom: 8px; } [data-theme="dark"] .fit-tour-progress { color: var(--accent, #7cf2a8); } .fit-tour-title { font-family: var(--font-display, "Droid Serif", Georgia, serif); font-size: 19px; font-weight: 700; line-height: 1.25; margin: 0 0 10px; } .fit-tour-body { font-family: var(--font-body, system-ui, sans-serif); font-size: 14px; line-height: 1.55; color: var(--ink-muted, #4a4d80); margin-bottom: 16px; } [data-theme="dark"] .fit-tour-body { color: #a8b0e0; } .fit-tour-body strong { color: var(--ink, #1a1a28); font-weight: 700; } [data-theme="dark"] .fit-tour-body strong { color: #fff; } .fit-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .fit-tour-nav { display: flex; gap: 8px; } /* — Replay button (NOT a link) — */ .fit-tour-replay-link { position: fixed; bottom: 18px; right: 18px; z-index: 89; background: var(--ink-dark, #1A1A28); color: #cdd1eb; font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 4px 14px rgba(0,0,0,0.25); cursor: pointer; transition: background 0.12s, color 0.12s, transform 0.08s; opacity: 0.85; } .fit-tour-replay-link:hover { background: var(--brand, #0e34a0); color: #fff; opacity: 1; transform: translateY(-1px); } [data-theme="light"] .fit-tour-replay-link { background: rgba(26, 26, 40, 0.92); } @media (max-width: 540px) { .fit-tour-replay-link { bottom: 12px; right: 12px; font-size: 10px; padding: 7px 10px; } } /* — Animations — */ @keyframes fit-tour-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fit-tour-prompt-pop { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ===== MAP FILTERING (2026-08-04) — grade + category isolate ===== */ .tile.dimmed{ filter:grayscale(1); opacity:.22; } .tile.dimmed .grade{ text-shadow:none; } .legend .sw[data-cat]{ cursor:pointer; border-radius:20px; padding:3px 10px 3px 5px; transition:background .15s ease, color .15s ease; } .legend .sw[data-cat]:hover{ background:rgba(31,42,68,.08); } .legend .sw.active-filter{ background:#1F2A44; color:#fff; } .legend .sw.active-filter em{ color:#cfd3e0 !important; } .grade-filter{ display:flex; gap:12px; justify-content:center; align-items:stretch; flex-wrap:wrap; margin:20px auto 6px; max-width:820px; } .grade-filter .gf-btn{ font-family:Georgia,serif; font-weight:800; font-size:26px; min-width:76px; min-height:58px; padding:9px 14px 8px; border-radius:10px; border:2px solid #1F2A44; background:#fff; color:#1F2A44; cursor:pointer; line-height:1; transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; } .grade-filter .gf-btn:hover{ transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,.15); } .grade-filter .gf-btn small{ display:block; font-family:var(--font-mono,monospace); font-size:10px; font-weight:700; margin-top:5px; opacity:.75; letter-spacing:.04em; white-space:nowrap; } .grade-filter .gf-btn.on{ background:#1F2A44; color:#fff; } .grade-filter .gf-btn.on small{ opacity:.9; } .grade-filter .gf-all{ font-family:var(--font-mono,monospace); font-size:12px; letter-spacing:.14em; padding:9px 20px; font-weight:800; display:flex; align-items:center; justify-content:center; } @media (max-width:640px){ .grade-filter{ gap:8px; } .grade-filter .gf-btn{ min-width:56px; min-height:52px; font-size:21px; padding:8px 8px 7px; } .grade-filter .gf-btn small{ font-size:8.5px; } .grade-filter .gf-all{ font-size:10px; padding:8px 12px; } } .map-filter-note{ text-align:center; font-family:var(--font-mono,monospace); font-size:11px; letter-spacing:.12em; color:#6B6B7A; margin:6px 0 2px; min-height:16px; text-transform:uppercase; }