`html/06-state-map.html`

188 lines
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>State Map — SDCC Mockup</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',system-ui,sans-serif;background:#fafaf9;color:#0c0a09}
a{color:inherit;text-decoration:none}
.skip{position:absolute;top:-40px;left:0;background:#0c0a09;color:#fff;padding:8px;z-index:100}.skip:focus{top:0}
.hd{background:#fff;border-bottom:1px solid #e7e5e4;position:sticky;top:0;z-index:50}
.hd-inner{max-width:1320px;margin:0 auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.lg{font-family:'DM Serif Display',serif;font-size:26px;letter-spacing:-.01em}
.nv{display:flex;gap:28px;font-size:14px;font-weight:500}
.search{position:relative;width:220px}
.search input{width:100%;background:#f5f5f4;border:1px solid #e7e5e4;padding:9px 12px 9px 36px;border-radius:6px;font-size:13px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.5}
.donate{background:#15803d;color:#fff;padding:10px 22px;border-radius:6px;font-weight:700;font-size:14px}
.hero{max-width:1320px;margin:0 auto;padding:48px 32px 24px}
.h1{font-family:'DM Serif Display',serif;font-size:64px;line-height:1.05;letter-spacing:-.02em;margin-bottom:14px;max-width:840px}
.h1 .accent{color:#15803d}
.lede{font-size:17px;color:#57534e;max-width:680px;line-height:1.55}
.map-wrap{max-width:1320px;margin:32px auto;padding:0 32px;display:grid;grid-template-columns:2fr 1fr;gap:32px}
.map{background:#fff;border:1px solid #e7e5e4;border-radius:14px;padding:32px;position:relative;min-height:560px;overflow:hidden}
.map-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:13px}
.map-meta strong{font-family:'DM Serif Display',serif;font-size:18px;font-weight:400}
.legend{display:flex;gap:14px;font-size:11px;color:#57534e}
.legend-dot{width:10px;height:10px;border-radius:2px;display:inline-block;vertical-align:middle;margin-right:5px}
.usa{position:relative;height:480px;background:#f5f5f4;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.usa::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at center,rgba(21,128,61,.04),transparent)}
.usa-svg{width:100%;height:100%;max-width:760px}
.state{stroke:#fff;stroke-width:1.5;cursor:pointer;transition:opacity .15s}
.state:hover{opacity:.7}
.s-passed{fill:#15803d}.s-pending{fill:#84cc16}.s-blocked{fill:#dc2626}.s-noaction{fill:#a8a29e}
.state-label{font-size:9px;fill:#fff;font-weight:600;pointer-events:none;font-family:'DM Sans',sans-serif}
.state-label.dark{fill:#0c0a09}
.detail{background:#fff;border:1px solid #e7e5e4;border-radius:14px;padding:28px}
.detail-state{font-family:'DM Serif Display',serif;font-size:36px;letter-spacing:-.02em;margin-bottom:6px}
.detail-flag{display:inline-block;background:#dcfce7;color:#15803d;padding:5px 12px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.detail-stat{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}
.dstat{background:#fafaf9;padding:14px;border-radius:8px}
.dstat-l{font-size:11px;color:#78716c;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.dstat-n{font-family:'DM Serif Display',serif;font-size:24px;color:#15803d}
.bills{margin-bottom:24px}
.bills h3{font-size:13px;color:#0c0a09;font-weight:700;margin-bottom:10px;letter-spacing:.04em;text-transform:uppercase}
.bill{padding:10px 0;border-bottom:1px solid #f5f5f4;font-size:13px}
.bill:last-child{border:0}
.bill-id{color:#15803d;font-weight:600;font-family:monospace;font-size:12px}
.bill-name{color:#0c0a09;margin-top:2px}
.bill-status{font-size:11px;color:#78716c;margin-top:4px}
.cta-state{background:#0c0a09;color:#fff;padding:18px 22px;border-radius:8px;font-weight:700;text-align:center;font-size:14px;display:block}
.tracker-row{max-width:1320px;margin:48px auto;padding:0 32px}
.tracker-row h2{font-family:'DM Serif Display',serif;font-size:32px;letter-spacing:-.015em;margin-bottom:24px}
.tracker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tg{background:#fff;border:1px solid #e7e5e4;border-radius:12px;padding:22px}
.tg-tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.tg-tag.passed{color:#15803d}
.tg-tag.pending{color:#ca8a04}
.tg-tag.blocked{color:#dc2626}
.tg-bill{font-family:monospace;font-size:13px;font-weight:600;margin-bottom:8px}
.tg-h{font-size:15px;font-weight:600;margin-bottom:8px;line-height:1.3}
.tg-meta{font-size:12px;color:#78716c}
.ft{background:#0c0a09;color:#a8a29e;padding:64px 32px 32px;font-size:13px}
.ft-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.ft-logo{font-family:'DM Serif Display',serif;font-size:28px;color:#fff;margin-bottom:14px}
.ft h4{color:#fff;font-size:13px;margin-bottom:14px}
.ft a{display:block;padding:4px 0;color:#a8a29e}
.ft-bot{max-width:1320px;margin:48px auto 0;padding-top:32px;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:12px;color:#78716c}
</style></head><body>
<a class="skip" href="#m">Skip to main content</a>
<header class="hd"><div class="hd-inner">
  <div class="lg">SDCC</div>
  <nav class="nv" aria-label="Primary"><a>State Tracker</a><a>Issues</a><a>Stories</a><a>Press</a><a>About</a></nav>
  <label class="search"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg><input type="search" placeholder="Search by state, bill ID…"></label>
  <a class="donate">Donate</a>
</div></header>
<main id="m">
<section class="hero">
  <h1 class="h1">Where every state stands on <span class="accent">student debt relief.</span></h1>
  <p class="lede">The only national tracker of state-level student debt legislation, AG actions, and relief programs. Updated weekly. Source data: state legislature feeds + AG offices.</p>
</section>

<section class="map-wrap">
  <div class="map">
    <div class="map-meta">
      <strong>The 50 states · 2026 legislative cycle</strong>
      <div class="legend">
        <span><i class="legend-dot" style="background:#15803d"></i>Relief passed (12)</span>
        <span><i class="legend-dot" style="background:#84cc16"></i>Bill pending (18)</span>
        <span><i class="legend-dot" style="background:#dc2626"></i>Blocked (7)</span>
        <span><i class="legend-dot" style="background:#a8a29e"></i>No action (13)</span>
      </div>
    </div>
    <div class="usa">
      <svg class="usa-svg" viewBox="0 0 760 480" xmlns="http://www.w3.org/2000/svg" aria-label="US map showing state student-debt legislation status">
        <!-- Stylized US grid map — each state is a labeled rounded rect -->
        <g font-family="DM Sans" font-weight="600">
          <!-- Row 1 (Pacific NW) -->
          <rect class="state s-passed" x="20" y="40" width="70" height="50" rx="6"/><text class="state-label" x="55" y="68" text-anchor="middle">WA</text>
          <rect class="state s-passed" x="100" y="40" width="70" height="50" rx="6"/><text class="state-label" x="135" y="68" text-anchor="middle">OR</text>
          <rect class="state s-pending" x="180" y="40" width="70" height="50" rx="6"/><text class="state-label" x="215" y="68" text-anchor="middle">ID</text>
          <rect class="state s-noaction" x="260" y="40" width="70" height="50" rx="6"/><text class="state-label dark" x="295" y="68" text-anchor="middle">MT</text>
          <rect class="state s-noaction" x="340" y="40" width="70" height="50" rx="6"/><text class="state-label dark" x="375" y="68" text-anchor="middle">ND</text>
          <rect class="state s-pending" x="420" y="40" width="70" height="50" rx="6"/><text class="state-label" x="455" y="68" text-anchor="middle">MN</text>
          <rect class="state s-passed" x="500" y="40" width="70" height="50" rx="6"/><text class="state-label" x="535" y="68" text-anchor="middle">WI</text>
          <rect class="state s-pending" x="580" y="40" width="70" height="50" rx="6"/><text class="state-label" x="615" y="68" text-anchor="middle">MI</text>
          <rect class="state s-passed" x="660" y="40" width="70" height="50" rx="6"/><text class="state-label" x="695" y="68" text-anchor="middle">ME</text>
          <!-- Row 2 -->
          <rect class="state s-passed" x="20" y="100" width="70" height="50" rx="6"/><text class="state-label" x="55" y="128" text-anchor="middle">CA</text>
          <rect class="state s-passed" x="100" y="100" width="70" height="50" rx="6"/><text class="state-label" x="135" y="128" text-anchor="middle">NV</text>
          <rect class="state s-pending" x="180" y="100" width="70" height="50" rx="6"/><text class="state-label" x="215" y="128" text-anchor="middle">UT</text>
          <rect class="state s-pending" x="260" y="100" width="70" height="50" rx="6"/><text class="state-label" x="295" y="128" text-anchor="middle">WY</text>
          <rect class="state s-noaction" x="340" y="100" width="70" height="50" rx="6"/><text class="state-label dark" x="375" y="128" text-anchor="middle">SD</text>
          <rect class="state s-pending" x="420" y="100" width="70" height="50" rx="6"/><text class="state-label" x="455" y="128" text-anchor="middle">IA</text>
          <rect class="state s-passed" x="500" y="100" width="70" height="50" rx="6"/><text class="state-label" x="535" y="128" text-anchor="middle">IL</text>
          <rect class="state s-pending" x="580" y="100" width="70" height="50" rx="6"/><text class="state-label" x="615" y="128" text-anchor="middle">OH</text>
          <rect class="state s-pending" x="660" y="100" width="70" height="50" rx="6"/><text class="state-label" x="695" y="128" text-anchor="middle">PA</text>
          <!-- Row 3 -->
          <rect class="state s-pending" x="100" y="160" width="70" height="50" rx="6"/><text class="state-label" x="135" y="188" text-anchor="middle">AZ</text>
          <rect class="state s-noaction" x="180" y="160" width="70" height="50" rx="6"/><text class="state-label dark" x="215" y="188" text-anchor="middle">CO</text>
          <rect class="state s-blocked" x="260" y="160" width="70" height="50" rx="6"/><text class="state-label" x="295" y="188" text-anchor="middle">NE</text>
          <rect class="state s-blocked" x="340" y="160" width="70" height="50" rx="6"/><text class="state-label" x="375" y="188" text-anchor="middle">KS</text>
          <rect class="state s-blocked" x="420" y="160" width="70" height="50" rx="6"/><text class="state-label" x="455" y="188" text-anchor="middle">MO</text>
          <rect class="state s-pending" x="500" y="160" width="70" height="50" rx="6"/><text class="state-label" x="535" y="188" text-anchor="middle">KY</text>
          <rect class="state s-pending" x="580" y="160" width="70" height="50" rx="6"/><text class="state-label" x="615" y="188" text-anchor="middle">VA</text>
          <rect class="state s-passed" x="660" y="160" width="70" height="50" rx="6"/><text class="state-label" x="695" y="188" text-anchor="middle">NJ</text>
          <!-- Row 4 -->
          <rect class="state s-blocked" x="180" y="220" width="70" height="50" rx="6"/><text class="state-label" x="215" y="248" text-anchor="middle">NM</text>
          <rect class="state s-blocked" x="260" y="220" width="70" height="50" rx="6"/><text class="state-label" x="295" y="248" text-anchor="middle">OK</text>
          <rect class="state s-pending" x="340" y="220" width="70" height="50" rx="6"/><text class="state-label" x="375" y="248" text-anchor="middle">AR</text>
          <rect class="state s-noaction" x="420" y="220" width="70" height="50" rx="6"/><text class="state-label dark" x="455" y="248" text-anchor="middle">TN</text>
          <rect class="state s-passed" x="500" y="220" width="70" height="50" rx="6"/><text class="state-label" x="535" y="248" text-anchor="middle">NC</text>
          <rect class="state s-passed" x="580" y="220" width="70" height="50" rx="6"/><text class="state-label" x="615" y="248" text-anchor="middle">MD</text>
          <rect class="state s-passed" x="660" y="220" width="70" height="50" rx="6"/><text class="state-label" x="695" y="248" text-anchor="middle">NY</text>
          <!-- Row 5 -->
          <rect class="state s-blocked" x="260" y="280" width="70" height="50" rx="6"/><text class="state-label" x="295" y="308" text-anchor="middle">TX</text>
          <rect class="state s-pending" x="340" y="280" width="70" height="50" rx="6"/><text class="state-label" x="375" y="308" text-anchor="middle">LA</text>
          <rect class="state s-pending" x="420" y="280" width="70" height="50" rx="6"/><text class="state-label" x="455" y="308" text-anchor="middle">MS</text>
          <rect class="state s-pending" x="500" y="280" width="70" height="50" rx="6"/><text class="state-label" x="535" y="308" text-anchor="middle">AL</text>
          <rect class="state s-pending" x="580" y="280" width="70" height="50" rx="6"/><text class="state-label" x="615" y="308" text-anchor="middle">SC</text>
          <rect class="state s-passed" x="660" y="280" width="70" height="50" rx="6"/><text class="state-label" x="695" y="308" text-anchor="middle">MA</text>
          <!-- Row 6 -->
          <rect class="state s-pending" x="500" y="340" width="70" height="50" rx="6"/><text class="state-label" x="535" y="368" text-anchor="middle">GA</text>
          <rect class="state s-pending" x="580" y="340" width="70" height="50" rx="6"/><text class="state-label" x="615" y="368" text-anchor="middle">FL</text>
        </g>
      </svg>
    </div>
  </div>

  <div class="detail">
    <div class="detail-flag">★ Spotlight state · April</div>
    <div class="detail-state">California</div>
    <div class="detail-stat">
      <div class="dstat"><div class="dstat-l">CA borrowers</div><div class="dstat-n">3.8M</div></div>
      <div class="dstat"><div class="dstat-l">Avg balance</div><div class="dstat-n">$37.4k</div></div>
      <div class="dstat"><div class="dstat-l">Active bills</div><div class="dstat-n">4</div></div>
      <div class="dstat"><div class="dstat-l">Discharges</div><div class="dstat-n">$2.1B</div></div>
    </div>
    <div class="bills">
      <h3>Active legislation</h3>
      <div class="bill"><div class="bill-id">AB 1042</div><div class="bill-name">Institutional Debt Disclosure Act</div><div class="bill-status">● Passed Assembly · Senate floor May 12</div></div>
      <div class="bill"><div class="bill-id">SB 308</div><div class="bill-name">Predatory Servicer Enforcement</div><div class="bill-status">● In Judiciary Committee</div></div>
      <div class="bill"><div class="bill-id">AB 819</div><div class="bill-name">CA Borrower Bill of Rights expansion</div><div class="bill-status">● Hearing May 8</div></div>
    </div>
    <a class="cta-state">View California's full record →</a>
  </div>
</section>

<section class="tracker-row">
  <h2>This week's movement</h2>
  <div class="tracker-grid">
    <div class="tg"><div class="tg-tag passed">PASSED · MAY 1</div><div class="tg-bill">NJ A4127</div><div class="tg-h">Servicer Code of Conduct signed by Governor Murphy</div><div class="tg-meta">Effective Jan 2027 · 2.1M NJ borrowers covered</div></div>
    <div class="tg"><div class="tg-tag pending">UP NEXT · MAY 12</div><div class="tg-bill">CA AB 1042</div><div class="tg-h">Institutional Debt Disclosure floor vote</div><div class="tg-meta">62 votes needed · 47 committed yes</div></div>
    <div class="tg"><div class="tg-tag blocked">BLOCKED · APR 28</div><div class="tg-bill">TX HB 2918</div><div class="tg-h">Borrower protection bill dies in committee</div><div class="tg-meta">12-9 vote · 4 Republicans flipped no</div></div>
    <div class="tg"><div class="tg-tag passed">PASSED · APR 22</div><div class="tg-bill">MA S 2847</div><div class="tg-h">PSLF tax exemption extended through 2030</div><div class="tg-meta">Saves average borrower $4,200 in state tax</div></div>
  </div>
</section>
</main>
<footer class="ft">
  <div class="ft-grid">
    <div><div class="ft-logo">SDCC</div><p style="margin-bottom:8px;line-height:1.5">501(c)(3) non-profit · EIN 81-2468531 · Founded 2012</p><p style="font-size:12px">1875 K Street NW, Suite 200 · Washington, DC 20006</p></div>
    <div><h4>State tracker</h4><a>By status</a><a>By bill</a><a>By legislator</a><a>API access</a></div>
    <div><h4>Issues</h4><a>SAVE plan</a><a>PSLF</a><a>IDR</a><a>Forgiveness</a></div>
    <div><h4>About</h4><a>Mission</a><a>Press</a><a>Privacy</a><a>Accessibility</a></div>
  </div>
  <div class="ft-bot">© 2026 SDCC · Charity Navigator 4★ · GuideStar Platinum</div>
</footer>
</body></html>