/* ============================================================ GDLink docs branding — align Furo theme with the marketing palette at gdlink.solventech.ca. Marketing site reference: dark: bg #09090b, surface #18181b, border #27272a, text #f4f4f5, muted #a1a1aa, brand #3b82f6, Outfit headings, Inter body. light: bg #ffffff, surface #f4f4f5, border #e4e4e7, text #09090b, muted #52525b, brand #2563eb. The brick-illustration rules below the branding block were pre-existing and remain untouched. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Inter:wght@400;500;700&display=swap"); /* ----- Typography stacks (apply in every mode) ----- */ :root { --font-stack: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-stack--headings: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-stack--monospace: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* ----- Default = DARK (matches marketing site's default theme). Light is opt-in via the Furo toggle (data-theme="light"). IMPORTANT: these variables MUST be scoped to `body`, NOT `:root`. Furo ships `html { background: var(--color-background-primary) }` and defines every color variable on `body` (never on the html element). On `` that var is therefore normally undefined -> the declaration is invalid -> html stays transparent -> the body's background paints the whole canvas. If we define the palette on `:root` (which IS the html element), Furo's rule resolves to our dark #09090b and paints the ROOT element black. The body content (light) covers most of it, but any area the body background doesn't fill — below short articles, around a tall table — shows the dark root bleeding through. And `body[data-theme= "light"]` can't fix it because html is body's ANCESTOR, so the override never reaches the html element. Scoping to `body` keeps html's var undefined and lets the correct themed body background propagate. ----- */ body { --color-background-primary: #09090b; --color-background-secondary: #18181b; --color-background-border: #27272a; --color-background-hover: #27272a; --color-background-hover--transparent: rgba(39, 39, 42, 0); --color-background-item: #27272a; --color-foreground-primary: #f4f4f5; --color-foreground-secondary: #d4d4d8; --color-foreground-muted: #a1a1aa; --color-foreground-border: #3f3f46; --color-sidebar-background: #18181b; --color-sidebar-background-border: #27272a; --color-sidebar-link-text: #d4d4d8; --color-sidebar-link-text--top-level: #f4f4f5; --color-sidebar-item-background--current: rgba(59, 130, 246, 0.14); --color-sidebar-item-background--hover: rgba(59, 130, 246, 0.08); --color-sidebar-search-background: #09090b; --color-sidebar-search-background--focus: #18181b; --color-sidebar-search-border: #27272a; --color-brand-primary: #3b82f6; --color-brand-content: #60a5fa; --color-brand-visited: #93c5fd; --color-link: #60a5fa; --color-link--hover: #93c5fd; --color-link--visited: #93c5fd; --color-link-underline: transparent; --color-link-underline--hover: #93c5fd; --color-card-background: #18181b; --color-card-border: #27272a; --color-card-marginals-background: #27272a; --color-inline-code-background: rgba(255, 255, 255, 0.07); --color-highlighted-background: rgba(59, 130, 246, 0.18); --color-highlighted-text: #f4f4f5; --color-highlight-on-target: rgba(59, 130, 246, 0.14); /* was Furo's #ffc */ --color-admonition-background: #18181b; --color-announcement-background: #18181b; --color-announcement-text: #f4f4f5; --color-table-header: rgba(255, 255, 255, 0.05); --color-table-header-background: rgba(255, 255, 255, 0.05); --color-table-border: #27272a; --color-toc-background: transparent; --color-toc-title-text: #71717a; --color-toc-item-text: #a1a1aa; --color-toc-item-text--hover: #f4f4f5; --color-toc-item-text--active: #60a5fa; --color-header-background: #09090b; --color-header-border: #27272a; --color-header-text: #f4f4f5; --color-content-background: transparent; --color-content-foreground: #f4f4f5; } /* ----- Light mode — opt-in via Furo's data-theme="light" toggle ----- */ body[data-theme="light"] { --color-background-primary: #ffffff; --color-background-secondary: #f4f4f5; --color-background-border: #e4e4e7; --color-background-hover: #f4f4f5; --color-background-hover--transparent: rgba(244, 244, 245, 0); --color-background-item: #e4e4e7; --color-foreground-primary: #09090b; --color-foreground-secondary: #18181b; --color-foreground-muted: #52525b; --color-foreground-border: #d4d4d8; --color-sidebar-background: #f4f4f5; --color-sidebar-background-border: #e4e4e7; --color-sidebar-link-text: #18181b; --color-sidebar-link-text--top-level: #09090b; --color-sidebar-item-background--current: rgba(37, 99, 235, 0.10); --color-sidebar-item-background--hover: rgba(37, 99, 235, 0.06); --color-sidebar-search-background: #ffffff; --color-sidebar-search-background--focus: #ffffff; --color-sidebar-search-border: #e4e4e7; --color-brand-primary: #2563eb; --color-brand-content: #1d4ed8; --color-brand-visited: #1d4ed8; --color-link: #2563eb; --color-link--hover: #1d4ed8; --color-link--visited: #1d4ed8; --color-link-underline: transparent; --color-link-underline--hover: #1d4ed8; --color-card-background: #ffffff; --color-card-border: #e4e4e7; --color-card-marginals-background: #f4f4f5; --color-inline-code-background: #f4f4f5; --color-highlighted-background: rgba(37, 99, 235, 0.15); --color-highlighted-text: #09090b; --color-highlight-on-target: rgba(37, 99, 235, 0.10); --color-admonition-background: #f4f4f5; --color-announcement-background: #f4f4f5; --color-announcement-text: #09090b; --color-table-header: #f4f4f5; --color-table-header-background: #f4f4f5; --color-table-border: #e4e4e7; --color-toc-background: transparent; --color-toc-title-text: #71717a; --color-toc-item-text: #52525b; --color-toc-item-text--hover: #09090b; --color-toc-item-text--active: #2563eb; --color-header-background: #ffffff; --color-header-border: #e4e4e7; --color-header-text: #09090b; --color-content-background: transparent; --color-content-foreground: #09090b; } /* ----- Heading typography polish (Outfit, tighter letter-spacing) ----- */ body { font-family: var(--font-stack); } h1, h2, h3, h4, h5, h6, .sidebar-brand-text, .sd-card-title { font-family: var(--font-stack--headings); letter-spacing: -0.5px; /* Furo styles h3/h4 with --color-foreground-secondary; that's too low contrast for the marketing palette. Pin all headings to primary. */ color: var(--color-foreground-primary); } h1 { font-weight: 800; letter-spacing: -1px; } h2 { font-weight: 700; } h3 { font-weight: 600; } .sidebar-brand-text { font-weight: 800; letter-spacing: -0.5px; } /* ----- Card rounding + softer hover to match marketing 14-18px cards ----- */ .sd-card { border-radius: 14px !important; border: 1px solid var(--color-card-border) !important; background: var(--color-card-background) !important; transition: border-color 0.2s ease, transform 0.15s ease; } .sd-card:hover { border-color: var(--color-brand-primary) !important; transform: translateY(-1px); } /* ----- Code blocks: subtler border + matching radius ----- */ pre { border-radius: 10px; border: 1px solid var(--color-background-border); } code.literal { border-radius: 4px; } /* ----- Admonitions: rounder + branded left bar ----- */ .admonition { border-radius: 10px; } /* ----- Buttons / primary CTAs adopt marketing brand color ----- */ .bd-content a.btn, .bd-content button.btn, .btn-primary { background: var(--color-brand-primary); color: #ffffff; border-radius: 999px; font-weight: 700; } /* ----- Search input pill (matches marketing pill style) ----- */ .sidebar-search { border-radius: 10px; border: 1px solid var(--color-sidebar-search-border); background: var(--color-sidebar-search-background); } /* ----- Existing brick-illustration rules (preserved) ----- */ .sidebar-logo { border-radius: 12px; } :root { --gdlink-listener: #4caf50; --gdlink-gate: #f4c347; --gdlink-executor: #f0625f; } .bd-main .bd-content .bd-article-container { max-width: 920px; } table.docutils th { white-space: nowrap; } .illustration-container { display: flex; margin: 1.5rem 0; } .illustration-box { min-width: 320px; } .box-header { color: var(--color-foreground-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 0.75rem; text-transform: uppercase; } .real-node { background: #111318; border: 1px solid #2a2d34; border-radius: 8px; color: #e5e5e7; font-family: Inter, sans-serif; overflow: hidden; position: relative; width: min(100%, 420px); } .real-node::after { background: #3b82f6; bottom: 0; content: ""; left: 0; opacity: 0.55; position: absolute; top: 0; width: 2px; } .real-node.brick-listener::after { background: var(--gdlink-listener); } .real-node.brick-gate::after { background: var(--gdlink-gate); } .real-node.brick-executor::after { background: var(--gdlink-executor); } .real-header, .real-row, .real-inline-row, .real-title, .real-controls { align-items: center; display: flex; } .real-header { background: #161921; border-bottom: 1px solid #1f232c; padding: 8px 12px; } .real-title { color: #f4f4f5; flex: 1; font-size: 14px; font-weight: 600; gap: 8px; } .brick-icon-fallback { background: #2f6df6; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); display: inline-block; height: 16px; width: 16px; } .real-controls { gap: 4px; } .real-checkbox { background: #2563eb; border: 1px solid #1d4ed8; border-radius: 2px; height: 14px; position: relative; width: 14px; } .real-checkbox::after { color: white; content: "v"; font-size: 10px; left: 3px; position: absolute; top: -1px; } .real-btn, .real-val-btn, .real-inline-btn, .real-input-dropdown-btn { border: 1px solid #2d3140; border-radius: 3px; } .real-btn { background: #1f2330; color: #9ca3af; font-size: 12px; height: 20px; text-align: center; width: 20px; } .real-inner-panel { background: #0f1117; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; } .real-row, .real-inline-row { gap: 8px; position: relative; } .real-inline-row { flex-wrap: wrap; } .real-label, .real-inline-label { color: #bcbec1; font-size: 13px; font-weight: 600; } .real-label { text-align: left; width: 68px; } .real-input, .real-input-dropdown, .real-inline-input { border: 1px solid #1f242d; border-radius: 4px; color: #cbd5f5; font-size: 12px; } .real-input { background: #161a23; display: flex; flex: 1; padding: 6px 8px; } .real-input-dropdown { background: #1f2430; color: #f8fafc; display: inline-flex; gap: 12px; justify-content: space-between; min-width: 80px; padding: 4px 10px; } .real-inline-input { background: rgba(9, 10, 14, 0.7); border-width: 0 0 1px; color: #f0f0f2; font-size: 13px; overflow: hidden; padding: 4px 6px; text-overflow: ellipsis; white-space: nowrap; width: 45px; } .real-inline-input.large { width: 140px; } .real-val-btn, .real-inline-btn, .real-input-dropdown-btn { background: #262b33; color: #e0e1e6; font-size: 12px; font-weight: 600; padding: 4px 8px; } .real-val-btn { color: #8d939d; font-size: 10px; padding: 2px 6px; } .real-port { background: #61b3ff; border: 1px solid #111419; border-radius: 50%; height: 12px; position: absolute; top: 10px; width: 12px; }