diff --git a/mintlify/docs.json b/mintlify/docs.json index 507303d..78476a6 100644 --- a/mintlify/docs.json +++ b/mintlify/docs.json @@ -14,6 +14,20 @@ "dark": "#000000" } }, + "fonts": { + "heading": { + "family": "Suisse Intl", + "source": "/fonts/suisse-intl/SuisseIntl-Medium.woff2", + "format": "woff2", + "weight": 500 + }, + "body": { + "family": "Suisse Intl", + "source": "/fonts/suisse-intl/SuisseIntl-Regular.woff2", + "format": "woff2", + "weight": 400 + } + }, "favicon": "/favicon.svg", "navigation": { "tabs": [ @@ -256,6 +270,20 @@ }, "head": { "links": [ + { + "rel": "preload", + "href": "/fonts/suisse-intl/SuisseIntl-Regular.woff2", + "as": "font", + "type": "font/woff2", + "crossOrigin": "anonymous" + }, + { + "rel": "preload", + "href": "/fonts/suisse-intl/SuisseIntl-Book.woff2", + "as": "font", + "type": "font/woff2", + "crossOrigin": "anonymous" + }, { "rel": "preload", "href": "/fonts/suisse-intl/SuisseIntl-Medium.woff2", @@ -265,14 +293,14 @@ }, { "rel": "preload", - "href": "/fonts/suisse-intl/SuisseIntl-Regular.woff2", + "href": "/fonts/suisse-intl-mono/SuisseIntlMono-Regular-WebXL.woff2", "as": "font", "type": "font/woff2", "crossOrigin": "anonymous" }, { "rel": "preload", - "href": "/fonts/suisse-intl/SuisseIntl-Bold.woff2", + "href": "/fonts/suisse-intl-mono/SuisseIntlMono-Bold-WebXL.woff2", "as": "font", "type": "font/woff2", "crossOrigin": "anonymous" diff --git a/mintlify/fonts/suisse-intl-mono/SuisseIntlMono-Bold-WebXL.woff2 b/mintlify/fonts/suisse-intl-mono/SuisseIntlMono-Bold-WebXL.woff2 new file mode 100644 index 0000000..945c48c Binary files /dev/null and b/mintlify/fonts/suisse-intl-mono/SuisseIntlMono-Bold-WebXL.woff2 differ diff --git a/mintlify/fonts/suisse-intl-mono/SuisseIntlMono-Regular-WebXL.woff2 b/mintlify/fonts/suisse-intl-mono/SuisseIntlMono-Regular-WebXL.woff2 new file mode 100644 index 0000000..894e802 Binary files /dev/null and b/mintlify/fonts/suisse-intl-mono/SuisseIntlMono-Regular-WebXL.woff2 differ diff --git a/mintlify/fonts/suisse-intl/SuisseIntl-Bold.woff2 b/mintlify/fonts/suisse-intl/SuisseIntl-Bold.woff2 deleted file mode 100644 index 8a45886..0000000 Binary files a/mintlify/fonts/suisse-intl/SuisseIntl-Bold.woff2 and /dev/null differ diff --git a/mintlify/fonts/suisse-intl/SuisseIntl-Book.woff2 b/mintlify/fonts/suisse-intl/SuisseIntl-Book.woff2 new file mode 100644 index 0000000..b43587c Binary files /dev/null and b/mintlify/fonts/suisse-intl/SuisseIntl-Book.woff2 differ diff --git a/mintlify/index.mdx b/mintlify/index.mdx index 576ff48..d047505 100644 --- a/mintlify/index.mdx +++ b/mintlify/index.mdx @@ -140,48 +140,50 @@ export const HeroCard = ({ title, description, href, icon, whiteIcon }) => { -
-
- - x - - - - github - - - - linkedin - - +
+
+
+ + x + + + + github + + + + linkedin + + +
diff --git a/mintlify/styles/fonts.css b/mintlify/styles/fonts.css index b06ffa7..945ca28 100644 --- a/mintlify/styles/fonts.css +++ b/mintlify/styles/fonts.css @@ -1,25 +1,61 @@ +/* =========================================== + Suisse Intl Font Family + =========================================== */ + +/* Regular (400) - Default body text */ @font-face { font-family: "Suisse Intl"; src: url("/fonts/suisse-intl/SuisseIntl-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; - font-display: swap; + font-display: block; +} + +/* Book (450) - Button text */ +@font-face { + font-family: "Suisse Intl"; + src: url("/fonts/suisse-intl/SuisseIntl-Book.woff2") format("woff2"); + font-weight: 450; + font-style: normal; + font-display: block; } +/* Medium (500) - Bold/emphasis text */ @font-face { font-family: "Suisse Intl"; src: url("/fonts/suisse-intl/SuisseIntl-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; - font-display: swap; + font-display: block; } +/* Map bold (700) to Medium for consistent typography */ @font-face { font-family: "Suisse Intl"; - src: url("/fonts/suisse-intl/SuisseIntl-Bold.woff2") format("woff2"); + src: url("/fonts/suisse-intl/SuisseIntl-Medium.woff2") format("woff2"); font-weight: 700; font-style: normal; - font-display: swap; + font-display: block; } +/* =========================================== + Suisse Intl Mono Font Family + =========================================== */ + +/* Mono Regular - Code blocks */ +@font-face { + font-family: "Suisse Intl Mono"; + src: url("/fonts/suisse-intl-mono/SuisseIntlMono-Regular-WebXL.woff2") format("woff2"); + font-weight: 400; + font-style: normal; + font-display: block; +} +/* Mono Bold - Bold code */ +@font-face { + font-family: "Suisse Intl Mono"; + src: url("/fonts/suisse-intl-mono/SuisseIntlMono-Bold-WebXL.woff2") format("woff2"); + font-weight: 700; + font-style: normal; + font-display: block; +} diff --git a/mintlify/styles/styles.css b/mintlify/styles/styles.css index 9e5391f..49f5654 100644 --- a/mintlify/styles/styles.css +++ b/mintlify/styles/styles.css @@ -1,3 +1,77 @@ +/* =========================================== + Custom Font Styles for Suisse Intl + + Note: Base fonts (body/heading) are configured + in docs.json using Mintlify's fonts config. + This CSS handles additional customizations. + =========================================== */ + +/* Global: Enable single-story 'a' (stylistic alternates) */ +* { + font-feature-settings: "salt" on; + text-shadow: none; +} + +/* Headings & Bold: Use Medium weight (500), normal tracking */ +h1, h2, h3, h4, h5, h6, +strong, b, th, +.sidebar-group-header, +.eyebrow, +.font-semibold, +[data-component-part="step-title"], +[data-component-part="tab-button"] { + font-weight: 500 !important; + letter-spacing: normal !important; +} + +/* Navigation tabs, navbar links & CTA button: Medium weight */ +.nav-tabs-item, +.navbar-link a, +#topbar-cta-button, #topbar-cta-button *, +#page-context-menu-button, #page-context-menu-button *, +#pagination a, #pagination a * { + font-weight: 500 !important; + text-shadow: none !important; +} + +/* Active sidebar item only: Medium weight (has text-primary class) */ +a[class*="text-primary"]:not(.nav-tabs-item), +a[class*="text-primary"]:not(.nav-tabs-item) *, +button[class*="text-primary"], +button[class*="text-primary"] * { + font-weight: 500 !important; +} + +/* Code: Use Suisse Intl Mono */ +code, pre, kbd, samp, .font-mono { + font-family: "Suisse Intl Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; + font-feature-settings: "salt" on !important; +} + +/* API field names: Mono Bold */ +[data-component-part="field-name"] { + font-family: "Suisse Intl Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; + font-weight: 700 !important; + font-feature-settings: "salt" on !important; +} + +/* Homepage: Headings use Regular weight (400) */ +.hero h1, .hero h2, .hero h3, +.hero .title, .hero .highlight, +.usecase h2, .usecase .highlight, +.hero-card h3, .card-content h3 { + font-weight: 400 !important; +} + +/* Hero title letter-spacing */ +.hero .title span { + letter-spacing: -1.2px !important; +} + +/* =========================================== + Existing Styles + =========================================== */ + html.light .hero { background: #f0f0ee; background-image: radial-gradient( @@ -76,10 +150,9 @@ html.dark .hero-card { align-items: center; gap: 4px; border-radius: 4px; - font-feature-settings: "salt" on; font-size: 16px; font-style: normal; - font-weight: 400; + font-weight: 500; /* Medium weight for buttons */ line-height: 24px; } @@ -90,7 +163,6 @@ html.dark .hero-card { padding-right: 16px; margin-bottom: 32px; gap: 32px; - font-family: "Suisse Intl"; } @media (min-width: 640px) { @@ -149,7 +221,6 @@ html.dark .hero-card { align-items: flex-start; gap: 32px; align-self: stretch; - font-family: "Suisse Intl"; } @media (min-width: 640px) { @@ -197,18 +268,14 @@ html.dark .hero-card { .footer { display: flex; - width: 100%; - max-width: 1200px; flex-direction: row; - align-items: flex-start; + align-items: center; gap: 16px; - padding: 0 16px; } @media (min-width: 640px) { .footer { gap: 20px; - padding: 0; } } @@ -269,4 +336,4 @@ html.dark .hero-card { #footer > div.flex.items-center.justify-between > div > a { display: none; -} \ No newline at end of file +}