Match Press Releases pages to press_releases_mockup.pdf

- New "Newsroom" eyebrow + serif ("Newsreader") display headings for
  Press Releases specifically — added as a new $font-serif, loaded
  alongside Inter/JetBrains Mono in _typography.scss's existing
  Google Fonts import. Not used anywhere else on the site.
- Press Releases hub (layouts/news/press-releases/list.html): rebuilt
  around the mockup — eyebrow, serif H1, an intro that explicitly
  points to the blog for community content, one bordered .press-card
  per official release (date · location, serif title, lead, "Read
  full release →"), a "More releases will appear here..." note while
  there's only one, and a Media Kit box (Brand guidelines button
  disabled/"Coming soon", same treatment as Mission & Vision's Dive
  Deeper card, since that page doesn't exist yet). The five existing
  third-party press-clipping entries move to a separate "In the news"
  section on the same page, rather than mixing with official releases
  or disappearing — the mockup frames this page as releases-only, but
  the clippings are still real content that needs a home.
- Single release page (layouts/news/press-release.html): "← All press
  releases" back-link instead of a breadcrumb (shown top and bottom,
  per the mockup), a PRESS RELEASE badge, dateline, and serif H1 all
  now template-driven from front matter instead of hardcoded in the
  content body, a new Media contact box (press@oursqlfoundation.org,
  the same address already used on Contact Us), and a footer row with
  the back-link plus the same disabled Brand guidelines button.
- content/news/press-releases/oursql-foundation-launches.md: dropped
  the now-template-owned h2/dateline/lead from the body; added
  `location` and `press_date` front matter (the latter documented
  inline — the release's actual dateline has always read May 27,
  while `date` stays May 26 for list sort order, per an earlier
  explicit request); converted the Founding Board list to the row/
  table layout the mockup shows (name, right-aligned role/company,
  divider lines) instead of a bulleted list.
- All mockup-specific CSS lives under new classes in _news.scss (the
  detail-page additions scoped under a .press-release--detail
  modifier) — the homepage's own copy of the press-release markup is
  completely untouched, confirmed still rendering in Inter, not the
  new serif.

Testing: hugo --minify — clean build, 201 pages, 0 errors. Verified
both pages against the mockup side-by-side in both themes (desktop +
mobile, where the Founding Board rows stack), and confirmed the
homepage's embedded press release is unaffected.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: Mazizova

assets/scss/_light-theme.scss

@@ -917,4 +917,57 @@
   .news-item-desc { color: #64748b; }
   .news-item-source { color: #94a3b8; }
   .news-item-link { color: #0272a5; }
+
+  // Press Releases hub + detail page (press_releases_mockup.pdf)
+  .newsroom-eyebrow { color: #0272a5; }
+
+  .press-back-link {
+    color: #64748b;
+    &:hover { color: #0272a5; }
+  }
+
+  .press-card {
+    border-color: #dde3ed;
+    &:hover { border-color: rgba(0, 200, 255, 0.4); }
+  }
+  .press-card-meta { color: #94a3b8; }
+  .press-card-title { color: #0f172a; }
+  .press-card-desc { color: #64748b; }
+  .press-card-link { color: #0272a5; }
+  .press-more-note { color: #94a3b8; }
+
+  .press-media-kit {
+    background: #ffffff;
+    border-color: #dde3ed;
+  }
+  .press-media-kit-title { color: #0f172a; }
+  .press-media-kit-desc { color: #64748b; }
+
+  .press-coverage {
+    border-top-color: #dde3ed;
+    h2 { color: #0f172a; }
+  }
+  .press-coverage-sub { color: #64748b; }
+
+  .press-release--detail {
+    .press-badge {
+      color: #0272a5;
+      background: rgba(0, 200, 255, 0.08);
+      border-color: rgba(0, 200, 255, 0.3);
+    }
+
+    .press-release-inner h1 { color: #0f172a; }
+
+    .press-board-row { border-bottom-color: #dde3ed; }
+    .press-board-name { color: #0f172a; }
+    .press-board-role { color: #64748b; }
+
+    .press-contact-box {
+      background: #ffffff;
+      border-color: #dde3ed;
+    }
+    .press-contact-label { color: #0f172a; }
+    .press-contact-email { color: #0272a5; }
+    .press-contact-desc { color: #64748b; }
+  }
 }

assets/scss/_news.scss

@@ -1,22 +1,257 @@
 // News section (Press Releases list + standalone full-text release wrapper)
 
-// Top spacing + breadcrumb width for a standalone .press-release page (on
-// the homepage the section sits right below the hero, which already
-// supplies its own top offset — a standalone page needs its own).
+// Top spacing for a standalone .press-release page (on the homepage the
+// section sits right below the hero, which already supplies its own top
+// offset — a standalone page needs its own).
 .press-release-page {
   padding-top: 120px;
+}
+
+.press-back-link {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 100%;
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 0 2rem 1.5rem;
+  font-size: 0.875rem;
+  color: $muted;
+  text-decoration: none;
+
+  &:hover { color: $accent; }
+}
+
+.press-release-footer-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  max-width: 760px;
+  margin: 2.5rem auto 0;
+  padding: 0 2rem $section-pad;
+}
+
+// ── Detail-page-only additions (press_releases_mockup.pdf), scoped under
+// this modifier so the homepage's own .press-release embed is untouched ──
+.press-release--detail {
+  .press-release-inner {
+    .press-badge {
+      display: inline-block;
+      font-size: 0.7rem;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: $accent;
+      background: $accent-glow;
+      border: 1px solid rgba($accent, 0.3);
+      border-radius: 6px;
+      padding: 0.3rem 0.7rem;
+      margin-bottom: 0.875rem;
+    }
+
+    h1 {
+      font-family: $font-serif;
+      font-weight: 500;
+      font-size: clamp(1.75rem, 4vw, 2.5rem);
+      line-height: 1.25;
+      color: $white;
+      margin: 0 0 1rem;
+    }
+
+    h3 {
+      font-family: $font-serif;
+      font-weight: 500;
+    }
+  }
 
-  .resources-breadcrumb {
-    max-width: 760px;
-    margin: 0 auto;
-    padding: 0 2rem;
+  .press-board-table {
+    margin: 1.5rem 0 2rem;
+  }
+
+  .press-board-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 1.5rem;
+    padding: 0.875rem 0;
+    border-bottom: 1px solid $dark-border;
+
+    &:last-child { border-bottom: none; }
+  }
+
+  .press-board-name {
+    font-weight: 600;
+    color: $off-white;
+    flex-shrink: 0;
+  }
+
+  .press-board-role {
+    color: $muted;
+    text-align: right;
+  }
+
+  .press-contact-box {
+    margin-top: 3rem;
+    padding: 1.5rem 1.75rem;
+    background: $dark-surface;
+    border: 1px solid $dark-border;
+    border-radius: 12px;
+  }
+
+  .press-contact-label {
+    font-weight: 700;
+    color: $off-white;
+    margin: 0 0 0.375rem;
+  }
+
+  .press-contact-email {
+    display: inline-block;
+    color: $accent;
+    font-weight: 600;
+    text-decoration: none;
+    margin-bottom: 0.375rem;
+
+    &:hover { text-decoration: underline; }
+  }
+
+  .press-contact-desc {
+    font-size: 0.875rem;
+    color: $muted;
+    margin: 0;
+  }
+
+  @media (max-width: $break-sm) {
+    .press-board-row { flex-direction: column; gap: 0.25rem; }
+    .press-board-role { text-align: left; }
   }
 }
 
+// ── Press Releases hub (list.html) ──
+.press-newsroom {
+  h1 {
+    font-family: $font-serif;
+    font-weight: 500;
+    font-size: clamp(2rem, 4vw, 2.75rem);
+  }
+}
+
+.newsroom-eyebrow {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: $accent;
+  margin-bottom: 0.5rem;
+}
+
 .news-page .page-intro {
   margin-bottom: 2.5rem;
 }
 
+.press-card-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.press-card {
+  display: block;
+  padding: 1.75rem;
+  border: 1px solid $dark-border;
+  border-radius: 12px;
+  text-decoration: none;
+  transition: border-color 0.2s ease, transform 0.2s ease;
+
+  &:hover {
+    border-color: rgba($accent, 0.4);
+    transform: translateY(-1px);
+
+    .press-card-link { text-decoration: underline; }
+  }
+}
+
+.press-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: $muted;
+  margin-bottom: 0.5rem;
+}
+
+.press-card-title {
+  font-family: $font-serif;
+  font-weight: 600;
+  font-size: 1.375rem;
+  line-height: 1.3;
+  color: $off-white;
+  margin: 0 0 0.5rem;
+}
+
+.press-card-desc {
+  font-size: 0.9375rem;
+  color: $muted;
+  line-height: 1.6;
+  margin: 0 0 1rem;
+}
+
+.press-card-link {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: $accent;
+}
+
+.press-more-note {
+  font-size: 0.875rem;
+  color: $muted;
+  margin: 0 0 2.5rem;
+}
+
+.press-media-kit {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  padding: 1.5rem 1.75rem;
+  background: $dark-surface;
+  border: 1px solid $dark-border;
+  border-radius: 12px;
+  margin-bottom: 3rem;
+}
+
+.press-media-kit-title {
+  font-weight: 700;
+  color: $off-white;
+  margin: 0 0 0.25rem;
+}
+
+.press-media-kit-desc {
+  font-size: 0.875rem;
+  color: $muted;
+  margin: 0;
+}
+
+.press-coverage {
+  padding-top: 2.5rem;
+  border-top: 1px solid $dark-border;
+
+  h2 {
+    font-family: $font-serif;
+    font-weight: 500;
+    font-size: 1.5rem;
+  }
+}
+
+.press-coverage-sub {
+  font-size: 0.9375rem;
+  color: $muted;
+  margin: 0.5rem 0 1.5rem;
+}
+
 .news-list {
   display: flex;
   flex-direction: column;

assets/scss/_typography.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&display=swap');
 
 html {
   font-size: 16px;

assets/scss/_variables.scss

@@ -19,6 +19,9 @@ $warm:         #ff6b35;
 // Typography
 $font-sans: 'Inter', system-ui, -apple-system, sans-serif;
 $font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+// Editorial serif — Press Releases headings only (newsroom feel, per the
+// press_releases_mockup.pdf), not used anywhere else on the site.
+$font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
 
 // Breakpoints
 $break-sm:  576px;

content/news/press-releases/oursql-foundation-launches.md

@@ -1,14 +1,19 @@
 ---
 layout: "press-release"
 date: 2026-05-26
+# The page's own `date` drives chronological placement in the Press
+# Releases list (set to May 26 per an explicit earlier request). The dateline
+# actually printed on the release itself has always read May 27 — both in
+# this site's own homepage excerpt and in the real GlobeNewswire syndication
+# — so `press_date` overrides just the displayed date, without touching sort
+# order. Future releases don't need this field unless the same split ever
+# recurs.
+press_date: 2026-05-27
+location: "Raleigh, NC"
 title: "OurSQL Foundation launches to support MySQL users, developers, and companies"
 description: "New community initiative aims to support MySQL users around best practices, future developments, and knowledge sharing."
 ---
 
-<h2>OurSQL Foundation launches to support MySQL users, developers, and companies</h2>
-<p class="press-date">Raleigh, NC — May 27, 2026</p>
-<p class="press-lead">New community initiative aims to support MySQL users around best practices, future developments, and knowledge sharing.</p>
-
 <p>Today marks the launch of The OurSQL Foundation, an open organisation that will support the community of users, developers, and companies that are invested in the success of MySQL. The new Foundation will provide a venue for those involved in the MySQL community — using, building, and deploying applications that use MySQL or the broad range of compatible software — to share with their peers, to access knowledge, and to provide feedback on future development in a transparent and consistent way. This community organisation will support the growth and use of MySQL as an open source database and collaborate with all players in the market, including Oracle, to see MySQL succeed with the next generation of developers and applications.</p>
 
 <p>The OurSQL Foundation has been created as a 501(c)(6) non-profit organisation to represent the companies working around MySQL and compatible technologies as part of their deployments, as well as those businesses and partners that support MySQL use with services or products. This will include companies that deploy and support MySQL for their customers, independent software vendors that produce complementary products, as well as consultants that provide their expertise and insights.</p>
@@ -31,15 +36,15 @@ description: "New community initiative aims to support MySQL users around best p
 
 <p>The organisation is an independent community led by a founding board, made up of the following individuals from the MySQL community:</p>
 
-<ul>
-  <li><strong>Vadim Tkachenko</strong>, Technology Fellow and Co-Founder, Percona — President</li>
-  <li><strong>Matt Lord</strong>, Software Engineer, PlanetScale — Secretary</li>
-  <li><strong>Sunny Bains</strong>, Software Architect, PingCAP</li>
-  <li><strong>Tomas Ulin</strong>, Village Historian, VillageSQL — Treasurer</li>
-  <li><strong>Zongzhi Chen</strong>, Manager, Cloud RDS Team, Alibaba</li>
-  <li><strong>Jean-François Gagné</strong>, MySQL Expert and Independent Consultant</li>
-  <li><strong>Peter Zaitsev</strong>, Co-Founder, Percona</li>
-</ul>
+<div class="press-board-table">
+  <div class="press-board-row"><span class="press-board-name">Vadim Tkachenko</span><span class="press-board-role">Technology Fellow and Co-Founder, Percona — President</span></div>
+  <div class="press-board-row"><span class="press-board-name">Matt Lord</span><span class="press-board-role">Software Engineer, PlanetScale — Secretary</span></div>
+  <div class="press-board-row"><span class="press-board-name">Sunny Bains</span><span class="press-board-role">Software Architect, PingCAP</span></div>
+  <div class="press-board-row"><span class="press-board-name">Tomas Ulin</span><span class="press-board-role">Village Historian, VillageSQL — Treasurer</span></div>
+  <div class="press-board-row"><span class="press-board-name">Zongzhi Chen</span><span class="press-board-role">Manager, Cloud RDS Team, Alibaba</span></div>
+  <div class="press-board-row"><span class="press-board-name">Jean-François Gagné</span><span class="press-board-role">MySQL Expert and Independent Consultant</span></div>
+  <div class="press-board-row"><span class="press-board-name">Peter Zaitsev</span><span class="press-board-role">Co-Founder, Percona</span></div>
+</div>
 
 <p>The Foundation will follow the model that other open source foundations have taken to provide an independent, vendor-neutral space for mutual collaboration and assistance. The Foundation will be a separate legal entity that manages events, resource repositories, and adoption efforts on behalf of the community, growing the number of individuals that use and interact around MySQL, as well as providing a collective voice on the MySQL roadmap and future developments. The Foundation will start by creating Committee Groups to support the organisation's work around events, collaboration and support for using MySQL.</p>