`html/01-debt-clock.html`

114 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Debt Clock — SDCC Mockup</title>
<meta name="description" content="Mockup design for studentdebtcrisis.org — Debt Clock">
<meta property="og:title" content="Debt Clock — 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=Instrument+Serif&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;background:#0a0a0a;color:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.skip{position:absolute;top:-40px;left:0;background:#fff;color:#000;padding:8px;z-index:100}
.skip:focus{top:0}
.hd{position:sticky;top:0;background:rgba(10,10,10,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);z-index:50}
.hd-inner{max-width:1280px;margin:0 auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between}
.lg{font-family:'Instrument Serif',serif;font-size:24px;letter-spacing:-.02em}
.nv{display:flex;gap:32px;font-size:14px;color:#bbb}
.nv a:hover{color:#fff}
.search{position:relative;flex:1;max-width:280px;margin:0 32px}
.search input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;padding:8px 12px 8px 36px;border-radius:6px;font-size:13px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.5}
.donate{background:#f5d142;color:#000;padding:10px 22px;border-radius:999px;font-weight:600;font-size:14px}
.hero{max-width:1280px;margin:0 auto;padding:72px 32px 48px;text-align:center}
.hero-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#f5d142;margin-bottom:32px}
.clock{font-family:'Instrument Serif',serif;font-size:130px;line-height:1;letter-spacing:-.04em;font-weight:400;background:linear-gradient(180deg,#fff 30%,#f5d142);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.clock-sub{font-size:14px;color:#888;letter-spacing:.04em}
.clock-pulse{display:inline-block;width:8px;height:8px;background:#22c55e;border-radius:50%;margin-right:8px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.h1{font-family:'Instrument Serif',serif;font-size:72px;line-height:1.05;letter-spacing:-.02em;margin:48px 0 20px;font-weight:400;max-width:900px;margin-left:auto;margin-right:auto}
.h1 em{font-style:italic;color:#f5d142}
.lede{font-size:19px;color:#bbb;line-height:1.5;max-width:580px;margin:0 auto 40px}
.cta{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#000;padding:18px 40px;border-radius:4px;font-size:16px;font-weight:600}
.ctas{display:flex;gap:16px;justify-content:center}
.cta.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.stats{max-width:1280px;margin:48px auto;padding:0 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden}
.stat{background:#0a0a0a;padding:32px}
.stat-n{font-family:'Instrument Serif',serif;font-size:42px;letter-spacing:-.02em;margin-bottom:4px}
.stat-l{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:.08em}
.recent{max-width:1280px;margin:96px auto;padding:0 32px}
.recent h2{font-family:'Instrument Serif',serif;font-size:42px;letter-spacing:-.02em;margin-bottom:32px;font-weight:400}
.recent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#161616;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:28px;transition:border-color .2s}
.card:hover{border-color:rgba(245,209,66,.5)}
.card-tag{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#f5d142;margin-bottom:12px}
.card-title{font-family:'Instrument Serif',serif;font-size:20px;line-height:1.3;margin-bottom:14px;font-weight:400}
.card-date{font-size:12px;color:#666}
.ft{background:#000;border-top:1px solid rgba(255,255,255,.08);padding:64px 32px 32px;color:#888;font-size:13px}
.ft-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.ft-logo{font-family:'Instrument Serif',serif;font-size:32px;color:#fff;margin-bottom:14px}
.ft-tag{margin-bottom:8px;line-height:1.5}
.ft-addr{font-size:12px}
.ft h4{color:#fff;font-size:13px;margin-bottom:14px;letter-spacing:.04em}
.ft a{display:block;padding:4px 0;color:#888;font-size:13px}
.ft a:hover{color:#fff}
.ft-bot{max-width:1280px;margin:48px auto 0;padding-top:32px;border-top:1px solid rgba(255,255,255,.08);text-align:center;color:#555;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</div>
  <nav class="nv" aria-label="Primary"><a>Issues</a><a>Stories</a><a>Tools</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 policies, articles, tools…" aria-label="Search"></label>
  <a class="donate">Donate →</a>
</div></header>

<main id="m" role="main">
  <section class="hero">
    <div class="hero-eyebrow"><span class="clock-pulse"></span>Live · updated from Federal Reserve G.19</div>
    <div class="clock" aria-label="Total US student loan debt">$1,776,432,118,944</div>
    <div class="clock-sub">in outstanding US student loan debt — and rising $2,762 every second</div>
    <h1 class="h1">A people-powered movement to <em>cancel student debt</em>.</h1>
    <p class="lede">Two million supporters. Fifteen years on Capitol Hill. We're the only borrower advocacy org tracking the full debt fight in real time.</p>
    <div class="ctas">
      <a class="cta">Add your name <span>→</span></a>
      <a class="cta ghost">Get monthly briefings</a>
    </div>
  </section>

  <section class="stats" aria-label="Key statistics">
    <div class="stat"><div class="stat-n">45M</div><div class="stat-l">Federal borrowers</div></div>
    <div class="stat"><div class="stat-n">2M+</div><div class="stat-l">SDCC supporters</div></div>
    <div class="stat"><div class="stat-n">23%</div><div class="stat-l">In default or collections</div></div>
    <div class="stat"><div class="stat-n">$76.2B</div><div class="stat-l">PSLF discharged since 2021</div></div>
  </section>

  <section class="recent">
    <h2>Recently in the fight</h2>
    <div class="recent-grid">
      <article class="card"><span class="card-tag">SAVE LAWSUIT</span><h3 class="card-title">Student Debtors Ask Court to Reconsider Decision to Eliminate the SAVE Plan</h3><div class="card-date">Apr 30, 2026</div></article><article class="card"><span class="card-tag">PRESS</span><h3 class="card-title">Department of Education Creates Chaos, Announces Transfer of Loan Portfolio to U.S. Treasury</h3><div class="card-date">Apr 22, 2026</div></article><article class="card"><span class="card-tag">POLICY</span><h3 class="card-title">Navigating Student Loan Changes: What Borrowers Need To Know</h3><div class="card-date">Apr 15, 2026</div></article>
    </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>