`html/03-activist.html`

143 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Activist Tracker — SDCC Mockup</title>
<meta name="description" content="Mockup design for studentdebtcrisis.org — Activist Tracker">
<meta property="og:title" content="Activist Tracker — Student Debt Crisis Center">
<meta property="og:description" content="A people-powered movement of 2 million borrowers fighting for student debt cancellation.">
<meta property="og:type" content="website">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;background:#fff;color:#0a1929}
a{color:inherit;text-decoration:none}
.skip{position:absolute;top:-40px;left:0;background:#0a1929;color:#fff;padding:8px;z-index:100}.skip:focus{top:0}
.alert{background:#dc2626;color:#fff;padding:10px 0;text-align:center;font-size:13px;font-weight:500}
.alert strong{font-weight:700}
.hd{background:#fff;border-bottom:2px solid #0a1929;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:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.02em}
.lg span{color:#dc2626}
.nv{display:flex;gap:28px;font-size:14px;font-weight:500}
.nv a{padding:8px 0;border-bottom:2px solid transparent}
.nv a.active{border-color:#dc2626}
.search{position:relative;width:220px}
.search input{width:100%;background:#f3f4f6;border:0;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:#dc2626;color:#fff;padding:11px 22px;font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:uppercase}
.campaign{max-width:1320px;margin:0 auto;padding:48px 32px}
.camp-tag{display:inline-block;background:#fef2f2;color:#dc2626;padding:6px 14px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.camp-h1{font-family:'Space Grotesk',sans-serif;font-size:64px;line-height:1.04;font-weight:700;letter-spacing:-.025em;max-width:920px;margin-bottom:14px}
.camp-h1 mark{background:#fef08a;padding:0 4px}
.camp-sub{font-size:18px;color:#475569;max-width:680px;margin-bottom:32px;line-height:1.5}
.progress-card{background:#0a1929;color:#fff;padding:32px;border-radius:0;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.progress-card-l{flex:1}
.prog-label{font-size:12px;color:#64748b;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.prog-count{font-family:'Space Grotesk',sans-serif;font-size:56px;font-weight:700;line-height:1;margin-bottom:6px}
.prog-count em{color:#facc15;font-style:normal}
.prog-target{font-size:14px;color:#94a3b8}
.prog-bar{height:14px;background:rgba(255,255,255,.1);border-radius:0;margin-top:20px;overflow:hidden;position:relative}
.prog-bar::after{content:'';position:absolute;left:0;top:0;height:100%;width:84.2%;background:linear-gradient(90deg,#facc15,#fef08a)}
.prog-cta{display:flex;flex-direction:column;gap:10px}
.prog-cta a{background:#facc15;color:#0a1929;padding:18px 32px;font-weight:700;font-size:15px;text-align:center;letter-spacing:.02em;text-transform:uppercase}
.prog-cta a.share{background:transparent;color:#facc15;border:1px solid #facc15;padding:14px 32px;font-size:13px}
.scoreboard{max-width:1320px;margin:64px auto;padding:0 32px}
.scoreboard h2{font-family:'Space Grotesk',sans-serif;font-size:36px;font-weight:700;margin-bottom:8px;letter-spacing:-.015em}
.scoreboard-sub{color:#475569;margin-bottom:28px;font-size:14px}
.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.score-side{background:#fff;border:1px solid #e2e8f0;padding:24px;border-radius:0;border-left:6px solid}
.score-side.yes{border-left-color:#16a34a}
.score-side.no{border-left-color:#dc2626}
.score-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.score-h h3{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700}
.score-n{font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:700}
.yes .score-n{color:#16a34a}
.no .score-n{color:#dc2626}
.score-list{font-size:13px;color:#0a1929;line-height:1.7}
.score-list span{display:inline-block;background:#f3f4f6;padding:3px 10px;border-radius:0;margin:3px 4px 3px 0;font-weight:500}
.wins{max-width:1320px;margin:64px auto;padding:32px;background:#0a1929;color:#fff;text-align:center}
.wins h2{font-family:'Space Grotesk',sans-serif;font-size:48px;font-weight:700;margin-bottom:8px}
.wins p{color:#94a3b8;margin-bottom:32px}
.wins-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.win{padding:24px}
.win-n{font-family:'Space Grotesk',sans-serif;font-size:48px;font-weight:700;color:#facc15;line-height:1}
.win-l{font-size:13px;color:#cbd5e1;margin-top:8px;text-transform:uppercase;letter-spacing:.06em}

.ft{background:#f9fafb;border-top:1px solid rgba(0,0,0,.08);padding:64px 32px 32px;color:#475569;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:'Fraunces',serif;font-size:28px;color:#0a1929;margin-bottom:14px;font-weight:600}
.ft-tag{margin-bottom:8px;line-height:1.5}
.ft-addr{font-size:12px}
.ft h4{color:#0a1929;font-size:13px;margin-bottom:14px;letter-spacing:.04em}
.ft a{display:block;padding:4px 0;color:#475569;font-size:13px}
.ft a:hover{color:#0a1929}
.ft-bot{max-width:1320px;margin:48px auto 0;padding-top:32px;border-top:1px solid rgba(0,0,0,.08);text-align:center;color:#475569;font-size:12px}


</style>
</head><body>
<a class="skip" href="#m">Skip to main content</a>
<div class="alert"><strong>SENATE VOTES THURSDAY</strong> · S. 1247 — Student Borrower Protection Act · <a style="text-decoration:underline">tell your senators →</a></div>
<header class="hd"><div class="hd-inner">
  <div class="lg">SDCC<span>.</span></div>
  <nav class="nv" aria-label="Primary"><a class="active">Action</a><a>Issues</a><a>Stories</a><a>Press</a><a>Tools</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"></label>
  <a class="donate">Donate now</a>
</div></header>
<main id="m">
  <section class="campaign">
    <div class="camp-tag">● Live Campaign · 4 days left</div>
    <h1 class="camp-h1">Tell the Senate to <mark>protect 8 million SAVE borrowers</mark> before Thursday's vote.</h1>
    <p class="camp-sub">If S. 1247 fails, the Department of Education plans to transfer the loan portfolio to Treasury. Your signature reaches your senators within 6 minutes via the Senate Daily Constituent Tracker.</p>
    <div class="progress-card">
      <div class="progress-card-l">
        <div class="prog-label">Signatures collected</div>
        <div class="prog-count"><em>842,113</em></div>
        <div class="prog-target">of 1,000,000 by Thursday 6:00 PM ET</div>
        <div class="prog-bar"></div>
      </div>
      <div class="prog-cta">
        <a>Add your name →</a>
        <a class="share">Share with 5 friends</a>
      </div>
    </div>
  </section>
  <section class="scoreboard">
    <h2>Where every senator stands.</h2>
    <p class="scoreboard-sub">Updated 6 hours ago · Source: Office records, public statements, prior PROSPER Act vote</p>
    <div class="score-grid">
      <div class="score-side yes"><div class="score-h"><h3>Committed YES</h3><div class="score-n">47</div></div><div class="score-list"><span>Warren (MA)</span><span>Sanders (VT)</span><span>Booker (NJ)</span><span>Markey (MA)</span><span>Padilla (CA)</span><span>Schiff (CA)</span><span>Murray (WA)</span><span>+40 more</span></div></div>
      <div class="score-side no"><div class="score-h"><h3>Committed NO</h3><div class="score-n">38</div></div><div class="score-list"><span>Cruz (TX)</span><span>Cornyn (TX)</span><span>Tuberville (AL)</span><span>Cotton (AR)</span><span>Hawley (MO)</span><span>+33 more</span></div></div>
    </div>
    <p style="margin-top:20px;font-size:14px;color:#475569"><strong>15 senators undecided.</strong> Find your senator →</p>
  </section>
  <section class="wins">
    <h2>What we've won.</h2>
    <p>Since 2012 — every dollar discharged because of borrower advocacy.</p>
    <div class="wins-grid">
      <div class="win"><div class="win-n">$76.2B</div><div class="win-l">PSLF discharged</div></div>
      <div class="win"><div class="win-n">$28B</div><div class="win-l">Closed-school relief</div></div>
      <div class="win"><div class="win-n">8M</div><div class="win-l">SAVE plan enrolled</div></div>
      <div class="win"><div class="win-n">38</div><div class="win-l">Press victories</div></div>
    </div>
  </section>
</main>

<footer class="ft" role="contentinfo">
  <div class="ft-grid">
    <div>
      <div class="ft-logo">SDCC</div>
      <p class="ft-tag">Student Debt Crisis Center is a 501(c)(3) non-profit. EIN 81-2468531. Founded 2012.</p>
      <p class="ft-addr">1875 K Street NW, Suite 200 · Washington, DC 20006 · (202) 555-0117</p>
    </div>
    <div><h4>Issues</h4><a>SAVE Plan</a><a>PSLF</a><a>Income-Driven Repayment</a><a>Loan Forgiveness</a><a>Default & Collection</a></div>
    <div><h4>Take Action</h4><a>Sign petition</a><a>Email your rep</a><a>Share your story</a><a>Volunteer</a><a>Donate</a></div>
    <div><h4>About</h4><a>Mission & history</a><a>Team</a><a>Press</a><a>Careers</a><a>Privacy</a><a>Accessibility</a></div>
  </div>
  <div class="ft-bot">© 2026 Student Debt Crisis Center · Charity Navigator 4★ · GuideStar Platinum</div>
</footer></body></html>