← back to Sdcc Mockups
html/09-brutalist.html
175 lines
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Brutalist — SDCC Mockup</title>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Archivo',system-ui,sans-serif;background:#fff;color:#000;line-height:1.3}
a{color:inherit;text-decoration:none}
.skip{position:absolute;top:-40px;left:0;background:#000;color:#fff;padding:8px;z-index:100}.skip:focus{top:0}
.tape{background:#facc15;border-bottom:4px solid #000;padding:8px 0;overflow:hidden;white-space:nowrap;font-family:'Space Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.04em}
.tape span{display:inline-block;animation:scroll 40s linear infinite}
.tape span::after{content:' ★ $1.77T IN STUDENT DEBT ★ 45M BORROWERS ★ THE SENATE VOTES THURSDAY ★ CALL YOUR REPRESENTATIVE ★ '}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.hd{background:#000;color:#fff;border-bottom:4px solid #000}
.hd-inner{max-width:1320px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.lg{font-family:'Archivo Black',sans-serif;font-size:32px;letter-spacing:-.04em;text-transform:uppercase}
.lg::after{content:'.';color:#facc15}
.nv{display:flex;gap:0;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.nv a{padding:8px 16px;border:1px solid #fff;margin-right:-1px}
.nv a.active{background:#facc15;color:#000}
.search-h{display:flex;align-items:center;gap:0;border:1px solid #fff;padding:6px 10px;font-family:'Space Mono',monospace}
.search-h input{background:transparent;border:0;color:#fff;font-family:inherit;font-size:12px;width:140px;padding-left:8px}
.search-h input::placeholder{color:#aaa}
.donate{background:#facc15;color:#000;padding:11px 20px;font-family:'Archivo Black',sans-serif;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border:1px solid #facc15}
.hero{background:#fff;padding:56px 24px;border-bottom:4px solid #000;position:relative;overflow:hidden}
.hero-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.hero h1{font-family:'Archivo Black',sans-serif;font-size:120px;line-height:.85;letter-spacing:-.05em;text-transform:uppercase;font-weight:900}
.hero h1 mark{background:#facc15;padding:0 8px}
.hero h1 .red{color:#dc2626}
.hero-side{border-left:4px solid #000;padding-left:32px}
.hero-stamp{display:inline-block;border:3px solid #000;padding:8px 14px;font-family:'Space Mono',monospace;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;transform:rotate(-2deg);background:#dc2626;color:#fff}
.hero-side p{font-size:17px;line-height:1.4;margin-bottom:14px;font-weight:500}
.hero-side strong{background:#000;color:#facc15;padding:2px 6px}
.hero-cta{display:inline-block;background:#000;color:#fff;padding:18px 32px;font-family:'Archivo Black',sans-serif;font-size:18px;letter-spacing:.04em;text-transform:uppercase;border:4px solid #000;margin-top:14px}
.hero-cta:hover{background:#facc15;color:#000}
.demand{background:#000;color:#fff;padding:64px 24px;border-bottom:4px solid #000}
.demand-inner{max-width:1320px;margin:0 auto}
.demand-h{display:grid;grid-template-columns:1fr 2fr;gap:32px;margin-bottom:32px}
.demand-h h2{font-family:'Archivo Black',sans-serif;font-size:80px;line-height:.85;text-transform:uppercase;letter-spacing:-.04em}
.demand-h h2 mark{background:#facc15;color:#000;padding:0 8px}
.demand-h p{font-size:18px;line-height:1.5;margin-top:14px;color:#ccc}
.demand-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:4px solid #fff}
.dem{padding:32px;border-right:4px solid #fff;border-bottom:4px solid #fff}
.dem:last-child{border-right:0}
.dem-n{font-family:'Archivo Black',sans-serif;font-size:80px;line-height:1;color:#facc15;letter-spacing:-.04em;margin-bottom:18px}
.dem h3{font-family:'Archivo Black',sans-serif;font-size:24px;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:14px;line-height:1}
.dem p{font-size:14px;line-height:1.5;color:#ccc}
.signed{background:#facc15;color:#000;padding:48px 24px;border-bottom:4px solid #000}
.signed-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:32px;align-items:center}
.signed h2{font-family:'Archivo Black',sans-serif;font-size:64px;line-height:.85;text-transform:uppercase;letter-spacing:-.04em}
.signed-c{font-family:'Archivo Black',sans-serif;font-size:120px;line-height:.85;letter-spacing:-.05em}
.signed-c-l{font-family:'Space Mono',monospace;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:14px}
.signed form{display:flex;gap:0;margin-top:18px;border:4px solid #000;background:#fff}
.signed input{flex:1;padding:16px;border:0;font-family:'Space Mono',monospace;font-size:15px;background:#fff}
.signed button{background:#000;color:#fff;padding:16px 28px;border:0;font-family:'Archivo Black',sans-serif;font-size:14px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.cards{padding:48px 24px;border-bottom:4px solid #000}
.cards-inner{max-width:1320px;margin:0 auto}
.cards-h{font-family:'Archivo Black',sans-serif;font-size:48px;line-height:1;text-transform:uppercase;letter-spacing:-.03em;margin-bottom:32px}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:4px solid #000}
.cd{padding:28px;border-right:4px solid #000}
.cd:last-child{border-right:0}
.cd:nth-child(even){background:#fef3c7}
.cd-tag{display:inline-block;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#000;color:#fff;padding:3px 10px;margin-bottom:14px}
.cd h3{font-family:'Archivo Black',sans-serif;font-size:26px;line-height:1;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:14px}
.cd p{font-size:14px;line-height:1.5;font-weight:500}
.cd-date{font-family:'Space Mono',monospace;font-size:11px;color:#666;margin-top:14px}
.ft{background:#000;color:#fff;padding:48px 24px}
.ft-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px}
.ft-lg{font-family:'Archivo Black',sans-serif;font-size:32px;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:14px}
.ft p{font-size:13px;line-height:1.5;color:#aaa;font-family:'Space Mono',monospace}
.ft h4{font-family:'Archivo Black',sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
.ft a{display:block;padding:4px 0;color:#aaa;font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.ft-bot{max-width:1320px;margin:48px auto 0;padding-top:32px;border-top:1px solid rgba(255,255,255,.2);font-family:'Space Mono',monospace;font-size:11px;color:#666;text-align:center;letter-spacing:.04em;text-transform:uppercase}
</style></head><body>
<a class="skip" href="#m">Skip to main content</a>
<div class="tape"><span>★ $1.77T IN STUDENT DEBT ★ 45M BORROWERS ★ THE SENATE VOTES THURSDAY ★ CALL YOUR REPRESENTATIVE ★ ★ $1.77T IN STUDENT DEBT ★ 45M BORROWERS ★ THE SENATE VOTES THURSDAY ★ CALL YOUR REPRESENTATIVE ★ </span></div>
<header class="hd"><div class="hd-inner">
<div class="lg">SDCC</div>
<nav class="nv" aria-label="Primary"><a class="active">DEMANDS</a><a>STORIES</a><a>SCOREBOARD</a><a>PRESS</a><a>ABOUT</a></nav>
<label class="search-h"><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</a>
</div></header>
<main id="m">
<section class="hero">
<div class="hero-inner">
<h1>CANCEL <span class="red">THE</span><br><mark>DEBT.</mark></h1>
<div class="hero-side">
<div class="hero-stamp">▲ Urgent ▲ Senate vote May 8</div>
<p>Two million borrowers. Fifteen years of fighting. The system that drowned a generation in <strong>$1.77 trillion</strong> didn't make a mistake — it worked exactly as designed.</p>
<p>It's time to stop asking permission. The most powerful debt-cancellation tool the federal government already has is the <strong>HEA Settlement Authority</strong>. We are demanding it be used.</p>
<a class="hero-cta">Sign the demand →</a>
</div>
</div>
</section>
<section class="demand">
<div class="demand-inner">
<div class="demand-h">
<h2><mark>3</mark><br>NON-NEGO-<br>TIABLES.</h2>
<p>What the next administration must do on day one. We won't compromise on these. We've published the policy briefs, the legal authority memos, and the implementation plans. The only thing missing is political will.</p>
</div>
<div class="demand-list">
<div class="dem">
<div class="dem-n">01</div>
<h3>Cancel<br>federal debt<br>up to $50K</h3>
<p>Use the HEA §432(a) settlement authority to cancel federal student loan principal up to $50,000 per borrower. Zero new spending required — this is debt the federal government already owns.</p>
</div>
<div class="dem">
<div class="dem-n">02</div>
<h3>End<br>collection<br>fees</h3>
<p>Stop adding 25% collection fees to defaulted balances. The fees are punitive, not actuarial. They turn $20K problems into $50K traps. Repeal the 1987 amendment that allowed them.</p>
</div>
<div class="dem">
<div class="dem-n">03</div>
<h3>Free<br>community<br>college</h3>
<p>Make community college tuition-free for any borrower in default or active repayment. Federal funding tied to existing Pell Grant eligibility. The cost is a rounding error in the federal budget. The impact is generational.</p>
</div>
</div>
</div>
</section>
<section class="signed">
<div class="signed-inner">
<div>
<h2>Already signed.</h2>
<p style="margin-top:14px;font-size:14px;line-height:1.5">Add yours. Every signature is a co-signer on the next press release we file with the Department of Education.</p>
<form>
<input type="email" placeholder="email@example.com" required>
<button>Sign →</button>
</form>
</div>
<div>
<div class="signed-c">2,041,128</div>
<div class="signed-c-l">★ ★ ★ Borrowers and counting ★ ★ ★</div>
</div>
</div>
</section>
<section class="cards">
<div class="cards-inner">
<h2 class="cards-h">The Fight, This Week.</h2>
<div class="cards-grid">
<div class="cd">
<span class="cd-tag">★ LAWSUIT</span>
<h3>Court asked to reconsider SAVE plan ruling</h3>
<p>Borrower coalition files emergency motion for rehearing. 8 million people directly affected. Decision expected by May 14.</p>
<div class="cd-date">★ APR 30, 2026</div>
</div>
<div class="cd">
<span class="cd-tag">★ PRESS RELEASE</span>
<h3>Department of Education hands portfolio to Treasury</h3>
<p>The $1.6T federal portfolio transfers without notice. Servicers in chaos. We're demanding hearings before any further action.</p>
<div class="cd-date">★ APR 22, 2026</div>
</div>
<div class="cd">
<span class="cd-tag">★ ACTION</span>
<h3>Tell your senator: vote yes on S. 1247</h3>
<p>The Student Borrower Protection Act. Already passed the House. Senate vote Thursday. Call your senators. Use our 47-second tool.</p>
<div class="cd-date">★ THIS WEEK</div>
</div>
</div>
</div>
</section>
</main>
<footer class="ft">
<div class="ft-inner">
<div><div class="ft-lg">SDCC.</div><p>★ 501(C)(3) NON-PROFIT<br>★ EIN 81-2468531<br>★ FOUNDED 2012<br>★ WASHINGTON DC</p></div>
<div><h4>Demands</h4><a>Cancel debt</a><a>End fees</a><a>Free college</a><a>Full platform</a></div>
<div><h4>Action</h4><a>Sign petition</a><a>Email rep</a><a>Share story</a><a>Donate</a></div>
<div><h4>About</h4><a>Mission</a><a>Team</a><a>Privacy</a><a>Accessibility</a></div>
</div>
<div class="ft-bot">© 2026 SDCC ★ Charity Navigator 4-Star ★ Privacy ★ Accessibility</div>
</footer>
</body></html>