`html/04-tools-forward.html`

134 lines
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tools-Forward — SDCC Mockup</title>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Manrope',system-ui,sans-serif;background:#f8fafc;color:#0f172a}
a{color:inherit;text-decoration:none}
.skip{position:absolute;top:-40px;left:0;background:#0f172a;color:#fff;padding:8px;z-index:100}.skip:focus{top:0}
.hd{background:#fff;border-bottom:1px solid #e2e8f0;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-weight:800;font-size:22px;letter-spacing:-.02em;color:#0f172a}
.lg span{color:#0891b2}
.nv{display:flex;gap:28px;font-size:14px;font-weight:600;color:#475569}
.nv a:hover{color:#0f172a}
.search{position:relative;flex:1;max-width:340px}
.search input{width:100%;background:#f1f5f9;border:1px solid #e2e8f0;padding:10px 14px 10px 38px;border-radius:8px;font-size:13px;color:#0f172a;font-family:inherit}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);opacity:.5}
.donate{background:#0891b2;color:#fff;padding:10px 22px;border-radius:8px;font-weight:700;font-size:14px}
.hero{max-width:1320px;margin:0 auto;padding:48px 32px 24px}
.h1{font-size:54px;line-height:1.05;font-weight:800;letter-spacing:-.02em;max-width:780px;margin-bottom:14px}
.h1 .accent{color:#0891b2;background:linear-gradient(120deg,#0891b2,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lede{font-size:18px;color:#475569;max-width:640px;margin-bottom:32px;line-height:1.5}
.tools-grid{max-width:1320px;margin:24px auto 64px;padding:0 32px;display:grid;grid-template-columns:1.3fr 1fr;gap:24px}
.tool{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:32px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.tool-tag{display:inline-block;background:#ecfeff;color:#0891b2;padding:5px 12px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.tool h2{font-size:28px;font-weight:800;letter-spacing:-.015em;margin-bottom:8px}
.tool p{color:#475569;margin-bottom:24px;font-size:14px;line-height:1.5}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.field{display:block}
.field label{display:block;font-size:12px;font-weight:600;color:#334155;margin-bottom:6px;letter-spacing:.02em}
.field input,.field select{width:100%;padding:11px 14px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;font-family:inherit;background:#fff}
.field input:focus,.field select:focus{outline:2px solid #0891b2;outline-offset:1px}
.calc-out{background:#0f172a;color:#fff;padding:24px;border-radius:12px;margin-top:16px}
.calc-out-l{font-size:11px;color:#94a3b8;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.calc-out-n{font-family:'JetBrains Mono',monospace;font-size:38px;font-weight:600;color:#22d3ee;margin-bottom:6px;letter-spacing:-.02em}
.calc-out-d{font-size:13px;color:#cbd5e1}
.calc-btn{margin-top:12px;background:#0891b2;color:#fff;padding:12px 22px;border:0;border-radius:8px;font-weight:700;font-size:14px;font-family:inherit;cursor:pointer;width:100%}
.rep-card{display:flex;align-items:center;gap:16px;padding:14px;background:#f8fafc;border-radius:10px;margin-bottom:10px;border:1px solid #e2e8f0}
.rep-pic{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#0891b2,#22d3ee);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px}
.rep-info{flex:1;min-width:0}
.rep-name{font-weight:700;font-size:14px}
.rep-title{font-size:12px;color:#64748b}
.rep-pos{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.rep-pos.yes{background:#dcfce7;color:#166534}
.rep-pos.no{background:#fee2e2;color:#991b1b}
.rep-pos.und{background:#fef3c7;color:#92400e}
.zip-row{display:flex;gap:8px;margin-bottom:18px}
.zip-row input{flex:1;padding:11px 14px;border:1px solid #cbd5e1;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:15px;letter-spacing:.04em}
.zip-row button{background:#0f172a;color:#fff;padding:11px 22px;border:0;border-radius:8px;font-weight:700;font-size:14px;font-family:inherit}
.utility{max-width:1320px;margin:0 auto 64px;padding:0 32px}
.util-h{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}
.util-h h2{font-size:32px;font-weight:800;letter-spacing:-.02em}
.util-h a{font-size:13px;font-weight:600;color:#0891b2}
.util-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.util-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px}
.util-icon{width:42px;height:42px;background:#ecfeff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px}
.util-card h3{font-size:16px;font-weight:700}
.util-card p{font-size:13px;color:#64748b;line-height:1.4}
.ft{background:#fff;border-top:1px solid #e2e8f0;padding:64px 32px 32px;color:#64748b;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-weight:800;font-size:24px;color:#0f172a;margin-bottom:14px}
.ft h4{color:#0f172a;font-size:13px;margin-bottom:14px}
.ft a{display:block;padding:4px 0;color:#64748b}
.ft a:hover{color:#0f172a}
.ft-bot{max-width:1320px;margin:48px auto 0;padding-top:32px;border-top:1px solid #e2e8f0;text-align:center;font-size:12px}
</style></head><body>
<a class="skip" href="#m">Skip to main content</a>
<header class="hd"><div class="hd-inner">
  <div class="lg">SDCC<span>.</span></div>
  <nav class="nv" aria-label="Primary"><a>Tools</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 tools, articles, FAQs…"></label>
  <a class="donate">Donate</a>
</div></header>
<main id="m">
  <section class="hero">
    <h1 class="h1">Tools you actually need. <span class="accent">Built for borrowers.</span></h1>
    <p class="lede">Free, no signup required. The eligibility calculator. The email-your-rep tool. The PSLF tracker. We built them because the federal site won't.</p>
  </section>

  <section class="tools-grid">
    <div class="tool">
      <span class="tool-tag">★ FEATURED</span>
      <h2>Am I eligible for PSLF?</h2>
      <p>Answer 6 questions. Get a personal eligibility readout in 90 seconds. No email required.</p>
      <div class="calc-row">
        <div class="field"><label>Loan type</label><select><option>Direct (post-2010)</option><option>FFEL — consolidated</option><option>FFEL — not consolidated</option><option>Perkins</option></select></div>
        <div class="field"><label>Employer</label><select><option>Public school district</option><option>501(c)(3) non-profit</option><option>Federal/state/local government</option><option>For-profit</option></select></div>
      </div>
      <div class="calc-row">
        <div class="field"><label>Years employed</label><input type="number" value="9"></div>
        <div class="field"><label>Qualifying payments made</label><input type="number" value="108"></div>
      </div>
      <div class="calc-out">
        <div class="calc-out-l">Estimated eligibility</div>
        <div class="calc-out-n">YES — 12 payments away</div>
        <div class="calc-out-d">You're 89% of the way to forgiveness. Avg discharge for your profile: $73,400.</div>
      </div>
      <button class="calc-btn">Continue → personalized 7-step plan</button>
    </div>

    <div class="tool">
      <span class="tool-tag">URGENT · S. 1247</span>
      <h2>Tell your senators.</h2>
      <p>Look up your senators by zip and send a prefilled message about Thursday's SAVE plan vote. Average completion: 47 seconds.</p>
      <div class="zip-row"><input type="text" placeholder="Your ZIP code" value="94110"><button>Find →</button></div>
      <div class="rep-card"><div class="rep-pic">AP</div><div class="rep-info"><div class="rep-name">Sen. Alex Padilla</div><div class="rep-title">D-CA · 202-224-3553</div></div><span class="rep-pos yes">Yes</span></div>
      <div class="rep-card"><div class="rep-pic">AS</div><div class="rep-info"><div class="rep-name">Sen. Adam Schiff</div><div class="rep-title">D-CA · 202-224-3841</div></div><span class="rep-pos yes">Yes</span></div>
      <div class="rep-card"><div class="rep-pic">NP</div><div class="rep-info"><div class="rep-name">Rep. Nancy Pelosi</div><div class="rep-title">CA-11 · 202-225-4965</div></div><span class="rep-pos und">Undecided</span></div>
      <button class="calc-btn">Send message to all 3 →</button>
    </div>
  </section>

  <section class="utility">
    <div class="util-h"><h2>More tools</h2><a>See all 14 →</a></div>
    <div class="util-grid">
      <div class="util-card"><div class="util-icon">📊</div><h3>IDR savings calculator</h3><p>What you'd pay under SAVE vs. IBR vs. PAYE — side by side.</p></div>
      <div class="util-card"><div class="util-icon">📜</div><h3>Discharge eligibility</h3><p>Closed school, false certification, borrower defense, total disability.</p></div>
      <div class="util-card"><div class="util-icon">🏛️</div><h3>State relief lookup</h3><p>Programs for your state — CA, NY, MA, IL, MN, MD lead the country.</p></div>
      <div class="util-card"><div class="util-icon">📨</div><h3>Servicer complaint kit</h3><p>Templates for CFPB, AG, ombudsman — generates the right one for your issue.</p></div>
    </div>
  </section>
</main>
<footer class="ft">
  <div class="ft-grid">
    <div><div class="ft-logo">SDCC<span style="color:#0891b2">.</span></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 · (202) 555-0117</p></div>
    <div><h4>Tools</h4><a>PSLF calculator</a><a>Email your rep</a><a>State relief</a><a>Discharge eligibility</a><a>Servicer complaint</a></div>
    <div><h4>Issues</h4><a>SAVE plan</a><a>PSLF</a><a>IDR</a><a>Default</a><a>Forgiveness</a></div>
    <div><h4>About</h4><a>Mission</a><a>Team</a><a>Press</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>