@font-face { font-family: 'TomatoGrotesk-Semibold'; src: url('https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/brevo.docs.buildwithfern.com/66bd0d3f4caab58f0cc5d8bddef3bb9c13b9dce942e8586dc85d0c57392d61c4/docs/fonts/brevo.woff2?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260903%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260903T130558Z&X-Amz-Expires=604800&X-Amz-Signature=328f7f43be677ba46631e09c390ec0475ce425ae5f2588492de5dbbc34ab8987&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'TomatoGrotesk-Semibold'; src: url('https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/brevo.docs.buildwithfern.com/66bd0d3f4caab58f0cc5d8bddef3bb9c13b9dce942e8586dc85d0c57392d61c4/docs/fonts/brevo.woff2?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260903%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260903T130558Z&X-Amz-Expires=604800&X-Amz-Signature=328f7f43be677ba46631e09c390ec0475ce425ae5f2588492de5dbbc34ab8987&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'TomatoGrotesk-Semibold'; src: url('https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/brevo.docs.buildwithfern.com/66bd0d3f4caab58f0cc5d8bddef3bb9c13b9dce942e8586dc85d0c57392d61c4/docs/fonts/brevo.woff2?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260903%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260903T130558Z&X-Amz-Expires=604800&X-Amz-Signature=328f7f43be677ba46631e09c390ec0475ce425ae5f2588492de5dbbc34ab8987&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'TomatoGrotesk-Semibold'; src: url('https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/brevo.docs.buildwithfern.com/66bd0d3f4caab58f0cc5d8bddef3bb9c13b9dce942e8586dc85d0c57392d61c4/docs/fonts/brevo.woff2?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260903%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260903T130558Z&X-Amz-Expires=604800&X-Amz-Signature=328f7f43be677ba46631e09c390ec0475ce425ae5f2588492de5dbbc34ab8987&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { --header-height: 108px; --header-height-real: 64px; --mobile-header-height-real: 64px; --content-width: 640px; --sidebar-width: 288px; --page-width: 100vw; --logo-height: 45px; --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-heading: 'TomatoGrotesk-Semibold', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } :root { /* for backwards compatibility */ --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: #fafefb; --accent-2: #f3fcf6; --accent-3: #e0f9ea; --accent-4: #cdf4dc; --accent-5: #b9ecce; --accent-6: #a3e0bd; --accent-7: #87d0a7; --accent-8: #5bbc8a; --accent-9: #066b43; --accent-10: #005c35; --accent-11: #1f7950; --accent-12: #1d432f; --accent-a1: #00cc3305; --accent-a2: #00c0400c; --accent-a3: #00ce531f; --accent-a4: #00c74d32; --accent-a5: #00ba4d46; --accent-a6: #00aa495c; --accent-a7: #009c4478; --accent-a8: #009749a4; --accent-a9: #00673ef9; --accent-a10: #005c35; --accent-a11: #006738e0; --accent-a12: #002b14e2; --accent-contrast: #fff; --accent-surface: #f0fbf4cc; --accent-indicator: #066b43; --accent-track: #066b43; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .light, :root { --accent-1: oklch(99.3% 0.0058 158.7); --accent-2: oklch(98.2% 0.0112 158.7); --accent-3: oklch(96% 0.0332 158.7); --accent-4: oklch(93.3% 0.0522 158.7); --accent-5: oklch(89.9% 0.0675 158.7); --accent-6: oklch(85.6% 0.0798 158.7); --accent-7: oklch(79.8% 0.0942 158.7); --accent-8: oklch(72.2% 0.1184 158.7); --accent-9: oklch(46.6% 0.1057 158.7); --accent-10: oklch(41.3% 0.1057 158.7); --accent-11: oklch(51.2% 0.1057 158.7); --accent-12: oklch(35% 0.0561 158.7); --accent-a1: color(display-p3 0.0235 0.7569 0.0235 / 0.016); --accent-a2: color(display-p3 0.0235 0.7098 0.1216 / 0.04); --accent-a3: color(display-p3 0.0039 0.7333 0.2314 / 0.102); --accent-a4: color(display-p3 0.0039 0.7176 0.2196 / 0.165); --accent-a5: color(display-p3 0.0039 0.6706 0.2196 / 0.236); --accent-a6: color(display-p3 0.0039 0.5843 0.1922 / 0.31); --accent-a7: color(display-p3 0.0039 0.5294 0.1843 / 0.408); --accent-a8: color(display-p3 0 0.5059 0.1882 / 0.546); --accent-a9: color(display-p3 0 0.2824 0.1137 / 0.82); --accent-a10: color(display-p3 0 0.2431 0.0824 / 0.851); --accent-a11: color(display-p3 0 0.302 0.1176 / 0.765); --accent-a12: color(display-p3 0 0.1255 0.0471 / 0.848); --accent-contrast: #fff; --accent-surface: color(display-p3 0.9529 0.9804 0.9608 / 0.8); --accent-indicator: oklch(46.6% 0.1057 158.7); --accent-track: oklch(46.6% 0.1057 158.7); } } } .light, :root { --grayscale-1: #fbfdfc; --grayscale-2: #f7f9f8; --grayscale-3: #eef1f0; --grayscale-4: #e6e9e8; --grayscale-5: #dfe2e0; --grayscale-6: #d7dad9; --grayscale-7: #cbcfcd; --grayscale-8: #b8bcba; --grayscale-9: #868e8b; --grayscale-10: #7c8481; --grayscale-11: #5f6563; --grayscale-12: #1a211e; --grayscale-a1: #00804004; --grayscale-a2: #00402008; --grayscale-a3: #002d1e11; --grayscale-a4: #001f1519; --grayscale-a5: #00180820; --grayscale-a6: #00140d28; --grayscale-a7: #00140a34; --grayscale-a8: #000f0847; --grayscale-a9: #00110b79; --grayscale-a10: #00100a83; --grayscale-a11: #000a07a0; --grayscale-a12: #000805e5; --grayscale-contrast: #000; --grayscale-surface: #ffffffcc; --grayscale-indicator: #868e8b; --grayscale-track: #868e8b; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .light, :root { --grayscale-1: color(display-p3 0.986 0.992 0.988); --grayscale-2: color(display-p3 0.97 0.977 0.974); --grayscale-3: color(display-p3 0.935 0.944 0.94); --grayscale-4: color(display-p3 0.904 0.913 0.909); --grayscale-5: color(display-p3 0.875 0.885 0.88); --grayscale-6: color(display-p3 0.844 0.854 0.849); --grayscale-7: color(display-p3 0.8 0.811 0.806); --grayscale-8: color(display-p3 0.725 0.738 0.732); --grayscale-9: color(display-p3 0.531 0.556 0.546); --grayscale-10: color(display-p3 0.492 0.515 0.506); --grayscale-11: color(display-p3 0.377 0.395 0.389); --grayscale-12: color(display-p3 0.107 0.129 0.118); --grayscale-a1: #00804004; --grayscale-a2: #00402008; --grayscale-a3: #002d1e11; --grayscale-a4: #001f1519; --grayscale-a5: #00180820; --grayscale-a6: #00140d28; --grayscale-a7: #00140a34; --grayscale-a8: #000f0847; --grayscale-a9: #00110b79; --grayscale-a10: #00100a83; --grayscale-a11: #000a07a0; --grayscale-a12: #000805e5; --grayscale-contrast: #000; --grayscale-surface: color(display-p3 1 1 1 / 80%); --grayscale-indicator: color(display-p3 0.531 0.556 0.546); --grayscale-track: color(display-p3 0.531 0.556 0.546); } } } .dark { --accent-1: #000; --accent-2: #0d130b; --accent-3: #1a2615; --accent-4: #24361d; --accent-5: #2e4425; --accent-6: #38532d; --accent-7: #436335; --accent-8: #4f773e; --accent-9: #d7fec8; --accent-10: #cef4bf; --accent-11: #b4e0a3; --accent-12: #d3fac4; --accent-a1: #00000000; --accent-a2: #afff9413; --accent-a3: #afff8d26; --accent-a4: #aaff8936; --accent-a5: #adff8b44; --accent-a6: #adff8b53; --accent-a7: #adff8963; --accent-a8: #aaff8577; --accent-a9: #d8ffc9fe; --accent-a10: #d7ffc8f4; --accent-a11: #cdffbae0; --accent-a12: #d7ffc8fa; --accent-contrast: #182613; --accent-surface: #1a261680; --accent-indicator: #d7fec8; --accent-track: #d7fec8; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --accent-1: oklch(0% 0.0142 137.1); --accent-2: oklch(17.8% 0.0189 137.1); --accent-3: oklch(25.1% 0.0341 137.1); --accent-4: oklch(30.9% 0.0475 137.1); --accent-5: oklch(35.9% 0.0584 137.1); --accent-6: oklch(41% 0.0691 137.1); --accent-7: oklch(46.4% 0.0806 137.1); --accent-8: oklch(52.4% 0.0951 137.1); --accent-9: oklch(95.6% 0.0817 137.1); --accent-10: oklch(92.7% 0.0817 137.1); --accent-11: oklch(86.1% 0.0951 137.1); --accent-12: oklch(94.4% 0.0817 137.1); --accent-a1: color(display-p3 0 0 0 / 0); --accent-a2: color(display-p3 0.7333 0.9961 0.6275 / 0.075); --accent-a3: color(display-p3 0.7333 0.9961 0.6039 / 0.15); --accent-a4: color(display-p3 0.7412 1 0.5922 / 0.212); --accent-a5: color(display-p3 0.7608 1 0.6 / 0.263); --accent-a6: color(display-p3 0.7569 1 0.6 / 0.322); --accent-a7: color(display-p3 0.7569 1 0.5922 / 0.385); --accent-a8: color(display-p3 0.749 1 0.5765 / 0.463); --accent-a9: color(display-p3 0.8824 1 0.8078 / 0.993); --accent-a10: color(display-p3 0.8784 1 0.8078 / 0.953); --accent-a11: color(display-p3 0.8471 1 0.7569 / 0.875); --accent-a12: color(display-p3 0.8784 1 0.8078 / 0.977); --accent-contrast: #182613; --accent-surface: color(display-p3 0.1098 0.149 0.0941 / 0.5); --accent-indicator: oklch(95.6% 0.0817 137.1); --accent-track: oklch(95.6% 0.0817 137.1); } } } .dark { --grayscale-1: #111210; --grayscale-2: #181917; --grayscale-3: #212220; --grayscale-4: #282a27; --grayscale-5: #2f312e; --grayscale-6: #383a36; --grayscale-7: #454843; --grayscale-8: #5c625b; --grayscale-9: #687066; --grayscale-10: #767d74; --grayscale-11: #afb5ad; --grayscale-12: #eceeec; --grayscale-a1: #00000000; --grayscale-a2: #f1f2f008; --grayscale-a3: #f4f5f312; --grayscale-a4: #f3fef21a; --grayscale-a5: #f2fbf122; --grayscale-a6: #f4faed2c; --grayscale-a7: #f2fced3b; --grayscale-a8: #edfdeb57; --grayscale-a9: #ebfde766; --grayscale-a10: #f0fdec74; --grayscale-a11: #f6fef4b0; --grayscale-a12: #fdfffded; --grayscale-contrast: #fff; --grayscale-surface: rgba(0, 0, 0, 0.05); --grayscale-indicator: #687066; --grayscale-track: #687066; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --grayscale-1: color(display-p3 0.067 0.07 0.063); --grayscale-2: color(display-p3 0.095 0.098 0.091); --grayscale-3: color(display-p3 0.131 0.135 0.126); --grayscale-4: color(display-p3 0.158 0.163 0.153); --grayscale-5: color(display-p3 0.186 0.192 0.18); --grayscale-6: color(display-p3 0.221 0.229 0.215); --grayscale-7: color(display-p3 0.273 0.284 0.266); --grayscale-8: color(display-p3 0.365 0.382 0.359); --grayscale-9: color(display-p3 0.414 0.438 0.404); --grayscale-10: color(display-p3 0.467 0.49 0.458); --grayscale-11: color(display-p3 0.69 0.709 0.682); --grayscale-12: color(display-p3 0.927 0.933 0.926); --grayscale-a1: #00000000; --grayscale-a2: #f1f2f008; --grayscale-a3: #f4f5f312; --grayscale-a4: #f3fef21a; --grayscale-a5: #f2fbf122; --grayscale-a6: #f4faed2c; --grayscale-a7: #f2fced3b; --grayscale-a8: #edfdeb57; --grayscale-a9: #ebfde766; --grayscale-a10: #f0fdec74; --grayscale-a11: #f6fef4b0; --grayscale-a12: #fdfffded; --grayscale-contrast: #fff; --grayscale-surface: color(display-p3 0 0 0 / 5%); --grayscale-indicator: color(display-p3 0.414 0.438 0.404); --grayscale-track: color(display-p3 0.414 0.438 0.404); } } } .light, :root { color-scheme: light; --accent: rgba(6, 107, 67, 1); --background: rgba(255, 255, 255, 1); --border: initial; --sidebar-background: initial; --header-background: rgba(215, 254, 200, 1); --card-background: initial; --theme-color: #fff; } .dark { color-scheme: dark; --accent: rgba(215, 254, 200, 1); --background: rgba(0, 0, 0, 1); --border: initial; --sidebar-background: initial; --header-background: rgba(10, 55, 0, 1); --card-background: initial; --theme-color: #000; } :root { --hero-background-color: #d7fec8; --landing-page-card-color: #dbd9f7; --card-link-color: #1b1b1b; --card-link-hover-color: #6358de; --hero-title-color: #0b996e; --hero-subtitle-color: #474747; --putple-card-title-color: #3b3585; --purple-card-shadow-color: #6358de; } .dark { --hero-background-color: #0a3700; --landing-page-card-color: #241f3a; --card-link-color: #ffffff; --card-link-hover-color: #8b84ed; --hero-title-color: #42ba8f; --hero-subtitle-color: #b8beb8; --putple-card-title-color: #dbd9f7; --purple-card-shadow-color: #8b84ed; } /* Hero section styles */ .hero-background { background-color: var(--hero-background-color); width: 100vw; margin-left: calc(-50vw + 50%); padding: 3rem 0; } .hero-container { display: flex; align-items: center; /* margin: -2rem -2rem 2rem -2rem; */ padding: 0 2rem; width: 100%; max-width: 1200px; margin: 0 auto; } .hero-content { flex: 1; } .hero-image-container { flex: 1; text-align: center; } .hero-image-placeholder { width: 100%; height: 300px; background-color: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #666; } /* body:has(.hero-container) .fern-page-actions { display: none !important; } */ /* Center page content */ .page-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } /* Postman button styles */ .postman-button { background-color: #ff6c37; border-radius: 4px; font-weight: 400; } .postman-button svg { color: #ffffff; width: 15px; height: 15px; } body:has(.hero-image) .purple-card { background-color: var(--landing-page-card-color); } body:has(.hero-image) .fern-card .fern-mdx-link { color: var(--card-link-color) !important; font-weight: normal !important; text-decoration: none !important; } body:has(.hero-image) .fern-card .fern-mdx-link:hover { color: var(--card-link-hover-color) !important; } body:has(.hero-image) .fern-card .fern-mdx-link:focus-visible { color: var(--card-link-hover-color) !important; outline: none; } /* >>>>>>> Variables <<<<<<< */ :root { --font-family: "Inter", sans-serif !important; --markdown-font-size: 16px !important; --markdown-line-height: 28px !important; --markdown-text: #1b1b1b !important; --markdown-title-font: "TomatoGrotesk-Semibold", sans-serif !important; --color-text-minimum: #808080; } /* ------------ Content ------------ */ /* .markdown-body h1 { font-weight: 500 !important; } */ .markdown-body p { line-height: 26px !important; } /* ------------ Custom Content ------------ */ .content-body h1 { font-size: 1.9375rem !important; line-height: 2.5rem !important; margin-top: 3.25rem !important; } .content-body h2 { font-size: 1.5625rem !important; line-height: 2rem !important; margin-top: 2rem !important; } .content-body h3, .content-body h4, .content-body h5, .content-body h6 { font-size: 1.25rem !important; line-height: 1.5rem !important; margin-top: 2rem !important; } .content-body a { text-decoration: none !important; color: #4682b4 !important; } body:has(.hero-image) h1 { color: var(--hero-title-color) !important; font-size: 60px !important; } body:has(.hero-image) p { color: var(--hero-subtitle-color) !important; font-size: 20px !important; } .purple-card > div > div > div { font-size: 20px; margin-bottom: 0.5rem; font-family: "TomatoGrotesk-Semibold", sans-serif; color: var(--putple-card-title-color) !important; } .purple-card > div > div > div > p { font-size: 13px !important; font-family: "Inter", sans-serif !important; } .purple-card:hover { box-shadow: var(--purple-card-shadow-color) 10px 10px 0px 0px; top: -2px; text-decoration: none; transition: all 0.2s ease 0.01s; } .purple-card:focus-visible { box-shadow: var(--purple-card-shadow-color) 10px 10px 0px 0px; top: -2px; text-decoration: none; transition: all 0.2s ease 0.01s; outline: none; } /* Glow shadow for interactive fern cards */ .fern-card.interactive { box-shadow: 0 0 0 rgba(6, 107, 67, 0); transition: box-shadow 0.3s ease, transform 0.3s ease; } .fern-card.interactive:hover { box-shadow: 0 0 20px rgba(6, 107, 67, 0.4), 0 0 40px rgba(6, 107, 67, 0.2); transform: translateY(-2px); } .fern-card.interactive:focus-visible { box-shadow: 0 0 20px rgba(6, 107, 67, 0.4), 0 0 40px rgba(6, 107, 67, 0.2); transform: translateY(-2px); outline: none; } .dark .fern-card.interactive:hover { box-shadow: 0 0 20px rgba(74, 222, 128, 0.5), 0 0 40px rgba(74, 222, 128, 0.3); } .dark .fern-card.interactive:focus-visible { box-shadow: 0 0 20px rgba(74, 222, 128, 0.5), 0 0 40px rgba(74, 222, 128, 0.3); outline: none; } #fern-header { border-bottom-right-radius: 90px !important; overflow: hidden; } /* Reading progress bar */ :root { --reading-progress: 0%; } .reading-progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-color: rgba(6, 107, 67, 0.1); z-index: 9999; pointer-events: none; } .reading-progress-bar { height: 100%; width: var(--reading-progress); background: linear-gradient(90deg, #066b43 0%, #42ba8f 100%); transition: width 0.1s ease-out; box-shadow: 0 0 10px rgba(6, 107, 67, 0.3); } .dark .reading-progress-container { background-color: rgba(74, 222, 128, 0.1); } .dark .reading-progress-bar { background: linear-gradient(90deg, #42ba8f 0%, #4ade80 100%); box-shadow: 0 0 10px rgba(74, 222, 128, 0.4); } /* Reading time estimate - under breadcrumb */ .reading-time-estimate { display: block !important; width: 100% !important; color: #066b43 !important; font-weight: 500; margin-top: 50px !important; margin-bottom: 0; visibility: visible !important; opacity: 1 !important; clear: both !important; flex-basis: 100% !important; } .reading-time-estimate .reading-time-icon { flex-shrink: 0; width: 14px; height: 14px; color: currentColor; } .reading-time-estimate .reading-time-text { font-weight: 500; } .dark .reading-time-estimate { color: #4ade80 !important; } /* Reading time skeleton loading effect */ .reading-time-skeleton { display: block; width: 120px; height: 24px; margin-top: 50px; background: linear-gradient( 90deg, rgba(6, 107, 67, 0.1) 0%, rgba(6, 107, 67, 0.2) 50%, rgba(6, 107, 67, 0.1) 100% ); background-size: 200% 100%; border-radius: 4px; animation: skeleton-shimmer 1.5s ease-in-out infinite; flex-basis: 100%; clear: both; } .dark .reading-time-skeleton { background: linear-gradient( 90deg, rgba(74, 222, 128, 0.1) 0%, rgba(74, 222, 128, 0.2) 50%, rgba(74, 222, 128, 0.1) 100% ); background-size: 200% 100%; } @keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Use case carousel styles */ .use-case-carousel { width: 100%; margin-left: 2rem; margin-right: 2rem; } .use-case-scroll-container { /* Hide scrollbar for Firefox */ scrollbar-width: none !important; -ms-overflow-style: none !important; /* IE and Edge */ } /* Hide scrollbar for Chrome, Safari and Opera - always hidden */ .use-case-scroll-container::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } .use-case-scroll-container::-webkit-scrollbar-track { display: none !important; background: transparent !important; } .use-case-scroll-container::-webkit-scrollbar-thumb { display: none !important; background: transparent !important; } .use-case-nav-button:hover { background: var(--accentPrimary) !important; border-color: var(--accentPrimary) !important; color: white !important; } .use-case-nav-button:focus-visible { background: var(--accentPrimary) !important; border-color: var(--accentPrimary) !important; color: white !important; outline: none; } .dark .use-case-nav-button { background: rgba(10, 55, 0, 0.9) !important; border-color: rgba(74, 222, 128, 0.3) !important; color: #4ade80 !important; } .dark .use-case-nav-button:hover { background: var(--accentPrimary) !important; border-color: var(--accentPrimary) !important; color: #0a3700 !important; } .dark .use-case-nav-button:focus-visible { background: var(--accentPrimary) !important; border-color: var(--accentPrimary) !important; color: #0a3700 !important; outline: none; } .use-case-card { transition: all 0.2s ease; } /* Use case card default border */ .use-case-card { border-color: rgba(6, 107, 67, 0.2) !important; } /* Dark mode enhancements for use case cards */ .dark .use-case-card { border-color: rgba(74, 222, 128, 0.3) !important; background-color: rgba(10, 55, 0, 0.2) !important; } .use-case-card:hover { border-color: #066b43 !important; transform: translateY(-4px); box-shadow: 0 8px 16px rgba(6, 107, 67, 0.15); } .use-case-card:focus-visible { border-color: #066b43 !important; transform: translateY(-4px); box-shadow: 0 8px 16px rgba(6, 107, 67, 0.15); outline: none; } .dark .use-case-card:hover { border-color: #4ade80 !important; background-color: rgba(10, 55, 0, 0.3) !important; box-shadow: 0 8px 16px rgba(74, 222, 128, 0.2) !important; transform: translateY(-4px); } .dark .use-case-card:focus-visible { border-color: #4ade80 !important; background-color: rgba(10, 55, 0, 0.3) !important; box-shadow: 0 8px 16px rgba(74, 222, 128, 0.2) !important; transform: translateY(-4px); outline: none; } /* Read guide link hover */ .use-case-card-link { transition: all 0.2s ease; } .use-case-card-link:hover { transform: translateX(4px); } .use-case-card-link:focus-visible { transform: translateX(4px); outline: none; } .use-case-card-link:hover { background-color: #077a4f !important; box-shadow: 0 4px 8px rgba(6, 107, 67, 0.3); } .use-case-card-link:focus-visible { background-color: #077a4f !important; box-shadow: 0 4px 8px rgba(6, 107, 67, 0.3); outline: none; } .dark .use-case-card-link:hover { background-color: rgba(215, 254, 200, 0.1) !important; border-color: rgba(74, 222, 128, 0.3) !important; } .dark .use-case-card-link:focus-visible { background-color: rgba(215, 254, 200, 0.1) !important; border-color: rgba(74, 222, 128, 0.3) !important; outline: none; } /* Icon container styling */ .use-case-icon-container { background-color: rgba(6, 107, 67, 0.08) !important; position: relative; overflow: hidden; } .use-case-icon-container::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(6, 107, 67, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 107, 67, 0.08) 1px, transparent 1px); background-size: 8px 8px; mask-image: linear-gradient(170deg, black 0%, transparent 80%); -webkit-mask-image: linear-gradient(170deg, black 0%, transparent 80%); pointer-events: none; } .dark .use-case-icon-container { background-color: rgba(74, 222, 128, 0.15) !important; } .dark .use-case-icon-container::before { background-image: linear-gradient(rgba(74, 222, 128, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 222, 128, 0.05) 1px, transparent 1px); } .use-case-card:hover .use-case-icon-container { background-color: rgba(6, 107, 67, 0.12) !important; } .use-case-card:focus-within .use-case-icon-container { background-color: rgba(6, 107, 67, 0.12) !important; outline: none; } .dark .use-case-card:hover .use-case-icon-container { background-color: rgba(74, 222, 128, 0.2) !important; } .dark .use-case-card:focus-within .use-case-icon-container { background-color: rgba(74, 222, 128, 0.2) !important; outline: none; } /* SVG icon styling */ .use-case-icon-container svg, .use-case-icon-container img { width: 40px; height: 40px; flex-shrink: 0; } .use-case-svg-icon svg { width: 100%; height: 100%; stroke: currentColor; color: var(--accentPrimary); } .use-case-svg-icon svg path { stroke: currentColor; fill: none; } .use-case-svg-icon svg path[fill] { fill: currentColor; } /* Read guide link base styles */ .use-case-card-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 6px; text-decoration: none; font-size: 0.875rem; font-weight: 500; margin-top: auto; align-self: flex-start; background-color: #066b43; color: #ffffff; border: none; box-shadow: 0 2px 4px rgba(6, 107, 67, 0.2); } .dark .use-case-card-link { background-color: transparent; color: #d7fec8; border: 1px solid rgba(74, 222, 128, 0.3); box-shadow: none; } /* Dot pagination styling */ .use-case-dot { transition: all 0.3s; background: rgba(6, 107, 67, 0.3) !important; } .use-case-dot:hover { background: rgba(6, 107, 67, 0.5) !important; } .use-case-dot:focus-visible { background: rgba(6, 107, 67, 0.5) !important; outline: none; } .use-case-dot.active { background: #066b43 !important; } .dark .use-case-dot { background: rgba(74, 222, 128, 0.3) !important; } .dark .use-case-dot:hover { background: rgba(74, 222, 128, 0.5) !important; } .dark .use-case-dot:focus-visible { background: rgba(74, 222, 128, 0.5) !important; outline: none; } .dark .use-case-dot.active { background: #4ade80 !important; } /* Brevo Suite grid styling */ :root { --brevo-suite-border: rgba(6, 107, 67, 0.2); --brevo-suite-hover-bg: rgba(6, 107, 67, 0.05); --brevo-suite-hover-shadow: rgba(6, 107, 67, 0.15); --brevo-suite-tag-bg: rgba(6, 107, 67, 0.1); --brevo-suite-tag-border: rgba(6, 107, 67, 0.2); --foreground: #1b1b1b; --text-secondary: #666; } .dark { --brevo-suite-border: rgba(74, 222, 128, 0.3); --brevo-suite-hover-bg: rgba(10, 55, 0, 0.3); --brevo-suite-hover-shadow: rgba(74, 222, 128, 0.2); --brevo-suite-tag-bg: rgba(74, 222, 128, 0.1); --brevo-suite-tag-border: rgba(74, 222, 128, 0.3); --foreground: #ffffff; --text-secondary: #b8beb8; } .brevo-suite-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } @media (max-width: 768px) { .brevo-suite-grid { grid-template-columns: 1fr; } } .brevo-suite-card { position: relative; border-color: var(--brevo-suite-border); background-color: var(--background); } .brevo-suite-card:hover { border-color: var(--accentPrimary) !important; background-color: var(--brevo-suite-hover-bg) !important; transform: translateY(-2px); box-shadow: 0 4px 12px var(--brevo-suite-hover-shadow) !important; } .brevo-suite-card:focus-visible { border-color: var(--accentPrimary) !important; background-color: var(--brevo-suite-hover-bg) !important; transform: translateY(-2px); box-shadow: 0 4px 12px var(--brevo-suite-hover-shadow) !important; outline: none; } .brevo-suite-card:hover .brevo-suite-link { gap: 0.75rem; } .brevo-suite-card:focus-within .brevo-suite-link { gap: 0.75rem; outline: none; } .brevo-suite-title { color: var(--foreground) !important; } .brevo-suite-subtitle, .brevo-suite-description { color: var(--text-secondary) !important; } .brevo-suite-tag { background-color: var(--brevo-suite-tag-bg) !important; border-color: var(--brevo-suite-tag-border) !important; color: var(--accentPrimary) !important; } .brevo-suite-button { background-color: #066b43 !important; color: #ffffff !important; border-radius: 12px !important; } .dark .brevo-suite-button { background-color: #4ade80 !important; color: #000000 !important; } .brevo-suite-button:hover { opacity: 0.9 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; } .brevo-suite-button:focus-visible { opacity: 0.9 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; outline: none; } /* Hide navigation buttons on mobile */ @media (max-width: 768px) { .use-case-nav-button { display: none !important; } .use-case-carousel { margin-left: 0; margin-right: 0; } .use-case-scroll-container > div > a { width: calc(100vw - 2rem) !important; min-width: 280px !important; } } /* Hide table of contents ONLY for getting started page - must have the specific class. Target Fern's stable TOC id (#fern-toc) ONLY. Do NOT use broad `aside`/`aside nav` selectors: Fern's LEFT navigation is also an

that contains a

, so `aside:has(nav)` / `aside nav` would hide the whole left sidebar. */ body.hide-toc-getting-started #fern-toc { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; } /* Make getting started page use full width - DESKTOP ONLY */ @media (min-width: 1024px) { body.hide-toc-getting-started main, body.hide-toc-getting-started [role="main"], body.hide-toc-getting-started .fern-page-content, body.hide-toc-getting-started article, body.hide-toc-getting-started .content-body, body.hide-toc-getting-started .markdown-body { max-width: 100% !important; width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; } /* Fern's own layout wrapper adds a second, redundant layer of horizontal padding on top of the one above (stacking with main's), which is most of what was capping the content width. Strip it here so the content column actually reaches close to the sidebar's edge on one side and the viewport edge on the other. */ body.hide-toc-getting-started .fern-layout-guide { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } /* Remove container constraints */ body.hide-toc-getting-started .container, body.hide-toc-getting-started [class*="container"], body.hide-toc-getting-started [class*="Container"] { max-width: 100% !important; width: 100% !important; } /* Ensure page wrapper uses full width */ body.hide-toc-getting-started [class*="page-wrapper"], body.hide-toc-getting-started [class*="PageWrapper"] { max-width: 100% !important; width: 100% !important; } /* Make carousel use full width on getting started page */ body.hide-toc-getting-started .use-case-carousel { margin-left: -1rem !important; margin-right: -1rem !important; width: calc(100% + 2rem) !important; padding-left: 1rem !important; padding-right: 1rem !important; } body.hide-toc-getting-started .use-case-scroll-container > div > a { width: calc((100vw - 6rem) / 3 * 0.75) !important; } } @media (max-width: 1024px) { body.hide-toc-getting-started .use-case-scroll-container > div > a { width: calc((100vw - 6rem) / 2 * 0.75) !important; } } @media (max-width: 768px) { body.hide-toc-getting-started .use-case-carousel { margin-left: -1rem !important; margin-right: -1rem !important; width: calc(100% + 2rem) !important; padding-left: 1rem !important; padding-right: 1rem !important; } body.hide-toc-getting-started .use-case-scroll-container > div > a { width: calc(100vw - 2rem) !important; } } /* Give the image column more room on horizontal (imagePosition="left") cards. Fern's default flex layout splits the image and text columns ~50/50 regardless of the imageWidth prop (that prop only scales the itself, not its column), so the column split has to be fixed here instead. Currently only used by the Apps overview page's "Extension types" cards. */ .fern-card > .flex-row > div:first-child { flex: 0 0 60% !important; } .fern-card > .flex-row > div:last-child { flex: 1 1 auto !important; min-width: 0 !important; } /* "New" badge on the Apps tab in the top nav bar. Targets the href, which is stable across the mobile-compact and desktop variants of the tab link. */ a[role="tab"][href="/docs/apps"] { position: relative; } a[role="tab"][href="/docs/apps"]::before { content: "New" !important; display: inline-block !important; position: static !important; margin-left: 6px; padding: 1px 6px; font-size: 0.625rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; color: #ffffff; background-color: #0b996e; border-radius: 999px; vertical-align: middle; text-transform: uppercase; order: 2; } /* "Soon" badges on the Brevo Functions and Iframe modals items in the left sidebar nav. Scoped to #fern-sidebar so the same hrefs used by other in-page links (e.g. overview cards) aren't affected. */ #fern-sidebar a[href="/docs/apps-brevo-functions"]::after, #fern-sidebar a[href="/docs/apps-iframe-modals"]::after { content: "Soon" !important; display: inline-block !important; margin-left: 6px; padding: 1px 6px; font-size: 0.625rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; color: #3b82f6; background-color: rgba(59, 130, 246, 0.12); border-radius: 999px; vertical-align: middle; text-transform: uppercase; }