`mockups/04-editorial.html`

122 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grant — The Federal Register, watched for you</title>
<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=Playfair+Display:ital,wght@0,500;0,700;0,900;1,500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Archivo:wght@500;600;700&display=swap" rel="stylesheet">
<style>
  :root{
    --paper:#fbf9f4; --ink:#1a1a17; --muted:#5c5a52; --rule:#dcd7c9;
    --emerald:#0b6b4f; --accent:#0f9d63; --crimson:#9a3b2e; --cream:#f3efe3;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Source Serif 4',serif;background:var(--paper);color:var(--ink)}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px}

  /* masthead */
  .masthead{border-bottom:3px double var(--ink);padding:18px 0 14px}
  .mtop{display:flex;align-items:center;justify-content:space-between;font-family:'Archivo',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
  .title{text-align:center;margin:10px 0 8px}
  .title h1{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(44px,8vw,92px);letter-spacing:-1px;line-height:.9}
  .title .sub{font-family:'Archivo',sans-serif;text-transform:uppercase;letter-spacing:4px;font-size:12px;color:var(--emerald);margin-top:8px;font-weight:600}
  .mnav{display:flex;justify-content:center;gap:28px;font-family:'Archivo',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:1px;padding-top:12px;color:var(--ink)}
  .mnav a:hover{color:var(--emerald)}

  /* lede grid */
  .lede{display:grid;grid-template-columns:2.2fr 1fr;gap:0;border-bottom:1px solid var(--rule);margin-top:0}
  .feature{padding:42px 40px 42px 0;border-right:1px solid var(--rule)}
  .kicker{font-family:'Archivo',sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--crimson);font-weight:700;margin-bottom:14px}
  .feature h2{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(34px,4.6vw,56px);line-height:1.02;letter-spacing:-1px;margin-bottom:18px}
  .feature .dek{font-size:20px;color:var(--muted);line-height:1.55;margin-bottom:24px;max-width:40ch}
  .feature .dek .drop{float:left;font-family:'Playfair Display',serif;font-weight:900;font-size:62px;line-height:.72;padding:6px 10px 0 0;color:var(--emerald)}
  .btn{display:inline-block;background:var(--emerald);color:#fff;font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;padding:13px 26px;border-radius:3px}
  .btn:hover{background:#085740}
  .btn-link{font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;color:var(--emerald);margin-left:22px;border-bottom:2px solid var(--emerald);padding-bottom:2px}

  .rail{padding:42px 0 42px 40px}
  .rail .rh{font-family:'Archivo',sans-serif;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--muted);font-weight:700;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
  .live{font-size:10px;color:var(--crimson);display:flex;align-items:center;gap:5px}
  .live .blip{width:7px;height:7px;border-radius:50%;background:var(--crimson)}
  .item{padding:13px 0;border-bottom:1px solid var(--rule)}
  .item:last-child{border:none}
  .item .src{font-family:'Archivo',sans-serif;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--emerald);font-weight:700;margin-bottom:3px}
  .item .hl{font-family:'Playfair Display',serif;font-weight:700;font-size:16.5px;line-height:1.25}
  .item .meta{font-size:13px;color:var(--muted);margin-top:4px}

  /* secondary stories */
  .stories{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-bottom:3px double var(--ink)}
  .story{padding:34px 28px;border-right:1px solid var(--rule)}
  .story:last-child{border-right:none}
  .story .num{font-family:'Playfair Display',serif;font-weight:900;font-size:30px;color:var(--accent)}
  .story h3{font-family:'Playfair Display',serif;font-weight:700;font-size:22px;line-height:1.1;margin:8px 0 10px}
  .story p{font-size:15.5px;color:var(--muted);line-height:1.55}

  .pullquote{text-align:center;padding:60px 0;border-bottom:1px solid var(--rule)}
  .pullquote blockquote{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:clamp(24px,3.4vw,38px);line-height:1.3;max-width:24ch;margin:0 auto}
  .pullquote cite{font-family:'Archivo',sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--muted);display:block;margin-top:20px}

  .closer{text-align:center;padding:70px 0}
  .closer h2{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(30px,4.5vw,50px);letter-spacing:-1px;margin-bottom:14px}
  .closer p{font-size:18px;color:var(--muted);max-width:46ch;margin:0 auto 26px}
  footer{border-top:3px double var(--ink);padding:24px 0;text-align:center;font-family:'Archivo',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
  @media(max-width:880px){.lede{grid-template-columns:1fr}.feature{border-right:none;padding-right:0}.rail{padding-left:0;border-top:1px solid var(--rule)}.stories{grid-template-columns:1fr}.story{border-right:none;border-bottom:1px solid var(--rule)}.mnav{flex-wrap:wrap;gap:16px}}
</style>
</head>
<body>
<header class="masthead wrap">
  <div class="mtop">
    <span>Friday Edition · For Under-Resourced Nonprofits</span>
    <span>Powered by the U.S. Federal Register API</span>
  </div>
  <div class="title">
    <h1>The Grant Dispatch</h1>
    <div class="sub">Grant — Deadline River</div>
  </div>
  <nav class="mnav">
    <a href="#">Discovery</a><a href="#">Federal Watch</a><a href="#">Proposals</a><a href="#">Partners</a><a href="#">Pricing</a><a href="#">Sign in</a>
  </nav>
</header>

<section class="wrap lede">
  <article class="feature">
    <div class="kicker">The Lead — Proactive Funding Intelligence</div>
    <h2>We read the Federal Register so your team doesn't have to.</h2>
    <p class="dek"><span class="drop">G</span>rant monitors the real U.S. Federal Register the moment notices post — new RFPs, funder priority shifts, agency program changes — and routes each one straight into your fit-scored feed and your Deadline River. The news isn't a separate tab; it <em>drives</em> the pipeline.</p>
    <a class="btn" href="#">Start free</a>
    <a class="btn-link" href="#">See what's posting now →</a>
  </article>

  <aside class="rail">
    <div class="rh">Federal Watch <span class="live"><span class="blip"></span>LIVE</span></div>
    <div class="item"><div class="src">Federal Register · NEA</div><div class="hl">Grants for Arts Projects — FY cycle opens</div><div class="meta">Matched to your mission · 94% fit · due in 6 days</div></div>
    <div class="item"><div class="src">Federal Register · HHS</div><div class="hl">Community Health priority area expanded</div><div class="meta">Priority shift detected · affects 3 saved grants</div></div>
    <div class="item"><div class="src">Federal Register · ED</div><div class="hl">Afterschool Enrichment RFP published</div><div class="meta">New opportunity · 87% fit · due in 28 days</div></div>
    <div class="item"><div class="src">Federal Register · NEH</div><div class="hl">Humanities access guidelines revised</div><div class="meta">Eligibility broadened · re-scoring your matches</div></div>
  </aside>
</section>

<section class="wrap stories">
  <div class="story"><div class="num">01</div><h3>Discovery, unified</h3><p>Federal, foundation, corporate, and local grants in one fit-scored feed — not four siloed databases you check separately.</p></div>
  <div class="story"><div class="num">02</div><h3>Drafted on demand</h3><p>Turn any high-fit notice into a letter of inquiry, a full proposal, or a one-pager — written from your mission and the funder's stated priorities.</p></div>
  <div class="story"><div class="num">03</div><h3>Into outreach</h3><p>Generate funder-specific email and track partners — nonprofits, politicians, corporations, municipalities — as warm intros and co-applicants.</p></div>
</section>

<section class="pullquote wrap">
  <blockquote>"The deadline isn't a date on a calendar. It's the end of a story the news already started telling."</blockquote>
  <cite>The Grant editorial philosophy</cite>
</section>

<section class="closer wrap">
  <h2>Read the funding landscape like a newsroom.</h2>
  <p>Proactive, news-driven, relationship-aware — the pipeline that moves before the deadline does.</p>
  <a class="btn" href="#">Find grants now</a>
</section>

<footer>Grant — Deadline River · Federal data via the live U.S. Federal Register API · Built for nonprofits priced out of the incumbents</footer>
</body>
</html>