/* Global - Hardware Design System ── Spacing scale ──────────────────────────────────────────────────────── All padding, margin, and gap values across the site follow a 4px-base scale: 2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 64 · 96 (px) In rem (where used by older Hardware Design components): 0.125 · 0.25 · 0.5 · 0.75 · 1 · 1.25 · 1.5 · 2 · 3 · 4 · 6 (rem) Common applications: • Chip padding (badges, pills, status): 4px 8px (0.25rem 0.5rem) • Inline code chip: 2px 6px (0.125rem 0.375rem) • Card outer padding: 24px • Card internal section gap: 16px • Card divider-to-content space: 16px • Link/CTA row padding-y: 12px • Inter-row gap inside link lists: 4px • Section-to-section gap: 72px (root) / 8px (first in CH) When adding new spacing, snap to the scale. Off-scale values like 5, 10, 14, 18 px or 0.15rem are inconsistencies — convert to the nearest valid value. ───────────────────────────────────────────────────────────────────────── */ :root { /* Mintlify primary color override (RGB space notation) */ --primary: 146 17 17; --primary-light: 185 28 28; --primary-dark: 127 29 29; /* Brand red pair: --accent is the canonical brand surface (button bg, hero accents, inline link); --accent-strong is the AAA-safe text variant used when text sits over --accent-soft fills (tabs active, TOC active, chip text). #7d0e0e gives 8.6:1 on the --accent-soft + surface-2 composite vs --accent's 6.9:1 (below AAA). */ --accent: #921111; --accent-strong: #7d0e0e; --accent-soft: rgba(146, 17, 17, 0.12); /* Semantic status colors. Reuse the method-pill green family so success/granted/positive states share visual language with GET endpoints. WCAG AAA on light warm-paper surfaces: #055527 → 8.56:1 on surface-1, 7.51:1 on surface-2, 7.05:1 on surface-3. */ --success: #055527; --success-strong: #14532d; --success-soft: rgba(21, 128, 61, 0.12); --tab-background: rgb(240, 222, 222); --primary-bg-color-brighter-light: var(--accent-soft); --primary-bg-color-light: var(--accent); /* Light theme surface ladder — warm-paper family, monochromatic-warm (mirrors the dark theme's warm-charcoal layering). The previous pure-white system (#ffffff / #f7f8fa / #eef1f4) sat on a cool-neutral hue zone that fought the brand red. Three warm-paper steps extend across the entire site (not just landings) so every page reads as one continuous material. Step calibration: widened from a 6%/16% ladder to ~12%/27% so the page reads with the same elevation depth dark mode gets for free (Weber's law makes small luminance differences in dark space read as bigger perceptual steps; light mode needs the explicit jumps). Hue progression is intentional too — surface-1 is warm-neutral cream, surface-2 leans cream, surface-3 lands at bone/vellum. Together the luminance + chromatic steps give cards real lift against the page without leaning on shadows. Luminances: 0.948 / 0.827 / 0.773. AAA verified for text-strong, text-muted, accent (#921111), and success (#055527) against all three; border-subtle clears 3:1 UI on every step. */ --surface-1: #fbf9f7; --surface-2: #f0eadd; --surface-3: #ebe2cd; /* Chrome ladder — warm-neutral, header/sidebar/footer hue zone. chrome-1 is the chrome composite (rgba(3,7,18,0.03) over surface-1). chrome-2/3 step down ~4% L while staying inside that same neutral paper family (NOT the cream surface-2/3 ladder). Used by tables, inline code chips, expandable param boxes, and any other content- column "chrome" surface that should read as the same material as the header/sidebar/footer rather than a cream layer floating on top of the page. AAA verified: text-strong ≥14:1 and text-muted ≥8:1 on every step. */ --chrome-1: #f3f2f0; --chrome-2: #ebe9e5; --chrome-3: #e3e0db; /* `--border-subtle` previously sat at #e5e7eb (~1.25:1 against white), failing WCAG 2.2 AA 3:1 for non-text UI components. Used site-wide on tabs, tables, cards, sidebar, ticket rows, callouts, and form inputs — the whole site read as edge-less. After the surface ladder widening, #82766c (warm taupe) clears 3:1 on every step: 4.20:1 on surface-1, 3.69:1 on surface-2, 3.46:1 on surface-3 — AA across the ladder while staying inside the warm-paper hue family. */ --border-subtle: #82766c; /* Pushed from slate-950 #0f172a to a near-black #0a0b10 — increases body↔surface contrast by ~10% (16.97:1 → 18.7:1 on surface-1) which reads across the whole page as more weight/depth even without changing any surface or layout primitive. */ --text-strong: #0a0b10; /* #334155 (slate-700) clears WCAG AAA on all three warm-paper surfaces: 9.83:1 on surface-1, 8.64:1 on surface-2, 8.11:1 on surface-3. */ --text-muted: #334155; /* Design tokens */ --ui-border-width: 1px; --radius-control: 6px; --radius-chip: 6px; --radius-kbd: 5px; --radius-surface: 8px; --radius-lg: 8px; --radius-pill: 99px; /* Motion scale */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 280ms; /* Elevation scale (light). Dark variants live in the .dark block. */ --shadow-sm: 0 1px 0 rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); --shadow-overlay: 0 4px 16px rgba(15, 23, 42, 0.16); --dark-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.32); --tab-border: var(--border-subtle); --tab-bg: var(--surface-1); --tab-active-bg: var(--surface-2); --tab-active-text: var(--text-strong); --tab-text: var(--text-muted); /* Table fills routed through the chrome ladder so the head, alt rows, and hover all live in the same neutral-paper hue zone as the header/sidebar/footer — instead of jumping into the warmer cream surface-2/3 family. Head sits one step deeper than alt so it still reads as distinct, and hover lands one step deeper again so the affordance pops without going cream-yellow. */ --table-border: var(--border-subtle); --table-head-bg: var(--chrome-2); --table-row-alt: var(--chrome-1); --table-row-hover: var(--chrome-3); } :root.dark, html.dark, body.dark, html[data-theme="dark"], body[data-theme="dark"] { /* Mintlify primary color override for dark mode (RGB space notation). Aligned with --accent so Mintlify's built-in link/button affordances inherit the same AAA-safe red as our editorial primitives. Previous values (#d4625f / #e38b88 / #d05c59) failed AAA (3.6:1 – 6.3:1). Contrasts on #18171a / #1f1d22 / #27242b: --primary #f29a9a — 8.6 / 7.9 / 7.2 (AAA across all surfaces) --primary-light #f7b3b3 — 10.0 / 9.1 / 8.3 (AAA) --primary-dark #ee8e8e — 7.1 / 6.5 / 6.0 (AAA on surf-1; AA on 2/3 — acceptable for the "pressed" state) */ --primary: 242 154 154; --primary-light: 247 179 179; --primary-dark: 238 142 142; /* Accent - warm salmon for dark mode. WCAG AAA on all surface tiers: --accent #f29a9a: 8.39:1 (surf-1) / 7.85:1 (surf-2) / 7.18:1 (surf-3) --accent-strong #f7b3b3: 10.0:1 / 9.1:1 / 8.3:1. The brighter strong value lifts text-on-accent-soft to AAA — --accent over --accent-soft composite sits at ~6.2:1, --accent-strong clears 7:1. Equals --primary-light by design (same brightest-salmon role). */ --accent: #f29a9a; --accent-strong: #f7b3b3; /* Soft bg overlay updated from rgba(224,96,96,...) to the AAA-safe base so subtle fills stay tonally consistent with the new --accent. */ --accent-soft: rgba(242, 154, 154, 0.16); /* Success colors brightened for dark-mode contrast. WCAG AA on #18171a bg: #4ade80 → 9.78:1. */ --success: #4ade80; --success-strong: #86efac; --success-soft: rgba(74, 222, 128, 0.16); --primary-bg-color-brighter-light: var(--accent-soft); --primary-bg-color-light: var(--accent); /* Surfaces - neutral-warm darks */ --surface-1: #18171a; --surface-2: #1f1d22; --surface-3: #27242b; /* Dark-mode chrome ladder aliases the warm-charcoal surfaces, which already sit in the header/sidebar/footer hue zone. Light mode needed a separate ladder because surface-2/3 there leans cream; in dark mode the surface stack IS the chrome family. */ --chrome-1: var(--surface-2); --chrome-2: var(--surface-3); --chrome-3: #2f2c33; /* Borders — previous #302d35 sat at ~1.3:1 against #18171a (failing WCAG 3:1 for non-text UI). #8a868e gets us ~3.25:1, matching the landing page's --fx-border value for visual consistency. */ --border-subtle: #8a868e; /* Same primary button tokens in dark mode — the deep red works in both contexts because the surrounding bg differs but white text always gets 9.7:1. Don't redefine (inherit from :root). */ /* Text */ --text-strong: #eeecea; --text-muted: #b5b0b8; /* Elevation scale (dark) */ --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.32); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.48); --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.40); /* Tabs */ --tab-background: var(--surface-2); --tab-border: var(--border-subtle); --tab-bg: var(--surface-1); --tab-active-bg: var(--surface-3); --tab-active-text: var(--text-strong); --tab-text: var(--text-muted); /* Tables - visible row alternation */ --table-border: var(--border-subtle); --table-head-bg: var(--chrome-2); --table-row-alt: var(--chrome-1); --table-row-hover: var(--chrome-3); } /* ── Apply page-bg token to Mintlify layout elements ── Mintlify's default body bg is pure white, which fights our warm-paper surface-1 (#fbf9f7) — without these rules, the cream only shows inside .fx-landing's max-width container, leaving white gutters on every doc page. Setting body + main + html to surface-1 in both modes makes the warm-paper material continuous across the entire site. */ body, main, :root { background-color: var(--surface-1); color: var(--text-strong); } .dark body, .dark main, :root.dark { background-color: var(--surface-1); color: var(--text-strong); } /* Sidebar mirrors the header/footer chrome treatment: same 3% translucent overlay (black in light, white in dark) over the body bg. Header, sidebar, and footer all read as one "chrome" surface family, slightly distinct from the main content area without leaning on shadows or borders. */ #sidebar-content { background-color: rgba(3, 7, 18, 0.03); } .dark #sidebar-content { background-color: rgba(255, 255, 255, 0.03); } /* Topnav bg — Mintlify's "palm" theme paints the topbar via an absolute overlay sibling of #navbar:

, so the matching selectors target both the

and the shapes to cover any future DOM rearrangement. Chrome-3 sits one step darker than the sidebar's chrome bg — enough contrast to read as "selected" without compositing into the warm-beige tan zone that a red overlay produced over the chrome bg. Brand affordance still comes through via the row's red text + bold weight; the bg stays neutral. Dark mode keeps the global accent-soft because the dark salmon over the cool-charcoal sidebar doesn't compound to beige. */ #sidebar-group li[data-active="true"] > a, #sidebar-group a[data-active="true"], #sidebar-group a[aria-current="page"] { background: var(--chrome-3) !important; color: var(--accent-strong) !important; font-weight: 600; } .dark #sidebar-group li[data-active="true"] > a, .dark #sidebar-group a[data-active="true"], .dark #sidebar-group a[aria-current="page"] { background: var(--accent-soft) !important; } /* Active-state per-verb overrides live with the base verb rules (see "API METHOD BADGES" section). Mintlify swaps the chip class on active to `bg-[#HEX] text-[#FFFFFF]`; the bg-hex rules there re-color each verb's text without needing to gate on the row's active selector. */ /* END Navigation Pills / Links */ /* START Scrollbar - Hardware Design */ ::-webkit-scrollbar { width: 10px; height: 10px; } /* Scrollbar track + thumb-border route through --fx-surface (chrome composite) instead of --surface-2 (warm cream). The cream track read as a beige strip down the sidebar; the chrome surface keeps it inside the header/sidebar/footer chrome family. Dark mode is unchanged perceptually since --fx-surface aliases to --surface-2 in dark. */ ::-webkit-scrollbar-track { background: var(--fx-surface); border-radius: var(--radius-control); } ::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: var(--radius-control); border: var(--ui-border-width) solid var(--fx-surface); } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* END Scrollbar */ /* START card-group */ #content-area .columns.card-group { column-gap: 1rem; } /* END card-group */ /* START svg colors */ #content-area .columns.card-group img { filter: invert(13%) sepia(85%) saturate(2770%) hue-rotate(349deg) brightness(97%) contrast(100%); } .dark #content-area .columns.card-group img { filter: invert(66%) sepia(43%) saturate(939%) hue-rotate(309deg) brightness(111%) contrast(78%); } .dark .sidebar-group-header img { filter: invert(84%) sepia(100%) saturate(0%) hue-rotate(324deg) brightness(112%) contrast(101%); } /* END svg colors */ /* START Video/Iframe - Hardware Design */ #content-area video, #content-area iframe { border: var(--ui-border-width) solid var(--border-subtle); border-radius: var(--radius-surface); box-shadow: var(--shadow-sm); background: var(--surface-2); } #content-area video { width: 100%; aspect-ratio: 16/9; } /* END Video/Iframe */ /* START Links - Hardware Design */ #content-area a:not([data-component-part]):not(.card):not([role]) { color: var(--accent); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; transition: text-decoration-color 120ms ease; } #content-area a:not([data-component-part]):not(.card):not([role]):hover { text-decoration-color: var(--accent); } #content-area a:not([data-component-part]):not(.card):not([role]):visited { color: var(--accent); } /* END Links */ /* START Math/LaTeX - Hardware Design */ #content-area .math, #content-area .katex-display, #content-area mjx-container { padding: 1rem 1.25rem; margin: 1.5rem 0; border: var(--ui-border-width) solid var(--border-subtle); border-radius: var(--radius-surface); background: var(--surface-2); box-shadow: var(--shadow-sm); overflow-x: auto; } #content-area .katex, #content-area mjx-container { color: var(--text-strong); } /* Inline math - no box */ #content-area span.katex, #content-area mjx-container:not([display="true"]) { padding: 0; margin: 0; border: none; background: transparent; box-shadow: none; } /* END Math/LaTeX */ /* START H5/H6 Headings */ #content-area h5 { font-size: 1.0625rem; font-weight: 600; margin-top: 1em; margin-bottom: 0.4em; color: var(--text-strong); } #content-area h6 { font-size: 1rem; font-weight: 600; margin-top: 1em; margin-bottom: 0.4em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* END H5/H6 Headings */ /* START Frames - Hardware Design */ #content-area .frame img { border-radius: var(--radius-surface); } #content-area figure, #content-area .frame { margin: 1.5rem 0; } #content-area figcaption, #content-area .frame p { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.5rem; } /* END Frames */ /* START Keyboard Shortcuts - Hardware Design */ .kbd-key { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; padding: 0.25rem 0.5rem; font-family: var(--fx-mono); font-size: 0.75rem; font-weight: 600; line-height: 1; color: var(--text-strong); background: var(--surface-2); border: var(--ui-border-width) solid var(--border-subtle); border-radius: var(--radius-control); box-shadow: 0 2px 0 var(--border-subtle); } .dark .kbd-key { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); } /* END Keyboard Shortcuts */ /* START Config Options - Hardware Design */ .config-option { padding: 1rem; margin: 0.75rem 0; border: var(--ui-border-width) solid var(--border-subtle); border-radius: var(--radius-surface); background: var(--surface-2); box-shadow: var(--shadow-sm); } .config-option-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .config-option-name { font-weight: 700; font-size: 0.9375rem; color: var(--accent-strong); background: var(--accent-soft); padding: 0.25rem 0.5rem; border-radius: var(--radius-control); } .config-option-type { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); background: var(--surface-3); padding: 0.25rem 0.5rem; border-radius: var(--radius-chip); text-transform: lowercase; } .config-option-required { font-size: 0.6875rem; font-weight: 700; color: #ffffff; background: var(--accent); padding: 0.25rem 0.5rem; border-radius: var(--radius-chip); text-transform: uppercase; letter-spacing: 0.05em; } .config-option-default { font-size: 0.75rem; color: var(--text-muted); } .config-option-default code { background: var(--surface-3); padding: 0.125rem 0.375rem; border-radius: var(--radius-control); } .config-option-description { color: var(--text-muted); font-size: 0.875rem; line-height: 1.5; } .config-group { margin: 1.5rem 0; } .config-group-title { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text-strong); } .config-group-items { display: flex; flex-direction: column; gap: 0.5rem; } /* END Config Options */ /* START API Endpoint - Hardware Design */ .api-endpoint { padding: 1rem; margin: 1rem 0; border: var(--ui-border-width) solid var(--border-subtle); border-radius: var(--radius-surface); background: var(--surface-2); box-shadow: var(--shadow-sm); } .api-endpoint-header { display: flex; align-items: center; gap: 0.75rem; } .api-endpoint-method { font-family: var(--fx-mono); font-size: 0.6875rem; font-weight: 700; padding: 0.25rem 0.5rem; border-radius: var(--radius-control); border: var(--ui-border-width) solid transparent; text-transform: uppercase; letter-spacing: 0.05em; } .api-method-get { background: #14532d; color: white; border-color: #166534; } .api-method-post { background: #1e3a8a; color: white; border-color: #1e40af; } .api-method-put { background: #78350f; color: white; border-color: #92400e; } .api-method-patch { background: #5b21b6; color: white; border-color: #6d28d9; } .api-method-delete { background: #7f1d1d; color: white; border-color: #991b1b; } /* Dark-mode bgs sized to keep white text at WCAG AA 4.5:1. GET (#15803d) → 5.01:1, POST (#2563eb) → 5.22:1, PUT (#b45309) → 5.04:1, PATCH (#6d28d9) → 7.07:1, DELETE (#b91c1c) → 6.40:1. DELETE was previously #dc2626 at 4.84:1 — below AA 4.5:1 once the pill text dropped to 11px. The brighter border colors stay as visual outlines — they don't carry text. */ .dark .api-method-get { background: #15803d; border-color: #22c55e; } .dark .api-method-post { background: #2563eb; border-color: #3b82f6; } .dark .api-method-put { background: #b45309; border-color: #f59e0b; } .dark .api-method-patch { background: #6d28d9; border-color: #8b5cf6; } .dark .api-method-delete { background: #b91c1c; border-color: #ef4444; } .api-endpoint-path { font-family: var(--fx-mono); font-size: 0.875rem; color: var(--text-strong); background: var(--surface-2); padding: 0.25rem 0.5rem; border-radius: var(--radius-control); border: var(--ui-border-width) solid var(--border-subtle); } .api-endpoint-description { margin-top: 0.75rem; color: var(--text-muted); font-size: 0.875rem; } .api-param { padding: 0.75rem; margin: 0.5rem 0; border-left: var(--ui-border-width) solid var(--border-subtle); background: var(--surface-2); } .api-param-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .api-param-name { font-weight: 600; color: var(--text-strong); } .api-param-type { font-size: 0.75rem; color: var(--text-muted); background: var(--chrome-3); padding: 0.125rem 0.5rem; border-radius: var(--radius-chip); } .api-param-required { font-size: 0.625rem; font-weight: 700; /* #dc2626 cleared 4.5:1 by only 0.04 on light surface-2; #b91c1c (--accent-strong) sits at ~6.0:1, giving real headroom at 10.4px. */ color: var(--accent-strong); text-transform: uppercase; } /* Dark-mode small REQUIRED badge. #fca5a5 (red-300) clears WCAG AAA on surface-1 (9.41:1) and surface-2 (8.80:1). */ .dark .api-param-required { color: #fca5a5; } .api-param-description { color: var(--text-muted); font-size: 0.85rem; } /* END API Endpoint */ /* Hide Mintlify auto-generated title/description on hero landing pages. Mintlify renders the frontmatter title as an h1 before our content. We hide every h1 that ISN'T our custom hero title. */ #content-area:has(.fx-hero) h1:not(.fx-hero__title) { display: none !important; } #content-area:has(.fx-hero) > [data-component-part="page-header"], #content-area:has(.fx-hero) > .flex:first-child:not(.fx-hero) { display: none !important; } /* Hide product/version dropdowns + tabs on the ROOT landing only. The root uses `.fx-landing` (mode: custom, no product context), so navbar chrome would just confuse. Product welcomes and the REST API landing both use `.fx-landing.fx-doc-landing` which sits inside a product/version, so they need the dropdowns and tabs visible. `:not(:has(.fx-doc-landing))` matches a body with the plain root landing only. */ @supports selector(:has(*)) { body:has(.fx-landing):not(:has(.fx-doc-landing)) .hidden.lg\:flex.items-center.gap-x-2 { display: none !important; } body:has(.fx-landing):not(:has(.fx-doc-landing)) .hidden.lg\:flex.items-center.gap-x-2 + button { display: none !important; } /* Broader fallback — hide every navbar menu trigger on the root landing (catches the Product selector when the sibling-chain above doesn't because Mintlify's DOM order shifted). */ body:has(.fx-landing):not(:has(.fx-doc-landing)) #navbar [aria-haspopup="menu"] { display: none !important; } body:has(.fx-landing):not(:has(.fx-doc-landing)) .nav-tabs { display: none !important; } body:has(.fx-landing):not(:has(.fx-doc-landing)) .nav-tabs-item { display: none !important; } } /* ────────────────────────────────────────────────────────────────────────── Futurex docs landing page — Vercel-docs-style Stark surface, hairline borders, monochrome icons, brand red used only on primary CTA, focus rings, and link hover. Light theme: navy/slate text on white. Dark theme: warm-charcoal + #f29a9a. ──────────────────────────────────────────────────────────────────────── */ :root { /* Light theme is monochromatic-warm — the same approach the dark theme uses (warm-charcoal layering + salmon accent in the same hue family). Surfaces sit in a warm-paper family that shares the brand red's hue zone, so brand red lands inside its own material world rather than fighting a cool/neutral substrate. Three visible value steps create the page → card → hover depth that the previous pure-white system lacked. */ /* Aliased to the global surface ladder — the warm-paper system is now site-wide, so fx-landing tokens just point at the canonical values instead of duplicating them. Tune surfaces in the :root surface block at the top of the file. */ --fx-page-bg: var(--surface-1); /* Card/note fill — precomputed composite of the chrome overlay (rgba(3, 7, 18, 0.03)) over --surface-1 (#fbf9f7). Header, sidebar, and footer paint with that rgba treatment, so resolving it once lets cards (and table fills routed through this token) read as part of the chrome family rather than a warmer cream layer floating on top of the page. AAA verified against text-strong (~17.5:1), text-muted (~9.6:1), and accent (~8.6:1). If --surface-1 or the chrome overlay alpha change, recompute. */ --fx-surface: var(--chrome-1); --fx-surface-hover: var(--chrome-2); /* Matches --border-subtle: one warm taupe that clears 3:1 across the full warm-paper surface ladder (surface-1/2/3). #928579 cleared page-bg + card surface but dropped to 2.69:1 against the new surface-hover (#e7e0d6); #82766c restores 3.34:1 there. */ --fx-border: var(--border-subtle); --fx-border-strong: #5a5048; --fx-text: var(--text-strong); --fx-text-muted: var(--text-muted); /* Tightened from #52525b (6.91:1 on --fx-surface, AAA fail by 0.09) to #4b4b54 which clears AAA across the full surface ladder: 8.06:1 on surface-1, 7.77:1 on --fx-surface (chrome), 7.07:1 on surface-2. Used by card CTA arrows ('Open docs →') so the rest state hits AAA on every card surface. */ --fx-text-faint: #4b4b54; --fx-cta: var(--accent); --fx-cta-hover: var(--accent-strong); --fx-focus: var(--accent); --fx-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fx-tile-radius: 8px; --fx-hairline: 1px; /* Grid dots tinted into the warm-brown family so the hero pattern reads as part of the same paper material, not a foreign overlay. */ --fx-grid-dot: rgba(61, 38, 24, 0.12); --fx-grid-dot-faint: rgba(61, 38, 24, 0.08); /* Primary button bg — deeper than --fx-cta so white text always gets AAA contrast (9.7:1) regardless of light/dark mode. Used by the navbar Contact Us button and the hero primary CTA. The accent (#921111 / #f29a9a) is reserved for inline links, hover indicators, and brand accents — it doesn't have to double as a button surface where the dark-mode salmon variant only gives ~4.8:1 with white. Hover state goes one step darker. */ --fx-button-bg: #921111; --fx-button-bg-hover: #7d0e0e; --fx-kbd-bg: #ffffff; /* The inset 1px ring IS the chip outline (no surrounding border). Previous rgba(15,23,42,0.06) composited to ~#f1f1f2 against white (1.04:1) — invisible. Routed to --fx-border so the chip edge meets the same 3:1 AA threshold as every other UI hairline. */ --fx-kbd-shadow: 0 1px 0 rgba(15, 23, 42, 0.12), 0 0 0 1px var(--fx-border) inset; /* Footer surface — mirrors Mintlify's header treatment exactly: a 3% translucent overlay (black in light, white in dark) over the body bg, plus a gray-200/gray-800 hairline. Mintlify renders the header as `bg-gray-950/[0.03] dark:bg-white/[0.03] border-b border-gray-200 dark:border-gray-800`. Reusing the same technique on the footer means the two bookends composite to the same effective color automatically, in both modes. The body's --surface-1 shows through the translucent overlay so we don't need to recompute composites. */ --fx-footer-bg: rgba(3, 7, 18, 0.03); --fx-footer-text: var(--fx-text); --fx-footer-text-strong: var(--fx-text); --fx-footer-text-muted: var(--fx-text-muted); --fx-footer-border: #e5e7eb; --fx-footer-border-strong: var(--fx-border-strong); --fx-footer-cta: var(--fx-cta); } .dark { /* Dark-mode fx tokens alias the global ladder so the landing system and the rest of the site share one set of values. The light block follows the same pattern; literals were drifting (#29262d vs --surface-3 #27242b, #b0abb3 vs --text-muted #b5b0b8) and a single source of truth removes the wiggle. */ --fx-page-bg: var(--surface-1); --fx-surface: var(--chrome-1); --fx-surface-hover: var(--chrome-2); --fx-border: var(--border-subtle); --fx-border-strong: #a09ca5; --fx-text: var(--text-strong); --fx-text-muted: var(--text-muted); --fx-text-faint: var(--text-muted); /* Landing-page CTA red — aligned with --accent for dark-mode AAA. Previous #e06060 / #eb7878 sat at 5.3:1 / 5.8:1 (AA pass, AAA fail). Routed through --accent (#f29a9a) / --accent-strong (#f7b3b3) which clear 7:1 across all surface tiers. */ --fx-cta: var(--accent); --fx-cta-hover: var(--accent-strong); --fx-focus: var(--accent); --fx-grid-dot: rgba(255, 255, 255, 0.08); --fx-grid-dot-faint: rgba(255, 255, 255, 0.04); --fx-kbd-bg: var(--surface-2); /* Mirror the light-mode treatment: route the inset ring to --fx-border so the chip edge meets AA against its bg. rgba(255,255,255,0.08) previously composited to ~#2e2c30 (1.23:1 against #1f1d22). */ --fx-kbd-shadow: 0 1px 0 rgba(0, 0, 0, 0.48), 0 0 0 1px var(--fx-border) inset; /* Footer mirror of Mintlify's header overlay in dark mode: `dark:bg-white/[0.03]` + `dark:border-gray-800`. The other footer tokens already alias through to per-mode global tokens via :root. */ --fx-footer-bg: rgba(255, 255, 255, 0.03); --fx-footer-border: #1f2937; } /* ── Layout container ─────────────────────────────────────────────────── */ .fx-landing { max-width: 1200px; margin: 0 auto; padding: 0 32px 96px; color: var(--fx-text); background: var(--fx-page-bg); font-feature-settings: "ss01", "cv11"; } /* Heading reset inside landing — don't inherit prose treatments. Two selector lists because root and product welcomes render in different wrappers: the root uses `mode: custom` and may bypass `#content-area`, while product welcomes use `mode: default` and live inside it. Mintlify's `#content-area h3 { margin-top: 1em }` (specificity 1,0,1) needs the `#content-area .fx-landing` selector (1,1,1) to beat it; the plain `.fx-landing` selector handles root, where Mintlify's prose rules don't reach. Both targets, same reset. */ .fx-landing h1, .fx-landing h2, .fx-landing h3, #content-area .fx-landing h1, #content-area .fx-landing h2, #content-area .fx-landing h3 { margin: 0; color: var(--fx-text); font-weight: 600; letter-spacing: -0.02em; } .fx-landing p { margin: 0; color: var(--fx-text-muted); } /* Mintlify's `#content-area ul` + Tailwind prose's `.prose :where(ul)` add left padding (~26px) and disc bullets to every list. The ID-specificity selector beats our class-scoped rule, so all three resets need !important to survive. Without this, role/resource link lists render visibly indented from the card body text. */ .fx-landing ul, .fx-landing ol { margin: 0 !important; padding: 0 !important; list-style: none !important; } .fx-landing li { list-style: none !important; padding-left: 0 !important; margin: 0 !important; } .fx-landing li::marker, .fx-landing li::before { content: none !important; display: none !important; } .fx-landing a { color: inherit; text-decoration: none; /* Kill Tailwind prose's link underline treatment: `.prose :where(a) { border-bottom: 1px solid red }` + `.prose :where(a:hover) { border-bottom-width: 2px }`. The 1→2px delta on hover produces a 1px layout shift ("section jitter") that ripples through the role/ product grids. Zeroing border-bottom here at specificity (0,1,1) beats the prose selectors' (0,1,0) in both states, so the underline is off and the hover bump can't change layout. Cards/links render their own visual affordances via icons, arrows, and color-only hover states. */ border-bottom: 0; } .fx-landing a:hover { border-bottom-width: 0; } /* ── Hero ─────────────────────────────────────────────────────────────── */ .fx-hero { position: relative; isolation: isolate; padding: 96px 0 72px; /* Min-height equalizes the visual scale of the root hero (which renders a search hint + theme toggle) and product heroes (which hide both since Mintlify already provides them at the page level). Without this, product heroes feel ~60px shorter and the dot-grid backdrop reads as visibly less substantial. 384px ≈ root's natural rendered height with all chrome visible. */ min-height: 384px; border-bottom: var(--fx-hairline) solid var(--fx-border); margin-bottom: 56px; /* No overflow:hidden — the dot grid intentionally bleeds past the hero edges (top into the navbar shadow, bottom into the section below) so the fade carries the field gracefully into the surrounding page rather than ending at a hard rectangular boundary. */ } /* Layered dot grid behind the hero. Primary 30px grid with 3px dots reads as a real field rather than a fine texture; a 15px secondary grid layers denser, smaller dots behind it for depth. The grid intentionally extends past the hero's top and bottom edges (80px / 120px of bleed) so the field reaches into the navbar shadow above and the first section below — the fade then dissolves the dots into the surrounding page rather than ending at the hero's rectangular border. Mask: intersected horizontal + vertical linear gradients with asymmetric vertical fade (10% top / 78% bottom-onset) tuned for the bleed zones, so the hero proper stays mostly solid and only the spillover fades. */ .fx-hero__grid { position: absolute; top: -80px; bottom: -120px; /* Bleed the grid -400px past each side of the hero. Combined with the wider fade-region in the mask (20% on each horizontal edge instead of the older 14%), the fade-out gradient is spread over enough distance to feel gradual — the user shouldn't be able to tell where the field terminates. The full transition runs over ~390px of the bleed zone rather than ~215px in the previous version, lowering the rate of change visibly. */ left: -400px; right: -400px; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 1.5px 1.5px, var(--fx-grid-dot) 1.5px, transparent 0), radial-gradient(circle at 0.75px 0.75px, var(--fx-grid-dot-faint) 0.75px, transparent 0); background-size: 30px 30px, 15px 15px; background-position: 0 0, 0 0; mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 68%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 65%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%, #000 68%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 65%, transparent 100%); -webkit-mask-composite: source-in; } .fx-hero__inner { position: relative; } .fx-landing .fx-hero__title { display: block; font-size: clamp(2.5rem, 4.4vw + 0.5rem, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; color: var(--fx-text); max-width: 22ch; } /* Beat Mintlify's `#content-area h1 { font-size: 2rem }` (specificity 1,0,1) and `#content-area h2 { font-size: 1.8rem }` which otherwise flatten the hero + section titles to near-identical sizes. Prefixing with `#content-area` raises specificity to (1,2,0) so our clamp() and section sizes actually win. */ #content-area .fx-landing .fx-hero__title { font-size: clamp(2.5rem, 4.4vw + 0.5rem, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; } .fx-landing .fx-section__title, #content-area .fx-landing .fx-section__title { font-size: 2.25rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; /* Mintlify's `#content-area h2 { border-bottom: 1px solid }` (line ~365) paints a hairline rule under every section title at doc-landing depth. Now that --border-subtle is contrast-bumped (~3.3:1, was 1.25:1) the rule reads as a heavy underline that breaks the section flow. Kill it in both contexts so root and product welcomes match. */ border-bottom: 0; padding-bottom: 0; margin-top: 0; } .fx-landing .fx-hero__subtitle { display: block; margin-top: 20px; font-size: 1.0625rem; line-height: 1.6; color: var(--fx-text-muted); max-width: 60ch; } /* ── Root landing hero — editorial scale ────────────────────────────────── The public-facing entrypoint needs more typographic weight than product welcome heroes. These rules apply only to .fx-landing without the .fx-doc-landing modifier, so product welcomes keep their compact functional scale defined above. Bumps: • title to 48–80px (was 40–56px), tighter line-height + tracking • title max-width tightened so it wraps to 2 lines deliberately • subtitle slightly larger (1.1875rem) • hero gets more vertical breathing (128/96 padding) and taller min-height • small mono FUTUREX wordmark above the title for brand anchor */ .fx-landing:not(.fx-doc-landing) .fx-hero { padding: 128px 0 96px; min-height: 480px; } .fx-landing:not(.fx-doc-landing) .fx-hero__title { font-size: clamp(3rem, 6vw + 0.5rem, 5rem); line-height: 0.98; letter-spacing: -0.03em; max-width: 14ch; } .fx-landing:not(.fx-doc-landing) .fx-hero__subtitle { margin-top: 28px; font-size: 1.1875rem; max-width: 56ch; } .fx-landing:not(.fx-doc-landing) .fx-hero__eyebrow { display: block; margin: 0 0 28px; padding: 0; font-family: var(--fx-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fx-text-faint); } /* Doc-landing eyebrow renders as plain mono kicker text sitting above the hero title — bigger than a chip so it reads at title scale and orients the user to which release branch they're on, but with no surface chrome (no bg, no border, no shadow) so it stays subordinate to the H1. Mono numerals + tabular alignment keep the version number legible. */ .fx-doc-landing .fx-hero__eyebrow { display: block; margin: 0 0 20px; padding: 0; font-family: var(--fx-mono); font-size: 1rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.02em; color: var(--fx-text-muted); font-variant-numeric: tabular-nums; } /* Accent underline beneath a single word in the hero title (e.g., "documentation" in "Futurex documentation"). Same fade-right gradient pattern as the link-hover underline below — solid brand red on the first half, fading to transparent by the right edge. 2px thickness to read proportionally beneath the 48–80px title text. The underline draws in once on page load via the same left-to-right reveal as the link-hover underline (background-size 0 → 100%), then stays. One-shot animation, no continuous motion. Honors prefers-reduced-motion. */ .fx-hero__title-accent { background-image: linear-gradient(to right, var(--fx-cta) 0%, var(--fx-cta) 50%, transparent 100%); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px; padding-bottom: 6px; animation: fx-hero-underline-draw 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 250ms both; } @keyframes fx-hero-underline-draw { from { background-size: 0 2px; } to { background-size: 100% 2px; } } @media (prefers-reduced-motion: reduce) { .fx-hero__title-accent { animation: none; } } .fx-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; } .fx-hero__cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 6px; font-size: 0.9375rem; font-weight: 500; line-height: 1; border: var(--fx-hairline) solid transparent; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .fx-hero__cta .fx-arrow { transition: transform 120ms ease; } .fx-hero__cta:hover .fx-arrow { transform: translate(2px, -0.5px); } .fx-landing .fx-hero__cta--primary, .fx-landing .fx-hero__cta--primary:visited { background: var(--fx-button-bg); color: #ffffff !important; border-color: var(--fx-button-bg); } .fx-landing .fx-hero__cta--primary .fx-arrow { color: #ffffff; } .fx-landing .fx-hero__cta--primary:hover { background: var(--fx-button-bg-hover); border-color: var(--fx-button-bg-hover); color: #ffffff !important; } /* Same dark-mode inner highlight as the navbar CTA — keeps the deep red button defined against the dark page bg. */ .dark .fx-landing .fx-hero__cta--primary { /* Match the navbar CTA fix — 0.12 white inset only reached ~2.5:1 against the dark page bg, failing 3:1 UI. 0.32 composites to ~3.9:1. */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32); } .dark .fx-landing .fx-hero__cta--primary:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.40); } .fx-landing .fx-hero__cta--ghost, .fx-landing .fx-hero__cta--ghost:visited { background: transparent; color: var(--fx-text) !important; border-color: var(--fx-border-strong); } .fx-landing .fx-hero__cta--ghost:hover { background: var(--fx-surface-hover); border-color: var(--fx-text); color: var(--fx-text) !important; } .fx-hero__cta:focus-visible { outline: 2px solid var(--fx-focus); outline-offset: 2px; } .fx-landing .fx-hero__hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; padding: 0; font-size: 0.8125rem; color: var(--fx-text-muted); letter-spacing: 0; } .fx-landing .fx-hero__hint > span { color: var(--fx-text-muted); } .fx-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-kbd); background: var(--fx-kbd-bg); box-shadow: var(--fx-kbd-shadow); font-family: var(--fx-mono); font-size: 0.75rem; font-weight: 500; color: var(--fx-text); line-height: 1; } /* Release indicator — replaces the ⌘K search hint at product hero pages. Same vertical position (margin-top: 32px) and overall scale, but shows the current shipping version as a mono chip and a link to release notes. Used on versioned product landings (CryptoHub, Excrypt HSM, etc.); root keeps the search hint since the umbrella docs site has no single version. */ .fx-landing .fx-hero__release { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; padding: 0; font-size: 0.8125rem; color: var(--fx-text-muted); letter-spacing: 0; } .fx-hero__release-label { color: var(--fx-text-muted); } .fx-hero__release-version { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-kbd); background: var(--fx-kbd-bg); box-shadow: var(--fx-kbd-shadow); font-family: var(--fx-mono); font-size: 0.75rem; font-weight: 500; color: var(--fx-text); line-height: 1; letter-spacing: 0.04em; } .fx-landing .fx-hero__release-link { display: inline-flex; align-items: center; gap: 4px; color: var(--fx-text); font-weight: 500; transition: color 120ms ease; } .fx-landing .fx-hero__release-link .fx-arrow { color: var(--fx-text-faint); transition: color 120ms ease, transform 120ms ease; } .fx-landing .fx-hero__release-link:hover { color: var(--fx-cta); } .fx-landing .fx-hero__release-link:hover .fx-arrow { color: var(--fx-cta); transform: translate(2px, -0.5px); } /* Arrow */ .fx-arrow { display: inline-block; transform: translateY(-0.5px); transition: transform 120ms ease; } /* ── Section frame ────────────────────────────────────────────────────── */ .fx-section { padding: 0; margin-top: 48px; } /* Section divider — a 4px chrome-2 strip used as a horizontal "shelf marker" between consecutive sections. One step deeper than the chrome-1 product cards above/below, so the strip reads as a quiet editorial rhythm in the same chrome family — not a cream layer. The hero already has its own border-bottom that visually separates it from the first section, so the first section needs no extra strip. Using ~ (general sibling) instead of + (adjacent) so the rule still matches when Mintlify in default mode (product welcomes) inserts wrapper elements between sections; the root index uses mode: custom and renders sections as direct siblings, so + worked there. */ .fx-section ~ .fx-section { padding-top: 64px; margin-top: 48px; position: relative; } .fx-section ~ .fx-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--chrome-2); border-radius: 2px; } /* Banded variant — chrome-2 wash that bleeds beyond the .fx-landing container to the viewport edges. Creates a magazine-style horizontal "shelf" one step deeper than the chrome-1 product cards above it, so the section reads as a quiet break inside the chrome family rather than a cream layer floating on top. Used on HSM Commands to mark it as a developer-audience break in the admin-led flow. Implementation: pseudo-element absolutely positioned with width 100vw, centered via left:50% + translateX(-50%), behind the section content via negative z-index. The section content itself stays at .fx-landing container width — only the BG bleeds. The :not() guards remove the sibling-divider hairline above and below a banded section so the band reads as the divider. */ .fx-section--banded { position: relative; isolation: isolate; padding-block: 64px 64px; margin-block: 24px; } .fx-section--banded::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: var(--chrome-2); z-index: -1; } .fx-section ~ .fx-section--banded, .fx-section--banded ~ .fx-section { border-top: 0; padding-top: 64px; margin-top: 24px; } /* Suppress the 4px surface-2 strip on banded variants — the band itself IS the divider visual, no need for a strip on top of it. */ .fx-section ~ .fx-section--banded::before, .fx-section--banded ~ .fx-section::before { display: none; } .fx-section__head { margin-bottom: 40px; } .fx-section__title { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--fx-text); } /* Specificity + inline-vs-block note: Mintlify's MDX runtime rewrites every `` as ``, so `.fx-section__lead` is an inline span by default and ignores vertical margin entirely. `display: block` turns margin-top back on. Scoping under `.fx-landing` also lifts specificity to (0,2,0) so we beat `.fx-landing p { margin: 0 }` at line ~2172. */ .fx-landing .fx-section__lead { display: block; margin-top: 16px; font-size: 1rem; line-height: 1.55; color: var(--fx-text-muted); max-width: 64ch; } /* ── Tile primitive ────────────────────────────────────────────────────── Shared CSS for the .fx-product card variant on the landings (FxProduct): a clickable card with single href. Rules here are the source of truth for grid frame, padding, hover state, icon sizing, and title scale. */ /* Grid frame — bordered, rounded, hidden-overflow container. */ .fx-products { display: grid; gap: 0; background: var(--fx-surface); border: var(--fx-hairline) solid var(--fx-border); border-radius: var(--fx-tile-radius); overflow: hidden; } /* When a product card has an open version dropdown, let the panel overflow the unified grid frame. Without this, the absolutely- positioned panel is clipped by the grid's overflow: hidden (used to keep corner radii unified). Scoped with :has so the unified frame still clips correctly the rest of the time. */ .fx-products:has(details[open]) { overflow: visible; } /* Lift the card containing the open dropdown above sibling sections (e.g., FxAccessNote below) so the panel paints on top of their surfaces, not behind. The card already has position: relative — z- index only takes effect when that's set. */ .fx-product:has(details[open]) { z-index: 20; } .fx-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Explicit 3-column variant via . Works in both root (.fx-landing) and embedded (.fx-doc-landing) contexts. Internal hairlines on each card except the rightmost; the container border handles the outer edge. */ .fx-products--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fx-products--cols-3 > .fx-product { border-right: var(--fx-hairline) solid var(--fx-border); } .fx-products--cols-3 > .fx-product:nth-child(3n) { border-right: 0; } /* When the product grid has 5+ cards, switch to 3 columns so the layout reads as 2 even rows of 3 instead of a lopsided 4 + 2. Multi-row variant: drop the single-panel frame and split into per-row strip-panels separated by 32px of negative space. Each row of 3 tiles becomes its own bordered strip — top + bottom hairlines on every tile, left edge + left radii on column-1 tiles, right radii on column-3 tiles. Row-gap creates the breathing room between strips, no horizontal divider needed. Editorial: structure via whitespace, not extra ink. */ .fx-products:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); background: transparent; border: 0; border-radius: 0; overflow: visible; column-gap: 0; row-gap: 32px; } .fx-products:has(> :nth-child(5)) > .fx-product { border-top: var(--fx-hairline) solid var(--fx-border); border-bottom: var(--fx-hairline) solid var(--fx-border); } /* Column 1: outer left edge + left radii, completing the strip's left side. */ .fx-products:has(> :nth-child(5)) > .fx-product:nth-child(3n+1) { border-left: var(--fx-hairline) solid var(--fx-border); border-top-left-radius: var(--fx-tile-radius); border-bottom-left-radius: var(--fx-tile-radius); } /* Column 3: right radii. Re-asserts border-right because the base :last-child rule below strips it for the single-panel-frame case. */ .fx-products:has(> :nth-child(5)) > .fx-product:nth-child(3n) { border-right: var(--fx-hairline) solid var(--fx-border); border-top-right-radius: var(--fx-tile-radius); border-bottom-right-radius: var(--fx-tile-radius); } /* 7+ tile case (e.g., the 8-tile REST API welcome): override the 3-col strip layout to 4 columns so 8 tiles render as 4 + 4 instead of 3 + 3 + 2 with an orphan row. Clears the 3-col radii rules above and re-applies them at the 4n positions for the wider grid. */ .fx-products:has(> :nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fx-products:has(> :nth-child(7)) > .fx-product { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .fx-products:has(> :nth-child(7)) > .fx-product:nth-child(4n+1) { border-left: var(--fx-hairline) solid var(--fx-border); border-top-left-radius: var(--fx-tile-radius); border-bottom-left-radius: var(--fx-tile-radius); } .fx-products:has(> :nth-child(7)) > .fx-product:nth-child(4n) { border-right: var(--fx-hairline) solid var(--fx-border); border-top-right-radius: var(--fx-tile-radius); border-bottom-right-radius: var(--fx-tile-radius); } /* 9+ tile case (e.g., CryptoHub admin guide nav grid with 10 sidebar groups): bump to 5 columns so 10 tiles render as a clean 2 rows of 5 instead of 4 + 4 + 2 with a stub row. Clears the 4-col radii rules and re-applies at 5n positions. */ .fx-products:has(> :nth-child(9)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } .fx-products:has(> :nth-child(9)) > .fx-product { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .fx-products:has(> :nth-child(9)) > .fx-product:nth-child(5n+1) { border-left: var(--fx-hairline) solid var(--fx-border); border-top-left-radius: var(--fx-tile-radius); border-bottom-left-radius: var(--fx-tile-radius); } .fx-products:has(> :nth-child(9)) > .fx-product:nth-child(5n) { border-right: var(--fx-hairline) solid var(--fx-border); border-top-right-radius: var(--fx-tile-radius); border-bottom-right-radius: var(--fx-tile-radius); } /* ── Editorial topic list (FxTopicList / FxTopicGroup) ── Stripe-pattern: a heading per group, then an unbulleted vertical list of links beneath. Zero borders, type-led. Used for noun-led catalogs of many destinations where card chrome would be overkill. */ .fx-topic-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; row-gap: 56px; } /* 4-item topic list renders as 1x4 single row instead of 3+1 orphan or 2x2 (root landing "Find docs by task" + product welcomes with 4 Start-here groups). Tighter column gap to keep the row scannable. */ .fx-topic-list:has(> *:nth-child(4)):not(:has(> *:nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 48px; } /* 7+ items render as 4-col instead of 3-col with orphan row (REST API Start-here has 8 task groups). */ .fx-topic-list:has(> *:nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 48px; } /* Previously had a `min-height: calc(1.55em * 3)` override here for 4-col intros because authors were writing 3-line copy. Removed in favor of the universal 2-line enforcement applied to .fx-topic-group__intro below (line-clamp + max-height) — the rule is now: every intro fits 2 lines at its rendered column width. Trim copy if it clips. */ .fx-topic-group { position: relative; } /* Subtle visual anchor: 2px-wide brand-red accent bar that hangs in the column gutter to the LEFT of each group, so the group title aligns with the section header above it (and with sibling group titles in neighboring columns). Editorial "hanging indent" pattern — the bar marks the start of a group without nudging the content right. */ .fx-topic-group::before { content: ""; position: absolute; left: -14px; top: 0.35em; width: 2px; height: 0.95em; background: var(--fx-cta); border-radius: 1px; } .fx-topic-group__title, #content-area .fx-topic-group__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; text-transform: none; color: var(--fx-text); margin: 0; padding: 0; border: 0; } /* Optional intro under the title — gives task-led groups room for an action description; reference-led groups omit it entirely. 2-line rule (memory: feedback_landing_intro_2_lines): authors must write intros that fit 2 lines at their rendered column width. The min-height reserves 2 lines so link lists align across columns; no max-height/clamp — if an intro overflows, the row visibly breaks so the author notices immediately and trims the copy. display: block is REQUIRED — Mintlify rewrites MDX `` to ``, which renders inline by default and ignores min-height. block-level display restores box behavior. The !important on margin defeats Mintlify's `#content-area p` prose cascade in default-mode pages (product welcomes), which would otherwise add a margin-bottom and visibly enlarge the gap to the link list. The root index (mode: custom) doesn't load those prose rules — without this guard, root and product landings end up with different intro→links spacing. */ .fx-topic-group__intro { display: block; font-size: 0.875rem; line-height: 1.55; color: var(--fx-text-muted); margin: 8px 0 0 0 !important; max-width: 36ch; min-height: calc(1.55em * 2); } /* Same prose-cascade defense as .fx-topic-group__intro above. The `.fx-landing ul { margin: 0 !important }` rule has specificity (0,1,0,1) — higher than .fx-topic-group__links alone (0,1,0,0). To re-assert our intended 32px top, the rule must be scoped under .fx-landing too to reach specificity (0,2,0,0), which beats the suppressor. The !important also defeats any Mintlify prose cascade in default-mode pages. */ .fx-topic-group__links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; } .fx-landing .fx-topic-group__links, #content-area .fx-landing .fx-topic-group__links { margin: 32px 0 0 0 !important; } .fx-topic-group__links li { margin: 0; padding: 0; } .fx-topic-group__link { display: block; padding: 2px 0; text-decoration: none; transition: color 120ms ease; } /* Color set on the inner span (not the ) because Mintlify's `#content-area a { color: var(--accent) }` rule wins specificity over `.fx-topic-group__link`. Brand-red fade-right gradient underline on hover. */ .fx-topic-group__label, #content-area .fx-topic-group__label { display: inline-block; font-size: 0.9375rem; font-weight: 500; color: var(--fx-text); transition: color 120ms ease, background-size 180ms ease; background-image: linear-gradient(to right, var(--fx-cta) 0%, var(--fx-cta) 50%, transparent 100%); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; padding-bottom: 1px; } .fx-topic-group__link:hover .fx-topic-group__label, #content-area .fx-topic-group__link:hover .fx-topic-group__label, .fx-topic-group__link:focus-visible .fx-topic-group__label, #content-area .fx-topic-group__link:focus-visible .fx-topic-group__label { color: var(--fx-cta); background-size: 100% 1px; } .fx-topic-group__blurb { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--fx-text-muted); font-weight: 400; } @media (max-width: 768px) { .fx-topic-list { grid-template-columns: 1fr; row-gap: 32px; } } /* Card frame — padding, surface, divider hairline, transition. Spacing system: outer card padding is 24px (the "P"). Internal section gaps and divider-to-content spacing are 16px (~2/3 P). Inter-row gaps inside link lists are 4px (~1/6 P). Card grids have 0 gap (single bordered panel). All card variants follow this rhythm. */ .fx-product { padding: 24px; background: var(--fx-surface); border-right: var(--fx-hairline) solid var(--fx-border); transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .fx-product:last-child { border-right: 0; } /* Legacy product grid — visually demoted from the current platform grid. Three coordinated cues per the no-per-product-color rule: deeper chrome step on the cards (surface elevation), muted title + blurb color with lighter title weight (typography), and the brand-red hover accent bar suppressed (density / quietness). Card geometry stays identical so the row rhythm across the page is preserved. The light- and dark-mode treatments diverge because what reads as "muted" perceptually is about relative gap, not absolute contrast: - Dark mode --fx-text-muted (#b5b0b8) sits ~3 stops below text-strong (#eeecea), so applying it directly already feels faded. - Light mode --fx-text-muted (#334155) sits only one stop below text-strong (#0a0b10) — both read as "near-black", so reusing it would not feel muted at all. Light-mode legacy text routes to a warm-taupe #5a554f (~5.5:1 on chrome-3, AA solid) which gives the same perceptual demotion. */ .fx-products--legacy > .fx-product .fx-product__title { font-weight: 500; } .fx-products--legacy > .fx-product::before { display: none; } /* Dark mode treatment — current --fx-text-muted feels muted as-is. */ .dark .fx-products--legacy, .dark .fx-products--legacy > .fx-product { background: var(--chrome-2); } .dark .fx-products--legacy > .fx-product .fx-product__title { color: var(--fx-text-muted); } /* Light mode treatment — push card bg one step deeper to --chrome-3 AND mute title + blurb to a warm-taupe (#5a554f, 5.5:1 on chrome-3). Without the text color override the cards still read as "current" in light mode because --fx-text-muted is too dark to feel muted there. */ html:not(.dark) .fx-products--legacy, html:not(.dark) .fx-products--legacy > .fx-product { background: var(--chrome-3); } html:not(.dark) .fx-products--legacy > .fx-product .fx-product__title, html:not(.dark) .fx-products--legacy > .fx-product .fx-product__blurb { color: #5a554f; } /* Stacked icon/title/body/footer use flex column layout. The 16px gap matches the internal-spacing constant defined above. */ .fx-product { display: flex; flex-direction: column; gap: 16px; } /* Hover-elevation applies to product cards. */ .fx-product { position: relative; } /* Top-edge accent bar that slides in from left to right on hover. No bg fill — the card body stays untouched, the bar is the only indicator alongside the icon color shift. Editorial, no muddy gradients. */ .fx-product::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0; background-color: var(--fx-cta); transition: width 200ms ease-out; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .fx-product::before { transition: none; } } .fx-product:hover::before, .fx-product:focus-visible::before, .fx-product:focus-within::before { width: 100%; } .fx-product:hover, .fx-product:focus-within { border-right-color: var(--fx-border-strong); } .fx-product:last-child:hover { border-right-color: transparent; } /* Icon */ .fx-product__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; color: var(--fx-text-muted); transition: color 120ms ease; } .fx-product:hover .fx-product__icon { color: var(--fx-cta); } /* Title — shared scale/weight/color. Two selector lists: the plain `.fx-product__title` handles root (mode: custom, outside #content-area), and the `#content-area`-scoped version handles product welcomes (mode: default, inside #content-area) where Mintlify's `#content-area h3 { font-size: 1.5rem }` would otherwise win on ID specificity and render CH titles 4px larger than root's. Same outcome in both contexts now. */ .fx-product__title, #content-area .fx-product__title { margin: 0; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; color: var(--fx-text); } /* `min-height: 2.6em` reserves space for two lines whether the title wraps or fits on one line. Grid rows stretch to match heights — a 2-line title would otherwise push its intro lower than its 1-line neighbours' and visibly drift the row's content baselines. */ .fx-product__title { min-height: 2.6em; } /* ── Product variant (Browse by platform) ────────────────────────────── */ /* Product cards are clickable anchors with a fixed minimum height so the browse-by-platform row reads as a substantial wall of tiles, plus a focus-visible ring for keyboard users. Frame, icon, and title chrome come from the shared tile primitives above. */ .fx-product { color: var(--fx-text); min-height: 200px; } .fx-product:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--fx-focus); } /* Quiet brand-red animated underline on the title when the card is hovered — applies on both root and product welcomes so platform and admin cards share identical hover affordance. */ .fx-product__title { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 180ms ease; } .fx-product:hover .fx-product__title { text-decoration-color: var(--fx-cta); } /* Pill-style accent shown next to the product title (e.g., "Native" on the recommended/default choice). Inline with the title so it sits at the same baseline as the heading. Underline animation only applies to the title text, not the badge. Uses --accent-* design tokens (AAA contrast verified in both modes per the dark-mode primary scale notes). */ .fx-product__badge { display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: var(--radius-chip); background: var(--accent-soft); color: var(--accent-strong); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; vertical-align: middle; text-decoration: none; } .fx-product__blurb { font-size: 0.875rem; line-height: 1.55; color: var(--fx-text-muted); flex: 1; } .fx-product__cta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9375rem; font-weight: 500; color: var(--fx-text-faint); transition: color 120ms ease; text-decoration: none; } .fx-product__cta .fx-arrow { transition: transform 120ms ease; } .fx-product:hover .fx-product__cta { color: var(--fx-cta); } .fx-product:hover .fx-product__cta .fx-arrow { transform: translate(2px, -0.5px); } /* Inner clickable area — icon + title + blurb. Separates the card's primary link target from sibling controls (e.g., version dropdown) so the dropdown stays interactive without nesting inside . `text-decoration: none !important` is required because Mintlify's `#content-area a:not(...) { text-decoration: underline; text-decoration-color transparent }` rule has specificity (1,3,1) — higher than our (0,1,0). Without the bump, the anchor's underline cascades to the blurb span on product-welcome pages (FxDocLanding lives inside #content-area). The title element has its own text-decoration rule, so its intentional animated underline is unaffected. */ .fx-product__link, .fx-product__link:hover { display: flex; flex-direction: column; gap: 16px; flex: 1; color: inherit; text-decoration: none !important; } /* ── Version dropdown (optional, when FxProduct.versions is passed) ── Native dropdown with plain anchor destinations. */ .fx-product__versions { position: relative; margin-top: auto; } .fx-product__versions > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 6px 10px; list-style: none; background: var(--fx-kbd-bg); box-shadow: var(--fx-kbd-shadow); border-radius: var(--radius-kbd); cursor: pointer; font-size: 0.75rem; color: var(--fx-text); transition: background 120ms ease; user-select: none; } .fx-product__versions > summary::-webkit-details-marker, .fx-product__versions > summary::marker { display: none; content: ""; } .fx-product__versions > summary:hover, .fx-product__versions > summary:focus-visible { background: var(--fx-surface-hover); outline: none; } .fx-product__version-label { color: var(--fx-text-muted); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.6875rem; } .fx-product__version-value { font-family: var(--fx-mono); font-weight: 500; letter-spacing: 0.04em; } .fx-product__version-caret { font-size: 0.625rem; color: var(--fx-text-muted); transition: transform 160ms ease; } .fx-product__versions[open] > summary > .fx-product__version-caret { transform: rotate(180deg); } .fx-product__version-list { list-style: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 160px; z-index: 10; margin: 0; padding: 4px; background: var(--fx-surface); border: var(--fx-hairline) solid var(--fx-border); border-radius: var(--radius-surface); box-shadow: var(--shadow-overlay); overflow: hidden; } .fx-product__version-list li { margin: 0; padding: 0; } .fx-product__version-list a { display: block; padding: 6px 10px; border-radius: var(--radius-control); color: var(--fx-text); font-family: var(--fx-mono); font-size: 0.8125rem; text-decoration: none !important; transition: background 120ms ease, color 120ms ease; } .fx-product__version-list a:hover, .fx-product__version-list a:focus-visible { background: var(--fx-surface-hover); color: var(--fx-cta); outline: none; } .fx-product__version-list a[aria-current="page"] { color: var(--fx-cta); } /* ── HSM Commands grid (FxCommandGrid / FxCommandSet) ────────────────── Editorial text-column style — deliberately NOT a card-frame primitive. The root landing already runs task-matrix → product cards back-to-back; wrapping HSM Commands in a third card grid created monotony. Mirroring the FxTopicGroup pattern (red eyebrow bar + title + body) makes this section feel like a continuation of the task matrix above it; the monospace command-code chip row is the unique visual signature that says "this is command-reference territory". */ .fx-commands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; row-gap: 56px; margin-top: 24px; } .fx-command-set { position: relative; display: block; color: inherit; text-decoration: none; } /* 2px red eyebrow bar in the column gutter — same hanging-indent pattern as .fx-topic-group::before so the two sections share editorial rhythm. */ .fx-command-set::before { content: ""; position: absolute; left: -14px; top: 0.35em; width: 2px; height: 0.95em; background: var(--fx-cta); border-radius: 1px; } .fx-command-set:focus-visible { outline: 2px solid var(--fx-focus); outline-offset: 4px; border-radius: 4px; } .fx-command-set__title, #content-area .fx-command-set__title { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; color: var(--fx-text); border: 0; padding: 0; } .fx-command-set__blurb { display: block; font-size: 0.875rem; line-height: 1.55; color: var(--fx-text-muted); margin: 8px 0 0 0; max-width: 36ch; } .fx-command-set__samples { list-style: none; padding: 0; margin: 20px 0 0 0; display: flex; flex-wrap: wrap; gap: 6px; } .fx-command-set__sample { display: inline-flex; align-items: center; justify-content: center; height: 22px; min-width: 22px; padding: 0 8px; font-family: var(--fx-mono); font-size: 0.75rem; font-weight: 500; line-height: 1; color: var(--fx-text-muted); background: var(--fx-page-bg); border: 1px solid var(--fx-border); border-radius: var(--radius-kbd); letter-spacing: 0.04em; transition: color 120ms ease, border-color 120ms ease; } .fx-command-set:hover .fx-command-set__sample { border-color: var(--fx-border-strong); color: var(--fx-text); } .fx-command-set__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 0.9375rem; font-weight: 500; color: var(--fx-text); transition: color 120ms ease; } .fx-command-set:hover .fx-command-set__cta { color: var(--fx-cta); } .fx-command-set__cta .fx-arrow { transition: transform 120ms ease; } .fx-command-set:hover .fx-command-set__cta .fx-arrow { transform: translate(2px, -0.5px); } @media (max-width: 768px) { .fx-commands { grid-template-columns: 1fr; row-gap: 40px; } } /* ── Access note ─────────────────────────────────────────────────────── */ .fx-note { margin-top: 24px; border: var(--fx-hairline) solid var(--fx-border); border-radius: var(--fx-tile-radius); padding: 16px 20px; background: var(--fx-surface); } .fx-note__inner, .fx-note__inner p { font-size: 0.9375rem; line-height: 1.5; color: var(--fx-text-muted); margin: 0; } .fx-note__inner a { color: var(--fx-text); text-decoration: underline; text-decoration-color: var(--fx-border-strong); text-underline-offset: 3px; transition: color 120ms ease, text-decoration-color 120ms ease; } .fx-note__inner a:hover { color: var(--fx-cta); text-decoration-color: var(--fx-cta); } /* ── Suppress prose styles inside landing tiles ──────────────────────── */ .fx-landing .fx-product, .fx-landing .fx-product__cta, .fx-landing .fx-hero__cta { text-decoration: none !important; } .fx-landing .fx-product__title, .fx-landing .fx-section__title { text-decoration: none; } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .fx-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-product { border-right: var(--fx-hairline) solid var(--fx-border); border-bottom: var(--fx-hairline) solid var(--fx-border); } .fx-product:nth-child(2n) { border-right: 0; } .fx-product:nth-last-child(-n+2) { border-bottom: 0; } } @media (max-width: 640px) { .fx-landing { padding: 0 20px 64px; } .fx-hero { padding: 56px 0 40px; margin-bottom: 40px; } .fx-hero__title { font-size: 2rem; max-width: none; } .fx-section { margin-top: 48px; } .fx-products { grid-template-columns: 1fr; } .fx-product { border-right: 0 !important; border-bottom: var(--fx-hairline) solid var(--fx-border); } .fx-product:last-child { border-bottom: 0; } .fx-hero__cta { width: 100%; justify-content: center; padding: 12px 16px; } } /* END Landing page (Vercel-docs style) */ /* START FxCompareGrid - editorial comparison matrix Used for dense side-by-side comparisons (e.g., HSM Commands wire formats). Renders as a CSS Grid: header row + data rows, each cell aligned at the same baseline as its row peers. Uses --fx-* design tokens so light/dark surfaces stay consistent with FxProductGrid and FxTopicList. */ .fx-compare { display: grid; background: var(--fx-surface); border: var(--fx-hairline) solid var(--fx-border); border-radius: var(--fx-tile-radius); overflow: hidden; margin: 1.5rem 0 0; font-size: 0.9rem; line-height: 1.55; } .fx-compare__cell { padding: 14px 18px; border-top: var(--fx-hairline) solid var(--fx-border); color: var(--fx-text); min-width: 0; /* allow grid item to shrink rather than overflow */ } /* First-row cells have no top border (the container border handles it). */ .fx-compare__cell--header { border-top: 0; font-weight: 600; background: var(--fx-surface-hover); color: var(--fx-text); display: flex; align-items: center; gap: 8px; } .fx-compare__cell--label-col { font-weight: 600; background: var(--fx-surface-hover); border-right: var(--fx-hairline) solid var(--fx-border); } /* Accent column is marked by the badge alone; no column tint. */ .fx-compare__col-label { font-weight: 600; } .fx-compare__badge { display: inline-block; padding: 3px 9px; border-radius: var(--radius-chip); background: var(--accent-soft); color: var(--accent-strong); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4; } .fx-compare__cell code { background: rgb(0 0 0 / 0.06); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; border: 0; } .dark .fx-compare__cell code { background: rgb(255 255 255 / 0.08); } /* On narrow viewports, drop to a stacked layout where each row becomes a labeled card. The grid columns collapse to a single column; rows are visually separated by extra padding. */ @media (max-width: 768px) { .fx-compare { grid-template-columns: 1fr !important; } .fx-compare__cell--label-col { border-right: 0; border-top: var(--fx-hairline) solid var(--fx-border-strong); } } /* END FxCompareGrid */ /* START Router landing variant — chrome-less page with embedded-style hero Used by pages that act as a router/chooser between sibling sections (e.g., HSM Commands → pick a wire format). The page uses mode: custom (no Mintlify chrome / sidebar) AND className="fx-doc-landing fx-router-landing" so it gets: - the embedded-style hero scale (smaller than the root marketing landing) inherited automatically from the .fx-doc-landing rules above; - tabs hidden: the chooser IS the routing surface (the 3-product grid is the tab strip equivalent), and Mintlify would otherwise activate the first tab as a fallback since the chooser page isn't inside any tab — confusing because none of the dialects "owns" the chooser; - PROPER padding and max-width restored — by default .fx-landing.fx-doc-landing strips both because it assumes Mintlify's content column provides them; mode: custom has no such column, so we reinstate the base .fx-landing layout values here. */ .fx-landing.fx-doc-landing.fx-router-landing { max-width: 1200px; margin: 0 auto; padding: 0 32px 96px; } body:has(.fx-router-landing) .nav-tabs { display: none; } /* END Router landing variant */ /* START Upgrade Guide — ChangeItem / CompareItem */ /* ── ChangeItem (breaking changes list) ── */ .change-item { padding: 1rem; margin: 0.75rem 0; border: var(--ui-border-width) solid var(--border-subtle); /* #d97706 sat exactly at 3.0:1 on surface-2 — no headroom if surface lightens. #b45309 lifts to ~4.3:1 (dark stays 5.24:1, plenty). */ border-left: 3px solid #b45309; border-radius: var(--radius-surface); background: var(--surface-2); box-shadow: var(--shadow-sm); } .change-item-title { font-weight: 700; font-size: 1rem; color: var(--text-strong); margin-bottom: 0.5rem; } .change-item-body { display: flex; flex-direction: column; gap: 0.5rem; } .change-detail { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); } .change-label { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.5rem; border-radius: var(--radius-chip); background: var(--surface-3); color: var(--text-muted); white-space: nowrap; } .change-label-action { background: var(--accent-soft); color: var(--accent-strong); } /* ── CompareItem (version comparison) ── */ .compare-item { padding: 1rem; margin: 0.75rem 0; border: var(--ui-border-width) solid var(--border-subtle); border-left: 3px solid var(--border-subtle); border-radius: var(--radius-surface); background: var(--surface-2); box-shadow: var(--shadow-sm); } .compare-item-title { font-weight: 700; font-size: 1rem; color: var(--text-strong); margin-bottom: 0.5rem; } .compare-item-body { display: flex; flex-direction: column; gap: 0.5rem; } .compare-version { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); } .compare-label { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.25rem 0.5rem; border-radius: var(--radius-chip); white-space: nowrap; } .compare-before .compare-label { background: var(--surface-3); color: var(--text-muted); } .compare-after .compare-label { background: var(--accent-soft); color: var(--accent-strong); } /* Responsive: stack on narrow viewports */ @media (max-width: 480px) { .change-detail, .compare-version { flex-direction: column; gap: 0.25rem; } } /* END Upgrade Guide — ChangeItem / CompareItem */ /* ============================================================ START Table Readability — dense-content scanning improvements ------------------------------------------------------------ Targeted at plain markdown tables in #content-area (the field-reference / response-shape / method-matrix tables on pages like Crypto operations and Keys). Excludes the OpenAPI .command-field-table snippet which has its own treatment. Rationale (5 changes): 1. Loosen td line-height (1.32 → 1.5) so multi-line cells (long error strings, 200+ char cells) breathe. 2. Header pop: smaller, uppercase, letter-spaced, muted — clear hierarchy vs. body cells (was indistinguishable). 3. First-column emphasis: bolder weight + strong color so the row's anchor (Field name, HTTP code, Method) stands out. 4. Drop inter-column vertical hairlines: horizontal hairlines + zebra already separate rows; verticals add noise without aiding scanning. (Borders OR striping — not both.) 5. Sticky header for long tables (≥ 13 rows) — keeps column labels visible while scrolling 16-row error tables and 58-row method tables on Keys. ============================================================ */ /* 1. Line-height: comfortable scanning for wrapped cells */ #content-area table:not(.command-field-table) tbody tr td { line-height: 1.5; } /* 2. Header treatment: small caps, letter-spaced, muted */ #content-area table:not(.command-field-table) thead tr th { font-size: 0.8125rem; /* 13px — smaller than 15.2px body cells */ text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); /* muted → subordinate to row content */ font-weight: 600; } /* Inline inside table headers (e.g., "Valid keySize values") should blend with the uppercase/letter-spaced header treatment, not keep its monospace chip styling — that creates a visual jolt mid- label. Inherit font/case/size from the header. */ #content-area table:not(.command-field-table) thead tr th code { font-family: inherit; font-size: inherit; font-weight: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; background-color: transparent; padding: 0; border: 0; } /* 3. First-column emphasis: anchors each row */ #content-area table:not(.command-field-table) tbody tr td:first-child { font-weight: 600; color: var(--text-strong); } .dark #content-area table:not(.command-field-table) tbody tr td:first-child { color: var(--text-strong); } /* 4. Drop vertical hairlines between cells. Horizontal row hairlines + zebra already separate rows; verticals add visual noise on dense reference tables. Override the existing `td+td { border-left: ... }` rule additively. */ #content-area table:not(.command-field-table) thead tr th + th, #content-area table:not(.command-field-table) tbody tr td + td { border-left: 0; } /* 5. Sticky header for long tables only. The :has() check keeps short tables (< 13 rows) un-stickied — sticky is overhead for tables that fit on a screen. Long tables (16-row error matrix, 58-row method index on Keys) keep column labels visible while the user scrolls. The 4rem top offset clears Mintlify's sticky top nav. */ #content-area table:not(.command-field-table):has(tbody tr:nth-child(13)) thead th { position: sticky; top: 4rem; z-index: 1; /* Re-assert bg so content scrolls cleanly underneath (sticky cells lose their inherited bg in some browsers). */ background-color: var(--table-head-bg); } /* END Table Readability */ /* ──────────────────────────────────────────────────────────────────────── FxFooter (custom, root landing) + Mintlify default footer overrides Single visual truth: hairline top, surface-2 bg, 4-col grid, mono headings, kbd-pill-family treatment for the wordmark + bottom strip. The Mintlify-rendered footer on non-root pages mirrors via the #__nextra-footer / footer selectors below. ──────────────────────────────────────────────────────────────────────── */ .fx-footer { background: var(--fx-surface); border-top: var(--fx-hairline) solid var(--fx-border); margin-top: 80px; padding: 72px 0 32px; font-family: inherit; } .fx-footer__inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; } /* Top section: brand block left, 3 link columns right. */ .fx-footer__top { display: grid; grid-template-columns: 1.4fr 3fr; column-gap: 80px; row-gap: 48px; } /* Brand block — logo, tagline, social icons. */ .fx-footer__brand { display: flex; flex-direction: column; gap: 20px; max-width: 320px; } .fx-footer__brand-link { display: inline-block; text-decoration: none; line-height: 0; } .fx-footer__logo { display: block; height: 28px; width: auto; } .fx-footer__logo--light { display: block; } .fx-footer__logo--dark { display: none; } .dark .fx-footer__logo--light { display: none; } .dark .fx-footer__logo--dark { display: block; } .fx-footer__tagline { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--fx-text-muted); max-width: 28ch; } .fx-footer__socials { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 8px; } .fx-footer__socials li { margin: 0; padding: 0; } .fx-footer__socials a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; color: var(--fx-text-muted); background: transparent; border: var(--fx-hairline) solid var(--fx-border); transition: color 120ms ease, border-color 120ms ease, background 120ms ease; } .fx-footer__socials a:hover, .fx-footer__socials a:focus-visible { color: var(--fx-cta); border-color: var(--fx-border-strong); background: var(--fx-surface-hover); outline: none; } /* Link columns — 4 across to the right of the brand block, matching Mintlify's default footer config so root and inner pages share the same shape. */ .fx-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; row-gap: 32px; } .fx-footer__col { min-width: 0; } .fx-footer__heading { margin: 0 0 16px; padding: 0; border: 0; font-family: var(--fx-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fx-text-muted); } .fx-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .fx-footer__links li { margin: 0; padding: 0; } .fx-footer__links a { display: inline-block; color: var(--fx-text); font-size: 0.9375rem; text-decoration: none; transition: color 120ms ease, background-size 180ms ease; background-image: linear-gradient(to right, var(--fx-cta) 0%, var(--fx-cta) 50%, transparent 100%); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; padding-bottom: 1px; } .fx-footer__links a:hover, .fx-footer__links a:focus-visible { color: var(--fx-cta); background-size: 100% 1px; outline: none; } /* Bottom strip — copyright only, hairline-separated from the columns above. Matches Mintlify-rendered footer's bottom row exactly. */ .fx-footer__bottom { margin-top: 32px; padding-top: 24px; border-top: var(--fx-hairline) solid var(--fx-border); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--fx-text-muted); } .fx-footer__copy { margin: 0; } @media (max-width: 1024px) { .fx-footer__top { grid-template-columns: 1fr; row-gap: 48px; } .fx-footer__brand { max-width: 100%; } } @media (max-width: 720px) { .fx-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .fx-footer__cols { grid-template-columns: 1fr; } } /* ── Mintlify default footer overrides (non-root pages) ──────────────── Mintlify renders the footer config from docs.json as at the bottom of the page. Match the FxFooter visual treatment so root and non-root pages share the same chrome. Selectors target Mintlify's layout footer — scoped narrowly so we don't catch our own .fx-footer. */ body footer:not(.fx-footer) { background: var(--fx-footer-bg) !important; /* Footer now matches the body's warm surface in both modes (Stripe Press navy was tried and rejected). The body↔footer color step is subtle, so a hairline border-top carries the boundary in both modes. */ border-top: var(--fx-hairline) solid var(--fx-footer-border) !important; padding: 64px 0 32px !important; color: var(--fx-footer-text); } /* Widen modestly from Mintlify's hardcoded max-w-[984px] to 1100px and tighten the gaps. */ body footer:not(.fx-footer) > div { max-width: 1100px !important; padding-left: 32px !important; padding-right: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important; gap: 28px !important; } /* Brand block ↔ columns grid gap. */ body footer:not(.fx-footer) > div > div:first-child { gap: 32px !important; } /* Column ↔ column gap. */ body footer:not(.fx-footer) > div > div:first-child > div:nth-child(2) { gap: 32px !important; } /* Inside each column: left-aligned (Mintlify's md:items-center centers column children — we want left-aligned like Vercel). */ body footer:not(.fx-footer) > div > div:first-child > div:nth-child(2) > div { align-items: flex-start !important; } body footer:not(.fx-footer) a { color: var(--fx-footer-text) !important; font-size: 0.9375rem; text-decoration: none; transition: color 120ms ease; } body footer:not(.fx-footer) a:hover { color: var(--fx-footer-cta) !important; } /* Column headers — Mintlify rewrites JSX → and prefixes all Tailwind classes with `mint-`. Belt-and-suspenders selectors: footer tag OR #footer id, span[data-as="p"] OR p OR heading. */ body footer p, body footer span[data-as="p"], body footer :is(h1, h2, h3, h4, h5, h6), body #footer p, body #footer span[data-as="p"], body #footer :is(h1, h2, h3, h4, h5, h6) { font-family: var(--fx-mono) !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--fx-footer-text-strong) !important; line-height: 1.5 !important; margin: 0 !important; display: block !important; } /* Column links — match the fade-right gradient-underline pattern used by .fx-topic-group__label and other landing link primitives, so footer link affordance is consistent with the rest of the site. Explicit line-height because Tailwind's text-sm class sets it to 1.25rem on inner pages — without an override, root (mode: custom, no Tailwind) gets a taller default line-height and the spacing reads differently between root and non-root. */ body footer p ~ a, body footer span[data-as="p"] ~ a, body #footer p ~ a, body #footer span[data-as="p"] ~ a { display: inline-block !important; /* Parent column is `flex-direction: column` with default `align-items: stretch`, which would stretch the link's inline-block to the full column width and make the gradient-underline extend far past the text (visible bug on short labels like "Host API"). align-self + width: max-content shrink-wraps the link to its text so the underline tracks the word, not the column. */ align-self: flex-start !important; width: max-content !important; max-width: 100% !important; color: var(--fx-footer-text) !important; font-size: 0.875rem !important; line-height: 1.5 !important; text-decoration: none !important; background-image: linear-gradient(to right, var(--fx-footer-cta) 0%, var(--fx-footer-cta) 50%, transparent 100%) !important; background-repeat: no-repeat !important; background-position: 0 100% !important; background-size: 0 1px !important; padding-bottom: 1px !important; transition: color 120ms ease, background-size 180ms ease !important; } body footer p ~ a:hover, body footer span[data-as="p"] ~ a:hover, body #footer p ~ a:hover, body #footer span[data-as="p"] ~ a:hover { color: var(--fx-footer-cta) !important; background-size: 100% 1px !important; } /* Link-to-link vertical breath. Mintlify prefixes all Tailwind classes with `mint-` (mint-gap-4, mint-flex-col, etc.) so a literal-class selector like `.gap-4.flex-col` never matches. Substring match on both class names catches Mintlify's prefix AND any unprefixed form. */ body footer div[class*="gap-4"][class*="flex-col"], body #footer div[class*="gap-4"][class*="flex-col"] { gap: 16px !important; } /* Social icon link — handles BOTH: (a) Mintlify-rendered: inside the top-section flex row. On md+ it stacks logo + socials with a large gap. Inject a tagline between them via ::after + flex order, and tighten the gap. Inject a copyright row at the very bottom via ::after on the inner wrapper. */ @media (min-width: 768px) { body footer:not(.fx-footer) > div > div:first-child > div:first-child { gap: 16px !important; } body footer:not(.fx-footer) > div > div:first-child > div:first-child > a { order: 1; } body footer:not(.fx-footer) > div > div:first-child > div:first-child > div { order: 3; } body footer:not(.fx-footer) > div > div:first-child > div:first-child::after { content: "Enterprise cryptography for the world's regulated industries."; order: 2; display: block; max-width: 28ch; font-size: 0.875rem; line-height: 1.55; color: var(--fx-footer-text-muted); margin: 0; } } /* Copyright row appended after the columns. Lives as ::after on the inner flex-col wrapper so it stacks at the bottom of the footer inner padding. */ body footer:not(.fx-footer) > div::after { content: "© 2026 Futurex, L.P. All rights reserved."; display: block; width: 100%; margin-top: 0; padding-top: 16px; border-top: var(--fx-hairline) solid var(--fx-footer-border); font-size: 0.8125rem; color: var(--fx-footer-text-muted); text-align: left; } /* END FxFooter */