From a0f2a1b193036b091340137cbfd7320c9f9981fb Mon Sep 17 00:00:00 2001
From: Andi Chang <andi.chang.vq@gmail.com>
Date: Tue, 22 Sep 2026 15:05:53 -0700
Subject: [PATCH] Update title style to match ocfweb

---
 docs/stylesheets/extra.css | 136 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 135 insertions(+), 1 deletion(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 1a45a4a..603f81c 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1,3 +1,136 @@
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 100;
+  src: url('assets/ibm-plex-mono-100.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 100;
+  src: url('assets/ibm-plex-mono-100-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 200;
+  src: url('assets/ibm-plex-mono-200.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 200;
+  src: url('assets/ibm-plex-mono-200-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: url('assets/ibm-plex-mono-300.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 300;
+  src: url('assets/ibm-plex-mono-300-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('assets/ibm-plex-mono-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 400;
+  src: url('assets/ibm-plex-mono-400-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 500;
+  src: url('assets/ibm-plex-mono-500.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 500;
+  src: url('assets/ibm-plex-mono-500-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 600;
+  src: url('assets/ibm-plex-mono-600.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 600;
+  src: url('assets/ibm-plex-mono-600-italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 700;
+  src: url('assets/ibm-plex-mono-700.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 700;
+  src: url('assets/ibm-plex-mono-700-italic.woff2') format('woff2');
+}
+
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 100 900; 
+  font-stretch: 75% 100%;
+  src: url('assets/ibm-plex-sans.woff2') format('woff2 supports variations'),
+       url('assets/ibm-plex-sans.woff2') format('woff2-variations');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 100 900; 
+  font-stretch: 75% 100%;
+  src: url('assets/ibm-plex-sans-italic.woff2') format('woff2 supports variations'),
+       url('assets/ibm-plex-sans-italic.woff2') format('woff2-variations');
+}
+
 :root {
   --md-typeset-a-color: #337ab7;
   --md-primary-fg-color: #FFFFFF;
@@ -53,7 +186,8 @@
   margin: 0;
   padding: 16px;
   font-size: 36px;
-  font-weight: bold;
+  font-weight: 600;
+  font-stretch: semi-condensed;
   line-height: 1.1;
   background-color: #c1e4f0;
   letter-spacing: inherit