/*fern-site-stylesheet*/@font-face { font-family: 'Avenir Next'; src: url('/developers/docs/_fern-files/contentful.docs.buildwithfern.com/95901df0486875a86e8394a11355fd16ee0e721ada38103c1a05a9e0681dbdda/docs/assets/fonts/avenirNextFont.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Avenir Next'; src: url('/developers/docs/_fern-files/contentful.docs.buildwithfern.com/816b94d2230690050e71ce331bc92320c7197b7f695aa6c3bd3cd317d021bd36/docs/assets/fonts/avenirNextFontBold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('/developers/docs/_fern-files/contentful.docs.buildwithfern.com/e8acfc9d5331733427582e4c906174dde5fe57af8f82cdaf906e80d729ff2b18/docs/assets/fonts/GeistMono-VariableFont_wght.ttf') format('ttf'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('/developers/docs/_fern-files/contentful.docs.buildwithfern.com/b886f3b1c68decdef4fc419e9a3997b07ebb3de7fc840fce20d5961404d0ab83/docs/assets/fonts/GeistMono-Italic-VariableFont_wght.ttf') format('ttf'); font-weight: 100 900; font-style: italic; font-display: swap; } :root { --header-height: 64px; --header-height-real: 64px; --mobile-header-height-real: 64px; --content-width: 640px; --sidebar-width: 288px; --page-width: 100vw; --logo-height: 26px; --font-body: 'Avenir Next', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-heading: 'Avenir Next', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-code: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } :root { --typography-body-font-family: var(--font-body); --typography-heading-font-family: var(--font-heading); --typography-code-font-family: var(--font-code); } .light, :root { --accent-1: #fdfdfe; --accent-2: #f6faff; --accent-3: #ebf2fe; --accent-4: #ddeaff; --accent-5: #cce0ff; --accent-6: #b7d3ff; --accent-7: #9fc1fb; --accent-8: #7da8f2; --accent-9: #0041ab; --accent-10: #002e98; --accent-11: #225eca; --accent-12: #152f5d; --accent-a1: #00008002; --accent-a2: #0072ff09; --accent-a3: #005af314; --accent-a4: #0062ff22; --accent-a5: #0064ff33; --accent-a6: #0064ff48; --accent-a7: #005bf560; --accent-a8: #0055e682; --accent-a9: #0041ab; --accent-a10: #002e98; --accent-a11: #0045c2dd; --accent-a12: #001c4fea; --accent-contrast: #fff; --accent-surface: #f4f9ffcc; --accent-indicator: #0041ab; --accent-track: #0041ab; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .light, :root { --accent-1: oklch(99.4% 0.0015 261); --accent-2: oklch(98.3% 0.0083 261); --accent-3: oklch(96.1% 0.0178 261); --accent-4: oklch(93.5% 0.0351 261); --accent-5: oklch(90.3% 0.0531 261); --accent-6: oklch(86.3% 0.0741 261); --accent-7: oklch(80.7% 0.0902 261); --accent-8: oklch(73% 0.1176 261); --accent-9: oklch(41.6% 0.1794 261); --accent-10: oklch(35.8% 0.1794 261); --accent-11: oklch(51% 0.1794 261); --accent-12: oklch(31.3% 0.0889 261); --accent-a1: color(display-p3 0.0196 0.0196 0.5098 / 0.008); --accent-a2: color(display-p3 0.0196 0.3882 0.8784 / 0.032); --accent-a3: color(display-p3 0.0078 0.3216 0.898 / 0.075); --accent-a4: color(display-p3 0.0078 0.349 0.9412 / 0.126); --accent-a5: color(display-p3 0.0039 0.3255 0.9373 / 0.185); --accent-a6: color(display-p3 0.0039 0.3294 0.9412 / 0.263); --accent-a7: color(display-p3 0.0039 0.2941 0.898 / 0.35); --accent-a8: color(display-p3 0.0039 0.2745 0.8431 / 0.475); --accent-a9: color(display-p3 0 0.1725 0.6118 / 0.906); --accent-a10: color(display-p3 0 0.1255 0.5451 / 0.942); --accent-a11: color(display-p3 0 0.2078 0.7059 / 0.8); --accent-a12: color(display-p3 0 0.0824 0.2745 / 0.895); --accent-contrast: #fff; --accent-surface: color(display-p3 0.9608 0.9725 1 / 0.8); --accent-indicator: oklch(41.6% 0.1794 261); --accent-track: oklch(41.6% 0.1794 261); } } } .light, :root { --grayscale-1: #fdfcfd; --grayscale-2: #faf9fb; --grayscale-3: #f2eff3; --grayscale-4: #eae7ec; --grayscale-5: #e3dfe6; --grayscale-6: #dbd8e0; --grayscale-7: #d0cdd7; --grayscale-8: #bcbac7; --grayscale-9: #8e8c99; --grayscale-10: #84828e; --grayscale-11: #65636d; --grayscale-12: #211f26; --grayscale-a1: #55005503; --grayscale-a2: #2b005506; --grayscale-a3: #30004010; --grayscale-a4: #20003618; --grayscale-a5: #20003820; --grayscale-a6: #14003527; --grayscale-a7: #10003332; --grayscale-a8: #08003145; --grayscale-a9: #05001d73; --grayscale-a10: #0500197d; --grayscale-a11: #0400119c; --grayscale-a12: #020008e0; --grayscale-contrast: #000; --grayscale-surface: #ffffffcc; --grayscale-indicator: #8e8c99; --grayscale-track: #8e8c99; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .light, :root { --grayscale-1: color(display-p3 0.991 0.988 0.992); --grayscale-2: color(display-p3 0.98 0.976 0.984); --grayscale-3: color(display-p3 0.946 0.938 0.952); --grayscale-4: color(display-p3 0.915 0.906 0.925); --grayscale-5: color(display-p3 0.886 0.876 0.901); --grayscale-6: color(display-p3 0.856 0.846 0.875); --grayscale-7: color(display-p3 0.814 0.804 0.84); --grayscale-8: color(display-p3 0.735 0.728 0.777); --grayscale-9: color(display-p3 0.555 0.549 0.596); --grayscale-10: color(display-p3 0.514 0.508 0.552); --grayscale-11: color(display-p3 0.395 0.388 0.424); --grayscale-12: color(display-p3 0.128 0.122 0.147); --grayscale-a1: #55005503; --grayscale-a2: #2b005506; --grayscale-a3: #30004010; --grayscale-a4: #20003618; --grayscale-a5: #20003820; --grayscale-a6: #14003527; --grayscale-a7: #10003332; --grayscale-a8: #08003145; --grayscale-a9: #05001d73; --grayscale-a10: #0500197d; --grayscale-a11: #0400119c; --grayscale-a12: #020008e0; --grayscale-contrast: #000; --grayscale-surface: color(display-p3 1 1 1 / 80%); --grayscale-indicator: color(display-p3 0.555 0.549 0.596); --grayscale-track: color(display-p3 0.555 0.549 0.596); } } } .dark { --accent-1: #0d121b; --accent-2: #121823; --accent-3: #182741; --accent-4: #1b3159; --accent-5: #243d6a; --accent-6: #2f4a7b; --accent-7: #3b598f; --accent-8: #476aab; --accent-9: #71a0f5; --accent-10: #6694e8; --accent-11: #90b5f6; --accent-12: #d3e2fb; --accent-a1: #0013f80a; --accent-a2: #1263f713; --accent-a3: #307bfd33; --accent-a4: #3078fd4d; --accent-a5: #4386ff5f; --accent-a6: #5491ff71; --accent-a7: #6099ff87; --accent-a8: #649affa5; --accent-a9: #75a6fef5; --accent-a10: #6ea1fee7; --accent-a11: #94bbfef6; --accent-a12: #d6e6fffb; --accent-contrast: #fff; --accent-surface: #121e3480; --accent-indicator: #71a0f5; --accent-track: #71a0f5; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --accent-1: oklch(18.2% 0.02 261.6); --accent-2: oklch(21% 0.0234 261.6); --accent-3: oklch(27.3% 0.0535 261.6); --accent-4: oklch(31.7% 0.0772 261.6); --accent-5: oklch(36.4% 0.0845 261.6); --accent-6: oklch(41.2% 0.0883 261.6); --accent-7: oklch(46.7% 0.0954 261.6); --accent-8: oklch(53% 0.1098 261.6); --accent-9: oklch(70.9% 0.1351 261.6); --accent-10: oklch(67.2% 0.1351 261.6); --accent-11: oklch(77.1% 0.1026 261.6); --accent-12: oklch(90.8% 0.0376 261.6); --accent-a1: color(display-p3 0 0.0745 0.9961 / 0.034); --accent-a2: color(display-p3 0.1294 0.4196 0.9961 / 0.068); --accent-a3: color(display-p3 0.2549 0.502 1 / 0.19); --accent-a4: color(display-p3 0.2627 0.4824 1 / 0.287); --accent-a5: color(display-p3 0.3294 0.5294 0.9961 / 0.359); --accent-a6: color(display-p3 0.3922 0.5765 1 / 0.427); --accent-a7: color(display-p3 0.4392 0.6078 1 / 0.511); --accent-a8: color(display-p3 0.451 0.6157 1 / 0.625); --accent-a9: color(display-p3 0.5137 0.6627 1 / 0.933); --accent-a10: color(display-p3 0.4902 0.6471 1 / 0.878); --accent-a11: color(display-p3 0.6235 0.7451 1 / 0.941); --accent-a12: color(display-p3 0.8588 0.9098 1 / 0.975); --accent-contrast: #fff; --accent-surface: color(display-p3 0.0863 0.1176 0.1961 / 0.5); --accent-indicator: oklch(70.9% 0.1351 261.6); --accent-track: oklch(70.9% 0.1351 261.6); } } } .dark { --grayscale-1: #111111; --grayscale-2: #191919; --grayscale-3: #222222; --grayscale-4: #2a2a2a; --grayscale-5: #313131; --grayscale-6: #3a3a3a; --grayscale-7: #484848; --grayscale-8: #606060; --grayscale-9: #6e6e6e; --grayscale-10: #7b7b7b; --grayscale-11: #b4b4b4; --grayscale-12: #eeeeee; --grayscale-a1: #00000000; --grayscale-a2: #ffffff09; --grayscale-a3: #ffffff12; --grayscale-a4: #ffffff1b; --grayscale-a5: #ffffff22; --grayscale-a6: #ffffff2c; --grayscale-a7: #ffffff3b; --grayscale-a8: #ffffff55; --grayscale-a9: #ffffff64; --grayscale-a10: #ffffff72; --grayscale-a11: #ffffffaf; --grayscale-a12: #ffffffed; --grayscale-contrast: #fff; --grayscale-surface: rgba(0, 0, 0, 0.05); --grayscale-indicator: #6e6e6e; --grayscale-track: #6e6e6e; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --grayscale-1: color(display-p3 0.067 0.067 0.067); --grayscale-2: color(display-p3 0.098 0.098 0.098); --grayscale-3: color(display-p3 0.135 0.135 0.135); --grayscale-4: color(display-p3 0.163 0.163 0.163); --grayscale-5: color(display-p3 0.192 0.192 0.192); --grayscale-6: color(display-p3 0.228 0.228 0.228); --grayscale-7: color(display-p3 0.283 0.283 0.283); --grayscale-8: color(display-p3 0.375 0.375 0.375); --grayscale-9: color(display-p3 0.431 0.431 0.431); --grayscale-10: color(display-p3 0.484 0.484 0.484); --grayscale-11: color(display-p3 0.706 0.706 0.706); --grayscale-12: color(display-p3 0.933 0.933 0.933); --grayscale-a1: #00000000; --grayscale-a2: #ffffff09; --grayscale-a3: #ffffff12; --grayscale-a4: #ffffff1b; --grayscale-a5: #ffffff22; --grayscale-a6: #ffffff2c; --grayscale-a7: #ffffff3b; --grayscale-a8: #ffffff55; --grayscale-a9: #ffffff64; --grayscale-a10: #ffffff72; --grayscale-a11: #ffffffaf; --grayscale-a12: #ffffffed; --grayscale-contrast: #fff; --grayscale-surface: color(display-p3 0 0 0 / 5%); --grayscale-indicator: color(display-p3 0.431 0.431 0.431); --grayscale-track: color(display-p3 0.431 0.431 0.431); } } } .light, :root { color-scheme: light; --accent: rgba(0, 65, 171, 1); --background: rgba(255, 255, 255, 1); --border: initial; --sidebar-background: initial; --header-background: color-mix(in srgb, var(--background), transparent 30%); --card-background: initial; --theme-color: #fff; } .dark { color-scheme: dark; --accent: rgba(113, 160, 245, 1); --background: rgba(18, 18, 18, 1); --border: initial; --sidebar-background: initial; --header-background: color-mix(in srgb, var(--background), transparent 30%); --card-background: initial; --theme-color: #121212; } :root { /* ── Brand palette ── */ --color-b100: #2B2D31; --color-g100: #6D7682; --color-g90: #55575B; --color-g80: #C4D1DE; --color-g60: #EFF2F6; --color-white: #FFFFFF; --color-blue100: #1770E5; --color-gold: #AA7F30; /* ── Dark-mode palette ── */ --color-secondary-indigo: #2E3F70; --color-blue-light: #71A0F5; --color-sidebar-hover: #5A8FF0; --color-light-gold: #FFC251; --color-near-black: #121212; /* ── Semantic tokens (light mode defaults) ── */ --color-text-primary: var(--color-b100); /* B 100 → dark: W */ --color-text-secondary: var(--color-g100); /* G 100 → dark: W */ --color-border: var(--color-g80); /* G 80 → dark: Secondary Indigo */ --color-surface: var(--color-g60); /* G 60 → dark: B 100 */ --color-background: var(--color-white); /* W → dark: near-black */ --color-accent: var(--color-blue100); /* Blue 100 → dark: Blue light */ --color-accent-gold: var(--color-gold); /* Gold → dark: Light Gold */ /* ── Legacy / component variables (aliased to semantics) ── */ --dark-font-color: var(--color-text-primary); --btn-color-dark: var(--color-text-primary); --btn-color-blue: var(--color-accent); --btn-color-disabled: var(--color-border); --btn-color-tertiary-light-bg: var(--color-surface); --code-block-outer-bg: var(--color-surface); /* ── Other unchanged variables ── */ --rounded-border: 8px; --contentful-red: #E44F20; --contentful-yellow: #FFDA00; --contentful-green: #00C459; --contentful-purple: #8B2EEA; --btn-radius: 4.8rem; --btn-border: 2px solid rgba(0,0,0,0); --btn-transition: color .4s ease-in-out, background-color .4s ease-in-out, border-color .4s ease-in-out; --btn-color-white: #fff; --btn-padding-large: 1.4rem 2.2rem; --btn-padding-medium: 1.1rem 2.2rem; --btn-padding-small: 0.8rem 1.4rem; --docs-header-content-height: 84px; --docs-header-action-height: 48px; /* 16px @ 1024px -> 36px @ 1440px */ --docs-header-padding-x: clamp( 16px, calc(16px + (36 - 16) * ((100vw - 1024px) / (1440 - 1024))), 36px ); /* 16px @ 1024px -> 64px @ 1440px */ --docs-header-section-gap: clamp( 16px, calc(16px + (64 - 16) * ((100vw - 1024px) / (1440 - 1024))), 64px ); /* 20px @ 1024px -> 28px @ 1280px */ --docs-header-compact-section-gap: clamp( 20px, calc(20px + (28 - 20) * ((100vw - 1024px) / (1280 - 1024))), 28px ); /* 24px @ 1024px -> 64px @ 1440px */ --docs-header-nav-group-gap: clamp( 24px, calc(24px + (64 - 24) * ((100vw - 1024px) / (1440 - 1024))), 64px ); /* 16px @ 1024px -> 24px @ 1440px */ --docs-header-link-gap: clamp( 16px, calc(16px + (24 - 16) * ((100vw - 1024px) / (1440 - 1024))), 24px ); --docs-header-account-group-offset: 30px; --docs-header-search-section-width: clamp(320px, 30%, 560px); --docs-header-search-width: 100%; /* 0px @ 1024px -> 19px @ 1440px */ --docs-header-search-offset: clamp( 0px, calc(0px + (19 - 0) * ((100vw - 1024px) / (1440 - 1024))), 19px ); --docs-login-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIuODQ1OSAxMS45OTY2TDE0Ljg1MTYgMTEuOTk2NiIgc3Ryb2tlPSIjMkIyRDMxIiBzdHlsZT0ic3Ryb2tlOiMyQjJEMzE7c3Ryb2tlOmNvbG9yKGRpc3BsYXktcDMgMC4xNjc3IDAuMTc3MyAwLjE5MTcpO3N0cm9rZS1vcGFjaXR5OjE7IiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMi4wMDA5IDkuMTM3NzVMMTQuODU5NCAxMS45OTYyTDEyLjAwMDkgMTQuODU0NyIgc3Ryb2tlPSIjMkIyRDMxIiBzdHlsZT0ic3Ryb2tlOiMyQjJEMzE7c3Ryb2tlOmNvbG9yKGRpc3BsYXktcDMgMC4xNjc3IDAuMTc3MyAwLjE5MTcpO3N0cm9rZS1vcGFjaXR5OjE7IiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik00Ljc5OTc2IDguNDkzMThDNS41ODY0NSA2Ljg3NzA0IDYuODk0MjQgNS41NzI3NSA4LjUxMjQ4IDQuNzkwMzlDMTAuMTMwNyA0LjAwODA0IDExLjk2NTIgMy43OTMxNiAxMy43MjA0IDQuMTgwMzdDMTUuNDc1NyA0LjU2NzU4IDE3LjA0OTUgNS41MzQzNCAxOC4xODgzIDYuOTI0OTNDMTkuMzI3MiA4LjMxNTUyIDE5Ljk2NDkgMTAuMDQ5IDE5Ljk5ODYgMTEuODQ2MUMyMC4wMzIzIDEzLjY0MzIgMTkuNDYwMSAxNS4zOTk0IDE4LjM3NDIgMTYuODMxN0MxNy4yODgzIDE4LjI2NCAxNS43NTE4IDE5LjI4OTEgMTQuMDEyNCAxOS43NDE5QzEyLjI3MjkgMjAuMTk0NyAxMC40MzE2IDIwLjA0ODggOC43ODUxOSAxOS4zMjc2QzcuMTM4NzQgMTguNjA2NSA1Ljc4Mjk1IDE3LjM1MjIgNC45MzYyIDE1Ljc2NjciIHN0cm9rZT0iIzJCMkQzMSIgc3R5bGU9InN0cm9rZTojMkIyRDMxO3N0cm9rZTpjb2xvcihkaXNwbGF5LXAzIDAuMTY3NyAwLjE3NzMgMC4xOTE3KTtzdHJva2Utb3BhY2l0eToxOyIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K"); } .dark { /* ── Semantic token overrides for dark mode ── */ --color-text-primary: var(--color-white); /* W */ --color-text-secondary: var(--color-white); /* W */ --color-border: var(--color-secondary-indigo); /* Secondary Indigo 100 */ --color-surface: var(--color-b100); /* B 100 */ --color-background: var(--color-near-black); /* #121212 */ --color-accent: var(--color-blue-light); /* Blue light */ --color-accent-gold: var(--color-light-gold); /* Light Gold */ } /* Navbar */ .fern-header-content { display: flex !important; padding: 18px var(--docs-header-padding-x) !important; min-height: var(--docs-header-content-height) !important; box-sizing: border-box !important; justify-content: space-between !important; align-items: center !important; gap: 0 !important; align-self: stretch !important; width: 100% !important; max-width: none !important; } .fern-header-content > div { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: var(--docs-header-action-height) !important; } .fern-header-content > div > div { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; justify-content: space-between !important; gap: var(--docs-header-section-gap) !important; min-height: var(--docs-header-action-height) !important; min-width: 0 !important; } #fern-header { box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05) !important; background-color: var(--color-background) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; } .dark #fern-header { background-color: var(--color-background) !important; } .fern-header-navbar-links { display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: var(--docs-header-link-gap) !important; flex: 0 1 auto !important; margin-left: 0 !important; min-width: 0 !important; } @media (min-width: 1025px) and (max-width: 1280px) { .fern-header-content > div > div { justify-content: flex-start !important; gap: var(--docs-header-compact-section-gap) !important; } .fern-header-navbar-links { margin-left: auto !important; } } /* Extend mobile breakpoint to 1200px (inclusive of 1024px): Fern's own CSS hides the hamburger at ≥1024px — force it back on. */ @media (min-width: 1024px) and (max-width: 1200px) { .fern-header-mobile-menu-button { display: flex !important; } /* Remove the desktop sidebar left-padding — at 1024–1200px the sidebar is a full-screen mobile overlay, not a persistent left-rail column. */ [data-theme=default] #fern-sidebar-scroll-area { padding-left: 16px !important; } /* ── Mobile sidebar: undo Tailwind lg:* effects inside the open sidebar ── At <1024px all lg:* utilities are inactive — mobile rendering is natural. At 1024–1200px they fire, hiding mobile-only content and showing desktop-only icons. Mirror exactly what <1024px does: A) "hidden lg:flex/block" — mobile-hidden, desktop-shown. Keep hidden. */ #fern-sidebar[data-viewport="mobile"] [class~="hidden"][class~="lg:flex"], #fern-sidebar[data-viewport="mobile"] [class~="hidden"][class~="lg:block"], #fern-sidebar[data-viewport="mobile"] [class~="hidden"][class~="lg:inline-flex"], #fern-sidebar[data-viewport="mobile"] [class~="hidden"][class~="lg:inline-block"] { display: none !important; } /* A2) "max-lg:hidden" — Tailwind max-width variant: hidden at <1024px, shown naturally at ≥1024px. This is used by sidebar section icons. Keep them hidden at our extended mobile range. */ #fern-sidebar[data-viewport="mobile"] [class~="max-lg:hidden"] { display: none !important; } /* B) "lg:hidden" — mobile-shown, desktop-hidden. Show at our extended range. :not([class~="max-lg:hidden"]) is required: [class*="lg:hidden"] is a substring match that also hits max-lg:hidden, so without :not it would override rule A2 (icons) since B comes after it in source order. */ #fern-sidebar[data-viewport="mobile"] [class*="lg:hidden"]:not([class~="max-lg:hidden"]) { display: flex !important; } /* C) Product selector wrapper is a block container, not flex. */ #fern-sidebar[data-viewport="mobile"] .fern-header-switchers { display: block !important; } /* C2) Explicitly show the dense mobile product selector card (uses lg:hidden! — Tailwind's important variant — as a belt-and-suspenders rule). */ #fern-sidebar[data-viewport="mobile"] .fern-selection-item.dense { display: flex !important; } /* D) Explicitly show and size the product selector button. */ #fern-sidebar[data-viewport="mobile"] .fern-product-selector { display: flex !important; width: 100% !important; } /* E) Match mobile font sizes: sidebar links use text-base (16px) on mobile, text-sm (14px) on desktop. No !important needed — unlayered CSS beats @layer utilities (Tailwind v4) in the normal cascade. */ #fern-sidebar[data-viewport="mobile"] .fern-sidebar-link, #fern-sidebar[data-viewport="mobile"] .fern-sidebar-link-title-inner { font-size: 16px; } } /* Product switcher — @layer base override for Tailwind v4 compatibility: Tailwind v4 puts lg:hidden! inside @layer utilities as !important. With CSS cascade layers the order for !important is REVERSED: @layer base !important beats @layer utilities !important. Unlayered !important loses to any layered !important, which is why the rules above alone don't work. */ @layer base { @media (min-width: 1024px) and (max-width: 1200px) { /* Product switcher: show the mobile card */ #fern-sidebar[data-viewport="mobile"] .fern-header-switchers { display: block !important; } #fern-sidebar[data-viewport="mobile"] .fern-product-selector { display: flex !important; width: 100% !important; } #fern-sidebar[data-viewport="mobile"] .fern-selection-item.dense { display: flex !important; } /* Font sizes: match mobile (text-base / 16px). Placed here so @layer base !important beats both Tailwind's @layer utilities and any unlayered Fern stylesheet rules. */ #fern-sidebar[data-viewport="mobile"] .fern-sidebar-link, #fern-sidebar[data-viewport="mobile"] .fern-sidebar-link-title-inner { font-size: 1rem !important; } /* Remove desktop padding-inline from lg:px-* elements inside the sidebar */ #fern-sidebar[data-viewport="mobile"] [class~="lg:px-3"], #fern-sidebar[data-viewport="mobile"] [class~="lg:px-1"] { padding-inline: unset !important; } /* lg:text-sm → keep text-base (16px) on tab items */ #fern-sidebar[data-viewport="mobile"] [class~="lg:text-sm"] { font-size: var(--text-base) !important; line-height: var(--tw-leading, var(--text-base--line-height)) !important; } /* lg:min-h-9 → revert to min-h-8 (32px) on tab items */ #fern-sidebar[data-viewport="mobile"] [class~="lg:min-h-9"] { min-height: calc(var(--spacing) * 8) !important; } /* Remove desktop left-padding from sidebar links (.fern-sidebar-link gets padding: calc(var(--spacing)*2) on all sides at ≥1024px) */ #fern-sidebar[data-viewport="mobile"] .fern-sidebar-link { padding-left: unset !important; } /* Mirror the mobile-only rule: nested sidebar groups have no inline margin */ #fern-sidebar[data-viewport="mobile"] .fern-sidebar-group .fern-sidebar-group { margin-inline: calc(var(--spacing) * 0) !important; } #fern-sidebar[data-viewport="mobile"] .fern-selection-item-title { font-size: 1rem !important; } /* Section headings ("Getting started", "Overview" …) */ #fern-sidebar[data-viewport="mobile"] .font-medium.truncate { font-size: var(--text-base) !important; } /* Landing page: the existing rule sets font-size:0 on .fern-selection-item-title and injects "Home" via ::before. Our font-size:1rem above inadvertently overrides that, revealing the real product title alongside "Home". Re-apply font-size:0 here with a more specific selector so only "Home" shows. */ body:has(.gs-section) #fern-sidebar[data-viewport="mobile"] .fern-selection-item-title { font-size: 0 !important; } } } /* Product switcher */ .fern-dropdown:has(.fern-product-item) [class~="border-b"]:has(input[placeholder="Search..."]) { display: none !important; } /* Keep Search and Ask AI together as the second desktop navigation section. */ .fern-header-content > div > div > div:has(#fern-search-button) { display: flex !important; align-items: center !important; gap: 10px !important; padding-left: var(--docs-header-search-offset) !important; flex: 1 1 var(--docs-header-search-section-width) !important; max-width: none !important; width: var(--docs-header-search-section-width) !important; min-width: 0 !important; } .fern-header-content > div > div > div:has(#fern-search-button) > div { display: flex !important; gap: 10px !important; width: 100% !important; max-width: none !important; min-width: 0 !important; } a[href*="be.contentful.com/login"] .fern-button-content { display: inline-flex !important; align-items: center !important; gap: 6px !important; } a[href*="be.contentful.com/login"] .fern-button-content > svg { display: none !important; } a[href*="be.contentful.com/login"] .fern-button-content::before { content: "" !important; display: inline-block !important; flex: 0 0 auto !important; width: 24px !important; height: 24px !important; background-color: currentColor !important; -webkit-mask: var(--docs-login-icon) center / contain no-repeat !important; mask: var(--docs-login-icon) center / contain no-repeat !important; } .fern-header-navbar-links .fern-button { background-color: transparent !important; font-weight: 600 !important; font-size: 14px !important; line-height: 20px !important; color: var(--dark-font-color) !important; } .fern-header-navbar-links .fern-button.minimal { padding: 0 !important; margin: 0 !important; } .fern-header-navbar-links a.fern-button.minimal[href*="be.contentful.com/login"] { order: 2 !important; margin-left: 0 !important; } .fern-header-navbar-links .fern-button:hover { color: var(--accent-11) !important; } .fern-header-navbar-links .fern-button:focus-visible { color: var(--accent-11) !important; outline: none; } .fern-header-navbar-links > button { background-color: transparent !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; order: 1 !important; width: auto !important; height: 24px !important; min-width: max-content !important; padding: 0 !important; margin: 0 0 0 var(--docs-header-account-group-offset) !important; color: var(--dark-font-color) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important; white-space: nowrap !important; } .fern-header-navbar-links > button::after { content: "Light"; color: currentColor !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .fern-header-navbar-links > button:hover { color: var(--accent-11) !important; } .fern-header-navbar-links > button:focus-visible { color: var(--accent-11) !important; outline: none; } /* Search bar */ #fern-search-button { border-radius: 12px !important; border: 1.5px solid #A6B5C7 !important; outline: none !important; box-shadow: none !important; height: 48px !important; width: var(--docs-header-search-width) !important; min-width: 160px !important; max-width: none !important; flex: 1 1 var(--docs-header-search-width) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--color-text-primary) !important; } #fern-ask-ai-button { border-radius: 12px !important; height: 48px !important; width: 101px !important; flex: none !important; border: none !important; font-weight: normal !important; color: var(--grayscale-a11) !important; background-color: transparent !important; box-shadow: none !important; } #fern-ask-ai-button:hover { border: none !important; color: #1770E5 !important; } #fern-ask-ai-button:focus-visible { border: none !important; color: #1770E5 !important; outline: none; } #fern-ask-ai-button:hover .fern-button-content .fern-button-text { color: var(--color-blue100) !important; } #fern-ask-ai-button:focus-within .fern-button-content .fern-button-text { color: var(--color-blue100) !important; outline: none; } .dark #fern-ask-ai-button { border: none !important; } .dark #fern-ask-ai-button:hover { border: none !important; color: #71A0F5 !important; } .dark #fern-ask-ai-button:focus-visible { border: none !important; color: #71A0F5 !important; outline: none; } .dark #fern-ask-ai-button:hover .fern-button-text { color: var(--color-blue-light) !important; } .dark #fern-ask-ai-button:focus-within .fern-button-text { color: var(--color-blue-light) !important; outline: none; } .dark #fern-search-button { border-color: #54575B !important; } .fern-kbd { border-radius: 4px !important; background: #EFF2F6 !important; border-color: #EFF2F6 !important; font-size: 10px !important; } /* Remove Tailwind's inset ring-shadow from all outlined buttons */ .fern-button:not([disabled]).outlined { box-shadow: none !important; } /* Contact sales button */ .fern-header-navbar-links .fern-button[data-variant="outlined"], .fern-header-navbar-links a[href*="sign-up"] .fern-button, .fern-header-navbar-links a[href*="sign-up"], .fern-header-navbar-links a[href*="contact/sales"] .fern-button, .fern-header-navbar-links a[href*="contact/sales"] { order: 3 !important; border-radius: var(--btn-radius) !important; border: 2px solid var(--btn-color-dark) !important; box-shadow: none !important; outline: none !important; font-size: 14px !important; font-weight: 600 !important; transition: var(--btn-transition) !important; } .fern-header-navbar-links a[href*="sign-up"]::after, .fern-header-navbar-links a[href*="contact/sales"]::after, .fern-header-navbar-links .fern-button[data-variant="outlined"]::after { box-shadow: none !important; } .fern-header-navbar-links .fern-button[data-variant="outlined"]:hover, .fern-header-navbar-links a[href*="sign-up"] .fern-button:hover, .fern-header-navbar-links a[href*="sign-up"]:hover, .fern-header-navbar-links a[href*="contact/sales"] .fern-button:hover, .fern-header-navbar-links a[href*="contact/sales"]:hover { border-color: var(--btn-color-blue) !important; color: var(--btn-color-blue) !important; } .fern-header-navbar-links .fern-button[data-variant="outlined"]:focus-visible, .fern-header-navbar-links a[href*="sign-up"] .fern-button:focus-visible, .fern-header-navbar-links a[href*="sign-up"]:focus-visible, .fern-header-navbar-links a[href*="contact/sales"] .fern-button:focus-visible, .fern-header-navbar-links a[href*="contact/sales"]:focus-visible { border-color: var(--btn-color-blue) !important; color: var(--btn-color-blue) !important; outline: none; } .dark .fern-header-navbar-links .fern-button { color: white !important; } .dark .fern-header-navbar-links > button { color: white !important; } .dark .fern-header-navbar-links > button:hover { color: var(--color-blue-light) !important; } .dark .fern-header-navbar-links > button:focus-visible { color: var(--color-blue-light) !important; outline: none; } .dark .fern-header-navbar-links > button::after { content: "Dark"; } .dark .fern-header-navbar-links a[href*="sign-up"], .dark .fern-header-navbar-links a[href*="contact/sales"], .dark .fern-header-navbar-links .fern-button[data-variant="outlined"] { border-color: var(--btn-color-white) !important; color: var(--btn-color-white) !important; } .dark .fern-header-navbar-links .fern-button:hover { color: var(--color-blue-light) !important; } .dark .fern-header-navbar-links .fern-button:focus-visible { color: var(--color-blue-light) !important; outline: none; } .dark .fern-header-navbar-links a[href*="sign-up"]:hover, .dark .fern-header-navbar-links a[href*="contact/sales"]:hover, .dark .fern-header-navbar-links .fern-button[data-variant="outlined"]:hover { background-color: var(--btn-color-white) !important; color: var(--btn-color-dark) !important; } .dark .fern-header-navbar-links a[href*="sign-up"]:focus-visible, .dark .fern-header-navbar-links a[href*="contact/sales"]:focus-visible, .dark .fern-header-navbar-links .fern-button[data-variant="outlined"]:focus-visible { background-color: var(--btn-color-white) !important; color: var(--btn-color-dark) !important; outline: none; } /* Base styles for primary/secondary fern buttons. .small is excluded so Fern's internal UI buttons (API explorer dropdowns, etc.) are untouched. */ .fern-button.filled.primary:not(.small), .fern-button.outlined:not(.small), .fern-button.filled:not(.primary):not(.small) { display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: var(--btn-radius) !important; font-size: 14px !important; font-weight: 600 !important; transition: var(--btn-transition) !important; } /* Primary button (filled) */ .fern-button.filled.primary:not(.small) { background-color: var(--btn-color-dark) !important; color: var(--btn-color-white) !important; border: 2px solid rgba(0,0,0,0) !important; } .fern-button.filled.primary:not(.small):hover { background-color: var(--btn-color-blue) !important; } .fern-button.filled.primary:not(.small):focus-visible { background-color: var(--btn-color-blue) !important; outline: none; } .dark .fern-button.filled.primary:not(.small) { background-color: var(--btn-color-white) !important; color: var(--color-text-primary) !important; } .dark .fern-button.filled.primary:not(.small):hover { background-color: var(--btn-color-blue) !important; color: var(--btn-color-white) !important; } .dark .fern-button.filled.primary:not(.small):focus-visible { background-color: var(--btn-color-blue) !important; color: var(--btn-color-white) !important; outline: none; } /* Secondary button (outlined / default intent) */ .fern-button.outlined:not(.small), .fern-button.filled:not(.primary):not(.small) { background-color: rgba(0,0,0,0) !important; color: var(--btn-color-dark) !important; border: 2px solid var(--btn-color-dark) !important; } .fern-button.outlined:not(.small):hover, .fern-button.filled:not(.primary):not(.small):hover { border-color: var(--btn-color-blue) !important; color: var(--btn-color-blue) !important; } .fern-button.outlined:not(.small):focus-visible, .fern-button.filled:not(.primary):not(.small):focus-visible { border-color: var(--btn-color-blue) !important; color: var(--btn-color-blue) !important; outline: none; } .dark .fern-button.outlined:not(.small), .dark .fern-button.filled:not(.primary):not(.small) { background-color: rgba(0,0,0,0) !important; border-color: var(--btn-color-white) !important; color: var(--btn-color-white) !important; } .dark .fern-button.outlined:not(.small):hover, .dark .fern-button.filled:not(.primary):not(.small):hover { border-color: var(--color-g60) !important; color: var(--color-sidebar-hover) !important; } .dark .fern-button.outlined:not(.small):focus-visible, .dark .fern-button.filled:not(.primary):not(.small):focus-visible { border-color: var(--color-g60) !important; color: var(--color-sidebar-hover) !important; outline: none; } /* Tertiary button — uses .filled but transparent background, smaller than primary/secondary */ .fern-button.filled.btn-tertiary:not(.small) { background-color: rgba(0,0,0,0) !important; color: var(--btn-color-dark) !important; border: 2px solid var(--btn-color-dark) !important; padding: 8px 12px !important; font-size: 12px !important; } .fern-button.filled.btn-tertiary:not(.small):hover { border-color: var(--btn-color-blue) !important; color: var(--btn-color-blue) !important; } .fern-button.filled.btn-tertiary:not(.small):focus-visible { border-color: var(--btn-color-blue) !important; color: var(--btn-color-blue) !important; outline: none; } .dark .fern-button.filled.btn-tertiary:not(.small) { background-color: rgba(0,0,0,0) !important; border-color: var(--btn-color-white) !important; color: var(--btn-color-white) !important; } .dark .fern-button.filled.btn-tertiary:not(.small):hover { border-color: var(--color-g60) !important; color: var(--color-sidebar-hover) !important; } .dark .fern-button.filled.btn-tertiary:not(.small):focus-visible { border-color: var(--color-g60) !important; color: var(--color-sidebar-hover) !important; outline: none; } /* Disabled button state */ .fern-button[aria-disabled="true"] { background-color: var(--btn-color-disabled) !important; color: var(--btn-color-white) !important; border-color: var(--btn-color-disabled) !important; cursor: not-allowed !important; } /* Media blocks (Frame / image figures) */ figure.fern-card { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; gap: 16px !important; } figure.fern-card > div { box-shadow: none !important; border-radius: 12px !important; overflow: hidden !important; } figure.fern-card img { border-radius: 12px !important; } figure.fern-card figcaption { padding: 0 !important; margin-top: 0 !important; justify-content: flex-start !important; } figure.fern-card:hover { border: none !important; } figure.fern-card:focus-visible { border: none !important; outline: none; } /* Code blocks */ /* Inline code */ code:not(.code-block) { display: inline-block !important; padding: 3px 6px !important; border-radius: 4px !important; background: var(--color-surface) !important; color: var(--color-text-primary) !important; box-shadow: none !important; text-align: left !important; max-width: 100% !important; overflow-wrap: break-word !important; font-feature-settings: 'liga' off, 'clig' off !important; font-family: "Avenir Next" !important; font-size: 14px !important; font-style: normal !important; font-weight: 600 !important; line-height: 100% !important; } .dark code:not(.code-block) { background: var(--color-border) !important; color: var(--color-white) !important; } /* Tab bar — no bottom separator, merge with content */ .fern-header-tabs { padding-bottom: 0 !important; margin-top: 0 !important; border-top: 1px solid var(--grayscale-4) !important; border-bottom: none !important; box-shadow: none !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; max-height: 90px; opacity: 1; /* Showing: height expands quickly, then opacity fades in more slowly for a visible fade-in */ transition: max-height 0.15s ease, opacity 0.6s ease-out !important; } .fern-header-tabs::-webkit-scrollbar { display: none !important; } .fern-header-tabs div[role="tablist"] { flex-wrap: nowrap !important; white-space: nowrap !important; } @media (max-width: 1023px) { .fern-header-tabs { display: none !important; } /* The border-top on .fern-header-tabs provides the separator line between header and content. When tabs are hidden, move the line to .fern-header-content's border-bottom so it persists at all viewports. */ .fern-header-content { border-bottom: 1px solid var(--grayscale-4) !important; } .dark .fern-header-content { border-bottom-color: var(--color-border) !important; } } /* When hamburger is open, the tabs are hidden — show the separator line via .fern-header-content border-bottom instead (covers 1024–1200px range where the max-width:1023px rule above doesn't apply). */ body:has(#fern-sidebar[data-viewport="mobile"]) .fern-header-content { border-bottom: 1px solid var(--grayscale-4) !important; } .dark body:has(#fern-sidebar[data-viewport="mobile"]) .fern-header-content, body.dark:has(#fern-sidebar[data-viewport="mobile"]) .fern-header-content { border-bottom-color: var(--color-border) !important; } /* Hide tabs while the mobile sidebar is actually in the DOM (hamburger open). Using :has(#fern-sidebar[data-viewport="mobile"]) is more reliable than body[data-scroll-locked] — the scroll-lock can linger as a stale artifact, but the sidebar element is only present when the menu is genuinely open. */ body:has(#fern-sidebar[data-viewport="mobile"]) .fern-header-tabs { max-height: 0 !important; opacity: 0 !important; pointer-events: none !important; border-top: none !important; padding: 0 !important; transition: opacity 0.15s ease, max-height 0s ease 0.15s !important; } @media (max-width: 1200px) { .fern-header-content { display: flex !important; padding: 18px var(--docs-header-padding-x) !important; min-height: var(--docs-header-content-height) !important; box-sizing: border-box !important; justify-content: space-between !important; align-items: center !important; gap: 0 !important; align-self: stretch !important; width: 100% !important; max-width: none !important; } .fern-header-content > div { padding-top: 0 !important; padding-bottom: 0 !important; min-height: var(--docs-header-action-height) !important; } .fern-header-content > div > div { justify-content: stretch !important; gap: 12px !important; min-height: var(--docs-header-action-height) !important; } .fern-header-content > div > div > div:has(#fern-search-button) { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; padding-left: 0 !important; } .fern-header-content > div > div > div:has(#fern-search-button) > div { width: 100% !important; min-width: 0 !important; } #fern-search-button { width: auto !important; flex: 1 !important; min-width: 0 !important; } .fern-header-navbar-links { display: none !important; } .fern-header-selectors { display: none !important; } .fern-header-mobile-menu-button > button { width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 6px !important; box-sizing: border-box !important; color: var(--color-text-primary) !important; } .dark .fern-header-mobile-menu-button > button { color: white !important; } .fern-header-mobile-menu-button > button:is([aria-expanded="true"], [data-state="open"], [aria-label*="close" i]), .fern-header-mobile-menu-button > button:has(.lucide-x) { background-color: transparent !important; color: var(--color-text-primary) !important; } .dark .fern-header-mobile-menu-button > button:is([aria-expanded="true"], [data-state="open"], [aria-label*="close" i]), .dark .fern-header-mobile-menu-button > button:has(.lucide-x) { color: white !important; } .fern-header-mobile-menu-button > button:is([aria-expanded="true"], [data-state="open"], [aria-label*="close" i]):hover, .fern-header-mobile-menu-button > button:has(.lucide-x):hover { background-color: var(--accent-a3) !important; color: var(--color-text-primary) !important; } .fern-header-mobile-menu-button > button:is([aria-expanded="true"], [data-state="open"], [aria-label*="close" i]):focus-visible, .fern-header-mobile-menu-button > button:has(.lucide-x):focus-visible { background-color: var(--accent-a3) !important; color: var(--color-text-primary) !important; outline: none; } .dark .fern-header-mobile-menu-button > button:is([aria-expanded="true"], [data-state="open"], [aria-label*="close" i]):hover, .dark .fern-header-mobile-menu-button > button:has(.lucide-x):hover { color: white !important; } .dark .fern-header-mobile-menu-button > button:is([aria-expanded="true"], [data-state="open"], [aria-label*="close" i]):focus-visible, .dark .fern-header-mobile-menu-button > button:has(.lucide-x):focus-visible { color: white !important; outline: none; } .fern-header-mobile-menu-button > button :is(.lucide-menu, .lucide-x) { width: 32px !important; height: 32px !important; min-width: 32px !important; stroke: currentColor !important; stroke-width: 1.8 !important; } .fern-header-mobile-menu-button > button:is([aria-expanded="true"], [data-state="open"], [aria-label*="close" i]) :is(.lucide-menu, .lucide-x), .fern-header-mobile-menu-button > button .lucide-x { width: 26px !important; height: 26px !important; min-width: 26px !important; } .dark .fern-header-mobile-menu-button > button, .dark .fern-header-mobile-menu-button > button:is([aria-expanded="true"], [data-state="open"], [aria-label*="close" i]), .dark .fern-header-mobile-menu-button > button:has(.lucide-x), .dark .fern-header-mobile-menu-button > button:hover, .dark .fern-header-mobile-menu-button > button:is([aria-expanded="true"], [data-state="open"], [aria-label*="close" i]):hover, .dark .fern-header-mobile-menu-button > button:has(.lucide-x):hover { color: var(--color-white) !important; } .dark .fern-header-mobile-menu-button > button:focus-visible, .dark .fern-header-mobile-menu-button > button:is([aria-expanded="true"], [data-state="open"], [aria-label*="close" i]):focus-visible, .dark .fern-header-mobile-menu-button > button:has(.lucide-x):focus-visible { color: var(--color-white) !important; outline: none; } .dark .fern-header-mobile-menu-button > button :is(svg, svg *, .lucide-menu, .lucide-x) { color: var(--color-white) !important; stroke: var(--color-white) !important; } #fern-sidebar a.fern-button[href*="contact/sales"] { align-self: center !important; width: fit-content !important; min-width: max-content !important; height: 32px !important; min-height: 32px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 16px !important; box-sizing: border-box !important; white-space: nowrap !important; /* Light mode — matches desktop: dark outlined, no fill */ background-color: transparent !important; border: 2px solid var(--btn-color-dark) !important; border-radius: var(--btn-radius) !important; color: var(--btn-color-dark) !important; font-size: 14px !important; font-weight: 600 !important; transition: var(--btn-transition) !important; } #fern-sidebar a.fern-button.outlined[href*="contact/sales"] > .fern-button-content, #fern-sidebar a.fern-button.outlined[href*="contact/sales"] > .fern-button-content > .fern-button-text { transition: inherit !important; } #fern-sidebar a.fern-button.outlined[href*="contact/sales"]:hover { border-color: var(--btn-color-blue) !important; color: var(--btn-color-blue) !important; background-color: transparent !important; } #fern-sidebar a.fern-button.outlined[href*="contact/sales"]:focus-visible { border-color: var(--btn-color-blue) !important; color: var(--btn-color-blue) !important; background-color: transparent !important; outline: none; } /* Dark mode — matches desktop dark mode exactly */ .dark #fern-sidebar a.fern-button.outlined[href*="contact/sales"] { background-color: transparent !important; border: 2px solid var(--btn-color-white) !important; color: var(--btn-color-white) !important; } .dark #fern-sidebar a.fern-button.outlined[href*="contact/sales"] > .fern-button-content, .dark #fern-sidebar a.fern-button.outlined[href*="contact/sales"] > .fern-button-content > .fern-button-text { background-color: transparent !important; border: none !important; color: var(--btn-color-white) !important; transition: inherit !important; } #fern-sidebar[data-viewport="mobile"] :is(a.fern-button, .group.cursor-pointer.fern-button.minimal.normal, .fern-button-content, .fern-button-text) { font-size: 16px !important; } #fern-sidebar[data-viewport="mobile"] .group.cursor-pointer.fern-button.minimal.normal { padding-top: 10px !important; padding-bottom: 10px !important; } #fern-sidebar[data-viewport="mobile"] div:has(> a.fern-button[href*="contact/sales"]) { border-top: 0 !important; } /* Dark mode — mobile sidebar nav links (Docs, Changelog, Help Center, Log In) */ .dark #fern-sidebar .fern-button:not([href*="contact/sales"]) { color: white !important; } .dark #fern-sidebar[data-viewport="mobile"] div:has(> a.fern-button[href*="contact/sales"]) a.fern-button, .dark #fern-sidebar[data-viewport="mobile"] div:has(> a.fern-button[href*="contact/sales"]) .fern-button-content, .dark #fern-sidebar[data-viewport="mobile"] div:has(> a.fern-button[href*="contact/sales"]) .fern-button-text, .dark #fern-sidebar[data-viewport="mobile"] div:has(> a.fern-button[href*="contact/sales"]) svg { color: var(--color-white) !important; } #fern-sidebar[data-viewport="mobile"] a.fern-button[href*="contact/sales"]:hover, #fern-sidebar[data-viewport="mobile"] a.fern-button[href*="contact/sales"]:hover .fern-button-content, #fern-sidebar[data-viewport="mobile"] a.fern-button[href*="contact/sales"]:hover .fern-button-text { color: #1770E5 !important; } #fern-sidebar[data-viewport="mobile"] a.fern-button[href*="contact/sales"]:focus-visible, #fern-sidebar[data-viewport="mobile"] a.fern-button[href*="contact/sales"]:focus-within .fern-button-content, #fern-sidebar[data-viewport="mobile"] a.fern-button[href*="contact/sales"]:focus-within .fern-button-text { color: #1770E5 !important; outline: none; } .fern-callout { max-width: 100% !important; overflow: hidden !important; } .fern-callout .flex { min-width: 0 !important; } .fern-callout .flex > div:last-child { min-width: 0 !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .fern-callout h5 { overflow-wrap: break-word !important; word-break: break-word !important; white-space: normal !important; } table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; } } /* ── Stuck mobile-sidebar cleanup at desktop width ────────────────────────── When the hamburger is open at 1024–1200px and the user resizes past 1200px, Fern's JS switches the sidebar to desktop mode but doesn't run the mobile menu's exit path (onExitComplete never fires). Artefacts left behind: 1. fern-main will-change:transform + translateX inline style 2. #fern-sidebar[data-viewport="mobile"] — stuck panel, position:fixed z-40 3. #fern-sidebar-overlay — backdrop 4. body[data-scroll-locked] — scroll lock + hides our tabs */ @keyframes fern-content-reveal { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 1201px) { main.fern-main { transform: none !important; will-change: auto !important; } /* Fade the stuck mobile panel and overlay out instead of snapping to gone */ #fern-sidebar[data-viewport="mobile"], #fern-sidebar-overlay { opacity: 0 !important; pointer-events: none !important; /* visibility collapses after opacity finishes so it can't receive clicks */ visibility: hidden !important; transition: opacity 0.25s ease, visibility 0s linear 0.25s !important; } /* Fade main content in slightly after the stuck overlay starts disappearing */ body:has(#fern-sidebar[data-viewport="mobile"]) main.fern-main { animation: fern-content-reveal 0.35s ease-out 0.15s both; } body[data-scroll-locked] { overflow: auto !important; padding-right: 0 !important; } /* At desktop the mobile sidebar is stuck — show tabs regardless */ body:has(#fern-sidebar[data-viewport="mobile"]) .fern-header-tabs { opacity: 1 !important; pointer-events: auto !important; max-height: 90px !important; } } .fern-header-tabs::after, .fern-header-tabs::before { display: none !important; } .dark .fern-header-tabs { border-top-color: var(--color-border) !important; } /* Remove any separator between header and page content */ #fern-header { border-bottom: none !important; } #fern-header + *, #fern-header ~ *, .fern-header + *, main, [role="main"], .fern-main, .fern-layout-content { border-top: none !important; box-shadow: none !important; } .fern-header-tabs, .fern-header-tabs *, .fern-header-tabs > *, .fern-header-tabs div[role="tablist"], #fern-header > *:last-child, header[class*="fern"] > *:last-child { border-bottom: none !important; box-shadow: none !important; } /* Nuclear option: hide any thin line below the header */ #fern-header::after, #fern-header > *:last-child::after { display: none !important; border: none !important; height: 0 !important; } /* Remove default underline indicator */ div[role="tablist"] a::after { display: none !important; } /* Tab links */ .fern-header-tabs div[role="tablist"] a { border-radius: 0 !important; margin-right: 24px !important; height: 80px !important; padding: 32px 0 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--dark-font-color) !important; border-bottom: 2px solid transparent !important; transition: none !important; background: none !important; } .fern-header-tabs div[role="tablist"] a:hover { background: none !important; color: var(--color-blue100) !important; } .fern-header-tabs div[role="tablist"] a:focus-visible { background: none !important; color: var(--color-blue100) !important; outline: none; } .dark .fern-header-tabs div[role="tablist"] a { color: white !important; } .dark .fern-header-tabs div[role="tablist"] a:hover { background: none !important; color: var(--color-blue-light) !important; } .dark .fern-header-tabs div[role="tablist"] a:focus-visible { background: none !important; color: var(--color-blue-light) !important; outline: none; } /* Active tab — blue bottom border only, no other visual change */ [data-theme=default]#fern-header [data-radix-collection-item][data-state=active], [data-theme=default]#fern-header [data-radix-collection-item][aria-selected=true] { background: none !important; color: var(--dark-font-color) !important; font-weight: 600 !important; font-size: 14px !important; border-bottom: 2px solid var(--color-accent) !important; box-shadow: none !important; outline: none !important; } [data-theme=default]#fern-header [data-radix-collection-item][data-state=active] *, [data-theme=default]#fern-header [data-radix-collection-item][aria-selected=true] * { font-weight: 600 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; } .dark [data-theme=default]#fern-header [data-radix-collection-item][data-state=active], .dark [data-theme=default]#fern-header [data-radix-collection-item][aria-selected=true] { background: none !important; color: white !important; font-weight: 600 !important; border-bottom: 2px solid var(--color-accent) !important; box-shadow: none !important; } .dark [data-theme=default]#fern-header [data-radix-collection-item][data-state=active] *, .dark [data-theme=default]#fern-header [data-radix-collection-item][aria-selected=true] * { font-weight: 600 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; } /* Remove active tab indicator on landing page */ body.is-landing-page [data-theme=default]#fern-header [data-radix-collection-item][data-state=active], body.is-landing-page [data-theme=default]#fern-header [data-radix-collection-item][aria-selected=true], body.is-landing-page.dark [data-theme=default]#fern-header [data-radix-collection-item][data-state=active], body.is-landing-page.dark [data-theme=default]#fern-header [data-radix-collection-item][aria-selected=true] { border-bottom: 2px solid transparent !important; } .my-6 { margin-block: 0 !important; } /* Align table cells to the top */ table td { vertical-align: top !important; } h1 { font-weight: var(--font-weight-semibold); } /* Lists inside table cells */ table td ul, table td ol { display: block !important; margin: 0 !important; } table td ol { list-style-position: inside !important; } /* Spacing between paragraphs in table cells */ table td p { margin-bottom: 12px !important; } table td p:last-child { margin-bottom: 0 !important; } /* Cards */ .fern-card { display: flex !important; width: 100% !important; padding: 32px !important; flex-direction: column !important; align-items: flex-start !important; gap: 32px !important; border-radius: 20px !important; border: 2px solid #BDD3E2 !important; box-sizing: border-box !important; } .dark .fern-card { border-color: var(--color-border) !important; } .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } /* Info callout */ .fern-callout[data-intent="info"] { display: flex !important; width: 100% !important; padding: 16px !important; align-items: flex-start !important; gap: 16px !important; border-radius: 6px !important; background: var(--color-g60) !important; } .fern-callout[data-intent="info"] .flex > div:first-child svg { display: none !important; } .fern-callout[data-intent="info"] .flex > div:first-child { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExIDE3SDEzVjExSDExVjE3Wk0xMiA5QzEyLjI4MzMgOSAxMi41MjA4IDguOTA0MTcgMTIuNzEyNSA4LjcxMjVDMTIuOTA0MiA4LjUyMDgzIDEzIDguMjgzMzMgMTMgOEMxMyA3LjcxNjY3IDEyLjkwNDIgNy40NzkxNyAxMi43MTI1IDcuMjg3NUMxMi41MjA4IDcuMDk1ODMgMTIuMjgzMyA3IDEyIDdDMTEuNzE2NyA3IDExLjQ3OTIgNy4wOTU4MyAxMS4yODc1IDcuMjg3NUMxMS4wOTU4IDcuNDc5MTcgMTEgNy43MTY2NyAxMSA4QzExIDguMjgzMzMgMTEuMDk1OCA4LjUyMDgzIDExLjI4NzUgOC43MTI1QzExLjQ3OTIgOC45MDQxNyAxMS43MTY3IDkgMTIgOVpNMTIgMjJDMTAuNjE2NyAyMiA5LjMxNjY3IDIxLjczNzUgOC4xIDIxLjIxMjVDNi44ODMzMyAyMC42ODc1IDUuODI1IDE5Ljk3NSA0LjkyNSAxOS4wNzVDNC4wMjUgMTguMTc1IDMuMzEyNSAxNy4xMTY3IDIuNzg3NSAxNS45QzIuMjYyNSAxNC42ODMzIDIgMTMuMzgzMyAyIDEyQzIgMTAuNjE2NyAyLjI2MjUgOS4zMTY2NyAyLjc4NzUgOC4xQzMuMzEyNSA2Ljg4MzMzIDQuMDI1IDUuODI1IDQuOTI1IDQuOTI1QzUuODI1IDQuMDI1IDYuODgzMzMgMy4zMTI1IDguMSAyLjc4NzVDOS4zMTY2NyAyLjI2MjUgMTAuNjE2NyAyIDEyIDJDMTMuMzgzMyAyIDE0LjY4MzMgMi4yNjI1IDE1LjkgMi43ODc1QzE3LjExNjcgMy4zMTI1IDE4LjE3NSA0LjAyNSAxOS4wNzUgNC45MjVDMTkuOTc1IDUuODI1IDIwLjY4NzUgNi44ODMzMyAyMS4yMTI1IDguMUMyMS43Mzc1IDkuMzE2NjcgMjIgMTAuNjE2NyAyMiAxMkMyMiAxMy4zODMzIDIxLjczNzUgMTQuNjgzMyAyMS4yMTI1IDE1LjlDMjAuNjg3NSAxNy4xMTY3IDE5Ljk3NSAxOC4xNzUgMTkuMDc1IDE5LjA3NUMxOC4xNzUgMTkuOTc1IDE3LjExNjcgMjAuNjg3NSAxNS45IDIxLjIxMjVDMTQuNjgzMyAyMS43Mzc1IDEzLjM4MzMgMjIgMTIgMjJaTTEyIDIwQzE0LjIzMzMgMjAgMTYuMTI1IDE5LjIyNSAxNy42NzUgMTcuNjc1QzE5LjIyNSAxNi4xMjUgMjAgMTQuMjMzMyAyMCAxMkMyMCA5Ljc2NjY3IDE5LjIyNSA3Ljg3NSAxNy42NzUgNi4zMjVDMTYuMTI1IDQuNzc1IDE0LjIzMzMgNCAxMiA0QzkuNzY2NjcgNCA3Ljg3NSA0Ljc3NSA2LjMyNSA2LjMyNUM0Ljc3NSA3Ljg3NSA0IDkuNzY2NjcgNCAxMkM0IDE0LjIzMzMgNC43NzUgMTYuMTI1IDYuMzI1IDE3LjY3NUM3Ljg3NSAxOS4yMjUgOS43NjY2NyAyMCAxMiAyMFoiIGZpbGw9IiM2RDc2ODIiLz4KPC9zdmc+Cg==") !important; background-repeat: no-repeat !important; background-size: 24px 24px !important; width: 24px !important; height: 24px !important; min-width: 24px !important; } /* Info callout — dark mode */ .dark .fern-callout[data-intent="info"] { background: var(--color-b100) !important; } .dark .fern-callout[data-intent="info"] .flex > div:last-child { color: var(--color-white) !important; } .dark .fern-callout[data-intent="info"] .flex > div:last-child * { color: var(--color-white) !important; } .dark .fern-callout[data-intent="info"] .flex > div:first-child { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExIDE3SDEzVjExSDExVjE3Wk0xMiA5QzEyLjI4MzMgOSAxMi41MjA4IDguOTA0MTcgMTIuNzEyNSA4LjcxMjVDMTIuOTA0MiA4LjUyMDgzIDEzIDguMjgzMzMgMTMgOEMxMyA3LjcxNjY3IDEyLjkwNDIgNy40NzkxNyAxMi43MTI1IDcuMjg3NUMxMi41MjA4IDcuMDk1ODMgMTIuMjgzMyA3IDEyIDdDMTEuNzE2NyA3IDExLjQ3OTIgNy4wOTU4MyAxMS4yODc1IDcuMjg3NUMxMS4wOTU4IDcuNDc5MTcgMTEgNy43MTY2NyAxMSA4QzExIDguMjgzMzMgMTEuMDk1OCA4LjUyMDgzIDExLjI4NzUgOC43MTI1QzExLjQ3OTIgOC45MDQxNyAxMS43MTY3IDkgMTIgOVpNMTIgMjJDMTAuNjE2NyAyMiA5LjMxNjY3IDIxLjczNzUgOC4xIDIxLjIxMjVDNi44ODMzMyAyMC42ODc1IDUuODI1IDE5Ljk3NSA0LjkyNSAxOS4wNzVDNC4wMjUgMTguMTc1IDMuMzEyNSAxNy4xMTY3IDIuNzg3NSAxNS45QzIuMjYyNSAxNC42ODMzIDIgMTMuMzgzMyAyIDEyQzIgMTAuNjE2NyAyLjI2MjUgOS4zMTY2NyAyLjc4NzUgOC4xQzMuMzEyNSA2Ljg4MzMzIDQuMDI1IDUuODI1IDQuOTI1IDQuOTI1QzUuODI1IDQuMDI1IDYuODgzMzMgMy4zMTI1IDguMSAyLjc4NzVDOS4zMTY2NyAyLjI2MjUgMTAuNjE2NyAyIDEyIDJDMTMuMzgzMyAyIDE0LjY4MzMgMi4yNjI1IDE1LjkgMi43ODc1QzE3LjExNjcgMy4zMTI1IDE4LjE3NSA0LjAyNSAxOS4wNzUgNC45MjVDMTkuOTc1IDUuODI1IDIwLjY4NzUgNi44ODMzMyAyMS4yMTI1IDguMUMyMS43Mzc1IDkuMzE2NjcgMjIgMTAuNjE2NyAyMiAxMkMyMiAxMy4zODMzIDIxLjczNzUgMTQuNjgzMyAyMS4yMTI1IDE1LjlDMjAuNjg3NSAxNy4xMTY3IDE5Ljk3NSAxOC4xNzUgMTkuMDc1IDE5LjA3NUMxOC4xNzUgMTkuOTc1IDE3LjExNjcgMjAuNjg3NSAxNS45IDIxLjIxMjVDMTQuNjgzMyAyMS43Mzc1IDEzLjM4MzMgMjIgMTIgMjJaTTEyIDIwQzE0LjIzMzMgMjAgMTYuMTI1IDE5LjIyNSAxNy42NzUgMTcuNjc1QzE5LjIyNSAxNi4xMjUgMjAgMTQuMjMzMyAyMCAxMkMyMCA5Ljc2NjY3IDE5LjIyNSA3Ljg3NSAxNy42NzUgNi4zMjVDMTYuMTI1IDQuNzc1IDE0LjIzMzMgNCAxMiA0QzkuNzY2NjcgNCA3Ljg3NSA0Ljc3NSA2LjMyNSA2LjMyNUM0Ljc3NSA3Ljg3NSA0IDkuNzY2NjcgNCAxMkM0IDE0LjIzMzMgNC43NzUgMTYuMTI1IDYuMzI1IDE3LjY3NUM3Ljg3NSAxOS4yMjUgOS43NjY2NyAyMCAxMiAyMFoiIGZpbGw9IiNGRkZGRkYiLz4KPC9zdmc+") !important; } /* Remove callout borders */ .fern-callout { border: none !important; box-shadow: none !important; outline: none !important; } /* Callout icon container */ .fern-callout .flex > div:first-child { width: 24px !important; height: 24px !important; flex-shrink: 0 !important; margin-top: 0 !important; } /* Remove Fern's before/after pseudo-element spacing on callout text container */ .fern-callout .flex > div:last-child { margin-top: 0 !important; margin-bottom: 0 !important; } .fern-callout .flex > div:last-child::before, .fern-callout .flex > div:last-child::after { display: none !important; margin: 0 !important; } /* The text container (overflow-x:auto) creates a BFC which prevents margin collapse. Browser-default margins on h5 and p elements inside it push content below the icon. Zero them all out; use margin-bottom only between multiple paragraphs. */ .fern-callout h5 { margin-top: 0 !important; margin-bottom: 0 !important; } .fern-callout h5:empty { display: none !important; } .fern-callout p { margin-top: 0 !important; margin-bottom: 0 !important; } .fern-callout p + p { margin-top: 8px !important; } /* Callout text content */ .fern-callout .flex > div:last-child { color: var(--color-text-primary) !important; font-feature-settings: 'liga' off, 'clig' off !important; font-family: "Avenir Next" !important; font-size: 14px !important; font-style: normal !important; font-weight: 400 !important; line-height: 157% !important; } /* Callout bold text */ .fern-callout .flex > div:last-child strong, .fern-callout .flex > div:last-child b { color: var(--color-text-primary) !important; font-feature-settings: 'liga' off, 'clig' off !important; font-family: "Avenir Next" !important; font-size: 14px !important; font-style: normal !important; font-weight: 600 !important; line-height: 157% !important; } /* Callout links */ .fern-callout .flex > div:last-child a { color: var(--color-text-primary) !important; font-feature-settings: 'liga' off, 'clig' off !important; font-family: "Avenir Next" !important; font-size: 14px !important; font-style: normal !important; font-weight: 400 !important; line-height: 157% !important; text-decoration-line: underline !important; text-decoration-style: solid !important; text-decoration-skip-ink: none !important; text-decoration-thickness: auto !important; text-underline-offset: auto !important; text-underline-position: from-font !important; } /* Inline code inside callouts — transparent background, border matches callout text color */ .fern-callout code:not(.code-block) { border: 1px solid var(--color-text-primary) !important; background: transparent !important; } .dark .fern-callout code:not(.code-block) { border: 1px solid var(--color-white) !important; background: transparent !important; } /* Warning callout */ .fern-callout[data-intent="warning"] { display: flex !important; width: 100% !important; padding: 16px !important; align-items: flex-start !important; gap: 16px !important; border-radius: 6px !important; background: #FEF9DF !important; } .fern-callout[data-intent="warning"] .flex > div:first-child svg { display: none !important; } .fern-callout[data-intent="warning"] .flex > div:first-child { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyLjIgMTcuNjMzNUwxNC4wMDE2IDMuMzk1NjlDMTMuNzk2NyAzLjA0Njg3IDEzLjUwNDIgMi43NTc2NCAxMy4xNTMyIDIuNTU2NjhDMTIuODAyMSAyLjM1NTcyIDEyLjQwNDYgMi4yNSAxMiAyLjI1QzExLjU5NTUgMi4yNSAxMS4xOTggMi4zNTU3MiAxMC44NDY5IDIuNTU2NjhDMTAuNDk1OCAyLjc1NzY0IDEwLjIwMzMgMy4wNDY4NyA5Ljk5ODQ3IDMuMzk1NjlMMS44MDAwMyAxNy42MzM1QzEuNjAyOTEgMTcuOTcwOSAxLjQ5OTAyIDE4LjM1NDYgMS40OTkwMiAxOC43NDU0QzEuNDk5MDIgMTkuMTM2MSAxLjYwMjkxIDE5LjUxOTkgMS44MDAwMyAxOS44NTczQzIuMDAyMjggMjAuMjA4MiAyLjI5NDI1IDIwLjQ5OSAyLjY0NTk5IDIwLjY5OThDMi45OTc3MyAyMC45MDA2IDMuMzk2NTggMjEuMDA0MyAzLjgwMTU5IDIxLjAwMDFIMjAuMTk4NUMyMC42MDMyIDIxLjAwMzkgMjEuMDAxNiAyMC45MDAxIDIxLjM1MyAyMC42OTkzQzIxLjcwNDQgMjAuNDk4NSAyMS45OTYxIDIwLjIwNzkgMjIuMTk4MiAxOS44NTczQzIyLjM5NTYgMTkuNTIgMjIuNDk5OCAxOS4xMzY0IDIyLjUwMDEgMTguNzQ1NkMyMi41MDA0IDE4LjM1NDkgMjIuMzk2OSAxNy45NzExIDIyLjIgMTcuNjMzNVpNMjAuODk5NyAxOS4xMDYzQzIwLjgyODIgMTkuMjI4MiAyMC43MjU2IDE5LjMyOSAyMC42MDI0IDE5LjM5ODFDMjAuNDc5MiAxOS40NjczIDIwLjMzOTggMTkuNTAyNSAyMC4xOTg1IDE5LjUwMDFIMy44MDE1OUMzLjY2MDI5IDE5LjUwMjUgMy41MjA4OCAxOS40NjczIDMuMzk3NjUgMTkuMzk4MUMzLjI3NDQyIDE5LjMyOSAzLjE3MTgxIDE5LjIyODIgMy4xMDAzNCAxOS4xMDYzQzMuMDM1NiAxOC45OTY3IDMuMDAxNDUgMTguODcxNyAzLjAwMTQ1IDE4Ljc0NDRDMy4wMDE0NSAxOC42MTcxIDMuMDM1NiAxOC40OTIyIDMuMTAwMzQgMTguMzgyNkwxMS4yOTg4IDQuMTQ0NzVDMTEuMzcxNyA0LjAyMzQxIDExLjQ3NDggMy45MjMwMSAxMS41OTggMy44NTMzQzExLjcyMTIgMy43ODM2IDExLjg2MDMgMy43NDY5NiAxMi4wMDE5IDMuNzQ2OTZDMTIuMTQzNSAzLjc0Njk2IDEyLjI4MjYgMy43ODM2IDEyLjQwNTggMy44NTMzQzEyLjUyOSAzLjkyMzAxIDEyLjYzMjEgNC4wMjM0MSAxMi43MDUgNC4xNDQ3NUwyMC45MDM1IDE4LjM4MjZDMjAuOTY3NiAxOC40OTI1IDIxLjAwMTEgMTguNjE3NyAyMS4wMDA1IDE4Ljc0NUMyMC45OTk4IDE4Ljg3MjMgMjAuOTY1IDE4Ljk5NyAyMC44OTk3IDE5LjEwNjNaTTExLjI1IDEzLjUwMDFWOS43NTAwNkMxMS4yNSA5LjU1MTE1IDExLjMyOSA5LjM2MDM4IDExLjQ2OTcgOS4yMTk3M0MxMS42MTA0IDkuMDc5MDggMTEuODAxMSA5LjAwMDA2IDEyIDkuMDAwMDZDMTIuMTk4OSA5LjAwMDA2IDEyLjM4OTcgOS4wNzkwOCAxMi41MzA0IDkuMjE5NzNDMTIuNjcxIDkuMzYwMzggMTIuNzUgOS41NTExNSAxMi43NSA5Ljc1MDA2VjEzLjUwMDFDMTIuNzUgMTMuNjk5IDEyLjY3MSAxMy44ODk3IDEyLjUzMDQgMTQuMDMwNEMxMi4zODk3IDE0LjE3MSAxMi4xOTg5IDE0LjI1MDEgMTIgMTQuMjUwMUMxMS44MDExIDE0LjI1MDEgMTEuNjEwNCAxNC4xNzEgMTEuNDY5NyAxNC4wMzA0QzExLjMyOSAxMy44ODk3IDExLjI1IDEzLjY5OSAxMS4yNSAxMy41MDAxWk0xMy4xMjUgMTYuODc1MUMxMy4xMjUgMTcuMDk3NiAxMy4wNTkgMTcuMzE1MSAxMi45MzU0IDE3LjUwMDFDMTIuODExOCAxNy42ODUxIDEyLjYzNjEgMTcuODI5MyAxMi40MzA1IDE3LjkxNDRDMTIuMjI1IDE3Ljk5OTYgMTEuOTk4OCAxOC4wMjE5IDExLjc4MDYgMTcuOTc4NEMxMS41NjIzIDE3LjkzNSAxMS4zNjE5IDE3LjgyNzkgMTEuMjA0NSAxNy42NzA2QzExLjA0NzIgMTcuNTEzMiAxMC45NDAxIDE3LjMxMjggMTAuODk2NiAxNy4wOTQ1QzEwLjg1MzIgMTYuODc2MyAxMC44NzU1IDE2LjY1MDEgMTAuOTYwNyAxNi40NDQ1QzExLjA0NTggMTYuMjM5IDExLjE5IDE2LjA2MzMgMTEuMzc1IDE1LjkzOTdDMTEuNTYgMTUuODE2IDExLjc3NzUgMTUuNzUwMSAxMiAxNS43NTAxQzEyLjI5ODQgMTUuNzUwMSAxMi41ODQ1IDE1Ljg2ODYgMTIuNzk1NSAxNi4wNzk2QzEzLjAwNjUgMTYuMjkwNSAxMy4xMjUgMTYuNTc2NyAxMy4xMjUgMTYuODc1MVoiIGZpbGw9IiM2RDc2ODIiLz4KPC9zdmc+Cg==") !important; background-repeat: no-repeat !important; background-size: 24px 24px !important; width: 24px !important; height: 24px !important; min-width: 24px !important; } /* Success callout */ .fern-callout[data-intent="success"] { display: flex !important; width: 100% !important; padding: 16px !important; align-items: flex-start !important; gap: 16px !important; border-radius: 6px !important; background: #EAF9E8 !important; } .fern-callout[data-intent="success"] .flex > div:first-child svg { display: none !important; } .fern-callout[data-intent="success"] .flex > div:first-child { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjI4MDYgOS4yMTkzN0MxNi4zNTA0IDkuMjg5MDMgMTYuNDA1NyA5LjM3MTc1IDE2LjQ0MzQgOS40NjI3OUMxNi40ODEyIDkuNTUzODQgMTYuNTAwNiA5LjY1MTQ0IDE2LjUwMDYgOS43NUMxNi41MDA2IDkuODQ4NTYgMTYuNDgxMiA5Ljk0NjE2IDE2LjQ0MzQgMTAuMDM3MkMxNi40MDU3IDEwLjEyODMgMTYuMzUwNCAxMC4yMTEgMTYuMjgwNiAxMC4yODA2TDExLjAzMDYgMTUuNTMwNkMxMC45NjEgMTUuNjAwNCAxMC44NzgzIDE1LjY1NTcgMTAuNzg3MiAxNS42OTM0QzEwLjY5NjIgMTUuNzMxMiAxMC41OTg2IDE1Ljc1MDYgMTAuNSAxNS43NTA2QzEwLjQwMTQgMTUuNzUwNiAxMC4zMDM4IDE1LjczMTIgMTAuMjEyOCAxNS42OTM0QzEwLjEyMTggMTUuNjU1NyAxMC4wMzkgMTUuNjAwNCA5Ljk2OTM4IDE1LjUzMDZMNy43MTkzOCAxMy4yODA2QzcuNTc4NjUgMTMuMTM5OSA3LjQ5OTU5IDEyLjk0OSA3LjQ5OTU5IDEyLjc1QzcuNDk5NTkgMTIuNTUxIDcuNTc4NjUgMTIuMzYwMSA3LjcxOTM4IDEyLjIxOTRDNy44NjAxMSAxMi4wNzg2IDguMDUwOTggMTEuOTk5NiA4LjI1IDExLjk5OTZDOC40NDkwMyAxMS45OTk2IDguNjM5OSAxMi4wNzg2IDguNzgwNjMgMTIuMjE5NEwxMC41IDEzLjkzOTdMMTUuMjE5NCA5LjIxOTM3QzE1LjI4OSA5LjE0OTY0IDE1LjM3MTggOS4wOTQzMiAxNS40NjI4IDkuMDU2NThDMTUuNTUzOCA5LjAxODg0IDE1LjY1MTQgOC45OTk0MSAxNS43NSA4Ljk5OTQxQzE1Ljg0ODYgOC45OTk0MSAxNS45NDYyIDkuMDE4ODQgMTYuMDM3MiA5LjA1NjU4QzE2LjEyODMgOS4wOTQzMiAxNi4yMTEgOS4xNDk2NCAxNi4yODA2IDkuMjE5MzdaTTIxLjc1IDEyQzIxLjc1IDEzLjkyODQgMjEuMTc4MiAxNS44MTM0IDIwLjEwNjggMTcuNDE2OEMxOS4wMzU1IDE5LjAyMDIgMTcuNTEyNyAyMC4yNjk5IDE1LjczMTIgMjEuMDA3OEMxMy45NDk2IDIxLjc0NTggMTEuOTg5MiAyMS45Mzg5IDEwLjA5NzkgMjEuNTYyN0M4LjIwNjU2IDIxLjE4NjUgNi40NjkyOCAyMC4yNTc5IDUuMTA1NzEgMTguODk0M0MzLjc0MjE1IDE3LjUzMDcgMi44MTM1NSAxNS43OTM0IDIuNDM3MzUgMTMuOTAyMUMyLjA2MTE0IDEyLjAxMDggMi4yNTQyMiAxMC4wNTA0IDIuOTkyMTggOC4yNjg4NEMzLjczMDEzIDYuNDg3MjYgNC45Nzk4MiA0Ljk2NDUxIDYuNTgzMTkgMy44OTMxN0M4LjE4NjU3IDIuODIxODMgMTAuMDcxNiAyLjI1IDEyIDIuMjVDMTQuNTg1IDIuMjUyNzMgMTcuMDYzNCAzLjI4MDg0IDE4Ljg5MTMgNS4xMDg3MkMyMC43MTkyIDYuOTM2NjEgMjEuNzQ3MyA5LjQxNDk4IDIxLjc1IDEyWk0yMC4yNSAxMkMyMC4yNSAxMC4zNjgzIDE5Ljc2NjEgOC43NzMyNSAxOC44NTk2IDcuNDE2NTVDMTcuOTUzMSA2LjA1OTg0IDE2LjY2NDYgNS4wMDI0MiAxNS4xNTcxIDQuMzc3OTlDMTMuNjQ5NyAzLjc1MzU3IDExLjk5MDkgMy41OTAxOSAxMC4zOTA1IDMuOTA4NTJDOC43OTAxNyA0LjIyNjg1IDcuMzIwMTYgNS4wMTI1OSA2LjE2NjM3IDYuMTY2MzdDNS4wMTI1OSA3LjMyMDE1IDQuMjI2ODUgOC43OTAxNiAzLjkwODUzIDEwLjM5MDVDMy41OTAyIDExLjk5MDggMy43NTM1OCAxMy42NDk2IDQuMzc4IDE1LjE1NzFDNS4wMDI0MiAxNi42NjQ2IDYuMDU5ODQgMTcuOTUzMSA3LjQxNjU1IDE4Ljg1OTZDOC43NzMyNiAxOS43NjYxIDEwLjM2ODMgMjAuMjUgMTIgMjAuMjVDMTQuMTg3MyAyMC4yNDc1IDE2LjI4NDMgMTkuMzc3NSAxNy44MzA5IDE3LjgzMDlDMTkuMzc3NSAxNi4yODQzIDIwLjI0NzUgMTQuMTg3MyAyMC4yNSAxMloiIGZpbGw9IiM2RDc2ODIiLz4KPC9zdmc+Cg==") !important; background-repeat: no-repeat !important; background-size: 24px 24px !important; width: 24px !important; height: 24px !important; min-width: 24px !important; } /* Warning callout — dark mode */ .dark .fern-callout[data-intent="warning"] { background: #4A3800 !important; } .dark .fern-callout[data-intent="warning"] .flex > div:last-child { color: var(--color-white) !important; } .dark .fern-callout[data-intent="warning"] .flex > div:last-child * { color: var(--color-white) !important; } .dark .fern-callout[data-intent="warning"] .flex > div:first-child { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyLjIgMTcuNjMzNUwxNC4wMDE2IDMuMzk1NjlDMTMuNzk2NyAzLjA0Njg3IDEzLjUwNDIgMi43NTc2NCAxMy4xNTMyIDIuNTU2NjhDMTIuODAyMSAyLjM1NTcyIDEyLjQwNDYgMi4yNSAxMiAyLjI1QzExLjU5NTUgMi4yNSAxMS4xOTggMi4zNTU3MiAxMC44NDY5IDIuNTU2NjhDMTAuNDk1OCAyLjc1NzY0IDEwLjIwMzMgMy4wNDY4NyA5Ljk5ODQ3IDMuMzk1NjlMMS44MDAwMyAxNy42MzM1QzEuNjAyOTEgMTcuOTcwOSAxLjQ5OTAyIDE4LjM1NDYgMS40OTkwMiAxOC43NDU0QzEuNDk5MDIgMTkuMTM2MSAxLjYwMjkxIDE5LjUxOTkgMS44MDAwMyAxOS44NTczQzIuMDAyMjggMjAuMjA4MiAyLjI5NDI1IDIwLjQ5OSAyLjY0NTk5IDIwLjY5OThDMi45OTc3MyAyMC45MDA2IDMuMzk2NTggMjEuMDA0MyAzLjgwMTU5IDIxLjAwMDFIMjAuMTk4NUMyMC42MDMyIDIxLjAwMzkgMjEuMDAxNiAyMC45MDAxIDIxLjM1MyAyMC42OTkzQzIxLjcwNDQgMjAuNDk4NSAyMS45OTYxIDIwLjIwNzkgMjIuMTk4MiAxOS44NTczQzIyLjM5NTYgMTkuNTIgMjIuNDk5OCAxOS4xMzY0IDIyLjUwMDEgMTguNzQ1NkMyMi41MDA0IDE4LjM1NDkgMjIuMzk2OSAxNy45NzExIDIyLjIgMTcuNjMzNVpNMjAuODk5NyAxOS4xMDYzQzIwLjgyODIgMTkuMjI4MiAyMC43MjU2IDE5LjMyOSAyMC42MDI0IDE5LjM5ODFDMjAuNDc5MiAxOS40NjczIDIwLjMzOTggMTkuNTAyNSAyMC4xOTg1IDE5LjUwMDFIMy44MDE1OUMzLjY2MDI5IDE5LjUwMjUgMy41MjA4OCAxOS40NjczIDMuMzk3NjUgMTkuMzk4MUMzLjI3NDQyIDE5LjMyOSAzLjE3MTgxIDE5LjIyODIgMy4xMDAzNCAxOS4xMDYzQzMuMDM1NiAxOC45OTY3IDMuMDAxNDUgMTguODcxNyAzLjAwMTQ1IDE4Ljc0NDRDMy4wMDE0NSAxOC42MTcxIDMuMDM1NiAxOC40OTIyIDMuMTAwMzQgMTguMzgyNkwxMS4yOTg4IDQuMTQ0NzVDMTEuMzcxNyA0LjAyMzQxIDExLjQ3NDggMy45MjMwMSAxMS41OTggMy44NTMzQzExLjcyMTIgMy43ODM2IDExLjg2MDMgMy43NDY5NiAxMi4wMDE5IDMuNzQ2OTZDMTIuMTQzNSAzLjc0Njk2IDEyLjI4MjYgMy43ODM2IDEyLjQwNTggMy44NTMzQzEyLjUyOSAzLjkyMzAxIDEyLjYzMjEgNC4wMjM0MSAxMi43MDUgNC4xNDQ3NUwyMC45MDM1IDE4LjM4MjZDMjAuOTY3NiAxOC40OTI1IDIxLjAwMTEgMTguNjE3NyAyMS4wMDA1IDE4Ljc0NUMyMC45OTk4IDE4Ljg3MjMgMjAuOTY1IDE4Ljk5NyAyMC44OTk3IDE5LjEwNjNaTTExLjI1IDEzLjUwMDFWOS43NTAwNkMxMS4yNSA5LjU1MTE1IDExLjMyOSA5LjM2MDM4IDExLjQ2OTcgOS4yMTk3M0MxMS42MTA0IDkuMDc5MDggMTEuODAxMSA5LjAwMDA2IDEyIDkuMDAwMDZDMTIuMTk4OSA5LjAwMDA2IDEyLjM4OTcgOS4wNzkwOCAxMi41MzA0IDkuMjE5NzNDMTIuNjcxIDkuMzYwMzggMTIuNzUgOS41NTExNSAxMi43NSA5Ljc1MDA2VjEzLjUwMDFDMTIuNzUgMTMuNjk5IDEyLjY3MSAxMy44ODk3IDEyLjUzMDQgMTQuMDMwNEMxMi4zODk3IDE0LjE3MSAxMi4xOTg5IDE0LjI1MDEgMTIgMTQuMjUwMUMxMS44MDExIDE0LjI1MDEgMTEuNjEwNCAxNC4xNzEgMTEuNDY5NyAxNC4wMzA0QzExLjMyOSAxMy44ODk3IDExLjI1IDEzLjY5OSAxMS4yNSAxMy41MDAxWk0xMy4xMjUgMTYuODc1MUMxMy4xMjUgMTcuMDk3NiAxMy4wNTkgMTcuMzE1MSAxMi45MzU0IDE3LjUwMDFDMTIuODExOCAxNy42ODUxIDEyLjYzNjEgMTcuODI5MyAxMi40MzA1IDE3LjkxNDRDMTIuMjI1IDE3Ljk5OTYgMTEuOTk4OCAxOC4wMjE5IDExLjc4MDYgMTcuOTc4NEMxMS41NjIzIDE3LjkzNSAxMS4zNjE5IDE3LjgyNzkgMTEuMjA0NSAxNy42NzA2QzExLjA0NzIgMTcuNTEzMiAxMC45NDAxIDE3LjMxMjggMTAuODk2NiAxNy4wOTQ1QzEwLjg1MzIgMTYuODc2MyAxMC44NzU1IDE2LjY1MDEgMTAuOTYwNyAxNi40NDQ1QzExLjA0NTggMTYuMjM5IDExLjE5IDE2LjA2MzMgMTEuMzc1IDE1LjkzOTdDMTEuNTYgMTUuODE2IDExLjc3NzUgMTUuNzUwMSAxMiAxNS43NTAxQzEyLjI5ODQgMTUuNzUwMSAxMi41ODQ1IDE1Ljg2ODYgMTIuNzk1NSAxNi4wNzk2QzEzLjAwNjUgMTYuMjkwNSAxMy4xMjUgMTYuNTc2NyAxMy4xMjUgMTYuODc1MVoiIGZpbGw9IiNGRkZGRkYiLz4KPC9zdmc+Cg==") !important; } /* Success callout — dark mode */ .dark .fern-callout[data-intent="success"] { background: #0F3320 !important; } .dark .fern-callout[data-intent="success"] .flex > div:last-child { color: var(--color-white) !important; } .dark .fern-callout[data-intent="success"] .flex > div:last-child * { color: var(--color-white) !important; } .dark .fern-callout[data-intent="success"] .flex > div:first-child { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjI4MDYgOS4yMTkzN0MxNi4zNTA0IDkuMjg5MDMgMTYuNDA1NyA5LjM3MTc1IDE2LjQ0MzQgOS40NjI3OUMxNi40ODEyIDkuNTUzODQgMTYuNTAwNiA5LjY1MTQ0IDE2LjUwMDYgOS43NUMxNi41MDA2IDkuODQ4NTYgMTYuNDgxMiA5Ljk0NjE2IDE2LjQ0MzQgMTAuMDM3MkMxNi40MDU3IDEwLjEyODMgMTYuMzUwNCAxMC4yMTEgMTYuMjgwNiAxMC4yODA2TDExLjAzMDYgMTUuNTMwNkMxMC45NjEgMTUuNjAwNCAxMC44NzgzIDE1LjY1NTcgMTAuNzg3MiAxNS42OTM0QzEwLjY5NjIgMTUuNzMxMiAxMC41OTg2IDE1Ljc1MDYgMTAuNSAxNS43NTA2QzEwLjQwMTQgMTUuNzUwNiAxMC4zMDM4IDE1LjczMTIgMTAuMjEyOCAxNS42OTM0QzEwLjEyMTggMTUuNjU1NyAxMC4wMzkgMTUuNjAwNCA5Ljk2OTM4IDE1LjUzMDZMNy43MTkzOCAxMy4yODA2QzcuNTc4NjUgMTMuMTM5OSA3LjQ5OTU5IDEyLjk0OSA3LjQ5OTU5IDEyLjc1QzcuNDk5NTkgMTIuNTUxIDcuNTc4NjUgMTIuMzYwMSA3LjcxOTM4IDEyLjIxOTRDNy44NjAxMSAxMi4wNzg2IDguMDUwOTggMTEuOTk5NiA4LjI1IDExLjk5OTZDOC40NDkwMyAxMS45OTk2IDguNjM5OSAxMi4wNzg2IDguNzgwNjMgMTIuMjE5NEwxMC41IDEzLjkzOTdMMTUuMjE5NCA5LjIxOTM3QzE1LjI4OSA5LjE0OTY0IDE1LjM3MTggOS4wOTQzMiAxNS40NjI4IDkuMDU2NThDMTUuNTUzOCA5LjAxODg0IDE1LjY1MTQgOC45OTk0MSAxNS43NSA4Ljk5OTQxQzE1Ljg0ODYgOC45OTk0MSAxNS45NDYyIDkuMDE4ODQgMTYuMDM3MiA5LjA1NjU4QzE2LjEyODMgOS4wOTQzMiAxNi4yMTEgOS4xNDk2NCAxNi4yODA2IDkuMjE5MzdaTTIxLjc1IDEyQzIxLjc1IDEzLjkyODQgMjEuMTc4MiAxNS44MTM0IDIwLjEwNjggMTcuNDE2OEMxOS4wMzU1IDE5LjAyMDIgMTcuNTEyNyAyMC4yNjk5IDE1LjczMTIgMjEuMDA3OEMxMy45NDk2IDIxLjc0NTggMTEuOTg5MiAyMS45Mzg5IDEwLjA5NzkgMjEuNTYyN0M4LjIwNjU2IDIxLjE4NjUgNi40NjkyOCAyMC4yNTc5IDUuMTA1NzEgMTguODk0M0MzLjc0MjE1IDE3LjUzMDcgMi44MTM1NSAxNS43OTM0IDIuNDM3MzUgMTMuOTAyMUMyLjA2MTE0IDEyLjAxMDggMi4yNTQyMiAxMC4wNTA0IDIuOTkyMTggOC4yNjg4NEMzLjczMDEzIDYuNDg3MjYgNC45Nzk4MiA0Ljk2NDUxIDYuNTgzMTkgMy44OTMxN0M4LjE4NjU3IDIuODIxODMgMTAuMDcxNiAyLjI1IDEyIDIuMjVDMTQuNTg1IDIuMjUyNzMgMTcuMDYzNCAzLjI4MDg0IDE4Ljg5MTMgNS4xMDg3MkMyMC43MTkyIDYuOTM2NjEgMjEuNzQ3MyA5LjQxNDk4IDIxLjc1IDEyWk0yMC4yNSAxMkMyMC4yNSAxMC4zNjgzIDE5Ljc2NjEgOC43NzMyNSAxOC44NTk2IDcuNDE2NTVDMTcuOTUzMSA2LjA1OTg0IDE2LjY2NDYgNS4wMDI0MiAxNS4xNTcxIDQuMzc3OTlDMTMuNjQ5NyAzLjc1MzU3IDExLjk5MDkgMy41OTAxOSAxMC4zOTA1IDMuOTA4NTJDOC43OTAxNyA0LjIyNjg1IDcuMzIwMTYgNS4wMTI1OSA2LjE2NjM3IDYuMTY2MzdDNS4wMTI1OSA3LjMyMDE1IDQuMjI2ODUgOC43OTAxNiAzLjkwODUzIDEwLjM5MDVDMy41OTAyIDExLjk5MDggMy43NTM1OCAxMy42NDk2IDQuMzc4IDE1LjE1NzFDNS4wMDI0MiAxNi42NjQ2IDYuMDU5ODQgMTcuOTUzMSA3LjQxNjU1IDE4Ljg1OTZDOC43NzMyNiAxOS43NjYxIDEwLjM2ODMgMjAuMjUgMTIgMjAuMjVDMTQuMTg3MyAyMC4yNDc1IDE2LjI4NDMgMTkuMzc3NSAxNy44MzA5IDE3LjgzMDlDMTkuMzc3NSAxNi4yODQzIDIwLjI0NzUgMTQuMTg3MyAyMC4yNSAxMloiIGZpbGw9IiNGRkZGRkYiLz4KPC9zdmc+Cg==") !important; } /* Primary callout */ .fern-callout[data-intent="note"] { display: flex !important; width: 100% !important; padding: 16px !important; align-items: flex-start !important; gap: 16px !important; border-radius: 6px !important; background: #E8F5FF !important; } .fern-callout[data-intent="note"] .flex > div:first-child svg { display: none !important; } .fern-callout[data-intent="note"] .flex > div:first-child { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExIDE3SDEzVjExSDExVjE3Wk0xMiA5QzEyLjI4MzMgOSAxMi41MjA4IDguOTA0MTcgMTIuNzEyNSA4LjcxMjVDMTIuOTA0MiA4LjUyMDgzIDEzIDguMjgzMzMgMTMgOEMxMyA3LjcxNjY3IDEyLjkwNDIgNy40NzkxNyAxMi43MTI1IDcuMjg3NUMxMi41MjA4IDcuMDk1ODMgMTIuMjgzMyA3IDEyIDdDMTEuNzE2NyA3IDExLjQ3OTIgNy4wOTU4MyAxMS4yODc1IDcuMjg3NUMxMS4wOTU4IDcuNDc5MTcgMTEgNy43MTY2NyAxMSA4QzExIDguMjgzMzMgMTEuMDk1OCA4LjUyMDgzIDExLjI4NzUgOC43MTI1QzExLjQ3OTIgOC45MDQxNyAxMS43MTY3IDkgMTIgOVpNMTIgMjJDMTAuNjE2NyAyMiA5LjMxNjY3IDIxLjczNzUgOC4xIDIxLjIxMjVDNi44ODMzMyAyMC42ODc1IDUuODI1IDE5Ljk3NSA0LjkyNSAxOS4wNzVDNC4wMjUgMTguMTc1IDMuMzEyNSAxNy4xMTY3IDIuNzg3NSAxNS45QzIuMjYyNSAxNC42ODMzIDIgMTMuMzgzMyAyIDEyQzIgMTAuNjE2NyAyLjI2MjUgOS4zMTY2NyAyLjc4NzUgOC4xQzMuMzEyNSA2Ljg4MzMzIDQuMDI1IDUuODI1IDQuOTI1IDQuOTI1QzUuODI1IDQuMDI1IDYuODgzMzMgMy4zMTI1IDguMSAyLjc4NzVDOS4zMTY2NyAyLjI2MjUgMTAuNjE2NyAyIDEyIDJDMTMuMzgzMyAyIDE0LjY4MzMgMi4yNjI1IDE1LjkgMi43ODc1QzE3LjExNjcgMy4zMTI1IDE4LjE3NSA0LjAyNSAxOS4wNzUgNC45MjVDMTkuOTc1IDUuODI1IDIwLjY4NzUgNi44ODMzMyAyMS4yMTI1IDguMUMyMS43Mzc1IDkuMzE2NjcgMjIgMTAuNjE2NyAyMiAxMkMyMiAxMy4zODMzIDIxLjczNzUgMTQuNjgzMyAyMS4yMTI1IDE1LjlDMjAuNjg3NSAxNy4xMTY3IDE5Ljk3NSAxOC4xNzUgMTkuMDc1IDE5LjA3NUMxOC4xNzUgMTkuOTc1IDE3LjExNjcgMjAuNjg3NSAxNS45IDIxLjIxMjVDMTQuNjgzMyAyMS43Mzc1IDEzLjM4MzMgMjIgMTIgMjJaTTEyIDIwQzE0LjIzMzMgMjAgMTYuMTI1IDE5LjIyNSAxNy42NzUgMTcuNjc1QzE5LjIyNSAxNi4xMjUgMjAgMTQuMjMzMyAyMCAxMkMyMCA5Ljc2NjY3IDE5LjIyNSA3Ljg3NSAxNy42NzUgNi4zMjVDMTYuMTI1IDQuNzc1IDE0LjIzMzMgNCAxMiA0QzkuNzY2NjcgNCA3Ljg3NSA0Ljc3NSA2LjMyNSA2LjMyNUM0Ljc3NSA3Ljg3NSA0IDkuNzY2NjcgNCAxMkM0IDE0LjIzMzMgNC43NzUgMTYuMTI1IDYuMzI1IDE3LjY3NUM3Ljg3NSAxOS4yMjUgOS43NjY2NyAyMCAxMiAyMFoiIGZpbGw9IiM2RDc2ODIiLz4KPC9zdmc+Cg==") !important; background-repeat: no-repeat !important; background-size: 24px 24px !important; width: 24px !important; height: 24px !important; min-width: 24px !important; } /* Note callout — dark mode */ .dark .fern-callout[data-intent="note"] { background: var(--color-border) !important; } .dark .fern-callout[data-intent="note"] .flex > div:last-child { color: var(--color-white) !important; } .dark .fern-callout[data-intent="note"] .flex > div:last-child * { color: var(--color-white) !important; } .dark .fern-callout[data-intent="note"] .flex > div:first-child { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExIDE3SDEzVjExSDExVjE3Wk0xMiA5QzEyLjI4MzMgOSAxMi41MjA4IDguOTA0MTcgMTIuNzEyNSA4LjcxMjVDMTIuOTA0MiA4LjUyMDgzIDEzIDguMjgzMzMgMTMgOEMxMyA3LjcxNjY3IDEyLjkwNDIgNy40NzkxNyAxMi43MTI1IDcuMjg3NUMxMi41MjA4IDcuMDk1ODMgMTIuMjgzMyA3IDEyIDdDMTEuNzE2NyA3IDExLjQ3OTIgNy4wOTU4MyAxMS4yODc1IDcuMjg3NUMxMS4wOTU4IDcuNDc5MTcgMTEgNy43MTY2NyAxMSA4QzExIDguMjgzMzMgMTEuMDk1OCA4LjUyMDgzIDExLjI4NzUgOC43MTI1QzExLjQ3OTIgOC45MDQxNyAxMS43MTY3IDkgMTIgOVpNMTIgMjJDMTAuNjE2NyAyMiA5LjMxNjY3IDIxLjczNzUgOC4xIDIxLjIxMjVDNi44ODMzMyAyMC42ODc1IDUuODI1IDE5Ljk3NSA0LjkyNSAxOS4wNzVDNC4wMjUgMTguMTc1IDMuMzEyNSAxNy4xMTY3IDIuNzg3NSAxNS45QzIuMjYyNSAxNC42ODMzIDIgMTMuMzgzMyAyIDEyQzIgMTAuNjE2NyAyLjI2MjUgOS4zMTY2NyAyLjc4NzUgOC4xQzMuMzEyNSA2Ljg4MzMzIDQuMDI1IDUuODI1IDQuOTI1IDQuOTI1QzUuODI1IDQuMDI1IDYuODgzMzMgMy4zMTI1IDguMSAyLjc4NzVDOS4zMTY2NyAyLjI2MjUgMTAuNjE2NyAyIDEyIDJDMTMuMzgzMyAyIDE0LjY4MzMgMi4yNjI1IDE1LjkgMi43ODc1QzE3LjExNjcgMy4zMTI1IDE4LjE3NSA0LjAyNSAxOS4wNzUgNC45MjVDMTkuOTc1IDUuODI1IDIwLjY4NzUgNi44ODMzMyAyMS4yMTI1IDguMUMyMS43Mzc1IDkuMTY2NyAyMiAxMC42MTY3IDIyIDEyQzIyIDEzLjM4MzMgMjEuNzM3NSAxNC42ODMzIDIxLjIxMjUgMTUuOUMyMC42ODc1IDE3LjExNjcgMTkuOTc1IDE4LjE3NSAxOS4wNzUgMTkuMDc1QzE4LjE3NSAxOS45NzUgMTcuMTE2NyAyMC42ODc1IDE1LjkgMjEuMjEyNUMxNC42ODMzIDIxLjczNzUgMTMuMzgzMyAyMiAxMiAyMlpNMTIgMjBDMTQuMjMzMyAyMCAxNi4xMjUgMTkuMjI1IDE3LjY3NSAxNy42NzVDMTkuMjI1IDE2LjEyNSAyMCAxNC4yMzMzIDIwIDEyQzIwIDkuNzY2NjcgMTkuMjI1IDcuODc1IDE3LjY3NSA2LjMyNUMxNi4xMjUgNC43NzUgMTQuMjMzMyA0IDEyIDRDOS43NjY2NyA0IDcuODc1IDQuNzc1IDYuMzI1IDYuMzI1QzQuNzc1IDcuODc1IDQgOS43NjY2NyA0IDEyQzQgMTQuMjMzMyA0Ljc3NSAxNi4xMjUgNi4zMjUgMTcuNjc1QzcuODc1IDE5LjIyNSA5Ljc2NjY3IDIwIDEyIDIwWiIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4=") !important; } /* Accordions */ .fern-accordion.fern-card { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; } .fern-accordion .fern-accordion-item { width: 100% !important; border: none !important; border-bottom: 1px solid #E0E0E0 !important; border-radius: 0 !important; } .dark .fern-accordion .fern-accordion-item { border-bottom-color: #3a3a3a !important; } .fern-accordion .fern-accordion-trigger { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; padding: 16px 0 !important; background: none !important; } .fern-accordion .fern-accordion-trigger-title { order: -1 !important; margin: 0 !important; font-size: 20px !important; font-weight: 600 !important; } .fern-accordion .fern-accordion-trigger-arrow { order: 1 !important; flex-shrink: 0 !important; width: 20px !important; height: 20px !important; background-color: var(--color-surface) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; } .fern-accordion .fern-accordion-trigger-arrow > * { width: 24px !important; height: 24px !important; } .dark .fern-accordion .fern-accordion-trigger-arrow { background-color: #2E2E2E !important; } .fern-accordion .fern-accordion-item > div > div { padding: 0 0 32px 0 !important; display: flex !important; flex-direction: column !important; } .fern-accordion .fern-accordion-item > div > div > *:first-child { margin-top: 0 !important; padding-top: 0 !important; } .fern-accordion .fern-accordion-item > div > div p { font-size: 14px !important; } .fern-accordion .fern-accordion-item > div > div h2, .fern-accordion .fern-accordion-item > div > div h3, .fern-accordion .fern-accordion-item > div > div h4 { font-size: 16px !important; margin: 0 !important; } .fern-accordion .fern-accordion-item > div > div ul, .fern-accordion .fern-accordion-item > div > div ol, .fern-accordion .fern-accordion-item > div > div li { font-size: 12px !important; } .fern-accordion .fern-accordion-item > div > div .fern-button, .fern-accordion .fern-accordion-item > div > div a[class*="button"], .fern-accordion .fern-accordion-item > div > div button { align-self: flex-start !important; width: auto !important; } .fern-accordion .fern-accordion-item > div > div .pl-3 { padding-left: 1.5em !important; } .fern-accordion .fern-accordion-item > div > div ul { margin-top: 0 !important; } .fern-accordion .fern-accordion-item > div > div h2, .fern-accordion .fern-accordion-item > div > div h3, .fern-accordion .fern-accordion-item > div > div h4 { margin-bottom: 16px !important; } /* Tables */ .fern-table-root { border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; } table.fern-table { border: none !important; border-collapse: collapse !important; border-radius: 0 !important; box-shadow: none !important; } .fern-table tr { padding: 16px 8px !important; align-items: center !important; } .fern-table th, .fern-table thead th { background: transparent !important; border: none !important; border-bottom: 1px solid #E0E0E0 !important; font-weight: 600 !important; color: inherit !important; padding: 16px 8px !important; } .dark .fern-table th, .dark .fern-table thead th { border-bottom-color: var(--color-white) !important; } .fern-table td, .fern-table tbody td { border: none !important; border-bottom: 1px solid #E0E0E0 !important; padding: 16px 8px !important; } .dark .fern-table td, .dark .fern-table tbody td { border-bottom-color: var(--color-white) !important; } .fern-table tr:last-child td { border-bottom: none !important; } /* Tables nested inside callouts */ /* Transparent background — target every element in the rendering chain */ .fern-callout .fern-table-root, .fern-callout [style*="display: table"], .fern-callout table.fern-table, .fern-callout .fern-table thead, .fern-callout .fern-table tbody, .fern-callout .fern-table tr, .fern-callout .fern-table th, .fern-callout .fern-table td { background: transparent !important; background-color: transparent !important; } /* Stretch left to cover the icon (24px) + flex gap (12px) */ .fern-callout .fern-table-root { margin-left: calc(-24px - 12px) !important; width: calc(100% + 24px + 12px) !important; } /* Allow the table to overflow out of the content div and the callout itself */ .fern-callout:has(.fern-table-root) { overflow: visible !important; } .fern-callout:has(.fern-table-root) .flex > div:last-child { overflow-x: visible !important; } /* Search bar text */ #fern-search-button span { font-weight: 600 !important; color: var(--color-text-primary) !important; } #fern-search-button * { color: var(--color-text-primary) !important; } .dark .fern-kbd { background: #2B2D31 !important; border-color: #2B2D31 !important; color: #fff !important; } .dark .fern-kbd * { color: #fff !important; } /* Ask AI button text */ .fern-button-content:has(#fern-ask-ai-button-icon) .fern-button-text { font-weight: 600 !important; color: var(--color-text-primary) !important; } /* Nudge icon+text left and add gap between them */ .fern-button-content:has(#fern-ask-ai-button-icon) { margin-left: -4px !important; gap: 6px !important; } /* Ask AI button — Contentful AI icon, left-aligned */ #fern-ask-ai-button-icon { display: none !important; } .fern-button-content:has(#fern-ask-ai-button-icon)::before { content: ''; display: inline-block; width: 16.667px; height: 16.667px; transition: none !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjU3NDggMy43MzU1MkMxNy41OTgyIDQuMTEyMzQgMTYuODIzMyA0Ljg4NzI2IDE2LjQ0NjUgNS44NjM4OEMxNi4zNTYzIDYuMDk3NDYgMTYuMDM3OCA2LjA5NzQ2IDE1Ljk0NzYgNS44NjM4OEMxNS41NzA3IDQuODg3MjYgMTQuNzkwNSA0LjExMjM0IDEzLjgxMzggMy43MzU1MkMxMy41ODAzIDMuNjQ1MyAxMy41ODAzIDMuMzI2ODEgMTMuODEzOCAzLjIzNjZDMTQuNzkwNSAyLjg1OTcyIDE1LjU2NTQgMi4wNzk0OSAxNS45NDc2IDEuMTAyODhDMTYuMDM3OCAwLjg2OTM1NCAxNi4zNTYzIDAuODY5MzU0IDE2LjQ0NjUgMS4xMDI4OEMxNi44MjMzIDIuMDc5NDkgMTcuNTk4MiAyLjg1NDQxIDE4LjU3NDggMy4yMzY2QzE4LjgwODQgMy4zMjY4MSAxOC44MDg0IDMuNjQ1MyAxOC41NzQ4IDMuNzM1NTJaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMTAwM18yNTYzOSkiLz4KPHBhdGggZD0iTTE2LjM5MDcgMTIuMDg2NkMxMy40MDA2IDEzLjI0MTggMTEuMDE4OCAxNS42MjM3IDkuODYzNTggMTguNjEzOEM5LjU4NzU3IDE5LjMyNDMgOC42MDYxOCAxOS4zMjQzIDguMzMwMTggMTguNjEzOEM3LjE2OTk1IDE1LjYyMzcgNC43ODI5MiAxMy4yNDE4IDEuNzkyODEgMTIuMDg2NkMxLjA4MjMzIDExLjgxMDYgMS4wODIzMyAxMC44MjkzIDEuNzkyODEgMTAuNTUzM0M0Ljc4ODA2IDkuMzkyOTcgNy4xNjk5NSA3LjAwNTk5IDguMzMwMTggNC4wMTU4M0M4LjYwNjE4IDMuMzA1MzUgOS41ODc1NyAzLjMwNTM1IDkuODYzNTggNC4wMTU4M0MxMS4wMTg4IDcuMDExMDggMTMuNDAwNiA5LjM5Mjk3IDE2LjM5MDcgMTAuNTUzM0MxNy4xMDEyIDEwLjgyOTMgMTcuMTAxMiAxMS44MTA2IDE2LjM5MDcgMTIuMDg2NloiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcl8xMDAzXzI1NjM5KSIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzEwMDNfMjU2MzkiIHgxPSIxLjcxNDMxIiB5MT0iMC43NTM1NTMiIHgyPSIxOC4yMTY3IiB5Mj0iMTcuNTI3OCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBvZmZzZXQ9IjAuMiIgc3RvcC1jb2xvcj0iIzE4NzJFNSIvPgo8c3RvcCBvZmZzZXQ9IjAuNCIgc3RvcC1jb2xvcj0iIzhDMkVFQSIvPgo8c3RvcCBvZmZzZXQ9IjAuNiIgc3RvcC1jb2xvcj0iI0U2NTMyNSIvPgo8c3RvcCBvZmZzZXQ9IjAuOCIgc3RvcC1jb2xvcj0iI0VBQUYwOSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMTAwM18yNTYzOSIgeDE9IjEuNzE0MzEiIHkxPSIwLjc1MzU1MyIgeDI9IjE4LjIxNjciIHkyPSIxNy41Mjc4IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIG9mZnNldD0iMC4yIiBzdG9wLWNvbG9yPSIjMTg3MkU1Ii8+CjxzdG9wIG9mZnNldD0iMC40IiBzdG9wLWNvbG9yPSIjOEMyRUVBIi8+CjxzdG9wIG9mZnNldD0iMC42IiBzdG9wLWNvbG9yPSIjRTY1MzI1Ii8+CjxzdG9wIG9mZnNldD0iMC44IiBzdG9wLWNvbG9yPSIjRUFBRjA5Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg=="); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } /* Ask AI panel header — match the main header nav height */ #fern-ask-ai-panel-header { min-height: 85px !important; box-sizing: border-box !important; } /* Ask AI panel header — same Contentful AI icon as the button */ #fern-ask-ai-panel-header-icon { display: none !important; } #fern-ask-ai-panel-header .flex:has(#fern-ask-ai-panel-header-icon)::before { content: ''; display: inline-block; width: 16.667px; height: 16.667px; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjU3NDggMy43MzU1MkMxNy41OTgyIDQuMTEyMzQgMTYuODIzMyA0Ljg4NzI2IDE2LjQ0NjUgNS44NjM4OEMxNi4zNTYzIDYuMDk3NDYgMTYuMDM3OCA2LjA5NzQ2IDE1Ljk0NzYgNS44NjM4OEMxNS41NzA3IDQuODg3MjYgMTQuNzkwNSA0LjExMjM0IDEzLjgxMzggMy43MzU1MkMxMy41ODAzIDMuNjQ1MyAxMy41ODAzIDMuMzI2ODEgMTMuODEzOCAzLjIzNjZDMTQuNzkwNSAyLjg1OTcyIDE1LjU2NTQgMi4wNzk0OSAxNS45NDc2IDEuMTAyODhDMTYuMDM3OCAwLjg2OTM1NCAxNi4zNTYzIDAuODY5MzU0IDE2LjQ0NjUgMS4xMDI4OEMxNi44MjMzIDIuMDc5NDkgMTcuNTk4MiAyLjg1NDQxIDE4LjU3NDggMy4yMzY2QzE4LjgwODQgMy4zMjY4MSAxOC44MDg0IDMuNjQ1MyAxOC41NzQ4IDMuNzM1NTJaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMTAwM18yNTYzOSkiLz4KPHBhdGggZD0iTTE2LjM5MDcgMTIuMDg2NkMxMy40MDA2IDEzLjI0MTggMTEuMDE4OCAxNS42MjM3IDkuODYzNTggMTguNjEzOEM5LjU4NzU3IDE5LjMyNDMgOC42MDYxOCAxOS4zMjQzIDguMzMwMTggMTguNjEzOEM3LjE2OTk1IDE1LjYyMzcgNC43ODI5MiAxMy4yNDE4IDEuNzkyODEgMTIuMDg2NkMxLjA4MjMzIDExLjgxMDYgMS4wODIzMyAxMC44MjkzIDEuNzkyODEgMTAuNTUzM0M0Ljc4ODA2IDkuMzkyOTcgNy4xNjk5NSA3LjAwNTk5IDguMzMwMTggNC4wMTU4M0M4LjYwNjE4IDMuMzA1MzUgOS41ODc1NyAzLjMwNTM1IDkuODYzNTggNC4wMTU4M0MxMS4wMTg4IDcuMDExMDggMTMuNDAwNiA5LjM5Mjk3IDE2LjM5MDcgMTAuNTUzM0MxNy4xMDEyIDEwLjgyOTMgMTcuMTAxMiAxMS44MTA2IDE2LjM5MDcgMTIuMDg2NloiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcl8xMDAzXzI1NjM5KSIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzEwMDNfMjU2MzkiIHgxPSIxLjcxNDMxIiB5MT0iMC43NTM1NTMiIHgyPSIxOC4yMTY3IiB5Mj0iMTcuNTI3OCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBvZmZzZXQ9IjAuMiIgc3RvcC1jb2xvcj0iIzE4NzJFNSIvPgo8c3RvcCBvZmZzZXQ9IjAuNCIgc3RvcC1jb2xvcj0iIzhDMkVFQSIvPgo8c3RvcCBvZmZzZXQ9IjAuNiIgc3RvcC1jb2xvcj0iI0U2NTMyNSIvPgo8c3RvcCBvZmZzZXQ9IjAuOCIgc3RvcC1jb2xvcj0iI0VBQUYwOSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MV9saW5lYXJfMTAwM18yNTYzOSIgeDE9IjEuNzE0MzEiIHkxPSIwLjc1MzU1MyIgeDI9IjE4LjIxNjciIHkyPSIxNy41Mjc4IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIG9mZnNldD0iMC4yIiBzdG9wLWNvbG9yPSIjMTg3MkU1Ii8+CjxzdG9wIG9mZnNldD0iMC40IiBzdG9wLWNvbG9yPSIjOEMyRUVBIi8+CjxzdG9wIG9mZnNldD0iMC42IiBzdG9wLWNvbG9yPSIjRTY1MzI1Ii8+CjxzdG9wIG9mZnNldD0iMC44IiBzdG9wLWNvbG9yPSIjRUFBRjA5Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg=="); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } /* Ask AI panel — open as overlay, don't shift page content or header */ [data-side-panel-open] { margin-right: 0 !important; } #fern-header { margin-right: 0 !important; right: 0 !important; width: 100% !important; } /* Ask AI panel — slide in/out matching original wrapper transition */ #fern-ask-ai-panel { transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.5s !important; } /* Below 768px Fern uses the Vaul drawer for Ask AI; the panel is never needed. Hide it via CSS so it vanishes atomically when the media query drops — before any JS runs, preventing a one-frame flash of the panel in its native position. */ @media (max-width: 767px) { #fern-ask-ai-panel { display: none !important; } } /* At 768–1200px: restyle #fern-ask-ai-panel (normally a persistent right-side rail) as a bottom drawer. The panel stays in the DOM even when "closed" — footer.tsx watches style.width changes and toggles body[data-ask-ai-open]. Default: hidden below screen. Open: slide up via the body attribute. */ @media (min-width: 768px) and (max-width: 1200px) { /* Include [data-side-panel-open] #fern-ask-ai-panel to match Fern's specificity (1,1,0) and override its right-rail positioning when Ask AI opens at this breakpoint. */ [data-side-panel-open] #fern-ask-ai-panel, #fern-ask-ai-panel { position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 85dvh !important; border-radius: 0 !important; border-left: none !important; border-top: none !important; /* Default: hidden off-screen. visibility delay keeps it hidden during slide-down. */ transform: translateY(100%) !important; visibility: hidden !important; transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.5s !important; } /* Prevent Fern from shifting the mobile sidebar left when Ask AI opens. Fern sets --ask-ai-panel-width on its sidebar via inline style to push it away from the right rail — but at this breakpoint the rail is a bottom drawer, so the right side should always stay at 0. */ #fern-sidebar { right: 0px !important; } /* Open state — slide up, immediately visible */ body[data-ask-ai-open] #fern-ask-ai-panel { transform: translateY(0) !important; visibility: visible !important; transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear !important; } /* When crossing <768px→≥768px with panel already open, skip the slide animation */ body[data-ask-ai-instant] #fern-ask-ai-panel { transition: none !important; transform: translateY(0) !important; visibility: visible !important; } /* Active drag — no transition, follows pointer exactly. body prefix raises specificity to (1,1,1) to beat body[data-ask-ai-open] #fern-ask-ai-panel. */ body #fern-ask-ai-panel[data-cf-dragging] { transition: none !important; transform: translateY(var(--cf-drag-y, 0px)) !important; visibility: visible !important; } /* Post-drag — animate to snap-back (0px) or dismiss (100%). Using 100% as the dismiss target matches the CSS closed state exactly, so cleanup after transitionend causes no further transition. */ body #fern-ask-ai-panel[data-cf-drag-release] { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important; transform: translateY(var(--cf-drag-y, 0px)) !important; visibility: visible !important; } /* Drag handle pill — matches Vaul's : bg-(--grayscale-a4) mx-auto mt-2 h-1.5 w-12 shrink-0 rounded-full */ #fern-ask-ai-panel::before { content: ''; display: block; width: 3rem; /* w-12 */ height: 6px; /* h-1.5 */ background: var(--grayscale-a4, rgba(0, 0, 0, 0.12)); border-radius: 9999px; margin: 0.5rem auto 0; /* mt-2 mx-auto */ flex-shrink: 0; } /* Backdrop overlay — footer.tsx creates #cf-ask-ai-overlay in the DOM. Shown only when body[data-ask-ai-open] is set by our JS. z-index 49 keeps it below the panel (z-50) so clicks on the panel still work. */ #cf-ask-ai-overlay { display: none; position: fixed; inset: 0; background-color: color-mix(in oklab, var(--color-black) 40%, transparent); z-index: 49; } body[data-ask-ai-open] #cf-ask-ai-overlay { display: block; } } /* When crossing ≥768→<768: suppress Vaul's open animation so it jumps directly to its natural snap-point position. We do NOT override transform here — Vaul's own CSS sets the correct open position (translateY(snap-point)). With only transition:none, Vaul reaches its natural open position instantly, and removing this rule causes no transition. */ body[data-ask-ai-open] [data-vaul-drawer-direction="bottom"] { transition: none !important; animation: none !important; visibility: visible !important; } /* When crossing ≥768px→<768px with Ask AI open: data-ask-ai-open is removed immediately so Vaul can calculate its snap-point freely. data-ask-ai-crossing suppresses Vaul's slide-in animation so it jumps instantly to its open position. finish() removes data-ask-ai-crossing after one rAF, at which point Vaul is already at translateY(0) — no transition fires. */ body[data-ask-ai-crossing] [data-vaul-drawer-direction="bottom"] { transition: none !important; animation: none !important; } body[data-ask-ai-crossing] #fern-ask-ai-panel { transition: none !important; visibility: hidden !important; } body[data-ask-ai-crossing] [data-vaul-overlay] { transition: none !important; animation: none !important; visibility: hidden !important; } /* Page Actions */ .fern-page-actions{ box-shadow: none; --tw-ring-color: transparent; --tw-ring-shadow: none; } .fern-page-actions .fern-button { border-right: none; background-color: transparent !important; } .fern-page-actions .fern-button:hover{ color: var(--accent-11) !important; } .fern-page-actions .fern-button:focus-visible { color: var(--accent-11) !important; outline: none; } .fern-layout-guide { padding-bottom: 0 !important; padding-right: 20px !important; padding-left: 20px !important; } .fern-layout-footer { margin-bottom: 0 !important; } /*Feedback*/ .fern-layout-footer-toolbar button{ background-color: transparent !important; border-color: transparent !important; padding-inline: 0px !important; } .fern-layout-footer-toolbar button:hover{ color: var(--accent-11) !important; } .fern-layout-footer-toolbar button:focus-visible { color: var(--accent-11) !important; outline: none; } /*Footer Navigation*/ .fern-footer-nav{ background-color: transparent !important; } .fern-footer-nav .fern-footer-next{ border-radius: var(--rounded-border) !important; } /* Code blocks — gray outer frame, white inset content area */ .fern-code-block, .fern-code-group { border-radius: 20px !important; overflow: hidden !important; background: var(--code-block-outer-bg) !important; border: none !important; box-shadow: none !important; } /* Remove the ::after ring border Fern adds via Tailwind after:ring-1 */ .fern-code-block::after, .fern-code-group::after { box-shadow: none !important; } /* Remove the divider line from title-only code blocks */ .fern-code-block .shadow-\[inset_0_-1px_0_0\] { --tw-shadow: none !important; box-shadow: none !important; } /* Remove the divider line from code group header inner (full width) */ .fern-code-group .shadow-\[inset_0_-1px_0_0\] { --tw-shadow: none !important; box-shadow: none !important; } /* Tabs container: full-width gray line via ::after, buttons paint over it */ .fern-code-group-tabs { margin-left: 16px !important; position: relative !important; } .fern-code-group-tabs::after { content: '' !important; position: absolute !important; bottom: 8px !important; left: 0 !important; right: 0 !important; height: 2px !important; background: var(--grayscale-a6) !important; z-index: 0 !important; } /* Code block title — align with tab group left margin */ .fern-code-block-title > div { padding-left: 16px !important; } /* Buttons — keep natural vertical centering, positioned above ::after */ .fern-code-group-tab { padding-left: 0 !important; padding-right: 0 !important; position: relative !important; z-index: 1 !important; box-shadow: none !important; } .fern-code-group-tab-label { padding-left: 6px !important; padding-right: 6px !important; } /* First tab — strip left label padding so text starts at container edge */ .fern-code-group-tab:first-child .fern-code-group-tab-label { padding-left: 0 !important; } /* Active tab: blue line via ::after at same bottom:8px as container ::after */ .fern-code-group-tab[data-state="active"] { box-shadow: none !important; } .fern-code-group-tab[data-state="active"]::after { content: '' !important; position: absolute !important; bottom: 8px !important; left: 0 !important; right: 0 !important; height: 2px !important; background: var(--accent) !important; z-index: 2 !important; } .fern-code-group-tab[data-state="active"] .fern-code-group-tab-label { font-weight: 700 !important; color: var(--grayscale-12) !important; background-color: transparent !important; } .fern-code-group-tab[data-state="inactive"] .fern-code-group-tab-label { background-color: transparent !important; } /* Remove header background so it blends with the outer gray container */ .fern-code-block-header, .fern-code-group-header { background-color: transparent !important; } /* Shift the language-selector + copy-button toolbar 4px left */ .fern-code-block-header div:has(> .fern-copy-button), .fern-code-group-header div:has(> .fern-copy-button), .fern-endpoint-request-snippet div:has(> .fern-copy-button), .fern-endpoint-response-snippet div:has(> .fern-copy-button) { transform: translateX(-4px) !important; } /* Code content — white inset with own rounded corners inside gray frame */ .fern-code-block-content, .fern-code-group-content { background: var(--color-background) !important; border-radius: 20px !important; overflow: hidden !important; margin: 1px 2px 2px 2px !important; max-width: calc(100% - 4px) !important; box-sizing: border-box !important; box-shadow: none !important; } .dark .fern-code-block, .dark .fern-code-group { border: none !important; border-radius: 20px !important; } .dark .fern-endpoint-response-snippet, .dark .fern-endpoint-request-snippet { border: none !important; border-radius: 20px !important; } .dark .fern-code-block-content, .dark .fern-code-group-content { background: var(--color-background) !important; border-radius: 20px !important; } /* Ensure inner code area is white (scoped to our container) */ .fern-code-block-content .code-block, .fern-code-group-content .code-block { background-color: var(--color-background) !important; } /* Ensure full scrollable area is white — covers overflow to the right of code content */ .fern-code-block-content .fern-scroll-area, .fern-code-block-content .fern-scroll-area-viewport, .fern-code-group-content .fern-scroll-area, .fern-code-group-content .fern-scroll-area-viewport, .fern-endpoint-response-snippet .fern-scroll-area, .fern-endpoint-response-snippet .fern-scroll-area-viewport, .fern-endpoint-request-snippet .fern-scroll-area, .fern-endpoint-request-snippet .fern-scroll-area-viewport { background-color: var(--color-background) !important; } .dark .fern-code-block-content .fern-scroll-area, .dark .fern-code-block-content .fern-scroll-area-viewport, .dark .fern-code-group-content .fern-scroll-area, .dark .fern-code-group-content .fern-scroll-area-viewport, .dark .fern-endpoint-response-snippet .fern-scroll-area, .dark .fern-endpoint-response-snippet .fern-scroll-area-viewport, .dark .fern-endpoint-request-snippet .fern-scroll-area, .dark .fern-endpoint-request-snippet .fern-scroll-area-viewport { background-color: var(--color-background) !important; } /* Inset scrollbars to stay within the 24px border-radius of the inner code block. Targets the scrollbar track (parent of fern-scroll-area-thumb) by data-orientation. Uses top/bottom/left/right with !important to override any Radix inline styles. 24px matches the border-radius so the track starts exactly where the curve ends. */ .fern-code-block-content [data-orientation="vertical"]:has(.fern-scroll-area-thumb), .fern-code-group-content [data-orientation="vertical"]:has(.fern-scroll-area-thumb), .fern-endpoint-response-snippet [data-orientation="vertical"]:has(.fern-scroll-area-thumb), .fern-endpoint-request-snippet [data-orientation="vertical"]:has(.fern-scroll-area-thumb) { top: 18px !important; bottom: 18px !important; } .fern-code-block-content [data-orientation="horizontal"]:has(.fern-scroll-area-thumb), .fern-code-group-content [data-orientation="horizontal"]:has(.fern-scroll-area-thumb), .fern-endpoint-response-snippet [data-orientation="horizontal"]:has(.fern-scroll-area-thumb), .fern-endpoint-request-snippet [data-orientation="horizontal"]:has(.fern-scroll-area-thumb) { left: 18px !important; right: 18px !important; } /* API explorer snippets — same gray outer / white inner as code blocks */ .fern-endpoint-response-snippet, .fern-endpoint-request-snippet { border-radius: 20px !important; background: var(--code-block-outer-bg) !important; border: none !important; box-shadow: none !important; } .fern-endpoint-response-snippet::after, .fern-endpoint-request-snippet::after { box-shadow: none !important; } .fern-endpoint-response-snippet > div:first-child, .fern-endpoint-request-snippet > div:first-child { background-color: transparent !important; } /* API endpoint paths and example labels */ header .font-mono [class~="text-(color:--grayscale-a9)"], .fern-endpoint-request-snippet .font-mono [class~="text-(color:--grayscale-a9)"], .fern-endpoint-response-snippet .text-intent-success { color: var(--color-g90) !important; } .dark header .font-mono [class~="text-(color:--grayscale-a9)"], .dark .fern-endpoint-request-snippet .font-mono [class~="text-(color:--grayscale-a9)"], .dark .fern-endpoint-response-snippet .text-intent-success { color: var(--color-white) !important; } /* Remove header bottom border */ .fern-endpoint-response-snippet .rounded-inherit.border-b, .fern-endpoint-request-snippet .rounded-inherit.border-b { --tw-border-style: none !important; border-bottom-width: 0 !important; } /* Remove footer top border and background */ .fern-endpoint-request-snippet .border-t { --tw-border-style: none !important; border-top-width: 0 !important; background-color: transparent !important; } .fern-endpoint-response-snippet pre.code-block-root, .fern-endpoint-request-snippet pre.code-block-root { background: var(--color-background) !important; border-radius: 20px !important; border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 24px !important; overflow: hidden !important; margin: 1px 2px 2px 2px !important; max-width: calc(100% - 4px) !important; box-sizing: border-box !important; /* Reset browser-default pre margins that add extra internal spacing */ padding-top: 0 !important; padding-bottom: 0 !important; } .dark .fern-endpoint-response-snippet pre.code-block-root, .dark .fern-endpoint-request-snippet pre.code-block-root { background: var(--color-background) !important; border-radius: 20px !important; border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; } .fern-endpoint-response-snippet .code-block, .fern-endpoint-request-snippet .code-block { background-color: var(--color-background) !important; } .dark .fern-endpoint-response-snippet .code-block, .dark .fern-endpoint-request-snippet .code-block { background-color: var(--color-background) !important; } .dark .fern-code-block-content .code-block, .dark .fern-code-group-content .code-block { background-color: var(--color-background) !important; } /* Content tabs — same approach as code block tabs */ /* Remove outer wrapper's full-width border-b */ div.border-border-default.mb-6.mt-4.flex.items-end.border-b.first\:-mt-3 { --tw-border-style: none !important; border-bottom-width: 0 !important; } /* Make fern-x-overflow shrink to tab content width */ .fern-x-overflow:not(.fern-code-group-tabs):has(> h6[role="tab"]) { flex: 0 0 auto !important; width: fit-content !important; position: relative !important; overflow: hidden !important; } /* Gray line via container ::after */ .fern-x-overflow:not(.fern-code-group-tabs):has(> h6[role="tab"])::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: var(--grayscale-a6) !important; z-index: 0 !important; } /* h6 tab base — sit above container ::after */ h6[role="tab"] { border-bottom: none !important; margin-bottom: 0 !important; position: relative !important; z-index: 1 !important; } .fern-x-overflow > h6[role="tab"] { border-bottom: none !important; } /* Remove Fern's built-in ::before blue underline */ h6[role="tab"]::before { display: none !important; } /* Active tab — black text */ h6[role="tab"][data-state="active"] { color: var(--grayscale-12) !important; } /* Black line for selected tab — extends 8px each side to fill half the gap */ h6[role="tab"][data-state="active"]::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: -8px !important; right: -8px !important; height: 2px !important; background: var(--grayscale-12) !important; z-index: 2 !important; } /* Hover — blue text + blue underline — extends 8px each side to fill half the gap */ h6[role="tab"]:not([data-state="active"]):hover { color: var(--accent-a11) !important; } h6[role="tab"]:not([data-state="active"]):focus-visible { color: var(--accent-a11) !important; outline: none; } h6[role="tab"]:not([data-state="active"]):hover::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: -8px !important; right: -8px !important; height: 2px !important; background: var(--accent) !important; z-index: 2 !important; } h6[role="tab"]:not([data-state="active"]):focus-visible::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: -8px !important; right: -8px !important; height: 2px !important; background: var(--accent) !important; z-index: 2 !important; } /* Links */ .fern-mdx-link { text-decoration: none !important; } .fern-mdx-link:hover { text-decoration: underline !important; } .fern-mdx-link:focus-visible { text-decoration: underline !important; outline: none; } /* Suppress underline on all button-like elements — overrides the .fern-mdx-link:hover rule above */ .fern-button:hover, .fern-header-navbar-links a:hover, a.gs-btn-outline:hover, [class*="gs-btn"]:hover { text-decoration: none !important; } .fern-button:focus-visible, .fern-header-navbar-links a:focus-visible, a.gs-btn-outline:focus-visible, [class*="gs-btn"]:focus-visible { text-decoration: none !important; outline: none; } /* Buttons */ /* Hero Section */ .hero-header { position: relative; width: 100%; min-height: 600px; padding: 4rem 2rem; margin-top: -100px; padding-top: calc(4rem + 100px); overflow: hidden; background: var(--accent-3); letter-spacing: -.4px; } .dark .hero-header { background: var(--accent-5); } .hero-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 1; padding-bottom: 4rem; } .hero-text { padding: 2rem 0; } .hero-eyebrow { font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: white; letter-spacing: 0.1em; margin-bottom: 1.5rem; text-transform: uppercase; display: inline-block; padding: 0.5rem 1.25rem; background: var(--accent); border-radius: var(--rounded-border); } .hero-header h1 { font-size: 3.5rem; line-height: 1.1; font-weight: var(--font-weight-bold); color: var(--grays); margin-bottom: 1.5rem; letter-spacing: -.48px; } .hero-description { font-size: 1.25rem; line-height: 1.6; color: var(--grayscale-11); padding-bottom: 3rem; } .hero-visual img { width: 100%; height: auto; display: block; } .hero-wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; z-index: 0; } .hero-wave svg { width: 100%; height: 100%; display: block; } /* Section Styles */ .section { padding: 2rem 2rem; display: flex; justify-content: center; } .section-content { max-width: 800px; width: 100%; } .section-content h2 { font-size: 2.5rem; font-weight: var(--font-weight-bold); margin: 0 0 1.5rem 0; line-height: 1.2; } .section-content > p { font-size: 1.125rem; line-height: 1.7; color: var(--grayscale-11); margin-bottom: 2rem; } /* Grid Cards */ .grid-card { border: 1px solid var(--grayscale-a4); transition: all 0.3s ease; } .grid-card:hover { border-color: var(--accent-a5); transform: translateY(-2px); } .grid-card:focus-visible { border-color: var(--accent-a5); transform: translateY(-2px); outline: none; } /* Responsive Design */ @media (max-width: 1200px) { .hero-content { grid-template-columns: 1fr; gap: 2rem; } .hero-header h1 { font-size: 2.5rem; } .hero-visual img{ display: none !important; } } @media (max-width: 768px) { .hero-header { min-height: 500px; padding: 3rem 1.5rem; margin-top: -50px; } .hero-header h1 { font-size: 2rem; } .hero-description { font-size: 1rem; } .section { padding: 3rem 1.5rem; } .section-content h2 { font-size: 1.875rem; } .section-content > p { font-size: 1rem; } .feature-card { width: 100%; height: 450px; } .card-group { gap: 1.5rem; } } @media (max-width: 480px) { .hero-header { padding: 2rem 1rem; } .hero-header h1 { font-size: 1.75rem; } .hero-eyebrow { font-size: 0.75rem; } .section { padding: 2rem 1rem; } .section-content h2 { font-size: 1.5rem; } .feature-card { height: 400px; } } /* ── Getting Started Landing Page ── */ /* Root page wrapper — 1192px centered with 64px gap between sections */ .gs-page { max-width: 1192px; width: 100%; margin: 0 auto; padding: 64px 32px 0 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 64px; box-sizing: border-box; } /* Hero */ .gs-hero { align-self: stretch; padding: 64px; background: #EFF2F6; border-radius: 20px; position: relative; overflow: hidden; } .dark .gs-hero { background: black; box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, 0.05); } .gs-hero-content { max-width: 1192px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 48px; width: 100%; } .gs-hero-text { flex: 1; min-width: 300px; max-width: 580px; display: flex; flex-direction: column; gap: 16px; } .gs-hero-text h1 { font-size: 32px; font-weight: 600; line-height: 40px; margin: 0; color: #2B2D31; } .dark .gs-hero-text h1 { color: white; } .gs-hero-text > p { font-size: 16px; font-weight: 400; line-height: 26.08px; color: #2B2D31; margin: 0; } .dark .gs-hero-text > p { color: #C4D1DE; } /* Hero decorative visual — positioned composition */ .gs-hero-visual { flex-shrink: 1; width: 474px; min-width: 300px; } .gs-hero-visual img { width: 100%; height: 100%; object-fit: contain; } .dark .gs-hero-dark-card { background: #121212; } /* Hide wrapper elements that aren't needed */ .gs-hero-bars, .gs-hero-dots { display: contents; } /* Button */ .gs-hero-text .gs-btn-outline { margin-top: 16px; align-self: flex-start; } .gs-btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: var(--btn-padding-medium); border: 2px solid var(--btn-color-dark); border-radius: var(--btn-radius); color: var(--btn-color-dark) !important; text-decoration: none !important; font-size: 14px; line-height: 14px; font-weight: 600; transition: var(--btn-transition); white-space: nowrap; } .gs-page .gs-btn-outline { padding: 14px 22px; } .dark .gs-btn-outline { border-color: var(--btn-color-white); color: var(--btn-color-white) !important; } .gs-btn-outline:hover, .gs-btn-outline:focus { border-color: var(--btn-color-blue); color: var(--btn-color-blue) !important; text-decoration: none !important; } .gs-btn-outline:focus-visible { border-color: var(--btn-color-blue); color: var(--btn-color-blue) !important; text-decoration: none !important; outline: none; } .fern-mdx-link.gs-btn-outline:hover, .fern-mdx-link.gs-btn-outline:focus { text-decoration: none !important; } .fern-mdx-link.gs-btn-outline:focus-visible { text-decoration: none !important; outline: none; } .dark .gs-btn-outline:hover, .dark .fern-mdx-link.gs-btn-outline:hover { background: var(--btn-color-white); color: var(--color-b100) !important; border-color: var(--btn-color-white) !important; text-decoration: none !important; } .dark .gs-btn-outline:focus-visible, .dark .fern-mdx-link.gs-btn-outline:focus-visible { background: var(--btn-color-white); color: var(--color-b100) !important; border-color: var(--btn-color-white) !important; text-decoration: none !important; outline: none; } /* Card icon images */ .gs-card-icon { object-fit: contain; margin: 0; border: none; box-shadow: none; } /* Sections */ .gs-section { align-self: stretch; display: flex; flex-direction: column; gap: 32px; } .gs-section h2 { font-size: 22px; font-weight: 600; line-height: 29.92px; margin: 0; color: #2B2D31; } .dark .gs-section h2 { color: white; } /* Override Fern Card styles within getting-started page */ .gs-section .fern-card-group { gap: 32px !important; } .gs-section .fern-card { border: 2px solid #C4D1DE !important; border-radius: 20px !important; padding: 24px !important; background: transparent !important; box-shadow: none !important; transition: border-color 0.2s ease; } /* Add top padding to cards with icons to make room for the icon above the heading */ .gs-products .fern-card, .gs-tutorials .fern-card { padding-top: 104px !important; position: relative !important; } /* Position icon at top-left of card */ .gs-products .fern-card .gs-card-icon, .gs-tutorials .fern-card .gs-card-icon { position: absolute !important; top: 24px; left: 24px; } /* Top 3 cards: 48px icons */ .gs-products .fern-card .gs-card-icon { width: 48px !important; height: 48px !important; } /* Bottom 4 cards: smaller icons */ .gs-tutorials .fern-card .gs-card-icon { width: 40px !important; height: 40px !important; } /* Give tutorial icons a white background pill in dark mode so dark-colored PNGs stay visible */ .dark .gs-tutorials .fern-card .gs-card-icon { background: white; border-radius: 10px; padding: 6px; } /* Product card icons have built-in blue colours — don't invert them */ .dark .gs-products .fern-card .gs-card-icon { filter: none; } .dark .gs-section .fern-card { border-color: #6D7682 !important; } .gs-section .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .gs-section .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } .dark .gs-section .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .dark .gs-section .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } /* Card typography */ .gs-section .fern-card-heading, .gs-section .fern-card .text-base.font-semibold { font-size: 22px !important; font-weight: 600 !important; line-height: 29.92px !important; color: var(--color-b100) !important; margin: 0 0 16px 0 !important; } .dark .gs-section .fern-card-heading, .dark .gs-section .fern-card .text-base.font-semibold { color: white !important; } .gs-section .fern-card p, .gs-section .fern-card .fern-card-content { font-size: 16px !important; font-weight: 400 !important; line-height: 26.08px !important; color: var(--color-b100) !important; } .dark .gs-section .fern-card p, .dark .gs-section .fern-card .fern-card-content, .dark .gs-section .fern-card .text-body { color: #C4D1DE !important; } /* Docs by product — 48px white icon containers */ .gs-products .fern-card .fern-card-icon { width: 48px !important; height: 48px !important; background: white !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Guides section — fixed card height */ .gs-guides .fern-card { min-height: 222px !important; } /* References section — fixed card height */ .gs-references .fern-card { min-height: 222px !important; } /* Tutorials section — logo icons in 48px white containers */ .gs-tutorials .fern-card .fern-card-icon { width: 48px !important; height: 48px !important; background: white !important; border-radius: 12px !important; } /* Learn more section — cards with image preview */ /* Learn more cards */ .gs-learn .fern-card { padding: 24px !important; padding-top: 256px !important; padding-bottom: 16px !important; overflow: hidden !important; position: relative !important; } .gs-learn .fern-card .fern-card-icon { display: none !important; } .gs-learn .fern-card .gs-learn-card-img { position: absolute !important; top: 24px; left: 24px; right: 24px; width: calc(100% - 48px) !important; height: 208px !important; object-fit: cover; border-radius: 20px; margin: 0; } .gs-learn .fern-card-heading, .gs-learn .fern-card .text-base.font-semibold { margin: 0 !important; padding: 0 !important; font-size: 20px !important; font-weight: 600 !important; line-height: 24px !important; } .dark .gs-learn .fern-card-heading, .dark .gs-learn .fern-card .text-base.font-semibold { color: white !important; } /* CTA Banner */ .gs-cta-banner { align-self: stretch; padding: 32px; background: #EFF2F6; border-radius: 20px; } .dark .gs-cta-banner { background: #2B2D31; } .gs-cta-content { display: flex; align-items: center; justify-content: flex-start; gap: 32px; } .gs-cta-logo { width: 80px; height: 80px; flex-shrink: 0; } .gs-cta-logo svg, .gs-cta-logo img { width: 100%; height: 100%; object-fit: contain; } .gs-cta-logo-light { display: block; } .gs-cta-logo-dark { display: none; } .dark .gs-cta-logo-light { display: none; } .dark .gs-cta-logo-dark { display: block; } .gs-cta-text { flex: 1; } .gs-cta-banner .gs-btn-outline { flex-shrink: 0; } .dark .gs-cta-banner .gs-btn-outline { border-color: var(--btn-color-white); color: var(--btn-color-white) !important; } .dark .gs-cta-banner .gs-btn-outline:hover, .dark .gs-cta-banner .fern-mdx-link.gs-btn-outline:hover { background: var(--btn-color-white) !important; color: var(--color-b100) !important; border-color: var(--btn-color-white) !important; } .dark .gs-cta-banner .gs-btn-outline:focus-visible, .dark .gs-cta-banner .fern-mdx-link.gs-btn-outline:focus-visible { background: var(--btn-color-white) !important; color: var(--color-b100) !important; border-color: var(--btn-color-white) !important; outline: none; } .gs-cta-text h3 { font-size: 22px; font-weight: 600; line-height: 29.92px; margin: 0 0 8px 0; color: #2B2D31; } .dark .gs-cta-text h3 { color: white; } .gs-cta-text p { font-size: 16px; font-weight: 400; line-height: 26.08px; color: #2B2D31; margin: 0; } .dark .gs-cta-text p { color: #C4D1DE; } /* Landing page header tabs — mirrors native .fern-header-tabs style */ .gs-landing-tabs { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; overflow-x: auto; padding: 0 32px; border-bottom: none; width: 100%; box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; } .gs-landing-tabs::-webkit-scrollbar { display: none; } .dark .gs-landing-tabs { border-top-color: var(--color-border); } .gs-landing-tab { display: inline-flex; align-items: center; height: 80px; padding: 32px 0; margin-right: 24px; font-size: 14px !important; font-weight: 600 !important; line-height: 16px; color: var(--dark-font-color) !important; text-decoration: none !important; white-space: nowrap; border-bottom: 2px solid transparent; border-radius: 0; background: none; transition: none; } .dark .gs-landing-tab { color: white !important; } .gs-landing-tab:hover { color: var(--color-blue100) !important; background: none !important; text-decoration: none !important; } .gs-landing-tab:focus-visible { color: var(--color-blue100) !important; background: none !important; text-decoration: none !important; outline: none; } .dark .gs-landing-tab:hover { color: var(--color-blue-light) !important; background: none !important; text-decoration: none !important; } .dark .gs-landing-tab:focus-visible { color: var(--color-blue-light) !important; background: none !important; text-decoration: none !important; outline: none; } .gs-landing-tab-active { border-bottom: 2px solid var(--color-accent); } .dark .gs-landing-tab-active { color: white !important; } /* Responsive */ @media (max-width: 1200px) { .gs-hero { padding: 48px 32px; } .gs-hero-text { width: 100%; max-width: 100%; } .gs-hero-visual { display: none; } } @media (max-width: 768px) { .gs-page { gap: 48px; } .gs-hero { padding: 32px 24px; } .gs-hero-text h1 { font-size: 24px; line-height: 32px; } .gs-section .fern-card-group { gap: 16px !important; } .gs-cta-content { flex-direction: column; align-items: flex-start; } .gs-guides .fern-card { min-height: auto !important; } .gs-references .fern-card { min-height: auto !important; } } /* ═══════════════════════════════════════════════════════ Tutorials Landing Page ═══════════════════════════════════════════════════════ */ .tut-page { max-width: 1192px; width: 100%; margin: 0 auto; padding: 64px 32px 0 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 64px; box-sizing: border-box; } /* Hero */ .tut-hero { align-self: stretch; padding: 48px 0; } .tut-hero-content { max-width: 1192px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 96px; width: 100%; } .tut-hero-text { flex: 1; min-width: 300px; max-width: 580px; display: flex; flex-direction: column; gap: 16px; } .tut-hero-text h1 { font-size: 32px; font-weight: 600; line-height: 40px; margin: 0; color: var(--color-text-primary); } .dark .tut-hero-text h1 { color: white; } .tut-hero-text > p { font-size: 16px; font-weight: 400; line-height: 28px; color: var(--color-text-primary); margin: 0; } .dark .tut-hero-text > p { color: #C4D1DE; } .tut-hero-text .gs-btn-outline { margin-top: 16px; align-self: flex-start; } .tut-hero-visual { flex-shrink: 1; width: 474px; min-width: 300px; } .tut-hero-visual img { width: 100%; height: 100%; object-fit: contain; } /* Sections */ .tut-section { align-self: stretch; display: flex; flex-direction: column; gap: 32px; } .tut-section h2 { font-size: 22px; font-weight: 600; line-height: 29.92px; margin: 0; color: var(--color-text-primary); } .dark .tut-section h2 { color: white; } .tut-section-description { font-size: 16px; font-weight: 400; line-height: 28px; color: var(--color-text-primary); margin: 0; } .dark .tut-section-description { color: #C4D1DE; } /* Card overrides for tutorials landing page */ .tut-section .fern-card-group { gap: 32px !important; } .tut-section .fern-card { border: 2px solid var(--color-border) !important; border-radius: 20px !important; padding: 24px !important; background: transparent !important; box-shadow: none !important; transition: border-color 0.2s ease; min-height: 222px !important; } .dark .tut-section .fern-card { border-color: #6D7682 !important; } .tut-section .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .tut-section .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } .dark .tut-section .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .dark .tut-section .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } .tut-section .fern-card-heading, .tut-section .fern-card .text-base.font-semibold { font-size: 20px !important; font-weight: 600 !important; line-height: 28px !important; color: var(--color-text-primary) !important; margin: 0 0 16px 0 !important; } .dark .tut-section .fern-card-heading, .dark .tut-section .fern-card .text-base.font-semibold { color: white !important; } .tut-section .fern-card p, .tut-section .fern-card .fern-card-content { font-size: 16px !important; font-weight: 400 !important; line-height: 28px !important; color: var(--color-text-primary) !important; } .dark .tut-section .fern-card p, .dark .tut-section .fern-card .fern-card-content, .dark .tut-section .fern-card .text-body { color: #C4D1DE !important; } /* Responsive — tutorials page */ @media (max-width: 1200px) { .tut-hero-text { width: 100%; max-width: 100%; } .tut-hero-visual { display: none; } } @media (max-width: 768px) { .tut-page { gap: 48px; } .tut-hero-text h1 { font-size: 24px; line-height: 32px; } .tut-section .fern-card-group { gap: 16px !important; } .tut-section .fern-card { min-height: auto !important; } } /* ── SDK Landing Page ── */ .sdk-page { max-width: 1192px; width: 100%; margin: 0 auto; padding: 64px 32px 0 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 64px; box-sizing: border-box; } /* Hero */ .sdk-hero { align-self: stretch; padding: 48px 0; border-radius: 20px; } .sdk-hero-content { max-width: 1192px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 96px; width: 100%; } .sdk-hero-text { flex: 1; min-width: 300px; max-width: 580px; display: flex; flex-direction: column; gap: 16px; } .sdk-hero-text h1 { font-size: 32px; font-weight: 600; line-height: 40px; margin: 0; color: var(--color-text-primary); } .dark .sdk-hero-text h1 { color: white; } .sdk-hero-text > p { font-size: 16px; font-weight: 400; line-height: 28px; color: var(--color-text-primary); margin: 0; } .dark .sdk-hero-text > p { color: #C4D1DE; } .sdk-hero-text .gs-btn-outline { margin-top: 16px; align-self: flex-start; } /* Hero Visual */ .sdk-hero-visual { position: relative; width: 474px; height: 384px; flex-shrink: 0; } /* Hero illustration */ .sdk-hero-visual img { width: 100%; height: 100%; object-fit: contain; } /* SDK Language Cards Section */ .sdk-section { align-self: stretch; display: flex; flex-direction: column; gap: 32px; } .sdk-section h2 { font-size: 22px; font-weight: 600; line-height: 29.92px; margin: 0; color: var(--color-text-primary); } .dark .sdk-section h2 { color: white; } .sdk-section .fern-card-group { gap: 32px !important; } .sdk-section .fern-card { border: 2px solid var(--color-border) !important; border-radius: 20px !important; padding: 24px !important; background: transparent !important; box-shadow: none !important; transition: border-color 0.2s ease; min-height: 140px !important; } .dark .sdk-section .fern-card { border-color: #6D7682 !important; } .sdk-section .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .sdk-section .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } .dark .sdk-section .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .dark .sdk-section .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } .sdk-section .fern-card-heading, .sdk-section .fern-card .text-base.font-semibold { font-size: 20px !important; font-weight: 600 !important; line-height: 28px !important; color: var(--color-text-primary) !important; margin: 0 !important; } .dark .sdk-section .fern-card-heading, .dark .sdk-section .fern-card .text-base.font-semibold { color: white !important; } /* SDK Tutorial Cards Section */ .sdk-tutorial-section { align-self: stretch; display: flex; flex-direction: column; gap: 32px; } .sdk-tutorial-section h2 { font-size: 22px; font-weight: 600; line-height: 29.92px; margin: 0; color: var(--color-text-primary); } .dark .sdk-tutorial-section h2 { color: white; } .sdk-section-description { font-size: 16px; font-weight: 400; line-height: 28px; color: var(--color-text-primary); margin: 0; } .dark .sdk-section-description { color: #C4D1DE; } .sdk-tutorial-section .fern-card-group { gap: 32px !important; } .sdk-tutorial-section .fern-card { border: 2px solid var(--color-border) !important; border-radius: 20px !important; padding: 24px !important; background: transparent !important; box-shadow: none !important; transition: border-color 0.2s ease; min-height: 222px !important; } .dark .sdk-tutorial-section .fern-card { border-color: #6D7682 !important; } .sdk-tutorial-section .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .sdk-tutorial-section .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } .dark .sdk-tutorial-section .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .dark .sdk-tutorial-section .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } .sdk-tutorial-section .fern-card-heading, .sdk-tutorial-section .fern-card .text-base.font-semibold { font-size: 20px !important; font-weight: 600 !important; line-height: 28px !important; color: var(--color-text-primary) !important; margin: 0 0 16px 0 !important; } .dark .sdk-tutorial-section .fern-card-heading, .dark .sdk-tutorial-section .fern-card .text-base.font-semibold { color: white !important; } .sdk-tutorial-section .fern-card p, .sdk-tutorial-section .fern-card .fern-card-content { font-size: 16px !important; font-weight: 400 !important; line-height: 28px !important; color: var(--color-text-primary) !important; } .dark .sdk-tutorial-section .fern-card p, .dark .sdk-tutorial-section .fern-card .fern-card-content, .dark .sdk-tutorial-section .fern-card .text-body { color: #C4D1DE !important; } /* Responsive — SDK page */ @media (max-width: 1200px) { .sdk-hero-text { width: 100%; max-width: 100%; } .sdk-hero-visual { display: none; } } @media (max-width: 768px) { .sdk-page { gap: 48px; } .sdk-hero-text h1 { font-size: 24px; line-height: 32px; } .sdk-section .fern-card-group, .sdk-tutorial-section .fern-card-group { gap: 16px !important; } .sdk-section .fern-card, .sdk-tutorial-section .fern-card { min-height: auto !important; } } /* ── SDK Tutorial Overview Pages ── */ .sdk-tut-overview .fern-card-group { gap: 16px !important; } .sdk-tut-overview .fern-card { border: 2px solid var(--color-border) !important; border-radius: 20px !important; padding: 32px !important; background: transparent !important; box-shadow: none !important; transition: border-color 0.2s ease; } .dark .sdk-tut-overview .fern-card { border-color: #6D7682 !important; } .sdk-tut-overview .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .sdk-tut-overview .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } .dark .sdk-tut-overview .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .dark .sdk-tut-overview .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } .sdk-tut-overview .fern-card-heading, .sdk-tut-overview .fern-card .text-base.font-semibold { font-size: 20px !important; font-weight: 600 !important; line-height: 28px !important; color: var(--color-text-primary) !important; margin: 0 0 8px 0 !important; } .dark .sdk-tut-overview .fern-card-heading, .dark .sdk-tut-overview .fern-card .text-base.font-semibold { color: white !important; } .sdk-tut-overview .fern-card p, .sdk-tut-overview .fern-card .fern-card-content { font-size: 16px !important; font-weight: 400 !important; line-height: 28px !important; color: var(--color-text-primary) !important; } .dark .sdk-tut-overview .fern-card p, .dark .sdk-tut-overview .fern-card .fern-card-content, .dark .sdk-tut-overview .fern-card .text-body { color: #C4D1DE !important; } /* Move sidebar collapsible chevron to the left */ svg.expand-indicator { order: -1 !important; margin-right: 2px !important; margin-left: 0 !important; } .fern-sidebar-link .expand-indicator[data-state=active], .fern-sidebar-link[data-state=active] { background-color: transparent; color: var(--accent-a11); } .dark .fern-sidebar-link .expand-indicator[data-state=active], .dark .fern-sidebar-link[data-state=active] { color: var(--color-blue-light); } .dark .fern-sidebar-link[data-state=inactive] .fern-sidebar-link-title-inner { color: var(--color-white); } .dark .fern-sidebar-link[data-state=inactive]:hover, .dark .fern-sidebar-link.nested[data-state=inactive]:hover { color: var(--color-sidebar-hover) !important; } .dark .fern-sidebar-link[data-state=inactive]:focus-visible, .dark .fern-sidebar-link.nested[data-state=inactive]:focus-visible { color: var(--color-sidebar-hover) !important; outline: none; } .dark .fern-sidebar-link[data-state=inactive]:hover .fern-sidebar-link-title-inner, .dark .fern-sidebar-link.nested[data-state=inactive]:hover .fern-sidebar-link-title-inner { color: var(--color-sidebar-hover) !important; } .dark .fern-sidebar-link[data-state=inactive]:focus-within .fern-sidebar-link-title-inner, .dark .fern-sidebar-link.nested[data-state=inactive]:focus-within .fern-sidebar-link-title-inner { color: var(--color-sidebar-hover) !important; outline: none; } .fern-sidebar-link[data-state=inactive]:hover, .fern-sidebar-link.nested[data-state=inactive]:hover { background-color: transparent !important; color: var(--color-blue100) !important; } .fern-sidebar-link[data-state=inactive]:focus-visible, .fern-sidebar-link.nested[data-state=inactive]:focus-visible { background-color: transparent !important; color: var(--color-blue100) !important; outline: none; } .fern-sidebar-link[data-state=inactive]:hover .fern-sidebar-link-title-inner, .fern-sidebar-link.nested[data-state=inactive]:hover .fern-sidebar-link-title-inner { color: var(--color-blue100) !important; } .fern-sidebar-link[data-state=inactive]:focus-within .fern-sidebar-link-title-inner, .fern-sidebar-link.nested[data-state=inactive]:focus-within .fern-sidebar-link-title-inner { color: var(--color-blue100) !important; outline: none; } /* Semi-bold the root section header when a nested child page is active */ div[data-state=open]:has(a.fern-sidebar-link[data-state=active]) > .fern-sidebar-link .fern-sidebar-link-title-inner { -webkit-text-stroke: .5px currentcolor; } /* Table of contents — "On this page" heading */ div.m-0.mb-3.font-medium { color: #000000 !important; font-feature-settings: 'liga' off, 'clig' off !important; font-family: "Avenir Next" !important; font-size: 14px !important; font-style: normal !important; font-weight: 600 !important; line-height: 100% !important; } .dark div.m-0.mb-3.font-medium { color: var(--color-white) !important; } /* Table of contents — light mode hover */ #fern-toc { --grayscale-a12: var(--color-blue100); /* hover text: #1770E5 */ } /* Table of contents — dark mode link colors match sidebar */ .dark #fern-toc { --accent-a9: var(--color-blue-light); /* active item: #71A0F5 */ --grayscale-a11: var(--color-white); /* inactive text: #FFFFFF */ --grayscale-a12: var(--color-sidebar-hover); /* hover text: #5A8FF0 */ } /* Sidebar */ #fern-sidebar { border-right-width: 0px !important; } #fern-sidebar[data-viewport="mobile"] { width: 100vw !important; max-width: 100vw !important; background-color: var(--color-background) !important; background-image: none !important; opacity: 1 !important; } .dark #fern-sidebar[data-viewport="mobile"] { background-color: var(--color-background) !important; } /* Reduce gap between chevron and text in sidebar links */ .fern-sidebar-link { gap: 2px !important; } .fern-sidebar-link-title { margin-left: 4px !important; } /* External-link icon: don't let the title expand to full width so the icon sits next to the text */ .fern-sidebar-link:has(> svg.lucide-external-link) .fern-sidebar-link-title { width: auto !important; margin-right: 6px !important; } .fern-sidebar-link-title-inner { will-change: transform; display: inline; transform: translate(0); font-weight: 400; } .fern-sidebar-link[data-state=inactive] .fern-sidebar-link-title-inner { color: var(--color-g90); } /* Indent nested sidebar items under collapsed sections */ .fern-sidebar-group.fern-sidebar-group-level-2 { margin-left: 28px !important; } /* Remove left border on nested sidebar groups */ .fern-sidebar-group { border-left: none !important; } /* Remove blue active tracking line on nested sidebar links */ .fern-sidebar-link.nested[data-state=active]::before, .fern-sidebar-link.nested[data-state=active]::after { display: none !important; } .fern-sidebar-link.nested[data-state=active] { border-left: none !important; box-shadow: none !important; } /* Hide duplicate bold section headings in API reference sidebar */ a.fern-sidebar-link.font-semibold { display: none !important; } /* ── API Reference Landing Page ── */ .api-page { max-width: 1192px; width: 100%; margin: 0 auto; padding: 64px 32px 0 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 64px; box-sizing: border-box; } /* Hero */ .api-hero { align-self: stretch; padding: 64px 0 48px 0; border-radius: 20px; } .api-hero-content { max-width: 1192px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 96px; width: 100%; } .api-hero-text { flex: 1; min-width: 300px; max-width: 580px; display: flex; flex-direction: column; gap: 16px; } .api-hero-text h1 { font-size: 32px; font-weight: 600; line-height: 40px; margin: 0; color: var(--color-text-primary); } .dark .api-hero-text h1 { color: white; } .api-hero-text > p { font-size: 16px; font-weight: 400; line-height: 28px; color: var(--color-text-primary); margin: 0; } .dark .api-hero-text > p { color: #C4D1DE; } .api-hero-text .gs-btn-outline { margin-top: 16px; align-self: flex-start; } /* Hero Visual */ .api-hero-visual { flex-shrink: 1; width: 474px; min-width: 300px; } .api-hero-visual img { width: 100%; height: 100%; object-fit: contain; } /* API CTA cards section */ .api-section { align-self: stretch; display: flex; flex-direction: column; gap: 32px; } .api-section h2 { font-size: 22px; font-weight: 600; line-height: 29.92px; margin: 0; color: var(--color-text-primary); } .dark .api-section h2 { color: white; } .api-section .fern-card-group { gap: 32px !important; } .api-section .fern-card { border: 2px solid var(--color-border) !important; border-radius: 20px !important; padding: 24px !important; background: transparent !important; box-shadow: none !important; transition: border-color 0.2s ease; min-height: 140px !important; } .dark .api-section .fern-card { border-color: #6D7682 !important; } .api-section .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .api-section .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } .dark .api-section .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .dark .api-section .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } .api-section .fern-card-heading, .api-section .fern-card .text-base.font-semibold { font-size: 20px !important; font-weight: 600 !important; line-height: 28px !important; color: var(--color-text-primary) !important; margin: 0 !important; } .dark .api-section .fern-card-heading, .dark .api-section .fern-card .text-base.font-semibold { color: white !important; } /* References by API section */ .api-ref-section { align-self: stretch; display: flex; flex-direction: column; gap: 32px; } .api-ref-section h2 { font-size: 22px; font-weight: 600; line-height: 29.92px; margin: 0; color: var(--color-text-primary); } .dark .api-ref-section h2 { color: white; } .api-section-description { font-size: 16px; font-weight: 400; line-height: 28px; color: var(--color-text-primary); margin: 0; } .dark .api-section-description { color: #C4D1DE; } .api-ref-section .fern-card-group { gap: 32px !important; } .api-ref-section .fern-card { border: 2px solid var(--color-border) !important; border-radius: 20px !important; padding: 24px !important; background: transparent !important; box-shadow: none !important; transition: border-color 0.2s ease; min-height: 222px !important; } .dark .api-ref-section .fern-card { border-color: #6D7682 !important; } .api-ref-section .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .api-ref-section .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } .dark .api-ref-section .fern-card:hover { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; } .dark .api-ref-section .fern-card:focus-visible { border: 2px solid #0074F6 !important; border: 2px solid color(display-p3 0.09 0.4393 0.9) !important; outline: none; } .api-ref-section .fern-card-heading, .api-ref-section .fern-card .text-base.font-semibold { font-size: 20px !important; font-weight: 600 !important; line-height: 28px !important; color: var(--color-text-primary) !important; margin: 0 0 16px 0 !important; } .dark .api-ref-section .fern-card-heading, .dark .api-ref-section .fern-card .text-base.font-semibold { color: white !important; } .api-ref-section .fern-card p, .api-ref-section .fern-card .fern-card-content { font-size: 16px !important; font-weight: 400 !important; line-height: 28px !important; color: var(--color-text-primary) !important; } .dark .api-ref-section .fern-card p, .dark .api-ref-section .fern-card .fern-card-content, .dark .api-ref-section .fern-card .text-body { color: #C4D1DE !important; } /* References small cards */ .api-references-small .fern-card { min-height: 160px !important; } /* Responsive — API page */ @media (max-width: 1200px) { .api-hero-text { width: 100%; max-width: 100%; } .api-hero-visual { display: none; } } @media (max-width: 768px) { .api-page { gap: 48px; } .api-hero-text h1 { font-size: 24px; line-height: 32px; } .api-section .fern-card-group, .api-ref-section .fern-card-group { gap: 16px !important; } .api-section .fern-card, .api-ref-section .fern-card { min-height: auto !important; } } /* Custom Footer Styles */ .contentful-docs-footer { max-width: 1192px; width: 100%; margin: 0 auto; padding: 40px 24px 40px 24px; box-sizing: border-box; display: flex; flex-direction: column; } /* ── Visibility toggles ── */ .cf-footer-mobile { display: block; } .cf-footer-desktop { display: none; } /* ── Mobile: accordion sections ── */ .cf-footer-accordion-section { border-bottom: 1px solid #C4D1DE; text-align: left; } .dark .cf-footer-accordion-section { border-bottom-color: rgba(255, 255, 255, 0.2); } .cf-footer-accordion-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 1.6rem 0; background: none; border: none; cursor: pointer; color: #2A2D30; } .dark .cf-footer-accordion-btn { color: white; } .cf-footer-accordion-btn .cf-footer-heading { margin: 0; } .cf-footer-chevron { flex-shrink: 0; transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1); stroke: currentColor; } .cf-footer-accordion-section.open .cf-footer-chevron { transform: rotate(180deg); } .cf-footer-accordion-content { overflow: hidden; max-height: 0; transition: max-height 400ms cubic-bezier(0.42, 0, 0.58, 1), opacity 400ms ease; opacity: 0; } .cf-footer-accordion-section.open .cf-footer-accordion-content { max-height: 600px; opacity: 1; } .cf-footer-accordion-links { list-style: none; padding: 0 0 16px 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .cf-footer-accordion-links li a { display: block; padding-bottom: 6px; font-size: 14px; font-weight: 400; line-height: 20px; color: #2A2D30; text-decoration: none !important; transition: color 0.2s ease; } .dark .cf-footer-accordion-links li a { color: #C4D1DE; } .cf-footer-accordion-links li a:hover { color: #1770E5; } .cf-footer-accordion-links li a:focus-visible { color: #1770E5; outline: none; } .cf-footer-accordion-links li:last-child a { padding-bottom: 0; } /* Mobile Connect section (always expanded, flat icon row) */ .cf-footer-connect-mobile { padding: 16px 0; display: flex; flex-direction: column; gap: 16px; } .cf-footer-connect-mobile-icons { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 24px; } .cf-footer-connect-mobile-icons a { display: flex; align-items: center; color: #2A2D30; text-decoration: none !important; transition: color 0.2s ease; } .dark .cf-footer-connect-mobile-icons a { color: #C4D1DE; } .cf-footer-connect-mobile-icons svg { width: 24px; height: 24px; fill: currentColor; } .cf-footer-connect-mobile-icons a:hover { color: #1770E5; } .cf-footer-connect-mobile-icons a:focus-visible { color: #1770E5; outline: none; } /* ── Desktop: 5-column layout (>= 1200px) ── */ @media (min-width: 1200px) { .contentful-docs-footer { padding: 64px 32px 3.4rem 32px; } .cf-footer-mobile { display: none; } .cf-footer-desktop { display: block; } .cf-footer-columns { display: flex; justify-content: space-between; } .cf-footer-col { min-width: 150px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; } .cf-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .cf-footer-col ul a { font-size: 14px; font-weight: 400; line-height: 20px; color: #2A2D30; text-decoration: none !important; transition: color 0.2s ease; } .dark .cf-footer-col ul a { color: #C4D1DE; } .cf-footer-col ul a:hover { color: #1770E5; text-decoration: underline !important; } .cf-footer-col ul a:focus-visible { color: #1770E5; text-decoration: underline !important; outline: none; } /* Connect: 3x2 icon grid */ .cf-footer-connect-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); column-gap: 32px !important; row-gap: 24px !important; } .cf-footer-connect-grid a { display: flex; align-items: center; justify-content: center; color: #2A2D30; text-decoration: none !important; transition: color 0.2s ease; } .dark .cf-footer-connect-grid a { color: #C4D1DE; } .cf-footer-connect-grid svg { width: 24px; height: 24px; fill: currentColor; } .cf-footer-connect-grid a:hover { color: #1770E5; } .cf-footer-connect-grid a:focus-visible { color: #1770E5; outline: none; } } /* ── Shared: headings ── */ .cf-footer-heading { font-size: 14px; font-weight: 600; line-height: 16px; color: #2A2D30; } @media (min-width: 768px) and (max-width: 1023px) { .cf-footer-heading { font-size: 16px; } } .dark .cf-footer-heading { color: white; } /* ── Legal bar with pipe dividers ── */ .cf-footer-legal { list-style: none; padding: 4rem 0px .8rem 0px; margin: 0; display: flex; flex-wrap: wrap; align-items: left; justify-content: left; gap: 0; } .cf-footer-legal li { display: flex; align-items: center; margin-bottom: 8px; } .cf-footer-legal a { font-size: 14px; font-weight: 400; line-height: 20px; color: #2A2D30; text-decoration: none !important; transition: color 0.2s ease; padding: 0 1.2rem; } /* The 1.2rem side padding spaces the links from each other and from the dividers, but on the first link it also indents the row. Drop it so the legal bar starts on the same left edge as .cf-footer-bottom below it. */ .cf-footer-legal li:first-child a { padding-left: 0; } .dark .cf-footer-legal a { color: #C4D1DE; } .cf-footer-legal a:hover { color: #1770E5; text-decoration: underline !important; } .cf-footer-legal a:focus-visible { color: #1770E5; text-decoration: underline !important; outline: none; } .cf-footer-divider { display: block; width: 1px; height: 20px; background: #DDE5EC; flex-shrink: 0; } .dark .cf-footer-divider { background: #C4D1DE; } @media (max-width: 1023px) { .cf-footer-legal { padding: 3.4rem 0px 1.6rem 0px; display: block; justify-content: flex-start; } .cf-footer-legal li { display: block; margin-bottom: 0; } .cf-footer-legal a { display: block; padding: 0 0 1.6rem; } .cf-footer-legal .cf-footer-divider { display: none; } .cf-footer-copyright { text-align: left !important; } } /* ── Copyright line ── */ .cf-footer-copyright { font-size: 14px; font-weight: 400; line-height: 20px; text-align: left; color: #2A2D30; margin: 0; } .dark .cf-footer-copyright { color: #C4D1DE; } .cf-footer-copyright a { color: inherit; text-decoration: underline !important; transition: color 0.2s ease; } .cf-footer-copyright a:hover { color: #1770E5; } .cf-footer-copyright a:focus-visible { color: #1770E5; outline: none; } /* ── Bottom row: copyright text + Contentful × Salesforce lockup ── */ .cf-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* Copyright takes the remaining width, pushing the lockup to the right edge */ .cf-footer-bottom .cf-footer-copyright { flex: 1; } .cf-footer-lockup { flex-shrink: 0; display: flex; align-items: center; } /* Both variants render in an identical box. The two source assets have slightly different viewBoxes (127×33 light, 247×65 dark), so the size is pinned here rather than inherited; preserveAspectRatio keeps the dark one from stretching. */ .cf-footer-lockup-svg { width: 127px; height: 33px; } /* Show the variant matching the active theme (same pattern as .gs-cta-logo-*) */ .cf-footer-lockup-light { display: block; } .cf-footer-lockup-dark { display: none; } .dark .cf-footer-lockup-light { display: none; } .dark .cf-footer-lockup-dark { display: block; } @media (max-width: 1023px) { .cf-footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; } .cf-footer-bottom .cf-footer-copyright { flex: none; } } #builtwithfern { display: none !important; } /* ─── Powered by Contentful | Built with Fern bar ─── */ .powered-by-footer { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px 0 0; margin-top: -8px; border-top: 1px solid rgba(42, 45, 48, 0.1); } .dark .powered-by-footer { border-top-color: rgba(196, 209, 222, 0.15); } .powered-by-item { display: flex; align-items: center; gap: 5px; } .powered-by-label { font-size: 12px; font-weight: 400; color: #6B7280; white-space: nowrap; } .dark .powered-by-label { color: #9CA3AF; } .powered-by-svg { display: flex; align-items: center; } .powered-by-svg svg { height: 20px; width: auto; } .powered-by-fern-slot { display: flex; align-items: center; } .powered-by-fern-slot a { display: flex; align-items: center; margin: 0 !important; padding: 0; } .powered-by-svg-light { display: flex; } .powered-by-svg-dark { display: none; } .dark .powered-by-svg-light { display: none; } .dark .powered-by-svg-dark { display: flex; } .powered-by-bar-divider { width: 1px; height: 20px; background: var(--color-text-primary); opacity: 0.2; } .dark .powered-by-bar-divider { background: var(--color-border); opacity: 0.3; } /* Hide sidebar on app-framework-tutorials redirect tab */ [data-pathname*="app-framework-tutorials"] aside, [data-pathname*="app-framework-tutorials"] .fern-sidebar { display: none !important; } /*** START -- PRODUCT SELECTOR STYLING ***/ /* Product selector trigger in header */ .product-item-title { color: var(--grayscale-12) !important; font-feature-settings: 'liga' off, 'clig' off; font-family: "Avenir Next" !important; font-size: 16px !important; font-style: normal !important; font-weight: 400 !important; line-height: 100% !important; letter-spacing: -0.2px !important; } /* On the landing page, display "Home" in the trigger instead of a product name */ /* Desktop trigger uses .product-item-title; mobile trigger (FernSelectionItem) uses .fern-selection-item-title */ body:has(.gs-section) .product-item-title, body:has(.gs-section) .product-dropdown-trigger .fern-selection-item-title { font-size: 0 !important; } body:has(.gs-section) .product-item-title::before, body:has(.gs-section) .product-dropdown-trigger .fern-selection-item-title::before { content: "Home"; font-family: "Avenir Next" !important; font-size: 16px !important; font-style: normal !important; font-weight: 400 !important; line-height: 100% !important; letter-spacing: -0.2px !important; color: var(--grayscale-12); } /* On the landing page, hide the subtitle from the mobile product dropdown trigger */ body:has(.gs-section) .product-dropdown-trigger .fern-selection-item-subtitle { display: none !important; } /* On the landing page, replace the product icon with a home icon in the mobile trigger */ body:has(.gs-section) .product-dropdown-trigger .fern-selection-item-icon > * { display: none !important; } body:has(.gs-section) .product-dropdown-trigger .fern-selection-item-icon { position: relative !important; } body:has(.gs-section) .product-dropdown-trigger .fern-selection-item-icon::before { content: '' !important; display: block !important; width: 100% !important; height: 100% !important; background-color: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.4138 13.585L17.4138 3.58496C17.0387 3.21017 16.5302 2.99963 16 2.99963C15.4698 2.99963 14.9613 3.21017 14.5863 3.58496L4.58626 13.585C4.39964 13.7702 4.25171 13.9907 4.15107 14.2336C4.05042 14.4765 3.99908 14.737 4.00001 15V27C4.00001 27.2652 4.10537 27.5195 4.29291 27.7071C4.48044 27.8946 4.7348 28 5.00001 28H13C13.2652 28 13.5196 27.8946 13.7071 27.7071C13.8947 27.5195 14 27.2652 14 27V20H18V27C18 27.2652 18.1054 27.5195 18.2929 27.7071C18.4804 27.8946 18.7348 28 19 28H27C27.2652 28 27.5196 27.8946 27.7071 27.7071C27.8947 27.5195 28 27.2652 28 27V15C28.0009 14.737 27.9496 14.4765 27.849 14.2336C27.7483 13.9907 27.6004 13.7702 27.4138 13.585ZM26 26H20V19C20 18.7347 19.8947 18.4804 19.7071 18.2928C19.5196 18.1053 19.2652 18 19 18H13C12.7348 18 12.4804 18.1053 12.2929 18.2928C12.1054 18.4804 12 18.7347 12 19V26H6.00001V15L16 4.99996L26 15V26Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.4138 13.585L17.4138 3.58496C17.0387 3.21017 16.5302 2.99963 16 2.99963C15.4698 2.99963 14.9613 3.21017 14.5863 3.58496L4.58626 13.585C4.39964 13.7702 4.25171 13.9907 4.15107 14.2336C4.05042 14.4765 3.99908 14.737 4.00001 15V27C4.00001 27.2652 4.10537 27.5195 4.29291 27.7071C4.48044 27.8946 4.7348 28 5.00001 28H13C13.2652 28 13.5196 27.8946 13.7071 27.7071C13.8947 27.5195 14 27.2652 14 27V20H18V27C18 27.2652 18.1054 27.5195 18.2929 27.7071C18.4804 27.8946 18.7348 28 19 28H27C27.2652 28 27.5196 27.8946 27.7071 27.7071C27.8947 27.5195 28 27.2652 28 27V15C28.0009 14.737 27.9496 14.4765 27.849 14.2336C27.7483 13.9907 27.6004 13.7702 27.4138 13.585ZM26 26H20V19C20 18.7347 19.8947 18.4804 19.7071 18.2928C19.5196 18.1053 19.2652 18 19 18H13C12.7348 18 12.4804 18.1053 12.2929 18.2928C12.1054 18.4804 12 18.7347 12 19V26H6.00001V15L16 4.99996L26 15V26Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important; } .product-dropdown-trigger svg { transform: translateY(2px); } .fern-product-selector { transform: translate(-2px, 2px); } .fern-product-selector .fern-selection-item-icon, div[data-testid="product-dropdown-content"] .fern-selection-item-icon { color: var(--color-b100) !important; border: none !important; } .fern-product-selector .fern-selection-item-icon svg, div[data-testid="product-dropdown-content"] .fern-selection-item-icon svg { color: var(--color-b100) !important; } .dark .fern-product-selector .fern-selection-item-icon, .dark div[data-testid="product-dropdown-content"] .fern-selection-item-icon { color: var(--color-white) !important; background-color: transparent !important; } .dark .fern-product-selector .fern-selection-item-icon svg, .dark div[data-testid="product-dropdown-content"] .fern-selection-item-icon svg { color: var(--color-white) !important; } /* Selected-state override: Fern applies background:var(--accent) via [data-state="checked"]/[aria-current] on the icon container. Keep the mobile selected product trigger neutral in dark mode. */ .dark #fern-sidebar[data-viewport="mobile"] .fern-product-selector .product-dropdown-trigger { background-color: transparent !important; color: var(--color-white) !important; } .dark #fern-sidebar[data-viewport="mobile"] .fern-product-selector .product-dropdown-trigger .fern-selection-item-title, .dark #fern-sidebar[data-viewport="mobile"] .fern-product-selector .product-dropdown-trigger .fern-selection-item-end-icon, .dark #fern-sidebar[data-viewport="mobile"] .fern-product-selector .product-dropdown-trigger .fern-selection-item-end-icon * { color: var(--color-white) !important; } .dark #fern-sidebar[data-viewport="mobile"] .fern-product-selector .product-dropdown-trigger .fern-selection-item-subtitle { color: var(--grayscale-a11) !important; } .dark #fern-sidebar[data-viewport="mobile"] .fern-selection-item-icon, .dark #fern-sidebar[data-viewport="mobile"] .fern-selection-item-icon * { background-color: transparent !important; color: var(--color-white) !important; } /* Gap between logo and product switcher toggle */ div:has(> .fern-header-selectors) { gap: 10px !important; flex: 0 0 auto !important; } div:has(+ .fern-header-selectors) { flex: 0 0 auto !important; width: auto !important; overflow: visible !important; } div:has(+ .fern-header-selectors) a[href="/"] { max-width: 26px !important; overflow: visible !important; } div:has(+ .fern-header-selectors) a[href="/"] img { width: 26px !important; height: 26px !important; } /* Dark mode logo: white (with transparent circle cutouts) by default, crossfade to color on hover */ .dark #fern-header .fern-header-logo-container a[href="/"]:has(img) { position: relative; } .dark #fern-header .fern-header-logo-container a[href="/"]:has(img)::before { content: ''; position: absolute; top: 0; left: 0; width: 26px; height: 26px; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjI2IiB2aWV3Qm94PSIwIDAgMTQ0IDI2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik04LjIyOTYyIDMuMjAyMzlDOS4xMzExOSA0LjEwMjE1IDkuNDc1NTggNS40MjAyNCA5LjEzMTE5IDYuNjQ2MzdDMTAuMjQwMSA1Ljk3OTIyIDExLjUxMTMgNS42Mjc2IDEyLjgwNiA1LjYyOTQxSDEyLjgzM0MxNC43MzUzIDUuNjM0ODIgMTYuNTU2NSA2LjM5OTM0IDE3Ljg5NDQgNy43NTE2OUMxOC45NjczIDguODc4NjUgMjAuNzQ4OCA4LjkyMTkzIDIxLjg3NTcgNy44NTA4N0MyMy4wMDI3IDYuNzc4IDIzLjA0NiA0Ljk5NjUxIDIxLjk3NDkgMy44Njk1NUMyMS45NDc4IDMuODQwNyAyMS45MjA4IDMuODEzNjUgMjEuODkyIDMuNzg2NjFDMTkuNTAyOCAxLjM3MDQxIDE2LjI0ODEgMC4wMDkwNDQ0NCAxMi44NDkyIDIuODc3NzhlLTA1SDEyLjgwMDZDMTAuMjU2MyAtMC4wMDUzODA2MiA3Ljc2OTgyIDAuNzUxOTM1IDUuNjYwMTYgMi4xNzI4SDUuNzM5NDlDNi42NzM1MiAyLjE3MSA3LjU2OTY3IDIuNTQyNDUgOC4yMjk2MiAzLjIwNDE5VjMuMjAyMzlaIiBmaWxsPSJ3aGl0ZSIvPgogIDxwYXRoIGQ9Ik0xOS44NDIxIDE3LjA3MjNDMTkuMDk5MiAxNy4wNzIzIDE4LjM4NTIgMTcuMzY2MiAxNy44NTg3IDE3Ljg4OTFDMTYuNTE3MSAxOS4yMjM0IDE0LjcwMTQgMTkuOTczNSAxMi44MDk5IDE5Ljk3MTdIMTIuNzgyOEMxMS40ODQ2IDE5Ljk2OTkgMTAuMjEzNCAxOS42MTI5IDkuMTA0NDQgMTguOTM4NUM5LjE4OTE5IDE5LjI0NSA5LjIzMDY2IDE5LjU2MjQgOS4yMzA2NiAxOS44Nzk3QzkuMjMwNjYgMjEuODI1MyA3LjY1NDczIDIzLjQwMTMgNS43MDkxNSAyMy40MDEzSDUuNjE3MTlDNy43MjUwNSAyNC44MzY2IDEwLjIxMzQgMjUuNjA2NSAxMi43NjMgMjUuNjEwMUgxMi44MTE3QzE2LjE5MDggMjUuNjE1NSAxOS40MzQ2IDI0LjI3NzYgMjEuODI3MyAyMS44OTJDMjIuOTMwOSAyMC43OTU3IDIyLjkzOTkgMTkuMDE0MiAyMS44NDM2IDE3LjkwODlDMjEuMzE1MyAxNy4zNzUyIDIwLjU5NCAxNy4wNzU5IDE5Ljg0MzkgMTcuMDc1OVYxNy4wNzIzSDE5Ljg0MjFaIiBmaWxsPSJ3aGl0ZSIvPgogIDxwYXRoIGQ9Ik0zLjIxNTI1IDE3LjM4NzRDMy44NzMzOSAxNi43MjM4IDQuNzcxMzUgMTYuMzUyNCA1LjcwNTM3IDE2LjM1NkM2LjAyODEzIDE2LjM1NiA2LjM0OTA5IDE2LjM5OTIgNi42NTkyMyAxNi40ODU4QzUuMjkwNjUgMTQuMjEwMiA1LjI5NjA2IDExLjM2MzEgNi42NzM2NSA5LjA5Mjk1QzQuNzk2NTkgOS42MDg2NSAyLjg1ODIzIDguNTAzMzMgMi4zNDQzMyA2LjYyODA3QzIuMjYxMzkgNi4zMjMzNCAyLjIxODEyIDYuMDA5NiAyLjIxODEyIDUuNjkyMjVWNS41OTY2OEMtMC43MjYzOTkgOS45MjQyIC0wLjc0MDgyNCAxNS42MDk1IDIuMTgzODYgMTkuOTUxNFYxOS44Nzc1QzIuMTgwMjUgMTguOTQzNSAyLjU1MTY5IDE4LjA0NTUgMy4yMTUyNSAxNy4zODc0WiIgZmlsbD0id2hpdGUiLz4KICA8cGF0aCBkPSJNNS43MzkyNiAyLjA0Njg4QzcuNzUwMjMgMi4wNDY4OCA5LjM4MzQ1IDMuNjc2MzcgOS4zODM3OSA1LjY4ODQ4TDkuMzc4OTEgNS44NzU5OEM5LjI4MzIgNy44MDA5NSA3LjY5MDQ4IDkuMzMzOTggNS43NDEyMSA5LjMzMzk4QzMuNzI5NzQgOS4zMzU2MiAyLjA5NTcgNy43MDQyMyAyLjA5NTcgNS42OTIzOFY1LjY5MDQzTDIuMTA5MzggNS4zNzg5MUMyLjEzNjQ0IDUuMDY3NDggMi4yMDY4IDQuNzU2NDQgMi4zNDE4IDQuNDQzMzZDMi41MjAyNSA0LjAyOTYyIDIuNzk1NDEgMy42NDk4NCAzLjE2ODk1IDMuMjc3MzRDMy45MTgzOSAyLjUyODA3IDQuNjU4ODUgMi4wNDcwMSA1LjczOTI2IDIuMDQ2ODhaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSIjMTIxMjEyIiBzdHJva2Utd2lkdGg9IjEiLz4KICA8cGF0aCBkPSJNNS42NzcyNSAxNi4yNTQ5QzcuNjg1ODEgMTYuMjQ4MSA5LjMxNjY5IDE3Ljg3MDUgOS4zMjM3MyAxOS44Nzc5QzkuMzMwNTUgMjEuODg2NiA3LjcwODM0IDIzLjUxODYgNS43MDA2OCAyMy41MjU0SDUuNjk1OEM1LjI3OTA1IDIzLjUyNDIgNC44NjU2NyAyMy40NTg4IDQuNDQ4NzMgMjMuMjc4M0M0LjAzNTU0IDIzLjA5OTQgMy42NTYzOCAyMi44MjI5IDMuMjgzNjkgMjIuNDUwMkMyLjUzNTI4IDIxLjcwMTcgMi4wNTQyIDIwLjk1OTUgMi4wNTQyIDE5Ljg4MDlDMi4wNTkwNyAxNy44ODEzIDMuNjc3MTMgMTYuMjYxOSA1LjY3NzI1IDE2LjI1NDlaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSIjMTIxMjEyIiBzdHJva2Utd2lkdGg9IjEiLz4KICA8dGV4dCB4PSIzNSIgeT0iMjAiIGZpbGw9IndoaXRlIiBmb250LWZhbWlseT0iQXZlbmlyIE5leHQsIC1hcHBsZS1zeXN0ZW0sIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjAiIGZvbnQtd2VpZ2h0PSI2MDAiPkRvY3M8L3RleHQ+Cjwvc3ZnPgo="); background-repeat: no-repeat; background-size: 144px 26px; background-position: left center; opacity: 1; transition: opacity 0.3s ease; pointer-events: none; z-index: 1; } .dark #fern-header .fern-header-logo-container a[href="/"]:has(img) img { opacity: 0; transition: opacity 0.3s ease; } .dark #fern-header .fern-header-logo-container a[href="/"]:has(img):hover::before { opacity: 0; } .dark #fern-header .fern-header-logo-container a[href="/"]:has(img):focus-visible::before { opacity: 0; } .dark #fern-header .fern-header-logo-container a[href="/"]:has(img):hover img { opacity: 1; } .dark #fern-header .fern-header-logo-container a[href="/"]:has(img):focus-within img { opacity: 1; outline: none; } /* Light mode logo: black by default, crossfade to color on hover */ #fern-header a[href="/"]:has(img) { position: relative; } #fern-header a[href="/"]:has(img)::before { content: ''; position: absolute; top: 0; left: 0; width: 26px; height: 26px; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjI2IiB2aWV3Qm94PSIwIDAgMTQ0IDI2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik04LjIyOTYyIDMuMjAyMzlDOS4xMzExOSA0LjEwMjE1IDkuNDc1NTggNS40MjAyNCA5LjEzMTE5IDYuNjQ2MzdDMTAuMjQwMSA1Ljk3OTIyIDExLjUxMTMgNS42Mjc2IDEyLjgwNiA1LjYyOTQxSDEyLjgzM0MxNC43MzUzIDUuNjM0ODIgMTYuNTU2NSA2LjM5OTM0IDE3Ljg5NDQgNy43NTE2OUMxOC45NjczIDguODc4NjUgMjAuNzQ4OCA4LjkyMTkzIDIxLjg3NTcgNy44NTA4N0MyMy4wMDI3IDYuNzc4IDIzLjA0NiA0Ljk5NjUxIDIxLjk3NDkgMy44Njk1NUMyMS45NDc4IDMuODQwNyAyMS45MjA4IDMuODEzNjUgMjEuODkyIDMuNzg2NjFDMTkuNTAyOCAxLjM3MDQxIDE2LjI0ODEgMC4wMDkwNDQ0NCAxMi44NDkyIDIuODc3NzhlLTA1SDEyLjgwMDZDMTAuMjU2MyAtMC4wMDUzODA2MiA3Ljc2OTgyIDAuNzUxOTM1IDUuNjYwMTYgMi4xNzI4SDUuNzM5NDlDNi42NzM1MiAyLjE3MSA3LjU2OTY3IDIuNTQyNDUgOC4yMjk2MiAzLjIwNDE5VjMuMjAyMzlaIiBmaWxsPSIjMTIxMjEyIi8+CiAgPHBhdGggZD0iTTE5Ljg0MjEgMTcuMDcyM0MxOS4wOTkyIDE3LjA3MjMgMTguMzg1MiAxNy4zNjYyIDE3Ljg1ODcgMTcuODg5MUMxNi41MTcxIDE5LjIyMzQgMTQuNzAxNCAxOS45NzM1IDEyLjgwOTkgMTkuOTcxN0gxMi43ODI4QzExLjQ4NDYgMTkuOTY5OSAxMC4yMTM0IDE5LjYxMjkgOS4xMDQ0NCAxOC45Mzg1QzkuMTg5MTkgMTkuMjQ1IDkuMjMwNjYgMTkuNTYyNCA5LjIzMDY2IDE5Ljg3OTdDOS4yMzA2NiAyMS44MjUzIDcuNjU0NzMgMjMuNDAxMyA1LjcwOTE1IDIzLjQwMTNINS42MTcxOUM3LjcyNTA1IDI0LjgzNjYgMTAuMjEzNCAyNS42MDY1IDEyLjc2MyAyNS42MTAxSDEyLjgxMTdDMTYuMTkwOCAyNS42MTU1IDE5LjQzNDYgMjQuMjc3NiAyMS44MjczIDIxLjg5MkMyMi45MzA5IDIwLjc5NTcgMjIuOTM5OSAxOS4wMTQyIDIxLjg0MzYgMTcuOTA4OUMyMS4zMTUzIDE3LjM3NTIgMjAuNTk0IDE3LjA3NTkgMTkuODQzOSAxNy4wNzU5VjE3LjA3MjNIMTkuODQyMVoiIGZpbGw9IiMxMjEyMTIiLz4KICA8cGF0aCBkPSJNMy4yMTUyNSAxNy4zODc0QzMuODczMzkgMTYuNzIzOCA0Ljc3MTM1IDE2LjM1MjQgNS43MDUzNyAxNi4zNTZDNi4wMjgxMyAxNi4zNTYgNi4zNDkwOSAxNi4zOTkyIDYuNjU5MjMgMTYuNDg1OEM1LjI5MDY1IDE0LjIxMDIgNS4yOTYwNiAxMS4zNjMxIDYuNjczNjUgOS4wOTI5NUM0Ljc5NjU5IDkuNjA4NjUgMi44NTgyMyA4LjUwMzMzIDIuMzQ0MzMgNi42MjgwN0MyLjI2MTM5IDYuMzIzMzQgMi4yMTgxMiA2LjAwOTYgMi4yMTgxMiA1LjY5MjI1VjUuNTk2NjhDLTAuNzI2Mzk5IDkuOTI0MiAtMC43NDA4MjQgMTUuNjA5NSAyLjE4Mzg2IDE5Ljk1MTRWMTkuODc3NUMyLjE4MDI1IDE4Ljk0MzUgMi41NTE2OSAxOC4wNDU1IDMuMjE1MjUgMTcuMzg3NFoiIGZpbGw9IiMxMjEyMTIiLz4KICA8cGF0aCBkPSJNNS43MzkyNiAyLjA0Njg4QzcuNzUwMjMgMi4wNDY4OCA5LjM4MzQ1IDMuNjc2MzcgOS4zODM3OSA1LjY4ODQ4TDkuMzc4OTEgNS44NzU5OEM5LjI4MzIgNy44MDA5NSA3LjY5MDQ4IDkuMzMzOTggNS43NDEyMSA5LjMzMzk4QzMuNzI5NzQgOS4zMzU2MiAyLjA5NTcgNy43MDQyMyAyLjA5NTcgNS42OTIzOFY1LjY5MDQzTDIuMTA5MzggNS4zNzg5MUMyLjEzNjQ0IDUuMDY3NDggMi4yMDY4IDQuNzU2NDQgMi4zNDE4IDQuNDQzMzZDMi41MjAyNSA0LjAyOTYyIDIuNzk1NDEgMy42NDk4NCAzLjE2ODk1IDMuMjc3MzRDMy45MTgzOSAyLjUyODA3IDQuNjU4ODUgMi4wNDcwMSA1LjczOTI2IDIuMDQ2ODhaIiBmaWxsPSIjMTIxMjEyIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEiLz4KICA8cGF0aCBkPSJNNS42NzcyNSAxNi4yNTQ5QzcuNjg1ODEgMTYuMjQ4MSA5LjMxNjY5IDE3Ljg3MDUgOS4zMjM3MyAxOS44Nzc5QzkuMzMwNTUgMjEuODg2NiA3LjcwODM0IDIzLjUxODYgNS43MDA2OCAyMy41MjU0SDUuNjk1OEM1LjI3OTA1IDIzLjUyNDIgNC44NjU2NyAyMy40NTg4IDQuNDQ4NzMgMjMuMjc4M0M0LjAzNTU0IDIzLjA5OTQgMy42NTYzOCAyMi44MjI5IDMuMjgzNjkgMjIuNDUwMkMyLjUzNTI4IDIxLjcwMTcgMi4wNTQyIDIwLjk1OTUgMi4wNTQyIDE5Ljg4MDlDMi4wNTkwNyAxNy44ODEzIDMuNjc3MTMgMTYuMjYxOSA1LjY3NzI1IDE2LjI1NDlaIiBmaWxsPSIjMTIxMjEyIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEiLz4KICA8dGV4dCB4PSIzNSIgeT0iMjAiIGZpbGw9IiMxMjEyMTIiIGZvbnQtZmFtaWx5PSJBdmVuaXIgTmV4dCwgLWFwcGxlLXN5c3RlbSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyMCIgZm9udC13ZWlnaHQ9IjYwMCI+RG9jczwvdGV4dD4KPC9zdmc+"); background-repeat: no-repeat; background-size: 144px 26px; background-position: left center; opacity: 1; transition: opacity 0.3s ease; pointer-events: none; z-index: 1; } #fern-header a[href="/"]:has(img) img { opacity: 0; transition: opacity 0.3s ease; } #fern-header a[href="/"]:has(img):hover::before { opacity: 0; } #fern-header a[href="/"]:has(img):focus-visible::before { opacity: 0; } #fern-header a[href="/"]:has(img):hover img { opacity: 1; } #fern-header a[href="/"]:has(img):focus-within img { opacity: 1; outline: none; } /* Logo container: lay out icon + Docs title side by side */ .fern-header-logo-container { display: flex !important; align-items: center !important; } /* "Docs" title link injected by nav-logo-split.js */ .fern-docs-title { font-family: "Avenir Next", -apple-system, sans-serif; font-size: 20px; font-weight: 600; color: #2B2D31; text-decoration: none; line-height: 26px; white-space: nowrap; padding-left: 8px; transition: color 0.3s ease; } .dark .fern-docs-title { color: #ffffff; } .fern-docs-title:hover { color: var(--accent-11) !important; } .fern-docs-title:focus-visible { color: var(--accent-11) !important; outline: none; } .dark .fern-docs-title:hover { color: var(--color-blue-light) !important; } .dark .fern-docs-title:focus-visible { color: var(--color-blue-light) !important; outline: none; } @media (max-width: 1200px) { #fern-header .fern-docs-title:hover, #fern-header.dark .fern-docs-title:hover, .dark #fern-header .fern-docs-title:hover { color: inherit !important; } #fern-header .fern-docs-title:focus-visible, #fern-header.dark .fern-docs-title:focus-visible, .dark #fern-header .fern-docs-title:focus-visible { color: inherit !important; outline: none; } } /* Allow vertical scroll when dropdown is taller than the viewport */ div[data-testid="product-dropdown-content"] { max-height: var(--radix-dropdown-menu-content-available-height) !important; overflow-y: auto !important; } /* Desktop dropdown container */ @media (min-width: 1200px) { div[data-testid="product-dropdown-content"] { border-radius: 1rem !important; display: flex !important; width: 881px !important; height: auto !important; max-height: var(--radix-dropdown-menu-content-available-height) !important; overflow-y: auto !important; padding: 32px !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } /* Remove default parent heading */ div:has(> .fern-product-selector-radio-group) { margin-top: 0; } /* * Vertical stacked layout matching the reference design: * Row 1: "REFERENCE" header (col 1–2) * Row 2: API Reference (col 1–2, full width) * Row 3: "LEARN" header (col 1–2) * Row 4: Concepts | Tutorials and Guides * Row 5: "RESOURCES" header (col 1–2) * Row 6: Contentful SDK's | Tools and Plugins * Row 7: MCP * Row 8: "PRODUCTS" header (col 1–2) * Row 9: Personalization | Studio (slug: experiences) * Row 10: Extensibility | Platform */ .fern-product-selector-radio-group { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 0; padding: 1.5rem 0 0 !important; > a { position: relative; .fern-selection-item { border-radius: 0.75rem; } } /* ── REFERENCE ── */ > a[href*="references"] { grid-column: 1 / -1; grid-row: 2; } > a[href*="references"]:before { content: "Reference"; font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; position: absolute; top: -1.25rem; left: 0.75rem; color: var(--grayscale-9); pointer-events: none; } /* ── LEARN ── */ > a[href*="concepts"] { grid-column: 1; grid-row: 4; } > a[href*="tutorials"] { grid-column: 2; grid-row: 4; } > a[href*="concepts"]:before { content: "Learn"; font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; position: absolute; top: -1.25rem; left: 0.75rem; color: var(--grayscale-9); pointer-events: none; } > a[href*="concepts"] { margin-top: 30px; } > a[href*="tutorials"] { margin-top: 30px; } /* ── RESOURCES ── */ > a[href*="sdks"] { grid-column: 1; grid-row: 6; } > a[href*="tools"] { grid-column: 2; grid-row: 6; } > a[href*="mcp"] { grid-column: 1; grid-row: 7; } > a[href*="sdks"]:before { content: "Resources"; font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; position: absolute; top: -1.25rem; left: 0.75rem; color: var(--grayscale-9); pointer-events: none; } > a[href*="sdks"] { margin-top: 30px; } > a[href*="tools"] { margin-top: 30px; } /* ── PRODUCTS ── */ > a[href*="personalization"] { grid-column: 1; grid-row: 9; } > a[href*="experiences"] { grid-column: 2; grid-row: 9; } > a[href*="extensibility"] { grid-column: 1; grid-row: 10; } > a[href*="platform"] { grid-column: 2; grid-row: 10; } > a[href*="personalization"]:before { content: "Products"; font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; position: absolute; top: -1.25rem; left: 0.75rem; color: var(--grayscale-9); pointer-events: none; } > a[href*="personalization"] { margin-top: 30px; } > a[href*="experiences"] { margin-top: 30px; } } } /* Hide internal-only products in every product-switcher surface, regardless of breakpoint. This covers the desktop dropdown and the mobile/sidebar menu. */ .fern-product-selector-radio-group > a[href*="experience-orchestration"], .fern-product-selector-radio-group > a[href*="compose"], div[data-testid="product-dropdown-content"] a[href*="experience-orchestration"], div[data-testid="product-dropdown-content"] a[href*="compose"] { display: none !important; } /* Mobile layout */ @media (max-width: 640px) { .fern-product-selector-radio-group { width: 100%; } div[data-testid="product-dropdown-content"] { width: calc(100vw - 2rem) !important; } } /* Remove Fern's container box from SVG file icons in the product switcher. Fern wraps file-based SVGs in: div.fern-selection-item-icon.use-icon > span.fern-file-icon Strip only the visual container styling (border/background/padding/radius) while keeping the element's width/height so the grid layout stays intact. */ .fern-selection-item-icon:has(.fern-file-icon) { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; align-items: flex-start !important; } .fern-selection-item-icon:has(.fern-file-icon), .fern-selection-item-icon:has(.fern-file-icon) *, *:hover .fern-selection-item-icon:has(.fern-file-icon), *:hover .fern-selection-item-icon:has(.fern-file-icon) * { transform: none !important; scale: 1 !important; animation: none !important; } *:focus-within .fern-selection-item-icon:has(.fern-file-icon), *:focus-within .fern-selection-item-icon:has(.fern-file-icon) * { transform: none !important; scale: 1 !important; animation: none !important; outline: none; } /* Lock icon to 35px even on hover */ .fern-selection-item-icon .fern-file-icon:hover, .fern-selection-item-icon .fern-file-icon svg:hover, *:hover .fern-selection-item-icon .fern-file-icon, *:hover .fern-selection-item-icon .fern-file-icon svg { width: 35px !important; height: 35px !important; transform: none !important; scale: 1 !important; } .fern-selection-item-icon .fern-file-icon:focus-visible, .fern-selection-item-icon .fern-file-icon svg:focus-visible, *:focus-within .fern-selection-item-icon .fern-file-icon, *:focus-within .fern-selection-item-icon .fern-file-icon svg { width: 35px !important; height: 35px !important; transform: none !important; scale: 1 !important; outline: none; } .fern-selection-item-icon .fern-file-icon, .fern-selection-item-icon .fern-file-icon svg { width: 35px !important; height: 35px !important; } /* Dark mode: invert hardcoded dark fills so they're visible on dark backgrounds. Also neutralises white background rects (extensibility/personalization/studio) by flipping them to black, which blends into the dark page. */ .dark .fern-selection-item-icon .fern-file-icon svg { filter: invert(1) !important; } /* PRODUCTS-section icons have built-in blue colours — don't invert them */ .dark div[data-testid="product-dropdown-content"] a[href*="/personalization"] .fern-file-icon svg, .dark div[data-testid="product-dropdown-content"] a[href*="/extensibility"] .fern-file-icon svg, .dark div[data-testid="product-dropdown-content"] a[href*="/experiences"] .fern-file-icon svg, .dark div[data-testid="product-dropdown-content"] a[href*="/platform"] .fern-file-icon svg, .dark .fern-product-selector a[href*="/personalization"] .fern-file-icon svg, .dark .fern-product-selector a[href*="/extensibility"] .fern-file-icon svg, .dark .fern-product-selector a[href*="/experiences"] .fern-file-icon svg, .dark .fern-product-selector a[href*="/platform"] .fern-file-icon svg { filter: none !important; } /* Mobile sidebar trigger: the selected product renders as a button (no href), so the a[href*="..."] no-invert rules above don't match. Keep blue product icons blue, but let dark monochrome icons keep the base invert(1) treatment. */ .dark #fern-sidebar[data-viewport="mobile"] .fern-product-selector .fern-file-icon svg:has([fill="#1770E6" i]), .dark #fern-sidebar[data-viewport="mobile"] .fern-product-selector .fern-file-icon svg:has([style*="#1770E6" i]) { filter: none !important; } /*** END -- PRODUCT SELECTOR STYLING ***/ /* Mobile sidebar — Contact sales dark mode hover (placed last to guarantee source-order win) */ .dark #fern-sidebar a.fern-button.outlined[href*="contact/sales"]:hover { background-color: #ffffff !important; border-color: #ffffff !important; color: var(--color-sidebar-hover) !important; } .dark #fern-sidebar a.fern-button.outlined[href*="contact/sales"]:focus-visible { background-color: #ffffff !important; border-color: #ffffff !important; color: var(--color-sidebar-hover) !important; outline: none; } .dark #fern-sidebar a.fern-button.outlined[href*="contact/sales"]:hover > .fern-button-content, .dark #fern-sidebar a.fern-button.outlined[href*="contact/sales"]:hover > .fern-button-content > .fern-button-text { background-color: transparent !important; border: none !important; color: var(--color-sidebar-hover) !important; } .dark #fern-sidebar a.fern-button.outlined[href*="contact/sales"]:focus-within > .fern-button-content, .dark #fern-sidebar a.fern-button.outlined[href*="contact/sales"]:focus-within > .fern-button-content > .fern-button-text { background-color: transparent !important; border: none !important; color: var(--color-sidebar-hover) !important; outline: none; } /* ── Injected mobile nav (1024–1200px breakpoint extension) ────────────────── mobile-breakpoint.js clones header nav elements into the sidebar on hamburger click. Root classes are renamed to escape display:none rules. ─────────────────────────────────────────────────────────────────────────── */ .cf-injected-mobile-nav { display: flex; flex-direction: column; padding: 12px 16px 16px; gap: 4px; border-bottom: 1px solid var(--grayscale-4); margin-bottom: 4px; } .dark .cf-injected-mobile-nav { border-bottom-color: var(--color-border) !important; } /* Product selector — full width in sidebar */ .cf-injected-selectors { width: 100% !important; display: flex !important; flex-direction: column !important; margin-bottom: 8px !important; } /* Nav links — stack vertically */ .cf-injected-nav-links { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; gap: 0 !important; margin: 0 !important; } /* Individual link buttons */ .cf-injected-nav-links .fern-button { background-color: transparent !important; font-weight: 600 !important; font-size: 16px !important; color: var(--color-text-primary) !important; width: 100% !important; justify-content: flex-start !important; padding: 10px 0 !important; box-shadow: none !important; border: none !important; } .cf-injected-nav-links .fern-button:hover { color: var(--accent-11) !important; background-color: transparent !important; } .cf-injected-nav-links .fern-button:focus-visible { color: var(--accent-11) !important; background-color: transparent !important; outline: none; } /* Contact Sales button — centered outlined pill */ .cf-injected-nav-links a.fern-button[href*="contact/sales"] { align-self: center !important; width: fit-content !important; min-width: max-content !important; margin-left: auto !important; margin-right: auto !important; padding: 0 16px !important; height: 32px !important; min-height: 32px !important; } /* Theme toggle button — hide in sidebar (non-functional clone) */ .cf-injected-nav-links > button:not([class*="fern-button"]) { display: none !important; } /* Dark mode — link colors */ .dark .cf-injected-nav-links .fern-button:not([href*="contact/sales"]) { color: white !important; } .dark .cf-injected-nav-links .fern-button:not([href*="contact/sales"]):hover { color: var(--color-sidebar-hover) !important; } .dark .cf-injected-nav-links .fern-button:not([href*="contact/sales"]):focus-visible { color: var(--color-sidebar-hover) !important; outline: none; } /* Breadcrumb separators — replace Fern's SVG chevrons with slash characters. Hide the SVG, then inject "/" before the item that follows each arrow. */ .fern-breadcrumb svg.fern-breadcrumb-arrow { display: none; } .fern-breadcrumb svg.fern-breadcrumb-arrow + .fern-breadcrumb-item::before { content: '/'; color: var(--color-g100); font-size: 14px; padding: 0 8px; } .dark .fern-breadcrumb svg.fern-breadcrumb-arrow + .fern-breadcrumb-item::before { color: var(--color-text-secondary); }