/* ========================================================================= Global-e Knowledge Hub — home page ("/introduction", mode: custom) Scoped under .ge-home so nothing here affects standard doc pages. Dark mode follows Mintlify's `.dark` class toggle. ========================================================================= */ .ge-home{ --ge-ink:#211D1A; --ge-ink-soft:#6B6560; --ge-card:#FFFFFF; --ge-line:#ECEAE8; --ge-line-strong:#E0DCD7; --ge-accent:#F15A2B; --ge-accent-press:#C2451F; --ge-tint:#FCF3EE; --ge-tint-2:#FDFBFA; --ge-good:#2E7D57; --ge-new:#B5561F; --ge-shadow:0 1px 2px rgba(33,29,26,.04),0 8px 24px -12px rgba(33,29,26,.14); --ge-shadow-hover:0 2px 4px rgba(33,29,26,.06),0 18px 40px -16px rgba(201,74,42,.28); --ge-radius:14px; --ge-maxw:1120px; color:var(--ge-ink); } .dark .ge-home{ --ge-ink:#F3EDE7; --ge-ink-soft:#A79E96; --ge-card:#221D19; --ge-line:#332B25; --ge-line-strong:#40362E; --ge-accent:#EF6A3D; --ge-accent-press:#F58057; --ge-tint:#2A211B; --ge-tint-2:#241D18; --ge-good:#5FB98C; --ge-new:#E8895A; --ge-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6); --ge-shadow-hover:0 2px 4px rgba(0,0,0,.35),0 20px 46px -16px rgba(239,106,61,.28); } .ge-home *{box-sizing:border-box} .ge-wrap{max-width:var(--ge-maxw);margin:0 auto;padding:0 24px} .ge-home .nowrap{white-space:nowrap} /* ---------- hero ---------- */ .ge-hero{ border-bottom:1px solid var(--ge-line); background: radial-gradient(120% 140% at 88% -20%, var(--ge-tint) 0%, transparent 55%), linear-gradient(180deg, var(--ge-tint-2) 0%, transparent 70%); } .ge-hero-in{max-width:var(--ge-maxw);margin:0 auto;padding:52px 24px 46px} .ge-eyebrow{font-size:12px;font-weight:640;letter-spacing:.09em;text-transform:uppercase;color:var(--ge-accent)} .ge-hero h1{margin:12px 0 0;font-size:clamp(30px,4.6vw,46px);line-height:1.04;letter-spacing:-.028em; font-weight:720;max-width:18ch;text-wrap:balance;color:var(--ge-ink)} .ge-hero p{margin:16px 0 0;font-size:17px;color:var(--ge-ink-soft);max-width:56ch;line-height:1.5} .ge-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap} .ge-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:620;padding:10px 16px; border-radius:10px;cursor:pointer;border:1px solid transparent;text-decoration:none} .ge-btn.primary{background:var(--ge-accent);color:#fff;box-shadow:0 6px 18px -8px var(--ge-accent)} .ge-btn.primary:hover{background:var(--ge-accent-press)} .ge-btn.ghost{background:var(--ge-card);border-color:var(--ge-line-strong);color:var(--ge-ink)} .ge-btn.ghost:hover{border-color:var(--ge-accent);color:var(--ge-accent)} /* ---------- sections ---------- */ .ge-section{padding:46px 0} .ge-section.tight{padding-top:0} .ge-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px} .ge-sechead h2{margin:0;font-size:15px;font-weight:680;letter-spacing:-.01em;color:var(--ge-ink)} .ge-sechead .hint{font-size:13px;color:var(--ge-ink-soft)} .ge-sechead a.more{font-size:13px;font-weight:600;color:var(--ge-accent);text-decoration:none} .ge-sechead a.more:hover{color:var(--ge-accent-press)} /* ---------- category grid ---------- */ .ge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ge-card{position:relative;background:var(--ge-card);border:1px solid var(--ge-line);border-radius:var(--ge-radius); padding:20px;box-shadow:var(--ge-shadow);text-decoration:none; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; display:flex;flex-direction:column;gap:9px} .ge-card:hover{transform:translateY(-3px);box-shadow:var(--ge-shadow-hover);border-color:var(--ge-line-strong)} .ge-ic{width:38px;height:38px;border-radius:10px;background:var(--ge-tint);color:var(--ge-accent); display:grid;place-items:center;margin-bottom:2px} .ge-ic svg{width:20px;height:20px} .ge-card h3{margin:0;font-size:15.5px;font-weight:660;letter-spacing:-.01em;color:var(--ge-ink)} .ge-card p{margin:0;font-size:13.3px;color:var(--ge-ink-soft);line-height:1.45} .ge-cnt{position:absolute;top:18px;right:18px;font-size:11px;color:var(--ge-ink-soft); font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,monospace} .ge-badge{align-self:flex-start;margin-top:2px;font-size:11px;font-weight:660;letter-spacing:.02em; padding:2px 8px;border-radius:999px;background:var(--ge-tint);color:var(--ge-new);text-transform:uppercase} /* ---------- updates strip ---------- */ .ge-updates{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ge-upd{display:flex;gap:14px;align-items:flex-start;background:var(--ge-card);border:1px solid var(--ge-line); border-radius:12px;padding:16px 18px;box-shadow:var(--ge-shadow);text-decoration:none} .ge-upd .dot{margin-top:6px;width:8px;height:8px;border-radius:50%;flex:0 0 auto} .ge-upd .dot.n{background:var(--ge-new)} .ge-upd .dot.u{background:var(--ge-good)} .ge-upd .meta{font-size:11.5px;font-weight:640;letter-spacing:.04em;text-transform:uppercase;color:var(--ge-ink-soft)} .ge-upd h4{margin:3px 0 3px;font-size:14.5px;font-weight:620;letter-spacing:-.01em;color:var(--ge-ink)} .ge-upd p{margin:0;font-size:13px;color:var(--ge-ink-soft);line-height:1.45} .ge-upd .date{margin-left:auto;font-size:11px;color:var(--ge-ink-soft);white-space:nowrap; font-family:ui-monospace,Menlo,monospace} /* ---------- audience lanes ---------- */ .ge-lanes{display:grid;grid-template-columns:1fr 1fr;gap:16px} .ge-lane{border:1px solid var(--ge-line);border-radius:var(--ge-radius);padding:24px;box-shadow:var(--ge-shadow); background:linear-gradient(180deg,var(--ge-tint-2),transparent 60%),var(--ge-card)} .ge-lane .tag{font-size:12px;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--ge-accent)} .ge-lane h3{margin:8px 0 6px;font-size:19px;letter-spacing:-.02em;font-weight:700;color:var(--ge-ink)} .ge-lane p{margin:0 0 16px;font-size:13.6px;color:var(--ge-ink-soft)} .ge-lane ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px} .ge-lane li a{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:520;padding:3px 0; text-decoration:none;color:var(--ge-ink)} .ge-lane li a:hover{color:var(--ge-accent)} .ge-lane li svg{width:15px;height:15px;color:var(--ge-accent);flex:0 0 auto} /* ---------- API reference landing extras ---------- */ .ge-lanes.cols3{grid-template-columns:repeat(3,1fr)} .ge-method{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:700;letter-spacing:.03em; color:var(--ge-accent);background:var(--ge-tint);border-radius:5px;padding:1px 6px;flex:0 0 auto} /* reference hero — cooler, technical tone (vs the home's warm peach) */ .ge-hero.api{ background: radial-gradient(120% 140% at 88% -20%, #EAEFF4 0%, transparent 55%), linear-gradient(180deg, #F4F7FA 0%, transparent 72%); } .dark .ge-hero.api{ background: radial-gradient(120% 140% at 88% -20%, #1B2129 0%, transparent 55%), linear-gradient(180deg, #191E24 0%, transparent 72%); } .ge-hero.api .ge-eyebrow{font-family:ui-monospace,Menlo,monospace;text-transform:none;letter-spacing:0} .ge-codechip{display:inline-flex;align-items:center;gap:9px;margin-top:20px; font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--ge-ink-soft); background:var(--ge-card);border:1px solid var(--ge-line);border-radius:9px;padding:7px 12px; box-shadow:var(--ge-shadow)} .ge-codechip .m{color:var(--ge-accent);font-weight:700} .ge-codechip .u{color:var(--ge-ink)} /* ---------- responsive ---------- */ @media(max-width:820px){.ge-grid{grid-template-columns:1fr 1fr}} @media(max-width:720px){.ge-updates,.ge-lanes,.ge-lanes.cols3{grid-template-columns:1fr}} @media(max-width:540px){.ge-grid{grid-template-columns:1fr}} /* ========================================================================= Card polish (toned down) — styles Mintlify's native /. No mode:custom → pages stay web-editable. Global-e orange #F15A2B. ⚠️ SELECTOR: `.card`, WITH THE DOT. Mintlify renders as

— a CLASS, not a custom element. This block was originally written against a bare tag selector (`card{…}`) which matched nothing, so the whole card design — surface, grey→orange icon hover — was silently inert and the tiles fell back to Mintlify's own `bg-white`. Found 2026-07-28 while checking the landing page against the canvas colour; the dot went in on enterprise and nce then, and on pro 2026-07-29 with the theme alignment. If cards ever look unstyled again, check this first. Surface is pure #FFFFFF, i.e. the same as the white page canvas all three tiers carry; the card reads through its hairline border and hover lift, not through a fill. The surface has to be chosen against whatever canvas the tier is carrying, so do NOT change one without the other, and in particular: · the cool #FAFAF9 grey this block used to name never actually rendered — the bare-tag selector meant tiles were always white in practice, and switching to `.card` made the grey visible for the first time. On a white canvas it reads as flat grey boxes (rejected on sight 2026-07-28); · the warm #F7F5EB panel belongs with the warm #FDFDF7 canvas of the discarded warm-canvas variant — see the recovery note in the page background block near the end of this file. ========================================================================= */ .card{ border-radius:14px !important; border:1px solid rgba(33,29,26,.10) !important; background:#FFFFFF !important; /* matches the white page canvas; border+hover carry the card */ box-shadow:none !important; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease !important; } .card:hover{ transform:translateY(-2px); border-color:rgba(241,90,43,.45) !important; box-shadow:0 2px 4px rgba(33,29,26,.05), 0 16px 34px -18px rgba(33,29,26,.20) !important; } .card .icon, .card svg{ color:#6B6560 !important; transition:color .15s ease !important; } .card:hover .icon, .card:hover svg{ color:#F15A2B !important; } .dark .card{ border-color:rgba(255,255,255,.10) !important; background:rgba(255,255,255,.02) !important; } .dark .card:hover{ border-color:rgba(239,106,61,.50) !important; } .dark .card .icon, .dark .card svg{ color:#A79E96 !important; } .dark .card:hover .icon, .dark .card:hover svg{ color:#EF6A3D !important; } /* Hide the floating "Ask a question" assistant input site-wide. Keeps the top "Ask Assistant" button (#assistant-entry) — only the docked floating bottom-bar variant is removed. */ .chat-assistant-floating-input, chat-assistant-floating-input { display: none !important; } /* ========================================================================= Inline content links → Mintlify native (no colour override) The site-wide blue override — #2563eb / #60a5fa on p/li/td/th links inside #content-area — was REMOVED 2026-07-28 across all three tiers. Inline prose links now inherit Mintlify's own prose colour (var(--tw-prose-links)), which keeps light/dark parity for free. Do not reintroduce a link-colour override here. Only the table-header weight fix remains. ========================================================================= */ #content-area th a{ font-weight:400 } /* markdown-table header row: match body-cell link weight */ /* keep the custom home page (.ge-home) links on brand — inherit + orange hover, which is the shipped grey-card home design, not the native prose colour */ #content-area .ge-home p a, #content-area .ge-home li a, #content-area .ge-home td a, #content-area .ge-home th a{ color:inherit } #content-area .ge-home p a:hover, #content-area .ge-home li a:hover, #content-area .ge-home td a:hover, #content-area .ge-home th a:hover{ color:var(--ge-accent) } /* ---------- divider between sidebar nav and page content ---------- Draws a hairline on the right edge of the left navigation column so the sidebar reads as visually separate from the content area. Colour tracks the theme (light/dark) via Mintlify's `.dark` / [data-theme] toggle. NOTE: does not appear on mode:custom / mode:center pages (no sidebar). */ #sidebar{ border-right:1px solid #ECEAE8 } :is(.dark,[data-theme="dark"]) #sidebar{ border-right-color:#332B25 } /* ---------- sidebar: group-title weight + depth legibility ---------- NOTE: this tier previously had NO group-title styling at all, so this block introduces both the top-level bold treatment AND the depth ladder. Kept byte-identical in behaviour to the enterprise tier (tiers do not propagate — every style.css is edited separately). */ .sidebar-group-header{font-weight:600 !important} /* ---------- sidebar: depth legibility (UX-session feedback, 2026-07-28) ---------- PROBLEM the UX reviewers reported: only the FIRST group level had a visual treatment. Sub-groups (49 of them) and sub-sub-groups (3) rendered at the same weight and colour as leaf page links, so the ONLY depth signal was the inline padding-left step (1rem → 1.75rem → 2.5rem, i.e. 0.75rem per level). Indentation alone is a weak cue once the tree is 4 levels deep. FIX = two independent, additive cues: (a) a typographic LADDER so each level differs in weight + colour, and a group toggle never looks like a page link; (b) vertical INDENT RAILS (the file-tree convention) so a child's ownership is traceable by eye without counting pixels of indent. DEPTH SELECTORS — verified against the local mint dev DOM 2026-07-28. Every group is

children

; leaf pages are

. Depth is a NESTING question, so we select by ancestor chain, never by the inline padding-left (see the note above — React reformats that string after any interaction and substring matches die). L1 = li[data-group-tag] not inside another → 11 top-level groups L2 = one level of nesting → 49 sub-groups L3 = two levels of nesting → 3 sub-sub-groups The :not() with a descendant combinator is Selectors-4 and already proven in this stylesheet (it shipped in the original bold-groups rule). */ /* --- (a) typographic ladder: L1 bold/darkest → L2 → L3 → page lightest --- */ /* L1 — top-level group. Heaviest, darkest, plus block separation above so the 11 sections read as discrete chunks rather than one continuous list. */ #navigation-items li[data-group-tag]:not(li[data-group-tag] li[data-group-tag]) > button{ font-weight:700 !important; color:#111827 !important; /* gray-900 */ letter-spacing:-0.005em; } #navigation-items ul.sidebar-group > li[data-group-tag] + li[data-group-tag], #navigation-items ul.sidebar-group > li + li[data-group-tag]{ margin-top:0.55rem; /* air between top-level sections */ } /* L2 — sub-group. Clearly a heading (semibold) but one notch below L1. */ #navigation-items li[data-group-tag] li[data-group-tag]:not(li[data-group-tag] li[data-group-tag] li[data-group-tag]) > button{ font-weight:600 !important; color:#374151 !important; /* gray-700 */ } /* L3 — sub-sub-group. Medium weight; still visibly a group, not a page. */ #navigation-items li[data-group-tag] li[data-group-tag] li[data-group-tag] > button{ font-weight:500 !important; color:#4b5563 !important; /* gray-600 */ } /* Leaf page links — lightest rung, so a page never competes with a group at the same indent. Excludes the ACTIVE page, which the theme paints with bg-primary/10 + text-primary and must keep winning. */ #navigation-items li:not([data-group-tag]) > a:not([aria-current="page"]){ font-weight:400 !important; color:#6b7280 !important; /* gray-500 */ } #navigation-items li:not([data-group-tag]) > a:not([aria-current="page"]):hover{ color:#111827 !important; /* restore the theme's hover feedback */ } /* The chevron is the "I expand" affordance and only groups have one (pages are , never