`html/10-bilingual.html`

226 lines
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bilingual Equity — SDCC Mockup</title>
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=Lora:wght@400;500;600&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Public Sans',system-ui,sans-serif;background:#fff;color:#0f172a}
a{color:inherit;text-decoration:none}
.skip{position:absolute;top:-40px;left:0;background:#0f172a;color:#fff;padding:10px;z-index:100;font-weight:600}.skip:focus{top:0}
.lang-bar{background:#1e3a8a;color:#fff;padding:7px 0;text-align:center;font-size:13px}
.lang-bar a{margin:0 12px;font-weight:500;opacity:.7}
.lang-bar a.active{opacity:1;border-bottom:2px solid #fbbf24;padding-bottom:5px}
.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-size:24px;font-weight:700;letter-spacing:-.01em;color:#1e3a8a}
.lg-sub{font-size:11px;color:#64748b;font-weight:500;letter-spacing:.04em;margin-left:4px}
.nv{display:flex;gap:24px;font-size:14px;font-weight:500}
.nv .both{display:flex;flex-direction:column;line-height:1.2;font-size:13px}
.nv .both span{color:#64748b;font-size:11px;font-weight:400}
.search{position:relative;width:240px}
.search input{width:100%;background:#f1f5f9;border:1px solid #e2e8f0;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:#1e3a8a;color:#fff;padding:11px 22px;border-radius:6px;font-weight:700;font-size:14px}
.hero{background:linear-gradient(135deg,#eff6ff 0%,#fef3c7 50%,#fee2e2 100%);padding:64px 32px}
.hero-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.hero-tag{display:inline-block;background:rgba(30,58,138,.1);color:#1e3a8a;padding:6px 14px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.04em;margin-bottom:18px}
.hero-h{font-family:'Lora',serif;font-size:54px;line-height:1.1;font-weight:600;letter-spacing:-.02em;color:#0f172a;margin-bottom:8px}
.hero-h-es{font-family:'Lora',serif;font-size:30px;line-height:1.15;font-style:italic;color:#1e3a8a;font-weight:500;margin-bottom:24px}
.hero-lede{font-size:17px;color:#334155;line-height:1.55;margin-bottom:14px}
.hero-lede-es{font-size:15px;color:#475569;line-height:1.55;font-style:italic;margin-bottom:28px;border-left:3px solid #fbbf24;padding-left:14px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.cta-p{background:#1e3a8a;color:#fff;padding:14px 28px;border-radius:8px;font-weight:600;font-size:15px}
.cta-s{background:#fff;color:#1e3a8a;border:2px solid #1e3a8a;padding:12px 26px;border-radius:8px;font-weight:600;font-size:15px}
.hero-vis{position:relative;height:420px;border-radius:18px;overflow:hidden;background:#1e3a8a;box-shadow:0 20px 50px rgba(30,58,138,.2)}
.hero-vis-img{position:absolute;inset:0;background:linear-gradient(135deg,#1e3a8a,#312e81,#7c1d6f);opacity:.85}
.hero-stat{position:absolute;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);padding:18px 22px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.hero-stat.tl{top:24px;left:24px}
.hero-stat.br{bottom:24px;right:24px}
.hero-stat.cm{top:50%;left:50%;transform:translate(-50%,-50%)}
.hs-n{font-family:'Lora',serif;font-size:32px;font-weight:600;color:#1e3a8a;letter-spacing:-.02em;line-height:1}
.hs-l{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.06em;margin-top:4px;font-weight:500}
.hs-l-es{display:block;font-style:italic;color:#94a3b8;text-transform:none;letter-spacing:0;font-size:11px;margin-top:2px}
.equity-band{background:#1e3a8a;color:#fff;padding:48px 32px}
.eb-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.eb-stat{padding:18px;border-left:3px solid #fbbf24}
.eb-n{font-family:'Lora',serif;font-size:48px;font-weight:600;color:#fbbf24;letter-spacing:-.02em;line-height:1;margin-bottom:8px}
.eb-l{font-size:14px;line-height:1.4;margin-bottom:6px}
.eb-l-es{font-size:13px;color:#cbd5e1;font-style:italic;line-height:1.4}
.tools{max-width:1320px;margin:64px auto;padding:0 32px}
.tools-h{text-align:center;margin-bottom:32px}
.tools-h h2{font-family:'Lora',serif;font-size:40px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.tools-h h2-es{font-family:'Lora',serif;font-size:24px;font-weight:500;font-style:italic;color:#1e3a8a}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:28px;transition:border-color .2s,transform .2s}
.tcard:hover{border-color:#1e3a8a;transform:translateY(-2px)}
.tcard-icon{width:48px;height:48px;background:#eff6ff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px}
.tcard h3{font-family:'Lora',serif;font-size:22px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
.tcard h3-es{font-size:13px;color:#1e3a8a;font-style:italic;font-weight:500;margin-bottom:14px;display:block}
.tcard p{font-size:14px;color:#475569;line-height:1.5;margin-bottom:6px}
.tcard p-es{font-size:13px;color:#64748b;font-style:italic;line-height:1.5}
.stories{background:#f8fafc;padding:64px 32px}
.stories-inner{max-width:1320px;margin:0 auto}
.stories-h{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px;flex-wrap:wrap;gap:14px}
.stories-h h2{font-family:'Lora',serif;font-size:36px;font-weight:600;letter-spacing:-.015em}
.stories-h h2 em{font-style:italic;color:#1e3a8a;font-weight:500;font-size:22px;display:block;margin-top:2px}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.scard{background:#fff;border-radius:14px;overflow:hidden;border:1px solid #e2e8f0}
.scard-img{height:180px;background:linear-gradient(135deg,#1e3a8a,#7c1d6f);position:relative}
.scard-img::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,rgba(251,191,36,.2),transparent 60%)}
.scard-lang{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.9);padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600;color:#1e3a8a;letter-spacing:.04em}
.scard-c{padding:20px}
.scard-by{font-size:12px;color:#64748b;margin-bottom:8px;font-weight:500}
.scard h4{font-family:'Lora',serif;font-size:19px;line-height:1.3;font-weight:600;margin-bottom:8px}
.scard p{font-size:13px;color:#475569;line-height:1.5;margin-bottom:6px}
.scard p-es{font-size:12px;color:#64748b;font-style:italic;line-height:1.45}
.ft{background:#0f172a;color:#94a3b8;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-size:24px;color:#fff;margin-bottom:14px;font-weight:700}
.ft p{line-height:1.5}
.ft p em{display:block;color:#64748b;font-style:italic;margin-top:4px;font-size:12px}
.ft h4{color:#fff;font-size:13px;margin-bottom:14px}
.ft h4 em{display:block;color:#64748b;font-style:italic;font-size:11px;font-weight:400;margin-top:1px}
.ft a{display:block;padding:4px 0;color:#94a3b8}
.ft a em{font-size:11px;color:#64748b;font-style:italic;display:inline;margin-left:4px}
.ft-bot{max-width:1320px;margin:48px auto 0;padding-top:32px;border-top:1px solid #1e293b;text-align:center;font-size:12px}
</style></head><body>
<a class="skip" href="#m">Skip to main content / Saltar al contenido</a>
<div class="lang-bar" role="navigation" aria-label="Language">
  <a class="active" lang="en">English</a>
  <a lang="es">Español</a>
  <a lang="zh">中文</a>
  <a lang="vi">Tiếng Việt</a>
  <a lang="tl">Tagalog</a>
  <a lang="ko">한국어</a>
</div>
<header class="hd"><div class="hd-inner">
  <div class="lg">SDCC <span class="lg-sub">en/es</span></div>
  <nav class="nv" aria-label="Primary">
    <a class="both"><span style="color:#0f172a">Issues</span><span>Temas</span></a>
    <a class="both"><span style="color:#0f172a">Stories</span><span>Historias</span></a>
    <a class="both"><span style="color:#0f172a">Tools</span><span>Herramientas</span></a>
    <a class="both"><span style="color:#0f172a">Press</span><span>Prensa</span></a>
    <a class="both"><span style="color:#0f172a">About</span><span>Quiénes somos</span></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 · Buscar"></label>
  <a class="donate">Donate · Donar</a>
</div></header>
<main id="m">
<section class="hero">
  <div class="hero-inner">
    <div>
      <div class="hero-tag">Equity-first · Igualdad primero</div>
      <h1 class="hero-h">Two million borrowers. Every language. One movement.</h1>
      <div class="hero-h-es">Dos millones de personas con deudas estudiantiles. Cada idioma. Un movimiento.</div>
      <p class="hero-lede">Latino borrowers default at 1.6× the rate of white borrowers. The Department of Education's official forms are English-only. We're not.</p>
      <p class="hero-lede-es">Las personas latinas pagan 1.6 veces más en incumplimiento que las personas blancas. Los formularios oficiales del Departamento de Educación están solo en inglés. Nosotros, no.</p>
      <div class="hero-cta">
        <a class="cta-p">Add my name · Agregar mi nombre</a>
        <a class="cta-s">Find my representative</a>
      </div>
    </div>
    <div class="hero-vis">
      <div class="hero-vis-img"></div>
      <div class="hero-stat tl"><div class="hs-n">$1.77T</div><div class="hs-l">Total US student debt<span class="hs-l-es">deuda estudiantil total</span></div></div>
      <div class="hero-stat br"><div class="hs-n">28%</div><div class="hs-l">Latinx borrowers default<span class="hs-l-es">incumplimiento de prestatarios latinos</span></div></div>
    </div>
  </div>
</section>

<section class="equity-band" aria-label="Equity statistics">
  <div class="eb-inner">
    <div class="eb-stat">
      <div class="eb-n">1.6×</div>
      <div class="eb-l">Latino borrowers default at 1.6 times the rate of white borrowers.</div>
      <div class="eb-l-es">Los prestatarios latinos pagan 1.6 veces más en incumplimiento que los prestatarios blancos.</div>
    </div>
    <div class="eb-stat">
      <div class="eb-n">$31K</div>
      <div class="eb-l">Average debt for Black graduates 4 years out — 188% of white graduates.</div>
      <div class="eb-l-es">Deuda promedio de graduados Negros a 4 años — 188% del promedio de graduados blancos.</div>
    </div>
    <div class="eb-stat">
      <div class="eb-n">62%</div>
      <div class="eb-l">Of Spanish-speaking borrowers report receiving servicer letters they can't read.</div>
      <div class="eb-l-es">De los prestatarios hispanohablantes reciben cartas del prestamista que no pueden leer.</div>
    </div>
  </div>
</section>

<section class="tools">
  <div class="tools-h">
    <h2>Free tools, in your language.</h2>
    <h2-es>Herramientas gratuitas, en su idioma.</h2-es>
  </div>
  <div class="tools-grid">
    <div class="tcard">
      <div class="tcard-icon">📊</div>
      <h3>PSLF eligibility check</h3>
      <h3-es>Verificación de elegibilidad PSLF</h3-es>
      <p>Find out in 90 seconds whether you qualify for Public Service Loan Forgiveness.</p>
      <p-es>Averigüe en 90 segundos si califica para el Perdón de Préstamos por Servicio Público.</p-es>
    </div>
    <div class="tcard">
      <div class="tcard-icon">📨</div>
      <h3>Email your senator</h3>
      <h3-es>Envíe un correo a su senador</h3-es>
      <p>Send a prefilled bilingual message to your two senators in under a minute.</p>
      <p-es>Envíe un mensaje bilingüe pre-llenado a sus dos senadores en menos de un minuto.</p-es>
    </div>
    <div class="tcard">
      <div class="tcard-icon">📞</div>
      <h3>Servicer translator</h3>
      <h3-es>Traductor de cartas del prestamista</h3-es>
      <p>Upload a confusing servicer letter. Get a plain-language translation in EN or ES.</p>
      <p-es>Suba una carta confusa del prestamista. Reciba una traducción en inglés o español sencillo.</p-es>
    </div>
  </div>
</section>

<section class="stories">
  <div class="stories-inner">
    <div class="stories-h">
      <h2>Stories from the movement <em>Historias del movimiento</em></h2>
      <a style="color:#1e3a8a;font-weight:600;font-size:14px">View all stories →</a>
    </div>
    <div class="story-grid">
      <article class="scard">
        <div class="scard-img"><span class="scard-lang">ES · EN</span></div>
        <div class="scard-c">
          <div class="scard-by">Maria Cordero · Houston, TX</div>
          <h4>"They sent me 14 letters in English. I didn't know I was in default."</h4>
          <p>I came to the U.S. at 19. I worked, I went to community college, I borrowed $18,000.</p>
          <p-es>Llegué a los EE.UU. a los 19 años. Trabajé, fui al colegio comunitario, pedí prestados $18,000.</p-es>
        </div>
      </article>
      <article class="scard">
        <div class="scard-img"><span class="scard-lang">EN</span></div>
        <div class="scard-c">
          <div class="scard-by">DeShawn Williams · Atlanta, GA</div>
          <h4>"I'm a teacher. I shouldn't have to fight for nine years to get PSLF."</h4>
          <p>121 qualifying payments. 9 years of service. They told me I was 12 short.</p>
        </div>
      </article>
      <article class="scard">
        <div class="scard-img"><span class="scard-lang">ZH</span></div>
        <div class="scard-c">
          <div class="scard-by">Jennifer Liu · Queens, NY · 翻译</div>
          <h4>"My parents took out Parent PLUS to put me through school. Now they can't retire."</h4>
          <p>$118,000 in Parent PLUS loans. Both my parents are 67. Neither has retired.</p>
        </div>
      </article>
    </div>
  </div>
</section>
</main>
<footer class="ft">
  <div class="ft-grid">
    <div><div class="ft-logo">SDCC</div><p>501(c)(3) non-profit · EIN 81-2468531 · Founded 2012<em>Organización sin fines de lucro 501(c)(3) · EIN 81-2468531 · Fundada en 2012</em></p><p style="margin-top:8px;font-size:12px">1875 K Street NW, Suite 200 · Washington, DC 20006</p></div>
    <div><h4>Issues<em>Temas</em></h4><a>SAVE plan <em>Plan SAVE</em></a><a>PSLF <em>Perdón PSLF</em></a><a>Default <em>Incumplimiento</em></a><a>Forgiveness <em>Perdón</em></a></div>
    <div><h4>Tools<em>Herramientas</em></h4><a>PSLF check <em>Verificación</em></a><a>Email rep <em>Correo</em></a><a>Translator <em>Traductor</em></a></div>
    <div><h4>About<em>Quiénes somos</em></h4><a>Mission <em>Misión</em></a><a>Team <em>Equipo</em></a><a>Privacy <em>Privacidad</em></a><a>Accessibility <em>Accesibilidad</em></a></div>
  </div>
  <div class="ft-bot">© 2026 SDCC · Charity Navigator 4★ · GuideStar Platinum · Available in EN · ES · ZH · VI · TL · KO</div>
</footer>
</body></html>