From 4d7fe580ab19c0ca31d87d6558fc374bfebbeebe Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 31 Jul 2026 12:37:34 +0200 Subject: [PATCH 1/3] fix: replace Mintlify-unsupported Tailwind styles with custom CSS Mintlify's production build only supports Tailwind v3 classes without arbitrary values, and its Tailwind v4 @property registrations break v3 gradient utilities entirely (stops fall back to transparent). This left the sign-up CTA invisible in production while looking fine in mint dev. - sign-up-cta: move all styling to style.css (.sign-up-cta classes) - cli-tip: replace text-[#0075FF] with a.cli-tip-link in style.css - setup-flow: move dark:bg-white/[0.02] and min-h-[64px] into the component's own style block --- snippets/cli-tip.jsx | 2 +- snippets/setup-flow.jsx | 8 +++--- snippets/sign-up-cta.mdx | 10 +++---- style.css | 56 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 67 insertions(+), 9 deletions(-) diff --git a/snippets/cli-tip.jsx b/snippets/cli-tip.jsx index 4d20467d..b21852f5 100644 --- a/snippets/cli-tip.jsx +++ b/snippets/cli-tip.jsx @@ -17,7 +17,7 @@ export const CLITip = ({ children }) => { {children} Get started with the Checkly CLI → diff --git a/snippets/setup-flow.jsx b/snippets/setup-flow.jsx index e262df68..43ec5b24 100644 --- a/snippets/setup-flow.jsx +++ b/snippets/setup-flow.jsx @@ -202,7 +202,9 @@ export const SetupFlow = () => { .cklyflow-list-line { flex:1 0 auto; width:2px; min-height:.85rem; margin:.4rem 0; border-radius:9999px; } .cklyflow-list-text { padding-bottom:1.4rem; } .cklyflow-list-row:last-child .cklyflow-list-text { padding-bottom:0; } - .cklyflow-detail-box { display:none; } + .cklyflow-detail-box { display:none; min-height:64px; } + .cklyflow-card { background:rgba(249,250,251,0.6); } + .dark .cklyflow-card { background:rgba(255,255,255,0.02); } @media (min-width:640px) { .cklyflow-list { display:none; } .cklyflow-detail-box { display:block; } @@ -260,7 +262,7 @@ export const SetupFlow = () => { } `} -
+
{

diff --git a/snippets/sign-up-cta.mdx b/snippets/sign-up-cta.mdx index 8eb487f0..fc8311b1 100644 --- a/snippets/sign-up-cta.mdx +++ b/snippets/sign-up-cta.mdx @@ -1,8 +1,8 @@ -

-
- Bugs don't stop at CI/CD. Why would Playwright? Playwright logo +
+
+ Bugs don't stop at CI/CD. Why would Playwright? Playwright logo
- diff --git a/style.css b/style.css index 291a8fdf..3a87d659 100644 --- a/style.css +++ b/style.css @@ -37,6 +37,62 @@ tr { color: #e6e6e6; } +/* Sign-up CTA card (snippets/sign-up-cta.mdx). Styled here instead of with + Tailwind utility classes because Mintlify's production build only ships + utilities used by its own UI — arbitrary values like from-[#0c449a] work + in `mint dev` but are missing in the compiled production CSS. */ +.sign-up-cta { + position: relative; + border-radius: 0.5rem; + padding: 1.5rem; + margin: 1rem 0; + background: linear-gradient(to bottom, #0c449a, #062047); + color: #fff; +} + +.sign-up-cta-title { + font-size: 1.25rem; + line-height: 1.75rem; + font-weight: 700; + text-wrap: balance; + margin-bottom: 0.25rem; +} + +.sign-up-cta-title img { + display: inline-block; + width: 2rem; + height: 2rem; + vertical-align: middle; + margin-top: -0.25rem; +} + +.sign-up-cta-body { + color: #e2e8f0; +} + +.sign-up-cta a { + color: inherit; +} + +/* Stretch the link's click area over the whole card. */ +.sign-up-cta a::before { + content: ""; + position: absolute; + inset: 0; +} + +/* CLI tip CTA link (snippets/cli-tip.jsx) — brand blue that has no + standard Tailwind equivalent; arbitrary values like text-[#0075FF] + are unsupported by Mintlify. Element selector included so this wins + over Mintlify's own .link class at equal cascade position. */ +a.cli-tip-link { + color: #0075ff; +} + +.dark a.cli-tip-link { + color: #60a5fa; +} + /* Expand small header icon buttons to a 44x44 minimum touch target (WCAG 2.5.5) via an invisible hit-area overlay, so the visual header layout is unchanged and the theme's responsive show/hide still applies. */ From a11c676ed61487f832f01b1178ed05d9726dc73e Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 31 Jul 2026 12:48:09 +0200 Subject: [PATCH 2/3] revert: keep cli-tip's existing Tailwind classes The arbitrary text-[#0075FF] value renders fine in production today, so leave it untouched and scope this PR to the actually broken styles. --- snippets/cli-tip.jsx | 2 +- style.css | 12 ------------ 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/snippets/cli-tip.jsx b/snippets/cli-tip.jsx index b21852f5..4d20467d 100644 --- a/snippets/cli-tip.jsx +++ b/snippets/cli-tip.jsx @@ -17,7 +17,7 @@ export const CLITip = ({ children }) => { {children}
Get started with the Checkly CLI → diff --git a/style.css b/style.css index 3a87d659..cb002b20 100644 --- a/style.css +++ b/style.css @@ -81,18 +81,6 @@ tr { inset: 0; } -/* CLI tip CTA link (snippets/cli-tip.jsx) — brand blue that has no - standard Tailwind equivalent; arbitrary values like text-[#0075FF] - are unsupported by Mintlify. Element selector included so this wins - over Mintlify's own .link class at equal cascade position. */ -a.cli-tip-link { - color: #0075ff; -} - -.dark a.cli-tip-link { - color: #60a5fa; -} - /* Expand small header icon buttons to a 44x44 minimum touch target (WCAG 2.5.5) via an invisible hit-area overlay, so the visual header layout is unchanged and the theme's responsive show/hide still applies. */ From 5aa56e0cce2c2add29ef08fbc66148e7ffccadab Mon Sep 17 00:00:00 2001 From: stefan judis Date: Fri, 31 Jul 2026 12:49:14 +0200 Subject: [PATCH 3/3] revert: keep setup-flow's existing Tailwind classes Its arbitrary values render fine in production today; scope this PR to the actually broken sign-up CTA. --- snippets/setup-flow.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/snippets/setup-flow.jsx b/snippets/setup-flow.jsx index 43ec5b24..e262df68 100644 --- a/snippets/setup-flow.jsx +++ b/snippets/setup-flow.jsx @@ -202,9 +202,7 @@ export const SetupFlow = () => { .cklyflow-list-line { flex:1 0 auto; width:2px; min-height:.85rem; margin:.4rem 0; border-radius:9999px; } .cklyflow-list-text { padding-bottom:1.4rem; } .cklyflow-list-row:last-child .cklyflow-list-text { padding-bottom:0; } - .cklyflow-detail-box { display:none; min-height:64px; } - .cklyflow-card { background:rgba(249,250,251,0.6); } - .dark .cklyflow-card { background:rgba(255,255,255,0.02); } + .cklyflow-detail-box { display:none; } @media (min-width:640px) { .cklyflow-list { display:none; } .cklyflow-detail-box { display:block; } @@ -262,7 +260,7 @@ export const SetupFlow = () => { } `} -
+
{