/* ========================================================================= 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. HOUSE PATTERN. `managing-orders.mdx` already carries this fix inline on 15 images — style={{display:"inline-block",verticalAlign:"text-bottom",margin:0}} — so someone hit this before and fixed one page by hand. This rule uses the same three values deliberately, so the two mechanisms agree. Those inline styles are now redundant (they win on specificity and say the same thing); they are left in place rather than swept out in an unrelated change. ========================================================================= */ .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-glimb:#B9BAC2; --ge-gline:#D8D9DF; --ge-gline-e:#C6C7CF; --ge-blue:#2F6DB0; --ge-blue-soft:#8FA6C4; --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-glimb:#565B65; --ge-gline:#3E434C; --ge-gline-e:#4B505A; --ge-blue:#7FB0EC; --ge-blue-soft:#6E86A8; --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} /* ---------- API reference landing — distinct structure (no hero band) ---------- */ .ge-ref-lead{max-width:760px;margin:0 auto;text-align:center;padding:56px 0 6px} .ge-ref-lead .ge-eyebrow{font-family:ui-monospace,Menlo,monospace;text-transform:none;letter-spacing:0} .ge-ref-lead h1{font-size:clamp(30px,4.6vw,46px);line-height:1.05;letter-spacing:-.028em;font-weight:720; margin:12px 0 0;color:var(--ge-ink);text-wrap:balance} .ge-ref-lead p{font-size:17px;color:var(--ge-ink-soft);max-width:60ch;margin:14px auto 0;line-height:1.5} .ge-quicklinks{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:20px} .ge-quicklinks a{font-size:13px;font-weight:600;color:var(--ge-ink);background:var(--ge-card); border:1px solid var(--ge-line);border-radius:999px;padding:7px 14px;text-decoration:none; transition:border-color .15s ease,color .15s ease} .ge-quicklinks a:hover{border-color:var(--ge-accent);color:var(--ge-accent)} .ge-centerpiece{display:grid;grid-template-columns:1fr 1.05fr;gap:18px;margin:30px 0 10px;align-items:stretch} .ge-steps{background:var(--ge-card);border:1px solid var(--ge-line);border-radius:var(--ge-radius); padding:24px;box-shadow:var(--ge-shadow);display:flex;flex-direction:column} .ge-steps h3{margin:0 0 18px;font-size:16px;font-weight:680;letter-spacing:-.01em;color:var(--ge-ink)} .ge-steps ol{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:15px;flex:1} .ge-steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start;font-size:14px; color:var(--ge-ink-soft);line-height:1.45} .ge-steps li::before{content:counter(s);flex:0 0 auto;width:24px;height:24px;border-radius:50%; background:var(--ge-tint);color:var(--ge-accent);font-weight:700;font-size:12.5px; font-family:ui-monospace,Menlo,monospace;display:grid;place-items:center;margin-top:1px} .ge-steps li b{color:var(--ge-ink);font-weight:640} .ge-steps li code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--ge-tint-2); border:1px solid var(--ge-line);border-radius:5px;padding:0 5px;color:var(--ge-ink)} .ge-steps .ge-btn{margin-top:20px;align-self:flex-start} .ge-code-col{display:flex;flex-direction:column;gap:8px;min-width:0} .ge-code-col .lbl{margin:0;font-size:11.5px;font-weight:640;letter-spacing:.05em;text-transform:uppercase; color:var(--ge-ink-soft)} @media(max-width:820px){.ge-centerpiece{grid-template-columns:1fr}} /* modest heading (no hero band) */ .ge-ref-head{text-align:center;padding:52px 0 4px} .ge-ref-head .ge-eyebrow{font-family:ui-monospace,Menlo,monospace;text-transform:none;letter-spacing:0} .ge-ref-head h1{font-size:clamp(30px,4.6vw,44px);line-height:1.05;letter-spacing:-.028em;font-weight:720; margin:12px 0 0;color:var(--ge-ink);text-wrap:balance} .ge-ref-head p{font-size:16.5px;color:var(--ge-ink-soft);max-width:56ch;margin:12px auto 0;line-height:1.5} /* globe illustration centerpiece (self-contained STATIC SVG, no image asset) */ .ge-apihero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px; max-width:980px;margin:34px auto 10px} .ge-apicol{display:flex;flex-direction:column;justify-content:center} .ge-jsonlbl{font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--ge-ink-soft);opacity:.85;margin-bottom:12px} .ge-codeframe{border:1px solid var(--ge-line);border-radius:12px;overflow:hidden;flex:1; display:flex;flex-direction:column;justify-content:center; background:var(--ge-card);box-shadow:var(--ge-shadow)} .ge-codebar{display:flex;align-items:center;gap:6px;padding:9px 14px; border-bottom:1px solid var(--ge-line);background:var(--ge-tint-2)} .ge-codebar .dot{width:9px;height:9px;border-radius:50%;background:var(--ge-line-strong)} .ge-codebar .fname{margin-left:8px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px; color:var(--ge-ink-soft)} .ge-json{margin:0;font-family:ui-monospace,Menlo,monospace;font-size:14.5px; line-height:2;white-space:pre;overflow-x:auto} .ge-json .k{color:var(--ge-accent-press)} .ge-json .s{color:var(--ge-blue)} .ge-json .n{color:var(--ge-good)} .ge-json .p{color:var(--ge-ink-soft);opacity:.65} /* endpoint method + path (Mintlify-style bar) — clickable link to the reference guide */ .ge-endpoint{display:flex;align-items:center;gap:12px;background:var(--ge-card); border:1px solid var(--ge-line-strong);border-radius:12px;padding:14px 16px; box-shadow:var(--ge-shadow);text-decoration:none;cursor:pointer; transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease} .ge-endpoint:hover{border-color:var(--ge-accent);box-shadow:var(--ge-shadow-hover);transform:translateY(-1px)} .ge-method{background:#49cc90;color:#fff;font-family:ui-monospace,Menlo,monospace; font-weight:700;font-size:12.5px;letter-spacing:.06em;padding:5px 11px;border-radius:7px;flex:none} .ge-epath{font-family:ui-monospace,Menlo,monospace;font-size:15px;color:var(--ge-ink); overflow-x:auto;white-space:nowrap} .ge-epath-arrow{width:18px;height:18px;flex:none;margin-left:auto;color:var(--ge-ink-soft); transition:color .15s ease,transform .15s ease} .ge-endpoint:hover .ge-epath-arrow{color:var(--ge-accent);transform:translateX(3px)} /* request + response shape, stacked under the endpoint bar */ .ge-schema{display:flex;flex-direction:column;gap:12px;margin-top:14px} .ge-schema-block{background:var(--ge-card);border:1px solid var(--ge-line);border-radius:12px; padding:12px 14px;box-shadow:var(--ge-shadow)} .ge-schema-h{display:flex;align-items:center;gap:8px;margin-bottom:8px} .ge-schema-tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:3px 9px;border-radius:999px} .ge-schema-tag.req{background:var(--ge-tint);color:var(--ge-accent-press)} .ge-schema-tag.res{background:rgba(73,204,144,.16);color:#2f8f66} .ge-schema-type{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--ge-ink-soft)} .ge-fields{list-style:none;margin:0;padding:0} .ge-fields li{display:flex;align-items:center;gap:10px;padding:5px 0; border-top:1px solid var(--ge-line);font-family:ui-monospace,Menlo,monospace;font-size:13px} .ge-fields li:first-child{border-top:none} .ge-fields .fn{color:var(--ge-ink);font-weight:600} .ge-fields .ft{color:var(--ge-blue);font-size:12px} .ge-fields .fr{margin-left:auto;color:var(--ge-accent-press);font-size:10.5px;font-weight:700; letter-spacing:.04em;text-transform:uppercase} .ge-art{display:flex;align-items:center;justify-content:center;flex:1} .ge-art svg{width:100%;max-width:340px;height:auto} .ge-worldmap{width:100%;max-width:440px;height:auto} .ge-globe .sphere{fill:var(--ge-tint-2);stroke:var(--ge-glimb);stroke-width:1.4} .ge-globe .gwire-mer{fill:none;stroke:var(--ge-accent);stroke-width:2.3;stroke-linecap:round; stroke-dasharray:0 7;opacity:.82} .ge-globe .gwire-par{fill:none;stroke:var(--ge-blue-soft);stroke-width:2.1;stroke-linecap:round; stroke-dasharray:0 8;opacity:.82} .ge-globe .pin{fill:var(--ge-blue)} .ge-globe .pinr{fill:none;stroke:var(--ge-blue);stroke-width:1.6;opacity:.5} /* section tab bar */ .ge-tabs{display:flex;justify-content:center;gap:8px;margin:20px auto 0;padding:0 8px;flex-wrap:wrap} .ge-tabs a{padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ge-ink-soft); border:1px solid var(--ge-line-strong);background:var(--ge-card);text-decoration:none;white-space:nowrap; transition:border-color .15s ease,color .15s ease} .ge-tabs a:hover{border-color:var(--ge-accent);color:var(--ge-accent)} .ge-tabs a.active{background:var(--ge-accent);color:#fff;border-color:var(--ge-accent)} @media(max-width:820px){.ge-apihero{grid-template-columns:1fr;gap:16px}.ge-json{order:2}} .ge-globe .arc{fill:none;stroke:var(--ge-accent);stroke-width:2;stroke-linecap:round} .ge-globe .halo-node{fill:var(--ge-accent);opacity:.14} .ge-globe .node{fill:var(--ge-card);stroke:var(--ge-accent);stroke-width:2.4} .ge-globe .core{fill:var(--ge-accent)} .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}} /* ---------- sidebar: bold navigation group titles ---------- Mintlify renders EVERY group toggle (top-level AND nested) as

. Leaf pages render as , never

. 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 → 9 top-level groups L2 = one level of nesting → 47 sub-groups L3 = two levels of nesting → 4 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 9 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

​To install Global-e modules using a zip file

To install Global-e modules using a zip file