@font-face { font-family: 'Booton'; src: url('https://files.buildwithfern.com/glide.docs.buildwithfern.com/d5998053efb7ec4cacdc4e5868f7a1a7648ac65c1716083d11877397269c59dc/fonts/BootonVF.ttf') format('ttf'); font-weight: 300 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Booton'; src: url('https://files.buildwithfern.com/glide.docs.buildwithfern.com/d5998053efb7ec4cacdc4e5868f7a1a7648ac65c1716083d11877397269c59dc/fonts/BootonVF.ttf') format('ttf'); font-weight: 300 800; 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: 20px; --font-body: 'Booton', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-heading: 'Booton', 'Booton', 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: #f9fefe; --accent-2: #f1fbfb; --accent-3: #daf8f9; --accent-4: #c4f3f5; --accent-5: #adebee; --accent-6: #93e0e3; --accent-7: #6fd1d5; --accent-8: #0bbdc3; --accent-9: #0cbdc3; --accent-10: #00b1b7; --accent-11: #008086; --accent-12: #003e41; --accent-a1: #00d5d506; --accent-a2: #00b7b70e; --accent-a3: #00cfd625; --accent-a4: #01ccd43b; --accent-a5: #00c1cb52; --accent-a6: #00b6bd6c; --accent-a7: #00aeb590; --accent-a8: #00bac0f4; --accent-a9: #00bac0f3; --accent-a10: #00b1b7; --accent-a11: #008086; --accent-a12: #003e41; --accent-contrast: #fff; --accent-surface: #eefafacc; --accent-indicator: #0cbdc3; --accent-track: #0cbdc3; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .light, :root { --accent-1: oklch(99.3% 0.0045 198.9); --accent-2: oklch(98.1% 0.0105 198.9); --accent-3: oklch(95.9% 0.0311 198.9); --accent-4: oklch(93.3% 0.0482 198.9); --accent-5: oklch(90% 0.0625 198.9); --accent-6: oklch(85.8% 0.0759 198.9); --accent-7: oklch(80.2% 0.0925 198.9); --accent-8: oklch(72.5% 0.1221 198.9); --accent-9: oklch(72.6% 0.1221 198.9); --accent-10: oklch(68.9% 0.1221 198.9); --accent-11: oklch(53.7% 0.1221 198.9); --accent-12: oklch(33% 0.0592 198.9); --accent-a1: color(display-p3 0.0196 0.8039 0.8039 / 0.02); --accent-a2: color(display-p3 0.0235 0.6745 0.6745 / 0.048); --accent-a3: color(display-p3 0.0039 0.7451 0.7765 / 0.122); --accent-a4: color(display-p3 0.0078 0.7451 0.7843 / 0.197); --accent-a5: color(display-p3 0.0039 0.6824 0.7412 / 0.271); --accent-a6: color(display-p3 0.0039 0.6392 0.6824 / 0.357); --accent-a7: color(display-p3 0.0039 0.6 0.6353 / 0.471); --accent-a8: color(display-p3 0 0.5922 0.6353 / 0.663); --accent-a9: color(display-p3 0 0.5922 0.6353 / 0.663); --accent-a10: color(display-p3 0 0.5412 0.5804 / 0.691); --accent-a11: color(display-p3 0 0.3569 0.3882 / 0.785); --accent-a12: color(display-p3 0 0.1647 0.1765 / 0.91); --accent-contrast: #fff; --accent-surface: color(display-p3 0.9412 0.9804 0.9804 / 0.8); --accent-indicator: oklch(72.6% 0.1221 198.9); --accent-track: oklch(72.6% 0.1221 198.9); } } } .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: #162121; --accent-2: #182626; --accent-3: #103637; --accent-4: #004245; --accent-5: #004e51; --accent-6: #045c5f; --accent-7: #0c6d71; --accent-8: #008488; --accent-9: #0cbdc3; --accent-10: #00b1b7; --accent-11: #38d1d7; --accent-12: #adeef1; --accent-a1: #00de0004; --accent-a2: #00ea000a; --accent-a3: #00f9a11c; --accent-a4: #00fed229; --accent-a5: #00fcdf37; --accent-a6: #00fde947; --accent-a7: #00fef45a; --accent-a8: #00fff974; --accent-a9: #07fbfeb8; --accent-a10: #00fcffa9; --accent-a11: #3ff9fed0; --accent-a12: #b6fcfeef; --accent-contrast: #fff; --accent-surface: #182e2380; --accent-indicator: #0cbdc3; --accent-track: #0cbdc3; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --accent-1: oklch(23.6% 0.0156 198.9); --accent-2: oklch(25.5% 0.0181 198.9); --accent-3: oklch(30.7% 0.0421 198.9); --accent-4: oklch(34.4% 0.0604 198.9); --accent-5: oklch(38.4% 0.0672 198.9); --accent-6: oklch(43.1% 0.0719 198.9); --accent-7: oklch(48.7% 0.0802 198.9); --accent-8: oklch(55.6% 0.0947 198.9); --accent-9: oklch(72.6% 0.1221 198.9); --accent-10: oklch(68.9% 0.1221 198.9); --accent-11: oklch(78.7% 0.1221 198.9); --accent-12: oklch(90.7% 0.0651 198.9); --accent-a1: color(display-p3 0 0.9608 0 / 0.014); --accent-a2: color(display-p3 0.2118 0.9922 0 / 0.036); --accent-a3: color(display-p3 0.1412 0.9961 0.6941 / 0.103); --accent-a4: color(display-p3 0.0784 1 0.8392 / 0.156); --accent-a5: color(display-p3 0.1961 1 0.8941 / 0.209); --accent-a6: color(display-p3 0.2902 1 0.9255 / 0.272); --accent-a7: color(display-p3 0.3686 1 0.9725 / 0.343); --accent-a8: color(display-p3 0.3765 1 0.9882 / 0.445); --accent-a9: color(display-p3 0.4314 0.9765 1 / 0.711); --accent-a10: color(display-p3 0.4196 0.9804 1 / 0.655); --accent-a11: color(display-p3 0.498 0.9765 1 / 0.804); --accent-a12: color(display-p3 0.7804 0.9882 1 / 0.93); --accent-contrast: #fff; --accent-surface: color(display-p3 0.1098 0.1725 0.1373 / 0.5); --accent-indicator: oklch(72.6% 0.1221 198.9); --accent-track: oklch(72.6% 0.1221 198.9); } } } .dark { --grayscale-1: #121113; --grayscale-2: #1a191b; --grayscale-3: #232225; --grayscale-4: #2b292d; --grayscale-5: #323035; --grayscale-6: #3c393f; --grayscale-7: #49474e; --grayscale-8: #625f69; --grayscale-9: #6f6d78; --grayscale-10: #7c7a85; --grayscale-11: #b5b2bc; --grayscale-12: #eeeef0; --grayscale-a1: #00000000; --grayscale-a2: #f5f4f609; --grayscale-a3: #ebeaf814; --grayscale-a4: #eee5f81d; --grayscale-a5: #efe6fe25; --grayscale-a6: #f1e6fd30; --grayscale-a7: #eee9ff40; --grayscale-a8: #eee7ff5d; --grayscale-a9: #eae6fd6e; --grayscale-a10: #ece9fd7c; --grayscale-a11: #f5f1ffb7; --grayscale-a12: #fdfdffef; --grayscale-contrast: #fff; --grayscale-surface: rgba(0, 0, 0, 0.05); --grayscale-indicator: #6f6d78; --grayscale-track: #6f6d78; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --grayscale-1: color(display-p3 0.07 0.067 0.074); --grayscale-2: color(display-p3 0.101 0.098 0.105); --grayscale-3: color(display-p3 0.138 0.134 0.144); --grayscale-4: color(display-p3 0.167 0.161 0.175); --grayscale-5: color(display-p3 0.196 0.189 0.206); --grayscale-6: color(display-p3 0.232 0.225 0.245); --grayscale-7: color(display-p3 0.286 0.277 0.302); --grayscale-8: color(display-p3 0.383 0.373 0.408); --grayscale-9: color(display-p3 0.434 0.428 0.467); --grayscale-10: color(display-p3 0.487 0.48 0.519); --grayscale-11: color(display-p3 0.707 0.7 0.735); --grayscale-12: color(display-p3 0.933 0.933 0.94); --grayscale-a1: #00000000; --grayscale-a2: #f5f4f609; --grayscale-a3: #ebeaf814; --grayscale-a4: #eee5f81d; --grayscale-a5: #efe6fe25; --grayscale-a6: #f1e6fd30; --grayscale-a7: #eee9ff40; --grayscale-a8: #eee7ff5d; --grayscale-a9: #eae6fd6e; --grayscale-a10: #ece9fd7c; --grayscale-a11: #f5f1ffb7; --grayscale-a12: #fdfdffef; --grayscale-contrast: #fff; --grayscale-surface: color(display-p3 0 0 0 / 5%); --grayscale-indicator: color(display-p3 0.434 0.428 0.467); --grayscale-track: color(display-p3 0.434 0.428 0.467); } } } .light, :root { color-scheme: light; --accent: rgba(12, 189, 195, 1); --background: rgba(255, 255, 255, 1); --border: rgba(229, 231, 235, 1); --sidebar-background: initial; --header-background: rgba(255, 255, 255, 1); --card-background: initial; --theme-color: #fff; } .dark { color-scheme: dark; --accent: rgba(12, 189, 195, 1); --background: rgba(25, 30, 42, 1); --border: rgba(39, 43, 55, 1); --sidebar-background: initial; --header-background: rgba(25, 30, 42, 1); --card-background: initial; --theme-color: #191e2a; } /* * Restyle Fern's built-in navbar `navbar-links` buttons to match * `GlideButton` (vendored from `glideapps-marketing-module`). * * Rationale: Fern's `navbar-links` config in `docs.yml` is rendered by * Fern's own header component, not by user-supplied React. Replacing the * whole header (`header:` in docs.yml) would force us to re-implement the * logo, search, theme toggle, and sidebar collapse. Instead we override * Fern's stable button classnames with the GlideButton palette. * * Selectors are scoped to `.fern-header-navbar-links` so we don't bleed * into other Fern button surfaces (page actions, API playground, etc.). * * Hex values are pulled from `docs-contentful/src/app/styles/globals.css`, * matched against the BRAND const in `fern/components/GlideButton.tsx`. * Update both at the same time when the brand palette changes. */ /* All navbar buttons: shape + typography */ .fern-header-navbar-links .fern-button { height: 40px; padding: 0 20px; border-radius: 6px; font-size: 14px; font-weight: 575; letter-spacing: -0.01em; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } /* * Filled primary: solid aqua background, black text. * * Uses aqua-light-500 rather than the marketing module's aqua-light-400: * the pastel 400 sits at ~1.2:1 contrast against the light page/header * backgrounds (#edede8 on GlideOS, #ffffff on Classic) and disappears. * 500 is the same aqua the site already uses as accent-primary. Hover * follows the brand's 500 → 700 pairing, switching to white text since * black fails contrast on the 700 teal. */ .fern-header-navbar-links .fern-button.filled.primary { background: #0cbdc3; /* aqua-light-500 */ color: #000205; /* black */ border: none; } .fern-header-navbar-links .fern-button.filled.primary:hover { background: #066266; /* aqua-light-700 */ color: #ffffff; } .fern-header-navbar-links .fern-button.filled.primary:focus-visible { background: #066266; /* aqua-light-700 */ color: #ffffff; outline: none; } /* * Homepage link: solid neutral fill (GlideButton's primary-neutral variant). * Fern's `minimal` type renders as bare text, which doesn't read as a * button next to the filled primary — give it a solid neutral fill so it * presents as the secondary action without competing with the aqua CTA. */ .fern-header-navbar-links .fern-button.minimal { background: #1a1d24; /* neutrals-opaque-900 */ color: #ffffff; padding: 0 20px; border: none; } .fern-header-navbar-links .fern-button.minimal:hover { background: #262931; /* neutrals-opaque-800 */ color: #ffffff; } .fern-header-navbar-links .fern-button.minimal:focus-visible { background: #262931; /* neutrals-opaque-800 */ color: #ffffff; outline: none; } /* * Dark mode. Fern toggles themes by setting `.dark` on (same hook * product-theme.css and callouts.css use). It does NOT set `data-theme`, * and an OS-level `prefers-color-scheme` media query fires independently * of the site toggle — with the Mac in dark mode and the site in light * mode it painted the minimal link white on the light header (invisible). */ html.dark .fern-header-navbar-links .fern-button.filled.primary { background: #96fbff; /* aqua-dark-500 */ color: #000205; } html.dark .fern-header-navbar-links .fern-button.filled.primary:hover { background: #cefafc; /* aqua-dark-700 */ color: #000205; /* re-assert black — the light hover rule sets white */ } html.dark .fern-header-navbar-links .fern-button.filled.primary:focus-visible { background: #cefafc; /* aqua-dark-700 */ color: #000205; /* re-assert black — the light hover rule sets white */; outline: none; } html.dark .fern-header-navbar-links .fern-button.minimal { background: #f7f7f8; /* neutrals-opaque-50 */ color: #1a1d24; /* neutrals-opaque-900 */ } html.dark .fern-header-navbar-links .fern-button.minimal:hover { background: #dededf; /* neutrals-opaque-200 */ color: #1a1d24; } html.dark .fern-header-navbar-links .fern-button.minimal:focus-visible { background: #dededf; /* neutrals-opaque-200 */ color: #1a1d24; outline: none; } /* * Numbered-list "chip" markers for ordered lists in the docs body. * * Mirrors the style used by the previous Contentful-driven docs site * (docs-contentful/src/components/Page/content/RichTextBlock/styles.module.css): * each list item's number renders as a 28x28 rounded-square chip with a light * neutral background and a subtle border, instead of the default browser * decimal marker. * * Scope: only top-level ordered lists inside Fern's article body. Nested * ordered lists (an OL inside an LI) keep Fern's built-in lower-roman markers * — chip nesting reads worse than letters at depth. * * Color tokens come from Fern's theme variables so the chip adapts to dark * mode automatically. */ article ol.list-decimal:not(li ol) { counter-reset: item; list-style: none; padding-left: 0; } article ol.list-decimal:not(li ol) > li { /* * Position the chip absolutely instead of using `display: flex` on the LI. * * Why: Fern's MDX renderer emits list items with inline content as direct * children of

(text nodes, , links, etc.) — there's no
* wrapper. With `display: flex` each of those inline children becomes its * own flex column, breaking long sentences apart at every . * Absolute positioning the ::before keeps the LI as a normal block so * inline content flows the way Markdown expects. */ position: relative; padding-left: 2.625rem; /* 28px chip + 14px gap */ margin: 0.5rem 0; min-height: 28px; } article ol.list-decimal:not(li ol) > li::before { content: counter(item); counter-increment: item; position: absolute; left: 0; /* Sit the chip aligned with the first line of text rather than the LI's box top — this matters when an item contains a heading-sized first line or a multi-line paragraph. */ top: 0.125em; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--grayscale-a4); background: var(--grayscale-3); color: var(--grayscale-12); font-weight: 500; font-size: 14px; line-height: 1; } .fern-breadcrumb > .fern-breadcrumb-item:first-of-type { pointer-events: none; color: inherit; text-decoration: none; cursor: default; } /* * Landing page spot-icon card grid. * * Scoped under `.landing-spot-grid` so it does not affect the default Fern * `` chrome used throughout the rest of the docs. Color tokens * mirror the Figma annotations on the landing-page mock: * - card surface -> colors/neutral/warm/Warm100 * - card title -> colors/neutral/Neutral950 * - card subtitle -> Text/text-tertiary */ .landing-spot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 32px 0 0; } @media (max-width: 720px) { .landing-spot-grid { grid-template-columns: 1fr; } } /* * Selectors below are scoped under `.landing-spot-grid` to (a) keep them * from touching unrelated cards across the docs and (b) bump specificity * past Fern's MDX defaults — Fern adds `fern-mdx-link` to anchors and a * Tailwind `mx-auto` class onto images, both of which would otherwise * fight the spec (mx-auto in particular horizontally centers the icon). */ .landing-spot-grid .landing-spot-card { display: flex; flex-direction: column; align-items: flex-start; /* defeat any inherited stretch/center */ gap: 34px; /* icon -> copy block */ padding: 34px 24px 24px 24px; /* extra top so the icon has breathing room */ border-radius: 18px; background: #efece4; /* warm-100 (light) */ text-decoration: none; transition: transform 160ms ease, background-color 160ms ease; } .landing-spot-grid .landing-spot-card:hover { background: #e8e4d9; /* warm-200 (light) */ transform: translateY(-2px); } .landing-spot-grid .landing-spot-card:focus-visible { background: #e8e4d9; /* warm-200 (light) */ transform: translateY(-2px); outline: none; } /* * Fern's `.fern-mdx-link` adds a small external-link SVG arrow to anchors * with `target="_blank"`. On the landing cards that arrow appears as a * sibling of the icon and copy block, so the flex `gap` also produces * unwanted dead-space below the subtitle. Hide it on the spot cards — * the affordance of "this card opens an external site" is already implied * by the destination. */ .landing-spot-grid .landing-spot-card svg.external-link-icon { display: none; } .landing-spot-grid .landing-spot-card__icon { /* * The icon is a Next.js wrapper that Fern emits with intrinsic * width/height="325" attrs and a Tailwind `mx-auto` class. We need to * force the display size to 84x84 and beat `margin-inline: auto` so the * icon left-aligns in the flex column instead of centering. `!important` * is used as a guardrail — Next.js / Fern occasionally adjust their * preset CSS, and silent regressions on the landing page are not worth * the risk. */ width: 84px !important; height: 84px !important; max-width: 84px !important; display: block; object-fit: contain; margin: 0 !important; margin-inline: 0 !important; } .landing-spot-grid .landing-spot-card__copy { display: flex; flex-direction: column; gap: 4px; /* title -> subtitle */ } /* Both title and subtitle are text-lg (18px / 28px). */ .landing-spot-grid .landing-spot-card__title { font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; color: #0a0a0a; /* Neutral950 */ margin: 0; } .landing-spot-grid .landing-spot-card__subtitle { font-size: 18px; line-height: 28px; color: #6b7280; /* text-tertiary */ margin: 0; } /* Dark-mode card surface uses a warm dark to keep the spot art legible. */ :root[data-theme="dark"] .landing-spot-card, .dark .landing-spot-card { background: #1f1c17; } :root[data-theme="dark"] .landing-spot-card:hover, .dark .landing-spot-card:hover { background: #2a2620; } :root[data-theme="dark"] .landing-spot-card:focus-visible, .dark .landing-spot-card:focus-visible { background: #2a2620; outline: none; } :root[data-theme="dark"] .landing-spot-card__title, .dark .landing-spot-card__title { color: #fafafa; } :root[data-theme="dark"] .landing-spot-card__subtitle, .dark .landing-spot-card__subtitle { color: #a1a1aa; } /* * Per-product theming. The global palette in docs.yml is Glide Classic (light + * dark). GlideOS reuses the same light/dark machinery but swaps its palette via * the variables below, scoped to html[data-product="os"] (set by * product-theme.js). Both products support the appearance toggle. */ /* GlideOS — light (header matches the page background) */ html[data-product="os"].light { --background: #edede8; --header-background: #edede8; --border: #dcdcd4; --accent: #71eaee; } /* GlideOS — dark */ html[data-product="os"].dark { --background: #011516; --header-background: #011516; --border: #0d2122; --accent: #71eaee; } /* * The dark-mode text color for the minimal navbar link now lives in * glide-buttons.css alongside its solid-fill styling — a rule here would * out-rank it (ID specificity) and paint light text on the light fill. */ /* GlideOS callout palette. * * Restyles Fern's built-in per intent, scoped to the GlideOS * product only (html[data-product="os"] is set by product-theme.js on * /docs/os/... routes). Classic docs match html[data-product="glide"] * and keep Fern's default callout styling. * * Palette provided by Design (2026-07-10). Each rule sets: * background: intent 100 (light) / 800 (dark) * border: intent 300 (light) / 700 (dark) * color: intent 600/700 (light) / 300/400 (dark) * `check` intent uses a quieter transparent outline treatment. */ /* ---------- Light mode ---------- */ html[data-product="os"] .fern-callout[data-intent="info"] { background-color: #f1f1fd; border-color: #a6a8f9; color: #3b3e9e; } /* blue 100/300/600 */ html[data-product="os"] .fern-callout[data-intent="warning"] { background-color: #fcf4d4; border-color: #f7da62; color: #7b4a00; } /* yellow 100/300/700 */ html[data-product="os"] .fern-callout[data-intent="success"] { background-color: #d7faeb; border-color: #80e1b5; color: #00824c; } /* green 100/300/600 */ html[data-product="os"] .fern-callout[data-intent="error"] { background-color: #ffdee9; border-color: #ff7b96; color: #a9183a; } /* red 100/300/600 */ html[data-product="os"] .fern-callout[data-intent="note"] { background-color: #e4feff; border-color: #a8f2f5; color: #066266; } /* aqua 100/300/700 */ html[data-product="os"] .fern-callout[data-intent="tip"] { background-color: #def7f3; border-color: #62aea0; color: #176355; } /* pine 100/300/500 */ html[data-product="os"] .fern-callout[data-intent="check"] { background-color: transparent; border-color: #80e1b5; color: #00824c; } /* quiet outline */ /* ---------- Dark mode ---------- */ html.dark[data-product="os"] .fern-callout[data-intent="info"] { background-color: #232450; border-color: #34366a; color: #a6a8f9; } /* blue 800/700/300 */ html.dark[data-product="os"] .fern-callout[data-intent="warning"] { background-color: #2f1c00; border-color: #7b4a00; color: #f7da62; } /* yellow 800/700/300 */ html.dark[data-product="os"] .fern-callout[data-intent="success"] { background-color: #002f11; border-color: #00561e; color: #80e1b5; } /* green 800/700/300 */ html.dark[data-product="os"] .fern-callout[data-intent="error"] { background-color: #2f0800; border-color: #6b0017; color: #ff7b96; } /* red 800/700/300 */ html.dark[data-product="os"] .fern-callout[data-intent="note"] { background-color: #034244; border-color: #066266; color: #71eaee; } /* aqua 800/700/400 */ html.dark[data-product="os"] .fern-callout[data-intent="tip"] { background-color: #002921; border-color: #0d372f; color: #62aea0; } /* pine 800/700/300 */ html.dark[data-product="os"] .fern-callout[data-intent="check"] { background-color: transparent; border-color: #00561e; color: #80e1b5; } /* quiet outline */ /* Fern's component: term trigger + rich-content bubble. Fern exposes CSS variables on the trigger but doesn't ship a text-decoration rule, so we declare it explicitly. Bubble is targeted via .fern-mdx-tooltip-content. Reference: https://buildwithfern.com/learn/docs/writing-content/components/tooltips#custom-styling Scoped to GlideOS (html[data-product="os"] set by product-theme.js). */ /* ---------- Term — light ---------- */ html[data-product="os"] .fern-mdx-tooltip-trigger { --tooltip-underline-color: #0cbdc3; --tooltip-underline-hover-color: #0cbdc3; text-decoration: underline dotted var(--tooltip-underline-color); text-decoration-thickness: 2px; text-underline-offset: 3px; border-radius: 3px; cursor: help; transition: background 120ms ease; } html[data-product="os"] .fern-mdx-tooltip-trigger:hover { background: rgba(12, 189, 195, 0.12); } html[data-product="os"] .fern-mdx-tooltip-trigger:focus-visible { background: rgba(12, 189, 195, 0.12); outline: none; } /* ---------- Term — dark ---------- */ html.dark[data-product="os"] .fern-mdx-tooltip-trigger { --tooltip-underline-color: #71eaee; --tooltip-underline-hover-color: #71eaee; } html.dark[data-product="os"] .fern-mdx-tooltip-trigger:hover { background: rgba(150, 251, 255, 0.35); } html.dark[data-product="os"] .fern-mdx-tooltip-trigger:focus-visible { background: rgba(150, 251, 255, 0.35); outline: none; } /* ---------- Bubble — light (inverse dark surface) ---------- */ html[data-product="os"] .fern-mdx-tooltip-content { background: #1c1c19; color: #edede8; border-radius: 8px; padding: 10px 14px; max-width: 260px; font-size: 13px; line-height: 1.5; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); } /* ---------- Bubble — dark (inverse light surface) ---------- */ html.dark[data-product="os"] .fern-mdx-tooltip-content { background: #fbfbf9; color: #1c1c19; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55); } /* Inline icon wrapper for lucide SVGs embedded in docs prose. * * Wrap each icon like: * * * The wrapper sits inline with surrounding text; the SVG scales with font size * and inherits the text color (lucide icons already use stroke="currentColor"). * Adjust size site-wide by changing the width/height on `.doc-icon svg`. * * Scoped to the GlideOS product only (html[data-product="os"] is set by * product-theme.js); .doc-icon markup is used on GlideOS pages. */ html[data-product="os"] .doc-icon { display: inline-flex; align-items: center; vertical-align: -0.15em; line-height: 1; } html[data-product="os"] .doc-icon svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; } /* GlideOS docs — styles. Strong neutral mat, soft shadow on the media, caption inside the mat. Light/dark keyed off Fern's `.dark` class on . Design tokens picked to work against product-theme surfaces: light page bg #EDEDE8 → mat #DCDCD4 dark page bg #011516 → mat #0D2122 */ .osframe { margin: 1.25rem 0; display: flex; flex-direction: column; align-items: center; gap: 14px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 12px; background: #dcdcd4; padding: 28px 24px 20px; } .dark .osframe { border-color: rgba(255, 255, 255, 0.14); background: #0d2122; } .osframe-media { display: inline-block; line-height: 0; max-width: 100%; } .osframe-media img, .osframe-media video { display: block; max-width: 100%; border-radius: 12px; /* match the mat's radius */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.08); } .dark .osframe-media img, .dark .osframe-media video { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1); } /* Theme-swapped media: give an both a `.osframe-light` and a `.osframe-dark` ; only the one matching the active theme shows. Class-qualified so these beat the base `.osframe-media img` display rule. */ .osframe-media img.osframe-dark { display: none; } .dark .osframe-media img.osframe-light { display: none; } .dark .osframe-media img.osframe-dark { display: block; } .osframe-caption { font-size: 12px; line-height: 1.45; text-align: center; color: #3d3d38; } .dark .osframe-caption { color: #c2cece; } /* ---------- Light mode ---------- */ html[data-product="os"] .fern-table { border-collapse: separate; border-spacing: 0; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; } html[data-product="os"] .fern-table th { font-size: 12px; font-weight: 575; text-transform: uppercase; letter-spacing: 0.08em; text-align: left; color: #5e5e5c; background: rgba(0,0,0,0.04); border-bottom: 1px solid rgba(0,0,0,0.1); padding: 10px 16px; } html[data-product="os"] .fern-table th:first-child { border-top-left-radius: 8px; } html[data-product="os"] .fern-table th:last-child { border-top-right-radius: 8px; } html[data-product="os"] .fern-table td { font-size: 14px; line-height: 1.55; color: #2e2e2b; border-bottom: 1px solid rgba(0,0,0,0.06); padding: 12px 16px; } html[data-product="os"] .fern-table tbody tr:last-child td { border-bottom: none; } html[data-product="os"] .fern-table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; } html[data-product="os"] .fern-table tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; } /* Sticky variant — opaque header + hairline shadow so rows slide underneath cleanly */ html[data-product="os"] .fern-table.sticky th { background: #e3e3de; border-bottom: none; box-shadow: 0 1px 0 rgba(0,0,0,0.1); } /* opaque blend over #EDEDE8 */ /* ---------- Dark mode ---------- */ html.dark[data-product="os"] .fern-table { border-color: rgba(255,255,255,0.16); } html.dark[data-product="os"] .fern-table th { color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.05); border-bottom-color: rgba(255,255,255,0.16); } html.dark[data-product="os"] .fern-table td { color: #d9dad3; border-bottom-color: rgba(255,255,255,0.08); } html.dark[data-product="os"] .fern-table.sticky th { background: #0d2122; border-bottom: none; box-shadow: 0 1px 0 rgba(255,255,255,0.16); } /* opaque blend over #011516 */

A powerful update to Projects