From 1081dd75feb971acc09ae206317adf15e0c9cf76 Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Wed, 9 Sep 2026 17:24:53 -0700 Subject: [PATCH 01/12] =?UTF-8?q?docs(qa):=20second=20Docs=203.0=20QA=20pa?= =?UTF-8?q?ss=20=E2=80=94=20header=20tabs,=20footer,=20nav=20colors,=20ali?= =?UTF-8?q?gnment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Design QA fixes against the World Website Handoff Figma (Homepage - live, node 78456-89219): - Align the navbar container with the page content: 1728px frame with 96px gutters at desktop, so the logo, tabs, hero, and content share the same left edge (docs pages pull the sidebar wrapper to match). - Add Resources and Support dropdown tabs to the navigation, separated from the page tabs by a hairline divider per the new header design. Their menus absorb the old global sidebar anchors (Telegram, email, GitHub), which the design drops from the sidebar. - Restyle tabs to the design language: ink labels, black pill for the active tab (inverted in dark mode), no underline indicator; search entry restyled to the quiet bordered pill. - Add the missing footer on docs pages via footer.links, restyled to the design's single row: ™ 2026 World left, six ink links right. - Hide the floating assistant chat launcher; the assistant remains reachable from the header. - Update the Go to World Tech link to /blog?blog_type=world-tech (both visibility twins) and underline it per the design. - Sidebar: selected item is now the neutral pill (#F3F2F0 bg, #181818 text, 6px radius) instead of theme blue; drop the blue badge swap. - Homepage detail pass from the design frame: hero sub width 487px, World Tech Updates rows get hairline dividers and 40px padding, story cards 756px/24px gap with right-gutter bleed, card icons 32px, section spacing to 160/240/240. --- cspell.json | 1 + docs.json | 91 +++++++++++++++----- index.mdx | 20 ++--- tailwind.css | 234 +++++++++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 298 insertions(+), 48 deletions(-) diff --git a/cspell.json b/cspell.json index 247d844..61daf8c 100644 --- a/cspell.json +++ b/cspell.json @@ -159,6 +159,7 @@ "testnet", "testnets", "thirdweb", + "topbar", "touchpoints", "tunnelmole", "tute", diff --git a/docs.json b/docs.json index 8e3bfc9..a34a537 100644 --- a/docs.json +++ b/docs.json @@ -379,27 +379,46 @@ ] } ] + }, + { + "tab": "Resources", + "menu": [ + { + "item": "World Tech Blog", + "href": "https://world.org/blog?blog_type=world-tech" + }, + { + "item": "Open Source", + "href": "https://github.com/worldcoin" + }, + { + "item": "Whitepaper", + "href": "https://whitepaper.world.org" + }, + { + "item": "Ecosystem", + "href": "https://world.org/ecosystem" + } + ] + }, + { + "tab": "Support", + "menu": [ + { + "item": "Telegram Support Channel", + "href": "https://t.me/worlddevelopersupport" + }, + { + "item": "Email Support", + "href": "mailto:developers@toolsforhumanity.com" + }, + { + "item": "Mini Apps FAQ", + "href": "/mini-apps/more/faq" + } + ] } - ], - "global": { - "anchors": [ - { - "anchor": "Telegram Support Channel", - "href": "https://t.me/worlddevelopersupport", - "icon": "telegram" - }, - { - "anchor": "Email Support", - "href": "mailto:developers@toolsforhumanity.com", - "icon": "envelope" - }, - { - "anchor": "GitHub", - "href": "https://github.com/worldcoin", - "icon": "github" - } - ] - } + ] }, "logo": { "light": "/logo/world-developers.svg", @@ -423,7 +442,37 @@ "x": "https://x.com/worldnetwork", "github": "https://github.com/worldcoin", "discord": "https://world.org/discord" - } + }, + "links": [ + { + "items": [ + { + "label": "About World", + "href": "https://world.org" + }, + { + "label": "Developers", + "href": "https://world.org/developers" + }, + { + "label": "Whitepaper", + "href": "https://whitepaper.world.org" + }, + { + "label": "Open Source", + "href": "https://github.com/worldcoin" + }, + { + "label": "Ecosystem", + "href": "https://world.org/ecosystem" + }, + { + "label": "Careers", + "href": "https://world.org/careers" + } + ] + } + ] }, "contextual": { "options": [ diff --git a/index.mdx b/index.mdx index 3d7b152..7d2a0f0 100644 --- a/index.mdx +++ b/index.mdx @@ -26,7 +26,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
-
+

World Developer Docs

Integrate World ID and deploy on World Chain with official developer documentation. @@ -37,7 +37,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
- +
Integrate World ID
@@ -47,7 +47,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
- +
Create a Mini App
@@ -57,7 +57,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
- +
AgentKit
@@ -67,7 +67,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
- +
World Chain
@@ -77,7 +77,7 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx";
-
+
-
-
World Tech Updates
+ @@ -200,5 +200,5 @@ import { DeveloperStories } from "/snippets/developer-stories.jsx"; - [World Chain launches full block access lists](https://world.org/blog/engineering/world-chain-full-block-access-lists) — World Chain now streams full EIP-7928 block access lists in every flashblock, enabling parallel block verification, faster validation, and a path toward gigagas-per-second throughput without increasing validator hardware requirements. - [Remainder: World's GKR prover for ML and more](https://world.org/blog/engineering/world-zkgpu-for-ml-and-more) — Remainder (Reasonable Machine Learning Doubly-Efficient Prover) is Tools for Humanity's open-sourced in-house GKR + Hyrax proof system. It enables World's users to run ML models locally over private data and prove that they executed them correctly. - [Introducing World ID 4.0 - Request for Comments](https://world.org/blog/engineering/introducing-world-id-4.0) — World ID 4.0 introduces account abstraction with multi-key support, transforming a World ID from a single secret into an abstract record in a public registry, improving resilience, portability, recovery and privacy. - - More at [World Tech](https://world.org/blog/engineering). + - More at [World Tech](https://world.org/blog?blog_type=world-tech). diff --git a/tailwind.css b/tailwind.css index d3bd1ae..4d0a41f 100644 --- a/tailwind.css +++ b/tailwind.css @@ -21,11 +21,18 @@ } @layer components { - /* Tint the custom Proof of Human badge when its sidebar page is selected. */ - #sidebar-content - li[data-active] - img[src$="/images/docs/human-badge-gray.svg"] { - content: url("/images/docs/human-badge-blue.svg"); + /* Sidebar — selected item is a neutral pill per Docs 3.0 (bg gray/a9, ink text), + replacing the theme-default blue tint. The Proof of Human badge keeps its + gray artwork in both states for the same reason. */ + #sidebar-content li[data-active="true"] > a { + background-color: #F3F2F0 !important; + color: #181818 !important; + border-radius: 6px !important; + text-shadow: none !important; + } + .dark #sidebar-content li[data-active="true"] > a { + background-color: rgba(255, 255, 255, 0.08) !important; + color: #F3F2F0 !important; } /* Page content text links only (anchors without custom classes) */ @@ -150,15 +157,23 @@ } /* Landing page — developer stories carousel. - Cards are 4:3 (756x567 in the mock); two fill the content column with the - third peeking past the edge, matching the design's resting composition. - Kept as a CSS class on purpose: an arbitrary utility like - w-[min(760px,85%)] is silently dropped by Mintlify's Tailwind compiler - (values with a comma + %), which renders the cards at zero size. */ + Cards are 4:3 (756x567 in the mock); two fill the content column exactly + (24px gap) and the track bleeds into the right page gutter so the third + card peeks past the content edge, matching the design's resting + composition. Card width is derived from the bled track width (content + width + 96px gutter). Kept as a CSS class on purpose: an arbitrary + utility like w-[min(760px,85%)] is silently dropped by Mintlify's + Tailwind compiler (values with a comma + %), which renders the cards at + zero size. */ .landing-story-card { - width: calc(50% - 44px); + width: calc((100% - 96px) / 2 - 12px); aspect-ratio: 4 / 3; } + @media (min-width: 901px) { + .landing-stories-track { + margin-right: -96px; + } + } @media (max-width: 900px) { .landing-story-card { width: 85%; @@ -188,12 +203,20 @@ background-color: rgb(32, 33, 36); } - /* Landing page — World Tech updates list (no divider rules, per design) */ + /* Landing page — World Tech updates list; rows separated by hairline rules + (above each row and below the last) per the Docs 3.0 QA design. */ .landing-update { display: block; - padding: 32px 0; + padding: 40px 0; + border-top: 1px solid #E1DFDA; text-decoration: none; } + .landing-update:last-child { + border-bottom: 1px solid #E1DFDA; + } + .dark .landing-update { + border-color: rgba(255, 255, 255, 0.12); + } .landing-update-title { font-size: 24px; line-height: 1.3; @@ -210,7 +233,7 @@ } .landing-update-desc { margin: 12px 0 0; - max-width: 1100px; + max-width: 886px; font-size: 16px; line-height: 1.5; font-weight: 300; @@ -354,8 +377,8 @@ color: #F3F2F0; } .landing-hero-sub { - margin-top: 20px; - max-width: 640px; + margin-top: 24px; + max-width: 487px; font-size: 24px; line-height: 1.35; letter-spacing: -0.24px; @@ -380,7 +403,7 @@ display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - row-gap: 104px; + row-gap: 113px; } @media (max-width: 900px) { .landing-card-grid { @@ -413,4 +436,181 @@ } } + /* ------------------------------------------------------------------ */ + /* Header (Docs 3.0 QA) — align the navbar container with the page */ + /* content (1728px max, 96px gutters at desktop) and restyle tabs to */ + /* the design language: ink pill for the active tab, ink labels, no */ + /* underline indicator. */ + /* ------------------------------------------------------------------ */ + @media (min-width: 1024px) { + /* Both the navbar container and the docs-page body use Mintlify's + max-w-8xl (the body via a peer-variant class), so match them to the + 1728px design frame. */ + [class*="max-w-8xl"] { + max-width: 1728px !important; + } + /* Navbar top row (logo/search/CTA) and tab row: 48px → 96px gutters, + aligning the logo and tabs with the hero and content below. */ + #navbar .lg\:px-12, + #navbar .px-12 { + padding-left: 96px !important; + padding-right: 96px !important; + } + /* Docs pages: pull the sidebar/content wrapper out to the same frame + so the sidebar lines up under the logo (group headers and link text + both carry a 16px inset, so 80px padding lands them at 96px). + Scoped to non-custom pages; the homepage manages its own gutters. */ + body:has(#navbar.is-not-custom) div[class*="is-not-custom]:px-4"] { + padding-left: 80px !important; + padding-right: 80px !important; + } + } + + /* Tab bar — pill tabs per Docs 3.0 header design */ + #navbar .nav-tabs { + align-items: center; + gap: 4px; + } + #navbar .nav-tabs-item { + height: 32px !important; + padding: 6px 14px; + border-radius: 42px; + color: #181818 !important; + transition: background-color 0.15s ease; + } + #navbar .nav-tabs-item:hover { + color: #181818 !important; + background-color: #F3F2F0; + } + #navbar .nav-tabs-item[data-active="true"] { + background-color: #181818; + color: #F9F9F8 !important; + text-shadow: none; + } + #navbar .nav-tabs-item[data-active="true"]:hover { + color: #F9F9F8 !important; + background-color: #181818; + } + /* The theme's active-tab underline indicator */ + #navbar .nav-tabs-item > div.absolute { + display: none; + } + /* Hairline divider between the page tabs and the Resources/Support + menus (the menu tabs render as - - -
-
-
- */} + {/* Newsletter — submits to world.org's public subscribe endpoint + (worldcoin/company-website#4481). If that endpoint is not live yet, + the form shows an explicit error instead of failing silently. */} + {/* Footer links — single row per Docs 3.0: trademark left, links right */}
diff --git a/snippets/newsletter-form.jsx b/snippets/newsletter-form.jsx new file mode 100644 index 0000000..7c8f302 --- /dev/null +++ b/snippets/newsletter-form.jsx @@ -0,0 +1,90 @@ +/** + * "Subscribe to World Developers Newsletter" block for the landing footer, + * per the Docs 3.0 design. Submits to world.org's public subscribe endpoint + * (worldcoin/company-website#4481). Single attempt with a bounded timeout and + * explicit success/error states — no silent failures, no retries (subscribing + * twice on a retry would double-fire the marketing pipeline). + * Mintlify-safe: single exported component, no top-level helpers, no refs. + */ +import { useState } from "react"; + +export const NewsletterForm = ({ endpoint = "https://world.org/api/subscribe" }) => { + const [status, setStatus] = useState("idle"); // idle | loading | ok | error + + const onSubmit = async (event) => { + event.preventDefault(); + if (status === "loading") return; + const input = event.currentTarget.querySelector("input[type=email]"); + const email = (input && input.value ? input.value : "").trim(); + if (!email || !input.checkValidity()) { + setStatus("error"); + return; + } + setStatus("loading"); + const abort = new AbortController(); + const timer = setTimeout(() => abort.abort(), 10000); + try { + const res = await fetch(endpoint, { + method: "POST", + headers: { "content-type": "application/json" }, + body: JSON.stringify({ email }), + signal: abort.signal, + }); + setStatus(res.ok ? "ok" : "error"); + } catch (_) { + setStatus("error"); + } finally { + clearTimeout(timer); + } + }; + + return ( +
+
+
+ Subscribe to World Developers Newsletter +
+
+ {status === "ok" ? ( +
+ Thanks — you’re subscribed. +
+ ) : ( +
+ + +
+ )} + {status === "error" ? ( +
+ Something went wrong — check the address and try again. +
+ ) : null} + {status !== "ok" ? ( +
+ By entering your email address and clicking “Subscribe,” you consent to receive newsletters, marketing communications and ecosystem updates. For details on how we process your personal data, including your rights and how to exercise them, please review our Privacy Notice. +
+ ) : null} +
+
+
+ ); +}; + +export default NewsletterForm; diff --git a/tailwind.css b/tailwind.css index 9ff82c2..568c066 100644 --- a/tailwind.css +++ b/tailwind.css @@ -309,6 +309,13 @@ .dark .landing-email-input::placeholder { color: #75726F; } + @media (max-width: 900px) { + /* Newsletter stacks on small screens (the grid is inline-styled). */ + .landing-newsletter > div { + grid-template-columns: 1fr !important; + gap: 32px !important; + } + } .landing-privacy-link { color: #2D2C2C !important; } From 6ef28b4729ed50e89611f145c3325bbd3427c199 Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Thu, 10 Sep 2026 11:59:02 -0700 Subject: [PATCH 05/12] docs(nav): logo at the design scale in the pill header (166px block) --- tailwind.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/tailwind.css b/tailwind.css index 568c066..92d4c5d 100644 --- a/tailwind.css +++ b/tailwind.css @@ -623,9 +623,10 @@ } } @media (min-width: 1440px) { - /* Logo at the design scale (glyph ~24px) */ + /* Logo at the design scale: the mock's logo block is 166px wide; + our combined SVG hits that width at 17px tall. */ #navbar div.lg\:px-12 .nav-logo { - height: 24px !important; + height: 17px !important; } /* Search pill at the design metrics: 34px tall, 6/14 padding */ #navbar #search-bar-entry { From 111549a5723f9dda712dd3b7a859e8771ad62dc5 Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Thu, 10 Sep 2026 12:02:06 -0700 Subject: [PATCH 06/12] docs(brand): match the logo wordmark gap to the design The gap between the world mark and 'Developers' in the combined logo SVGs rendered ~47% wider than the mock (12.6px vs 8.6px at the header scale). Shift the wordmark 6.1 viewBox units left in both variants (canvas 233 -> 226.9) so the gap ratio lands on the design's 5.16%, and keep the pill-header logo block at the mock's 166px width. --- logo/world-developers-white.svg | 4 +++- logo/world-developers.svg | 4 +++- tailwind.css | 4 ++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/logo/world-developers-white.svg b/logo/world-developers-white.svg index 059655e..ab6231b 100644 --- a/logo/world-developers-white.svg +++ b/logo/world-developers-white.svg @@ -1,4 +1,4 @@ - + @@ -7,6 +7,7 @@ + @@ -19,4 +20,5 @@ + diff --git a/logo/world-developers.svg b/logo/world-developers.svg index e8b36be..443a9dd 100644 --- a/logo/world-developers.svg +++ b/logo/world-developers.svg @@ -1,4 +1,4 @@ - + @@ -7,6 +7,7 @@ + @@ -19,4 +20,5 @@ + diff --git a/tailwind.css b/tailwind.css index 92d4c5d..2a42263 100644 --- a/tailwind.css +++ b/tailwind.css @@ -624,9 +624,9 @@ } @media (min-width: 1440px) { /* Logo at the design scale: the mock's logo block is 166px wide; - our combined SVG hits that width at 17px tall. */ + our combined SVG hits that width at 17.5px tall. */ #navbar div.lg\:px-12 .nav-logo { - height: 17px !important; + height: 17.5px !important; } /* Search pill at the design metrics: 34px tall, 6/14 padding */ #navbar #search-bar-entry { From dfe516de12d83d602d9dc4856a0968f32fc12762 Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Thu, 10 Sep 2026 12:09:26 -0700 Subject: [PATCH 07/12] =?UTF-8?q?docs(nav):=20pill=20header=20right=20side?= =?UTF-8?q?=20per=20the=20mock=20=E2=80=94=20Search/Ask=20only?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hide the Developer Portal CTA and the theme toggle at pill widths (>=1440px): the design's header carries only the Search and Ask pills. Developer Portal joins the Resources menu so it stays one click away; the theme still follows the system preference, and both elements remain in the sub-1440 layouts and mobile nav. --- docs.json | 4 ++++ tailwind.css | 19 ++++++++----------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/docs.json b/docs.json index a34a537..bc71589 100644 --- a/docs.json +++ b/docs.json @@ -383,6 +383,10 @@ { "tab": "Resources", "menu": [ + { + "item": "Developer Portal", + "href": "https://developer.worldcoin.org" + }, { "item": "World Tech Blog", "href": "https://world.org/blog?blog_type=world-tech" diff --git a/tailwind.css b/tailwind.css index 2a42263..0d3019d 100644 --- a/tailwind.css +++ b/tailwind.css @@ -616,9 +616,14 @@ #navbar #search-bar-entry span.text-xs { display: none; } - /* The design's header carries no Explore Integrations link (Ecosystem - lives in the Resources menu and the footer). */ - #navbar li.navbar-link { + /* The design's header right side is just the Search / Ask pills: + no Explore Integrations link (Ecosystem lives in the Resources + menu and the footer), no Developer Portal CTA (moved into the + Resources menu at these widths), no theme toggle (the theme still + follows the system preference; both remain below 1440px). */ + #navbar li.navbar-link, + #navbar #topbar-cta-button, + #navbar #theme-preference-menu-trigger { display: none !important; } } @@ -634,14 +639,6 @@ padding: 6px 14px !important; } } - /* Between 1440-1600px the pill is narrower than the design frame, so - shed the secondary utilities (theme toggle, contextual toggle) to - keep logo/tabs/search/CTA from colliding; they return at 1600px+. */ - @media (min-width: 1440px) and (max-width: 1599px) { - #navbar #theme-preference-menu-trigger { - display: none !important; - } - } @media (min-width: 1600px) { /* At the design frame, side margins widen to 63px so the logo sits on the shared 96px gutter. */ From f7ed16c8a70e0212fd0bf8561df866f9e0bb2c39 Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Thu, 10 Sep 2026 12:12:46 -0700 Subject: [PATCH 08/12] docs(nav): style the hosted Ask Assistant entry as the design's Ask AI pill --- tailwind.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/tailwind.css b/tailwind.css index 0d3019d..f8a788a 100644 --- a/tailwind.css +++ b/tailwind.css @@ -616,6 +616,25 @@ #navbar #search-bar-entry span.text-xs { display: none; } + /* Ask Assistant (hosted-only) — the design's "Ask AI" pill. */ + #navbar #assistant-entry { + height: 34px !important; + padding: 6px 14px !important; + border-radius: 20px !important; + background-color: #F9F9F8 !important; + border: 1px solid #E1DFDA !important; + box-shadow: none !important; + color: #181818 !important; + } + #navbar #assistant-entry kbd, + #navbar #assistant-entry .text-xs { + display: none !important; + } + .dark #navbar #assistant-entry { + background-color: rgb(24, 25, 27) !important; + border-color: rgba(255, 255, 255, 0.15) !important; + color: #F3F2F0 !important; + } /* The design's header right side is just the Search / Ask pills: no Explore Integrations link (Ecosystem lives in the Resources menu and the footer), no Developer Portal CTA (moved into the From 3aa8a4c9424e0ff5d42628af995b3862d76aec5e Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Thu, 10 Sep 2026 12:17:44 -0700 Subject: [PATCH 09/12] =?UTF-8?q?docs(nav):=20rebuild=20the=20pill=20heade?= =?UTF-8?q?r=20as=20one=20flex=20line=20=E2=80=94=20no=20overlap=20possibl?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The hosted header carries a wide Search + Ask Assistant cluster that the absolutely-centered tab row painted under at sub-1728 widths (tabs were hidden behind the pills). Flatten the theme's two-row scaffolding with display:contents so logo, tabs, and the cluster are items on ONE flex line: auto margins center the tabs in the free space and the layout can never overlap regardless of cluster width. Also style the hosted Ask Assistant entry as the design's Ask pill and compact the search entry by rule (the prod cluster lacks the justify-center class the previous selector keyed on). --- tailwind.css | 85 ++++++++++++++++++++++++++-------------------------- 1 file changed, 43 insertions(+), 42 deletions(-) diff --git a/tailwind.css b/tailwind.css index f8a788a..bccb392 100644 --- a/tailwind.css +++ b/tailwind.css @@ -555,19 +555,28 @@ /* ------------------------------------------------------------------ */ /* Floating pill header (Docs 3.0, desktop ≥1440px) — collapse the */ - /* theme's two-row header into the design's single 84px rounded bar: */ - /* logo left, tabs centered, search/CTA right, floating on the page */ - /* background. Below 1440px the two-row layout above remains. */ + /* theme's two-row header into the design's single 84px rounded bar. */ + /* The theme's row scaffolding is flattened with display:contents so */ + /* the logo, the tab row, and the search/assistant cluster lay out on */ + /* ONE flex line — no absolute positioning, so the variable-width */ + /* hosted cluster (Search + Ask Assistant) can never overlap the tabs. */ + /* Below 1440px the two-row layout above remains. */ /* ------------------------------------------------------------------ */ @media (min-width: 1440px) { /* No full-width backdrop: the pill floats on the page background. */ #navbar #navbar-transition { display: none; } + /* The pill is the flex row. */ #navbar > div.max-w-8xl { + display: flex; + align-items: center; + column-gap: 16px; width: calc(100% - 48px); max-width: 1602px !important; + height: 84px; margin: 24px auto 0; + padding: 0 25px 0 33px; background-color: #FFFFFF; border: 1px solid #E1DFDA; border-radius: 18px; @@ -577,41 +586,44 @@ background-color: rgb(24, 25, 27); border-color: rgba(255, 255, 255, 0.12); } - /* Top row becomes the single 84px pill row (33px inner gutter puts - the logo on the 96px page gutter at the 1728px frame). */ - #navbar div.lg\:px-12 { - height: 84px !important; - padding-left: 33px !important; - padding-right: 25px !important; - margin: 0 !important; - } + /* Flatten the two-row scaffolding into the pill's flex line. */ + #navbar > div.max-w-8xl > div, + #navbar > div.max-w-8xl > div > div.relative, + #navbar div.lg\:px-12, #navbar div.lg\:px-12 > div { - border-bottom: none !important; - } - /* Tab row: lift it into the pill row, centered. */ - #navbar .max-w-8xl div.px-12 { - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); + display: contents !important; + } + /* Logo | tabs | search cluster; the two auto margins center the + tabs in the free space between logo and cluster. */ + #navbar div.lg\:px-12 > div > div.flex-1:first-child { + order: 1; + flex: 0 0 auto !important; + } + #navbar .max-w-8xl > div > div.px-12 { + order: 2; + position: static; width: max-content; - height: 84px !important; + height: auto !important; padding: 0 !important; - z-index: 10; - } - #navbar .nav-tabs-item { - white-space: nowrap; + margin-left: auto; } - /* Search (and the assistant entry beside it) become compact pills on - the right instead of a stretched center bar. */ - #navbar div.z-20.justify-center { + #navbar div.lg\:px-12 div.z-20 { + order: 3; flex: 0 0 auto !important; + margin-left: auto; } - #navbar div.lg\:px-12 .justify-end { - flex: 0 0 auto !important; + /* Logo at the design scale: the mock's logo block is 166px wide; + our combined SVG hits that width at 17.5px tall. */ + #navbar div.lg\:px-12 .nav-logo { + height: 17.5px !important; } + /* Search pill at the design metrics: 34px tall, 6/14 padding. */ #navbar #search-bar-entry { width: auto !important; + height: 34px !important; + padding: 6px 14px !important; + border-radius: 20px; + box-shadow: none; } #navbar #search-bar-entry span.text-xs { display: none; @@ -642,22 +654,11 @@ follows the system preference; both remain below 1440px). */ #navbar li.navbar-link, #navbar #topbar-cta-button, - #navbar #theme-preference-menu-trigger { + #navbar #theme-preference-menu-trigger, + #navbar div.lg\:px-12 > div > div.justify-end { display: none !important; } } - @media (min-width: 1440px) { - /* Logo at the design scale: the mock's logo block is 166px wide; - our combined SVG hits that width at 17.5px tall. */ - #navbar div.lg\:px-12 .nav-logo { - height: 17.5px !important; - } - /* Search pill at the design metrics: 34px tall, 6/14 padding */ - #navbar #search-bar-entry { - height: 34px !important; - padding: 6px 14px !important; - } - } @media (min-width: 1600px) { /* At the design frame, side margins widen to 63px so the logo sits on the shared 96px gutter. */ From 45c03347e93667b6f8a4d24195150f7be4bdd176 Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Thu, 10 Sep 2026 14:04:06 -0700 Subject: [PATCH 10/12] docs(nav): pill margins scale with the viewport instead of stepping MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The pill's side margins jumped from 63px to 24px below 1600px, so the bar visibly widened as the window shrank. Use the design frame's ratio (63/1728 per side, 7.3vw total) continuously, capped at the 1602px design width — same proportions at every desktop size, and the logo stays on the 96px gutter at the 1728px frame. --- tailwind.css | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/tailwind.css b/tailwind.css index bccb392..9ff28bd 100644 --- a/tailwind.css +++ b/tailwind.css @@ -572,7 +572,10 @@ display: flex; align-items: center; column-gap: 16px; - width: calc(100% - 48px); + /* Side margins scale with the viewport (the design frame's 63/1728 + ratio) instead of stepping at a breakpoint, so the pill keeps the + same proportions as the window shrinks. */ + width: calc(100% - 7.3vw); max-width: 1602px !important; height: 84px; margin: 24px auto 0; @@ -659,13 +662,6 @@ display: none !important; } } - @media (min-width: 1600px) { - /* At the design frame, side margins widen to 63px so the logo sits - on the shared 96px gutter. */ - #navbar > div.max-w-8xl { - width: calc(100% - 126px); - } - } /* ------------------------------------------------------------------ */ /* Docs-page footer (Docs 3.0) — restyle Mintlify's advanced footer */ From 2bf1355a9fffbd37a18cb6bd2b5754abadb61180 Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Thu, 10 Sep 2026 14:20:47 -0700 Subject: [PATCH 11/12] chore: trigger preview rebuild for #178 From e86538d0feec57ae36b4d36866d8f8a5e5c567e5 Mon Sep 17 00:00:00 2001 From: Soam Desai Date: Thu, 10 Sep 2026 14:48:57 -0700 Subject: [PATCH 12/12] docs(nav): pill header responds to its own width via container query The hosted assistant panel narrows the page without changing the window width, so the viewport media query kept the single-row pill active in a ~1340px slot and the tab labels wrapped inside their pills. Make #navbar an inline-size container and gate the pill on a container query instead: when anything narrows the header below 1440px the two-row layout returns. Margins now scale with the header's own width (cqw), and the tab row is belt-and-braces nowrap/no-shrink inside the pill. --- tailwind.css | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/tailwind.css b/tailwind.css index 9ff28bd..60af92e 100644 --- a/tailwind.css +++ b/tailwind.css @@ -560,9 +560,15 @@ /* the logo, the tab row, and the search/assistant cluster lay out on */ /* ONE flex line — no absolute positioning, so the variable-width */ /* hosted cluster (Search + Ask Assistant) can never overlap the tabs. */ - /* Below 1440px the two-row layout above remains. */ + /* Below 1440px — including when the hosted assistant panel narrows */ + /* the page without changing the window width — the two-row layout */ + /* above remains: the pill activates on the header's own width via a */ + /* container query, not a viewport media query. */ /* ------------------------------------------------------------------ */ - @media (min-width: 1440px) { + #navbar { + container-type: inline-size; + } + @container (min-width: 1440px) { /* No full-width backdrop: the pill floats on the page background. */ #navbar #navbar-transition { display: none; @@ -572,10 +578,11 @@ display: flex; align-items: center; column-gap: 16px; - /* Side margins scale with the viewport (the design frame's 63/1728 - ratio) instead of stepping at a breakpoint, so the pill keeps the - same proportions as the window shrinks. */ - width: calc(100% - 7.3vw); + /* Side margins scale with the header's own width (the design + frame's 63/1728 ratio), so the pill keeps the same proportions + as the window — or the page area beside the assistant panel — + shrinks. */ + width: calc(100% - 7.3cqw); max-width: 1602px !important; height: 84px; margin: 24px auto 0; @@ -602,10 +609,14 @@ order: 1; flex: 0 0 auto !important; } + #navbar .nav-tabs-item { + white-space: nowrap; + } #navbar .max-w-8xl > div > div.px-12 { order: 2; position: static; width: max-content; + flex-shrink: 0; height: auto !important; padding: 0 !important; margin-left: auto;